likeornament 님의 블로그
정확한 가운데와 눈으로 보는 가운데, 어느 쪽을 선택할까? 본문
7월 회고록에 적었던 것처럼 MSW를 사용해 배포를 완료하고,
프로젝트 마무리를 하던 중 PR 작성 페이지에서 한 가지 UI 고민이 생겼다.
상단의 step(진행 단계) 표시를 가운데 정렬할 때, 수학적으로 정확한 가운데 정렬을 해야 할지, 아니면 시각적 착시를 고려해 살짝 조정해야 할지 고민이었다.
다른 기능(단어, 지식, 면접)에서는 좌측 상단에 페이지를 나갈 수 있는 X 버튼이 있다.
그러나 PR 작성 페이지에서는 처음 들어갔을 때 나갈 버튼이 없어, step을 가운데로 옮기고 좌측에 X 버튼을 추가했다.
문제는 여기서 발생했다.
step을 정확히 가운데 정렬했지만, 좌측 X 버튼과 우측 ‘변경된 파일’ 버튼의 길이가 달라 step이 오른쪽으로 치우쳐 보이는 착시가 생긴 것이다.
수학적으로는 정확한 가운데지만, 사용자의 시각에서는 불균형해 보였다.
처음에는 착시를 고려해 step을 살짝 왼쪽으로 이동시키는 방법도 생각했다.
이렇게 하면 첫 번째 step에서는 시각적으로 가운데처럼 보인다.
하지만 2단계부터는 좌측에 ‘이전 단계’ 버튼이 생기고, 좌우 버튼 길이가 비슷해져 step이 자연스럽게 가운데 정렬되어 보였다.
즉, 단계가 바뀔 때마다 step 위치가 달라지는 것은 오히려 이상하게 느껴질 수 있다.
고민한 선택지는 두 가지였다.
- 수학적으로 정확한 가운데 정렬
- 1단계: 오른쪽으로 치우쳐 보임
- 2단계 이후: 좌측 ‘이전 단계’ 버튼과 우측 버튼 길이가 비슷해져 가운데 정렬처럼 보임
- 착시를 감안해 중앙에서 살짝 왼쪽으로 이동
- 1단계: 가운데처럼 보임
- 2단계 이후: 왼쪽으로 치우친 것이 눈에 띔
결국 선택한 방법은 X 버튼과 이전 단계 버튼, 그리고 변경된 파일 버튼을 모두 아이콘으로 통일하는 것이었다.
- 1단계: X 버튼 → 작성 과정 완전 종료 의미, 검은색
- 2~3단계: 이전 단계(Left Arrow) → 작성 진행 중 이전 단계로 돌아가기 의미, 보라색
- 변경된 파일 버튼도 X 버튼과 동일하게 아이콘으로 변경 → 좌우 길이가 동일
또한, 아이콘만 있으면 직관성이 떨어질 수 있으므로, 마우스를 올리면 툴팁으로 텍스트가 나타나도록 했다.
색상도 Header의 다른 아이콘과 통일감을 위해 보라색으로 맞췄다.
정리하면,
PR 작성 기능에서는 각 step마다 Header 양쪽 버튼의 길이가 달라 시각적 착시가 발생할 수 있으므로,
step을 옮겨 균형을 맞추는 대신 버튼 길이를 동일하게 맞춰 step을 정확히 가운데에 두는 방법을 선택했다.
이로써 수학적 정렬과 시각적 균형을 동시에 확보할 수 있었다.