#Process #Design System #Tip 🙄 이 메시지는 어떤 컴포넌트를 써야 할까? 👀효정's 큐레이팅 멘트 (🙏재발송🙏) 본문 일부가 누락되어 재발송된 뉴스테러입니다. 번거롭게 해드려 죄송합니다. 오늘 아티클은 어떤 메시지를 사용자에게 노출해야 할 때, 적절한 메시지 컴포넌트를 선택할 수 있는 방법에 대한 내용을 담고 있습니다. 여러분은 본인만의 메시지 컴포넌트를 선택하는 기준이 있으신가요? 만약 없으시다면, 이 글의 저자는 어떻게 의사결정을 진행하고 있는지 한 번 읽어보시기를 추천드려요. 저는 며칠 전 긴 고민 없이 메시지를 노출할 토스트와 모달 팝업 컴포넌트를 정의를 했었는데, 이번 아티클 발행을 준비하면서 살-짝 뜨끔 했네요.. 😅 여러분은 어떠신가요? 그럼, 이제 읽어볼까요?
우리 팀의 경우, 프로덕트 디자이너와 개발자에게 메시지 컴포넌트에 대한 추가 기능 요청을 자주 받는 편이다. 보통 그들은, "이 컴포넌트 그대로 사용하고 싶지만, 이 상황에는 버튼이 추가되어야 할 것 같아요." 라 말하는데, 초기에는 디자이너와 개발자가 컴포넌트를 사용하지 않거나 우리 팀과 합의되지 않은 기능을 추가했고 이로 인해 많은 트러블이 있었다. 이제는 한 걸음 물러서서, ‘메시지 판단 트리'라는 것을 통해 그들이 전달하고자 하는 메시지와 그에 맞게 사용해야 하는 컴포넌트를 결정 및 전달할 수 있게끔 업무를 진행하고 있다. 현재 우리 팀에서는 애플의 HIG Views와 구글의 'Material Design Dialogs’와 같은 기본 메시지 형태와 프로덕트 상황에 맞는 몇 가지 새로운 유형의 컴포넌트를 정의해 사용하고 있다. 이를 정의하기 전, 초반에 우리 팀은 기본적인 참고가 될 만한 메시지 컴포넌트용 판단 트리를 찾는데 어려움을 겪었고, 결국 우리의 상황에 맞는 판단 트리 툴킷을 맨땅에 헤딩하듯 만들었다. 부디 이 글을 읽는 여러분에게는 도움되길 바라면서, 시작은 컴포넌트를 기본적인 두 가지 유형의 메시지로 구분하는 것에서부터 시작한다.
의사 결정 메시지 의사 결정 메시지는 일종의 어떤 액션을 취하기 위한 컴포넌트라 할 수 있다. ‘이 새로운 기능을 사용해 보시겠습니까?’ ‘예’,‘아니오', 혹은 ‘탑승하는 승객의 수는 얼마입니까?’라는 질문에 숫자를 선택해야 하는 경우를 말한다. 다음과 같이 질문들을 고려해보자.
시트(Sheet) 사용자에 의해 노출되어 다음 테스크를 진행할 수 있는, 하단에 고정되는 패널이다. 동일한 레벨의 옵션 메뉴로 가장 일반적으로 사용되며, 애플의 Action Sheet와 구글의 Bottom Sheet가 기본적이다. Optional (선택적인) - 해당 결정이 필수적이지 않으며 제외될 수 있는 경우 Utilitarian (강조가 필요 없는 경우) - 모든 선택 항목의 레벨이 동일하거나, 주로 취해야 할 행동이 없을 경우
시트(Sheet) : 안드로이드(왼쪽), iOS(오른쪽) 프롬프트 스크린 (Prompt Screen) 기본 화면 위에 나타나는, 사용자의 의해 시작되는 화면이다. 어떤 개념을 설명하고자 많은 양의 콘텐츠 노출이 필요할 때, 온보딩 및 학습을 위한 모달로 가장 일반적으로 사용된다. Optional (선택적인 경우) - 해당 결정이 필수적이지 않으며 제외될 수 있는 경우 Promotional (강조가 필요한 경우) - 눈에 잘 띄는 버튼이 필요한 경우 Blocking (무관한 경우) - 뒤에 있는 화면이 내용은 현재 결정을 내리는 데 중요하지 않은 경우
프롬프트 스크린 (Prompt Screen) 프롬프트 패널 (Prompt Panel) 패널은 사용자에게 현재 보고 있는 화면에 대한 선택권을 제공하고자 시스템적으로 또는 사용자의 이전 행동으로 인해 시작되는 화면을 말한다. 시간이나 어떤 조작의 조건으로 해제하거나 종료할 수 있으며, 새로운 기능에 대한 가벼운 학습을 제공할 때 가장 일반적으로 사용된다. Optional (선택적인 경우) - 해당 결정이 필수적이지 않으며 제외될 수 있는 경우 Promotional (강조가 필요한 경우) - 눈에 잘 띄는 버튼이 필요한 경우 Contextual (연관 있는 경우) - 뒤에 있는 화면이 내용이 현재 결정을 내리는 데 중요한 경우
프롬프트 패널 (Prompt Panel)
얼럿 (Alert) 플로우 (Flow) 사용자 경험에 있어 일종의 ‘골든 패스' 혹은 플로우 중 일부라 할 수 있으며, 메시지 템플릿이 아닌 현재 인터페이스나 패널 등과 같은 것들을 사용해야 한다. Mandatory (필수적인 경우) - 사용자가 다음 진행을 위해 조치를 취해야 하는 경우 Promotional (강조가 필요한 경우) - 눈에 잘 띄는 버튼이 필요한 경우 Blocking (무관한 경우) - 뒤에 있는 화면이 내용은 현재 결정을 내리는 데 중요하지 않은 경우 우리는 Flow를 판단 트리에 포함시켰는데, 그 이유는 여러분이 언제 모달을 사용해야 하고 실제 인터페이스를 디자인해야 하는지 아는 것이 중요하기 때문이다. 정보를 전달하는 메시지 정보를 전달하는 메시지 컴포넌트의 경우에는 정보를 소비하는 것이 주목적이다. ‘이 기능은 x, y, z를 수행한다'거나 ‘여러분이 수행한 작업이 성공적으로 마무리되었다'고 알려주고 필요하지 않다고 판단되는 정보들을 제공하지 않는다. 다음과 같이 질문들을 고려해보자.
정보 패널 (Info Panel) 정보 패널은 프롬프트 패널과 유사한 타입 중 하나로, 유일한 차이점이라 함은 어떤 행동을 강조하지 않다는 데 있다. 정보 패널의 경우 사용자가 ‘더 많은 정보 보러 가기' 를 눌렀을 때 패널의 정보와 관련 있는 내용의 화면으로 넘어가는 것이 자연스럽다. Responsive (즉각적인 노출이 필요한 경우) - 행동에 반응하여 나타나야 하는 경우 Long (긴 경우) - 그래픽을 포함한 장황한 정보를 노출하는 경우
정보 패널 (Info Panel) 과정 중 디자이너들 대부분이 여전히 우측 상단의 닫기 버튼에만 의존하여 버튼을 배치한다는 것을 알게 됐는데, 만약 우리가 다시 제작하게 된다면 프롬프트 패널과 정보 패널은 같은 컴포넌트로 제작될 것이다.
정보 패널의 다양한 유형들 토스트 (Toast) Responsive (즉각적인 노출이 필요한 경우) - 행동에 반응하여 나타나야 하는 경우 Brief (짧은 경우) - 그래픽을 포함하지 않으며 간결한 정보를 가지고 있는 경우
토스트 (Toast) 디자이너들은 토스트 방식 자체가 매우 가볍고 화면 위에 바로 노출시킬 수 있어, 디자인 시 토스트를 사용하는 것을 선호한다. 원래대로라면 접근성 지침에 따라 토스트 사용을 피해야 하는 것이 맞는데, 그 이유는 일시적인 노출이 특징인 토스트의 경우 리더기에 읽히지 않는 문제가 있기 때문이다. 하지만, 실무에서는 프로덕트 팀에서 토스트 케이스를 우리 팀에게 가져왔고, 이에 우리는 접근성 팀과 논의해 이를 적용했다. 다만 우리는 여전히 최대한 피하려고 노력하고 있으며, 결정적으로 토스트에 노출되는 메인 카피는 토스트 전체가 버튼이 될 수 있도록 행동을 암시하는 방향으로 정리되도록 제안하고 있다.
토스트 액션의 예시 배너 (Banner) 얼럿과 비슷하지만 어떤 조치를 취할 수 있는 기능은 존재하지 않는다. 사용자가 서비스 지역 밖으로 여행하거나 인터넷 연결이 끊겼음을 알릴 때 주로 사용된다. 기본적인 형태로는 구글의 Banner가 있다. Instructional (설명이 필요한 경우) - 해당 정보가 사용자를 안내해야 할 경우 Universal (통용되는 경우) - 해당 정보가 어떤 화면에서도 관련이 있는 경우
배너 (Banner) 우리는 이 컴포넌트를 자주 사용하지 않기 때문에, 제거하는 걸 고려하고 있다. 툴팁 (Tooltip) 꼬리가 있는 작은 모달인 툴팁의 특징은 UI에 대해 관심을 끌고 더 많은 정보를 제공하는 데 사용된다. UI 위로 새롭게 업데이트된 기능 설명을 노출할 경우 주로 사용되며, 기본적인 형태로는 애플의 Help Tags와 구글의 Tooltip이 있다. Instructional (설명이 필요한 경우) - 해당 정보가 사용자를 안내해야 할 경우 Anchored (고정되는 경우) - 항상 가까이 배치되어 있으며 관련된 요소와 함께 움직이는 경우
툴팁 (Tooltip) 마무리 하며 각 플랫폼 (안드로이드, iOS, 웹)에 대한 대표적인 사례를 모두 고려한 다음, 잘 작동하도록 의도된 컴포넌트를 구축하도록 하자. 더 큰 메시지 컴포넌트를 구축하기 전에 이미지나 텍스트 및 버튼과 같은 기본적인 블럭 요소를 구축한다면 더 쉽게 재사용하고 업데이트할 수 있다. + 더 알고 싶다면 팝업을 디자인하면서 UX 시나리오의 디테일을 높이기 위한, Jay D님만의 셀프 체크리스트를 소개하고 있는 글 입니다. 작은 모달이라 할지라도 Layout, Text, Buttons, Interaction, Motion, Navigation, 총 6가지 카테고리 안에 꼼꼼하게 완성도를 높일 수 있는 질문이 정리되어 있으니, 참고해 여러분만의 또 다른 팝업 작업용 체크리스트를 만들어보시는 건 어떨까요? User Inyerface 라는 의도적으로 잘못 설계되어 있는 이 웹사이트를 실제로 경험하면서 팝업에 대한 분석과 Grace Lee님이 내린 해결책에 대해 살펴볼 수 있는 글입니다. 본인만의 가설과 그에 따른 팝업의 문제를 꼼꼼히 짚어주셨단 느낌을 받았어요. 중간에 팝업의 종류에 대해서도 간략하게 소개하고 있으니, 가볍게 읽어보시면 좋을 것 같아요. 지난 뉴스레터 살펴보기 [디독에게 도네리카노 한 잔 ☕️후원하기] 이번 레터도 '수고했다', 만약 디독 팀에게 커피 한 잔 사주고 싶으신 분들이 계시다면 아래 계좌를 통해 후원해주세요! 향긋함은 덤, 여러분의 따뜻한 관심과 도움이 서비스 유지에 정말 큰 힘이 됩니다. 10월 후원해주신 분들 주아윤, 김지훈, 이성준, 윤백점, 김다정, 곽동욱 외 3명   |
