[TIL] Day46 #UI/UX

2022.06.29(Wed)

[TIL] Day46
[SEB FE] Day44

오늘은 어제 Figma Clone을 진행했던 사이트인 카카오톡의 UI/UX를 분석해보고 UI를 개선해보는 시간을 가졌다. 많은 사용자가 카카오톡을 이용하는 만큼 다방면에서 UI/UX가 뛰어난 편이었다. 👍

📎 UI 분석

1. KakaoTalk에서 사용중인 UI Design Pattern

• Tab: 친구목록, 채팅목록, 더보기... 탭
• Modal: 프로필 사진 클릭시 상세 프로필 화면 모달
• Toggle: 설정 탭에 존재
• Tag: 추천 키워드 및 단톡방에서 특정 인물 호출
• 무한 스크롤: 친구목록, 채팅목록, 채팅방 내용 스크롤
• 자동 완성: 단톡방 특정 인물 호출시 이름 자동 완성, 친구 검색
• 아코디언: 채팅방 공지 접기 및 생일인 친구, 즐겨찾기, 채널 등
• 캐러셀: 쇼핑 탭에서의 광고
• 드롭다운: 선물하기 탭에서 선물 카테고리 선택
• 페이지네이션: 쇼핑 톡딜박스 항목에 존재

2. Column Grid System 사용 여부

실제 카톡에서 사용했는지는 모르겠지만 Figma Clone에서 Column Grid는 따로 사용하지 않았다.
다만, Column Grid 대신 채팅목록을 보여줄 때 Row Grid (10줄)를 사용하였다.

📎 UX 분석

1. 피터 모빌의 UX 7요소 충족 여부

2. User flow

📎 사용성 평가

1. 제이콥 닐슨의 10가지 사용성 평가 기준 충족 여부

• 시스템 상태의 가시성: ⭕️ 사진, 동영상 전송 등에서 로딩 진행 상황 보여줌
• 시스템 & 현실 세계 일치: ⭕️ 픽토그램, 아이콘 많이 사용 / 쉬운 단어 사용(생일인 친구, 즐겨찾기 ...) → 읽기 쉬움
• 사용자 제어 & 자유: ⭕️ 실수로 전송한 메세지 삭제 가능 단, 삭제 취소는 못함
• 일관성 & 표준: ⭕️ 다른 메신저 앱과 비교하여 비슷한 UI로 구성
• 오류 방지: ⭕️ 채팅 메세지 삭제시 재차 확인
• 기억보단 직관: ⭕️ 최근 검색 저장 기능 존재
• 사용의 유연성 & 효율성: ❌ 모두에게 같은 기능 제공
• 미학적이고 미니멀한 디자인: ❌ 부가 기능 너무 많음-게임, 쇼핑, 선물하기, 메이커스, 헤어샵 ...
• 오류 인식, 진단, 복구 지원: ⭕️ 오류 원인 명시-전송 실패, 인터넷 연결 불안정 ...
• 도움말 & 설명 문서: ⭕️ 고객센터/도움말, 가이드 존재

📎 개선한 Figma Clone

어제 했던 Figma Clone 작업에 프로필 화면 클릭시 상세 프로필 화면이 모달창으로 나오도록 개선했으며, 더보기 탭 하단에 광고들을 캐러셀로 등장하도록 개선하였다.

---

🤑 자료구조 지식이 거의 무지한 상태에서 요즘 Coplit 문제를 풀려고 하니까 어떻게 풀어야 할지 접근이 불가했다,, 개념 찾아봐도 거의 블로그 글이 대부분이라 제대로 학습하기가 어려웠달까.. 그러던 찰나에 오늘 Udemy - 'JavaScript 알고리즘 & 자료구조 마스터클래스' 강의 세일하길래 혹해서 17,000₩에 구매했다. 열심히 듣자ㅏ💪

✅ 프로그래머스 Lv.1_문자열 다루기 기본 문제 품
☑️ Coplit-배열, 객체 부분 문제 다시 풀어보기
☑️ 한입 리액트 강의 JS 파트 강의 듣기
☑️ Udemy 알고리즘&자료구조 강의 - 트리 순회(깊이우선탐색) 부분 강의 듣기