개인과제 : 가상의 커머스 앱 UI 설계 및 프로토타입 제작(2)

두 번째 개인 과제가 끝났다. 이번 과제는 커머스 앱을 분석하고 역설계한 후, 가상의 커머스 앱 디자인을 하는 것이었다. ㅌ 튜터님은 생필품, 식품과 같은 단기적 소비재를 다루는 커머스 서비스는 어떠한 공통점과 차별점을 가지고 있는지 확인하고, 똑같은 목적으로 유사한 제품군을 다루는데 화면흐름이 전부 다 다른 이유를 클론디자인과 역설계에서 찾아내야 한다는 미션을 주셨다. 의식하지 않고 지나가던 화면들, 오류가 나던 화면들을 고민해보는 훈련이라고 하셨는데, 확실히 평소에 무심코 지나가던 화면들을 다시 한번 살펴볼 수 있는 기회가 되었다.

정해진 시나리오 : 홈 화면, 유제품 카테고리를 지나 우유를 장바구니에 담는 유저 플로우

 

먼저 국민 커머스 앱인 쿠팡 어플을 찾아보았다. 지난번 글에서도 언급했지만 쿠팡은 다이얼로그, 바텀시트를 노출하는 대신 장바구니 담기버튼을 누르는 횟수에 따라 자동으로 수량이 늘어나게 만는다. 이 UI에 익숙해지면 상세페이지나 장바구니에서 매우 빠르게 수량 추가를 할 수있어 좋아보이지만, 물건을 완전히 빼거나 수량 감소를 원할 때에는 조금 번거로워보였다. 더할 땐 빠르고 뺄 땐 어렵다니, 정말 커머스 앱다운 선택이었다. 편리하긴 하지만 생각을 재고할 시간을 주지 않는 것이 아쉬워서 내 앱의 디자인을 할 때에는 이 방식을 쓰지 않았다.

 

다음은 컬리의 앱 화면을 분석했다. 컬리는 브랜드 자체가 식품에서는 잘 사용하지 않는 보라색을 사용해서 독특하고 차별점이 있었다. 전반적으로 여백과 행간을 큼직하게 주고, 각 섹션의 타이틀을 강조하고 일관적으로 스타일을 유지해 다른 어플보다 깔끔하고 정돈된 이미지였다. 컬리는 쿠팡과 다르게 장바구니에 담기 전 수량을 1 단위로 추가, 삭제할 수 있도록 하고 목록 페이지에서도 담기 버튼을 누를 수 있게 해두었다. 주기적으로 구매하는 상품이 있다면 굳이 상세페이지까지 들어와서 보지 않고도 담을 수 있게 배려해준 것 같아서 좋았다. 장점이 마음에 들어서, 이번 디자인에는 컬리의 디자인을 가장 많이 참고했다.

 

SSG도 컬리와 같이, 장바구니에 담을 때 수량을 1 단위로 조절할 수 있게끔 바텀시트에 버튼을 노출시켰다. 목록 페이지에서는 찜과 장바구니 버튼을 누를 수 있으나 버튼의 크기가 다소 작은 편이었다. SSG에서 특이한 부분은 리스트 화면이었는데, (컬리에 비해) 다루는 물건의 범위가 넓어서 그런지 유제품의 상위 카테고리, 동일한 레벨의 카테고리, 하위 레벨 카테고리를 모두 노출시켰다. 우유라는 제품의 특성에 따라서인지 브랜드라는 분류도 있었다.

 

저번 과제에서 컴포넌트의 재사용이 아쉽다는 이야기를 들어서 이번에는 컴포넌트를 만들 때 조금 더 신경 써서 진행했던 것 같다. 각 페이지마다 담고있는 내용은 비슷비슷해도 '가장 강조해야하는 것'은 달라서 페이지를 옮길 때마다 스타일을 달리하는 데에 신경을 썼다. 타이포 활용은 컬리의 디자인을 많이 참고했는데, 더 중요한 것과 덜 중요한 것이 확연히 분리되어 보이는 효과가 있어서 클론을 하면 크게 도움이 될 것 같았기 때문이다. 깔끔하고 보기 좋은 화면이 나와서 만족스러웠다. 

 

이번 강의 프로토타입 파트에서 배운대로 컴포넌트와 인스턴스 간에도 프로토타입의 변화를 주어 마우스를 올렸을 때, 혹은 클릭했을 때 모습이 달라보이게 만들었는데 작은 요소지만 화면에 조금 더 활기를 주는 것 같아서 좋았다.

 

완성된 화면

이번 과제의 조건인 [홈 화면], [목록 화면], [상세 화면]과 [상세]품절 상태를 만들고 추가적으로 장바구니 화면과 주문/결제 화면까지 만들었다. 가로 375픽셀 사이즈의 화면에 프로토타입까지 구현하는 것이 목표였기 때문에 스크린 크기에 따른 반응 부분은 조금 내려놓고... (ㅋㅋ) 사용자 여정에 맞춰 최대한 간결하게 물건을 구매할 수 있도록 신경써 보았다. 장바구니에 물건을 담고 주문서를 작성하려는데 '로그인이 필요하다' 라며 행동을 가로막아서 짜증을 냈던 경험들이 많았어서, 고민 끝에 로그인 관련 팝업을 최대한 뒤쪽에 배치했다. 화면 배치 순서를 여러번 고치면서 이런저런 고민들을 많이 했는데, 생각나는대로 화면에 메모해두었더니 과정이 눈에 보여서 재미있다.

 

 

완성된 프로토타입

프로토타입은 조금만 할 줄 알아도 엄청난 효과를 내는 것 같다. 이번 과제에서는 바텀시트, 다이얼로그 등의 모달 요소를 써볼 수 있었는데 애니메이션과 함께 화면이 움직이는 모습을 보니 무척이나 뿌듯했다. 직접 만든 화면을 움직이는 것은 이미 만들어진 화면에 프로토타입 실습을 할 때와는 완전히 다른 느낌이었다.

Sticky 요소와 Fixed 요소에 대한 고민도 할 수 있었다. 원래 처음에는 세로 712픽셀 구간에 네비게이션 바를 고정해놓아 뒤쪽 화면이 가려져 보였었는데, ㅁ 튜터님을 찾아가 여쭤보니 여러 사람이 협업하는 실제 작업환경에서는 프로토타입 프리뷰를 하지 않아도 한눈에 화면 전체를 확인할 수 있도록, 작업화면 맨 밑에 네비게이션 바를 두고 컨스트레인츠 속성을 left-right, bottom으로 준다고 하셨다. 컨스트레인츠에 대한 개념이 별로 없었는데 쉽게 설명해주셔서 바로 이해할 수 있었다. Sticky 속성을 지닌 바는 0, 0 좌표에 붙는 속성이 있어서 화면 중간에 걸려있는 탭을 스티키로 붙이려면 화면 위쪽부터 영역을 잡아주어야 한다는 말씀도 하셨는데, 이건 실습해보지 않아서 잊어버릴까봐 적어둔다. 피그마를 다루는 중간에 실시간으로 기능 업데이트가 되어서 오토레이아웃에 그리드 기능 등이 추가되었는데, 튜터님께서 보는 즉시 기능에 적응하고 알려주시는 모습이 인상 깊었다. (역시 장인은 도구를 가리지 않는구나) 나도 아직은 피그마에 익숙해지는 단계지만 언젠가는 혼자 척척 문제를 해결하고 다른 사람에게도 도움이 될 수 있으면 좋겠다.

이번 과제 리뷰는 여기까지...! 지난 과제 피드백을 받아 파일에 들어가보았는데, 겉보기엔 비슷해보이지만 요소 하나하나를 뜯어보니 성장했음이 보인다. ㅅ 튜터님의 피드백을 보니(아주 꼼꼼한 서면 피드백이 와서 감동받았다) 신경써야 할 부분이 어디인지 더욱 명확해져서 다음 작업에 유의하기로 했다. UI 마스터가 되는 그날까지 화이팅.

월요일엔 조가 바뀐다. 기대 반 걱정 반. 부디 좋은 사람들을 만나게 해주세요🙏