[UX/UI] 사전캠프 데일리 미션 W2-2 자주 사용하는 웹/앱 서비스 홈 화면 분석

1. 웹 서비스 선정 - 스픽

• 선정 이유
  최근 주변 지인에게 추천받아서 재밌게 사용하고 있는 영어 학습 어플.
  처음 봤을 때도 불필요한 요소들 없이 깔끔한 인터페이스와 직관적인 디자인들이 세련됐다고 느껴졌다.
  듀오링고, 말해보카 같은 앱들을 써봤지만 꾸준히 하기 힘들었는데 이 어플은 이상하게 자꾸 손이 간다. 스픽이 이를 어떻게 UIUX적으로 풀어 나갔는지 스터디하고자 선정해보았다.
  
  
• 서비스 소개
  원어민 없이도 원어민과 실제로 대화하는 것과 같은 경험을 제공하는 스픽의 AI 기술은 매일 10,000분 이상 수집되는 한국인의 영어 음성 데이터 학습을 통해 매일 더 정교해집니다.
  한국인의 영어 발음을 정확히 인식하는 스픽의 음성인식 모델은 0.1 초 이내의 빠른 인식 속도와 95% 이상의 높은 정확도로 제품 내 핵심 기능들을 구현합니다.
  나도 모르게 20분에 100문장 이상을 영어로 말하게 되는 스픽의 사용 경험은 인공지능 기술과 제품에 대한 집착으로 완성되었습니다.
  빠르고 정확한 음성 인식 퍼포먼스와, 화면 터치 없이도 대화가 진행되는 자동 인식 기능은 실제 대화와 같은 자연스러운 경험으로 몰입감을 높이고 더 많은 스피킹을 유도합니다.
  
  스픽의 각 수업은 '오늘의 수업', '스피킹 연습', '실전 대화' 의 3단계로 구성됩니다.
  이 과정을 통해 하나의 수업을 듣는 20분 동안 100문장 이상을 영어로 소리 내어 말하게 되고, 나도 모르는 사이에 배운 표현을 체득하게 됩니다.
  스픽의 “스마트 리뷰” 는 배운 영어 패턴을 자동으로 복습 항목에 저장하고, 리뷰 수업을 제공합니다.
  “간격 반복” 학습 알고리즘을 통해 최적화된 타이밍에 리뷰를 할 수 있도록 유도하여, 표현이 영구적으로 기억될 수 있도록 돕습니다.
  스픽의 ‘AI 튜터’ 는 원어민이 없이도 실제 원어민과 하는 것 처럼 자유롭게 AI 와 대화를 나눌 수 있는 기능입니다.
  일상에서 흔히 마주할 수 있는 200가지 이상의 다양한 상황과 주제로 대화하다 보면, 모국어를 배운 것과 비슷한 방식으로 자연스럽게 영어를 학습하게 됩니다.
  

2. UI/UX 디자인 분석

• 홈화면 구성

로그인 후 바로 보이는 홈화면

- 상단 GNB바는 환영 문구와 함께 친구 추천 리워드 안내페이지와 마이페이지만으로 구성되어 있다.
- 메뉴 탐색은 아래 하단 바에서 이루어지며, 코스 선택은 Next in Course 카드에서 선택할 수 있도록 해놓음
- 현재 듣고 있는 코스 / 시작해야 할 코스가 바로 앞에 가장 크게 위치. BI컬러로 우선순위를 선점. 학습을 바로 시작할 수 있도록 군더더기 없이 배치된 화면 구성 속 스타트 버튼이 가장 눈에 띈다
- 두번째로 위치한 Your Progress에서는 유저가 얼마나 앱에 꾸준히 들어 왔는지 불꽃 모양으로 표시해놓았다. 현재 얼마나 꾸준히 연속적으로 강의를 수강했는지만 보여주는 탭
- Jump-in lessons은 소리 내어 읽어야만 하는 정규 코스 외, 문장을 보고 단어를 선택하는 단순 퀴즈 형식 레슨이 배치 되어 있다

 

• 클릭 시 동작

1) 하단바 메뉴
2) W버튼 친구추천
3) 사람버튼 마이페이지
4) COURSE VIEW 정규 코스 탐색
5) START 수업 시작
6) day streak 연속 학습 일수 기록
7) jump-in lessons 단어 퀴즈

 

 

 

 

 

1) 하단바 메뉴 : 버튼별 각각 프리토킹, 탐색, 복습, 챌린지 탭 화면으로 이동

각 버튼별 화면

 

2) W버튼 친구추천 : 리퍼럴 혜택 링크 나타남

 

3) 사람버튼 마이페이지
: 총 학습 문장 개수, 총 학습 시간, 연속 학습 일수가 아이콘으로 나타남
   하단 카드 배치에는 연속 출석 달력, 북마크한 문장, 북마크한 단어, 친구 추천 링크 안내 페이지로 구성

 

4) COURSE VIEW 정규 코스 탐색
: 현재 선택 코스 진행 과정과 바로 학습이 시작 될 수 있는 버튼 배치
상단바에 다른 코스 탐색 탭으로 구성
 

 

5) START 수업 시작 : 바로 해당 강의 비디오 시작

 

6) day streak 연속 학습 일수 기록
: 연속 학습 동기 부여를 위한 문구 위치
일, 주차 별 개인 기록 표시
캘린더에서 연속 학습 일자는 빨간 하이라이트 줄로 표시

7) jump-in lessons 단어 퀴즈
: 버튼으로 누르는 형식의 단어 퀴즈를 배치. 반복적으로 다양한 예시 문장과 함께 카드 형식으로 나타남
일정 문항 수 도달 후 사용자가 퀴즈를 계속 할 것인지 떠날 것인지 결정하도록 함

 

• 인상깊은 UI/UX와 이유

1) 홈화면 학습 카드 : 직관적이고 깔끔한 학습 UI
홈화면 진입 하자마자 바로 당일 레슨을 누를 수 있도록 확실한 강조와 계층을 나눠주었음. 다른 곳에 시선이 분선되지 않고 집중 된 모습.
현재 수강하고 있는 코스 진도율을 바로 표현해 시각적으로 어디까지 수료했는지 알 수 있으며, 해당 코스의 소요 시간을 함께 보여줘 학습 시작 전 부담감을 덜어줌

2) 부드럽고 깔끔한 UI 통일성
 둥글둥글한 모서리 처리와 단순한 폰트 계층(굵기, 스타일), 한정적인 색 사용으로 깔끔하고 세련된 이미지를 만듦. 영어 학습 콘텐츠 이외 신경써야 하는 것들을 배제(듀오링고의 부엉이 캐릭터, 말해보카의 리워드, 코인 창 등)해 오로지 수업 콘텐츠로만 집중될 수 있는 간결함과 단순성

 

3. 개선 아이디어

1) 홈화면 W 리퍼럴 아이콘 배치

• 개선할 점
  : 홈화면에서 굳이 아이콘으로 자리를 차지하며 있을 필요가 있을까? 여타 다른 사이트가 상단바에 가지고 가는 알림센터(알림 설정), 마이페이지, 검색기능과는 다른 배치로 뜬금없는 느낌이 듦 + 로그인 직후 리퍼럴 안내 팝업 페이지가 바로 떠서 피로감 증가
• 개선 아이디어
  : 리퍼럴 버튼 삭제 혹은 알림 설정 버튼으로 변경.
  유저의 기존 백그라운드 학습성을 반영하기 위함

2)  Your Progress와 Jump-in lessons 카드 위치

• 개선할 점
  : 보다 많고 다양한 교육 콘텐츠를 접하는게 제 1목표인 나에게는 jumpin카드가 더 중요하다고 생각 됨. 홈화면 가장 끝단에 위치해 있어 손이 잘 가지 않아 아쉬움이 남음. 게다가 your progress의 경우 굳이 눌러 보지 않아도, 한눈에 내가 며칠만큼 연속 학습했구나라고 직관적으로 인지되어 그냥 넘겨 버리는 정보값. + 당일 첫수업 종료 후 streak 상태를 다시 한 번 보여주기 때문에 불필요한 중복으로 받아들여짐
• 개선 아이디어
  : Your Progress와 Jump-in lessons 카드 순서 변경
  굳이 클릭하지 않아도 직관적으로 정보가 인지 되는 streak 값이 맨끝단에 있어도 별무리가 없지만, 굳이 한번더 클릭해서 학습 콘텐츠로 넘어 가야 하는 jump-in의 경우는 보다 손이 잘 가는 2번째로 재배치