<h3>변칙 UI 어떻게 바라봐야 할까?</h3><strong>(에디터, 재그마스터)</strong> 애플과 구글은 각각 디자인 가이드를 기본으로 제공하고 있어요. 구글의 머터리얼 디자인 가이드가 대표적인데요. 반드시 지켜야 하는 것은 아니지만 지키지 않을 경우 에디터 추천 등의 영역에 들어갈 가능성이 현저히 낮아지기에 기본 가이드를 유지하되 앱의 특성에 맞는 UI를 가져가고자 하는 경우가 많습니다. 그래서 이번에는 일반적이지 않은 시도를 한 사례들을 중심으로 주제를 잡아봤어요. <strong>(에디터, 동동)</strong> 변칙이란 사전적인 정의로 원칙에서 벗어나 달라진다는 뜻입니다. UI에서 원칙은 사용자 편의성에 초점이 맞춰져 있고요. 변칙적인 UI를 바라보는 시선은 서비스 컨셉에 따른 독특함이냐, 그저 색다름에 불과한 불편함이냐 2가지로 나뉘는 것 같아요. 오늘 준비한 사례들은 어떤 쪽에 속할지 함께 살펴보면 좋겠네요! <br/><br/> <h3>변칙적인 UI 사례를 만나볼까요?</h3><h4><span style="text-decoration: underline;"><strong>1. 대한민국 구석구석 (Bad)</strong></span></h4><img class="size-full wp-image-19584 aligncenter" src="https://www.wishket.com/media/newscenter/619/1.png" alt="" width="583" height="600" /><p style="text-align: center;">대한민국 구석구석</p> 대한민국 구석구석 상단 슬라이드 영역에 진입하면 별표 표시가 된 내용을 확인 할 수 있어요. 또 스크롤을 위로 올리는 행동을 취할 때도 볼 수 있습니다. 서비스명과 검색, 내 주변 장소, 사이드 메뉴로 쉽게 접근할 수 있도록 의도 한 것 같은데 사용성 측면에서 편리한 방법일까? 라는 생각이 쓰는 내내 들었습니다. <strong>- 다른 행동을 하기 위해 해당 메뉴를 활용한다는 전제가 있었겠지만 기존 화면을 절반 이상 보지 못하게 됩니다.</strong> <strong>- 회원가입 또는 로그인 후 별다른 안내가 없어 특정 메뉴로의 이동이 쉽지 않습니다.</strong> <strong>- 아이콘과 텍스트를 함께 활용했는데, 폰트 사이즈가 워낙 작아 특정 디바이스에서는 구분하기가 쉽지 않습니다.</strong> <strong>- 영역의 절반 가까이를 차지하고 있는 '대한민국 구석구석'은 아무런 역할도 하지 않습니다.</strong> <strong>- 특정 패턴 내 확인 가능하지만 동일한 행동 속 노출 되지 않는 경우도 많습니다.</strong> <strong>- 제 손이 꽤 큰데, 엄지손가락으로 이동하기가 정말 어려웠습니다.</strong> <br/> <img class="size-full wp-image-19585 aligncenter" src="https://www.wishket.com/media/newscenter/619/2.png" alt="" width="582" height="600" /><p style="text-align: center;">핀터레스트</p> 핀터레스트 역시 하단탭을 갖고 있지않습니다. 대신 플로팅 형태로 메뉴를 확인 할 수 있도록 구성 되어 있는데요. 스크롤링을 멈추면 바로 메뉴를 확인할 수 있으며 하단탭과 유사한 영역에 자리 잡고 있어 이질감이 느껴지지 않습니다. 홈 - 검색 - 메시지 - 프로필 등 핵심 메뉴로만 구성 되어 있어 어디든 편리하게 이동 할 수 있다는 점도 매력적이죠. <strong>- 핵심 메뉴, 기능 사용은 언제든 쉽게 가능해야 합니다.</strong> <strong>- 엄지 손가락으로 사용 가능한 범위에 자리 잡아야 합니다.</strong> <strong>- 사용자들이 충분히 인지 할 수 있는 아이콘이라면 텍스트는 과감하게 제외할 수 있어야 합니다.</strong> <strong>- 사용자가 현재 어떤 메뉴 또는 기능을 사용하고 있는지 알 수 있어야 합니다.</strong> <br/><br/> <h4><span style="text-decoration: underline;"><strong>2. 만화경 (Good)</strong></span></h4><img class="size-full wp-image-19586 aligncenter" src="https://www.wishket.com/media/newscenter/619/3.png" alt="" width="600" height="414" /><p style="text-align: center;">만화경</p> 만화경은 배달의 민족으로 우리에게 익숙한 우아한 형제들의 온라인 만화잡지 서비스입니다. 어릴 적 챔프와 같은 만화 잡지에는 늘 '애독자의 엽서'를 보낼 수 있었는데요! 만화경은 이를 앱 내 주요 기능 중 하나로 활용하고 있습니다. <strong>- 우체통을 주요 시각적 요소로 활용하고 있습니다.</strong> <strong>- 지금까지 총 몇 개의 애독자 엽서가 도착했는지 보여줍니다.</strong> <strong>- 진짜 엽서를 쓰는 듯한 경험을 할 수 있는 UI가 적용 되어 있습니다. (받는 사람, 우편 활용 등)</strong> 수단은 많이 변화 했지만 라디오를 들으며 청취자들이 여전히 '사연'을 보내는 이유는 내가 좋아하는 DJ가 읽어주고, 공감해주기를 바라는 마음 때문인데요. 애독자의 엽서 역시 만화를 읽고 좋아하는 작가나 운영자들에게 메시지를 전달 할 수 있는 하나의 채널로 활용되고 있는 모습입니다. 사용자들이 참여 할 수 있는 또 하나의 연결고리로 활용 될 수도 있고요. 설정 화면 내 응원의 글을 남겨주세요, 리뷰를 남겨주세요, 의견을 남겨주세요 라는 기능으로 있었다면 애독자의 엽서가 서비스 성격에 딱 맞는 모습으로 적용 될 수 있었을까요? <strong>에디터, 재그마스터의 덧붙임</strong> : 재밌는 건, 만화경이 애독자의 엽서 기능을 꾸준히 개선하고 있다는 점입니다. 사용자들이 꾸준히 참여하고, 그에 따른 즐거움과 긍정적인 경험을 할 수 있는 환경을 만들어주는 것이 얼마나 중요한 지 다시 한 번 알게 해주는 사례라고 생각합니다. <br/><br/> <h4><span style="text-decoration: underline;"><strong>3. 테사 (Good)</strong></span></h4><img class="size-full wp-image-19587 alignnone" src="https://www.wishket.com/media/newscenter/619/4.png" alt="" width="600" height="414" /><p style="text-align: center;">Tessa</p> 얼마 전 페이스북을 통해 알게 된 서비스 'Tessa' 입니다. 유명 작가들의 작품 소유권을 분할해 개인도 투자 할 수 있는 기능과 아트 관련 다양한 콘텐츠를 제공해주고 있죠. 서비스 성격도 쉽게 볼 수 없는 유형이지만, 더 독특한 건 주요 메뉴를 구성하는 방법이었습니다. 사이드 메뉴에 주요 기능이 들어가 있고, 뉴스, 아트워크, 스토리 세 가지 카테고리는 화면 왼쪽 기준 상 - 하로 구성이 되어 있습니다. 각 카테고리에 포함되는 콘텐츠는 좌 - 우 스와이프를 통해 확인 할 수 있고요. (카테고리 간 이동 역시 상 - 하 스와이프로 가능) 구성 자체는 낯설지만 사용성은 좋습니다. 오른손 기준, 엄지 손가락으로 모든 메뉴 이동 및 콘텐츠 확인 가능하기 때문입니다. <strong>에디터, 재그마스터의 덧붙임</strong> : 낯선 구성이라는 기준은 학습 기준으로 판단 할 수 있고, 이는 다시 화면 구성과 제스처 등으로 나뉠 수 있어요. 사이드 메뉴(햄버거 메뉴)를 예로 들면 앱 내 사용을 해야 할까, 하지 않아야 할까 라는 논란(?)이 꽤 오랫동안 이어져 왔는데요. 이제는 사용자들이 꽤 오랫동안 접해왔기에 탭 했을 때 어떤 화면으로 이어지며, 어떤 기능들이 주로 담겨 있는지를 알고 있습니다. 구성 자체가 낯선 방법이라면, 스와이프 등 익숙한 방법으로 사용할 수 있는 장치를 함께 고려해야 합니다. <br/><br/> <h4><span style="text-decoration: underline;"><strong>4. 루시드 (Good)</strong></span></h4><img class="size-full wp-image-19588 aligncenter" src="https://www.wishket.com/media/newscenter/619/5.png" alt="" width="600" height="526" /><p style="text-align: center;">루시드</p> 이번에는 명상과 힐링 에세이, 숙면 ASMR 등의 음성 콘텐츠를 제공하는 서비스 루시드를 살펴볼까요? 서비스 주요 기능인 음성 콘텐츠 화면과 사용자 기록 페이지를 상단에 구분해놨습니다. 일반적인 UI라면 상단, 하단탭으로 구성을 했을텐데 루시드는 하단 플레이리스트 영역이 고정 되어 있어 위와 같은 구조를 갖게 된 것 같습니다. 루시드의 변칙 UI가 좋았던 점은 직관적이고 메뉴 이동이 간편하다는 점입니다. 좌우 스와이프를 통해 쉽게 이동 가능하며 배경 컬러 역시 확실히 구분할 수 있도록 구성했습니다. 또 사용자에게 명상을 하며 자신의 기분이나 일상 등을 쉽게 기록할 수 있다는 학습 효과를 주고 있습니다. <strong>- 주요 메뉴 간 구분이 명확해야 합니다.</strong> <strong>- 주요 기능 일수록 접근이 쉬워야 하고 이동이 편리해야 합니다.</strong> <strong>- 사용자 참여가 필요한 메뉴 일수록 주요 위치에 배치해야 합니다.</strong> <br/><br/> <h4><span style="text-decoration: underline;"><strong>5. Syrup 월렛 (Good)</strong></span></h4><img class="size-full wp-image-19589 aligncenter" src="https://www.wishket.com/media/newscenter/619/6.png" alt="" width="600" height="528" /><p style="text-align: center;">시럽</p> 개인적으로 올리브영을 자주 방문하는데, 그 때마다 꺼내보는 앱이 바로 Syrup 월렛입니다. SK Planet에서 운영하는 모바일 지갑으로 저는 포인트 카드 관리를 위해 주로 사용합니다. 최근에는 금융 상품과 연계해 혜택을 받아볼 수 있는 재테크 탭도 추가 되었고요. Syrup은 주요 메뉴를 하단 탭 형태로 배치했어요. 여기까진 일반적인 구성이라고 볼 수 있는데요. 하단 첫 번째 메뉴를 탭하면 화면 이동이 아닌 햄버거 버튼에 주로 활용되는 드로워 형태로 이어집니다. 하단 탭과 햄버거 메뉴(드로워메뉴)는 화면 전환으로 구분 하는데 그 일반적인 요소를 깨버린 사례이기도 합니다. 1 depth 메뉴(내 지갑) 내 2 depth 메뉴(내지갑/멤버십/쿠폰)를 상단 좌측 정렬로 많이 사용하는 기능을 크게 배치했어요. 그러다 보니 햄버거 버튼이 주로 배치되는 좌측 상단에 여백이 없어졌죠. 그 결과 고객센터, 계정 관리 등의 메뉴들이 하단 첫번째 "메뉴"라는 지면에 배치하게 됩니다. 이렇게 위치에 변칙을 둔 대신, 아이콘(=)과 ‘메뉴’라는 이름으로 사용자에게 이질감을 줄이려 노력한게 아닐까 생각됩니다. <strong>- 변칙을 준다면, 사용자의 혼선을 줄이기 위해 인터렉션 디자인을 지켜줘야 합니다.</strong> <strong>- 메뉴의 1depth, 2depth별 주요 기능의 배치를 먼저 고려해주세요.</strong> <br/><br/> <h4><span style="text-decoration: underline;"><strong>6. 웨이보 (Bad)</strong></span></h4>해외 서비스도 함께 살펴볼까요? 중국의 대표적 서비스 중 하나인 웨이보입니다. 웨이보는 정~말 많은 변칙을 볼 수 있었어요. 시장 전반적인 분위기만 봐도 전세계 마켓이 공통이어도 중국 마켓을 별도로 두는 경우를 자주 접할 수 있죠? 이는 국가적인 정책 이슈도 있지만, UI에 대한 사용자의 학습 자체가 다르다는 것을 알 수 있습니다. <img class="size-full wp-image-19590 aligncenter" src="https://www.wishket.com/media/newscenter/619/7.png" alt="" width="600" height="345" /><p style="text-align: center;">weibo ME 메뉴</p> 웨이보 마이페이지(ME)입니다. SNS의 마이페이지를 보면 계정 설정, 팔로우 등을 일반적으로 가져 갑니다. 그런데 웨이보는 다소 많은 기능을 몰아넣었어요. 앨범, 좋아요 모아 보기, 스토어 그리고 포인트, 마지막으로 추천 인맥까지. 위 이미지는 무려 3번에 걸쳐 스크롤을 한 화면들입니다. 심지어 마지막 Recommended for you의 페이지는 스크롤링에 따라 리스트를 갱신하는 모습입니다. <br/> <img class="size-full wp-image-19591 aligncenter" src="https://www.wishket.com/media/newscenter/619/8.png" alt="" width="600" height="526" /><p style="text-align: center;">weibo message 메뉴</p> 이어서 Message 메뉴 입니다. 메세지와 코멘트를 모두 모아서 볼 수 있는 영역입니다. 많은 친구/기업 계정과 대화 할수록 리스트는 길어질 수 밖에 없는 구조인데요. 상단에 빗자루 버튼이 자리 잡고 있습니다. 탭하면 팝업을 통해 읽지 않은 대화를 모두 삭제 할 건지 확인합니다. 굉장히 특이한 구성인데요. 해당 기능에 대해 현지인들의 반응은 인플루언서 등에게만 필요한 기능으로 보여지며 잘 사용 하지 않는다는 반응이 많았습니다. 몇 개는 남기고 싶은데 한번에 지워지는 것이 부담되기 때문이라고 해요. 조금만 더 디테일하게 설정 할 수 있었다면 어땠을까 라는 생각이 들었습니다. 이렇듯 국가별 색다른 인식도 기획에 재밌는 요소입니다. 중국 시장에 도전하는 분들은 변칙적인 UI를 잘 활용하면 좋겠어요.
