|| 디자인 시스템은 무엇이고, 무엇이 아닌가디자인 시스템은 ‘일관성’과 ‘판단 비용’의 문제입니다
기능이 많아질수록 디자인 시스템은 일관성을 유지하는 일인 동시에, 판단 비용을 관리하는 일이 됩니다.
이번 글은 그 두 가지를 함께 지키기 위해, 시스템이 어떤 판단을 맡고 어떤 판단은 맡지 않을지 ‘적정 밀도’를 다시 정리한 기록입니다.
AI가 초안을 빠르게 만들어줄수록, 팀이 흔들리지 않게 만드는 건 결국 ‘기준’이라는 사실도 함께 확인하게 됐습니다.
이 이야기는 저희 조직의 사례이기도 하지만, 여러 팀이 같은 UI를 함께 만드는 환경이라면 비슷한 형태로 겪게 되는 문제이기도 합니다.
ADS 2.0에서 3.0으로, 무엇이 달라졌나
이번 개편은 “구성 요소를 더 많이 만들기”가 아니라, 기준의 규격을 다시 맞추는 업그레이드였습니다.
변경사항은 크게 세 가지입니다.
Semantic: Emphasis 같은 표현 대신 Foreground처럼, 해석이 아니라 역할이 먼저 보이게 언어를 바꿨습니다.Typography: 역할 구조는 유지하되, 스케일과 Weight 조합을 제한하고 네이밍을 단순화해 적용 판단을 줄였습니다.Palette: 들쭉날쭉했던 값을 단계화해, 선택지가 ‘감’이 아니라 ‘구조’로 고정되게 만들었습니다.
이 글은 이 업그레이드 과정에서, 무엇을 시스템이 맡아야 팀이 빨라지고 흔들리지 않는지를 정리한 기록입니다.
13년 된 서비스에서 기초를 다시 설계하며
디자인 시스템을 고쳤다는 이야기를 하기 전에,
왜 이 일이 만만하지 않았는지부터 말하고 싶습니다.
2013년에 출시된 뒤, 13년을 지나온 서비스입니다.
기능은 많아졌고, 팀은 나뉘었으며, 속도는 여전히 중요합니다.
이 상황에서 디자인 시스템을 손본다는 건 비행 중인 비행기의 엔진을 여는 일과 비슷합니다.
게다가 우리는 새로 만드는 게 아니었습니다.
이미 잘 돌아가고 있는 시스템을 다시 들여다보는 일이었습니다.
망가진 걸 고치는 건 명분이 분명합니다.
하지만 잘 돌아가는 걸 고치는 건 조금 다른 종류의 판단을 요구합니다.
문제는 UI가 아니라 기준이었습니다
화면은 멀쩡했습니다. 서비스도 안정적으로 작동했습니다.
문제는 ‘겉으로 보이는 결과’가 아니라, 그 결과를 만들어내는 기준의 규격이었습니다.
ADS 2.0은 얼핏 보면 퍼즐처럼 맞아 돌아가지만, 자세히 보면 조각의 규격이 조금씩 달랐습니다.
그 차이는 당장 화면을 깨뜨리진 않지만, 시간이 지날수록 판단을 느리게 만들었습니다.
차이가 드러나는 방식은 단순했습니다.
같은 회색인데 화면마다 느낌이 달랐고
같은 강조인데 톤이 달랐고
그래서 매번 “이게 맞나?”를 다시 확인해야 했습니다
기준이 명확하지 않으면 판단은 계속 사람에게 돌아옵니다. 사람이 반복해서 판단해야 하면 속도는 조금씩 느려집니다.
그때 깨달았습니다.
기능이 많아질수록 디자인 시스템은 미학의 문제가 아니라, 반복되는 결정을 줄이고 기준을 고정하는 문제가 된다는 것을요.
더 정교하게가 아니라, 더 명확하게
이번 작업의 방향은 의외로 단순했습니다.
더 많은 규칙을 만드는 대신, 반복적으로 고민되는 지점만 시스템이 맡게 만드는 것입니다.
그 외의 영역은 억지로 묶지 않는 것입니다.
여기서 말하는 적정 밀도는, 시스템이 반복되는 판단을 대신해주는 정도와 그로 인해 생기는 유지 비용 사이의 균형입니다.
AI가 반복 작업을 덜어줄수록, 사람의 판단은 오히려 ‘예외와 기준’ 쪽으로 더 모이게 됩니다.
팔레트 — 감이 아니라 구조로 보기
가장 먼저 본 건 팔레트였습니다.
색 자체에 큰 혼란은 없었습니다. 이미 잘 쓰이고 있었고, 디자이너들도 익숙했습니다.
하지만 Gray Scale을 자세히 보면 50, 100 대신 97, 95처럼 세분화된 값들이 많았습니다.
Gray Scale만 따로 봐도 단계가 21개나 됐습니다. 즉, 회색을 고를 때마다 ‘정답 후보’가 21개라는 뜻이었습니다.
바로 화면이 깨지거나 큰 사고가 나진 않습니다.
다만 새로운 화면을 만들 때마다 “이 중 어디를 써야 하지?”라는 작은 판단이 반복됐습