일관성: 시스템감은 어디서 오나
어떤 UI는 하나씩은 괜찮은데, 합치면 제각각 냄새가 나요. 빠진 건 결국 하나: 모두가 지키는 변수 세트예요. 이번 레슨은 디자인 토큰 — 변수 먼저, 스타일은 따라가요.
제각각 느낌의 원인은 구체적이에요. 이 버튼 높이 36, 저건 40; 이 카드 둥근 모서리 8, 저건 16; 로즈는 여기 짙고 저기 옅어요. 그때그때 손으로 쓴 값이라 하나씩은 괜찮은데, 합치면 티가 나요. 해법은 「손맛 숫자」를 변수로 정리하는 것: 먼저 토큰을 정하고(주색·둥근 모서리·컨트롤 높이·간격 단계), 모든 스타일은 토큰에서 값을 읽어요. 결정이 줄면 UI가 한 가족처럼 보여요.
일관성은 결벽처럼 들릴 수 있지만, 사는 건 진짜 돈이에요. About Face 4가 닐슨의 장부를 인용합니다: 통일된 UI 표준은 예측 가능성으로 산출을 올리고 실수를 줄여요 — 한 페이지에서 배운 규칙이 다음 페이지에서도 통하니, 학습 비용과 교육비가 떨어져요. 애플과 마이크로소프트가 서드파티 앱이 자사 시스템처럼 보이게 하는 이유도, 사용자가 어디서든 다시 배우지 않게 하려는 거예요.
| 일관하면 사용자가 얻는 것 | 일관하지 않으면 사용자가 치르는 것 |
|---|---|
| 버튼이 이렇게 생겼으면 행동도 그렇게 — 눈 감고도 예측 | 새 페이지마다 처음부터 더듬어야 해요 |
| 한 번 배우면 전 사이트 통용 | 「지난 페이지는 오른쪽 위 저장이었는데…」 |
| UI는 배경으로 물러나고, 주의는 콘텐츠에 | 차이가 계속 주의를 크롬으로 끌어당겨요 |
같은 책이 미리 못된 말도 해요: 표준은 룩앤필이라는 문법층만 다루고, 더 깊은 논리는 못 다뤄요. 표준을 만병통치약으로 여기는 건, 형식 매뉴얼만 있으면 좋은 소설이 나온다고 믿는 것만큼 위험해요. 그래서 이번 레슨은 UI에 변수를 세우는 법이지, 창의력에 자물쇠를 채우는 법이 아니에요.
교실용 허구가 아니에요. 이 사이트 강좌 목록 페이지 learn.html 소스에 변수 두 줄이 그대로 있고, 원 주석도 함께 옮겨 드릴게요:
지금 보고 있는 사이트에서 상단바 버튼 다섯은 이 변수 둘이 관리해요. 누구도 제 크기를 가져오지 못하고, 모두 높이 36px·둥근 모서리 10px를 읽어요. 언젠가 전 사이트 스타일을 바꾸려면 이 두 줄이면 충분해요.
방금 무슨 일이 있었는지 보세요: 변수 하나만 바꿨는데 버튼·카드·입력·아바타·모달이 함께 변했어요. 스타일은 변수의 값이고, 시스템감은 변수가 있다는 사실이에요. 값은 논쟁할 수 있어도, 변수는 먼저 있어야 해요.
토큰을 세운 뒤엔 드리프트를 잡는 일이 남아요. 아래 설정 페이지는 멀쩡해 보이지만 불일치 다섯이 숨겨져 있고, AI가 만든 UI에서 이런 드리프트는 매일 나와요. 찾으면 누르세요.
About Face 4는 일관성 판정 기준을 두 문장으로 말해요: 모든 요소는 존재할 충분한 이유가 있어야 하고, 모든 차이도 존재할 충분한 이유가 있어야 해요. 삭제 버튼이 더 빨간 건 이유가 충분해요 — 행동이 다른 요소는 시각적으로도 달라야 하고, 같아 보이면서 다른 일을 하는 게 함정이에요. 반대로 동급 카드 둥근 모서리가 8과 16인데 이유를 못 말하면, 그건 정리할 드리프트예요. 책은 손쉬운 레버도 줍니다: 새 요소를 더하기보다 한 요소가 일을 더 하게 하세요. 요소가 적을수록 일관성을 지키기 쉬워요.
이번 레슨에서 배운 건 결국 한 문단이 되어, AI에게 UI를 부탁하는 프롬프트 맨 앞에 들어가야 해요. 아래 변수표는 바로 쓸 수 있고, 값은 제품에 맞게 바꾸세요. 핵심은 모든 결정에 출처가 있게 하는 것 — 그래야 AI가 대신 손맛 숫자를 못 써요.
이 표는 「오늘부터 새로 쓰는 UI」를 다뤄요. 프로젝트가 이미 돌아가고 스타일이 제각각이라면 변수표만으로는 부족하고, 흩어진 구현을 먼저 거둬들여야 해요 — 그건 수술이고, 단계는 Vibe Coding · 스타일 수렴: 버튼 하나에 CSS 여덟 벌은 그만에 있어요: 부채를 어떻게 세고, 어떻게 나눠 합치고, 어떤 차이를 남길지.
시스템감은 공유 변수에서 와요: 먼저 토큰(주색·둥근 모서리·컨트롤 높이)을 정하고, 스타일은 토큰에서 읽으면 제각각 느낌이 사라져요.
일관성 점검의 가장 빠른 방법: 스크린샷 두 장을 나란히 두고, 버튼·둥근 모서리·주색 깊이에 드리프트가 있는지 보세요.
AI에게 UI를 맡길 때 변수표를 먼저: 주색·둥근 모서리·컨트롤 높이를 프롬프트에 넣고 나서 시키면, 일관성이 바로 달라져요.
판정 기준 두 문장: 모든 요소는 이유가 있어야 하고, 모든 차이도 이유가 있어야 해요. 삭제 버튼의 빨강은 남기고, 이유를 못 말하는 둥근 모서리는 정리하세요.
콘텐츠 출처: 샤오산 아카데미 「미학 엔지니어링」 특집 오리지널; 일관성과 표준의 가치, 「차이는 이유가 있어야 한다」 등 원칙은 About Face 4: The Essentials of Interaction Design 17장(Alan Cooper 외)에서 정리.