3. 기호 설계 — 보면 바로 이해되는 기호
◇(마름모)를 보면 "분기구나" 합니다. 🔒를 보면 "잠김이구나" 합니다. 그런데 ★를 보면? "뭐지?"
기호가 좋으면 설명 없이 이해됩니다. 나쁘면 범례를 봐야 합니다.
1. 기호 하나 = 의미 하나
가장 기본적인 규칙입니다.
| 문제 | 예시 | 해결 |
|---|---|---|
| 하나의 기호에 두 가지 뜻 | □가 "프로세스"이기도 하고 "데이터"이기도 함 | 모양을 다르게 |
| 하나의 뜻에 기호가 둘 | "프로세스"를 □도 쓰고 ▢도 씀 | 하나로 통일 |
| 뜻이 있는데 기호가 없음 | "에러"를 표현할 기호가 없어서 텍스트로만 | 기호 추가 |
2. 모양이 뜻을 암시하면 최고
기호를 보고 뜻을 유추할 수 있는 정도:
- 투명: 보면 바로 안다 → 🔒 = 잠김, 📤 = 제출
- 반투명: 배우면 납득 → ◇ = 분기 (갈림길 느낌)
- 불투명: 그냥 외워야 함 → □ = 프로세스 (왜?)
투명할수록 좋습니다. 이모지가 강력한 이유가 이겁니다. 💳(결제), 🎉(완료), ✍️(작성) — 텍스트 없이도 대충 감이 옵니다.
3. 기호끼리 확실히 달라야 한다
비슷한 기호를 다른 의미로 쓰면 헷갈립니다.
- ❌ #3B82F6 (파랑)과 #60A5FA (연한 파랑) → 화면에서 거의 같아 보임
- ✅ 파랑과 빨강 → 즉시 구분
규칙: 차이를 크게. 모니터에서 1m 떨어져도 구분되게.
4. 기호는 6개 이내
사람의 작업기억 용량은 7±2개입니다. 기호 종류가 많으면:
- 범례를 계속 봐야 함
- 외우다가 피로해짐
- 결국 무시하고 텍스트만 읽음
6개 이내면 외우지 않아도 자연스럽게 인식됩니다.
5. 그림 + 텍스트를 같이 써라
사람의 뇌는 시각 채널과 언어 채널이 따로 있습니다.
- 아이콘만 → "이게 뭐지?"
- 텍스트만 → 스캔이 안 됨
- 아이콘 + 텍스트 → 두 채널 동시 → 기억 2배
노드에 📤 미션 제출처럼 아이콘과 텍스트를 같이 넣는 게 가장 강력합니다.
6. 체크리스트
- 모든 기호가 딱 하나의 의미만 갖고 있다
- 서로 다른 기호가 눈으로 즉시 구분된다
- 기호만 봐도 대략 뭔지 유추할 수 있다
- 기호 종류가 6개를 넘지 않는다
- 아이콘 + 텍스트를 같이 쓰고 있다
다음: 02-4. 체크리스트 총정리