이번 스터디에서는 코레일톡이 왜 불편한 서비스인지 알아보고 사용자들은 정확히 어떤 포인트에서 불편함을 느끼는지 알아보도록 하자.

일단 먼저 살펴보아야 할 부분은 코레일톡 서비스의 사용자층이다. KTX와 기차를 예매할 수 있는 유일한 플랫폼인만큼 사용자층이 한정적이지 않으며 청소년부터 중장년층까지 광범위한 사용자를 가지고 있는 특성이 있다. 색약이나 색맹, 시각,청각 장애인들도 모두 사용하는 서비스로 이런 서비스를 디자인 할때 가장 염두에 두어야 하는 것은 바로 유니버설디자인적인 측면에서의 고려이다.

코레일톡을 사용하는 목적은 기차표를 예매하기 위해서 일 것이다. 그 이후 부가적인 목적, 리무진 택시, 주변 관광 상품의 예약, 여행패키지 예약등이 딸려 올 수 있겠지만 서비스 본연의 서비스인 기차 예약의 목적을 달성 한 후 이루어져야 하는 부분이다.

정리하자면 코레일톡이라닌 서비스의 목표는 기차표를 예매하는 프로세스를 쉽고 빠르게 수행 할 수 있으면서, 작은 텍스트를 읽기 힘들고 반응 속도와 정보 구조에 대한 이해가 빠르지 않은 장애인과 중장년,어린이들도 쉽게 이해 할 수 있는 프로세스를 지닌 서비스가 되어야 하는 것이다.

그렇다면 지금의 코레일톡은 어떤 문제점을 가지고 있고 서비스의 목적에 부합하는 디자인을 소홀히 한다면 어떤 문제점이 발생 할 수 있는지 알아보도록 하자.

코레일톡이 불편한 이유 그 첫번째는

1. 너무 많은 인터렉션

열차를 예매할때 가장 먼저 정하는 것은 바로 날짜와 시간일 것이다. 코레일톡 앱에서 날짜와 시간을 선택 할 때에는 날짜,시간을 가로 스크롤로 디자인 한눈에 볼 수 있는 정보의 양이 적어인터렉션이 더 추가된다. 슬라이딩 방식으로 원하는 날짜에 맞춰 슬라이드가 멈추지 않기 때문에 멈추는 과정에서 터치하는게 한번 더 추가된다. 날짜를 고르는데 벌써 너무 많은 인터렉션이 벌써 들어가는 것이다.

이 이외에도 기차 시간표를 검색하는 방식 등 쓸데없이 많고 복잡한 인터렉션을 어렵지 않게 확인 할 수 있었다.

2. 정보위계를 고려하지 않은 디자인

텍스트가 너무 작은 문제 위에도 말했듯이 텍스트의 크기가 너무 정보의 위계가 없어 어떤게 중요한 정보인지 알 수 없다. 예를들어 열차 리스트의 열차 이름-번호-출발지-목적지의 정보가 모두 동일한 레벨로 들어가 있는것을 볼 수 있다.

그리고 열차를 예매 한 후 필수적으로 거쳐야 하는 좌석을 선택하는 버튼이 운임요금 상세와 같은 레벨로 들어가 있는데 이도 어떤 정보가 더 중요하고 더 눈에 들어와야 하는지에 대한 고려가 부족한채로 디자인을 했다고 느껴졌다.

3. 다양한 사용자를 고려하지 않은 디자인

활성된 버튼과 활성되지 않은 버튼이 똑같다. 시간이나 목적지를 선택 하고 설정을 완료 하면 예매를 시작 할 수 있도록 버튼이 활성화 되어야 하는데 활성화 된 버튼과 비활성화 된 버튼이 똑같아서 내가 지금 어느단계를 완료 했는지 알기 힘들게 디자인 되어 있다.

목적지 선택 화면의 검색창이 너무 작고 목적지를 선택하고 목록을 열었을대 열차 목록의 텍스트 크기와 목록 컴포넌트 하나의 크기 자체도 너무 작고 텍스도 작아 작은 글씨를 읽기 힘들어 하는 사람이라면 사용하기 매우 불편한 것을 알 수 있다.

코레일은 6세미만 아동은 좌석을 제공 하는데 문제는 아동의 좌석을 따로 지정 할 수 없어 아동과 보호자가 같이 기차를 탑승 할시에 아동이 보호자 바로 옆에 앉을 수 있도록 아동의 자리를 선택 할 수 없어 불편함을 호소하는 사용자들도 많았다.

다양한 사정과 신체를 가진 사용자들을 전혀 고려하지 않은 디자인을 했기 때문에 이런 불편함이 발생했던것 같다

4. 복잡한 프로세스

로그인시 회원번호로 로그인 해야함 즐겨찾는 구간, 자주쓰는 카드 등의 서비스를 정기적으로 이용해야하는 사용자들이 가장 자주 볼 정보가 메뉴 - 설정 안에 들어있는데 중요한 서비스는 적어도 메뉴를 열자 마자 바로 접근이 가능 하도록 해야 한다. 그 이외에도 자잘한 좌석선택시 유야 동반승객은 좌석을 보기 위해 따로 설정을 해야 한다던가 하는 불필요하게 복잡한 프로세스들이 보였다.

로그인 기능 역시 불편한것은 마찬가지인데 자동 로그인 기능이 작동하지 않아 서비스를 켤때마다 로그인을 해야함에도 불구하고 아이디가 아닌 긴 숫자의 회원 번호만으로 로그인이 가능하게 한 것도 쓸데없이 복잡한 프로세스를 만들었다.

분명 디자인적인 부분뿐 아니라 서버의 불안정성 같은 개발적인 측면에서의 이슈도 사용자들이 불편함을 느끼는 큰 이유로 뽑히기도 했다. 하지만 그런 디자이너가 해결할 수 없는 부분들을 제외 한다면 사용자들이 느끼는 불편함은 많은 부분 프로덕트 디자인 적인 측면에서 해결 할 수 있는 부분이기에 더 안타까웠다.

UX/UI 디자인은 특히 정보를 전달하는 방식을 정의하는 것이기 때문에 일단 서비스의 타깃과 그 특성을 정확하게 이해하는 것이 시작이 되어야 한다. 코레일톡의 경우 이런 부분에서의 조사가 미흡한채로 디자인 되어 사용자들이 많은 불편을 느끼고 있는것이 아닐까 하는 생각을 했다.

어떤 서비스의 UX/UI 를 디자인 하든지, 잊지 말아야 할것은 사용자들을 위한 서비스를 만들고 그들이 가장 최적의 방식으로 정보를 전달 받을수 있어야 한다는 것이라는 것을 명심하며 디자인을 해야겠다.

온보딩 화면은 왜 중요할까? 온보딩이 왜 중요한지에 대한 대답을 하기 전에 온보딩 이라는 것이 가진 의미와 과연 왜 만들어졌는지에 대해 알아보자.

온보딩은 원래 UI/UX 용어가 아니다. 온보딩(Onboading)의 원래 뜻은 조직 내 새로 합류한 사람이 빠르게 조직에 적응 할 수 있도록 돕는 과정을 뜻한다. 예를 들어 어떤 사람이 새로 회사에 입사 했다고 했을때 신입사원을 위해 진행하는 오리엔테이션,교육등의 모든 과정을 의미한다.

이런 사례와 마찬가지로 사용자가 서비스를 사용하기로 마음 먹고 앱을 다운 받아 실행 시켰을때나 막 계정을 만들었을때 사용자는 신입 사원과 마찬가지로 서비스에 대한 이해가 전혀 없는채로 서비스 이용을 시작하게 된다.

그런 상황에서 사용자를 아무런 설명도 안내도 없이 서비스를 이용하라고 하는것은 사막에 덜렁 던져놓는것이나 다름 없다.

하지만 사막에 던져진 사람과 사용자의 결정적인 차이점은 사용자는 언제든지 서비스를 이탈 할 준비가 되어있다는 것이다.

이런 신규 사용자들의 이탈을 막고 사용자들의 서비스 사용 시간을 늘리는 것이 온보딩의 중요한 역할이다. 온보딩 화면은 사용자들 뿐 아니라 서비스에게도 도움을 주는데 신규 유저의 서비스에 대한 학습을 통해 서비스 재 이용률을 높힐 뿐 아니라 데이터를 수집을 이용한 더 디테일한 개인화를 통해 맞춤형 서비스를 제공 할 수 있게 해주기 때문이다.

2. 온보딩의 목표

온보딩의 가장 큰 목표는 사용자가 서비스에 머무르는 시간을 최대한으로 늘리는 것일것이다. 사용자의 서비스에 대한 첫 인상은 온보딩에서 정해지기 때문에 좋은 온보딩 경험은 사용자를 서비스로 다시 불러올 수 있다.

3.온보딩 화면의 유형

3-1. 혜택제공유형

사용자가 서비스를 접할 때 가장 처음 만나는 온보딩 기능을 사용해 사용자에게 이 서비스의 이점이 어떤 방식으로 유저의 삶을 개선할 수 있을지 보여주는 방식이다. 이 서비스를 이용 했을때 어떤 혜택을 받을 수 있는지 소비자들이 알게 된다면 자연스럽게 서비스 이탈률이 낮아지는 효과를 볼 수 있다.

이런 유형의 온보딩을 사용하는 서비스의 경우 기존에 존재하지 않았거나 새로운 유형의 서비스 자체를 만들어낸 서비스에서 많이 사용하는 유형으로 서비스의 개념을 설명하고 이런 서비스가 왜 필요한지를 설득한다.

읽지 않아도 사용에 지장이 없는 경우가 많아 상담에 스킵이나 닫기 버튼을 제공해 이미 앱 사용에 익숙한 사용자들에게는 건너뛸 수 있는 기능도 역시 함께 제공한다.

일러스트나 간결하지만 확실한 카피와 함께 보여주는 것이 가장 효과적이다.

윌라는 오디오북 서비스로 사용자에게 자칫 생소할 수 있는 오디오북이 어떤 장점이 있는지 설명하는데 온보딩 화면을 사용했다. 제공하는 서비스의 간략한 내용을 보여주며 핵심적으로 어떤 기능을 제공하고 있는지 보여준다.

간단한 실사용 화면과 홍보 카피를 이용해 서비스를 간략히 소개하고 마지막에는 한달 무료체험 버튼으로 자연스럽게 신규 가입자를 서비스에 유입시키고 있다.

포스타입은 창작물 공유 플랫폼으로 기존의 블로그등에 없는 유료구독,후원 등의 기능을 제공한다. 역시 일러스트와 카피로 포스타입 이라는 서비스가 다른 창작물 공유 플랫폼들과 어떤 차이점이 있는지 알려주고 있는 온보딩 화면이다.

3-2. 맞춤 정보 제공 유형

개인화된 정보를 맞춤 제공하는 유형의 온보딩 화면의 경우 사용자의 수준에 따른 다른 정보를 제공해야 되는 유형의 서비스에서 이용된다. 주로 교육이나 비디오 플랫폼 등 개인화가 중요한 핵심 기능인 서비스에서 사용되는 온보딩 유형이다.

교육 서비스의 경우 신규 사용자가 유입되는 즉시 레벨 테스트를 시작하는 온보딩 ux를 통해 서비스에 유입되면서 부터 나에게 개인 맞춤화 된 서비스를 받고 있다는 느낌을 줄 수 있다.

이와 유사하게 영상 공유 플랫폼등의 서비스들도 사용자가 관심 있는 주제와 서비스를 이용하는 이유 등의 정보를 온보딩 화면에서 받아 서비스를 시작함과 동시에 비어있는 화면 없이 관심 정보를 바로 제공 할 수 있도록 하는 경우가 많다.

듀오링고의 온보딩 케이스를 교육 서비스 온보딩의 가장 대표적인 사례로 들 수 있다. 듀오링고는 사용자가 신규 유입되면 즉시 사용자의 레벨을 파악하는 테스트를 진행 하는데 이를 필수적으로 거치는 과정에 넣어 온보딩 프로세스를 끝내는 동시에 자신의 레벨에 맞춰진 레슨 목록만 화면에 나타나게 만들었다.

단순한 레벨 테스트만 진행하는 것이 아닌 프로세스 과정 중 연속학습 목표를 설정하게 해 사용자들의 지속적인 서비스 사용을 독려하고 있다.

비메오는 동영상 공유 플랫폼으로 비메오의 온보딩 케이스는 전형적인 동영상등의 콘텐츠 공유 플랫폼 온보딩 케이스의 전형적인 모습을 보여준다.

이런 구독 개념이 있는 피드 형식 서비스의 경우 신규 가입자들의 피드에는 내용이 없이 비어있을 수 밖에 없다. 이럴때 온보딩을 사용해 사용자의 관심사를 받아 추천 영상을 메인에 띄우면 사용자들의 서비스 사용 시간을 높힐 수 있고 서비스 이용 시간을 늘릴 수 있는 효과를 불러온다.

3-3. 기능 알림 유형

비교적 복잡하거나 새로운 플로우를 가진 서비스일때 UI가 어떻게 작동하는지 미리보기를 제공하는 유형이다.

신규 유입 사용자는 서비스를 사용하는 법을 전혀 모른다. 특히 컨텐츠가 많아 복잡한 플로우를 가지고 있거나 대대적인 개편등의 이유로 ui가 많이 바뀌었을 경우 혼란스러움을 방지하고 자연스럽게 사용법을 익히게 할 수 있다.

네이버는 기능 알림 유형의 온보딩 서비스를 가장 잘 이용하는 케이스 중 하나이다. 2018년 대대적인 UI 개편 이후에 사용법이 많이 바뀌었기 때문에 이미 많이 알려져있고 사용자가 많은 서비스 이지만 사용법을 새로 알려 줄 필요가 있었다.

슬라이드 형식의 온보딩 화면을 거치면 실 사용 화면에서 어떤 방식으로 사용할 수 있는지에 대해 포인트 앤 터치로 알려준다.

4. 마무리하며

온보딩 화면은 사용자들에게 주는 첫 인상이다. 위에서 든 3가지의 유형, 우리의 서비스가 어떤 혜택을 주는지 알려주거나, 개인 맞춤 정보를 제공하기 위한 선택지를 주거나, 서비스의 기능을 알려 주거나 모든 경우 이 서비스가 어떤 방식으로 어떻게 사용자에게 도움을 주고 어떤 가치를 가지고 있는지 최대한 어필하는 것이 공통의 목표일 것 이다.

온보딩 화면을 디자인 할때 이런 점을 명심 하면서 언제나 사용자의 입장에서 서비스를 한번 더 바라보는 습관을 들이도록 노력해야겠다.

밀리의 서재의 주 타깃층은 흥미롭게도 이미 전자책을 이용 중이거나 독서를 꾸준히 하는 사람들이 아닌 처음 독서를 시작한 사람들 이다. 그만큼 기존의 리디북스나 알라딘과는 또 다른 방향성의 UI/UX 디자인을 보여주고 있다.

작업이나 집중을 할 때에 습관적으로 무언가를 들어야 하는 습관이 있어서 사용을 시작했는데 특히 오디오북을 많이 사용하고 있다. 이번 스터디에서는 밀리의 서재를 직접 사용 하며 느낀 점을 위주로 정리해보고자 한다.

1. 하단 네비게이션

하단 네비게이션은 투데이 - 완독지수 - 검색 - 내서재 - 관리(마이페이지)로 구성되어 있다. 전자책 서비스 이니 많큼 가장 많이 사용 할 수 밖에 없는 검색 기능이 하단 네비게이션 바에 들어있어 검색 기능을 이용할때 상단으로 항상 이동 하지 않아도 되게하는 점이 좋았다.

한가지 아쉬운 점은 가장 많이 사용하는 내서재의 탭이 너무 뒤쪽에 있다는 것이다. 보통 앱을 켜면 가장 먼저 사용하게 되는것이 내 책장에서 직전에 읽던 책을 선택해 읽는 기능일텐데 그 주 기능이 너무 뒤로 빠져있다.

2. 메인화면

메인화면의 상단을 3개의 탭으로 구분해서 분리를 해놓은 모습을 볼 수 있다. 컨텐츠가 굉장히 방대한 서비스이니만큼 Depth 를 최대한 줄이려는 선택 이었을것 같기는 하지만 한 탭에도 정보가 많은데 그걸 3개로 또 분리를 해서 혼란스럽다는 느낌을 받았다.

직관적이지 않은 탭 이름도 혼란스러움을 가중시키는 요소라고 생각한다.
Now는 진행중인 생방송, 도서홍보를 하거나 개인화된 도서 추천을 하는 페이지, 오디오북/챗북은 밀리의 서재에서 서비스 하는 오디오북과 챗북 이라는 형태의 서비스 도서 소개 페이지, 스토리는 디지털 디바이스로 읽는 전자책 도서 소개 페이지 이다. 이렇게 어떤 내용들을 담고 있는지 알고 있는 상태라면 복잡하게 느껴지지 않지만 처음 서비스를 접한 사용자들에게는 구조가 한눈에 들어오지 않아 혼란스러울 것 이고 나 역시도 그랬다.

그리고 가장 아쉬웠던 점은 메인 페이지의 첫 피드는 내가 지금 읽고있는 책 이어야 하지 않을까? 라는 부분이다. 광고가 많아도 너무많아서 이 추천이 과연 나만을 위한 개인화 된 추천인지 광고인지 잘 구분이 되지 않을 정도라 추천의 신뢰도가 떨어진다. 그리고 내가 지금 읽고 있는 책은 하단에 계속 표시가 되는데 메인 페이지에 들어왔을 때 많은 광고와 어마어마한 정보들과 하단에 계속 떠 있는 내가 읽고 있는 책 컴포넌트가 겹쳐져서 안그래도 복잡한 페이지가 더 복잡하게 느껴진다.

3. 책 뷰어

밀리의 서재의 책 뷰어는 상세한 조절이 가능 하다. 배경 색을 바꾸는 것은 물론 글자 크기나 줄간격, 문단간격, 페이징 방식, 상하좌우의 여백도 조절 할 수 있다. 볼륨키로 스크롤을 올리고 내리는 기능도 지원하는 등 책을 읽는 사용자의 최상의 경험을 위해 신경썼다는 것을 알 수 있었다. 하지만 오히려 이렇게 상세한 설정을 부담스러워 하는 경우나 귀찮아 하는 사용자들도 충분히 존재하기 때문에 사람들이 많이 사용하는 옵션 설정값들을 모아 테마로 제공하면 어떨까 하는 생각을 해봤다.

그리고 메모 / 저장 기능도 전자책을 사용하는 사람들이 많이 쓰는 기능 중 하나인데 뷰어의 햄버거 메뉴 로 들어가면 제일 상단에 정리해 보여주어 쉽게 접근 할 수 있도록 만들어 두었다. 작성한 메모나 하이라이트는 나의 서재에서 메모나 저장한 문장만 모아 보여주는 기능으로 책 뷰어 페이지에 들어가지 않아도 쉽게 확인이 가능하다.

한가지 불편한 점이라고 한다면 작은 휴대전화 화면에서 문장을 스크롤 할때에는 엄지나 검지가 글자를 가려서 안보이는 경우가 있는데 이를 위해서 손가락으로 누른 부분을 확대 처리 해주는 기능 정도는 넣어도 좋을 듯 하다.

눈에 띄는 기능이라고 한다면 사전 검색 기능을 꼽을 수 있을 것 같다. 모르는 단어를 만났을 때 눌러서 바로 어떤 의미인지 검색이 가능 하게 다음 사전으로 연결 해 주는데 전자책 이라는 매체가 가지고 있는 특성을 잘 살린 서비스이다.

4. 나의 서재

리디의 서비스를 보면 가장 많이 드는 생각인데 역시 가장 메인이 되어야 하는 서재 기능의 경우에도 너무 복잡하다 라는 느낌이 강하게 든다. 전체도서 책장 독서노트 통계 이렇게 4가지의 탭 형식으로 구성이 되어 있는데 메인과 비슷하게 한 페이지에 너무 많은 탭을 넣어서 너무 많은 정보가 한번에 들어온다는 느낌을 받는다.

전체 도서 리스트의 경우에는 책 표지와 작가 오디오북의 경우 성우 까지 한번에 표시가 되는데 책 상세정보를 굳이 책장에까지 표시 할 이유가 있었을까? 싶다.

완독 도서와 아직 읽지 않은 도서의 경우에도 표지에 표시를 해주기는 하지만 잘 눈에 띄지 않는다. 차라리 텍스트만 넣는게 아니라 다 읽은 책 표지를 확실히 딤처리를 해주던가 하는 좀 더 명확한 방식으로 보여줄 필요가 있다고 보여진다.

독서 통계를 서제 페이지에서 보여줄 필요가 있을까 에 대한 것은 생각을 해 볼 여지가 있다. 하단 탭에 마이페이지로 바로 갈 수 있는 기능이 존재 하고 서재에 기대하는 것은 내가 읽고 있거나 읽을 책을 정리하는 기능이지 지금 까지의 기록들을 모아 본다는 기능은 서재의 목적과 다르지 않나 하는 생각을 했다.

래뷰,포스트,메모 를 추가 할 수 있는 퀵메뉴 버튼도 내 서재에 있는데 이런거는 좀 따로 페이지를 만들어서 분리를 하는게 맞다고 생각이 된다.

5. 검색

밀리의 서재는 국내 전자책 서비스 중 압도적으로 책 보유 량이 많아서 검색을 사용했을 때 나오는 정보의 양도 다른 서비스보다 확실히 많다. 문제는 결과를 나열하는 방식에 있다고 본다.

검색 페이지 메인에 실시간 인기 검색어나 추천 검색어를 상단에 띄워주는데 이는 밀리의 서재의 타킷 사용자층인 독서를 막 시작하는 사용자들에게 접근이 쉽도록 만들어주는 기능 이라는 점에서 목적에 충실한 UI라는 생각이 들었다.

중요한 것은 찾고 싶은 책을 한번에 보여주는 것 이다. 밀리의서재는 사용자들이 직접 작성 하는 포스트 라는 서비스가 있는데 도서의 검색 양이 많아지면 하단에 포스트, 이 검색어를 포함한 책이 있는 다른 사용자의 서재 등을 하단에 표시 하기 위해서 책 검색 리스트에 depth 가 한 단계 더 들어간다.

도서 목록을 더보기 버튼등 을 사용해서 depth를 최대한 줄여서 더 빠른 검색이 가능한 느낌을 사용자들에게 주었다면 더 나았을 것 같다.

6. 책 상세

밀리의 서재의 책 상세 페이지는 다른 전자책 서비스들보다 개인화가 잘 되어있다. 밀리의 서재는 서비스만의 '완독지수' 라는 얼마만큼의 사용자가 책을 완독했는지 카운팅 하는 서비스를 가지고 있는데 책 상세 페이지에 이 완독지수를 좌표로 보여 주면서 얼마만큼의 사용자가 책을 다 읽었는지도 확인 할 수 있고 한줄평이나 후기 포스트 등의 전자책만의 활용 요소를 적극적으로 활용하는 모습이다.

여기서 한가지 추가 하자면 밀리는 개인화를 효과적으로 사용하지는 않는 모습을 보이는데 책을 읽는 데이터가 계속 쌓이면 개인 맞춤 추천이나 취향을 분석 하는 것은 어렵지 않으니 하단의 책 추천을 이 책을 읽은 다른 독자들의 선택이 아닌 사용자 개인 취향 맞춤 추천 등으로 갔으면 더욱 좋았을 것 이라는 아쉬움이 남기도 한다.

7. 마무리

밀리의 서재를 자주 이용하는 사용자로서 애정을 담아 리뷰를 해 보았다. 너무 단점만을 지적 했을 수는 있지만 직접 사용 해 보면서 불편한 점을 하나씩 찾아 보고 그 개선점을 함께 생각 할 수 있는 사용자가 서비스의 입장 에서도 더 도움이 되지 않을까 한다. 밀리의 서재의 UI를 정말 좋아하는데 깔끔하고 밀도가 높은 디자인이라 많이 참고하고 공부 했다. 한가지 아쉬운 점은 UX 적인 부분인데 너무 많은 기능을 제공 하고 싶은 욕심에 한번에 너무 다양한 종류의 정보를 보여주는게 아닌가 하는 생각이 든다.

조금만 정리가 되었으면 좋겠다. 서비스만의 아이덴티티를 담은 네이밍도 좋지만 신규 사용자가 유추 할 수 없다면 의미가 없지 않을까??

투썸플레이스의 오더 앱인 투썸 하트는 투썸플레이스 2021년부터 시작한 온라인 오더 앱으로 투썸 플레이스가 본격적으로 사업을 확장한게 2008년인 오래된 카페 프렌차이즈라는걸 생각하면 오히려 꽤나 늦게 온라인 오더 서비스를 시작한 셈이다.

투썸 플레이스를 자주 이용하는 나도 얼마 전부터 투썸 오더 시스템을 사용하기 시작했다. 오늘은 투썸 하트의 오더 시스템을 따라가보며 내가 직접 이용하며 느꼈던 서비스의 특징과 장 단점을 분석해보고자 한다.

1. 메인/메뉴

메인 페이지 디자인은 군더더기 없이 깔끔하다. 메뉴를 홍보하기 위한 스크롤이나 광고 배너도 없고 필수 요소만으로 구성된 디자인에 스크롤도 없다.

투썸 오더는 매장선택-메뉴선택-커스텀-주문완료 로 이루어진다 투썸 오더에 진입하는 방법은 메인에서 3가지인데 앱의 주 기능에 충실한 디자인 이라고 생각된다.

헤더의 햄버거 버튼을 눌러 메뉴에서 진입하는 방법 - 퀵메뉴에서 진입하는 방법 - 즐겨찾기 한 메뉴를 바로 주문 할 수 있는 퀵오더가 그것이다.

사실 투썸 오더 앱은 한번의 큰 디자인 개편과 업데이트가 있었는데 이전 버전의 상단에 있던 롤링 베너를 없애고 앱을 실행하면 바로 나오는 투썸페이 바코드와 하단 베너가 나오고 닫은 이후에는 다시 나오지 않는다.

광고를 없앰으로서 사용자들에게 광고를 본다 라는 심리적 거부감을 없애려 한 것일수도 있지만 사실 오더 앱이라는것은 메뉴를 선택 하고 주문하기 위해 사용하는 서비스라 즐겨찾는 메뉴 이외에도 메뉴 추천이나 시즌메뉴 홍보 정도는 상단이나 하단에 배너로 뛰워주면 오히려 메뉴 선택에 도움이 되지 않을까 라는 생각이 들었다. 홍보의 관점이 아닌 메뉴 추천의 관점으로 다가갔다면 좋지 않았을까?

퀵오더 컴포넌트 구성이 아주 좋다고 생각했는데, 즐겨찾는 메뉴를 3개까지 등록할 수 있고 스와이프해 넘기면서 메뉴를 메인에서 바로 선택 할 수 있는 방식이다.

메뉴와 퍼스널 커스텀 그리고 현재 위치에서 가장 가까운 매장과 위치를 한번에 보여주면서 페이지 이동 없이 바로 주문 할 수 있게 만들어놓은 디자인이다.

2. 오더 프로세스

오더 프로세스도 심플하다 퀵 오더가 아닌 메뉴 페이지로 들어와 주문을 하는 방식으로 주문 프로세스를 정리해 봤다.

투썸오더를 누르면 바로 투썸오더 페이지로 넘어간다. 전체메뉴-즐겨찾는 메뉴-홀케이크 내역-주문내역 으로 각각 연결되는 버튼이 있고 하단으로 메뉴 추천이 캐러셀 형식으로 나열되어 있다.

여기서 투썸 앱을 사용하며 느끼는 가장 결정적인 아쉬운점이 또 보이는데 메뉴 추천과 홍보를 잘 하지 않는다. 정보량이 많지 않고 대부분 다른 페이지와 연결된 버튼이 나열 된 페이지면서 실제 주문을 위한 메뉴 선택을 하기 직전에 연결된 페이지이니만큼 메뉴 추천을 좀 더 적극적으로 해도 괜찮지 않을까?

단순히 지금 사람들이 많이 선택하는 메뉴와 임의 추천 메뉴가 아닌 사람들이 많이 사용하는 즐겨찾는 메뉴와 유사한 메뉴 추천 등 다양한 바리에이션이 있을텐데 이런 부분을 좀 더 고려했으면 좋았을 거라는 생각이 들었다.

전체메뉴를 선택하면 모든 메뉴를 볼 수 있다. 여기서 투썸플레이스가 주력으로 미는 상품들을 알 수 있는데 상위 페이지의 홀케이크 버튼 따로 만들어둘정도로 홀케이크 예약판매에 집중하고 있고 역시 전체메뉴에도 메뉴 추천에 케이크 카테고리의 하위로 쇼트케이크와 떠먹는 케이크를 따로 분류해놓을 정도로 파티셰리류, 특히 케이크 판매에 집중하고 있는 모습이다.

역시 그에 비해 메뉴추천이 아쉬운 부분도 눈에 띈다. 예를 들면 음료를 주문한다면 케이크 페어링을 추천해주는 형식 등의 메뉴 추천 방법도 있을 것이다.

메뉴는 스크롤 탭 메뉴 형식으로 상위탭을 선택하면 하위 탭으로 상세 구분을 하는 형식이다. 하단에는 계속 내가 주문하려 하는 매장이 어딘지 알려주고 있다. 가장 노말하고 그만큼 가장 효율적이다. 메뉴를 선택하면 온도/사이즈/원두/컵 옵션을 선택 가능하고 퍼스널 커스텀이 가능하다. 퍼스널 커스텀을 선택하면 하단에서 올라오는 형식으로 따로 페이지 이동을 시키지 않는다.

체크박스 형식으로 커스텀을 선택하면 하단에 양/온도 등의 세부 옵션이 뜨는 형식으로 한번에 모든것을 결정해야 한다는 소비자의 심적 부담을 줄이고 동시에 스크롤도 줄일 수 있는 디자인을 선택했다고 본다.

3. 결제 프로세스

가장 불편한 부분이 바로 결제 프로세스가 아닐까 싶다. 위에도 말했듯이 나는 기프트 카드를 충전해 사용하는 방식으로 결제를 하는데 메뉴확인 하단의 결제수단 탭에 기프트카드 결제 버튼이 없다.

기프트 카드로 결제를 하고싶다면 그 위의!! 그 외의 결제 수단 탭을 따로 열어 결제를 해야하는데 상식적으로 "그 외의" 결제 수단 이라면 상단의 결제 수단 옵션에 해당하지 않는 옵션 이라고 생각하기 쉽다.

그렇다면 결제수단 옵션의 하단에 있는게 논리적인 디자인이라고 생각하는데 상단에 있어서 처음에는 기프트 카드로 결제를 할 수 없는줄 알았다.

비슷한 결로 할인이나 쿠폰을 적용시킬 수 있는 버튼은 또 메뉴 바로 밑, 포장 선택 체크박스 위에 있다. 쿠폰이나 할인은 결제에 관련된 기능이다.

그렇다면 당연히 결제수단을 선택하는 부분에 모여 있어야 하는것 아닐까?

매장에서의 일반적인 결제 프로세스를 생각해보자. 음료를 주문하고 매장을 이용하는지 포장인지 선택을 한 후, 할인이나 적립을 물어보고 그 후 최종으로 결제를 한다.

온라인으로 물건을 주문할때에도 사용자들이 익숙한 현실에서의 프로세스를 따라야 한다고 생각한다.

그리고 기프트 카드는 서비스 내에서 직접 충전하고 구매 할 수 있는 주요 기능인데 아코디언탭으로 숨겨두었다는것도 잘 이해가 가질 않는다. 만약 리디자인을 할 수 있다면 기프트카드 결제 버튼을 따로 만들어 결제수단 하단으로 따로 빼고 할인/쿠폰 적용으로 결제 바로 위로 올리는 방식으로 리디자인 할 것 같다.

4. 주문/수령완료

주문을 완료 하면 알림 탭에 주문 매장과 시간을 표시해 보여준다. 현재 주문 뿐 아니라 이전 주문도 타임라인 순으로 함께 보여주고 있는데 알림 탭이 따로 광고성 푸쉬알람과 나의 오더 알람과 각종 알람이 다 한번에 보여진다.

물론 상단의 드롭버튼으로 필터링을 할 수 있지만 드롭버튼을 제공한다는게 잘 안보인다. 이런 경우에는 드롭버튼보다 필터의 수를 합치고 줄여 스크롤 형식의 탭 버튼을 사용하거나 아니면 아예 드롭버튼의 크기를 키우고 필터 드롭박스의 색을 다르게 해 눈에 확 띄게 디자인 하는게 더 좋을것 같다.

주문과 동시에 타임라인처럼 프로세스를 보여주는 페이지로 이동시켜준다. 프로세스가 진행됨을 사용자가 직접 확인 할 수 있게 해준다.

5.탭메뉴/이벤트

가장 중요한기능들은 어디서든 접근 가능하게 디자인되어있다. 햄버거 메뉴를 펼치면 상단의 홈화면으로 복귀,하트 바코드,설정 버튼이 눈에 들어온다.

하트 적립은 투썸 오더의 주요 기능으로 어디서든 접근이 가능하게 만들어 어떤 메뉴를 켜고 있어도 하트 적립을 위한 바코드를 편하게 열 수 있게 만들었다.

바로 아래에는 고정으로 이름과 등급을 표시하고 그 아래로 주요 메뉴들이 이어지는데 가장 노말한 디자인이라 딱히 흠잡을곳도 좋은점도 없다. 하지만 딱 하나 수정되면 좋을 부분은 마이페이지를 진입하기 위해서는 스크롤을 많이 내려서 마이페이지로 진입해야 하는데 상단의 고정된 영역에 사용자의 이름만 볼드처리가 되어있어 그부분을 터치하면 마이페이지로 넘어가는 기능을 추가해도 좋을 것 같다.

이벤트 페이지도 비슷하다. 가장 평범하고 많이 쓰이는 디자인으로 상단의 큰 배너 이미지와 이미지 오른쪽의 남은 D-day 표시 그리고 하단의 타이틀과 날짜로컴포넌트가 구성되어 있다. 상단은 진행중과 종료 이벤트 탭이 분리되어 있어 종료된 이벤트도 한눈에 훑어 볼 수 있게 디자인 되어있는 점이 좋았다.

6.마이하트

마이하트는 투썸 오더앱의 등급 시스템으로 하트를 하나씩 채워 큰 하트를 만드는 형식인데 가시성이 좋은 디자인 이라는 생각이 들었다.

메인의 적립탭을 선택하면 적립 상세 페이지로 진입한다. 나의 등급과 다음 등급까지 남은 적립 상황을 한눈에 들어오게 보여준다. 그 바로 아래 다음 등급으로 승급했을때 얻을 수 있는 혜택을 한줄로 보여주면서 다음 등급으로 승급 할 수 있게 보여주고 있다.

그리고 화살표 버튼을 터치하면 그동안 적립한 내역을 볼 수 있는데 왼쪽의 원으로 적립된 하트의 수와 오른쪽에는 적립 내역과 날짜 그리고 적립한 매장을 한눈에 볼 수 있다. 한가지 바꿀 수 있다면 적립 내역을 터치했을때 주문했던 메뉴도 띄워준다면 좋을것 같다.

등급/헤택 버튼을 터치하면 각 등급의 이름과 등급에 따른 혜택을 아코디언 탭 형식으로 보여준다. 디자인은 나쁘지 않은데 나는 등급의 네이밍에 살짝 의문이 드는게 화이트-블랙-레드 순으로 올라가는데 이것보다 화이트-핑크-레드 가 더 자연스럽지 않을까?

7. 마치며

다소 너저분했던 기존 디자인을 대대적으로 개편하면서 사용해본 오더 서비스 앱 중 손꼽히게 깔끔하고 실용적인 앱이 되었다는 점이 인상적이었다.

하지만 동시에 메뉴 추천 서비스가 좀 아쉬웠고 소비자가 오더 앱을 사용하게 하며 가장 중요한 기프트카드 구입과 사용이라는 부분을 헷갈리게 디자인 해놓은 점이 아쉬웠다.

하지만 이런 사소한 점을 제외한다면 리뉴얼 이후 앱의 방향성이 보다 분명해졌고 목적인 오더 서비스에 충실하게 집중하고 있는 앱이었다.

곧 오더 앱을 직접 디자인 해 볼 계획인데 저번 스터디인 맥 딜리버리에서 오더 앱에서 하지 말아야할 부분을 이번 투썸하트 앱에서 오더 앱이 가져야할 기능과 효과적인 디자인을 학습했으니 더 좋은 서비스 디자인을 할 수 있을것 같다.

오랜만에 정말 즐겁게 분석했던 스터디였다!

맥딜리버리의 최근 후기와 별점도 UI와 안정성에 대한 불만이 가득하다

이번 스터디에서는 가장 많이 사용되는 주문 프로세스를 따라가보며 맥딜리버리의 UI가 불편하게 느껴지는 이유와 잘 만들어진 딜리버리 앱(KFC,노브랜드 버거)와 비교하며 살펴보고자 한다.

1) 메인

375 x 812 기준

맥도날드와 KFC의 경우 심플하게 롤링베너와 주문버튼 2가지로만 구성되어 있는 심플한 구성이다. 하지만 KFC와 달리 맥도날드는 이미지 해상도가 깨지거나 늘어난 등의 기본적인 해상도 문제가 있어 불안정해 보인다. KFC도 역시 심플한 구성이지만 롤링배너의 크기와 주문 버튼의 크기를 줄여 구성에 안정성을 주고 위계 관계가 잘 보인다.

노브랜드 버거의 경우 헤더 밑에 인삿말을 넣고 롤링배너,배달or픽업 버튼 그 밑으로는 메뉴확인과 매장확인 등 필요한 기능을 다 넣으면서도 간결하게 정리했다는 느낌이 들었다.

맥도날드의 경우 헤더의 가장 오른쪽에 주문하기 버튼을 넣었는데 메인 구성이 아주 단순하고 주문 버튼의 사이즈가 커서 굳이 여기에 주문하기 버튼을 또 넣었어야 하나 라는 생각은 든다. KFC와 노브랜드 버거의 경우 이 위치에 장바구니 버튼을 넣었다.

1. 롤링 베너

세가지 앱 전부 메인은 사이즈가 큰 롤링베너를 이용해 상단 배너 영역을 채웠다. 롤링 베너 크기가 가장 큰 앱은 맥딜리버리 앱이지만 해상도가 미묘하게 나빠서 텍스트가 잘 보이지 않는데 거기다 텍스트 량이 많고 재료수급 지연 안내 같은 중요한 정보들을 이미지로 넣어서 텍스트 크기가 작고 해상도가 낮아 읽기 불편하다.

KFC는 배너의 이미지들의 해상도가 제일 좋았다. 크기가 맥도날드의 배너와 비슷해서 더 비교가 되어 보였는데 베너의 디자인도 작은 모바일 사이즈를 감안해 텍스트는 타이틀위주로 큰 사이즈로 들어가 있다.

노브랜드 버거의 롤링 배너가 제일 사이즈가 작은데 그렇다할 특이점이나 장점은 없지만 앱 UI 컨셉에 충실한 배너 디자인이라는 인상을 받았다.

2. GNB

세 앱 모두 GNB 높이는 60으로 동일했다. 메뉴 항목 자체는 각 앱의 주요 서비스에 맞춰 항목이 조금씩 다르지만 주목할만한 점은 노브랜드 버거의 경우 네비게이션 중앙에 플로팅 버튼을 사용해 가장 많이 사용하는 항목에 대한 퀵 메뉴를 제공한다는 점이었다.

맥도날드와 KFC의 경우 메인 구성이 단순하기 때문에 퀵메뉴가 필요하지 않지만 노브랜드 버거의 경우 메인의 구성이 비교적 복잡해 플로팅 버튼으로 퀵메뉴를 제공해 더 빠른 주문을 돕고 있다.

3.주문하기

맥도날드와 KFC는 메인의 구성이 단순한만큼 주문하기/확인 버튼의 사이즈가 아주 크다. 맥도날드는 주문 조회와 주문 하기 두가지 기능만 제공하는데 역시 버튼 이미지 해상도가 좋지 않고 살짝 늘어나있다.

2)주문 프로세스

1. 맥도날드

Good - 주문을 시작하고 메뉴 페이지로 진입하면 상단에 주소와 배달 예상시간을 띄워주는데 배달 예상 시간을 표시해주는 부분은 다른 앱에서는 없는 부분으로 소비자의 심리적인 기대를 낮춰 기다림 에대한 불만을 낮춰주는 효과가 있다.

Bad - 메뉴 페이지로 진입 - 대분류 메뉴 선택 - 메뉴 선택 으로 진행되는데 Depth 가 너무 깊어 메뉴를 둘러보기 불편하다.

메뉴의 이미지 사이즈가 너무 작다.

그리고 추천 메뉴 항목이 존재하긴 하지만 충분히 강조되지 않고있다.

햄버거를 주문할때 대부분 세트로 주문을 하게 되고, 추천 메뉴의 경우 다양한 메뉴를 함께 주는 팩 형식으로 제공이 되는데 그 항목이 이미지로만 제공되고 텍스트로 한눈에 알아볼 수 있게 표시되는 방식으로 바꾸면 좋을 것 같다.

메뉴를 선택하고 사이드메뉴를 변경/추가하는 과정에서 옵션 변경시 변경되는 가격을 고지하지 않는다. 그리고 품절 상품이 있을시 어떤 물품으로 변경 된다고는 고지 하지만 그 상품이 현재 품절 상태인지는 알려줘야 하지 않을까?

사이드메뉴등을 추천하는 서비스가 없다. 키오스크에서는 그렇게 집착적으로 추천 하면서 딜리버리 앱에서는 왜 하지 않을까?

장바구니에 상품을 담고 바로 확인시켜주지 않는다. 보통 장바구니에 상품을 담으면 바로 장바구니로 이동-상품이 맞게 담겼는지 확인 시켜주는 프로세스가 일반적인데 직접 장바구니로 들어가 확인해야 하는 부분이 불편하다.

프로모션과 쿠폰 적용으로 인한 가격 변동 사항은 쿠폰을 등록하는 페이지에서 확인 시켜줘야 한다.

계속 쇼핑을 진행하기와 주문하기 버튼이 너무 떨어져 있다. 쇼핑 계속 진행 버튼은 장바구니 하단에 있고 결제하기는 헤더부분에 있는데 결제를 진행하기 위해 헤더의 장바구니를 한번 더 들어가야 하는 프로세스 에서의 통일성을 유지하기 위한 디자인으로 보이지만, 그것보다 상품을 장바구니에 담은 후 바로 장바구니로 이동 - 결제와 쇼핑 계속하기의 버튼이 장바구니 하단에 한눈에 확인 가능 한 형태의 디자인이 더 편리할 것 같다.

2. KFC

Good - 주문을 위해 메뉴 페이지에 진입하면 메뉴를 탭 형태로 제공해 메뉴 페이지에 진입 하자마자 추천 메뉴를 확인 할 수 있게 했다. Depth 를 줄여 페이지 이동을 최소화-간소화 한 점이 좋았다.

세트메뉴나 콤보의 경우 어떤 항목이 세트에 포함되어 있는지 텍스트로 한눈에 알 수 있다.

알레르기 유발 식재료를 확인 할 수 있는 탭을 하단에 배치했다.

세트 선택시 배경 딤처리와 함께 추천 사이드와 옵션 변경 창이 뜨는데 이미지와 함께 보여주고 있고, 옵션 선택시 추가되는 금액도 함께 표시하고 있다.

상품 선택 완료 후 장바구니에 상품을 담으면 바로 장바구니로 페이지 이동이 되고 페이장바구니 페이지 내에서 옵션 변경이 가능하다.

장바구니에서 바로 주문하기도 지원하고 있다.

Bad - 배달 예상 시간을 표시하지 않는다. 물론 주문완료 할때 고지해주지만 애초에 주문을 할때 주문 매장 선택이 완료된 상태이기 때문에 각 매장의 주문량을 계산해 주문 프로세스를 시작하기 전에 예상시간을 고지해 주고, 너무 주문이 많다면 근처의 매장으로 주문 매장을 바꿀 수 있게 해주면 어떨까?

3. 노브랜드 버거

Good - 주문을 받는 매장이 어디인지 표시하고 있고, 주문 매장 변경 역시 가능하다. 역시 메뉴를 탭으로 제공하고 있다. 메뉴를 선택하면 영양정보와 알레르기 정보를 제공한다.

옵션 변경시 변경되는 메뉴의 이미지를 크게 제공하고 그에 더불어 추가 금액과 하단에 사이드를 추가나 변경 했을시 반영 되는 총 금액이 하단에 표시된다.

얼음 제외/ 기본 음료로 변경 등의 사람들이 많이 요구하는 옵션 선택 버튼을 상단에 제공해 굳이 사이드 추천 페이지를 다 둘러보지 않아도 빠르게 선택이 가능하도록 만들었다.

장바구니에 상품을 담았을때 상품에 맞는 쿠폰이 알아서 적용될 수 있는 옵션이 제공된다.

매장 픽업을 선택했을 시 픽업을 받을 매장의 주소와 지도를 함께 제공한다.

Bad - 매장이 닫았거나 현재 선택된 매장에서 주문 할 수 없을 경우 현재 매장에서 주문을 할 수 없다는 경고 메시지가 뜨는데 그렇다면 현재 주문이 가능한 다른 매장이 있는지, 없다면 언제부터 주문이 다시 가능한지 알려주지 않는다.

3. 로그인/회원가입

맥도날드는 다른 SNS 가입/로그인을 제공하지 않고 아이디 비밀번호 저장 기능을 제공하지 않는다. 결국 로그인을 다시 하려면 아이디와 비밀번호를 항상 기억하고 있다가 직접 타이핑 해야 한다는 의미인데 아이디 비밀번호 저장의 경우 다른 많은 서비스들에서 제공하는 기능으로 왜 굳이 제공하지 않는지 의문이 들기는 한다. KFC와 노브랜드 버거는 아이디 비밀번호 저장 제공 이외에도 노브랜드의 경우 SNS 회원 가입을 제공하고 있다. 노브랜드 버거의 회원 가입 방법은 정말 간단한데 사실 음식을 주문하고 받는 기능이 주인 앱의 특성상 많은 정보를 기입하는걸 꺼려 할 수 밖에 없는 특성 상 가입 프로세스를 간편화 시키는 것이 가입자를 늘리는데 도움이 될 것이라고 생각한다.

4. 마치며

KFC는 메뉴의 추천 기능이 다른 앱들보다 좋은 편이고 KFC 선불 시스템과 앱을 이용해야지만 지급되는 쿠폰 등의 앱을 이용하면 얻을 수 있는 장점이 있었고 노브랜드 버거 앱의 경우 사용자 편의성을 위한 퀵메뉴와 버튼 제공 등이 눈에 띄었지만 맥 딜리버리 앱은 어떤 강점이나 특별한 점이 눈에 띄지 않았다.

맥 딜리버리의 논리성이 부족하고 번거로운 UI는 계속 증가하고 있는 딜리버리 서비스의 사용자들에게 있어 하나의 진입 장벽이 될 수 있을 것 이다. 맥도날드의 사용성을 고려하지 않는 디자인은 이미 맥도날드 매장 안에서 사용하고 있는 키오스크로도 유명하다.

1. GNB

하단 GNB 정 중앙의 무신사 로고를 터치하면 무신사의 다양한 서비스를 볼 수 있다. 본래 남성 패션 커뮤니티로 시작한 무신사가 브랜드의 규모가 커짐에 따라 여성 패션 커머스인 우신사, 자체 브랜드인 무탠다드 등 다양한 서비스로 세분화 되면서 GNB 에서 각 서비스에 한번에 접근 할 수 있는 플로팅 버튼을 바로 만들어 둔 듯 하다. 정 중앙에 있어 접근이 쉽고 다른 서비스 뿐 아니라 인기 카테고리를 하단에 함께 배치해 바로 접근이 용이하도록 만들었다.

2. 상품 상세 페이지

무신사의 상품 상세 페이지는 다른 패션 앱과 차별화 되어 있다고 느끼는 부분이 바로 상단 브랜드 로고 이미지의 통일이다. 무신사와 마찬가지로 10-20대 사용자들이 많은 지그재그의 경우 상품 상세 페이지가 각 인터넷 쇼핑몰의 상세 페이지로 연결되어 통일감을 주지 않는데 무신사는 상단의 브랜드 이미지와 로고 사용으로 브랜드를 강조 하면서도 통일감을 준다.

그리고 상세 페이지에서 또 돋보이는 점은 하단에 브랜드 스냅과 코디를 배치한다는 것이다.

이런 부분들이 커뮤니티로 시작한 무신사의 기업 목표를 잘 보여 준다고 생각 되는 부분들인데 브랜드 스냅을 촬영한 모델들의 키와 사이즈 등의 신체 스팩을 자세하게 기입하고 일반적인 쇼핑몰 모델 사진처럼 과한 보정이나 포즈를 제외한 심플한 사진들을 기본으로 실제 소비자들이 이 옷을 입었을대 어떤 핏을 보여 줄 수 있을지 객관적으로 상상 할 수 있게 해준다는 것이다. 뿐만 아니라 브랜드 스냅 사진에 함께 촬영된 코디 상품들의 정보를 보여주며 소비자들에게 광고라는 인식 없이 다른 상품의 구매를 유도하는 영리한 UX를 사용하고 있다. 이와 더불어 상품 상세페이지에 성별,연령대 별 구매 현황과 조회 현황, 사용자 입력 수치에 기반한 사이즈 추천 등 "나" 를 위한 개인화 정보를 보여주고 있다는 느낌과 신뢰감을 주면서 사용자와의 유대감을 쌓는 UX가 될 수있다고 느꼈다.

3. 사이즈 추천

인터넷으로 옷을 구입할때 가장 신경쓰는 부분이 바로 사이즈일 것이다. 무신사는 사이즈를 3가지 방법으로 볼 수 있게 제공하는데 1. 실측 사이즈 2. 추천 사이즈 3. 기준표가 그것이다. 여기서 가장 눈에 띄는건 사이즈 추천인데 성별,키,몸무게를 입력하면 상품 후기에 입력된 사이즈 정보와 비교해 실제 나와 신체 스펙이 비슷한 구매자들의 후기를 보여준다. 정형화된 실측 사이즈 제공이 아닌 후기 데이터를 이용한 사이즈 정보 제공을 받을 수 있다는 점이 좋았다. 무신사가 가진 수 많은 후기 데이터를 영리하게 이용했다는게 보여지는 부분이다.

4. 상품 후기

무신사의 커뮤니티 정체성을 가장 잘 보여주는 서비스가 상품 후기가 아닐까 싶다. 무신사는 상품후기 서비스를 잘 이용하기로도 유명한데, 그 이유는 디테일하고 개인화된 후기에 있다. 상품 후기를 필터를 이용해 걸러 볼 수 있는데 두께감,디자인,무게감,보온성,촉감 등 다양하고 세분화된 수치를 이용한다. 무신사는 단순히 옷을 구매하는 플랫폼이 아닌 패션에 관심 있는 이용자들의 커뮤니티로 시작했기 때문에 사용자들이 상품 후기를 작성하는 빈도가 높고 뿐만 아니라 단순한 사용 후기가 아닌 "내가 다른 사용자들에게 정보를 제공한다" 는 만족감을 얻기 위해 후기를 작성하는 브랜드 충성도가 높은 사용자를 쉽게 만들 수 있다. 그리고 이는 디테일한 구매 후기로 이어져 데이터로 쌓인다. 사실 무신사의 엄청난 후기 데이터는 후기 보상이 아닌 이런 커뮤니티화에서 나온다고 생각한다.

5.코디

무신사는 단순한 쇼핑몰이 아닌 패션 트렌드를 가장 먼저 접하는 커뮤니티의 역할울 하고있는데 이를 제일 잘 보여주는 서비스가 바로 코디 서비스다.

브랜드 스냅과 하단의 무신사에서 제공하는 코디 2가지로 나뉘는데 상단의 브랜드 스냅은 브랜드에서 스타일별로 완성된 코디를 제공하면서 360도 회전이나 영상을 제공하면서 옷의 디테일과 소재를 확인 할 수 있게 만들었다. 상단에는 현재 유행하는 코디를 탭으로 나누어 두었고 상세 코디 페이지에는 모델이 착용한 옷 정보와 모델의 신체 스펙도 알 수 있게 만들어 두었다. 상세 페이지에는 모델이 직접 입은 코디 상품들을 바로 나열해 볼 수 있게 만들었다. 무신사나 브랜드에서 제공하는 스냅 뿐 아니라 스트릿 스냅 에서는 실제 길거리에서 찍은 사진들을 이용한 지금은 많이 사라진 옛 패션 잡지에서 많이 하던 스트릿 패션 스냅 사진을 사용한다.

6.매거진

코디에서 더 나아가 현재 패션트랜드와 뉴스 등을 매거진 형태로 제공하고 있다. 각종 패션계의 뉴스와 지금 유행하는 아이템에 대한 정보성 게시물들이다. 메거진에서 소개하는 아이템들은 다 무신사에 입점해있는 브랜드의 아이템으로 게시글의 상단에 브랜드 페이지 링크와 상품 정보를 배치했다. 사실 정보성 게시물 형태의 광고인 것이다. 하지만 광고를 어떻게 디스플레이 하냐에 따라 소비자들이 이를 광고로 받아들이느냐 정보로 받아들이느냐는 매우 달라지는데 무신사는 광고를 소비자들로 하여금 나에게 유용한 정보 로 받아들이게 하는 UX를 아주 잘 활용한다.

7.필터,검색

역시 필터 구분이 매우 상세하다. 이는 무신사의 전체적인 특징이기도 한데 온라인 쇼핑의 최대의 단점, 상세하게, 내가 원하는 재질과 질감인지 확인 할 수 없다 라는 단점을 상쇄 하려는 노력이 엿보인다.

그리고 검색 기능도 굉장히 유용한데 그중에서 가장 돋보이는 기능은 바로 이미지 검색이다. 연예인이나 인터넷에서 우연히 찾은 마음에 드는 옷을 이미지 검색으로 바로 찾을 수 있다. 이미지 검색을 하면 비슷한 색감이나 질감의 옷을 추천해준다.

마치며

무신사는 출발은 남성 패션 커뮤니티였다. 이런 뿌리를 지키며 잃지 않고 계속 커뮤니티를 유지해오면서 일반 패션 앱들과는 달리 방대한 양의 후기 정보 데이터들을 쌓고 그것들을 활용한 개인화 맞춤 서비스를 제공한다는 점에서 다른 서비스와의 차별점을 느꼈다. 뿐만 아니라 정보 공유를 하는 커뮤니티의 특성을 살려 소비자들에게 불쾌하지 않게 정보 글을 읽은 기분을 주는 광고를 하면서 소비자 이탈을 막는 방법을 사용하고 있다는 점에서 아주 영리한 서비스라고 느껴졌다.

지금과 같은 커머스 과포화 시대에 살아남기 위해서는 단순히 양질의 상품을 많이 가지고 있는 걸로는 승부가 되지 않는다. 가장 중요한 것은 사용자들이 이 서비스에 대해 어떻게 느끼고 어떤 방식으로 사용자 충성도를 높히느냐 일 것이다. 그런 의미에서 무신사는 패션 커뮤니티 라는 독특한 서비스의 전 이력이 좋은 방향으로 작동하지 않았나 라는 생각을 했다.

메인화면

웹

정확한 거터 사이즈는 알 수 없으나, 웹 사이즈 1920 x 1080을 기준으로 했을때 마진을 12px로 사용하는데, 꽤나 마진을 좁게 사용하는 편이다. 메인 화면에서는 영상의 썸네일이 주로 올라오기 때문에 공간을 크게 쓰는듯 하다.

폰트는 2배수 12-18px 까지 사용 하고 타이틀과 서브타이틀은 24-20px까지 크게 사용한다. 메인의 내가 구독하는 스트리머의 생방송과 트위치의 프로모션 방송이 슬라이드 형식으로 제공된다. 썸네일은 664 x 375 픽셀로 사이즈가 굉장히 크다.

오른쪽에는 내가 지금 구독하는 채널의 목록과 온/오프라인 상황, 새로 올라온 동영상 추천 채널이 리스트 형식으로 제공된다. 하단에는 추천 채널 영역으로 지금 진행되는 생방송중 내 구독 채널과 비슷한 채널이 추천된다. 형식은 썸네일 형식으로 썸네일은 375x212로 썸네일-프로필사진-타이틀-닉네임-방송 카테고리-태그 순으로 나와있다.

각 컴포넌트들 사이의 마진은 역시 2배수로 떨어진다. 서브타이틀-컨텐츠 사이는 20px,각 요소들 사이의 마진은 12px을 기본으로 사용하고 있고 컴포넌트 사이의 거리는 최소 30픽셀 이상을 사용한다.

팔로우 중인 채널의 목록수를 줄이고 추천 채널의 목록을 늘려신규 채널로의 유입을 늘리고 추천채널을 모두 지금 생방송을 진행중인 채널로만 추천해 즉시 생방송으로 유입이 가능하게 함과 동시에 팔로워 검색을 이 바로 밑에 배치해서 검색을 위해서는 추천채널을 거치게끔 만들었다는 점이 특이했다.

모바일

모바일은 376 x 812 사이즈를 기본으로 분석했다. 모바일 마진은 홈화면기 기준 10px/채널상세 페이지 기준 14px로 메인화면을 가장 넓게 쓰고 상세 페이지로 들어가면 줄어든다.

컴포넌트들 사이의 마진은 컴포넌트 단 사이는 34, 각 컴포넌트 사이의 마진은 12-14px 로 떨어지는 걸로 보아 2배수로 맞춘것을 알 수 있다.

역시 썸네일 위주의 구성으로 생방송채널들이 제일 상단에 보여진다. 그 밑으로 생방송이 진행중인 추천 채널들, 맨 밑에는 팔로우 채널 중 오프라인 상태인 채널들을 리스트로 보여준다.

단순한 구성으로 사실 영상 스트리밍 서비스를 제공하는 앱으로 가장 기본적이지만 가장 기능적인 디자인이라는 생각이 든다.

하지만 한가지 아쉬운것은 웹 페이지에서는 내가 팔로우중인 채널의 생방송을 더 사이즈가 크게 강조해 보여주는데 앱 UI 에서는 모든 방송의 썸네일이 똑같아 내가 팔로우한 채널과 그렇지 않은 채널의 구분이 잘 되지 않기 때문에 사이즈를 다르게 설정하는게 더 낫지 않았을까 하는 생각이 든다.

총평

웹 페이지의 내가 팔로우 중인 채널에 집중한 레이아웃이 앱 화면에서는 보이지 않아 아쉬웠다. 트위치는 내가 팔로우하고 팬인 스트리머의 업데이트나 방송을 보는 비중이 랜덤으로 추천된 스트리머의 방송을 보는 비중보다 훨씬 높기 때문에 구독중인 스트리머를 강조하고 그 스트리머의 클립 영상을 상단에 올리면 어떨까

GNB, 헤더

웹

세로사이즈 60px 로 사용하고 있다. 텍스트 사이즈는 24px 로 꽤 큰 텍스트를 사용한다. GNB 구성은 단순한 편으로 팔로잉 / 탐색 / 알림 / 쪽지 / 프로필 로 구성되어 있고 탐색 오른쪽의 햄버거 메뉴에 너무 많은정보들이 들어있어 정보 구조가 한눈에 들어오지 않는다.

물론 팔로잉과 카테고리가 가장 중요한 항목인건 알겠지만 그렇다고 다른 정보들을 이렇게 서랍에 마구잡이로 쑤셔넣은 옷처럼 넣어놨어야 했나 라는 생각이 든다.

너무 복잡한 기타일반 햄버거 메뉴

모바일

모바일은 헤더와 GNB 모두 세로 55px로 높이가 동일하다. gnb의 구성은 팔로잉/찾기/탐색 으로 아주 간단하게 구성되어있어 한눈에 들어온다. 터치범위는 55 x 55 로 가로세로 넓이를 넓게 사용하고 있다.

gnb 항목이 적은것은 좋지만 팔로잉을 제외한 찾기와 탐색의 기능에 큰 차이점이 없기 때문에 굳이 두개가 같이 gnb 에 들어있기보단 하나를 제외하고 마이페이지에 바로 접근 할 수 있는 버튼을 넣었다면 어땠을까?

헤더도 역시 55px로 프로필 / 방송 시작/ 알림/ 귓속말 / 통합검색 을 제공한다. 프로필을 터치하면 마이페이지로 진입 할 수 있다. 웹에서는 프로필 드롭다운 메뉴를 통해 진입 가능한 기능중 자주 사용하는 기능들을 상단에 배치했다.

총평

웹 gnb는 보기에는 깔끔해 보이지만 더러운 방을 치울때 서랍에 모든 물건을 넣어 겉으로만 깨끗하게 보이도록 만든 느낌이었다. 반면 모바일 gnb와 헤더는 깔끔하다고 느꼈다. 버튼의 수를 최대한 줄여 직관적이지만 위에서 말했던것처럼 gnb에 분류가 모호한 페이지를 동시에 함께 넣어둔것이 아쉽다. 헤더는 웹과 달리 자주 쓰는 기능들은 마이페이지에 꺼내 배치한것은 아주 좋지만 상단에 검색창이 바로 없고 검색 버튼을 한번 더 터치해야 검색 기능에 접근이 가능한 점은 웹과의 통일성이 떨어져 보인다는 느낌을 받았다.

탐색

웹

탐색은 게임이나 방송의 주제를 나눈 카테고리별로 볼 수 있게 만든 페이지로 맨 상단에는 내 활동 맞춤 카테고리를 제공한다. 나의 경우 주로 게임 방송을 시청하기 때문에 게임 카테고리가 추천으로 상단에 뜨는것을 알 수 있다.

추천 카테고리 하단에는 카테고리 대분류를 버튼으로 제공하고 그 밑으로 트위치 에서 프로모션중인 방송이나 채널이 추천된다.

대분류를 띄워주는것은 좋지만 대체 마지막 카테고리인 크리에이티브 버튼이 왜 저렇게 깨졌는지 이유를 알 수 가 없다. 영어에서 한글로 번역되면서 생긴 텍스트 공간의 부족때문인것 같은데 트위치처럼 큰 회사에서 저런것하나 신경쓰지 못한다는 사실은 조금 아쉽다.

대분류를 들어가면 추천 소분류가 뜨고 그 밑으로는 쭉 생방송 썸네일만 뜨는 구성이다. 여기에서도 역시 내 활동에 맞춘 카테고리 소분류 (ex. 게임 장르)를 추천해준다.

모바일

전체 화면 오프셋은 14픽셀로 메인보다 공간을 덜 쓴다. 카테고리와 생방송 채널을 분리해서 제공하는 부분은 웹보다 더 사용이 편하다고 느껴졌다. 앱 화면의 상단에 대분류 카테고리를 제공하고 리스트 형태로 카테고리를 제공한다. 리스트 컴포넌트는 카테고리 커버 이미지 타이틀-서브타이틀-태그 로 구성되어 있으며 각 요소 컴포넌트 사이의 마진은 14픽셀이다.

그리고 정렬과 필터를 사용자 맞춤화 할 수 있는 기능을 제공하고 있는것이 웹과의 가장 큰 차이점 이라고 할 수 있을것 같다.

총평

제한된 모바일 화면에서 사용자가 원하는 정보만을 볼 수 있게 정렬과 필터 기능을 넣은것은 좋은 방법이라고 생각한다. 웹처럼 하단으로 영상의 썸네일을 무한정 나열하는 배치를 고집하지 않고 카테고리와 생방송 채널의 탭을 분리한것도 모바일 뿐 아니라 웹에서도 이렇게 제공한다면 좋지 않았을까? 라는 생각을 하게 한다.

세부 카테고리에 대한 불만도 있다. 물론 너무 다양한 게임들의 방송이 진행되고 있고, 상단에 추천 게임 방송이 있다고 하더라도 스트리머에 국한되지 않고 게임에 따라 시청하는 시청자가 분명히 존재하고 소분류 토픽 자체를 팔로우 할 수 있는 기능을 넣었음에도 불구하고 리스트 형태로 소분류의 종류를 제공하지 않고 오직 사용자 검색에만 의존하는것은 많이 아쉽다.

마치며

웹과 앱은 사용할 수 있는 공간이 차이가 많이 나기 때문에 웹에서 제공하고 있는 서비스를 앱에서 같은 수준으로 제공하기란 정말 어렵다.

웹과 앱 모두에서 UI나 UX적으로 아쉬운 부분들이 있기는 했지만 동시에 공간의 제약이 있는 앱화면을 어떻게 효과적으로 사용할 수 있을지에 대한 트위치의 고민이 느껴졌다.

동시에 웹을 앱이나 모바일 화면으로 옮겨올때에 가장 무너지기 쉬운것은 정보의 위계구조라는 점을 새롭게 느끼게 되었던것 같다.

디자인을 하면서 무의식적으로 모바일의 제한된 공간을 제약이라고 생각해왔는데 이번 스터디를 진행하며 제한된 공간이 아닌 더 깔끔한 레이아웃이 가능한 공간이 될 수 도 있구나 라는 깨달음도 얻을 수 있었다.

교보문고와 알라딘은 오프라인과 온라인에서 동시에 가장 많은 사용자 수를 확보하고 있는 서점으로 오프라인보다 온라인에서 더 많은 주문수를 기록하고 있다. 그리고 둘 다 EBook 서비스를 제공하고 있기도 하다.

둘의 서비스의 다른점과 공통점을 UI 적인 관점에서 비교해 분석해보려 한다.

1. 홈 화면

알라딘과 교보는 다양한 서비스를 하는 기업인만큼 홈에 다양한 내용을 한번에 요약해 보여주어야 한다. 특히 알라딘과 교보 둘다 MD,E-Book,중고책판매 등 다양한 분야로 서비스를 확장하고 있기 때문에 보여주어야 양이 특히 많다. 각 앱이 어떤 서비스를 보여주며 선택과 집중을 하고 있는지 알아봤다.

가장 신경써야할 점은 일반 커머스 서비스에서도 마찬가지겠지만 두 앱과 같이 책을 판매할때 가장 중요한건 요소들 사이의 레벨과 텍스트의 강약 조절을 통해 너무 복잡하지 않게 디자인 하는것이라고 생각한다.

두 앱의 홈 화면 구성

두 앱의 홈 화면 구성을 텍스트로 정리해봤다. 둘다 메인은 책 추천에 집중하면서 사용자들의 커뮤니티나 자신들의 MD 홍보를 중간중간 넣어두는 구성이다.

검색필드와 장바구니는 최상단에 고정해두어 어디서도 접근 가능하게 만들어두었다.

알라딘

알라딘의 홈 화면은 중구난방 이라는 느낌을 좀 받았던것 같다. 마진은 375px x 812px 기준 10PX로 20PX을 사용하는 교보에 비해 더 꽉찬 느낌을 줄 수 있는 비율을 사용한다.

하지만 알라딘의 홈 화면은 교보문고의 홈 화면보다 더 많은 공간을 사용함에도 불구하고 답답하다는 느낌을 준다. 책을 추천하고 내용을 보여주려 하다보니 텍스트가 많이 들어간다. 특히 도서추천 섹션은 텍스트 크기가 많고 사이즈가 작다

도서 추천 섹션, 문장과 추천 문구를 넣어 텍스트 량이 굉장히 많다.

알라딘 굿즈로 유명한데 굿즈를 홈 화면에 생각보다 많이 노출하지 않는다.

메인화면에 노출되는 굿즈가 메인인 섹션은 이거 하나

상단 탭바에 굿즈 페이지를 따로 빼놓아서 그 안으로 들어가야 상세 페이지가 나온다.

섹션끼리의 구분이 잘 안되고 결속력이 약한 이유는 텍스드의 양이 많고 작은데다가 텍스트 간격이 좁은 이유 때문인것 같다. 교보는 텍스트의 양을 최소화 시키고 디바이더를 사용해 구획을 나눠 더 깔끔한 느낌을 준다.

교보문고

교보문고는 메인의 롤링 베너를 가로비율 꽉차게 상태바 바로 하단 높이까지 이용한다. 알라딘의 경우 롤링베너 양옆으로 다음 베너가 노출되는 방식을 사용하는데 교보문고는 한번에 하나의 배너를 보여주는데 개인적으로 집중도는 이 쪽이 더 높다는 느낌을 받았다. 개인 맞춤화 추천이 자세하게 나온다. 오프라인 매장의 구매 도서 데이터와 연결되어 온라인에서 책을 구매한 이력이 없어도 온라인 서점에서 구매할 책을 추천 받을 수 있다.

텍스트 량의 차이는 많이 나지 않지만 이미지를 더 크게 사용하고 이미지 위에 텍스트를 얹어 사용하는 방식으로 실제보다 텍스트가 적어보이고 확실히 이런 차이들 때문에 알라딘보다 교보문고가 더 정돈되어 보였던것 같다.

2. 메뉴

메뉴의 경우 교보보다 알라딘이 더 깔끔하게 구성되어있다. 매뉴에서 스크롤을 내려야 하도록 디자인을 하는것은 좋지 않다고 생각한다. 메뉴는 정보량이 많아 스크롤까지 내리게 한다면 집중력이 흐려질 수 있고 실제로 교보문고는 메뉴를 정리했다기보다 홈화면의 컨텐츠를 그냥 메뉴에 박아두었다는 느낌이 든다.

3.GNB

알라딘은 높이 50px / 교보는 세로 66px로 GNB 높이가 높고 버튼의 크기가 크다. 알라딘의 경우 가운데에 이벤트 버튼이 있는데 이게 정확히 무슨 버튼인지 처음에는 파악하기 힘든데 그게 중앙에 위치하고 있어 무의식적으로 누르게된다. 홈 버튼을 가운데에 배치하는게 더 나았을거라는 생각을 했다. 게다가 GNB항목이 7개나 되어서 복잡하다 굳이 이벤트 버튼을 GNB에 넣었어야했을까? 하는 생각도 든다. 교보는 알림 버튼을 플로팅 버튼으로 따로 빼서 GNB에 따로 넣지 않으므로서 최소한의 필요한 버튼만을 제공한다는 느낌을 받았다. 알림버튼은 플로팅 버튼으로 굳이 GNB에 집어넣지 않아도 화면에 계속 띄워 둘 수 있게 디자인되어있다.

4. 상품 목록

상품 목록 컴포넌트를 비교해봤다. 교보가 크기 자체를 더 크게 사용했다. 이미지 화질차이가 너무난다! 교보는 상품 목록과 상품상세의 이미지의 화질이 알라딘보다 크게 떨어지는것을 알 수 있었다.

모바일 화면으로 보면 화질 차이가 극명하게 보인다.

알라딘의 경우 사이즈를 작게 해 화면에 최대 3권의 책까지 보이게 하는 반면 교보는 컴포넌트의 사이즈가 커 최대 2개의 책이 보인다. 알라딘은 따로 메뉴를 열지 않아도 상단에 카테고리 드롭박스를 위치해 더 편하게 이용이 가능하게 디자인했음을 알 수 있다.

알라딘은 상품 목록에 미리보기가 있다. 알라딘의 E-Book 서비스가 잘 되어있어 이용을 많이 하는데 그런 자신들의 장점을 살려 상품 목록 컴포넌트에 E-Book으로 미리보기를 넣어 내용을 확인 할 수 있게 하여 오프라인 서점의 최대의 단점인 내용을 미리 훑어볼 수 없다는 점을 최대한 상쇄하려고 하는 느낌을 받았다.

5. 상품상세

알라딘의 경우 책을 3D로 보여준다 책표지의 화질은 역시 교보보다 훨씬 좋다 바로 옆에 플로팅 버튼으로 미리보기-공유-즐겨찾기-적용가능 쿠폰 을 플로팅 버튼 형식으로 좌측에 띄워주면서 바로 확인 가능하도록 한 점이 좋았다. 교보의 경우 혜택과 적립금을 밑으로 쭉 떨어뜨려 보여줘서 일일히 스크롤 해야하는 방식이다.

6. 마치며

시장에서 가장 큰 두 서비스인 만큼 너무 앱의 규모도 커서 주요 기능만 추려 비교를 해야 했기 때문에 놓친 부분들이 꽤 많다. 시간을 좀 더 들여서 마이페이지와 주문직전까지의 프로세스는 어떻게 다른지 더 분석해보고싶다. 더해서 책과 같은 텍스트가 많이 들어가는 상품들을 위한 컴포넌트를 만들때 어떤 방식이 효율적인지, 비슷한 컨텐츠를 계속해서 보여줘야하는 화면에서 컴포넌트를 어떤 방식으로 차이점을 조금씩 주어서 만들수 있는지를 배울 수 있는 스터디 였다.

하루에 2번 아침과 저녁에 측정 해야하고 자가격리 장소를 벗어나거나 특이사항이 생기면 담당 공무원에게 전달되어 자가격리자에게 바로 연락을 취할 수 있다.

나도 올해 초(3월)에 한국에 입국해 자가격리를 하면서 2주동안 사용했었는데 빠른 시일 내에 개발한 앱이라 그런지는 모르겠지만 잔버그나 불편한 부분이 굉장히 많았다.

이번 스터디는 단순히 앱을 분석하는걸 넘어서 불편한 부분들을 살펴보고 더 나은 방향으로 다시 디자인까지 해보는 방식으로 진행하려고 한다.

자가격리 앱은 자가격리자만 받아 사용할 수 있기 때문에 직접 캡처를 할 수 없기때문에 최대한 자세하게 설명하고자 한다.

불편한점

1) UI의 접근성 문제

처음 앱을 깔면 개인정보 및 위치정보 수집 동의 -> 국적선택 -> 전담공무원 ID 입력( 입국 완료 해당지역 보건소에서 검사를 받으면 지역의 해당부서 공무원중 한명으로 배치된다.) -> 자가격리자 개인정보 입력 -> 자가진단 페이지로 진입할 수 있다. 이 프로세스를 단계별로 분리했는데 정보를 얼마나 더 입력해야 하는지 정확히 알 수 없다. 이런건 위에 프로그래스 바를 넣어주는 식으로 간단하게 해결 할 수 있는데 말이다.

자가격리자의 국적 선택 리스트의 경우 텍스트로만 나열되어있는데 국기 이미지 정도는 넣어줘도 될것 같다.
그리고 아주 기본적인 부분에서도 헛점이 보이는데 컴포넌트나 버튼 사이의 마진이 제각각이다.
디바이더와 보더의 색이 너무 진하다.

확인과 취소 버튼이 동일한 색 컬러 굵기로 되어있어 구분이 힘들다. 색약이나 색맹 사용자는 컬러가 아닌 컬러의 농도로 버튼을 구분하는 경우가 있는데 이런 앱에서 필수로 고려해야할 접근성이 고려되지 않았다. 또 다른 접근성이 고려되지 않은 예로 자가격리 생활 수칙의 경우 텍스트가 아닌 이미지로 되어있는데 보이스 오버로 앱을 사용하는 시각장애인의 경우 이미지를 읽을수가 없기 때문에 이 정보에는 아예 접근 할 수 없게된다.

텍스트가 큰건 상관이 없는데 위치가 제각각이고 길이가 지나치게 길어 읽기 불편하다. 마지막 자가진단 일시가 너무 작고 이전 자가진단 목록또한 글씨와 숫자가 작고 날짜-시간이 그냥 - 로 구분되어 있어 읽기 어렵다. 이건 자가진단을 하지 않았을때 나오는 팝업도 마찬가지인데 날짜와 시간이 위아래로 나와서 내가 어느 시간과 날짜에 자가진단을 하지 않았다는건지 알 수가 없다.

이런 서비스 기획에서 필수적으로 고려되야할 접근성이 잘 고려되지 않은 부분이 많이 보여서 아쉬웠다.

2) 부족한 정보

자가격리 기간 카운트다운이 없다. 자가격리자가 스스로 자가격리 기간을 세야하는데 그러면 마지막 날이 포함인지 아닌지 어느정도 지났는지 헷갈려 담당 공무원에게 몇번이고 연락하는 경우가 있다. 차라리 메인 화면에 자가격리 시작과 종료 날짜, 남은 기간을 표시한다면 그런 불편을 줄일 수 있을것이다.

자가격리자가 받을 수 있는 물품/생활/유급휴가/심리상담 지원에 대한 정보를 앱 안에서 받을 수 없는것도 문제다. 자가검진을 할때 자가격리로 인한 우울감이나 불안감으로 심리상담을 원하는 사람들은 특이사항에 심리상담을 희망합니다 라는 메시지를 직접 타이핑 해야한다. 지금은 자가격리에 들어갔을 때 지자체로부터 받을 수 있는 지원을 자가격리자 스스로 찾아야 한다. 특히 심리상담의 경우 심리상담이 필요하면 공무원에게 전달되는 특이 사항에 심리상담이 필요하다 라고 적어야만 한다.

자가격리자 폐기물 배출이나 자가격리 수칙등을 따로 알려주지도 않는다. 자가격리자의 생활 쓰레기는 의료 폐기물로 분류되어 의료 폐기물 봉지에 담아 배출해야 하는데 그런 것들을 자세히 알려주지 않아 헷갈리는 경우가 많았다. 또 지자체마다 자가격리 수칙이 다른데 일괄적인 똑같은 이미지만 제공한다.

3)개인정보 보호

담당공무원과 개인 휴대전화 번호로 직접 연락을 해야한다는것. 담당 공무원이 처음 격리 관련 물품을 가져다주는데 이때 담당 공무원이 격리자가 격리지에 있는지 확인해야하고, 얼굴을 보게 된다. 담당 공무윈의 부서번호를 알려주지만 자가격리자가 공무원의 업무 시간에만 격리되어있는게 아니다보니 24시간 연락이 되는 개인 번호로 연락을 하는 경우가 대부분이다. 그래서 담당 공무원이나 확진자가 부적절한 목적으로 연락을 하는 경우가 발생하기도 한다.

GPS 측정이 항상허용이 되지 않는다. 앱을 백그라운드에 항상 켜놓아야해서 배터리가 너무 빨리 닳는다는 컴플레인이 제일 많았다. 사실 이건 아이폰의 개인정보 보호 시스템의 문제이기 때문에 이런 불편을 해결 할 수 있는 다른 방법을 찾아야 한다.

4. 허술한 자가격리 시스템

아침 9시/저녁 9시에 두번 자가검진 확인 전화가 오는데 이틀정도 자가격리를 진행하면 대충 전화가 오는 패턴을 파악 할 수 있다. 담당공무원의 경우 내가 따로 연락을 하지 않으면 한명당 담당하는 자가격리자의 수가 너무 많기때문에 일일히 신경을 쓸 수 없다. 사실 마음만 먹으면 몰래 휴대폰을 두고 한두시간 정도 외출을 할 수 있다. 그리고 휴대폰이 오래 움직이지 않으면 울리는 경보 또한 수면시간동안 추적을 사용자 임의로 멈출 수 있는데 이때 시간을 설정해두고 나가면 자가격리자가 수칙을 위반했는지 아닌지 알 수 없다.

리디자인 방향

1.UI 개선

일단 UI를 전체적으로 뜯어 고쳐야한다. UI의 통일성이 전혀 안보이기 때문에 통일성을 준 패턴을 먼저 잡을 필요가 있다고 느꼈다. 최소한 버튼이나 컴포넌트들의 크기는 맞추어야 한다. 블루 컬러는 좋은 색 선택이라고 생각해 바꾸지 않을것 이지만 색의 명도를 확실하게 조절할 필요가 있다. 날짜와 시간 구분을 확실하게 해서 헷갈리는 일이 없도록 해야할 필요성도 있다.

메인에는 당일 자가검사 여부와 자가격리가 몇일이 남았는지 보여주면 좋을것 같다. 더불어 지금화면에 나와있는 정보 등록/수정은 메뉴로 빼도 될것 같고 메인 화면은 최대한 간결하게 구성할 예정이다.

2.정보전달 개선

일단 이미지로 전달되는 텍스트들이 없게 해야한다. 웹이 아니기 때문에 굳이 이미지로 전달할 필요가 없을 뿐 아니라 최대한 짧고 정확한 문장으로 구성할 필요가 있다.

자가격리자들은 분명 불안하고 외로운 상황에서 혼자 고립되어 있기 때문에 우울감을 느끼는 경우가 많기 때문에 자가격리 기간이 얼마나 남았는지 메인 화면에 크게 보여주고 심리상담 서비스가 있다는걸 더 적극적으로 어필해야 한다. 간단한 심리테스트 문항을 넣어 어느정도 이상의 점수가 나오면 심리상담 서비스로 이어주는 방식을 사용할 수도 있다.

지자체마다 자가격리자의 수칙이나 지원 시스템이 다르기 때문에 자가격리 장소를 설정하면 그 지자체의 정보만 가져와 보여지게 하면 어떨까 하는 아이디어도 생각해 볼 수 있다.

3. 개인정보 보호 개선

담당 공무원과의 커뮤니케이션을 최대한 앱 안에서 시작하고 끝낼 수 있도록 해야한다. 자가격리 해제 전 코로나 검사나 불가피한 외출이 필요할때 담당 공무원에게 개인적으로 연락을 해야 하는데 굳이 이럴 필요 없이 앱에 외출 이유와 신청을 한 후 공무원이 확인-승인 할 수 있는 기능을 넣어도 좋을것이다.

4.랜덤 자가격리 확인 시스템

패턴을 굳이 줄 필요가 있을가 싶다. 아침 9시-11시 사이나 저녁 7시-9시 사이에 랜덤으로 확인을 한다면 자가격리 수칙을 위반하기 훨씬 힘들다. 또한 휴대폰이 오래 움직이지 않으면 연락이 간다는 것도 굳이 알릴 필요가 없을것 같다.

5. 더 고려해야할점

유니버셜 디자인의 개념을 정확히 이해하고 접근해야 한다는 생각이 들었다. 단순히 텍스트 사이즈를 늘리는데 그치지 않고 시각장애인/색약,색맹 사용자가 최대한 다른 사용자와 다름 없이 이용할 수 있는 색상을 사용하고 간결한 텍스트 사용을 원칙으로 접근하는것을 포인트로 두어야 겠다.

GPS 트래킹이 휴대폰 배터리를 너무 많이 잡아먹는다는 이슈에 대해서는 페이스 인증이나 웨어러블 기기와의 연동(제공)으로 꼭 앱으로 GPS 트래킹을 하지 않아도 사용자의 위치를 파악 할 수 있는 방법을 고민해야 한다.

마치며

급하게 만들어진 앱이어서 그런지 부족한 점이 정말 많이 보였다. 하지만 그만큼 생각할 점이 많기도 하다. 내가 문제의식을 느낀 부분들을 끝까지 고려하며 리디자인을 진행 한다면 꽤 괜찮은 결과과 나올 수 있을것 같다.

목표가 명확하고 기능이 많지 않기 때문에 컴포넌트들이 눈에 잘 들어오기 때문에 컴포넌트들의 패턴을 파악하기 어렵지 않았다.

이번 분석은 피트니스 앱 시장과 런데이만의 강점을 분석해보고 앱의 컴포넌트들을 따라 만들어보면서 패턴을 익혀보는 식으로 진행했다.

1. UI 분석

피그마를 사용했고, 아이폰 기준인 375 x 812로 진행했다.

1) 오프셋 / 마진

오프셋

메인과 서브페이지의 오프셋들을 다 15px로 모든 페이지에 고정적으로 적용되어 있다. 컨텐츠가 들어가는 넓이는가로 345px로 고정되어 있다.

컴포넌트 마진

컴포넌트 사이의 가로 마진은 메인페이지는 15px을 기준으로 맞춰져있다. 서브페이지의 경우 5-10px 사이에서 조금씩 변화를 주는 모습을볼 수 있었다.

2)툴바

툴바

세로 45-40px 사이로 구성되어 있다. 타이틀이 들어간 툴바의 경우 40px 로 고정되어있다.

3) 컴포넌트

컴포넌트들이 다양해 보이지만 하나의 컴포넌트를 다른곳에 재사용한것들이 많이 보인다. 크기는 정사각형의 컴포넌트의 경우 168 x 145 px , 112 x 105px 사이즈가 번갈아가면서 사용된다.

직사각형의 가로가 긴 형태의 컴포넌트의 경우 가로길이는 345px 에서 오프셋 없이 가로사이즈를 풀로 사용하는 가로 사이즈를 사용한다. 역시 이미지를 주로 사용하기 때문에 컬러를 제한적으로 사용한것으로 보인다.

5) 타이포 하이라키 역시 12px - 24px 사이의 구간을 벗어나지 않는 사이즈를 가장 많이 볼 수 있다. 특이했던것은 30px 나 24px 같이 상대적으로 사이즈가 매우 크게 사용된 부분이 있는데 그건 바로 이렇게 기록, 상세 시간 등을 보여주는 컴포넌트에 제한적으로 사용되었는데 가장 중요한 정보를 효과적으로 강조하고 있다는 느낌을 받았다.

6)컬러

메인과 타이포 컬러

컬러가 매우 제한적으로 사용되어 있다. 메인 컬러는 3가지로, 퍼플컬러인 #705FCF 를 기본으로 채도를 낮춘 2가지 바리에이션이 사용된다. 버튼과 그래프, 메뉴의 아이콘 등을 제외하면 실질적으로 컬러가 사용되는 부분이 별로 없다.

텍스트 컬러또한 바리에이션이 많지 않은데, 블랙에 가까운 #212121 에서 역시 채도를 낮춘 2가지 색이 사용되며 채도가 높은 순에서 낮은 순으로 타이틀 텍스트 - 서브텍스트 - 캡션 에 많이 사용된다.

2. 서비스 분석

런데이의 가장 큰 특징은 30분 인터벌 러닝과(8주 프로그램) 오디오 코치 시스템 이다.

2분씩 인터벌로 30분을 달리며 8주동안 이어가는 챌린지로 러닝을 이미 꾸준하게 하던 사용자보다 러닝을 이제 막 시작하는 입문자들을 위한 시스템에 포커스를 맞춘것을 볼 수 있다.

이를 더 잘 보여주는것이 오디오 코칭 시스템이다. 30분의 러닝동안 매일 다른 주제로 러닝에 관련된 지식들을 알려주고 각 인터벌의 남은 시간, 워밍업 쿨다운 시간등을 보이스로 알려준다.

기초 가이드 지식이라 역시 러닝을 막 시작하는 사람이 아니면 별로 유용하다고 느끼지 못할 수도 있지만, 8주 트레이닝을 시작한 러닝 입문자 들에게는 유용한 정보들이다.

러닝 트래킹 프로세스

러닝 트래킹을 해주는 프로세스를 실행 하면, 먼저 인터벌의순서와 시간을 확인 할 수 있는 그래프를 보여주고 현재 인터벌의 남은 시간과 다음 인터벌의 시간을 번갈아가며 보여준다.

실제로 러닝을 해 보면 숨이 차서 힘들어도 2-1분 30초 정도 되는 시간이 남은것을 보면 오기가 생겨서 더 뛰게 된다. 지도와 시간, 통계를 탭으로 나눠 한번에 보여준다.

얼핏 보면 러닝을 하면서 보기에 복잡하지 않나 라고 생각하기 쉽지만 사실 러닝을 하다보면 핸드폰을 볼 틈이 없어 이 기능은 타이머를 제외 하고 러닝을 끝낸 뒤 기록을 체크하기 위한 용으로 사용된다고 봐도 무방하다.

러닝을 포기하지 않게 도와주는 챌린지와 스탬프

역시 러닝 입문자들에게 어필 할 수 있는보상 시스템이 잘 마련되어 있다. 대부분의 피트니스 앱이 사용하는 시스템으로 운동을 마치거나 일정 기간 이상 꾸준하게 운동을 하면 주어지는 뱃지 시스템을 역시 사용하고 있다.

8주 챌린지를 하루 하루 완수할때마다 스탬프를 찍어주고 챌린지에 도전해 성공하면 뱃지를 주는 등 성취감을 느낄 수 있게 만들어주는데 성취감은 운동을 지속하는데 가장 중요한 요소라는것을 생각해보면 지속적인 운동을 독려하고 앱의 사용 빈도를 높이는데 큰 역할을 하고 있다.

커뮤니티를 가입하면 커뮤니티원들의 순위와 달린 거리를 볼 수 있다.

커뮤니티 기능을 만들어 커뮤니티원들끼리의 경쟁이나 커뮤니티 끼리의 경쟁을 유도한다. 역시 지속적인 러닝을 독려하고 앱의 사용 빈도를 높이는 주요한 기능 중 하나라고 볼 수 있다.

또한 런데이를 개발한 한빛소프트에서 개발한 다른 피트니스 앱과 연개해 러닝전에 스트레칭을 하거나 홈트레이닝을 도와주는 핏데이를 바로 메인 메뉴에서 접근할수 있게 한것도 좋은 부분이라는 생각이 든다.

3)마치며

런데이의 인터벌 러닝을 정말 좋아해서 항상 런데이를 사용하다가 웨어러블 기기를 사용하기 시작하면서 스마트 워치용 앱이 없는 런데이 대신 워치의 기본 기능 사용하면서 불편함을 많이 느꼈다.

요즘 러닝을 꾸준히 하는 사람들은 대부분 웨어러블 기기를 사용한다고 해도 과언이 아닌데 런칭된지 2년이 넘은 앱이 워치용 앱이 없다는 점은 많이 아쉽다. 나도 조금 불편하더라도 휴대폰을 쥐고 뛰는대신 워치로 사용 가능한 앱을 쓰게 되었기 때문이다. 사용자 이탈을 막기 위해서라도 워치용 앱을 개발하는게 시급해보인다.

그리고 위에서 계속 말했던것 처럼 런데이는 러닝 중-상급자보다 입문자들에게 특화된 코스에 중점을 둔다는 것을 느꼈다. 중상급자들을 위한 코스나 시스템도 개발해 추가한다면 사용자 풀을 효과적으로 높힐 수 있지 않을까 라는 생각을 해본다.

웹툰이라는 시장 자체가 한국 시장이 가장 크고 스탠다드가 한국이라고 볼 수 있을 정도로 독보적인 위치에 있기 때문에 이 두 앱을 비교해보면 앞으로의 웹툰 서비스가 나아갈 방향을 볼 수 있을 것 이다.

1) 메인 페이지

네이버 웹툰 메인 페이지

네이버 웹툰의 경우 가장 표준적이고 웹툰앱 이라고 생각하면 가장 먼저 떠올릴 수 있는 인터페이스 가지고 있다. 가장 상단에 최근 본 작품을 선택 할 수 있어 읽던작품에 쉽게 접근 할 수 있다. 한 화면에 최대한 많은 작품을 보여주려 하는데 스크롤이 길수록 사용자가 끝까지 스크롤을 내릴 확률이 적어지고 때문에 최대한 상단에 많은 정보를 노출해야 하기 때문일 것이다. 특히 웹툰의 경우에는 생각이 나거나 알림을 받았을때 앱을 켜서 업데이트된 기존의 읽던 웹툰을 읽는 경우가 많기 때문에 최근 본 작품을 최상단에 배치한건 아닌가 하는 생각이 든다.

추천 기능이 있지만 스크롤을 2-3번 이상 내려야 나오고 눈에 잘 띄지 않는다. 추천이 나오기 전에 광고들이 더 상단에 배치되어있어 사용자로 하여금 스크롤을 내려 컨텐츠를 보는것 자체에 피로감을 느끼게 하는게 가장 큰 이유일 것 이다. 메인에서도 느낄 수 있듯이 네이버 웹툰은 큐레이션 서비스라는것에 크게 중점을 두지 않는다는 느낌을 받았다.

카카오 웹툰 메인페이지

카카오 웹툰의 디자인을 총괄한 유천종 디자인 센터장의 인터뷰를 읽어보면 이 서비스의 주요 키워드는 무한한 탐색 으로 무한한 탐색이 가능한 UX 구조를 만드는데 집중했다고 밝혔다. 이를 가장 잘 보여주는게 바로 메인 페이지로 AI 추천/기대신작/인기 등의 카테고리로 구분되어 말 그대로 무한 스크롤 형식으로 보여진다. 한 화면에 3개의 작품을 추천하고 작가와 장르를 명시하지 않는대신 큰 일러스트와 내용 설명을 위주로 큐레이션 된다. 이도 역시 카카오 웹툰이 지향하는 UX로 만화의 본질과 맞닿아 있는 그림 을 강조한 결과이기도 하다. 큰 이미지와 Live 2D 를 사용한 움직이는 썸네일은 개인적으로 마음에 들었지만 이건 앱의 용량을 키우고 로딩속도와 데이터 사용량을 늘리는 가장 큰 주범이기 때문에 on/off 옵션을 따로 만들었으면 어땠을까 하는 아쉬움이 남기는 한다.

이런 방식은 앱을 처음 사용하는 유저들에게는 효과적일것 같지만 웹툰앱 사용자들은 보통 원래 읽던것을 이어 읽는 경우가 대부분인데 읽던 웹툰을 확인하려면 메인에서 바로 접근 할 수 없고 보관함-최근감상 까지의 2Depth 를 거쳐야 한다. 그리고 AI 추천의 기준도 나이나 성별, 내가 자주 본 작품등 명확한 기준이 명시되지 않아서 무슨 기준으로 추천하는지 명확하지 않다.

2) 작품 화면

네이버의 작품 상세화면

장르 분류 키워드(태그)와 제목/작가/작품설명 으로 심플하게 구성되어있다. 작품 표지도 사이즈가 매우 작게 들어가있는데 사실 이미 작품을 읽던 기존 독자들에게는 이런 부분이 크게 상관이 없을수도있지만, 처음 작품에 유입된 독자들에게는 작품에 대한 흥미를 크게 끌어내지는 못한다. 회차 썸네일도 기본 웹툰 표지를 그대로 사용해 해당 회차의 스틸컷을 사용하는 카카오 웹툰에 비해 심심해보인다 라는 느낌을 받았다. 그리고 역시 해당 작품을 재미있게 본 독자들을 위한 큐레이션 시스템이 없다.

카카오 웹툰의 작품상세화면

회차/작품정보/댓글 3개의 탭으로 나누었다. 회차탭은 다음 웹툰때와 다르지 않게 상단 일러스트-회차로 구성되어 있고 작품 정보 탭으로 넘어가면 작품과 관련 있는 웹툰들이 추천되는 시스템은 네이버에는 없는 것으로 끊임없이 사용자를 새로운 컨텐츠로 순환 시키는 시스템을 잘 구축하고 있다. 그리고 해당 작품과 유사한 작품 이라는 큐레이션의 이유를 명시하고 있다는 점에서 메인 화면에서의 큐레이션보다 추천의 정당성이 높아지는것을 느낄 수 있다. 하지만 하단에 노출되는 광고의 위치는 다크패턴에 가깝다는 생각이 들 정도로 불편한데 스크롤을 내리면 광고 자리가 탑 버튼이 되면서 바뀌는데 실수로 클릭하는 경우가 종종 생긴다. 다음 카카오정도로 큰 기업이 이렇게 광고 노출에 진심인 이유는 잘 모르겠다.

3)보관함

네이버 웹툰

네이버 웹툰은 아까도 말했듯이 큐레이션과 추천 시스템에 크게 신경을쓰지 않는다. 이말은 다르게 말해 신규 유입 사용자보다 기존의 사용자들을 더 신경쓰는 ui/ux라는 의미라고 볼 수도 있다. 특히 보관함에서는 정말 단순히 내가 읽었던 웹툰이 나열되어 있는것 이외의 내용이 없다. 사실 해당 앱을 꾸준히 이용하는 독자들에게는 가장 편하고 깔끔한 ui 일 수 있겠다는 생각이 든다. 업계 1위인만큼 자신들의 서비스를 정말 처음 접해보는 사용자는 많이 없을거라는 자신감일수도 있겠지만.

카카오 웹툰

내가 읽었던 웹툰의 목록은 최근 감상에 들어가면 볼 수 있고 찜한작품 구매작품 다운로드의 탭으로 나뉘어져 있다. 추천 큐레이션은 이중 최근감상한 작품들을 기준으로 이루어져 있는데 최근감상은 단순히 가장 최근에 본 작품이라 내가 즐겨 읽는 작품이 아닌 단순히 가장 최근에 읽었던 작품 기반으로 추천 큐레이션이 작용되는것은 의문의 여지가 있다. 추천 기준도 내용이나 장르가 아닌 "그림체"인데 물론 이걸 중요하게 여기는 독자들도 있겠지만 차라리 추천 기준을 세분화해 보여주는게 나았을 것 이라는 생각이 든다.

그리고 기본적으로 추천은 내가 단순이 가장 최근에 본 웹툰이 아닌 찜한 웹툰이나 구매한 웹툰 위주로 이루어져야 더 정확하지 않을까 독자들은 다양한 웹툰들을 1-2화정도 보고 흥미있는 것들을 골라 읽고 찜하거나 그것들만 구매할테니까. 그리고 이걸 메인으로 가져와 보여주었다면 훨씬 나았을 것 이라는 아쉬움이 남는다.

4)포인트/캐시 내역

네이버 웹툰의 쿠키를 확인하려면 마이페이지에서 내 쿠키를 확인하면 된다.

메인-마이페이지에

카카오 웹툰의 포인트를 확인하려면 메인의 내천자(川) 모양의 아이콘은 터치하면 된다.

가장 헷갈렸던 부분이다. 일단 내천자(川)는 캐시나 포인트등과 아무 상관이 없는 모양이라 이게 포인트 내역을 의미하는지 전혀 알수가 없었다. 이 아이콘을 터치 - 내 닉네임을 터치 순의 2Depth 를 거쳐야 마이페이지로 진입 할 수 있는데 순서가 뒤바뀐것 같다. 마이페이지와 포인트 내역을 동시에 확인 할 수 있게 해줬으면 더 편했을것이다. 지금으로서는 마이페이지에 어떻게 접근해야 하는지 헤매게 된다.

5)마치며

나는 이번 카카오웹툰의 개편이 꽤 마음에 든다. 사용자들은 많이 사용해 익숙한 패턴을 선호 할 수 밖에 없다. 그 안에서 독창성을 가지기는 쉽지 않은 일이다. 그런 의미에서 이미 정형화된 패턴이 있음에도 불구하고 패턴을 깨는 ui와 ux를 시도한것 만으로도 혁신이며 그 과정에서 당연히 부족한 부분들이 나올 수 밖에 없다. 그런 부분들은 지속적인 고민과 연구를 통해 고쳐가면 되는 부분이다. 다만 내가 염려스러운것은, 웹툰은 말 그대로 모든 연령층에서 즐기는 컨텐츠인데(심지어 엄마,아빠,할머니도 웹툰을 보신다) 혁신적이고 미적으로 아름다운 디자인도 좋지만 가장 중요한 접근성의 측면에서도 고려해주었으면 한다.

두번째 스터디를 진행한 앱은 여성 쇼핑 앱 지그재그이다. 지그재그는 여성 쇼핑 플랫폼으로 커머스 앱인만큼 반복적으로 사용되거나 조금씩만 변형되어 반복 사용되는 패턴이 눈에 띄어 그런 컴포넌트의 사용이나 지그재그의 가장 큰 특징인 사용자 개인화 추천 시스템을 중점으로 분석했다.

지난번 분석때에는 지나치게 디테일한 분석보다 UX에 집중한 분석을 해보고자 한다.

1.디자인 모킹

XD로 작업했으며 사이즈는 375 x 812 1:1 사이즈로 맞췄다. 기본 네비게이션 중 주요 기능이 들어있는 4개의 페이지와 스토어 상세 - 옵션선택 - 옵션 확정 까지의 프로세스를따라 만들었다.

메인 네비게이션 기능

구매 프로세스

1) Offset/Margin 메인과 서브페이지 모두 오프셋이 15px로 동일하게 들어가 있다. 총 컨텐츠가 들어가는 넓이는 345px이다. 오프셋을 제외한 나머지 마진과 패딩은 대부분 4배수로 진행된다.

2) 툴바/네비게이션 네비게이션의 아이콘은 20 X 20 박스에 들어오는 크기로 이는 네비게이션 아이콘 뿐 아닌 툴바나 기타 아이콘 대부분과 사이즈가 같았다.(장바구니 아이콘의 경우, 장바구니에 물건이 담겨있을 때 수량확인을 위해 아이콘의 가로폭이 더 길어짐) 툴바는 status bar 42px을 제외하고 45-50px 둘중 하나 였으며 검색창이 툴바에 들어있는 경우 50px, 툴바에 페이지 명과 아이콘이 들어가는 경우에는 45px 을 사용했다.

3)버튼 사실 버튼이 별로 사용되지 않고, 위의 4가지 버튼이 가장 많이 사용된다. 세로크기 40-50px 사이, 가로길이는 더보기 버튼 같은 경우에는 offset 크기를 제외한 345px을 전부 사용한다.

4) 컴포넌트 이 7가지의 상품 정보를 담은 컴포넌트를 반복해서 사용한다.

5) 컬러 로고의 색인 프라이머리 컬러 한가지를 제외하면 컬러가 전혀 쓰이지 않았다. 프라이머리 컬러도 툴바의 아이콘 등에 굉장히 제한적으로 들어가는데 커머스앱의 특성상 다양한 상품들을 보여주어 앱 차제의 색이 많이 쓰이면 자칫 혼란스럽게 느껴질 수 있기때문에 최대한 색을 제한한것 같다.

2.UI/UX분석

지그재그의 가장 중심적인 서비스는 큐레이션을 통한 개인화를 들 수 있다. 처음 회원 가입을 한 후 나이(세대) - 선호 스타일 선택을 하면 이 정보를 바탕으로 맞춤 브랜드와 광고, 비슷한 브랜드를 추천해준다. 이는 메인 페이지 구성에서 제일 눈에 띄는데 나를 위한 추천 아이템이나 내 취향의 쇼핑몰 추천을 가장 상위에 두어 사용자들에게 "나의 취향"을 분석하고 나만을 위한 상품을 보여준다는 사실을 강조하고 있다. 중요한건 이것들은 당연히 광고 라는 점인데, 보통 광고는 사용자들에게 거부감을 주지만 지그재그는 사용자들로 하여금 광고임에도 나에게 맞춰진 개인적인 경험 이라고 받아들일 수 있게 하는 시스템을 구축했다는 점이 아주 흥미로웠다. 더 섬세한 개인화를 위해 섬세한 필터링 기능을 제공한다. 세부 카테고리의 목록이 100개가 넘는데 사용자는 자신이 원하는 대로 세세한 필터링을 할 수 있다.

그리고 지그재그의 또 하나의 주요 기능은 아이템 찜하기-폴더화이다. 애초에 앱의 첫 아이디어가 다양한 온라인 쇼핑몰의 상품들을 한데 모아 보기위한 앱이었던 만큼 폴더링 기능을 이용해 간편하게 상품들을 저장해 둘 수 있다.

제품 상세 페이지를 따로 제작하지 않아도 되는 하이브리드 형태의 앱의 형태로 제품 상세페이지를 온라인 쇼핑몰의 자체 상세페이지로 연결해두면서 제작 기간과 리소스를 현명하게 아꼈다고 생각했다.

기존의 대형 은행 뱅킹앱은 인터페이스가 불편해도 참고 써야하는 사용자가 많아 편리한 UI/UX에 신경을 많이 쓰지 않았다는 느낌을 받았다.

그래서 핀테크 앱을 선택해 송금 프로세스의 UI가 어떻게 구성되어있는지 살펴보고 만들어보기로 했다.

1. 디자인 모킹

XD로 작업했으며, 사이즈는 아이폰 12 Pro 사이즈인 390px X 844px 로 작업했다.

총 5개의 페이지를 만들었다. 만든 페이지는 메인-송금프로세스-이용금액 순서로 뱅킹앱에 가장 핵심이 되는 서비스라고 생각해 선택하게 되었다. 마진과 패딩도 최대한 따라하려고 노력했다.

1) Margin

메인 마진은 15px 서브페이지의 마진은 22px이다. 메인화면은 세부화면보다 마진을 넓게 해서 더 크게 디자인한것을 볼 수 있다. 세부 마진은 메인은 5배수(10px), 서브 페이지는 2배수로 진행된다.

2) 툴바/서브텍스트

아이폰12의 상태바 크기인 41px을 제외하고, 툴바의 높이는 42px로 고정되어있는것을 알 수 있다.

3) 네비게이션 높이는 50px, 아이콘은 22px x 22px 로 고정이다. 각 항목별 크기는 50px X 50px 이다. 툴바와 네비게이션의 크기는 세로 40-50px사이, 네비게이션의 터치 범위는 가로세로 50px 로 모바일 앱을 디자인할때 터치 범위를 고려한 가장 효율적인 사이즈는 40-50px 사이임을 알 수 있었다.

4) 버튼 확인/보내기 등 주요 버튼의 세로크기는 53-55px 사이로 디자인 되어 있다. 역시 최적 사이즈인 50px 전후로 디자인되어 있는것을 확인 할 수 있다. 작은 사이즈의 버튼은 30-36px 사이로 세로 사이즈가 정해져 있으며 패딩은 15px/17px 로 디자인되어있다.

가장 작은 버튼은 뒤로가기 버튼으로 최소사이즈인 10px 로 디자인되어있다는것을 볼 수 있다.

5) 주요 컴포넌트

컴포넌트 내부 패딩 사이즈는 일정하게 유지했다. 메인에서의 은행 아이콘 사이즈와 송금 프로세스가 진행되는 과정의 아이콘 사이즈를 아이콘이 담고있는 정보의 중요도에 따라 다르게 디자인되었다.

6) 컬러

메인컬러 로고 컬러인 #1F4EF5 를 메인으로 다른 컬러를 사용 하지 않고 채도만 조절해 강약을 주는 방식으로 메인 컬러를 사용했다. 컬러의 종류가 한가지라 깔끔하게 보이면서 채도 조절을 통해 효율적으로 밸런스를 조절 할 수 있었다.

서브컬러 메인 컬러인 블루에 가까운 그레이컬러를 사용했다. 메인 컬러와 색감이 통일되어 안정감과 깔끔한 느낌을 준다고 느꼈다.

텍스트 컬러 역시 블루에 가까운 어두운 블랙-그레이 컬러가 텍스트 컬러로 사용 되었다. #000000의 완벽한 블랙 컬러를 사용하지 않았다.

7) 타이포 하이라키 가장 큰 텍스트는 30px - 에서 가장 작은 텍스트는 12px이다. 중간 텍스트 사이즈는 20px - 16px로 모바일 디자인을 할때 가독성이 가장 좋고 효과적인 텍스트 사이즈의 범위로 20-16px이 가장 적합하다는것을 알 수 있었다.

2. UI/UX 분석

토스를 사용하지 않아서 분석을 위해 계정 만들기부터 시작했는데 정말 잘 만들어진 앱이라는 느낌이 들었다.

핀테크 기업들은 기존의 대형 은행을 이용하던 사용자들을 이 서비스로 당겨오는게 중요하다. 그만큼 기존의 대형은행이 제공하지 않았던 편리하고 빠른 서비스를 제공함으로서 사용자들로 하여금 이 서비스를 선택하게 해야한다. 토스의 목적은 그곳에 있다고 느꼈다.

더 편리하고, 더빠르게

UX부분들도 좋은점이 아주 많았는데 예를들어 회원가입을 할때, 채워야하는 많은 빈 인풋박스 들을 보며 부담을 느껴 이탈할 사용자들을 최소한으로 줄이기 위해 단계별로 인풋박스를 띄우는등 UX 가 세심하게 디자인 되었고, 텍스트를 최소한으로 줄이고 이미지를 사용해 직관적인 이해를 돕는 부분이 좋았다.

하지만 이런 부분들은 나이가 있는 분들에게 오히려 서비스에 접근하는 벽을 만들 수 있을것 같았다. 깔끔하게 보여지는것은 좋지만 너무 많은 부분을 생략하고 사용자에게 익숙한 프로세스이니 이미 알것이라고 짐작하고 디자인된 부분들이 보였기 때문이다. 노령 연령층의 비율이 점점 더 높아지는 만큼 고령 유저를 고려한 디자인을 더 연구해야 하지 않을까 하는 생각이 들었다.

3. 마무리하며

아는만큼 보인다는 말이 있듯이, 아직 모바일 디자인에 대해 잘 알지 못해 디테일하게 분석을 하는건 힘들었다. 하지만 잘 만들어진 앱을 따라 만들어보며 적당한 크기와 구조에 대한 개념을 쌓기에는 토스는 아주 좋은 선택이었다.

다음은 데이팅앱을 따라 만들어보고싶다.

데이팅앱은 프로필을 만들고/매칭하고/채팅을 하는 등 여러가지 프로세스가 함께 이루어지는 서비스이기 때문에 이 각자의 프로세스들의 UI 가 어떤 규칙을 가지고 디자인 되었는지 궁금하다.

틴더와 범블은 두 앱은 창업자가 같은만큼 공통점과 차이점을 명확하게 비교 할 수 있을것 같다.

스터디를 진행하며 중점을 둘 부분은 크게 2가지 이다.

1. 디자인 모킹
2. 크리틱

1. 디자인 모킹

디자인 감을 익히는 것도 스터디의 큰 목표중 하나이므로 디자인을 따라 만들어 보며 크기와 마진에 대한 감각을 익힌다.

2. 크리틱

1. 이 서비스의 목표와 지향점 한줄로 정리하기
2. 디자인의 아쉬운점과 개선점
3. 사용자 분석
4. IA 분석

을 하면서 서비스의 큰 흐름을 보고 나의 언어로 정리하는법을 연습한다.

스터디 방식

비슷한 앱을 2개 분석 후 그 둘을 비교해보는 방식을 사용하고자 한다. 같은 목적을 가진 디자인이라고 할지라도 앱마다 각자의 차별점이 다르기 때문에 비교를 통해 어떤 디자인이 더 효과적인지 탐구 해 볼 수 있을것이다.

크리틱 방법을 참고할 사이트 그로우스 디자인 케이스 스터디 서비스 기획자의 앱 크리틱 탐구 - 디자이너 꽃비내린 브런치