디자인 입문 강의 6주차 숙제(카카오톡 앱 화면 분석)

이번 강의는 레퍼런스 분석에 대한 내용이다.

주어진 숙제는 카톡 앱 화면을 분석하는 것인데, 숙제를 하기에 앞서 강의 내용부터 정리하려 한다.

 

 

레퍼런스 분석이란?

여러 가지 사례를 상세하게 분류해 생각해 보고 도움이 될 만한 부분을 찾아보는 과정

• 레퍼런스 분석을 통해 스스로 생각하는 힘을 기를 수 있다.
• 레퍼런스 분석 과정을 통해 디자인에 대한 영감을 얻을 수 있다.
• 좋은 디자인을 구분하는 지식을 쌓을 수 있다.

 

 

 

레퍼런스 분석하는 방법

1단계. 화면 구조 분석

화면이 각각 어떤 요소들로 구성되어 있는지 분해해 보는 단계

 

예시) 파운데이션 → 엘리먼트 → 모듈 → 페이지로 나눈 수 있다.

• 파운데이션: 더 이상 세부 속성으로 쪼개지지 않는 가장 기본이 되는 요소
  • 예) 색상, 폰트, 아이콘 등
• 엘리먼트: 파운데이션이 모여서 만드는 요소
  • 예) 버튼, 뱃지, 탭 등
• 모듈: 엘리먼트가 모여서 만드는 요소
  • 예) 리스트, 캐러셀, 네비게이션 등
• 페이지: 모듈이 모여서 만드는 최종 화면
  • 예) 홈, 마이페이지, 장바구니, 회원가입 등

 

2단계. 디자인 원칙 기반 분석

UI 요소들을 디자인 원칙들을 기준으로 분석해 보는 단계

• 1단계에서 쪼개본 UI요소들을 디자인 원칙에 대입해 보며 사용성이 높은지 낮은지, 심미적으로 아름다운지 아닌지를 찾아내는 단계
• 좋은 점, 나쁜 점 모두 찾는다는 특징이 있다.
• 주장과 논리적인 근거 모두 찾아야 한다.

3 단계. 인사이트 정리

분석한 내용들로 얻은 인사이트를 정리해 내 것으로 만드는 단계

• 본인의 제품에 참고하거나 적용하면 좋을 만한 것들을 그룹화해서 정리하기
• 아쉬운 점이나 나쁜 사례의 개선점까지 생각하기

 

 

 

UX/UI 디자인 패턴

디지털 제품, 주로 앱이나 웹에서 자주 사용되는 디자인 요소

다수의 제품에서 공통으로 볼 수 있는 디자인 패턴을 사용하는 것이 좋다. (사용자는 학습된 내용을 바탕으로 행동하기 때문)

 

 

자주 사용되는 UX/UI 디자인 패턴

온보딩, 로딩, 검색, 회원가입, 리스트, 카드, 캐러셀

 

 

온보딩이란?

단어의 뜻: 조직 내 새로 합류한 사람이 빠르게 조직의 문화를 익히고 적응하도록 돕는 과정

제품에서의 뜻: 서비스를 처음 만나는 사용자가 기능을 잘 이해하고 가치를 느낄 수 있도록 돕는 과정

• 평균적으로 앱 설치 후 3일 이내에 DAU(24시간 동안 앱을 사용하는 순 유저)의 77%가 이탈한다고 한다.
• 고로 제품의 첫인상을 나타내는 온보딩이 체계적으로 잘 설계되어 있어야 한다.
• 온보딩의 종류: 튜토리올(첫 시작할 때 설명), 가치 보여주기(제품의 가치를 정리해서 보여주는 첫 페이지), 개인화 설정(취향, 맞춤 설정하기)

로딩이란?

앱이나 웹에서 화면이 그려지는 동안 사용자가 잠깐 기다려야 할 때 보여주는 화면

• 가능한 한 빨리 콘텐츠를 표시하기
• 콘텐츠를 로드 중이라는 내용을 제공하는 것이 좋다.
• 로딩의 종류: 스피너 아이콘(뱅글 뱅글 돌아가는)이나 애니메이션 활용, 프로그레스 바(로딩 바), 스켈레톤(화면의 콘텐츠가 빈 버전)

 

검색이란?

• 검색의 중요도에 따라 검색 기능 창의 사이즈와 위치가 다르다.
• 키워드 검색을 넘어 전반적인 정보의 탐색이 이루어 진다. (자동 추천, 맞춤 추천 등)
• Empty view 검색결과가 없을 때 빈 화면을 어떻게 채울지 고민해야 한다.

 

 

 숙제의 요구사항 

1. 카카오톡 5개의 메인 탭 화면이 어떤 구조로 되어있는지 분석하기

2-1. 좋은 사례 2개, 나쁜 사례 2개를 찾기

2-2. 디자인 원칙에 근거하여 좋은 이유와 나쁜 이유 작성하기

3. 나쁜 사례의 개선점 1개 이상 찾기

 

 

 숙제 

1. 5개의 메인 탭 화면을 분석해보았다.

친구 탭 화면에서의 특이한 부분은 화면을 밑으로 내리다 보면 우측에 ㄱ~ㅎ 가 적혀있는 빠른 이동 창이 생긴다.

쇼핑 탭 화면의 경우에서도 특이점을 발견했는데 화면을 밑으로 내릴 때는 검색창이 사라진다.

다시 화면을 위로 올리면 검색창이 생기고 일정 지점부터는 ^(맨 위로 올라가는 버튼)이 FAB 버튼으로 생성된다.

검색창이 켜지고 꺼지는 효과는 화면을 밑으로 내릴 때 쇼핑 상품을 보기에는 좋을 것 같지만 다시 화면을 올라가는 동작을 했을 때 전체 화면이 짧게 덜컹 거리는 효과가 생긴다.

 

 

2. 다음은 좋은 사례 2가지와 디자인 원칙으로 그 근거를 제시했다.

 

 

3. 다음은 아쉬운 사례 2가지와 디자인 원칙으로 그 근거를 제시했다.

 

 

4. 다음은 아쉬운 사례 중 하나를 개선해 보았다.