목표#
인포그래픽은 문서를 꾸미는 요소가 아니라 복잡한 값, 변화, 비교와 절차를 더 빨리 읽게 하는 도구다. 시각 자료를 추가하기 전에 텍스트나 표보다 실제로 이해가 쉬워지는지 확인한다.
먼저 표현 방식을 고른다#
| 질문 | 기본 표현 | 이유 |
|---|---|---|
| 정확한 값을 비교하는가 | 표 | 수치를 빠짐없이 확인하고 복사할 수 있음 |
| 시간에 따른 변화를 보는가 | 선 차트 | 방향과 변곡을 확인하기 쉬움 |
| 항목의 크기나 순위를 비교하는가 | 가로 막대 차트 | 긴 한글 항목명과 크기 차이를 함께 읽기 쉬움 |
| 구성, 관계나 절차를 설명하는가 | 도식 | 흐름과 연결을 공간으로 보여줄 수 있음 |
| 실제 화면이나 상황이 근거인가 | 스크린샷 또는 사진 | 관찰 대상 자체를 보존할 수 있음 |
정확한 값이 필요한데 원자료가 없으면 차트를 새로 그리지 않는다. 원본 차트를 보존하고 캡션과 본문에서 해석 범위와 한계를 설명한다.
프로젝트가 직접 만든 관계·절차 도식은 텍스트 검색, 반응형 재배치와 내부 링크가 중요하면 구조화된 HTML을 우선한다. 외부 원본의 모양 자체가 근거이거나 고정된 편집본이 필요하면 SVG 또는 PNG를 사용한다.
공통 시각 규칙#
- 한 시각 자료는 하나의 질문에 답한다.
- 제목은 결론형 한 문장, 설명은 범위와 읽는 방법 한 문장으로 제한한다.
- 한 화면의 주요 비교 항목은 4개 이하를 기본으로 한다.
- 그림자, 그라데이션, 3D, 장식 아이콘과 배경 패턴을 사용하지 않는다.
- 색은 의미가 있을 때만 사용하고, 같은 의미에는 항상 같은 색을 쓴다.
- 색만으로 상태를 구분하지 않고 라벨, 선 모양 또는 직접 문구를 함께 쓴다.
- 출처, 기간, 단위, 추정 여부와 포함·제외 범위는 이미지 밖 캡션에도 적는다.
크기와 글자#
내부 도식의 편집 기준은 너비 800px다. 게시 PNG는 2배 해상도로 만든다.
| 역할 | 크기 | 기준 |
|---|---|---|
| 제목 | 30px / 700 | 한 줄, 결론형 문장 |
| 설명 | 18px / 400 | 한 줄, 범위 또는 전제 |
| 항목 제목 | 19~25px / 700 | 두 줄까지 허용 |
| 본문 | 17px 이상 / 400 | 카드 안 핵심 설명 |
| 라벨·주석 | 16px 이상 / 400~700 | 상태, 예시와 한계 |
서체는 Pretendard 하나만 사용한다. 32px 바깥 여백과 8px 간격 단위를 사용하며, 텍스트가 넘치면 글자를 줄이는 대신 문구를 줄이거나 구성을 나눈다.
색상#
| 의미 | 값 | 사용 |
|---|---|---|
| 핵심 글자 | #202428 |
제목과 항목 제목 |
| 본문 글자 | #3D4349 |
설명과 본문 |
| 보조 글자 | #5F6670 |
예시, 주석과 축 |
| 표면 | #F6F8FA |
비교 영역의 약한 구분 |
| 근거·선택 | #255F99 / #EAF2F8 |
링크, 현재 초점과 근거 흐름 |
| 검토 필요 | #8B5A00 / #FFF7E8 |
확인 중인 상태 |
| 위험 | #9C4238 / #FFF1EF |
위험 흐름과 실패 조건 |
표#
- 표 위아래 기준선과 행 구분선을 사용하고 모든 셀을 박스로 감싸지 않는다.
- 머리글은 왼쪽 정렬을 기본으로 하고 수치 열은 오른쪽 정렬한다.
- 단위는 머리글에 한 번만 적고 소수점 자릿수를 통일한다.
- 4열 이상은 표 안에서만 가로 이동하며, 모바일에서 이동 가능하다는 안내를 표시한다.
- 셀 안에 긴 문단을 넣지 않는다. 설명이 길면 표 아래 본문으로 옮긴다.
- 정확한 수치는 표로 남기고, 차트가 있더라도 표나 원자료로 다시 확인할 수 있게 한다.
차트#
- 선 차트는 시간 변화에만 사용하고 불필요한 점 표시는 제거한다.
- 막대 차트는 0에서 시작한다. 값 순위 비교는 가로 막대를 우선한다.
- 원형 차트는 항목이 3개 이하이고 전체 합이 중요한 경우에만 검토한다.
- 범례보다 선과 막대 옆의 직접 라벨을 우선한다.
- 격자선은 필요한 수만 연한 회색으로 표시한다.
- 추정치, 불완전한 기간과 불확실성은 문구 또는 선 모양으로 함께 표시한다.
이미지와 스크린샷#
- 스크린샷은 관찰에 필요한 영역만 남기되 조작으로 오해될 자르기는 피한다.
- 얼굴, 계정명, 회사, 위치와 연락처 같은 개인정보를 제거한다.
- 컨셉 이미지는
AI 생성 컨셉으로 표시하고 사용자 증거나 실제 제품 화면처럼 설명하지 않는다. - 사진은 맥락을 보여줄 때만 사용하고 장식 목적으로 반복하지 않는다.
접근성과 출처#
W3C는 차트와 도식 같은 복합 이미지에 짧은 설명과 핵심 정보를 담은 긴 설명을 함께 제공하도록 안내한다. [1] 이 Wiki는 목적 중심 alt, 구조적으로 연결된 캡션, 본문의 해석과 원본 보기 링크를 함께 둔다.
영국 정부 Analysis Function은 불필요한 장식과 진한 격자선을 제거하고 축, 계열, 출처와 단위를 명확히 표시하며 가능하면 원자료를 제공하도록 권고한다. [2]
생성 순서#
- 시각 자료가 답할 질문과 근거 source-id를 적는다.
- 표, 차트, 도식, 이미지 중 하나를 선택한다.
- 제목, 핵심 관계, 캡션과 긴 설명을 먼저 글로 작성한다.
- 공통 크기, 글자와 색상 규칙으로 SVG 또는 HTML을 만든다. HTML 도식은 작은 화면에서 의미 순서대로 재배치하고 가로 스크롤을 만들지 않는다.
- 원본 너비와 실제 Wiki 본문 너비, 모바일 축소 상태를 확인한다.
- 원본과 게시본을 새 raw source package에 저장하고 Wiki frontmatter로 연결한다.
관련 문서: ADR-0004: Wiki 정보 구조와 시각 자료, ADR-0005: Wiki 디자인 시스템, 시각 자료 안내