3.실제 사이트의 UI/UX 분석해 보기

서비스 기획 및 분석 중 관심있는 사이트의 UI/UX를 클론 해서 작업해 보는 시간을 가졌습니다.

금융앱 토스(Toss)의 공식 홈페이지 모바일 버전을 클론해서 작업해 보았습니다.

toss.im의 모바일 버전을 클론 해보았다.

 정신없이 Figma로 만들기 바빴지만, 작업하면서 UI/UX에 대해서 많은 생각을 할 수 있었고 토스 홈페이지 UI의 개인적으로 좋은 점과 아쉬운 점 또한 생각해보게 되었습니다.

그래서 이번에는 배운 내용을 바탕으로 토스 홈페이지의 UI/UX에 대해 분석해봅니다.

•해당 UI에서 사용중인 디자인 패턴

     •무한 스크롤 - 메인 화면에서 무한스크롤을 통해 사용자에게 연속적으로 정보전달

     •마우스 휠 이벤트 - 화면 스크롤시 애니메이션을 실행 시키며 정보전달

     •탭 - 메인 화면 좌측 상단

     •자동완성, 페이지 네이션 - [탭 -> 자주 묻는 질문] QnA 검색 기능에 활용

•컬럼 그리드 

   모바일 기준으로 4 컬럼을 적용

 

•피터 모빌의 벌집 모형

유용성 [10점]

- 사용자에게 토스앱에 대한 정보를 전달 한다는 홈페이지 본연의 목적과 기능을 무한 스크롤과 휠스크롤 이벤트+팝업 애니메이션을 통해 몰입감 있게 잘 전달

- '고객센터','토스인증서' 등의 부가기능이 필요한 사용자를 고려해 탭으로 해당 기능을 분리해서 맞춤형 정보 제공

- '앱 다운로드' 버튼을 통해 사용자가 토스 앱을 편리하게 바로 받을 수 있도록 고려

 

사용성 [7점]

- 모바일을 기준으로 UI가 작성되어서 인지 PC로 해당 화면을 볼 시 휠 스크롤 이벤트가 모바일 대비 끊기면서 작동되는 것을 알 수 있습니다.

- '회사소개'텝으로 진입시 '토스 인증서'가 아닌'공동 인증서 관리'로 바로가기 탭이 변경 되어 있어서 특정 사용자에게는 '실수'유발 가능

- 무한 스크롤 시 항목에 대해 설명하는 텍스트가 과다하게 사용자에게 노출되는 경향

 

매력성 [10점]

- 무한 스크롤을 통해 통일된 디자인 언어에 맞추어 다양한 디자인 패턴들이 사용자가 홈페이지의 정보 전달에 몰입 할 수 있게 해주고, 토스 특유의 동글동글한 감성적인 디자인을 통해 매력적인 UI를 보여줍니다.

- 어려운 금융앱 홈페이지를 이런 식으로 '간편하게' 만들었다는 부분이 충분히 매력적

 

신뢰성 [10점]

- 실제 앱 화면과 사실을 바탕으로 한 내용만을 사용자에게 전달 하고 있다.

 

접근성 [8점]

- 토스의 핵심 키워드인 '간편함'에 맞추어 홈페이지를 제작하다 보니 노년,특정 장애인들을 위한 배려가 다소 부족한 부분이 있습니다. 다만, UI를 맞춤형으로 제공하기에는 다소 제약이 따른 다는 점을 고려해야 합니다.

 

검색 가능성 [10점]

- '고객 센터', '자주 묻는 질문' 탭에 검색기능이 잘 구현 되어 있다.

 

가치성 [10점]

- 해당 홈페이지는 사용자에게 ‘토스 앱에 대한 정보 전달 및 특정 부가 기능 제공’이라는 기본 기능을 잘 수행 하고 있고 이를 브랜드 만의 통일된 디자인 언어로 잘 나타내고 있기에 높은 가치를 사용자에게 제공

•토스 홈페이지의 User Flow

 간략하게 그려본 토스 홈페이지의 User Flow이다 그려보고 느낀 점은 다음 페이지로 넘어갈때 새로운 창에서 생성되도록 구성되어 있어서 이전 페이지로 돌아가는 Flow가 없다는 점을 알게 되었다. 이점이 UX측면에서 마이어스 요소로 작용할 것으로 생각 되어 아쉬움이 남는다.

 

분석하고 보니

 분석을 마치고 보니 브랜드 대표 홈페이지의 UI를 브랜드 디자인 언어와 일관성 있게 유지하고 사용자가 직관적으로 이해 할 수 있게 디자인 한다는 것이 얼마나 어려운 일인지 팍팍 느껴졌습니다. 이공계 출신이다보니 디자인쪽으로는 지식이 없는 제가 보기에는 토스 홈페이지는 프로의 영역이라 대단하다는 생각만 듭니다. 토스 홈페이지 뿐만 아니라 그동안 자연스럽게 이용하던 구글,유투브,OS 등의 UI/UX에 대해서도 다시 생각해보는 계기가 되었다.

추후 제가 개발에 입문을 하게 될지는 모르겠지만 이런 고민을 해볼 수 있어 좋았습니다.