Share
Sign In
Home
Subscribe
👩🏻‍💻 클론디자인
[클론디자인] 컬리
전석희
👍
이번 클론디자인은 컬리로 진행했습니다.
✍️
작업을 진행하면서 왜 이렇게 디자인했을까? 처럼 왜?를 생각하면서 작업을 하려고 노력했습니다.
분명 어떤 디자인이든 이유가 있어서 해당 방법을 진행했을텐데 (물론 시간이 없어서...같은 이유가 있을수 있겠지만서도) "왜"를 생각하면서 진행하려고 하니 많이 도움이 되는 것 같습니다
서비스분석
Misson
컬리의 지속가능경영
컬리는 파트너사와의 동반성장, 친환경 경영, 사회적 기여를 통해
지속가능한 경영을 실천하고 있습니다.
강점
샛별배송을 통해 원하는 상품을 빠르게 받아볼 수 있음
뷰티컬리를 통해 식품 이외에도 필요한 뷰티상품도 같이 받아볼 수 있음
클론디자인
* 캡쳐된 화면을 옆에 두고 따라 그리는 방식으로 진행
(먼저 보고 따라 그린 후 → 캡쳐 화면에 대보면서 내가 생각한게 맞았나 재확인)
* 이미지는 web에서 따와서 이용
컬러 (사용했던 컬러만 정리)
폰트의 경우에는 웹에서 확인해봤을 때는 Noto sans KR이 먼저 나왔지만, 휴대폰 캡쳐화면을 봤을 때의 폰트는 Apple SD Gothic Neo로 사용되는 것을 확인해서..
모바일 환경에 따라 (iOS, AOS) 시스템 폰트가 적용되는 것 같았습니다.
영문 폰트는 Inter을 사용하는 것 같았습니다.
아이콘의 경우에는 보고 그리기만 진행했습니다. 그래서 완벽하게 따라 그리지는 못했지만 클론디자인하면서 계속 따라 그리다보면 감이 더 생길 것 같습니다.
✍️
클릭했을 때 fill처리되는 아이콘일 때 검색이나 메뉴같이 선으로만 표현되는 아이콘은 클릭 시 더 굵게 처리하는 방식으로 진행되는 것을 확인할 수 있었습니다.
컴포넌트
컴포넌트는 작은 단위부터 만드는 습관을 들이기위해 작업하는 화면의 컴포넌트는 되도록 다 만들고 있습니다.👩🏻‍💻
실제 프로젝트할 때에는 다른 페이지에 만들어놓고 관리하지만 클론디자인하는 목적은 UI감각을 익히고 작업 시 속도를 높임 + 블로그 글 작성으로 정리하는 습관 들이기에 있기 때문에 실제 프로젝트할 때처럼 컴포넌트를 정리하고 있진 않습니다. (평소 작업할 때는 잘... 정리합니다..)
예전 직무도 이커머스 계열이기도했고, 저번 오늘의집에 이어서 이번에 컬리 클론디자인을 진행하다보니
상품카드 부분을 어떻게 만들고 있는지 더 자세히 보게 되었습니다.
컬리같은 경우에는 상품카드에 "담기", "바로구매", "상세보기" 같은 버튼이 함께 있는 것을 확인할 수 있었습니다.
(아래 클론디자인 한 것과 함께 글로 더 작성해두었습니다!)
홈화면
작업환경은 현재 가지고 있는 아이폰13 크기로 진행
좌 : 실제 작업 // 우 : 캡쳐본
이번에도 먼저 이미지는 채우지 않고 나머지를 따라서 그렸습니다. (지금보니 아이콘의 굵기가 조금 다르네요...!)
컬리의 홈화면은 스크롤이 꽤 많이 내려가는 것을 확인할 수 있었습니다. 사실 얼추 나오다가 상품카드 섹션만 우루루 나오다 말겠거니했는데 다른 디자인메뉴도 나오고 그래서 엄청 많구나! 생각이 들었다.
예전에는 컬리팜이나 출첵, 커머스같은 콘텐츠가 없었는데 뷰티컬리도 생기기도 했고, 작은 콘텐츠들이 생기면서
아이콘메뉴 형태로 추가한 것 같습니다.
홈화면에는 배너 아이콘메뉴 상품카드섹션 띠배너 타임세일 매거진 이미지메뉴 등으로 이루어져있고 상품카드 섹션이 제일 많이 배치되어있었습니다.
콘텐츠별로 작업한 화면을 보여드립니다 🐥
아이콘메뉴는 이미지 따오려다가 웹버전에서는 없어서... 엄청 대략적으로 따라 그렸습니다.
각 섹션 사이의 간격은 32px로 고정해서 배치했습니다.
작업하면서 여러가지 콘텐츠들이 홈화면에 배치되어있음을 확인할 수 있었습니다.
이미지를 넣기 위해 다시 캡쳐를 하러 (며칠 지난 상태) 앱에 접속을 하니 콘텐츠가 조금씩 변경 되는 것을 확인할 수 있었습니다.
🐥
이런 것을 통해 커머스 서비스는 사용자들이 우리 서비스에 유입을 시키는 것 + 타임세일 콘텐츠로 자주 들어올 수 있게 + 이벤트(컬리멤버스, 추석 특가 등)를 활용을 적절히 하는 것이 중요하다는 것을 알 수 있었습니다.
위의 캡쳐 이미지를 보면 탭메뉴에 컬리멤버스가 있지만, 제가 이미지를 넣는 과정에서 다시 살펴보니 선물랭킹 메뉴가 새로 생겨서 해당 컴포넌트를 추가 제작해 작업했습니다.
작업을 하다가 궁금한 점이 생겼습니다.
🧐
이렇게 초반 기획에는 N뱃지를 고려하지않았다가 (당장 필요가 없음 + 굳이 혹시 필요하지않을까해서 리소스 낭비X) 나중에 이렇게 추가하게 되었을 때 디자이너는 컴포넌트를 어떻게 제작할까? 그게 궁금했습니다.
물론.. 같이 작업하는 디자이너 + 개발자와 협의만 잘되면 어떤 방식이든 상관없을 것 같긴한데
저는 기존 컴포넌트에 N뱃지를 추가하는 방식을 선택했는데, 뱃지가 달린 컴포넌트를 새로 생성하는 것도 방법일 것 같은데~ 작업하면서 이런 사소한 사항이 궁금해졌습니다.
properties에 뱃지 요소를 on/off 요소로 추가
상품카드의 버튼
컬리는 상품카드에 버튼이 달려있습니다. 그런데 버튼이 조금씩 다릅니다.
"담기"라고 되어있는 경우가 있고, "바로구매"라고 되어있는 것이 있습니다.
이후 클론디자인한 것을 보시면 "상세보기"버튼도 존재합니다.
작업하면서 해당 버튼의 로직이라고 할까요..? 규칙? 이 궁금했습니다.
앱 내 캡쳐이미지
3가지 버튼이 모두 있었던 화면을 보았을 때 상세보기 버튼은 바로 상세페이지로 넘어가고, 담기 및 바로구매 버튼은 하단드로어가 나오며 상품을 선택 후 담기 및 구매를 할 수 있었습니다.
정확한 규칙은 모르겠지만! 상세보기 버튼이 있는 경우에는 고가의 상품이거나 고객이 상세페이지에서 정보를 얻길 원하는 상품일 경우에 있는 것 같고, 바로구매 버튼이 있는 상품의 경우에는 단독으로 저 상품만 구매한 경우가 많은 상품일 경우에 붙여 놓는 것 같았다.
클론디자인 작업물
🐥
여러 콘텐츠들을 따라서 그리면서 해당 콘텐츠는 어떤 디자인으로 진행했고 어떤 인터렉션이 사용되는지 알 수 있어서 좋았습니다.
웹과 앱의 다른 표현 방식
작업하다보니까 탭메뉴가 가운데 정렬로 표현되는 섹션이 있었는데, 웹에서는 어떻게 표현할까 궁금해 확인해봤습니다.
앱에서는 양 옆 스와이프가 가능한 메뉴 형태이고, 웹에서는 모든 메뉴가 펼쳐서 보여지고 있고 칩 형태로 되어있는 것을 확인할 수 있었습니다.
💡
이렇게 모바일환경과 pc환경에 맞게 UX/UI디자인을 선택해 제작하는 것이 디자이너에게 중요하다는 것을 다시 깨닫게 되었습니다.
이외에 모바일과 pc가 다른 화면들
[랭킹]
모바일쪽은 상품카드 배경이 흰색 + 버튼도 흰색이며 배경이 회색으로 깔려있는 반면
웹에서는 상품카드 배경이 회색, 버튼은 라인형태로 되어있었습니다.
[특가]
특가 부분은 웹에서는 가로 형태로 배치되어있었습니다. 해당 웹 캡쳐화면은 상품이 1개 진열됐을때 사진이지만
확인했을 당시 2개까지 진열을 하는 경우가 있었고 동일하게 가로형태였습니다.
좋았던 점
클론디자인을 진행하면서 디자인 작업을 할 때 자연스럽게 이런 것을 고려해서 제작해야하는구나를 알 수 있습니다.
모바일과 웹환경에 따라 표현을 어떻게 했는지 확인할 수 있다.
컴포넌트를 제작하며 진행하다보니 어떻게 제작해야 효율적으로 만들 수 있을지 고민하게 되는 습관 장착
아쉬운 점
홈화면만 만들어봐서 상품카드 클릭 → 상세페이지 접속 → 구매 이런 과정에 따라 알 수 있는 인사이트들이 있을 것 같아서 다음에도 커머스 서비스를 선택해 비교해 알아보면 좋겠다고 생각
감사합니다.
Subscribe to 'hilda'
로그인 후 구독하실 수 있습니다!
Subscribe
👍
Other posts in '👩🏻‍💻 클론디자인'See all
전석희
[클론디자인] 29cm
이번에는 29cm 클론디자인을 진행했습니다. 진행한 페이지 : 메인 + 상품상세페이지 진행 방식 똑같이 따라그리기 좋은점, 아쉬운점 파악 클론 디자인 폰트는 웹에서 개발자모드로 봤을 때 campton은 유료폰트라 제외하고 apple SD Gothic neo로 진행했습니다. 아이콘의 경우 Help 아이콘 제외하고는 전부 똑같이 그렸습니다. 이번에는 가볍게 홈화면과 상품상세페이지를 따라 그리기만 했습니다. 홈화면 처음에서부터 살짝 고민이 많았는데요... 배너가 있는 저 제일 상단 부분을 보면 아래의 배경이 현재 배너 이미지가 블러처리 된 것 처럼 보이고 밑으로 갈수록 조금씩 옅어지는 것을 확인할 수 있었습니다. 29cm 디자이너분이 어떻게 저 부분 작업을 진행했을지는 모르겠지만.. 일단 최대한 비슷하게 보이게 작업을 진행했습니다. 그렇지만 아마 개발자가 보기에는 파악하기 어렵게 제가 디자인을 진행해서 작업하면서 정말 궁금했던 부분이었습니다. 모바일 앱에서 홈화면은 크게 배너, 베스트 상품 리스트, 큐레이션 상품 리스트, 메뉴별 큐레이션 이렇게 나뉘어지는 것을 확인할 수 있었고, 대부분 이미지 + 텍스트 + 상품카드리스트 섹션이 주를 이루고 있었습니다. 다음으로 상품상세페이지 클론 디자인을 진행했습니다.
전석희
[클론디자인] 오늘의집
클론디자인을 하면서 진행 한 것 서비스 분석 모바일 클론 디자인 PC화면과 차이 좋았던점, 아쉬운점 작성 [서비스 분석] Mission '이렇게 살아보고 싶다'는 전 세계 사람들의 꿈을 현실로 만듭니다. 콘텐츠, 커뮤니티, 커머스를 연결한 독창적 서비스로 전 세계 사람들의 라이프스타일에 영감을 주고, 꿈꾸던 삶을 현실로 만드는 도전을 하고 있습니다. 강점 공간공유 콘텐츠 (유저가 직접 꾸민 본인 방을 올림 → 다른 유저가 그것을 보고 오늘의집에서 상품 구매) 인테리어 시공업체 ↔ 고객 연결 3D인테리어 서비스 인스타그램을 활발히 운영 캐릭터를 통해 친근하게 오늘의집을 알릴 수 있음 메인화면 클론디자인 이미지 요소 및 배너 그래픽 요소를 제외하고 최대한 다 따라그리기 아이콘은 직접 똑같이 따라 그리면서 아이콘 디자인 감각을 익혔습니다. 직접 따라 그리면서 느낀 것은 keyline에 맞춰서 진행은 했지만... 가끔 살짝 복잡한 아이콘이 있을 경우에는 어떻게 라인을 잘 지키면서 보기에 괜찮은 아이콘 디자인을 할 수 있을까?에 대한 인사이트도 얻을 수 있었습니다.