정보 디자인 원칙
정보 디자인은 사용자가 정보를 효과적으로 인지하고 행동할 수 있도록 정보의 구조와 표현을 설계하는 일이다. 한국어 맞춤법/문법 검사기 리디자인 사례는 이 원칙들이 실제 UI 개선에 어떻게 적용되는지를 잘 보여준다.
"stacked in time"보다 "adjacent in space" 방식이 인지 부담을 줄인다. 기존 맞춤법 검사기는 오류를 하나씩 순차적으로 처리하도록 강제했지만, 리디자인에서는 대치어를 원문에 함께 표시하여 시선 이동과 마우스 조작을 크게 줄였다. 틀린 표현은 덜 강조하고 바른 표현을 부각하는 방식이 불필요한 인지를 줄인다.
컬러 코딩도 중요한 설계 영역이다. 연속적인 하나의 속성(예: 오류 신뢰도)을 표현할 때는 불연속적인 색상 조합이 아니라 연속적인 명도·채도·근접 색상을 사용해야 관계가 직관적으로 전달된다. 장식적 요소(과도한 테두리선, 배경색 등)는 실제 정보로부터 주의를 분산시키므로 덜어내야 한다.
알림 설계에서도 강도를 상황에 맞게 조절해야 한다. 사용자가 의도적으로 한 행위에 대한 피드백에는 강제 확인이 필요한 모달 다이얼로그 대신, 자동으로 사라지는 토스트 알림이 적절하다.
핵심 내용
- "시간에 쌓인 정보"보다 "공간에 펼친 정보"가 사용 흐름에 유리
- 오류보다 정답을 강조하는 방향이 인지 부담을 낮춤
- 단일 속성 차이 표현에는 연속적 색상 스케일 사용
- 불필요한 장식(선, 배경색)은 정보 집중을 방해
- 테이블에서 가운데 정렬은 가독성을 해침
- 알림 강도는 사용자 행동의 중요도에 비례해야 함
핵심 내용
- "시간에 쌓인 정보"보다 "공간에 펼친 정보"가 사용 흐름에 유리
- 오류보다 정답을 강조하는 방향이 인지 부담을 낮춤
- 단일 속성 차이 표현에는 연속적 색상 스케일 사용
- 불필요한 장식(선, 배경색)은 정보 집중을 방해
- 테이블에서 가운데 정렬은 가독성을 해침
- 알림 강도는 사용자 행동의 중요도에 비례해야 함
- 노선도 등 방향 정보는 현재 위치 기준으로 이전 정보를 제거하고 랜드마크로 그루핑
- 시간표는 하이브리드 테이블(표+그래프)로 adjacent in space를 적용하되, 데이터-잉크 비율 원칙으로 보조선을 최소화
- 한 셀/카드에 여러 정보가 있을 때는 실제 중요도와 시각적 강조(색상·이미지·정렬)가 일치해야 함(TV 편성표의 방송명 vs 부가정보)
- "나중에 볼까"(신문 편성표) vs "지금 볼까"(EPG) 같은 유스케이스 차이에 따라 정보의 축(시간·채널) 배치를 다르게 설계해야 함
- 익숙한 12시간제 표기는 개인 경험과의 연상을 유지해 24시간제보다 인지 부담이 낮음
- 시각적 위계는 더하기가 아니라 빼기로 만든다 — 부각하고 싶은 요소보다 위계가 높은 경쟁 요소를 덜어내는 것이 더 효과적
관련 개념
- 피츠의 법칙 — UI 조작 효율을 설명하는 보완적 원칙
- 디자인 시스템 — 정보 디자인 원칙을 일관되게 적용하는 체계
- 한글 입력 설계 — 한국어 맥락의 구체적 UI 설계 사례
- 키오스크 UI 설계 — 대형 화면에서의 정보 인지 영역 설계
- 인포그래픽 유형 분류 — Election 인포그래픽처럼 정보를 시각적으로 재가공하는 유형 체계
- 편집 디자인과 정보 접근성 — 독자가 정보를 자연스럽게 받아들이도록 설계하는 편집 디자인 원칙
- SVG 차트 구현 — 시간 데이터를 그래프로 구현하는 기술적 방법
- 힉의 법칙 — 선택지 수가 많을수록 반응 시간이 늘어난다는 법칙으로, Primary Action 패턴 적용의 근거
- 시간 위의 디자인 — 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시 고정으로 유지해 출근·퇴근 시간처럼 관심 있는 시간을 항상 같은 위치에서 확인할 수 있다. 기상 상태는 같은 날씨를 반복 표시하지 않고 동일 구간을 막대로 묶어 변화 패턴만 부각시켰다.
정보가 많아서 복잡해 보이는 것이 아니라 디자인을 못해서 복잡해 보이는 것이라는 터프티의 관점을 실증하는 사례다. 매일 사용하는 서비스는 초기 학습 비용보다 지속 효율성에 비중을 두는 설계가 적합하다.
시간표 리디자인 — 하이브리드 테이블과 데이터-잉크 비율
스키 리조트 리프트권 시간표와 셔틀버스 시간표 리디자인 사례는 adjacent in space 원칙을 시간 정보에 적용한 구체적 실험이다. 리프트권 표는 숫자로 이용 시간을 빽빽하게 나열해 정보 전달은 효율적이지만, 사용자가 여러 옵션의 시간을 머릿속에서 개념화하고 비교하는 데는 인지 부담이 크다. 이용 시간을 연속된 시간 구간으로 보고 공간의 한 축(그래프)으로 치환하면 그래프의 위치와 길이 차이를 전주의처리(pre-attentive processing)로 바로 인지할 수 있어 비교가 쉬워진다. 기존 표를 없애지 않고 그래프를 함께 배치하는 하이브리드 테이블(hybrid table) 방식은 정확한 수치 정보와 비교 용이성을 동시에 제공한다.
시간 표기 방식도 인지 비용에 영향을 준다. 24시간제는 leading zero 덕분에 정렬이 쉬워 정보 전달자 입장에서 효율적이지만, 사용자는 익숙한 12시간제 시계에 맞춰 개인적 경험(날씨, 배고픔, TV 편성 등)을 시간에 연상시키므로, 오전·오후 맥락을 유추할 수 있는 상황에서는 12시간제 표기가 인지 부담을 낮춘다.
셔틀버스 시간표 리디자인은 에드워드 터프티(Edward Tufte)의 저서 *The Visual Display of Quantitative Information* 표지에 실린 열차 시간표 그래프(가로축 시간, 세로축 정차역, 선의 기울기로 열차 속도를 표현)를 참조 사례로 삼았다. 정류장과 시간 축을 바꾸고 왕복 노선을 분리해 배차 간격이라는 숨겨진 정보를 드러냈으며, 사선의 기울기 방향을 실제 오르막·내리막 지리와 일치시켜 방면을 직관적으로 인지하게 했다. 이 과정에서 데이터-잉크 비율(data-ink ratio) 개념도 적용했다. 축의 그리드처럼 실제 데이터가 아닌 보조 요소는 가급적 없애거나 덜 도드라지게 해야 하지만, 실선인 보조선이 실제 데이터 선과 형태적으로 겹치면 오히려 복잡해 보일 수 있으므로 선 대신 배경색이 다른 면으로 구분하는 방식을 택했다.
다만 그래프로 전환하면 숨겨진 정보(배차 간격, 소요 시간)는 드러나는 대신 가장 중요한 도착 시각이라는 정보를 잃는다는 트레이드오프가 있다. 목적에 따라 표와 그래프 중 무엇이 적합한지 판단해야 하며, 인터랙션이 없는 정적 매체(인쇄물 등)를 고려하면 시간표의 각 항목을 실제 시간 위치에 옮겨 배치하는 하이브리드 표가 절충안이 될 수 있다. 표에 사용하는 숫자 글꼴도 정보 디자인의 세부 요소다. 소문자처럼 높이가 들쭉날쭉한 text figure(lower figure)는 숫자 각각의 인지를 쉽게 하고 리듬감을 주지만 대개 유동폭이라 자릿수 정렬에는 불리하고, 높이가 일정한 lining figure는 보조 정보에 적합하지만 개별 인지에는 상대적으로 불리하다.
정보 요소의 정렬
정렬(alignment)은 정보의 위치를 예측 가능하게 만들어 불필요한 인지 비용을 줄이는 핵심 정보 디자인 원칙이다. 사람의 눈은 한 순간에 손톱만한 중심와(Fovea Centralis) 영역만 선명하게 볼 수 있으며, 시선을 빠르게 이동시켜 머릿속에서 세상을 재구성한다. 전주의처리(pre-attentive processing)는 주의하기 전에 저해상도 이미지를 빠르게 훑는 과정으로, 정렬을 통해 다음 정보의 위치를 예측 가능하게 하면 이 처리 과정의 비용을 크게 낮출 수 있다.
단일 정보 요소 나열은 세로 왼쪽 정렬이 가장 가독성이 높다. 가로로 여러 줄에 펼치는 Z형 배열은 순서가 있는 항목에서 시선의 좌우 이동을 늘려 피로를 준다. 멀티 컬럼이 필요할 때는 N형 세로 정렬(위에서 아래로, 다음 열로)이 원칙이다.
복합 정보 요소 표시에서는 시각적 계층(visual hierarchy)이 중요하다. 가장 중요한 정보 요소가 고정된 위치에 정렬되어야 하며, 중요한 정보 순서로 시선의 흐름을 유도해야 한다. 왼쪽 정렬만이 아니라 복합 정렬(왼쪽·오른쪽·들여쓰기)을 조합하여 각 요소가 서로 방해하지 않고 함께 부각되도록 설계한다. 이때 강조 요소들은 크기·색상 등 서로 다른 전주의처리 속성을 써야 하며, 같은 속성을 남발하면 오히려 모두 상쇄된다.
정렬 원칙의 구체적 적용: 1. 정렬은 정보 위치를 예측 가능하게 해서 불필요한 인지 비용을 줄임 2. 맥락에 따라 중요도를 정하고 가장 중요한 정보 요소가 반드시 정렬되도록 함 3. 여러 정렬을 혼합하여 각 요소가 서로 잘 드러나도록 함 4. 맥락상 연이어 읽힐 필요가 없는 정보는 시선 흐름 사이에 놓이지 않도록 함
네이버 TV가이드 리뉴얼 — 정보 위계와 유스케이스별 축 설계
네이버 tv가이드의 2011년 리뉴얼 사례는 시각적 강조와 정보 중요도가 어긋난 대표적인 정보 위계(information hierarchy) 문제를 보여준다. 하나의 편성표 셀에는 방송시간·방송명·부가정보 픽토그램 세 가지 정보가 들어 있는데, 실제로 가장 중요한 것은 방송명임에도 이미지와 강조색을 쓴 부가정보 픽토그램에 시선이 먼저 가고, 방송명은 형태적으로 가장 눈에 띄는 세로 시간선과 정렬되어 있지 않아 방송시간을 훑고 지나가야만 읽혔다. 개선 방향은 방송명을 상단 가로선에 맞춰 정렬하고 부가정보 픽토그램을 아래로 내리는 것이었다. 방송시간은 가로 타임라인 상의 위치 자체가 이미 시간 정보를 담고 있으므로 별도로 강조할 필요가 없으며, "몇 시에 하는가"보다 "무엇을 하는가"가 우선하는 질문이라는 점도 위계 판단의 근거였다.
이 사례는 신문 편성표 vs. 전자 편성표(EPG)라는 유스케이스 차이도 드러낸다. 지면의 TV 편성표는 시간축에 프로그램명이 정렬되어 있어 "나중에 뭘 볼까"를 쭉 훑어보는 데 적합한 반면, TV에 내장된 EPG는 "지금 뭘 볼까"라는 요구가 더 크다. 대부분의 TV에 라이센스된 젬스타(Gemstar) EPG는 채널·시간 두 축을 바꿔 "지금" 방영 중인 프로그램을 채널별로 세로 정렬해 보여주는데, 이는 채널 수가 많은 케이블 환경에서 가로 스크롤보다 세로 스크롤이 편하다는 점과도 맞아떨어진다. 네이버 리뉴얼은 기능은 개선됐지만 이런 유스케이스별 축 설계와 시각적 위계 측면에서는 뚜렷한 개선이 없었으며, "지금" 방송 중인 셀을 하이라이트해 실시간 탐색을 돕는 것이 대안으로 제시됐다.
네이버 그린윈도우 — 뺄셈으로 만드는 시각적 위계
네이버 그린윈도우(2010년 검색 개편) 리디자인 비평은 시각적 위계(Visual Hierarchy)를 "더하기"가 아니라 "빼기"로 확보해야 한다는 원칙을 보여주는 사례다. 無異는 앞선 네이버 개편 글에서 그린윈도우가 브랜드로서 부각된 점은 긍정적으로 평가했지만, 실제 화면에서는 세로로 길게 배치된 초록색 카테고리 메뉴바가 존재감을 너무 크게 차지해 사용자의 시선이 검색 키워드보다 카테고리로 먼저 이동하는 문제를 지적한다. 메뉴바가 그린윈도우(검색창)보다 시각적 위계가 높아, 브랜드가 정작 밀고자 하는 대상보다 부차적 요소가 시선을 더 강하게 붙잡는 역전 현상이 벌어진 것이다.
대비를 통한 강조는 무언가를 더하는 것이 아니라 빼는 것으로 달성된다. 그린윈도우를 부각하고 싶다면 가장 효과적인 방법은 경쟁 요소인 그린 메뉴바의 색을 제거하는 것이며, 이렇게 색을 덜어내는 것만으로 시선의 흐름이 자연스러워지고 선택된 카테고리도 오히려 더 잘 보이게 된다. 이는 브랜드의 TV 광고가 강조하는 여백과 미니멀한 이미지가, 실제 검색 페이지에서는 지켜지지 않는 일관성(coherence)의 모순이기도 하다. 아울러 검색창 자체의 얇은 테두리보다는 원래 가이드에 맞는 두꺼운 테두리가 검색창의 위상에 어울린다고 짚는다.
정보 위계를 해치는 또 다른 요인으로 불필요한 들여쓰기가 지적된다. 들여쓰기는 활자 인쇄에서 활자가 한 벌뿐이던 시절의 관습일 뿐이며, 오늘날 텍스트는 정렬을 맞추고 강조할 부분은 크기·굵기·색상으로 표현하는 편이 훨씬 효과적이다. 이는 앞서 다룬 "정보 요소의 정렬" 원칙—예측 가능한 위치 배치로 불필요한 인지 비용을 줄이는 것—과 같은 맥락이다.
USA Today 리디자인 — 매거진 스타일과 페르소나 기반 정보 설계
USA Today의 2012년 리디자인은 정보 디자인 원칙을 저널리즘 영역에 적용한 사례다. 신문 이미지를 전면에 내세우고 절제된 컬러와 그리드를 기반으로 한 매거진 스타일(Magazine Style)을 도입해, '읽는 뉴스'에서 '보는 뉴스'로 패러다임을 전환했다. 발행사 개닛(Gannett)의 시장 조사를 바탕으로 '지하철이나 커피숍에서 무료함을 달래려는 라이트 유저'를 주 페르소나(Primary Persona)로 설정하고, 날씨·생활·스포츠 정보 비중을 높이며 심각한 기사도 가볍게 처리하는 방향으로 콘텐츠 구성을 재편했다.
'누구에게, 무엇을, 어떻게 보여줄 것인가'라는 세 질문에 대한 명확한 답이 타 매체와의 차별점이 되었다. 특히 '어떻게' 영역에서는 백 마디 말보다 임팩트 있는 이미지·도표로 정보를 전달하고, 기사와 연관된 이미지·도표를 대담하게 배치했다. 웹사이트의 'Weather' 섹션은 마우스 롤오버만으로 간략 정보를 팝업 확인할 수 있게 하면서도, 상세 페이지에서는 지도·위성 이미지를 포함한 심층 정보를 제공해 사용자의 탐색 깊이에 따라 표현 수준을 달리했다. 'Election 2012' 섹션은 두 후보의 대비를 컬러와 도표로 시각화한 인포그래픽 활용 사례다.
이 사례는 폴란드 편집 디자이너 Jacek Utko의 TED 강연('디자인이 신문을 구할 수 있는가')이 제시한 관점과 맞닿아 있다. Utko는 디자인 프로세스가 단순히 외관을 바꾸는 것이 아니라 '왜 이것을 하는가, 목표가 무엇인가'라는 질문에서 출발해 콘텐츠를 채우고 이후에 디자인을 시작하는 목표 지향적 프로세스를 강조한다. 즉 아름다움 자체보다 독자를 이해한 데서 비롯된 결과물이라는 점이 정보 디자인의 핵심이다.
Pagination 안티패턴과 Primary Action 패턴
블로그 글 목록 하단에 흔히 쓰이는 페이지네이션(pagination)—페이지 번호를 나열하고 이전/다음을 붙이는 UI—은 관습적으로 쓰일 뿐 실제 사용 행태를 반영하지 않는 안티패턴에 가깝다. 페이지네이션의 실제 사용 행태를 보면 다음(이전) 목록으로 순차 이동하는 빈도가 압도적으로 높고, 특정 페이지로 점프하는 것은 상대적으로 드물다. 대부분의 경우 사용자는 다음 페이지에 어떤 항목이 있을지 예측할 수 없어 목록을 순차적으로 훑어보기 때문이다.
이렇게 주 사용 행위와 나머지 행위의 사용 빈도 차이가 클 때는 Primary Action 패턴을 적용해야 한다. 자주 쓰는 행동은 크게 강조하고 잘 안 쓰는 행동은 약하게 표시하거나 감춰서 노이즈를 줄이는 것이 조작뿐 아니라 인지 부담 측면에서도 유리하다. 선택지가 많아질수록 반응 시간이 늘어난다는 힉의 법칙(Hick's Law)도 이 원칙의 근거가 된다. 대부분의 상황에서는 페이지 번호 나열 자체가 불필요한 노이즈이므로 없애는 편이 낫다.
다만 페이지 이동 자체를 없애고 "더보기" 방식의 무한 스크롤만 남기는 것도 오용이다. 검색 결과나 SNS 타임라인처럼 다음에 어떤 항목이 나올지 예측 불가능한 콘텐츠에는 적합하지만, 블로그 글 목록은 성격이 달라 시간순으로 과거 글을 훑어보려는 사용자에게는 페이지 점프 기능을 없애면 오히려 불편해진다. 특정 페이지로 이동하려는 경우에는 페이지 번호를 다시 10개 안팎의 청크로 쪼개 인접 페이지로만 이동하게 하는 기존 방식 대신, 전체 페이지 링크를 한 번에 다 보여주는 편이 더 간결하고 현재 위치 파악에도 유리하다. 이는 iOS 리스트에서 기본 행동(행 탭)은 항상 노출하고 상세 기능은 디테일 디스클로저 버튼(파란 화살표)을 눌러야만 펼쳐지는 Progressive Disclosure 패턴과 같은 맥락이다. 실제 구현에서는 모바일에서 하단에 이전/다음을 두기보다 이전 링크를 목록 상단에 두고 항목을 계속 이어 붙이는 방식이 더 편리했다.
기능배치의 원근법 — 우선순위에 따른 기능 노출 수준
르네상스 회화의 원근법(perspective)은 근경·중경·원경으로 시각적 깊이감을 만들어 화면을 순차적으로 읽도록 시선의 흐름을 유도하는 기법이다. 이 원리를 정보·기능 설계에 적용하면, 어떤 정보나 기능을 먼저 보여줄지, 어떤 것을 부차적으로 감출지를 의도적으로 조정해 사용자의 인지적 우선순위를 형성할 수 있다.
애플의 아이폰 UI는 이 원근법을 기능 배치에 적용한 대표 사례로 꼽힌다. 자주 쓰는 주요 기능은 직관적인 형태로 전면에 노출하는 반면, 우선순위가 낮은 기능은 사용자가 스스로 찾아내기 어려울 만큼 교묘하게 숨긴다. 애플이 홈페이지를 통해 별도의 팁·트릭을 교육하는 것도 이 감춤을 보완하는 장치로, 퍼소나에 따라 기능에 대한 "인지적 거리"를 조절해 중요한 기능은 쉽게 쓰고 복잡한 기능은 유용성을 잃지 않으면서 필요한 사용자만 찾아 쓰게 만드는 전략이다.
실무에서는 기능을 드러내는 것보다 감추는 것이 더 어렵다. "이 기능을 좋아할 사용자도 있으니 잘 보이는 곳에 배치해야 한다"는 논리로 기능이 두서없이 전면에 쌓이면 정작 무엇부터 사용해야 할지 혼란스러운 UI가 된다. 우선순위에 따라 노출 수준을 면밀히 검토하고 결정해야 한다는 점에서, 이는 자주 쓰는 행동은 강조하고 드물게 쓰는 행동은 약화·은닉하는 Primary Action 패턴과 같은 원칙을 공유한다.
투표율 그래프 리디자인 — 단위 환산과 베이스라인 명시
서울시장보궐선거와 무상급식주민투표의 시간대별 투표율 비교 그래프를 리디자인한 사례는 원본 데이터 시각화를 사용자가 오해 없이 읽을 수 있도록 다듬는 세부 원칙들을 보여준다. 원본 그래프(akaiving 님 작성)는 선관위가 발표한 누적 투표율 수치를 그대로 시간대별 %p 증감으로 표시했는데, "증감 패턴"이라는 표현이 무엇과 무엇을 비교하는지 직관적으로 와닿지 않았다. 無異는 이를 시간 구간별 실제 투표자 비율(%) 히스토그램으로 단위를 바꾸고, 축을 실제 투표 시간(오전 6시~오후 8시)에 맞춰 재구성했다. "오후 8시에 누적 투표율 변화가 5.0%p"보다 "7시~8시 사이 유권자의 5.0%가 투표했다"는 표현이 상황을 더 명확히 설명한다는 것이 핵심 논지다.
또 다른 문제는 시간 구간의 너비가 균일하지 않다는 점이었다. 대부분 구간이 1시간 단위인데 첫 구간만 2시간이어서, 단순 %p 값만 보면 이른 아침에 투표가 가장 몰린 것처럼 오독될 수 있었다. 구간 너비가 다를 때는 값을 구간 길이로 나눠 정규화해야 동일 기준으로 비교할 수 있다. 베이스라인 처리도 다뤘다. 원본은 데이터-잉크 비율을 높이기 위해 가로축 선을 생략하고 눈금만 남겼는데, 이 경우 눈금의 기준이 되는 가상의 축(숫자의 baseline)이 명확히 드러나지 않아 막대 길이 비교에 오차가 생길 수 있었다. 리디자인에서는 축을 명시적으로 그려 이 모호함을 제거했다.
세부적으로는 (1) 값이 같은 인접 구간이라도 구간 경계가 다르면 막대를 의도적으로 끊어 데이터 단위 차이를 드러내고, (2) 항목 이름 옆에 전체 투표율을 함께 표기해 비교 기준을 제공하고, (3) 24시간제보다 익숙한 12시간제로 시간을 표기하는 등 앞서 정리된 adjacent-in-space·데이터-잉크 비율 원칙과 일관된 선택을 했다. 재구성된 그래프에서는 두 선거 모두 퇴근 이후(저녁) 시간대 투표율이 다른 시간대의 약 2배로 두드러졌다는 패턴이 명확히 드러났다.
출처
- 한국어 맞춤법/문법 검사기 리디자인 — 2015-07-02, 無異
- 정류장 맥락을 고려한 버스 노선도 디자인 2/3 - Redesign 과정과 결론 — 2015-03-11, 알 수 없는 사용자
- [정보디자인] adjacent in space — 無異, UX 가벼운 이야기
- [정보디자인] 에드워드 터프티를 위한 날씨앱 — 無異, Re-design!
- [정보디자인] 정보요소의 정렬 — 2013-03-15, 無異
- [정보디자인] 컨텍스트가 담긴 이유있는 아름다운 디자인, USA Today — 2012-11-14, 알 수 없는 사용자
- [정보디자인] 정보 소비 맥락을 고려한 시간표 리디자인 — 2014-09-22, 無異
- [정보디자인] 네이버 tv가이드 리뉴얼 — 2011-05-21, 無異
- [정보디자인] pagination 안티패턴 — 2011-12-13, 無異
- 기능배치의 원근법 — 2010-08-31, 전성진
- [정보디자인] 서울시장보궐선거 시간대별 투표율 비교 그래프 리디자인 — 2012-03-11, 無異
- [Visual Hierarchy] 네이버 그린윈도우 — 2010-07-27, 無異