스타일 가이드

값을 정해 두면 화면이 고르게 나올 것 같지만 그렇지 않았습니다. 색을 네 가지로 줄이고 글자 크기를 다섯 단계로 못 박아도 같은 값을 서로 다르게 쓰는 일은 남았습니다.

페이지덱에서 드러난 모양은 이랬습니다. 민서가 강조색을 하나로 정하고 그 값에 이름까지 붙여 두었는데, 두 달 뒤 문서 목록 화면에 강조색 버튼이 네 개 놓였습니다. 새로 만들기, 공유, 정렬, 필터가 모두 같은 색이었습니다. 만든 사람들은 각자 자기 기능이 중요하다고 판단했고, 값을 틀리게 쓴 사람은 없었습니다. 그런데 사용자 입장에서는 무엇을 먼저 눌러야 할지 알 수 없는 화면이 됐습니다.

빠져 있던 것은 값이 아니라 쓰임이었습니다. 강조색이 무슨 색인지는 적혀 있었지만 언제 쓰는 색인지는 적혀 있지 않았습니다. 스타일 가이드는 그 빈칸을 채우는 문서입니다. 값을 정하는 일과 그 값을 쓸 상황을 정하는 일을 나누고, 뒤쪽을 문장으로 적습니다.

규칙과 그 규칙이 적용되는 상황을 짝지어 적습니다. 다섯 묶음입니다.

1. 색 — 컬러 팔레트, 곧 쓰기로 정한 색의 묶음에서 각 색을 언제 꺼내는지 적습니다. 강조색은 한 화면에 한 번만 쓰고, 빨강은 되돌릴 수 없는 동작에만 쓰고, 회색 글자는 보조 설명에만 쓴다는 식입니다.
2. 서체 — 타이포그래피에서 정한 단계를 어디에 쓰는지입니다. 제목 단계는 한 화면에 셋까지, 본문은 16픽셀, 한 줄은 45자에서 75자 사이로 끊는다처럼 적습니다.
3. 간격 — 간격 스케일의 단계를 어떤 관계에 쓰는지 정합니다. 같은 묶음 안은 8, 다른 묶음 사이는 24를 쓴다고 적어 두면 매번 고르지 않습니다.
4. 글과 말투 — 버튼 문구는 동사로 시작하고, 오류 문구는 원인과 다음 행동을 함께 적고, 사용자를 호칭으로 부르지 않는다는 규칙이 여기 들어갑니다.
5. 접근성 기준 — 접근성을 지키기 위한 최소선입니다. 글자와 배경의 밝기 차이를 4.5 대 1 이상으로 두고, 상태를 색만으로 표시하지 않고 글자나 모양을 함께 쓴다는 규칙이 대표적입니다.

규칙마다 맞는 예와 틀린 예를 나란히 붙입니다. 문장만 적어 두면 해석이 갈립니다. 강조색을 한 번만 쓴다는 규칙 아래에 버튼 네 개가 모두 강조색인 화면과 하나만인 화면을 나란히 놓으면 되묻는 일이 사라집니다.

무엇을 여기 적지 않는지도 정해 둡니다. 색과 간격의 실제 값은 디자인 토큰이 들고 있고, 부품 하나의 속성과 상태는 컴포넌트 명세가, 되묻기 흐름처럼 반복되는 상황의 해법은 패턴 라이브러리가 맡습니다. 같은 내용을 두 곳에 적으면 한쪽만 고쳐지는 날이 옵니다.

쓰는 쪽은 디자이너입니다. 페이지덱에서는 민서가 색과 서체와 간격을 맡고, 말투 규칙은 화면 문구를 쓰는 사람과 함께 정합니다.

읽는 쪽은 넷이고 각자 다른 이유로 엽니다.

1. 새로 합류한 디자이너 — 시안을 그리기 전에 이미 정해진 것을 확인합니다. 이 문서가 없으면 첫 시안에서 자기 기준으로 색을 쓰고, 리뷰에서 전부 되돌립니다.
2. 개발자 — 값은 토큰에서 가져오지만 판단이 필요한 자리에서 이 문서를 봅니다. 버튼 두 개 중 어느 쪽을 강조할지가 그런 자리입니다.
3. 고객을 만나는 사람 — 수아와 현우가 제안서와 소개 자료를 만들 때 같은 규칙을 씁니다. 자료와 제품의 인상이 어긋나면 고객은 두 개의 회사를 만난 것처럼 느낍니다.
4. 외부 협력사 — 위탁한 화면이 돌아올 때 이 문서가 검수 기준이 됩니다.

만든 다음 굴리는 규칙은 디자인 시스템 거버넌스가 정합니다. 예외를 허용해 달라는 요청이 왔을 때 누가 판단하고, 어떤 조건이면 규칙 자체를 고치는지입니다. 현실과 어긋난 규칙을 그대로 두면 사람들은 문서를 읽지 않는 쪽으로 움직입니다.

분량에도 한도가 있습니다. 80쪽이 되면 아무도 끝까지 읽지 않습니다. 규칙 수를 늘리는 대신 지킬 수밖에 없는 것은 부품 안에 심고, 문서에는 판단이 필요한 것만 남기는 쪽이 오래갑니다.

"이 화면에 강조 버튼이 네 개예요. 가이드에 화면당 하나라고 적혀 있습니다."

값이 아니라 쓰임이 규칙에서 벗어났다는 지적입니다.

"빨강은 되돌릴 수 없는 동작에만 씁니다. 정렬 초기화는 그 색이 아니에요."

색에 붙은 의미를 지켜야 사용자가 색만 보고 위험을 알아챈다는 뜻입니다.

"이건 예외로 갈게요. 대신 예외 조건을 적어 두고 다음 리뷰에서 다시 봅시다."

규칙을 어기는 결정을 기록으로 남겨 반복되지 않게 하자는 말입니다.

페이지덱은 강조색 버튼이 네 개인 화면을 고치면서 규칙을 한 줄 더했습니다. 한 화면에서 강조색은 사용자가 지금 해야 하는 한 가지 동작에만 쓴다는 문장입니다. 민서가 맞는 예와 틀린 예를 나란히 붙이고, 태오가 그 규칙을 부품 쪽에 심었습니다. 강조 버튼이 한 화면에 둘 이상이면 개발 중에 경고가 뜨게 했고, 그때부터 같은 지적이 리뷰에서 사라졌습니다.

토큰이 있으면 이 문서가 필요 없다고 보는 경우가 가장 많습니다. 색과 간격이 이미 정해져 있으니 더 정할 것이 없어 보이기 때문입니다. 하지만 토큰은 무엇이 있는지만 알려 주고 언제 쓰는지는 알려 주지 않습니다. 강조색이 하나뿐이어도 한 화면에 네 번 쓸 수 있고, 그렇게 되면 색을 줄인 효과가 사라집니다. 쓰임을 적지 않으면 값을 통일한 만큼의 이득이 화면 단위에서 다시 흩어집니다.

길게 쓸수록 좋다고 보는 오해도 흔합니다. 빠짐없이 적어 두면 되묻는 일이 줄 것 같기 때문입니다. 분량이 늘면 읽는 사람이 줄고, 읽히지 않는 규칙은 없는 규칙과 같습니다. 여든 쪽짜리 문서를 만든 팀에서 실제로 지켜지는 것은 앞의 다섯 쪽뿐인 경우가 흔합니다. 규칙은 스무 줄로 줄이고 나머지는 부품이 강제하게 만드는 쪽이 지켜집니다.