핵심 비유
'요리 레시피' 비유 — 지금까지 색(C1)·글씨(C2)·여백(C3)·버튼·간격이라는 '재료'를 하나씩 배웠다. 디자인 시스템은 그 재료로 만드는 나만의 레시피다. "이 앱은 주조색 파랑, 폰트는 둥근 산세리프, 버튼은 둥근 알약형, 여백은 넉넉히" — 이렇게 규칙을 한 번 정해두면, 어떤 화면을 만들어도 한 몸처럼 일관된다. 잘 만든 앱(토스·당근·배민)은 모두 이런 '레시피 카드'를 갖고 있다.
핵심 포인트
- 디자인 시스템 = 재사용 가능한 규칙 묶음 — 색·폰트·간격·버튼 스타일을 한 번 정해 전체에 일관 적용(E1 일관성의 실현).
- 무에서 만들지 않는다 — 레퍼런스 9종을 분해해 좋은 선택을 빌려온다. 각 앱은 색·분위기·폰트·밀도·그림자·버튼 스타일이 다르다:
- 시스템은 선택의 일관성이다 — 분위기(mood)를 먼저 정하면 색·폰트·버튼이 따라온다.
- 내가 만든 시스템은 이유로 설명할 수 있어야 한다 — "왜 둥근 폰트?" → "급식 앱이라 친근해야 해서".
- 이 시스템이 F2 발표와 갤러리 작품의 토대가 된다.
- 시스템은 누가 쓸 앱인지(타깃) 에서 출발한다 — 초등학생용이면 크고 둥글고 밝게, 금융 앱이면 차분하고 신뢰감 있게. 같은 '좋은 디자인'도 대상에 따라 답이 다르다.
교사 팁
design-sense 내디자인 탭이 이 차시의 메인 도구다. 먼저 레퍼런스 9종을 띄워 "토스와 무신사는 무엇이 다른가?"(색·밀도·폰트·버튼)를 분해 토론한다 — 같은 '앱'인데 분위기가 어떻게 갈리는지 보며 '선택의 묶음'을 체감. 그다음 학생은 ①만들 앱 주제 정하기 ②분위기 1개 선택 ③팔레트(C1)·폰트(C2)·간격(C3)·버튼 스타일을 내디자인 탭에서 설정 → 라이브 프리뷰. A2·C1에서 분석 탭으로 뽑아둔 색을 seed로 가져오면 연속성이 생긴다. 결과는 로컬에 저장되어 F2 갤러리로 이어진다.
좋은 예 vs 나쁜 예
- ✅ 분위기 1개 정하고 색·폰트·버튼을 거기 맞춤 → 일관된 한 벌. (예: '활기찬' → 주황 + 둥근 폰트 + 알약 버튼)
- ❌ 색 따로·폰트 따로·버튼 따로 '예쁜 것만' 골라 붙임 → 따로 노는 화면.
- ✅ '차분한 가계부' → 남색 1색 + 각진 버튼 + 넉넉한 여백으로 끝까지 통일 → 믿음직한 한 벌. ❌ 한 앱에 토스 파랑·당근 주황·무신사 검정을 다 가져와 섞음 → 정체불명.
실습·평가
- 실습: design-sense 내디자인 탭에서 '주제 앱'의 디자인 시스템 완성 — 주조색1+보조1~2+무채색 / 폰트1종·위계3단계 / 간격 8배수 / 버튼 스타일 1종. '레시피 카드 4줄'(분위기·색·폰트·버튼)로 요약 작성.
- O/X 퀴즈: "디자인 시스템은 화면마다 그때그때 예쁜 걸 새로 고르는 것이다." → X (규칙을 한 번 정해 일관 적용)