👩‍💻 카카오톡 화면 분석하기

화면 구조 분석 → 디자인 원칙 기반 분석 → 개선점 찾기 순서로 분석해 보세요

(출처 : 내 핸드폰 카카오톡)
🙈 개인정보는 모두 가렸습니다

카카오톡은 크게 친구 목록, 채팅, 오픈 채팅, 쇼핑하기, 더보기 이렇게 5가지의 메인 탭으로 나뉘어져있다.

5개의 화면에 공통으로 들어간 UI 요소는 상단의 GNB와 하단의 내비게이션 바이다.

GNB에는 지금 어떤 화면에 위치하고 있는지 알려주는 텍스트와 2-4개의 메뉴 아이콘을 추가하고 있다.

하단의 내비게이션 바를 이용하여 원하는 화면으로 바로 이동이 가능하다.

1️⃣

화면 구조 분석

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

친구

친구 목록을 확인할 수 있는 페이지.

프로필을 업데이트 한 친구, 새로 추가된 친구, 생일인 친구 목록이 상단에 위치하여 가장 먼저 눈에 들어온다.

또한 리스트 아이템의 너비를 화면 너비와 같게 적용하여 꼭 프로필 아이콘을 클릭하지 않아도 선택이 가능하다. (피츠의 법칙)

게슈탈트 심리학의 폐쇄성의 원리를 적용하여 업데이트 한 친구 목록이 가로로 스크롤 될 것이라는 것을 알 수 있도록 하였다.

채팅

내가 참여한 대화 목록들을 확인할 수 있는 페이지

친구 페이지와 마찬가지로 리스트 아이템의 너비를 화면 너비와 같게 적용하여 꼭 아이콘을 선택하지 않고도 채팅방으로 이동할 수 있다. (피츠의 법칙)

오픈 채팅

이 페이지에서는 내가 어떤 오픈 채팅방에 들어가있는지 확인할 수 있고 원하는 주제의 오픈 채팅방에 들어가거나 새로운 오픈 채팅방을 생성할 수 있다.

스크롤을 더 내려보면 오픈 채팅방의 주제를 선택할 수도 있고 '최근 대화가 많은 방' 등 다양한 선택지를 제공한다.

💡
핸드폰의 언어 설정이 불어로 되어있어서 상단 GNB의 텍스트가 아이콘까지 넘어가있는 것을 확인했다.

쇼핑하기

카카오톡 쇼핑 기능 페이지

톡딜, 라이브 혜택, '카톡 친구가 많이 구매한 상품 TOP 100' 등의 다양한 카테고리에서 상품을 소개한다.

이 페이지 역시 게슈탈트 심리학의 폐쇄성의 이론이 적용되었다.

더보기

카카오톡 사용에 있어 필요한 기능들을 한 곳에 모아놓은 페이지

스크롤을 더 내려보면 카카오톡 사용법과 카카오톡 내의 공지사항 등 다양한 편의 기능들을 제공한다.

2️⃣

디자인 원칙 기반 분석

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

좋은 사례 1.

화면 곳곳에 게슈탈트 심리학의 폐쇄성의 원리를 적용하여 가로 스크롤을 배치하였다.

좋은 사례 2.

앞서 언급했듯이 피츠의 법칙이 잘 적용되어 인터렉션 요소의 크기가 크고 요소 간의 여백이 적절히 설정되어 있어 선택이 정확하고 쉽다.

나쁜 사례 1.

오픈 채팅	쇼핑

오픈 채팅과 쇼핑 탭의 스크롤을 더 내려보면 정말 많은 컨텐츠의 목록을 볼 수 있다.

힉의 법칙은 적용이 안 되어 선택지와 내용이 너무 많고 빽빽하게 배치되어있어 답답하게까지 느껴져 잘 안 들어가게 된다.

나쁜 사례 2.

생각보다 광고의 스케일이 다른 UI 요소들보다 크게 느껴진다.

여러개의 작은 파운데이션들이 모여있어 빽빽하게 보이는 반면 광고 이미지는 여백이 많아 스케일이 그리 크게 적용되지 않았음에도 불구하고 더 크게 느껴진다.

3️⃣

개선점 1개 이상 찾기

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

친구 목록 페이지에서 모든 목록들을 닫아놓은 모습이다.

이렇듯이 광고를 확인하고 덮어 안 보이게 하는 기능을 추가하거나 쇼핑하기 페이지에서만 볼 수 있도록 광고의 수를 줄인다.

🎙️소감

드디어 디자인 입문 강의를 완강했다.🎉

UI/UX가 무엇인지 대략적으로만 알고 강의를 듣기 시작했는데 디자인 실무 프로세스, 디자인에 실제로 적용되는 디자인 원칙 등에 대해서 배울 수 있어서 정말 유익했다.

특히 실제 사례를 찾아보기 위해 내 핸드폰에 깔려있는 앱들을 살펴본 것이 재밌었다.

이번주에 학습한 내용들을 잘 숙지하여 다음주에도 화이팅하도록 하자🔥🔥