UI 밀도: 시각·정보·디자인·시간·가치

정의

UI 밀도 = 사용자가 인터페이스에서 얻는 가치 ÷ 인터페이스가 차지하는 시간과 공간

밀도는 한순간의 생김새가 아니다. 여러 순간에 걸쳐 인터페이스가 얼마나 많은 것을 주는지, 그 순간들이 디자인 결정으로 어떻게 이어지는지, 그 결정이 소프트웨어의 가치와 어떻게 연결되는지를 함께 본다. 인터페이스가 성기다·빽빽하다는 인상을 설명하고, 밀도를 높이는 방법을 찾는 틀이다.

층	무엇을 세나	한계
시각 밀도	같은 공간에 보이는 것의 양	첫인상이라 빠르지만 편향되고 믿을 수 없다
정보 밀도	전체 잉크 중 데이터를 전하는 잉크의 비율	차트에는 맞지만 UI의 구분선·여백·그림자를 설명하지 못한다
디자인 밀도	전체 디자인 결정 중 꼭 필요한 결정의 비율	화면 단위라 사용자의 여정 전체를 보지 못한다
시간 밀도	같은 시간에 할 수 있는 일의 양	빠르게 해도 가치가 없으면 의미가 없다
가치 밀도	시간·공간 대비 얻는 결과	최종 목표

시각 밀도: 눈으로 느끼는 밀도

화면에 많은 것을 올리면 시각적으로 빽빽하다(예: 차트·표·뉴스를 한 화면에 모은 Bloomberg 터미널).

이 판단은 순식간에 무의식으로 내려져 빠르지만 믿을 수 없다. 점의 개수와 영역 크기가 같아도 배치에 따라 더 빽빽해 보이고, 점을 무리로 묶기만 해도 밀도의 느낌이 달라진다. 밀도를 이야기하려면 일관되고 쓸모 있는 정의가 필요하다.

정보 밀도: 데이터-잉크 비율

에드워드 터프티(Edward Tufte)는 『The Visual Display of Quantitative Information』에서 그래픽의 모든 잉크에는 이유가 있어야 하고, 그 이유는 거의 언제나 새 정보여야 한다고 본다.

데이터-잉크 비율 = 데이터를 전하는 잉크 ÷ 그래픽 전체를 그리는 잉크   (1에 가까울수록 좋다)

비율을 높이는 방법은 둘이다. 쓸모 있는 데이터를 더하거나, 데이터를 전하지 않는 잉크를 지운다. 정보 밀도가 높으면 대개 시각적으로도 빽빽해 보인다. 1885년 마레(E. J. Marey)가 펴낸 파리-리옹 열차 시간표는 가로축이 시간, 세로축이 역 사이의 실제 거리라서 작은 공간에 260개가 넘는 도착·출발 시각을 담는다. 터프티는 이를 축소 원칙(Shrink Principle), 즉 그래픽은 훨씬 작게 줄일 수 있다는 말로 정리한다.

한계도 있다. 잉크를 너무 빼거나 정보를 너무 넣을 수도 있고, 적정선은 독자에 따라 다르다. 모니터 네 대 앞의 채권 트레이더와 교과서를 읽는 초등학생의 기준은 다르다.

UI로 옮기면 반쪽만 맞는다. "각 부분이 보여 주는 정보를 최대화한다"는 그대로 통하지만, 잉크를 픽셀로 바꿔 생각하기는 어렵다. 요소가 몇 개만 넘어도 관계를 알려 주는 구분선, 구조 요소, 이정표가 필요하다. 어떤 여백은 진한 픽셀만큼 의미가 있어서 모두 없앨 수 없고, 그림자·그라디언트·강조색이 이 식에서 무엇인지도 정하기 어렵다.

디자인 밀도: 게슈탈트 비율

픽셀 대신 디자인 결정을 센다. 디자인 결정은 의미를 전하려고 게슈탈트 원리를 의도적으로 쓰는 것이다.

원리	뜻	UI에서
근접	가까이 있는 것은 한 무리로 본다	차트 바로 위의 제목은 그 차트의 제목으로 읽힌다. 촘촘한 격자는 여백으로 떨어진 위쪽 메뉴와 다른 무리다
유사	모양·크기·색이 비슷하면 관련 있어 보인다	크기·글꼴·색이 같은 텍스트는 같은 역할로 읽힌다
폐쇄	빈틈이 있어도 온전한 모양으로 채워 본다
대칭	대칭인 모양은 중심을 둘러싼 무리로 본다
공동 운명	같은 방향으로 움직이는 것을 한 무리로 본다
연속	겹쳐 있어도 따로 떨어진 물체로 본다
과거 경험	익숙한 모양은 낯선 맥락에서도 알아본다
전경-배경	평면도 앞과 뒤가 있는 입체로 해석한다	실물 스위치를 닮은 토글은 경험과 전경-배경 덕분에 켜는 법이 바로 보인다

데이터-잉크 비율처럼, 꼭 필요한 디자인 결정 ÷ 전체 디자인 결정의 비율이 디자인 밀도다. 같은 정보를 여러 방식으로 표현해 보면 결정의 수가 다르다. 무엇이 필요한 결정인지는 개인 취향과 문화에 따라 여전히 주관적이지만, 잉크나 데이터 양만 세는 것보다 UI에 훨씬 쓸모 있다.

그래도 UI는 일하고, 놀고, 이해하고, 사람을 잇기 위해 존재하고, 그러려면 사용자가 행동해야 한다. 밀도는 컴포넌트, 레이아웃, 화면을 넘어 여정 전체의 공간과 시간에서 세야 한다.

시간 밀도: 같은 시간에 할 수 있는 일

같은 시간에 할 수 있는 일이 많을수록 시간 밀도가 높다. 가장 큰 요인은 로딩 시간이고, 화면 속 여백과 달리 순간과 순간 사이의 간격은 짧을수록 좋다. 무거운 소프트웨어가 많은 지금은 화면에 더 우겨 넣기보다 시간 밀도를 높이는 편이 효과가 크다. 빽빽한 전문가용 도구의 진짜 강점도 데이터 양보다 지연 없는 전환에 있다.

사용자의 네트워크나 CPU, 결제 처리나 상담 응답처럼 줄일 수 없는 시간도 있다. 그때는 시간 자체가 아니라 시간의 체감을 바꾼다.

간격	체감	설계
100ms 미만	동시에 일어난 것처럼 느낀다	전환 애니메이션을 넣으면 오히려 느리게 느껴질 수 있다
100ms ~ 1초	두 동작의 연결이 끊긴다. "눌렸나? 고장 났나?"	애니메이션과 전환으로 틈을 잇는다
1 ~ 10초	애니메이션만으로는 못 잇는다. 이탈이 가장 많은 구간	시스템이 정상 동작 중임을 알리는 불확정 로딩 표시(스피너)
10초 ~ 1분	10초 넘게 같은 스피너를 보면 멈췄다고 여긴다	남은 양을 보여 주는 확정 진행 표시(진행 막대). Harrison 외의 「Faster Progress Bars」(CHI 2010) 실험에서는 줄무늬가 뒤로 흐르는 진행 막대가 체감 대기를 11% 줄였다
1분 이상	아무것도 못 하게 막으면 짜증이 쌓이고, 긴 과정은 오류도 잦다	사용자가 떠나 다른 일을 하게 두고, 끝나면 알린다

100ms·1초·10초 경계는 닐슨 노먼 그룹이 정리한 응답 시간의 세 가지 한계와 같다. 연속 동작의 프레임 예산과 측정 지표(INP)는 UI 엔지니어링의 열두 가지 문제에 있다.

가치 밀도: 결국 무엇을 얻나

공간과 시간의 밀도는 수단이다. 인터페이스는 생김새가 아니라 가능하게 하는 결과로 가치가 있다. 업무용 소프트웨어라면 돈으로, 오락이나 교육이라면 무형의 가치로 나타난다. 밀도의 본질은 가장 적은 시간, 공간, 픽셀, 잉크로 가장 가치 있는 결과를 주는 것이다.

긴 폼을 나누는 이유

긴 폼은 단계별 마법사로 쪼개고 진행 상황을 저장하라는 흔한 권고가 있다. 질문을 한 페이지에 모두 올리면 시각적으로는 빽빽하지만, 채우는 데 오래 걸려 많은 사용자가 끝내 제출하지 않는다. 반쯤 채운 폼에는 가치가 없다.

선택	시각·시간 밀도	가치 밀도
단계를 나누고 오류 안내를 명확히	공간과 단계, 시간이 더 든다	제출률이 오르면 높아진다
가치를 덜지 않으면서 더 촘촘하고 빠르고 오류가 적게	높아진다	그대로 높아진다

시각·시간 밀도를 일부 내주더라도 결과가 더 가치 있어지면 전체 밀도는 오른다. 터프티의 원칙을 따르되, 최대화할 대상은 가치 밀도다.

성긴 화면이 더 밀도 높을 때

가치 밀도를 최적화하면 시각적으로는 성기지만 가치 밀도는 훨씬 높은 인터페이스가 나오기도 한다. 링크 모음 포털보다 입력창 하나로 웹 전체에 닿게 한 검색 엔진이 그 예다.

정리

첫눈의 빽빽함(시각 밀도)은 편향된 판단이다. 밀도를 이야기할 때 기준으로 삼지 않는다.
차트는 데이터-잉크 비율을 1에 가깝게 한다. 단 독자에 따라 적정선이 다르다.
UI는 픽셀 대신 디자인 결정을 센다. 근접·유사 같은 게슈탈트 원리 중 꼭 필요한 결정만 남긴다.
화면을 우겨 넣기보다 로딩을 줄여 시간 밀도를 높이는 편이 효과가 크다. 줄일 수 없는 대기는 구간별로 체감을 설계한다.
최종 기준은 가치 밀도다. 단계를 늘리거나 화면을 비우는 쪽이 더 많은 가치를 줄 수도 있다.

버그 제보