by
Oct 04. 2019
디자인 자문자답 : 팝업 편
UX 디테일을 묻고 더블로 가보자
다시 한번, 시작은 디테일이다.
잘 짜인 UX 시나리오를 평가하는 기준은 다양하다. 어떤 제품이나 서비스의 UX 시나리오인가, B2C인가 B2B인가, 웹 기반 서비스인가, 모바일 우선인가 등 다양한 요소에 따라 달라질 것이다. 하지만 어떤 서비스나 제품이든 간에 공통적으로 적용될 수 있는 평가 기준이 존재한다고 본다. 그것은 바로 UX 시나리오의 '디테일'이다. 이전 글들에서 계속 이야기했던 것처럼, UX시나리오는 개발 부서를 통해 실제 구현되어야 비로소 가치가 있다. 이런 관점에서 UX 시나리오의 빈틈은 구현물의 빈틈으로 직결된다. UX 시나리오가 허술하면 결과의 퀄리티는 보나 마나다.
UX 시나리오의 디테일이 중요한 다른 이유는 그것이 유관부서 간의 신뢰에 큰 영향을 미친다는 점이다. 개발자가 디자이너에게 던지는 "이러 이런 상황에서는 어떻게 동작해야 하나요? 팝업이 뜨나요? 타임아웃은 있나요? 몇 초인가요?"와 같은 질문을 명쾌하게 답하지 못한다면, 그것들이 문서에 기술되어 있지 않다면, 개발자는 더 이상 디자이너, 그리고 그 사람이 작성한 시나리오를 신뢰하지 않을 것이다.
그래서 나는 디자인을 할 때 스스로 많은 질문을 던져야 한다고 본다. 다양한 관점의 질문을 스스로에게 던지고 스스로 답을 고민하는 과정을 통해 UX 시나리오의 디테일은 견고해진다. 이 과정이 복서들의 쉐도우 복싱과 닮아있다고 생각한다. 그리고 이 과정을 지나 프로토타이핑 툴을 통해 스파링을 뛰어보는 게 좋겠다. 이런 관점에서 내가 실무에서 디자인을 하면서 자주 던지는 질문들을 정리해보려 한다. 당연히 이 질문들은 일개 디자이너의 생각일 뿐이다. 취할 것은 취하고 부족한 것은 스스로 추가하시면 되겠다. (이 관점에서 UX 영역인가 GUI 영역인가의 고민, 거버넌스와 UX 플랫폼에서 다뤄야 하는 질문인가? 등의 물음을 기반으로 질문을 필터링하지 않았다.)
팝업 디자인을 하면서 스스로 던진 질문들
이 시리즈의 첫 번째를 팝업으로 정했다. 가장 자주 쓰이는 UI 컴포넌트 이면서, 여러 요소로 구성되어 있어 다룰만한 내용도 적당해 보였다. 각 요소의 명칭은 혼란을 줄이기 위해 Google Material Design의 용어를 사용했다.
1. Container
2. Title
3. Supporting Title
4. Buttons
5. Scrim
Layout
타이틀을 제공하는가?
X 버튼을 제공하는가?
팝업은 스크린의 어느 위치에 등장하는가?
Text
타이틀, 버튼의 대소문자 규칙은 어떻게 적용되는가?
텍스트의 정렬 기준은 무엇인가?
타이틀, 텍스트의 최대 글자 수 제한이 있는가? 있다면 몇 자인가?
텍스트가 정해진 영역 이상으로 제공될 경우 (다국어 번역 등) 어떻게 대응되는가?
텍스트의 볼드 처리 기준은 무엇인가?
Buttons
버튼은 중앙 정렬인가, 우측 정렬인가?
버튼 중 긍정 의미가 우측에 제공되는가 좌측에 제공되는가?
버튼 레이블은 의미를 포함하는 단어로 구성되는가 부정, 긍정의 의미로 구성되는가?
버튼의 On Focus를 별도로 처리하는가? (마우스 사용 시)
Interaction
팝업의 등장 조건은 무엇인가?
팝업의 퇴장 조건은 무엇인가?
- 모달 팝업인가?
- 타임아웃 기능을 제공하는가?
팝업 등장 시 Scrim 처리하는가?
Scrim 영역 클릭 시 어떻게 동작하는가?
팝업은 Draggable한가?
Motion
팝업의 등장/퇴장 모션이 제공되는가?
모션은 어떤 Velocity graph를 기준으로 제공되는가? (Ease-in & out, Bounce 등)
Navigation
리모컨이나 키보드 4방향 키를 대응하는가?
Default Focus는 어떤 기능에 적용되는가?
4방향 이동 규칙은 무엇인가?
본인만의 UX 셀프 체크 리스트를 갖는다는 것
