UX/UI 카카오톡 화면 구조 분석 / 디자인 원칙 기반 분석

📌 [친구] 탭 화면

🟢 좋은 사례	🔺 나쁜 사례
• 시각적 위계를 지켜 내 프로필 썸네일 사이즈 >친구 프로필 사이즈 • 프로필 썸네일은 좌측에 수직적으로 배열, 멀티프로필과 선물하기   버튼의 경우 수직적으로 배열하되 컬러로 구분 가능한 차이점을 준다.	• 펑과 광고배너 영역이 친구 목록을 볼 수 있는 영역을 차지하고 있어    친구목록을 확인할 수 있는 주 기능에 불편함을 준다.

✍️ UX 비주얼 디자인 원칙의 위계와 균형 중요한 순서에 따라 시선의 흐름이 이동하도록 디자인한다. 디자인 요소 간에 적당한 배열이나 비율을 준다. ✍️ 힉의 법칙 의사 결정 시간을 줄이기 위해 선택지의 개수를 최소화하라.

 

📌 [친구] 탭 화면

🟢 좋은 사례

• 스크롤하면 더 많은 채팅 목록을 볼 수 있음을 알 수 있다. • 읽지 않은 채팅은 붉은 배지로 표시하여 강조한다. ✍️ UX 비주얼 디자인 원칙의 균형과 대비 디자인 요소 간에 적당한 배열이나 비율을 주는 것으로 수직이나 수평의 가상의 축에 비슷한 양의 시각적 정보가 배치되도록 한다. 눈에 띄게 구별되도록 강조하기 위해 두 요소 간의 차이를 둔다.

📌 [오픈채팅] 탭 화면

🟢 좋은 사례	🔺 나쁜 사례
• 태그를 활용해 사용자 맞춤으로 추천 채팅방을 알려준다.	• 채팅목록에 채팅 엘레멘트와 같은 스타일로 광고배너가 있어 사용자가 오인지할 경향이 있다.

✍️ UX 비주얼 디자인 원칙의 균형 디자인 요소 간에 적당한 배열이나 비율을 준다. ✍️ 게슈탈트 심리학 폐쇄성과 연속성의 원리 공백이 있더라도 틈이나 간격을 메워서 닫힌 형태로 인식하려는 경향

 

📌 [쇼핑] 탭 화면

🟢 좋은 사례

• 강조하고자 하는 쇼핑 콘텐츠의 경우 썸네일의 크기를 확대해 시각적 위계를 만들고    좌우로 드래그하여 콘텐츠를 보도록 유도하여 다양한 콘텐츠를 빠르게 볼 수 있다. ✍️ UX 비주얼 디자인 원칙의 위계와 균형 중요한 순서에 따라 시선의 흐름이 이동하도록 디자인 하는 것 ✍️게슈탈트 심리학 폐쇄성과 연속성의 원리 공백이 있더라도 틈이나 간격을 메워서 닫힌 형태로 인식하려는 경향

📌 [더보기] 탭 화면

🟢 좋은 사례

• 카카오페이 지갑 영역은 노란색으로 강조하여 메뉴 섹션과 한 눈에 구별된다. • 주요 메뉴 섹션의 아이콘은 유사한 스타일로 제작되어 하나의 그룹이라는 느낌을 준다. ✍️ UX 비주얼 디자인 원칙의 시각적 위계와 대비 중요한 순서에 따라 시선의 흐름이 이동하도록 디자인 하는 것, 눈에 띄게 구별되도록 강조하기 위해 두 요소 간의 차이를 두는 것 ✍️게슈탈트 심리학 유사성의 원리 크기나 형태, 방향, 색 등의 특성이 비슷한 것끼리 묶여서 지각하려는 경향, 모양이 유사한 컴포넌트는자연스럽게 하나의 그룹이라는 느낌을 준다.