스케치 인포그래픽
당신은 하나의 자료를 설명하는 한 페이지를 만듭니다: 제목, 패널들의 그리드, 그리고 출처를 표시하는 하단부. 각 패널은 작은 다이어그램과 한두 문장으로 하나의 포인트를 전달합니다. 당신은 이 페이지를 JSON 스펙으로 작성합니다; scripts/build.mjs 스크립트가 그리드를 배치하고, Excalidraw의 자체 렌더러로 그린 후, 검사하고 PNG와 편집 가능한 .excalidraw 파일을 생성합니다.
그리는 것은 쉬운 부분입니다. 모든 패널이 원본 자료에 대해 진실된 내용을 담고, 원본보다 더 적은 단어로 표현할 때에만 페이지를 게시할 가치가 있습니다.
1. 자료를 읽고 페이지 계획하기
모든 내용을 읽으십시오. 그런 다음 JSON 이전에 답변에 계획을 작성하십시오:
- 제목 (Title): 2~5단어로 주제를 표현합니다. 부제 (Subtitle): 누가 말했으며 무엇에 관한 것인지 한 줄로 표시합니다 ("소도시에서 버스가 새로운 철도 노선보다 나은 이유에 대한 교통 계획자의 의견").
- 형태 (Shape): 사용자가 다른 형식을 지정하거나 공유한 예시 페이지에 다른 형태가 없는 한 3:4 세로형 (1500×2000)을 사용합니다. 다른 형식은 references/spec.md를 참조하세요.
- 6~7개의 패널, 페이지를 채우기에 충분한 수. 3:4 페이지는 약 4개의 행을 담습니다: 두 개의 반쪽 패널로 이루어진 세 개의 행과 하나의 전체 너비 패널. 각 패널은 요점을 전달하는 제목(주제 레이블이 아님), 그림 아이디어, 최대 두 문장(약 30단어)의 요점으로 구성됩니다. 전체 너비 패널은 가장 풍부한 예시를 담습니다.
- 하단부 (Footer): 출처 (저자, 제목, 날짜) 및 출처가 제시하는 주의사항 (예: "설계 노트 및 프로토타입이지 출시된 제품이 아님").
자료가 길거나 방향성이 불명확한 경우 사용자의 계획 승인을 기다리십시오; 그렇지 않으면 바로 진행하십시오.
사용자가 공유한 예시 페이지를 기반으로 작업하는 경우: 먼저 해당 페이지의 패널을 나열하고, 사용자가 더 적은 수를 요청하지 않는 한 모든 패널을 계획에 포함시키십시오. 예시 페이지의 외관을 맞추면서 패널을 하나라도 빼는 것은 가장 흔한 실수입니다.
원본 자료에 충실하십시오. 페이지에 있는 모든 숫자, 이름 및 주장은 반드시 원본 자료에 있어야 합니다. 의견은 출처를 표시하십시오 ("저자는 ...라고 주장합니다"). 당신이 직접 포인트를 설명하기 위한 예시를 추가하는 경우 페이지에 그 사실을 명시하십시오 ("어떻게 그런 일이 일어날 수 있는지에 대한 가상의 예시"). 정직하게 그릴 수 없는 내용은 수치를 조작하지 말고 생략하십시오.
2. 각 패널의 그림 선택하기
references/patterns.md에 있는 패턴을 사용하여 패널당 하나의 다이어그램을 사용하십시오: 단계 체인, 전후 비교, 여러 개가 하나로, 소스로 돌아가는 루프, 옵션 비교, 막대 차트, 타임라인. 가장 복잡해 보이는 패턴이 아니라 주장과 일치하는 패턴을 선택하십시오. 포인트가 목록인 패널은 세 개의 레이블이 있는 상자로 표현할 수 있습니다. 그림 내부의 텍스트는 몇 단어로 제한하고 문장을 넣지 마십시오.
색상은 페이지 전체에서 동일한 의미를 전달합니다: 초록은 좋음 또는 기본 경로, 주황은 위험 또는 변경된 사항, 빨강은 실패, 파랑은 조치 대상, 보라는 에이전트 또는 모델, 노랑은 페이지에서 가장 중요한 단일 강조점입니다. 회색은 중립입니다. 색상 이름은 references/spec.md를 참조하세요.
3. 스펙 작성 및 빌드
각 페이지를 자체 폴더에 page.json으로 저장하십시오; 사용자가 지정하지 않은 경우 위치를 물어보십시오. 형식 및 모든 요소 유형은 references/spec.md에 있으며, assets/example.json은 완전한 페이지의 예시입니다. 그런 다음 이 스킬의 폴더에서 다음을 실행하십시오:
node scripts/build.mjs <folder>/page.json
이 명령은 각 패널의 그리기 영역 너비를 출력하고 (너비 내에서 그려야 하며, 높이는 내용에 맞춰 조정됨) 스펙 파일 옆에 page.png와 page.excalidraw를 생성합니다. 런타임이 없는 경우 설치 방법을 안내합니다.
4. 검사하고 수정하기
- 모든 경고를 수정하십시오. 종료 코드 3은 경고와 함께 페이지가 빌드되었음을 의미합니다: 콘텐츠가 페이지보다 더 큼 (몇 픽셀을 잘라야 하는지 표시됨), 요소가 패널 밖으로 나감, 다른 요소와 겹침, 화살표가 텍스트를 통과함, 화살표가 너무 짧아 읽기 어려움, 레이블이 맞지 않아 상자가 커짐, Excalifont에 없는 문자 (→와 같은 화살표, 체크 표시, 이모지)를 사용하여 시스템 폰트로 렌더링됨. 화살표와 체크 표시는 요소로 직접 그리십시오.
- 그런 다음 PNG를 보고 (이미지 파일 열기) 각 패널을 확인하십시오: 눈이 화살표 방향을 올바르게 따라가는지, 모든 화살표와 선이 시작과 끝이 명확한지, 화살촉이 서로 겹치지 않는지, 텍스트가 테두리에 붙어 있지 않은지, 한 행의 패널들이 균형 잡혀 보이는지, 제목이 그림과 일치하는지? 페이지가 꽉 찼는지 아니면 한 패널이 대부분 비어 있는지? 스펙을 수정하고 다시 빌드하십시오. 2~3회 반복하는 것이 일반적입니다.
- 예시 페이지가 있는 경우, 두 페이지를 나란히 패널별로 비교하십시오: 동일한 패널, 동일한 종류의 그림, 비슷한 밀도. 여전히 다른 점을 말씀드리십시오.
- 1단계의 원본 자료와 비교하여 페이지에 그려진 단어들을 한 번 더 읽어보십시오.
5. 전달
사용자에게 PNG와 .excalidraw 파일 경로, 그리고 계획의 한 줄 요약을 제공하십시오. .excalidraw 파일은 excalidraw.com 또는 Excalidraw 앱에서 열어 수동 편집할 수 있으며, 수동 편집 후에는 page.json이 아닌 그 파일이 최종 페이지임을 알리십시오. 다시 빌드하면 수동 편집 내용이 덮어쓰여집니다.
다른 사람이 게시한 페이지를 재현하는 것은 개인적인 학습이나 테스트 목적으로는 괜찮지만, 게시용으로 제공하지 마십시오. 그들의 레이아웃, 표현 및 브랜딩은 그들의 것입니다.