프롬프트 엔지니어링 101
실제로 사용해보고 선별한 프롬프트 위주로 아카이빙합니다.
All
시스템 프롬프트
학습
시각화
클로드
Cursor
개발
cursor
튜터
windsurf
클로드 시각화 끝판왕 프롬프트 (1)
Created by
- AI커피챗
Created at
Category
- 시각화
- 클로드
<InfographicDesignPrompt>
<목적>텍스트 기반 콘텐츠를 전문 디자이너 수준의 완성도 높은 모던 인포그래픽으로 변환합니다. 정보 설계와 시각적 디자인 모두 최고 수준의 완성도를 목표로 합니다.</목적>
<디자인사양>
<컬러스킴>
<palette>
<color name='주요색-1' rgb='01A9F4' r='1' g='169' b='244' />
<color name='보조색-1' rgb='80D4FF' r='128' g='212' b='255' />
<color name='보조색-2' rgb='0076AC' r='0' g='118' b='172' />
<color name='중성-1' rgb='F5F7FA' r='245' g='247' b='250' />
<color name='중성-2' rgb='E1E7ED' r='225' g='231' b='237' />
<color name='중성-3' rgb='6F7C8C' r='111' g='124' b='140' />
<color name='중성-4' rgb='1A2533' r='26' g='37' b='51' />
</palette>
</컬러스킴>
<디자인요소>
<item>모던하고 깔끔한 디자인 적용</item>
<item>섹션 제목을 밝은 파란색(#01A9F4)으로 강조</item>
<item>둥근 모서리의 카드 디자인 (16px 반경)</item>
<item>물결 패턴과 도트를 사용한 시각적 흐름 표현</item>
<item>정보 계층구조를 명확히 하는 타이포그래피</item>
<item>시각적 요소와 텍스트의 균형감 있는 배치</item>
<item>데이터는 도넛 차트와 프로그레스 바로 시각화 (파란색 그라데이션)</item>
</디자인요소>
<타이포그래피>
<스타일 유형="제목">32px, 볼드, 색상: #1A2533</스타일>
<스타일 유형="섹션제목">24px, 볼드, 색상: #01A9F4</스타일>
<스타일 유형="카드제목">20px, 세미볼드, 색상: #1A2533</스타일>
<스타일 유형="본문텍스트">16px, 색상: #6F7C8C, 줄간격 1.5</스타일>
<스타일 유형="강조텍스트">16px, 색상: #01A9F4, 볼드 또는 이탤릭</스타일>
<폰트>모든 텍스트에 Pretendard 또는 Inter 폰트 적용</폰트>
</타이포그래피>
<레이아웃>
<섹션 이름="헤더">물방울 또는 파도 패턴을 배경으로 한 섹션 제목과 페이지 제목</섹션>
<섹션 이름="카드컨테이너">여러 카드를 그리드 또는 플렉스 레이아웃으로 배치</섹션>
<섹션 이름="차트카드">파란색 그라데이션으로 데이터 시각화와 인사이트를 포함</섹션>
<섹션 이름="솔루션카드">원형 아이콘 또는 배지, 제목, 설명문으로 구성</섹션>
<섹션 이름="풋터">출처 정보 및 요약 정보 표기</섹션>
</레이아웃>
<컴포넌트>
<요소 이름="도넛차트">밝은 파란색(#01A9F4)과 연한 회색(#E1E7ED) 사용</요소>
<요소 이름="프로그레스바">파란색 그라데이션 진행 표시줄 (#01A9F4 → #80D4FF)</요소>
<요소 이름="인사이트바">어두운 파란색 배경(#0076AC)에 흰색 텍스트</요소>
<요소 이름="솔루션배지">파란색 배경(#01A9F4)에 흰색 텍스트</요소>
<요소 이름="인용구">파란색 왼쪽 테두리와 연한 파란색 배경(rgba(1, 169, 244, 0.08))</요소>
</컴포넌트>
</디자인사양>
<입력분석과정>
<단계>1. 콘텐츠 유형 분류 (순차적 프로세스, 개념 설명, 비교 분석, 계층 구조 등)</단계>
<단계>2. 핵심 정보와 관계 추출</단계>
<단계>3. 적합한 시각화 형식 선택 (플로우차트, 마인드맵, 타임라인, 비교 테이블 등)</단계>
<단계>4. 정보 계층 구조화 및 시각적 우선순위 설정</단계>
</입력분석과정>
<레이아웃패턴>
<패턴 유형="플로우차트" 목적="프로세스 시각화">
<특징>방향성 있는 화살표로 단계 연결</특징>
<특징>각 단계는 파란색 그라데이션 아이콘으로 표현</특징>
<특징>주요 분기점은 다이아몬드 형태로 강조</특징>
</패턴>
<패턴 유형="정보카드그리드" 목적="개념/아이디어 설명">
<특징>일관된 사이즈의 카드 배열</특징>
<특징>각 카드는 아이콘, 제목, 설명으로 구성</특징>
<특징>물방울 무늬 배경으로 시각적 흥미 부여</특징>
</패턴>
<패턴 유형="타임라인" 목적="시간적 진행">
<특징>곡선 또는 직선 타임라인으로 진행 표현</특징>
<특징>각 시점에 원형 마커와 설명 카드 배치</특징>
<특징>중요 이벤트는 파란색으로 강조</특징>
</패턴>
<패턴 유형="비교테이블" 목적="대조 분석">
<특징>깔끔한 그리드 레이아웃</특징>
<특징>헤더는 파란색 배경에 흰색 텍스트</특징>
<특징>행 간격에 미묘한 그라데이션 적용</특징>
</패턴>
</레이아웃패턴>
<콘텐츠유형별시각화전략>
<전략 유형="프로세스/단계설명">
<방법>방향성 있는 플로우차트</방법>
<방법>단계 번호와 파란색 아이콘</방법>
<방법>각 단계의 핵심을 짧은 문구로 강조</방법>
</전략>
<전략 유형="개념/이론설명">
<방법>중앙에서 퍼져나가는 마인드맵</방법>
<방법>계층적 카드 배치</방법>
<방법>관련 개념을 연결선으로 표현</방법>
</전략>
<전략 유형="비즈니스가이드/팁">
<방법>체크리스트 또는 번호 목록 시각화</방법>
<방법>각 항목에 관련 아이콘 배치</방법>
<방법>중요 팁은 파란색 배경 강조 박스</방법>
</전략>
<전략 유형="데이터중심콘텐츠">
<방법>적절한 차트 유형 선택 (파란색 계열)</방법>
<방법>핵심 인사이트를 시각적으로 분리</방법>
<방법>정량적 데이터와 정성적 해석 조합</방법>
</전략>
</콘텐츠유형별시각화전략>
<출력형식>
<형식>1. SVG: 깔끔한 벡터 그래픽으로 확장성 보장</형식>
<형식>2. HTML/CSS: 반응형 웹 디스플레이 고려</형식>
<형식>3. 접근성: 적절한 대체 텍스트 및 색상 대비 확보</형식>
</출력형식>
<실행가이드라인>
<단계>1. 입력 텍스트를 면밀히 분석하여 핵심 구조와 관계 파악</단계>
<단계>2. 콘텐츠 유형에 가장 적합한 레이아웃 패턴 선택</단계>
<단계>3. 주요색(#01A9F4)과 보조색을 활용한 시각적 계층 구조 표현</단계>
<단계>4. 적절한 아이콘과 시각적 요소로 콘텐츠 강화</단계>
<단계>5. 높은 가독성과 직관적인 정보 흐름 우선</단계>
<단계>6. 불필요한 장식 요소는 최소화하고 정보 전달에 집중</단계>
<단계>7. 모바일 화면에서도 읽기 쉽도록 반응형 설계 고려</단계>
</실행가이드라인>
<원본콘텐츠>
[여기에 변환하고자 하는 원본 콘텐츠를 넣어주세요]
</원본콘텐츠>
</InfographicDesignPrompt>
Copyright © AICoffeeChat. All rights reserved.
예시 이미지
