Weekly I learned: 4주차

 Overview

product card에 생각보다 많이 필요했던 properties

 이번 개인과제 작업을 하며 가장 많이 시간을 들인 컴포넌트를 말하라고 하면, 나는 두말할 것도 없이 프로덕트 콘텐츠 카드 UI라고 말할 수 있다. 얼마나 많은 변수가 있는지 여러 플랫폼을 돌아다니느라 눈알이 버석했다. 그런데, 정말 놀랍고도 슬픈 점은 이것보다 변수가 훨씬 많다는 사실이었다. 이번 프로젝트에서 내가 고려한 콘텐츠 카드 UI의 변수는 다음과 같다.

- 프로덕트 이름이 2줄 이상이면 어떻게 할 것인가? 두 줄 이상의 스페이스를 기본으로 컴포넌트를 제작하고 2줄 이상 넘어갈 경우에는 ... 처리를 한다.
- 브랜드 이름이 1줄 이상이면 어떻게 할 것인가? ...처리를 한다.
- 세일을 하지 않는 품목이 있다면 어떻게 할 것인가? 세일 요소의 불리언을 걸어 삭제한다.
- 서비스의 광고 품목은 어떻게 제시할 것인가? 카드 내에 AD 주의 아이콘 뱃지를 불리언을 걸어 첨부한다.
- 브랜드 이름, 프로덕트 이름, 세일 퍼센트, 가격, 별점 수, 별점 소수점은 프로덕트에 따라 다른데 그것은 어떻게 할 것인가? 모두 프로퍼티 처리를 하여 컴포넌트 외부에서 작성이 가능하도록 한다. 
- 가격, 퍼센트의 단위는 변경되지 않는데, 어떻게 처리할 것인가? 박스를 분리하여 오토레이아웃을 건다.

 
사실 boxchip은 badge를 잘못 적은 것이다. 백만개의 실수 중 하나이다. 방금 생각난 부분인데, badge는 프로덕트에 따라 여러 개 달릴 수도 있는데, 그렇게 되면 공간 설정을 어떻게 할 것인지에 대한 부분을 생각하지 못했다. 그리고 생각나지 못한 부분은 200만개 매우 많을 것이다.

실패한 Segmented Control

아래 메인 페이지에서 보이는 세그먼티드 컨트롤은 원래 메인 목차 역할을 하는 친구였다. 그러나 삭제하는 방향을 선택하였는데, 이유는 다음과 같다. 
 

1. 내가 실력이 부족해서 걸리는 부분에 따라 변화하는 설계를 하지 못하는 이슈

아무리 생각해보아도 스크롤 시 걸리게 하지 않고, 변화하는 프로토타입은 내 손으로는 불가능했다. 이 부분은 이번 과제에 첨가할 UI는 아니지만, 다음주에 튜터님께 여쭤볼 생각이다. 
 

2. 시각적으로 부산스럽고, 가독성이 떨어진다.

계속 위에 떠 있는 작은 물체가 메인화면을 이동하기 전 까지 계속 존재하는데, 눈에 띄는 불투명한 박스가 메인화면, 카테고리 박스와 접촉하면서 시각적으로 부산스러운 느낌을 내었다. 또한 나는 아무리 해도 메인화면에서 모두 잘 보이는 색상을 찾아낼 수 없었다. 그래서 unselected한 부분은 검정 처리를 하게 되었는데, 그렇게 되니 어두운 부분에서 저렇게 잘 보이지 않게 되었다. 
 마지막으로 글씨 크기도 가독성에 부정적인 영향을 주었다. 원래 14px의 글씨 크기를 가지고 있던 세그먼트 바는 안전영역과의 접촉 이슈로 인해 12px로 줄어들게 되었는데, 그렇게 되니 더욱 많은 컨텐츠가 밀집되었고, 아예 작은 글씨는 보이지 않았다.
 
따라서 삭제하고, 탭 바로 변경했는데, 훨씬 가독성 좋고, 유저들이 잘 볼 수 있을 것 같았다.
 

Dimed와 Elevation을 사용한 메인배너 설계 실패

 이것도 실패한 Carousel이다. 원래 뒤에 딤드 처리를 하고 앞에 카드형 배너를 중첩해 화면을 구성했는데, 이 경우에도 만족스럽지 못한 결과가 다량 발생하여 우측으로 변경했다. 좌측에서 우측으로 변경한 이유는 다음과 같다. 
 

1. 최근 이커머스 종합몰,전문몰 플랫폼 중에 이러한 방식을 쓰는 곳이 없었다. 

 다른 플랫폼(이마트몰,쿠팡, 마켓컬리,11번가,지그재그,에이블리 등)의 메인 배너를 모두 살펴본 결과 대부분의 플랫폼이 한 프레임을 두고 사진이 After Delay 되는 방식이었다. 또한 거의 모든 플랫폼에서 UI적으로 비슷한 컨트롤바를 가지고 있었는데, 이는 아쉽게도 구현하지 못했다. 나는 대신 쿠팡의 dot 컨트롤바를 컴포넌트로 구현하여 캐러셀에 첨가하였다. 
 

2. 다른 UI와 조화를 이루지 못하는 이슈

 처음에 차용한 것은 29cm의 메인배너 형태였다. 29cm의 메인 배너는 카드형 배너가 크기 변화를 하며 교체가 되는 형식이고, 내가 사용한 방식은 좌측 우측이 딤드 처리는 되지만 크기 변화는 되지 않는 형식으로 메인 배너를 디자인했다. 그런데 이 방식을 사용하니 문제가 생겼다. 딤드 처리한 화면이 나머지 UI들과 조화를 이루지 못하고 따로 놀게 되는 것이었다. 게다가 세그먼트 바도 합세하여 따로 놀게 되니 그야말로 거기만 한가위(가운데 큰)였다.
 

3. 그냥 내가 잘 못만드는 이슈

 말 그대로 내가 딤드 처리된 뒷쪽 화면을 제대로 구현하지 못해 원래는 29cm의 배너처럼 디졸브로 이동되어야 하는데, 캐러셀과 같이 이동하게 되는 이슈가 있었다. 이는 change to를 사용하여 구현하면 가능할 것으로 보인다.

 

HIG와 대조해 보며 깨달은 더욱 효율적인 컴포넌트 형태들

 내가 만든 컴포넌트들을 찾을 수 있는 만큼 HIG와 대조해 보았는데, 정말 바보같이 만든 것이 많았다. 그중에 가장 바보 같은 것은 List였다. List 속 박스의 이름을 몰랐는데 이름은 Row였다. 그리고 나는 컴포넌트만 만들고 그 위에 Header을 달았지만, 원래 컴포넌트 만들 때 Header는 같이 다는 것이다!!!!!!! 🥹 
 

Keep

• 프로퍼티에 대한 변수들을 찾는 연습을 한 것
• 모르는 부분에 대해 알 때까지 계속 찾아본 것

Problem

• 잘 하지 못하는 미생물 단계임에도 자꾸 욕심을 부리는 것
• 튜터님께 찾아갈 부분을 자꾸 인터넷으로 파는 것
• 자꾸 프로퍼티와 관련된 네이밍 실수를 하는 것

Try

• 프로퍼티에 대한 변수들을 찾는 연습을 한 것
  → 앞으로도 정진하자.
• 모르는 부분에 대해 알 때까지 계속 찾아본 것
  → 모르는 부분을 찾아볼 때 꼭 자꾸 까먹지 말고 블로그에 정리해두자.

• 잘 하지 못하는 미생물 단계임에도 자꾸 욕심을 부리는 것
  → 본질을 다시 되새기고, 다른 길로 새지 말자
• 튜터님께 찾아갈 부분을 자꾸 인터넷으로 파는 것
  → 파서 안 되는 부분을 자꾸 잊어버리지 말고, 튜터님 방에 찾아가자
• 자꾸 프로퍼티와 관련된 네이밍 실수를 하는 것
  → 가끔씩 작명소가 되는 버릇을 고치도록 하자