[강의학습일지] UXUI 디자인 입문 6주차 숙제 - 레퍼런스 분석하기: 카카오톡

1. 화면 구조 분석
카카오톡에서 5개의 메인 탭 화면이 각각 어떠한 구조로 되어있는지 나눠보세요.

1. 친구 탭(메인)

 

2. 채팅 탭

 

3. 오픈채팅 탭

 

4. 쇼핑 탭

 

5. 더보기 탭

 

2. 디자인 원칙 기반 분석
좋은 사례 2개와 나쁜 사례 2개, 총 4개의 사례를 찾아서 디자인 원칙에 근거하여 작성해 보세요.

좋은사례

• 시각적 위계
  • 중요한 부분에 큰 글씨, 튀는 배경색으로 대비감을 줘서 눈에 띄게 만들었다.
• 근접성의 원리
  • 카테고리마다 여백을 줘서 별개의 그룹처럼 보인다.

나쁜 사례

• 균형
  
  • 양쪽이 대칭으로 맞으면 안정적이고, 비대칭이면 역동적이고 신선한 느낌이다.
  • 첫번째 캐러셀 카드는 옆으로 Swipe 할 수 있어 대칭이 맞지 않는다.
  • 두번째 카테고리 메뉴는 캐러셀 형태가 아님에도 불구하고 양쪽 대칭이 맞지 않고 오른쪽으로 치우쳐져 있다.
  • 세번째 섹션은 2분할로 양쪽 대칭이 맞는다.
  • 첫번째 캐러셀 카드의 시작점과 두번째 카테고리 메뉴의 시작점을 맞춘 것으로 보이나 양쪽 대칭이 맞지 않고 오른쪽으로 치우쳐져 있어 따로 노는듯한 느낌을 준다. 
• 시각적 위계
  • '카톡설명서' 텍스트가 더 강조되어야 할 것 같다. 카드 안의 텍스트가 굵은 글씨로 강조되어 시각적 위계가 맞지 않는다.
  • '내 도구'와 '카톡설명서'는 타이틀 제목으로 카드 안의 텍스트보다 크기가 크거나 더 강조되어야 할 것 같다. 혹은 카드 안의 텍스트 크기를 줄여 타이틀을 상대적으로 크게 보이게 해 대비감을 주는 방법도 있다.

3. 개선점 1개 이상 찾기
찾은 사례에 대해 개선 방향을 1개 이상 생각하여 적어보세요.

개선하기 (1)

• 쇼핑 탭의 균형을 개선한다면 양쪽 대칭이 맞아야 안정적으로 보일 것 같다.
• 현재는 캐러셀, 카테고리 메뉴, 2분할, 3분할, 다시 2분할, 다시 3분할 캐러셀로 너무 자주 바뀌어서 균형적인 레이아웃처럼 보이지 않는다. 분할이 달라지면서 직사각형, 정사각형, 다시 직사각형, 정사가형으로 콘텐츠 모양이 바뀌는데 좋은 형태가 아닌 것 같다. 차라리 하나로 통일하는 게 균형 있게 보일 것 같다.
• 쇼핑탭에서 제일 중요한 건 쇼핑인데 레이아웃이 자주 바뀌다 보니 콘텐츠 하나하나가 눈에 잘 들어오지 않는다.

개선하기 (2) 컬리 앱 참고

• 같은 커머스 형태인 컬리 앱을 참고하면, 컬리도 캐러셀 형태로 되어있어 왼쪽에 여백이 있다. 하지만 전체적으로 균형 있게 보이는 이유는 모든 카드가 3분 할로 되어있기 때문이다. 이런 식으로 콘텐츠의 균형을 맞춰야 한다.
• 컬리 앱과 비교해 보면 카카오톡 쇼핑탭은 이미지가 작다. 이미지의 크기를 좀 더 키워야 한다.