정보 디자인 원칙

정보 디자인은 사용자가 정보를 효과적으로 인지하고 행동할 수 있도록 정보의 구조와 표현을 설계하는 일이다. 한국어 맞춤법/문법 검사기 리디자인 사례는 이 원칙들이 실제 UI 개선에 어떻게 적용되는지를 잘 보여준다.

"stacked in time"보다 "adjacent in space" 방식이 인지 부담을 줄인다. 기존 맞춤법 검사기는 오류를 하나씩 순차적으로 처리하도록 강제했지만, 리디자인에서는 대치어를 원문에 함께 표시하여 시선 이동과 마우스 조작을 크게 줄였다. 틀린 표현은 덜 강조하고 바른 표현을 부각하는 방식이 불필요한 인지를 줄인다.

컬러 코딩도 중요한 설계 영역이다. 연속적인 하나의 속성(예: 오류 신뢰도)을 표현할 때는 불연속적인 색상 조합이 아니라 연속적인 명도·채도·근접 색상을 사용해야 관계가 직관적으로 전달된다. 장식적 요소(과도한 테두리선, 배경색 등)는 실제 정보로부터 주의를 분산시키므로 덜어내야 한다.

알림 설계에서도 강도를 상황에 맞게 조절해야 한다. 사용자가 의도적으로 한 행위에 대한 피드백에는 강제 확인이 필요한 모달 다이얼로그 대신, 자동으로 사라지는 토스트 알림이 적절하다.

핵심 내용

  • "시간에 쌓인 정보"보다 "공간에 펼친 정보"가 사용 흐름에 유리
  • 오류보다 정답을 강조하는 방향이 인지 부담을 낮춤
  • 단일 속성 차이 표현에는 연속적 색상 스케일 사용
  • 불필요한 장식(선, 배경색)은 정보 집중을 방해
  • 테이블에서 가운데 정렬은 가독성을 해침
  • 알림 강도는 사용자 행동의 중요도에 비례해야 함
정류장 맥락을 고려한 버스 노선도 리디자인 사례도 정보 디자인 원칙의 중요한 예시다. 기존 버스 노선도는 모든 정류장을 동일한 형식으로 나열하여 사용자가 현재 위치와 방향을 파악하기 어려웠다. 리디자인에서는 현재 정류장 이전 노선을 과감히 제거하고, 방향 화살표·지리 정보(한강, 고속도로 등)·행정구역 구분을 추가하여 사용자가 필요한 정보에 빠르게 도달할 수 있도록 했다. 지하철역을 노선 위에 크게 배치해 랜드마크 역할을 강화했으며, 불필요한 시각 요소(선, 동그라미)의 명도를 낮춰 노이즈를 제거했다. 이는 "stacked in time" 대신 "adjacent in space"의 원칙을 공간 정보에 적용한 사례다.

핵심 내용

  • "시간에 쌓인 정보"보다 "공간에 펼친 정보"가 사용 흐름에 유리
  • 오류보다 정답을 강조하는 방향이 인지 부담을 낮춤
  • 단일 속성 차이 표현에는 연속적 색상 스케일 사용
  • 불필요한 장식(선, 배경색)은 정보 집중을 방해
  • 테이블에서 가운데 정렬은 가독성을 해침
  • 알림 강도는 사용자 행동의 중요도에 비례해야 함
  • 노선도 등 방향 정보는 현재 위치 기준으로 이전 정보를 제거하고 랜드마크로 그루핑

관련 개념

Adjacent in Space — UI에서의 병렬 정보 표시 원칙

에드워드 터프티(Edward Tufte)의 "adjacent in space rather than stacked in time" 원칙은 사용자가 비교·선택해야 하는 정보를 순차적 조작이 아니라 한 화면에 동시에 펼쳐 보여야 한다는 정보 디자인의 핵심 원칙이다. 터프티는 하나씩 차례로 보게 하는 방식을 "It's one damn thing after another"라고 표현하며 안티패턴으로 규정했다.

실제 사례로 드러나는 stacked in time 안티패턴 유형은 다섯 가지다. (1) 옵션을 하나씩 선택해 결과를 보는 방식(길찾기 경로 비교), (2) 필수 정보를 숨겨 상세를 클릭해야 하는 방식(항공권 소요시간 숨김), (3) 중요 정보를 마우스 오버로만 표시하는 방식(블로그 이미지 숨김), (4) 한 화면의 선택지 수를 적게 해 반복 탐색을 요구하는 방식(탭 carousel), (5) 맥락상 중요한 정보를 바로 표시하지 않는 방식(트위터 첨부 이미지 클릭 필요).

반면 adjacent in space 적용 사례도 있다. 네이버·다음 길찾기 앱은 두 경로를 하나씩 선택해 보게 하지만, 두 경로를 지도 위에 동시에 표시하는 커스텀 매쉬업이 더 유용했다. hipmunk 항공권 비교 서비스는 출발·도착 시간, 소요 시간, 경유 지연을 타임라인 그래프로 동시에 시각화해 한눈에 비교할 수 있게 했다. iOS 지도앱은 여러 경로를 동시에 지도에 표시했으나 예상 소요시간은 여전히 하나씩 선택해야 해서 반쪽짜리 구현에 그쳤다.

단, 모든 요소를 다 노출하는 것이 항상 좋은 것은 아니다. 새로운 정보를 담지 않는 반복 기능 링크나 사용 빈도가 낮은 요소는 마우스 오버로 숨기는 것이 오히려 SNR(Signal-to-Noise Ratio)을 높인다.

터프티 스타일 날씨 앱 — 정보 밀도와 시각화

정보 디자인 원칙을 날씨 앱 설계에 적용한 사례에서도 adjacent in space 원칙이 핵심이다. 당시 유행하던 미니멀 날씨 앱(haze, solar, blue 등)은 시간대별 날씨 정보를 제스처로 하나씩 탐색하는 stacked in time 방식을 사용해 오후 비 예보를 전체 탐색 없이는 알 수 없었다.

개선된 설계에서는 range area chart를 활용해 하루 기온 변화를 시각화했다. 핵심 특징은 두 가지다. 첫째, 오늘과 어제 기온을 겹쳐 그린 비교 그래프로 절대 온도가 아닌 체감 변화를 직관적으로 전달한다. 둘째, 시간 축을 현재가 아닌 0시~24시 고정으로 유지해 출근·퇴근 시간처럼 관심 있는 시간을 항상 같은 위치에서 확인할 수 있다. 기상 상태는 같은 날씨를 반복 표시하지 않고 동일 구간을 막대로 묶어 변화 패턴만 부각시켰다.

정보가 많아서 복잡해 보이는 것이 아니라 디자인을 못해서 복잡해 보이는 것이라는 터프티의 관점을 실증하는 사례다. 매일 사용하는 서비스는 초기 학습 비용보다 지속 효율성에 비중을 두는 설계가 적합하다.

정보 요소의 정렬

정렬(alignment)은 정보의 위치를 예측 가능하게 만들어 불필요한 인지 비용을 줄이는 핵심 정보 디자인 원칙이다. 사람의 눈은 한 순간에 손톱만한 중심와(Fovea Centralis) 영역만 선명하게 볼 수 있으며, 시선을 빠르게 이동시켜 머릿속에서 세상을 재구성한다. 전주의처리(pre-attentive processing)는 주의하기 전에 저해상도 이미지를 빠르게 훑는 과정으로, 정렬을 통해 다음 정보의 위치를 예측 가능하게 하면 이 처리 과정의 비용을 크게 낮출 수 있다.

단일 정보 요소 나열은 세로 왼쪽 정렬이 가장 가독성이 높다. 가로로 여러 줄에 펼치는 Z형 배열은 순서가 있는 항목에서 시선의 좌우 이동을 늘려 피로를 준다. 멀티 컬럼이 필요할 때는 N형 세로 정렬(위에서 아래로, 다음 열로)이 원칙이다.

복합 정보 요소 표시에서는 시각적 계층(visual hierarchy)이 중요하다. 가장 중요한 정보 요소가 고정된 위치에 정렬되어야 하며, 중요한 정보 순서로 시선의 흐름을 유도해야 한다. 왼쪽 정렬만이 아니라 복합 정렬(왼쪽·오른쪽·들여쓰기)을 조합하여 각 요소가 서로 방해하지 않고 함께 부각되도록 설계한다. 이때 강조 요소들은 크기·색상 등 서로 다른 전주의처리 속성을 써야 하며, 같은 속성을 남발하면 오히려 모두 상쇄된다.

정렬 원칙의 구체적 적용: 1. 정렬은 정보 위치를 예측 가능하게 해서 불필요한 인지 비용을 줄임 2. 맥락에 따라 중요도를 정하고 가장 중요한 정보 요소가 반드시 정렬되도록 함 3. 여러 정렬을 혼합하여 각 요소가 서로 잘 드러나도록 함 4. 맥락상 연이어 읽힐 필요가 없는 정보는 시선 흐름 사이에 놓이지 않도록 함

출처

최종 업데이트: 2026-04-25 | 출처 5개