[피드백 #1] 완료 페이지, 왜 테이블로 만들었어요?
랜선 사수의 디자인 피드백 #1
프로젝트에서 만난 중급 디자이너들에게 피드백을 많이 주는 사항들이 몇 가지 있는데 그중 하나가 바로 완료 페이지 또는 확인 페이지에서 테이블형 UI를 리스트형 UI로 바꾸라는 피드백이다.
흔한 상황
중급 디자이너에게 완료 페이지 디자인이 할당되었다.
기획자가 보내준 스토리보드는 테이블로 정리되어 있었다.
기획 설계서 예시'간단하네. 기획서대로 빠르게 만들자!'
손이 빠른 당신, 후다닥 디자인 한 후 상사에게 보냈다.
시니어: "완료 페이지를 테이블로 만든 특별한 이유가 있나요?"
주니어: "어... 기획서가 테이블이고 as-is도 테이블이라서요"
시니어: "… 한번 다시 생각해볼까요?"
✅ 리스트 vs 테이블, 무엇을 기준으로?
리스트와 테이블 뭐가 다를까?
- 리스트형: 블록 단위로 세로 스캔하기 쉬운 구조
- 테이블형: 칸(열)으로 구분된 반복 데이터 구조
실제 차이를 보자
테이블형 VS 리스트형 (설계서를 반영항 디자인 예시)어떤 느낌이 드는가?
뭔지 모르겠지만 테이블형… 올드해 보이는 느낌적 느낌이 바로 들지 않는가?
모바일에서는 거의 리스트형이 답
모바일에서는 한 화면에 중요한 정보만 노출하는 게 중요하다.
그러므로 보통 확인 페이지에서는 세로 스캔이 용이한 리스트형 UI를 주로 사용한다.
많은 정보를 명확히 구분해서 보여줘야 하는 내용이 아닌 이상, 모바일에서는 테이블형 UI를 거의 사용하지 않는다라고 생각하면 쉽다.
그리고 솔직히 말하면, 세상에서 가장 아름다운 테이블을 만들지 않는 한 확인 페이지에서 테이블형을 쓰는 순간 디자인은 10년 전으로 회귀하는 느낌이 들것이다.
실무 비교 체크리스트
판단이 안 될 때는 이것부터 확인해보자.
스캔 속도: 어느 쪽이 더 빠르게 읽히나?
모바일 가독성: 작은 화면에서 어떤 게 더 편한가?
사용자 친화도: 어느 쪽이 더 친숙하게 보이는가?
조언
최근에는 기획서 자체가 리스트형으로 전달되는 경우가 많지만, 가끔 리뉴얼 프로젝트에서 예전 스토리보드를 차용할 때 테이블로 된 경우가 있다.
기획서는 목적(Why)과 요구사항(What)을 명확히 하는 문서이지, 그게 꼭 최적의 UI라는 뜻은 아니다. 그러므로 '그냥 기획서대로 만들면 되지'가 아니라, 기획이 설계하지 못한 의도를 디자인이 메우는 것으로 생각하고 디자인하자.
잘 모르겠는가?
그럼 두 버전 다 만들어라! 테스트해보는 습관, 이것이 가장 중요하다.