핵심 비유
'반찬 가짓수' 비유 — 식당에서 반찬이 3가지면 뭘 먹을지 명확한데, 12가지가 깔리면 오히려 뭘 먹어야 할지 모른다. 색도 똑같다. 색을 많이 쓸수록 화려해지는 게 아니라 시선이 분산되고 유치해진다. 잘 만든 앱은 대부분 주조색 1 + 보조색 1~2 + 무채색(회색조) 으로 끝낸다. 색은 적게 쓰되, 그 적은 색이 '강조해야 할 곳'을 정확히 가리키게 한다.
핵심 포인트
- 색은 3가지면 충분 — 주요색 1개(브랜드/강조), 보조색 1~2개, 나머지는 무채색 배경. 색이 많을수록 "뭐가 중요한지" 사라진다.
- 색에는 감정·의미가 있다 — 토스 파랑(신뢰), 당근 주황(활기), 카카오 노랑(친근). 브랜드는 색으로 성격을 말한다.
- 대비율 4.5:1 이상 — 색이 예뻐도 글씨가 안 읽히면 실패(C4 대비와 직결).
- 강조색은 '행동 버튼' 하나에 아껴 쓴다 — 모든 곳에 강조색을 칠하면 강조가 사라진다.
- 무채색(회색조)이 화면의 90%를 차지하고, 색은 양념처럼 쓰는 게 프로의 비율.
- 색에는 약속된 의미도 있다 — 빨강=경고/삭제, 초록=성공/완료, 노랑=주의. 이 약속을 어기면(삭제 버튼을 초록으로) 사용자가 헷갈린다.
교사 팁
"좋아하는 앱 스크린샷에서 색이 몇 개 쓰였는지 세어보세요"로 시작(design-sense color-theory classGuide) — 대부분 3가지 이내라는 발견이 도입의 핵심. 이어서 같은 화면을 '색 8개 버전'으로 바꾼 예시를 보여주면 절제의 가치가 단번에 온다. design-sense 분석 탭으로 인기 앱 팔레트를 추출해 '주조/보조/무채색'으로 분류하고, 내디자인 탭에서 학생이 직접 5색 이내 팔레트를 구성해 라이브 프리뷰로 확인한다.
좋은 예 vs 나쁜 예
- ✅ 주요색 1 + 보조색 1 + 무채색: 통일감, 강조 지점 명확, 눈이 편안. (design-sense
color-theory)
- ❌ 빨강+파랑+초록+노랑+보라 혼합: 시선 분산, 중요도 불명, 유치·산만.
- ✅ 토스 화면: 거의 흰색·회색인데 '보내기' 버튼만 파랑 — 눈이 자동으로 버튼으로 감. ❌ 모든 메뉴를 각기 다른 색으로 칠한 화면: 알록달록하지만 어디부터 봐야 할지 모름.
실습·평가
- 실습: design-sense 내디자인 탭에서 '내가 만들 앱'의 팔레트를 주조색 1 + 보조색 1~2 + 무채색으로 구성 → 라이브 프리뷰. (분석 탭에서 뽑은 색을 seed로 가져와도 됨)
- O/X 퀴즈: "색을 많이 쓸수록 디자인이 화려하고 좋아진다." → X (3색 이내 절제가 기본)