[TIL] 3주차_목요일

김민경·2025년 2월 6일

Today I learned

목록 보기

8/8

1. 디자인 카타

두 가지 UI를 보고 더 낫다고 판단한 UI를 선택 후 이유와 뒷받침할 근거를 찾는 과정.

하단 내비게이션 바의 홈 탭 디자인, 어떤 차이가 있을까요?

B 선택
이유:

카테고리와 서치 아이콘을 합쳐 놓아서 간단하고 깔끔하게 네비게이션 바를 변경
남성, 여성 처럼 페이지가 바뀌는 아이콘이 홈 탭 바로 위에 위치해서 혼란을 줄 수 있다 생각했는데 B안에서는 우측 상하로 변경
사용자가 최근에 본 상품을 마이페이지나 설정페이지에 들어가지 않아도 메인페이지에서 확인 할 수 있다.
심미적으로 더 깔끔해 보인다.
아이콘 밑에 탭의 이름을 넣어준 것이 사용자를 배려한 디자인 같다.
한눈에 봤을 때 B가 더 직관적이고 일관된 UI 라고 생각됨.
사용자가 사용하기에 많이 편리한 디자인 인 것 같음

A 선택하지 않은 이유

홈 탭 아이콘이 남성복 페이지면 M, 여성복 페이지면 W로 바뀌었던 걸로 기억하는데 이는 사용자에게
혼란을 줄 수 있다.
또한 홈탭 바로 위에 페이지 변경 아이콘이 있는 것이 사용자가 사용하면서 홈탭을 누르려다
잘 못 눌릴 수 있을 것 같다는 생각을 했다.
드로어 아이콘을 누르면 더보기 같은 매뉴얼 창이 뜰 것 같다.
카테고리가 열리는지 매뉴얼 창이 열리는지 기능의 이름이 적혀있지 않아 사용자가 예측하기 힘듦.,

주장을 뒷받침할 근거
실제로 무신사 앱을 개편한 디자이너분 께서는 "직관적이고 사용자가 쉽게 이용할 수 있도록 디자인 하셨다고 말씀 하셨다.
B의 디자인으로 개편을 한 이유에 스냅 기능을 무신사에서 활성화 시키기 위해서 라고도 생각하는데 실제로 무신사는 앞으로도 계속해서 새로운 영역으로 사업을 확장할 계획이기에 깔끔하고 직관적인, 편리한 디자인을 계속 할 것으로 보인다.

[마켓人싸] "덜어내고, 비워내고, 가볍게 하고"...무신사에 '새옷' 입힌 사람들
https://www.techm.kr/news/articleView.html?idxno=130699

2 개인과제-심화선택과제

프로토타입 제작하기

요구사항

필수 과제 1의 사용자, 문제, 문제를 해결할 아이디어가 분명하게 정의.
필수 과제 2의 레퍼런스 분석을 통해 문제를 해결할 아이디어의 근거를 탄탄히.

1. 해결할 문제 및 아이디어 정의와 근거 세우기

사용자

할인 혜택과, 이벤트를 놓치지 않는 자사 앱 이용자

문제

리뷰와 별점을 알 수 없는 앱 구조
결제창에 가서야 배달팁을 알 수 있는 앱의 불편함
매장을 선택할 수 없는 앱의 서비스 (BBQ 한정)

문제 해결 아이디어

배달팁의 경우 매장과의 거리가 어느정도 되는지 파악 후 비교 할 수 있도록 배달팁을 리스트에 기재.
bbq의 경우 아예 매장 선택이 불가능 했기에 배달 가능 지역 내의 매장 리스트 페이지 제작
배달 플랫폼의 비교 시스템, 리뷰 시스템 도입하여 리뷰와 별점을 리스트에서 볼 수 있도록 제작
거리순, 별점순, 리뷰 많은 순, 즐겨찾기 한 매장 등 사용자가 매장을 선택 하는 데에 있어 선택지를 줄여줄 수 있도록 필터 기능 도입
bbq의 경우 파레토 법칙에 의해 신메뉴 추천메뉴가 스크롤 가장 하단에 위치하여 사용자의 눈에 잘 띄지 않도록 구성 되어 있었음. -> 신메뉴, 추천메뉴 기능 활성화 및 사용자의 눈에 잘 띌 수 있도록 해야함

→ 사용자가 편리하게 검색, 주문, 결제까지 원활히 이루어 질 수 있도록 기본적인 기능 도입을 우선적으로 해결 해야함

사용자에게 “자사앱도 편리해요”라는 이미지를 줄 수 있도록 노력해야함

근거 기사 내용 中

“배달의민족과 같은 배달앱들은 사용자 편의를 중심으로 빠르게 개선이 이루어진 반면 자사앱들은 이러한 속도를 따라가지 못해 '사용하기 불편한 앱'이라는 인식이 고착화됐다. 구글플레이스토어에서 교촌치킨앱에 대한 소비자 리뷰를 보면, 다수의 사용자들이 '오류', '이용 불편'을 이유로 저평가 후기들이 줄을 잇고 있는 것이 현실이다.”

출처 : 뉴스저널리즘(https://www.ngetnews.com)

2. BBQ 자사 앱 메인화면 개선 프로토타입 제작

<기존 메인화면>

프라이머리 컬러로 보이는 레드 컬러를 전체적으로 사용하여 대비감이 없어 시각적으로 화면의 구성요소가 한 눈에 들어오지 않는다.
상단에 BBQ 주문, BBQ 몰 이라는 슬라이더 형식 아이콘이 있지만 화면안에 BBQ MALL바로 가기 버튼이 있는 것은 사용자에게 혼란을 줄 수 있다 생각하였다.
‘새로 나왔어요’ / ‘이거 어때요?’ 라는 문구와 함께 슬라이드 형식으로 메뉴가 보인다.
하지만 사용자가 주문을 하려고 앱을 켰을때 홈 화면에 이미 배달, 포장 버튼이 있기 때문에 굳이 스크롤을 하여 내려 볼 것 같지 않다.
‘추천 메뉴’ 기능을 가진 요소들은 아주 적절한 구간에 배치가 잘 되어있어야 기능을 발휘한다고 생각하는데 BBQ에서는 홈 화면 하단에 추천 기능을 넣은 것이 아쉽다.
텐퍼센트 커피 처럼 홈화면을 간단하게 만들어 줄이고 굳이 스크롤 하지 않아도 홈화면에 들어가자마자 추천메뉴가 뜨거나 상품 상세페이지에서 곁들이면 좋은 추천메뉴로 나오는 것이 나앗을 것 같다.

<어제자 작업 완료 화면>

사실 어제 작업 했던 작업물에서 조금 많이 바뀌었다.
작업을 하는 도중 '내가 제대로 하고 있는게 맞을까'라는 생각이 들었고 여러 사람의 의견이 궁금했기에 작업물을 캡쳐하여 지인들만 볼 수 있는 인스타그램 스토리에 설문을 올렸다.

많이들 개선된 UI인 2번을 골라주었지만 1번을 고른 몇명의 의견이 너무나 궁금했다..

1번을 고른 이유는 대체로 자사 앱을 이용하는 목적이 "주문" 이기 때문에 주문 버튼이 한 눈에 바로 보이는 것이 좋아서 였다.
의견을 듣고 바로 튜터님께 달려가서 피드백을 받고 질문을 드렸는데 튜터님 께서도 "홈 화면에 주문하기 같은 픽스 스크롤 버튼이 있는건 조금 위험할 수 있다, 버튼 뒤 내용이 안보일 수 있기 때문에 권하지 않는다" 라고 말씀해주셨다.
의견이 있었던 BOTTOM NAVIGATION BAR에 대해서도 여쭤보았는데 on/off 형식으로 만들던지 아님 컬러를 전부 블랙-그레이 톤으로 바꾸는게 나을 것 같다는 피드백을 받았다
또, 개체들 간의 패딩값도 조금 줄이는게 한 묶음으로 보여 더 깔끔 할 것이라는 피드백도 주셨다.
프레임간 갭이 너무 크면 텅 빈 느낌을 받기 때문에 해당 갭 값도 줄이기로 결정했다.

<개선 후 프로토타입 화면>

최최최최종 완성본 메인화면 프로토타입이다..
어제 작업했던 메인화면 작업물은 나로서도 텅 빈 느낌이 조금 들어서 더 넣을 것이 없다고 생각했는데 튜터님께서 정말 콕 집어서 알려주셨다..!
플로우에 대해 조금 더 배운 것 같다
컴포넌트 간의 상호작용을 생각하고 플로우를 그려볼 것! < 앞으로 해나가야 할 숙제가 생겼다
내 의견 보다 사용자가 사용했을 때를 정말 중요하게 생각해야한다는 점도 배웠다.

3. BBQ 자사 앱 매장리스트 프로토타입 제작

기존 BBQ 자사앱의 매장 리스트 관련 문제점
- 플로우: 앱 작동시 주소연결 창 → 자동으로 가장 가까운 매장 연결
- 자주 사용해보신 팀원 분의 의견: 매장에서 거리가 멀다고 주문을 취소한 경험 多
- 매장을 변경하려면 고객센터에 문의 후 주문 가능
- 업주 측에서도 해당 문제점이 가장 스트레스 받으신다고 하심

<해결방안 도입 후 프로토타입 제작>

매장 선택 리스트 페이지

가장 근본적인 문제 (매장 선택할 수 없음)를 해결하기 위해 매장 리스트를 프로토타입으로 제작하였다.
필터 바에는 HORIZONTAL 스크롤 기능을 추가하여 좌우 스크롤이 가능하도록 설정하였다.
리스트 프레임에는 VETICAL 스크롤 기능을 통해 상하 스크롤이 가능하도록 설정 하였다.
여기서도 튜터님이 의견을 주셨는데 기존에는 리스트 개체들의 우측에 리뷰 보기 라는 버튼을 생성해놨었다.
튜터님께서 클릭해서 매장 상세페이지 가면 리뷰를 볼 수 있는데 리스트에 리뷰보기를 넣어둔 이유를 잘 모르겠다 라고 하셔서 과감히 삭제하였다.
유저들이 불편하다고 했던 리뷰와 배달팁이 기재 되어 있지 않아 매장 간 비교를 할 수 없다라는 의견을 개선하여 리스트 페이지에서 바로 별점과 배달팁, 리뷰 갯수를 볼 수 있도록 제작하였다.