2024.01.17.학습일지

디테일 보완이라는 새로운 목표

목표 설정의 이유 

 오늘 튜터님께 피드백을 받으며, 보완해야 할 점으로 '디테일 보완' 임무를 부여받았다. 확실히 1차 과제 속 내용물을 살펴보니, 프로토타입 플로우에 따라 다른 부분도 있었고, 머티리얼 디자인 가이드에 지양해야 하는 상황으로 나와있던 부분도 있었다.

 

 프로토타입 플로우가 총 3개(정상, 품절, 비회원구매)가 있었는데, 그중에서 비회원구매 플로우의 메인화면이 다른 플로우(정상, 품절) 이랑 다르게 수정 전 버전으로 되어있음을 확인했다. 이는 수정하여 2차 제출에 반영할 것이다. 

 

 머티리얼 디자인 가이드 Divider에서 보면 Full Width Diviers는 절제하며 사용해야 한다고 나와있는데, 너무 많은 디바이드라인은 인터페이스를 어지럽게 만든다고 되어있었다. (물론 단어 찾아보면서 까막눈처럼 한 것이다. 영어를 모른다.) 그런데 우측 내 작업물을 보면 3개 정도되는 리스트를 가지고 있으나 디바이드는 풀 라인으로 설정되어 연결감이 살짝 적고, 토막나있는 부산스러운 느낌이 든다. 그래서 이 또한 수정하여 반영할 생각이다.

좌측 출처: 머티리얼 디자인가이드 > Divider > Guidelines 우측: 내 작업물

 

 

목표 반영

 그래서 위 문제상황을 해결하기 위해 Full Width Divider를 Inset Divider로 변경하였다. 이렇게 되니 시각적으로 분절되어 보였던 것이 다른 섹션과는 분리되되 수량 섹션과는 연결되어 보이는 긍정적인 효과가 나타났다.

좌측: Before 우측: after

알게 된 것

서로 묶이는 컴포넌트는 Full로 채우는 형식 보다는 Inset한 방식이 효과적이다.

새로운 목표, 리뷰와 문의페이지 와이어프레임 제작하기

목표설정의 이유

 1차 과제 제출 시에 가장 아쉬웠던 부분은 상세페이지에서 필수 플로우로 동작해야 하는 페이지인 상품설명 페이지만 디자인했다는 것이다.내 디자인 화면에서는 스크롤 이동 이동 방식이기 때문에 디자인하지 않아도 문제가 없지만, 많은 플랫폼의 디자인(마켓컬리 등 제외)이 상세페이지를 구성할 때 상품설명, 상세정보, 리뷰, 문의가 원페이지 방식으로 구성되어 있어 내가 만든 페이지만 디자인하게 되면 문제가 생긴다. 그렇기 때문에 과제의 본래 의도는 리뷰, 문의, 상세정보 또한 구성했어야 하는 것이다. 이는 튜터님께서 말씀하신 디테일에 해당되는 부분이라는 생각이 들었고, 본래 과제 의도에 충실하기 위해 결이 비슷한 리뷰, 문의페이지부터 꼭 만들어 보겠다는 생각을 하게 되었다. 

 

시행착오

 보편적으로 어떤 구조를 가지고 있고, 나는 무엇을 어떻게 디자인해야 하는가. 항상 처음에 드는 생각이다. 나는 종합몰 플랫폼이 머릿속으로 그려질 만큼의 인사이트를 가지지 못한 사람이기 때문에 레퍼런스는 필수로 찾아야 했다. 내가 찾은 레퍼런스 종류는 '11번가, 마켓컬리, 쿠팡, 이마트몰, 네이버쇼핑'이었다. 

# 레퍼런스의 공통분모
## 리뷰

강조
- 구매 만족도 별점 섹션 (+ 별 수 퍼센트)
- 구매 만족도 키워드 분석 섹션
- 사진 및 영상 리뷰 섹션

일반
- 리뷰 총 개수 및 정렬(추천순, 최신순)
- 리뷰 사용자(아이디, 구매상품, 날짜, 별점, 신고버튼)
- 리뷰 본문(본문 사진 및 영상, 본문내용, 더보기 버튼)
- 리뷰가 도움이 되었나요? 확인 버튼 및 유도 텍스트

## 문의

상위
- 비정상적 상품 신고 공지 및 신고 버튼
- 상품 문의하기 버튼
- 비밀글 제외하기 체크박스
- 정렬(리뷰 분류순 예) 배송, 포장 등)

일반

공통
- 문의 사용자(아이디, 날짜, 답변완료 유무)
- 판매자 사용자(아이디, 날짜

분류양상(보편적 형태 없이 비등비등함)
- 클릭 시 뎁스 1개를 추가하는 방식
- 토글을 클릭해 해당 페이지에서 내용을 바로 보는 방식

 

 위의 내용은 레퍼런스 분석 후 리뷰, 문의페이지의 공통사항을 정리해 둔 것이다. 위와 반대로 보편적이지 않은 특이한 사항도 있었다.

 

 먼저 네이버 문의의 내 문의 보기 On Off 토글이다. 문의페이지 우상단에 위치해 있으며 사용자들이 많은 문의의 바다 속에서 내 리뷰만 찾아 볼 수 있도록 버튼을 만든 것이다. 또한 11번가 문의페이지의 문의종류별 나눠보기 설정이다. 생각보다 많은 플랫폼들이 해당 분류를 구현해놓지 않았다.

작업 반영

 나는 위의 사항을 바탕으로 와이어프레임을 구축중에 있다. 아래 사진들은 오늘 작업한 와이어프레임이다. 

 

 UXUI 디자이너는 협업이 필수라는 사실을 알면서도 솔직히 말해서 내 작업물을 공개하는 것이 아직도 두렵다. 옛날부터 내 본 성향이 내 실력에 과신하는 경향이 있어 내가 SNS나 커뮤니티에 작업물을 공개하고 사람들이 보는 순간 내가 작업물이 초라해보이고, 과신했다는 사실을 증명하는 것 같다. 그러나 오늘 튜터님 강의를 듣고 조금 생각이 바뀌게 되었다. 블로그는 내가 생각한 것과 고민한 히스토리를 어필하는 공간이라는 설명을 해주셨는데, 내가 한 작업물을 공개하는 것도 내 성장의 과정을 공개하는 것이라고 생각이 들었다. 이런 마음을 가지니 많은 용기가 되었다. 초라한 작업물이지만 앞으로도 꾸준히 내 작업물을 올려놓아야 겠다.

오늘의 작업 진행도

피그마 활용법 (1) 복습 (진행중)

개인작업 추가 와이어프레임 구상 (진행중)

 

특강 숙제: 디자이너의 글쓰기

 이 물건의 이름은 '유리빨대'입니다. 사람들의 플라스틱 빨대 사용을 막기 위해 제작되었죠. 제주도에 사시는 공예가분께서 한 풍 두 풍 불어 만든 유리 소재이며, 부드러운 빨대 표면을 통해 음료를 먹을 수 있습니다. 지구건강에 일조할 수 있지만, 세척이 불편해서 잘못하면 제 건강은 위험하겠네요.