[5분 UI/UX]
구텐베르크 다이어그램
에드먼드 C. 아놀드 (사진출처 : The New York Times)현대 신문의 아버지라 불리는 에드먼드 C. 아놀드(Edmund C. Arnold)는 1950년경 새로운 레이아웃 이론을 발표한다. 이 이론은 현재까지 신문, 책, 홍보물, UI 등에서 널리 활용되고 있는데 이것이 바로 금속활자의 아버지 요하네스 구텐베르크의 이름을 딴 구텐베르크 다이어그램(Gutenberg Diagram)이다.
에드먼드 C. 아놀드의 구텐베르크 다이어그램구텐베르크 다이어그램에 따르면 사람의 시선은 왼쪽 위에서 시작해 오른쪽으로 이동하며 글자를 읽고 중력을 따라 아래로 떨어지며 오른쪽 아래에서 끝난다고 정의한다. 이때 시작점인 왼쪽 위와 끝점인 오른쪽 아래를 연결한 대각선이 시선이동 방향이 되며 이를 독서 중력(Reading Gravity)이라 부른다.
책을 읽을 때 사람의 시선 이동방향우리가 책을 읽는다고 생각해 보자. 책의 왼쪽 위부터 읽기 시작해 오른쪽으로 갔다가 아래로 떨어지면서 마지막에서는 오른쪽 아래에서 끝나게 된다. 사람이 책을 읽을 때 흐름과 시선이동 방향을 분석해 이를 이론화한 것이 구텐베르크 다이어그램의 기본 골자다.
그렇다면 구텐베르크 다이어그램이 UI/UX와 어떤 연관이 있는 걸까?
구텐베르크 다이어그램을 모니터에 대입해 보자.
사람의 시선은 모니터 왼쪽 위에서 시작해 오른쪽 아래로 끝난다.
지금 자주 사용하는 서비스의 홈페이지나 앱에 접속해 로고가 어디에 있는지 확인해보자. 대부분의 서비스가 왼쪽 위에 로고가 있다. 이는 구텐베르크 다이어그램에 의해 의도된 배치다. 사용자의 시선이 가장 먼저 닿는 곳에 브랜드나 서비스 로고를 노출해 사용자에게 무의식적으로 브랜드를 각인시키는 전략이다. 서비스에 접속했을 때 가장 먼저 시선이 닿는 곳에 로고를 배치해야 사용자가 우리 서비스를 한번이라도 더 보고 기억해줄 확률이 높을테니까.
여기서 이런 질문을 하는 사람이 있을 것이다.
“사람들의 시선이 무조건 왼쪽 위부터 시작한다는 보장이 있나요?”
좋은 질문이다. 우리가 책을 읽을 때 감각을 다시 떠올려보자.
책을 읽을 때 시선은 항상 왼쪽 위로 향하게 된다. 어떤 책이든 왼쪽 위에서 문장이 시작할 테니까. 오랜 습관에 의해 우리 뇌는 책을 볼 때 왼쪽 위가 시작이다라는 명령어가 각인되어 있는 것이다. 그래서 책을 펼치면 습관적으로 시선이 왼쪽 위로 향하게 되어 있다.
홈페이지나 앱도 마찬가지다.
사용자들이 서비스에 접속하면 책을 읽을 때와 마찬가지로 시선이 자연스럽게 왼쪽 위로 향하게된다. 그리고 대각선 방향으로 이동하면서 오른쪽 아래에서 끝나게 될 것이다.
가장 많이 사용하는 메일쓰기를 왼쪽 위에 배치하고 시선 이동 동선에 주요 기능을 배치한 네이버 메일구텐베르크 다이어그램을 UI에 응용하는 방법은 간단하다. 사용자의 시선 흐름과 이동 방향, 콘텐츠의 중요도와 플로우를 고려해 레이아웃을 설계하고 콘텐츠를 배치하는 것이다. 중요도가 높고 자주 사용하는 기능은 가장 먼저 시선이 향하는 왼쪽 위에 배치해 사용자가 기능을 빨리 인지할 수 있도록 하고 정보를 입력하거나 다음 스탭으로 이동하는 페이지는 사용자의 시선이 끝나는 지점에 완료나 다음 버튼을 배치해 플로우와 시선 이동 방향을 일치시키는 것이다.
구텐베르크 다이어그램은 인지과학 측면에서 강력한 이론이다. 발표된 지 70년이 지났지만 10년, 20년 후에도 통용될 법칙이며 UI/UX를 하는 사람이라면 꼭 알아야 할 필수 이론 중 하나이다.
✔️ 핵심 3줄 요약
1️⃣ 사람의 시선은 왼쪽 위에서 시작해 오른쪽 아래에서 끝난다.
2️⃣ 사용자의 시선이 가장 먼저 닿는 곳에 가장 중요한 기능을 배치한다.
3️⃣ 구텐베르크 다이어그램을 UI에 응용하면 사용자 시선흐름에 맞는 콘텐츠 배치가 가능해진다.
