A~E에서 배운 원리들의 회수(回收) 장입니다. F1(나만의 디자인 시스템)으로 흩어진 결정을 한 벌의 규칙으로 묶고, F2(갤러리 발표·상호 비평)로 그 규칙을 원리의 언어로 검증합니다. 슬라이드마다 강사가 읽고 그대로 말할 수 있는 설명 산문을 넣었습니다.
이 장은 두 동작 하나의 논증이다. F1은 A~E에서 하나씩 배운 결정들(색·글씨·여백·버튼)을 '한 벌의 규칙'으로 묶고, F2는 그 규칙을 친구들 앞에서 원리의 언어로 검증한다. 묶기가 '만드는 손'이라면, 검증은 '보는 눈'(A2 관찰의 완성)이다.
A~E를 마친 학생은 색·글씨·여백·버튼을 각각 고를 줄 안다. 그래서 흔히 이렇게 생각한다 — "각 부품을 제일 예쁜 걸로 골라 합치면 제일 예쁜 화면이 되겠지." 그러나 토스의 파랑·당근의 주황·무신사의 검정을 한 화면에 모으면, 예쁜 부품들의 합은 정체불명의 따로 노는 화면이 된다. 부품의 품질이 아니라 부품 사이의 관계가 문제다.
→ 각 부품은 예쁜데 한 몸으로 안 읽힌다(E1 일관성 붕괴).
→ 화면이 처음 봐도 같은 손이 만든 한 몸으로 읽힌다.
디자인 시스템이란 색·글꼴·간격·버튼 스타일을 한 번 정해 전체에 일관 적용하는, 재사용 가능한 규칙 묶음이다(E1 일관성의 실현). 어떻게 묶는지는 브래드 프로스트의 아토믹 디자인(2016)이 깔끔한 그림을 준다 — 화학에서 원자가 모여 분자가 되고 유기체가 되듯, 작은 부품을 정해 두면 그것을 조합해 큰 화면이 저절로 일관되게 자란다.
즉 가장 작은 원자(색 1개·글꼴 1종·버튼 1형)부터 규칙으로 정하면, 그 위에 쌓는 분자·유기체·화면은 같은 규칙을 물려받아 전부 한 벌이 된다. 학생 작품도 색1·글꼴1·버튼1형만 정하면 이미 '시스템'이다 — 핵심은 규모가 아니라 한 번 정한 규칙을 끝까지 지키는 것이다.
규칙을 끝까지 지키는 비결은 규칙에 이름을 붙여 한곳에 모아두는 것이다. 이를 디자인 토큰이라 한다 — #0d9488이라는 색 코드를 외우는 대신 '주조색'이라는 이름표를 붙이고, 화면 곳곳에서 그 이름을 부른다. 그러면 주조색 정의 한 줄만 바꿔도 모든 화면이 한꺼번에 바뀐다 — 흩어진 결정이 '단 하나의 진실(single source of truth)'로 묶이는 것이다.
화면마다 #0d9488을 손으로 적는다. 색을 바꾸려면 모든 화면을 일일이 찾아 고쳐야 하고, 하나라도 놓치면 어긋난다.
주조색 = #0d9488을 한곳에 정의하고 곳곳에서 '주조색'을 부른다. 정의 한 줄만 바꾸면 전 화면이 동시에 바뀐다.
color-text-primary처럼 '무엇을-어디에-어떤 변형' 꼴로 짓는다. 학생용으로는 거창할 것 없이 레시피 카드 4줄로 충분하다.F1은 "규칙 한 벌로 묶기"로 끝났다. 그런데 내가 정한 규칙이 정말 잘 통하는지는 혼자서는 보이지 않는다 — 만든 사람 눈에는 자기 화면이 늘 멀쩡해 보이기 때문이다. 그래서 친구들 앞에 올려 검증한다. 이때 검증의 방식이 비평(design critique)이다. NN/g는 비평을 "디자인을 분석해 그것이 목표를 달성하는지 피드백하는, 디자인을 개선하기 위한 대화"로 정의한다 — 깎아내리기가 아니라 목표에 비춘 대화다.
→ 상대는 방어만 하고 아무것도 안 바뀐다.
→ 고칠 지점이 구체적으로 드러난다.
목표의 잣대는 멀리 있지 않다 — A~E에서 배운 20개 원리(위계·색 절제·여백·대비 4.5:1·터치 영역·즉각 피드백·일관성·야콥의 법칙…)가 그대로 비평의 체크리스트다. 그래서 비평은 "예쁘다/별로다"를 원리의 언어로 번역하는 일이다. 좋은 피드백의 공식은 칭찬(무엇이 왜 좋은지) + 제안(어떤 원리로 어떻게 고칠지) — 문제 지적과 실행 가능한 개선안이 한 쌍이어야 한다.
"주조색 하나로 통일돼 강조 버튼이 잘 보여요(일관성·색). 다만 캡션 대비가 낮으니 4.5:1로 올리면 좋겠어요."
"하단 탭 6개는 좀 많아요(네비). '설정'을 마이페이지로 넣어 4개로 줄이면 어떨까요?"
"탭이 너무 많고 색도 별로고 글씨도 이상해요."
→ 한꺼번에 깎기만 하니 어디부터 고칠지 모르고, 받는 쪽은 방어만 한다.
비평의 진짜 수확은 받는 피드백이 아니라, 비평하는 행위 그 자체다. 남의 작품을 원리의 언어로 뜯어보다 보면 어느새 내 작품의 같은 문제가 보인다 — 비평은 관찰력(A2)의 완성이다. 교육철학자 도널드 쇤은 이런 '실천하며 생각하는 전문가'를 성찰적 실천가(reflective practitioner)라 불렀다(1983).
만들거나 비평하는 도중에 떠오르는 생각. "어, 남의 탭이 6개네 — 잠깐, 내 것도 5갠데?" 작업을 멈추지 않고 바로 손을 고친다.
발표가 끝난 뒤 돌아보는 생각. "이번에 대비를 놓쳤다 — 다음엔 4.5:1을 처음부터 챙기자." 경험을 다음 작업의 교훈으로 남긴다.
그래서 피드백을 받는 쪽의 태도도 중요하다 — 변명·방어 대신 "왜 그렇게 봤는지"를 물어 이유를 캐낸다. 비평은 나를 깎는 게 아니라 내가 못 본 각도를 빌리는 것이다. 그 빌린 각도로 작품 하나를 실제로 고칠 때, 보는 눈과 만드는 손이 비로소 한 사람 안에서 만난다.
F는 새 이론의 장이 아니라 A~E 전체를 한자리에 불러 회수하는 장이었다. 흩어져 배운 원리들이 여기서 '만드는 손(F1)'과 '보는 눈(F2)'으로 합쳐진다 — 이게 이 수업의 도착점이다.