[정보디자인] 정보요소의 정렬

정렬은 질서를 부여하여 시각적으로 아름답게(건강하게) 보이도록 하는 역할과 함께 정보를 효율적으로 전달하는데도 많은 도움을 줍니다. 미술을 공부하면서 배우는 중요한 디자인 기본 원리 중 하나이긴 하지만 정보를 어떻게 정렬해야 하는지에 대한 자료는 많지 않은 것 같습니다. 그래서인지 정보 전달이라는 관점에서 UI 디자인 시안들을 보면 정보 요소 정렬의 활용에 아쉬운 부분이 많이 보입니다. 몇 가지 단순한 정렬 규칙만 지켜도 정보 인지 비용을 줄여 사용자가 편안하게 정보를 얻을 수 있도록 UI를 개선할 수 있거든요. 정보 정렬에 관한 사례들과 유의할 점을 모아봤습니다. 사내 교육용으로 필요할 것 같아서 정리하다보니 많이 길어졌습니다.

시선의 흐름

정보 디자인에서도 흐름이 중요합니다. 정보를 펼쳐 보여주는 adjacent in space가 정보를 비교하는데 불필요한 조작을 줄여 인터랙션의 흐름을 간결하게 만드는 것처럼, 화면 안에서는 시선의 흐름(gaze path)을 매끄럽게 유도하도록 정보 요소를 정렬하는게 좋습니다.
한 눈에 알아 볼 수 있다 라는 표현을 많이 쓰는데 사실 사람은 한 눈에 모든 정보를 읽어들이지 못합니다. 보통 눈의 작동 원리를 카메라에 (혹은 그 반대로) 비유 해서, 우리가 세상을 바라보고 시각 정보를 얻는 것을 사진을 찍듯이 하는 것으로 이해하곤 합니다. 하지만 사람의 눈이 한 순간에 주의하여 선명하게 볼 수 있는건 사진과는 달리 손톱만한 점에 불과합니다.
눈이 수정체에서 빛을 모아 CMOS센서(또는 필름)에 해당하는 망막에 상이 맺히면 뇌가 이미지를 인식합니다. 일반적으로 이미지 센서 해상도가 높은 카메라가 화질이 좋은 것처럼 망막에 시신경이 많이 밀집되어 있으면 선명하게 볼 수 있는데, 망막에는 시신경이 균등하게 분포되어 있지 않습니다. 시신경은 1.5밀리미터정도의 중심와(Fovea Centralis) 에만 빽빽히 밀집되어 있고 주변으로 갈수록 해상도가 급격히 낮아집니다. 그래서 실제로 시선이 고정되는 0.2초정도의 짧은 시간 동안 우리가 보는 것은 터널 비전처럼 중심만 또렷하고 주변으로 갈수록 뿌연 이미지(해상도가 낮은)입니다. 
그럼에도 우리가 시야에 있는 모든 사물을 선명하게 보고 있다고 생각하는 건 눈을 재빠르게 움직이면서 조금 전에 본 기억과 상상력으로 머리 속에서 세상을 재조합해 내기 때문입니다. 보이지 않는 고릴라 실험에서 다른 것에 주의를 두고 있으면 눈 앞에 고릴라가 지나가도 모르는건 정말로 보지 못했기 때문입니다. 


아래 사진을 한 5초 정도 집중해서 보고 계속 글을 읽어주세요.

대부분 사람들은 손가락이 여섯개여도 눈치채지 못합니다. 분명히 사진을 다 본 것 같지만 사실은 관심이 있거나 주의해야하는 부분에만 시선이 가고 다른 곳은 머리로 보지 않거든요. 영어에서 see와 look의 의미 차이처럼 우리가 본다고 하는 데는 두 가지 단계가 있습니다. 시야에 들어오는 영상을 저해상도의 적은 정보량으로 빠르게 처리해서 경계해야하거나 관심있는 부분을 찾고 그 곳에 시선을 고정하여 더 고해상도의 시각 정보를 입력받아 주의하여 인식하고 해석합니다. 아. 저 이 사이에 낀게 뭐지? 더러워. 어떡하지?
우리는 세상을 보고 정보를 얻기 위해서 말 그대로 엄청 열심히 눈알을 굴리고 있습니다. 또한 시선추적(eye tracking)장비를 이용한 heat map을 보면 우리는 사실 많은 곳을 보지 않기도 합니다. 오래 응시하고 있는 곳이 꼭 관심있는 것은 아니지만(그냥 잘 안보여서일 수도 있음) 응시하지 않는 곳의 정보를 읽지 않는 건 분명합니다.


Pre-attentive processing

재밌는 소설책을 읽을 때를 제외하고는 우리는 절대 화면에 보여지는 모든 정보를 순차적으로 읽지 않습니다. 원하는 정보만을 빠르게 탐색해서 선택적으로 취득합니다. 앞에서 우리가 한 눈에 모든 정보를 얻는게 아니라는 것을 알았으니까 눈의 움직임을 의식하면서 아래 문장을 읽어보세요.

여              기            를                      보                   세                           요

눈이 움직이는 걸 느끼셨나요? 인지 비용에서 안구 운동은 크게 영향을 미치지 않습니다. 별로 의식하지도 않고요. 그보다는 처리 비용이 크면 피로를 느낍니다. 글자 사이의 공백은 심볼을 해석하지 않아도 전주의처리(pre-attentive processing)모듈을 통해 빠르게 처리할 수 있어서 생각 같은거 하지 않고 다음 정보(글자)까지 바로 시선을 옮기게 됩니다. 전주의 처리는 주의해서 고해상도의 시각 정보를 처리하기 전에 저해상도의 이미지를 빠르게 처리하는 과정입니다. 하지만 아래 문장을 읽으려면 속도가 많이 느려집니다. 불필요한 정보인지 아닌지 파악하기 위해서는 시선을 고정해서 보다 세밀한 시각 정보를 입력받아 주의를 가지고 처리하는 과정이 필요하거든요. 그 다음의 유의미한 정보로 시선을 옮기는데는 이런 피드백 과정이 되풀이 되어야 하니까 피곤합니다.

여ABCDE기EFGHIJ를KLMNOPQRS보TUVWXYZ세ABCDEFGHIJKLM요NOPQR

하지만 정렬을 하면 불필요한 정보를 건너뛰고 다음 정보위치로 빠르게 이동할 수 있습니다.

여ABCDE
기EFGHIJ
를KLMNOPQRS
보TUVWXYZ
세ABCDEFGHIJKLM
요NOPQR

정렬을 통해 정보의 위치를 예측 가능하게 하면 불필요한 정보처리를 줄이고 시선의 흐름을 최소화하여 정보 인지 비용을 효과적으로 줄일 수 있습니다. 또 크기나 색상같은 다른 전주의처리를 위한 시각 특성으로 대비를 두어서 정보 요소를 쉽게 구분(salient)되도록 할 수도 있고요. 하지만 무질서하게 난립된 간판이 어느 것도 눈에 들어오지 않는 것처럼, 모든 요소가 다 튀게 되면 오히려 정보 처리 비용이 높아지므로 중요한 정보 요소 순으로 시각 자원을 배분해 줄 필요가 있습니다. 
전주의처리는 다음에 더 알아보고 정렬에 관한 사례들을 살펴보겠습니다.


단일 정보 요소의 정렬

단일 정보 요소(텍스트)를 나열하는 경우에는 고민하지 말고 그냥 세로로 왼쪽 정렬을 하는게 가장 좋습니다. 간단한 규칙이지만 공간의 제약때문에 적용이 쉽지만은 않지만요.

검색을 할 때 연관 검색어를 잘 활용하면 원하는 정보를 보다 쉽게 더 풍부한 정보를 얻을 수 있습니다. 궁금한 질문의 답이 바로 연관 검색어에 나오는 경우도 많고요. 주로 뉴스 기사를 장식하는 A연예인이나 B정치인이 누구인지 :) 하지만 네이버 검색 결과에서처럼 가로로 나열하는 형태는 순서 상으로는 가장 상단에 노출하고 있다고 해도 잘 읽히지 않아서 활용 가치가 낮아집니다. 세로로 정렬을 하면 더 좋다는 건 알지만, 그렇게 정렬해두기 좋은 오른쪽 영역은 클릭수를 높일 수 있는 인기 검색어를 배치하고 있습니다. 매출을 높이기 위해 검색 엔진이 검색 만족도를 양보해야 하는 상황이 아이러니하면서 안타깝습니다.

[네이버 연관 검색어의 나열]

다음은 적당한 타협점으로 인기 검색어 아래에 연관 검색어를 두어 세로로 정렬을 하고 있어서 좀 더 보기 편합니다. 스크롤시에는 연관검색어 부분만 고정 하기도 하고요.
연관 검색어의 경우에도 정보의 개수가 많아지면 그냥 쭉 나열하는 것 보다 활용에 따라 그룹을 나눠주면 보기 편하고 활용도 쉬워집니다. 검색결과가 너무 많아서 키워드를 추가하여 범위를 좁히려는 경우와 다른 유사 검색어를 사용하는 경우가 다른데, narrow와 expand로 나눠서 보여주면 알아보기가 좀 더 수월해집니다.

[lazy search 리디자인 연관검색어 정렬과 그룹핑]


멀티컬럼 정렬

표시할 정보가 많을 때는 세로로 한 줄로 길게 나열하면 스크롤을 해야해서 오히려 불편할 수 있습니다. 이럴 땐 멀티 컬럼을 이용하여 화면 안의 정보 밀도를 높일 수 있습니다.

[구글 번역 언어 선택]

구글 번역의 언어 선택은 초기에는 풀다운 메뉴를 사용였는데 지원 언어가 늘어나고 풀다운 메뉴의 스크롤이 길어지면서 조작이 너무 어려워졌습니다. 그래서 현재는 왼쪽 정렬은 유지하면서 멀티 컬럼으로 한 화면에 모두 펼쳐 보이도록 하고 있습니다. 
 
멀티 컬럼 정렬을 사용하면서 실수하는 부분은 N 형태의 세로로 정렬이 아닌 Z 형태로 가로로 여러줄에 나눠 나열하는 경우입니다. 의미있는 순서대로 나열되어 있는 경우에 좌우로 시선을 왔다갔다하면서 찾아야 하면 상당히 피곤하거든요.

요즘 시범적으로 설치되고 있는 u쉘터의 버스 도착 정보는 언듯보기에는 정렬이 된 것 같지만 실제로는 여러줄에 걸쳐 나열된 것이라 원하는 번호를 찾기가 쉽지 않습니다. 정렬 규칙을 알더라도 시선의 이동거리가 길어지고 위아래로 비슷한 형태가 반복되면 같은 줄의 다음 열로 시선을 옮기는데도 인지 비용이 발생합니다. 아래 모바일 화면처럼 세로로 나열하는 것이 번호를 찾는데 좀 더 수월합니다. 
정렬과는 별개로 저 화면에서 예상 도착 시간을 바로 보여주지 않는 것도 아쉽습니다. 많은 사람들이 줄을 서서 자기가 탈 번호를 눌러 운행 위치를 확인하더라구요.(stacked in time vs adjacent in space)

[u쉘터 - 버스 번호의 나열]

[정류장 버스도착정보 - 멀티컬럼 왼쪽 정렬 by 무이] 


예외적으로 엘리베이터 버튼 경우에는 세로로 나열되는 것보다는 Z 형태로 쌓여있는게 좋은 것 같습니다. 맥락상 상하의 층별 위치와의 맵핑 관계가 보다 직관적이고 번호가 연속적이어서 하나씩 훑어보지 않아도 대략의 위치를 예측할 수 있으니까요.

또 이미지의 경우에도 멀티컬럼 정렬과는 상관이 없습니다. pinterest 처럼 이미지를 마구 쌓아놓아도 찾아 보는데 문제가 없는건 이미지는 글자처럼 응시해서 읽어들이지 않아도 되기때문입니다. 


복합 정보 요소의 정렬

우리가 주로 접하는 정보는 대부분 여러 정보 요소들이 모여 하나의 정보 단위를 이루고 있습니다. 이경우 한 줄에 각 요소를 나열하거나 여러줄에 걸쳐 나열할 수 있습니다. 한 줄에 나열하는 경우에는 테이블을 사용하여 각 정보 요소들을 컬럼에 맞춰 표시하는 방법을 주로 사용합니다. 테이블 형태는 각각의 관심 요소를 다른 항목과 비교 하는데는 효과적이지만 하나의 정보 덩어리로 의미를 파악하기는 어렵습니다. 
멀티라인으로 요소를 표시하면 반대로 각 요소의 비교는 어려워지지만 정보 요소들을 순서뿐 아니라 크기나 색상, 정렬 같은 시각속성을 이용해서 중요도의 대비를 줄 수 있어 이해하기가 보다 수월합니다.  두가지 표현의 각각 장단점이 있고 필요한 맥락이 다르지만 일반적으로 멀티라인이 많이 사용되고 있습니다. 요즘은 모바일 디바이스의 지원을 먼저 고려하면서 작은 스크린의 제약으로 한 줄에 나열하여 표시하기는 어렵게 때문에 더 많이 사용되기도 하고요.

[MacOS Mail table view]

[MacOS Mail multi-line view]


Information Priority

정보를 어떻게 꾸밀지 디자인 하기 전에 우선 각 정보요소들의 사용맥락 상 중요도를 파악하는게 우선되어야 합니다. 한 눈에 볼 수는 있어도 동시에 읽을 수는 없으니 중요한 순서대로 시선의 흐름을 유도해주어야 하니 뭐가 가장 중요한지를 알고 디자인해야 합니다.
물이 높은곳에서 낮은곳으로 흐르듯이 시선의 흐름을 만드려면 요소들의 시각적 중요도의 대비가 커야 합니다. 전주의처리의 시각 특성(크기,색상 등)의 대비가 크면 눈에 쉽게 들어옵니다. 정보 전달이 잘 되는 디자인은 시각적 계층(visual hierarchy)이 명확해 보여야 합니다. 위의 테이블 형태가 대체로 복잡해보이는건 정보 요소들의 글자 크기가 동일해서 어디에 먼저 시선을 주어야 할지 판단하기 어렵기 때문입니다. 
그래서 중요한 정보 요소가 예측가능한 고정된 위치에 놓이도록 정렬하는게 좋습니다. 그냥 줄을 맞추는게 아니라 가장 중요한 정보요소가 정렬 되는 것이 중요합니다. 

네이버의 TV 편성표가 눈에 잘 안들어 오는 이유도 정렬이 제대로 되어 있지 않기 때문입니다. 관심있는 정보는 뭐가 하느냐지 언제 하는가는 그 다음이거든요. 셀의 구분선에 가장 중요한 제목이 정렬되어 있지 않아서 보기가 불편합니다. 모바일 버전은 제목이 정렬 되어있네요.

[네이버 TV편성표 -  방송 시간에 정렬 http://tvguide.naver.com/ 

[TV편성표 리디자인 by 무이 - 제목을 정렬]

셀 안에서 정렬도 중요하지만 이러한 그리드 형태의 편성표는 사용 맥락에 따라 적합하지 않을 수 있습니다. 신문에 인쇄된 편성표는 오늘 뭐 재밌는것이 있나라고 쭉 훑어보는데 주로 사용되지만  TV를 보면서는 "지금" 재밌있는게 뭔지 찾아보는 경우가 더 많거든요. 현재라는 시간이 고정되면 시작 시간에 따라 셀이 들쑥 날쑥 정렬이 되어 있지 않아 바로 알기 어렵습니다. 위의 편성표에서 현재 시간이 6:45 이라면 어떤 프로그램이 방송 중인지 찾아보세요.
TV화면에서는 글자들이 더 크기 때문에 이런 형태의 편성표의 문제가 더 두드러집니다. 아래의 TV 편성표는 현재 시간 4:01 일때 KBS1,EBS에서 방송 중인 프로그램은 똑같이 "..." 이고  KBS2에서는 "로.." 라는 드라마가 한다는 정보를 제공합니다. 스마트한 TV가 되려면 PC에서 하던걸 가져오기 보다 우선 TV 고유의 컨텐트와 정보를 더 잘 보여주려는 고민이 필요할 것 같습니다.

[스마트tv 방송 편성표]


검색 결과에 따라 이미지가 포함되기도 하고 없기도 할 수 있는데요. 이미지가 검색 결과를 선택하는데 도움이 되긴 하지만 가장 중요한 정보요소는 아닙니다.  뉴스 같은 경우는 사진의 유무 보다는 기사 내용 자체가 훨씬 중요합니다. 오히려 사진이 좋은 기사를 선택을 하는데 잘못된 편향이 될 수도 있습니다. 네이버 심플 검색에서는 이미지와 본문도 빼고 제목과 출처, 시간만 표시하고 있는데  그게 가장 핵심 정보이기 때문입니다. 가장 중요한 제목을 우선 정렬하는 것이 이미지 때문에 들쑥 날쑥한 것보다 정보를 읽고 선택하는것을 수월하게 해줍니다.
예전에는 이미지 유무뿐 아니라 사진의 비율에 따라 제목 줄이 더 들쑥 날쑥 했는데 현재는 그런 문제를 해결하기 위해 일정한 크기의 정사각 틀을 사용합니다. 하지만 이런 방법도 사진의 여백 때문에 글상자와 사진의 정렬이 안되어 여전히 시각적으로 정리되지 않은 느낌이 들게 합니다. 굳이 이미지를 앞에 정렬한다면 모바일 블로그처럼 정사각형으로 사진을 크롭해서 사용하면 어떨까 생각했는데, 아래 기사만 봐도 그분이 짤려서 더 문제가 되겠네요 :)

[네이버 뉴스 검색]

[뉴스 검색 리디자인 by 무이]


복합정렬

위 뉴스 검색 결과에서 시간과 출처 역시 제목 다음으로 중요한 정보입니다. 내용과 독립적으로 기사의 가치를 판단할 수 있는 정보이거든요. 현재처럼 제목 옆에 이어 붙여서는 바로 찾아 보기가 어렵기 때문에 부속 정보정도의 역할만 하게 됩니다. 중요한 정보라면 독립적으로 정렬을 시켜주는 것이 좋습니다. 정렬을 꼭 왼쪽으로 해야만 하는 건 아니고 복합적으로 사용 할 수 있습니다. 위의 리디자인에서 오른쪽으로 정렬된 시간은 훨씬 쉽게 확인이 가능합니다. 출처 역시 중요한 정보여서 정렬의 위치 대신 색상을 이용해서 눈에 잘 띄도록 했습니다. 강조하려는 요소가 서로를 방해하지 않고 함께 부각되기 위해서는 서로 다른 전주의처리 속성을 부여해 주어야 합니다. 같은 속성만을 사용하면 서로 경쟁하거든요. 상생이 아니라 하나만 이겨서 살아남거나모두 지게됩니다. 특히 강조할게 많다고 강조색을 이색 저색을 남발하면 그냥 알록달록 하게 보이기만 하지요.

아래 네비게이션의 주변 검색 결과에서도 현재 위치와의 거리가 맥락상 중요한 정보입니다. 제목과 같이 왼쪽에 정렬을 하면 제목에 묻혀서 눈에 잘 들어오지 않습니다.  아래처럼 오른쪽으로 정렬을 해주면 훨씬 눈에 잘 들어옵니다. 
추가적으로 주유소(28) 부영주유소 (S-OIL) [278m] 처럼 괄호같은 구분문자를 사용하는 건 GUI가 사용되기 이전 옛날 도스나 타이프라이터처럼 글자에 속성을 부여하지 못했을때 사용했던 방법입니다. 다른 글자들과 형태적으로 가장 차이가 많이 나고 단순하기 때문에 괄호를 구분자로 사용하지만 역시나 머리로 해석이 필요한 심볼이거든요. 색상이나 크기를 다르게하여 요소를 구분하는게 보다 효과적입니다. 
숫자로 된 정보를 표시할 때도 정확한 정보를 보여줄지 오차가 있더라도 빠르게 전달될 수 있게 할지 맥락에 따라 선택할 필요가 있습니다. 거리 표시에서도 정확한 거리보다는 얼마나 가까운지 빠르게 이해할 수 있도록 유효숫자를 제한하는게 도움이 될 수 있습니다. 278m 나 1.02km 보다는 280m 1.0km 라고 적으면 눈에 더 빨리 들어옵니다.

[네비게이션 주변 검색 결과  사진 출처 다나와리포터]


양측 정렬만 아니라 관계가 있는 정보라면 함께 모아서 정렬하는게 더 좋습니다. 
입력폼에서 레이블을 오른쪽 정렬하여 입력 필드와 붙여두면 입력하는 필드를 중심으로 시선을 옮기면서도 함께 레이블을 쉽게 확인 할 수 있습니다.

[입력폼 레이블,필드 정렬  사진 출처 lukew ]

버스 도착 정보를 보여줄때도 버스 위치와 정류장명이 함께 붙어 있어야 정보가 보다 명확해집니다.
여기에서도 정류소번호를 정류장 이름과 같은 왼쪽 정렬로 다음줄에 표시하는 것 보다 오른쪽 정렬로 분리하는게 둘 다 잘 눈에 띄게 할 수 있습니다. 꼭 함께 연속적으로 읽혀야 하는 정보가 아니라면 시선의 흐름 사이에서 놓아 방해가 되지 않는게 좋습니다. 물론 정류소의 번호를 확인해보려는 경우도 있겠지만 사용 맥락에서는 정류소 이름만을 보는 경우가 대부분이거든요.
중요한 정보라면 같은 세로줄에 다른 정보가 함께 있는 것보다는 독립적으로 여백 위에 놓아 대비를 크게 하는게 좋습니다. 맥이나 아이폰 메일에서 새로운 메일을 알려주는 파란점이 그렇고요. 아래 버스 노선도에서도 노선 위에 버스가 놓이는 것보다 떨어져 있는게 더 잘 보입니다. 위의 검색결과 리디자인에서도 파비콘을 글 줄 정렬에 맞추지 않고 들여놓아서 출처 사이트를 보다 직관적으로 알 수 있고요. 

정리

정보를 보여주는 디자인은 거의 모두 정렬을 사용하고 있지만 정렬을 잘 못 사용하는 경우가 많습니다. 소설책처럼 모든 글자 하나 하나를 읽는게 아니기때문에 필요한 정보만을 빠르게 보고 불필요한 정보가 시선의 흐름을 방해하지 않도록 정렬을 활용하는게 좋습니다. 기호를 하나 하나 읽고 내게 중요한 정보인지 아닌지 구분하는 작업을 내 머리가 아니라 정보를 제공하는 디자인이 해주어야 합니다.

1.정렬은 정보의 위치를 예측 가능하게 해서 불필요한 인지 비용을 줄여줍니다.
2. 맥락에 따라 정보요소들의 중요도를 정하고 가장 중요한 정보요소가 꼭 정렬이 되도록 합니다.
3. 각 정보요소들이 서로 잘 드러나도록 왼쪽 정렬만이 아니라 여러 정렬을 혼합하여 사용할 수 있습니다.
4. 맥락 상 연이어 읽혀야 하는 정보가 아니라면 가급적 시선 흐름 사이에 놓이지 않도록 합니다.

간단한 규칙이지만 효과적입니다. 정보를 가지고 디자인하고 있다면 항상 정렬이 잘되어 있는지 확인해보세요. 



참고 : 시지각 동작 원리  designing with the mind in mind  @alankang 님이 번역서 준비중이라고 합니다.

[참고##정보디자인##]