UI의 일관성은 같은 역할에 같은 규칙을 적용하는 데서 나온다

주장

UI의 일관성은 모든 요소를 같게 만드는 것보다 같은 역할과 관계를 같은 규칙으로 표현하는 데서 나온다. 색상·문구·타이포그래피·간격의 선택은 그 역할과 기존 제품 규칙에 연결한다.

값이 같아도 역할이 다를 때

같은 값처럼 보여도 의미가 다르면 나중에 테마나 상태가 바뀔 때 함께 변경되어서는 안 된다. 반대로 같은 행동의 이름이나 강조 방식이 달라지면 사용자는 차이가 있는지 다시 판단해야 한다.

색상·간격·용어의 역할을 맞추기

  • 보조 본문에는 보조 본문 역할의 색상 토큰을 쓴다. 값이 같다는 이유로 테두리 토큰을 빌려 쓰지 않는다.
  • 같은 관계에는 같은 간격·정렬 기준을 적용한다. 그룹을 구별하는 간격은 그룹 내부의 관계와 함께 판단한다.
  • 새 규칙을 추가하기 전에 프로젝트의 기존 토큰·밀도·용어를 읽는다. 다른 역할의 차이는 지우지 않는다.
  • 브랜드 색을 여러 화면에서 반복할 때도 주요 행동의 우선순위가 드러나는지 확인한다. 서로 다른 강한 색으로 입구를 구별할 수 있다는 사실만으로 지금 먼저 할 행동까지 명확해지는 것은 아니다.

배경·그 위의 글자·경계·선택·행동·상태는 함께 비교하되 각각 맡는 역할을 유지한다. 색 이름 하나만으로 의미를 판정하지 않는다. 같은 초록도 버튼, 추가된 코드, 성공 상태처럼 서로 다른 문맥에 쓰일 수 있으므로 이름·기호·위치와 함께 읽는다.

다이어그램에서 강조와 의미를 구분하기

시선을 모으는 강조색과 분류·상태·증감을 나타내는 표현은 역할을 나눠 정한다. 강조한 항목이 항상 최대값이나 실패 항목을 뜻하는 것은 아니다. 방향·상태를 색상 하나에만 맡기지 않고 필요한 글자·기호·채움 차이로도 읽을 수 있게 한다.

테마가 바뀌어도 범례와 실제 표현이 같은 뜻인지 확인한다. 밝은 배경에서 “더 어둡다”로 설명한 강도가 어두운 배경에서는 반대로 보일 수 있다. 기존 색상값의 재사용보다 역할과 독자의 해석이 유지되는지가 기준이다.

서로 다른 그림체를 같은 역할로 읽기

목록 이미지의 일관성은 그림체 전체를 통일하지 않아도 종횡비·잘림·정렬·여백·경계 같은 역할의 틀로 만들 수 있다. 다만 자른 뒤 글의 주제를 식별할 부분이 남는지 확인한다. 표지와 관계를 설명하는 본문 그림은 다른 역할이므로 같은 잘림 규칙을 강제하지 않는다.

기술 글의 설명 구조와 시각 자료 - Kciter > 깔끔한 인상을 만드는 공통 규칙는 삽화·브라우저 화면·입체 오브젝트가 다른 그림체를 유지하면서 같은 목록 틀에 놓인 사례다. 밝은 바탕이 차트의 의미 색을 구별하게 할 수 있지만, 단정한 인상만으로 대비나 색의 의미 전달이 입증되지는 않는다.

근거

연결

백링크

그래프 뷰

이 문서로 이어지는 주제