# [클론디자인] 컬리 ![Image](https://upload.cafenono.com/image/slashpagePost/20240819/170645_x1qVKamWAecEhnPyKv?q=80&s=1280x180&t=outside&f=webp) 이번 클론디자인은 컬리로 진행했습니다. > 작업을 진행하면서 **왜 이렇게 디자인했을까?** 처럼 왜?를 생각하면서 작업을 하려고 노력했습니다. 분명 어떤 디자인이든 이유가 있어서 해당 방법을 진행했을텐데 (물론 시간이 없어서...같은 이유가 있을수 있겠지만서도) **"왜"를 생각하면서 진행하려고 하니 많이 도움이 되는 것 같습니다** ## 서비스분석 **Misson** 컬리의 지속가능경영 컬리는 파트너사와의 동반성장, 친환경 경영, 사회적 기여를 통해 지속가능한 경영을 실천하고 있습니다. **강점** - 샛별배송을 통해 원하는 상품을 빠르게 받아볼 수 있음 - 뷰티컬리를 통해 식품 이외에도 필요한 뷰티상품도 같이 받아볼 수 있음 ## 클론디자인 * 캡쳐된 화면을 옆에 두고 따라 그리는 방식으로 진행 (먼저 보고 따라 그린 후 → 캡쳐 화면에 대보면서 내가 생각한게 맞았나 재확인) * 이미지는 web에서 따와서 이용 **컬러 (사용했던 컬러만 정리)** ![Image](https://upload.cafenono.com/image/slashpagePost/20240819/165925_ZxI8wSkNhL4E5fDfxi?q=80&s=1280x180&t=outside&f=webp) 폰트의 경우에는 웹에서 확인해봤을 때는 Noto sans KR이 먼저 나왔지만, 휴대폰 캡쳐화면을 봤을 때의 폰트는 Apple SD Gothic Neo로 사용되는 것을 확인해서.. 모바일 환경에 따라 (iOS, AOS) 시스템 폰트가 적용되는 것 같았습니다. 영문 폰트는 Inter을 사용하는 것 같았습니다. ![Image](https://upload.cafenono.com/image/slashpagePost/20240816/233842_gwriGmCWgw7ZqKYPLE?q=80&s=1280x180&t=outside&f=webp) 아이콘의 경우에는 보고 그리기만 진행했습니다. 그래서 완벽하게 따라 그리지는 못했지만 클론디자인하면서 계속 따라 그리다보면 감이 더 생길 것 같습니다. > 클릭했을 때 fill처리되는 아이콘일 때 검색이나 메뉴같이 **선으로만 표현되는 아이콘은 클릭 시 더 굵게 처리하는 방식으로 진행되는 것을 확인**할 수 있었습니다. ### 컴포넌트 ![Image](https://upload.cafenono.com/image/slashpagePost/20240819/170109_2aWbd8cMc072EdnBEC?q=80&s=1280x180&t=outside&f=webp) ![Image](https://upload.cafenono.com/image/slashpagePost/20240815/181607_hQvmgvxPCa7x9h5GX3?q=80&s=1280x180&t=outside&f=webp) 컴포넌트는 **작은 단위부터 만드는 습관**을 들이기위해 작업하는 화면의 컴포넌트는 되도록 다 만들고 있습니다.👩🏻‍💻 > 실제 프로젝트할 때에는 다른 페이지에 만들어놓고 관리하지만 클론디자인하는 목적은 UI감각을 익히고 작업 시 속도를 높임 + 블로그 글 작성으로 정리하는 습관 들이기에 있기 때문에 실제 프로젝트할 때처럼 컴포넌트를 정리하고 있진 않습니다. (평소 작업할 때는 잘... 정리합니다..) ![Image](https://upload.cafenono.com/image/slashpagePost/20240819/164512_pK1qvmKzAzxpcWlyuh?q=80&s=1280x180&t=outside&f=webp) 예전 직무도 이커머스 계열이기도했고, 저번 오늘의집에 이어서 이번에 컬리 클론디자인을 진행하다보니 `상품카드` 부분을 어떻게 만들고 있는지 더 자세히 보게 되었습니다. 컬리같은 경우에는 **상품카드에 "담기", "바로구매", "상세보기" 같은 버튼이 함께 있는 것을 확인**할 수 있었습니다. (아래 클론디자인 한 것과 함께 글로 더 작성해두었습니다!) ## 홈화면 작업환경은 현재 가지고 있는 아이폰13 크기로 진행 ![좌 : 실제 작업 // 우 : 캡쳐본](https://upload.cafenono.com/image/slashpagePost/20240815/184357_N0Y34i2EYLMFI6QNOB?q=80&s=1280x180&t=outside&f=webp) 이번에도 먼저 이미지는 채우지 않고 나머지를 따라서 그렸습니다. (지금보니 아이콘의 굵기가 조금 다르네요...!) 컬리의 홈화면은 스크롤이 꽤 많이 내려가는 것을 확인할 수 있었습니다. 사실 얼추 나오다가 상품카드 섹션만 우루루 나오다 말겠거니했는데 다른 디자인메뉴도 나오고 그래서 엄청 많구나! 생각이 들었다. 예전에는 컬리팜이나 출첵, 커머스같은 콘텐츠가 없었는데 뷰티컬리도 생기기도 했고, 작은 콘텐츠들이 생기면서** **`**아이콘메뉴 형태**`로 추가한 것 같습니다. 홈화면에는 `배너` `아이콘메뉴` `상품카드섹션` `띠배너` `타임세일` `매거진` `이미지메뉴` 등으로 이루어져있고 상품카드 섹션이 제일 많이 배치되어있었습니다. ### 콘텐츠별로 작업한 화면을 보여드립니다 🐥 아이콘메뉴는 이미지 따오려다가 웹버전에서는 없어서... 엄청 대략적으로 따라 그렸습니다. ![Image](https://upload.cafenono.com/image/slashpagePost/20240819/160537_PJiKnngpKIJJOyFgzV?q=80&s=1280x180&t=outside&f=webp) 각 섹션 사이의 간격은 **32px**로 고정해서 배치했습니다. 작업하면서 여러가지 콘텐츠들이 홈화면에 배치되어있음을 확인할 수 있었습니다. 이미지를 넣기 위해 다시 캡쳐를 하러 (며칠 지난 상태) 앱에 접속을 하니 콘텐츠가 조금씩 변경 되는 것을 확인할 수 있었습니다. > 이런 것을 통해 커머스 서비스는 사용자들이 우리 서비스에 유입을 시키는 것 + 타임세일 콘텐츠로 자주 들어올 수 있게 + 이벤트(컬리멤버스, 추석 특가 등)를 활용을 적절히 하는 것이 중요하다는 것을 알 수 있었습니다. 위의 캡쳐 이미지를 보면 탭메뉴에 컬리멤버스가 있지만, 제가 이미지를 넣는 과정에서 다시 살펴보니 선물랭킹 메뉴가 새로 생겨서 해당 컴포넌트를 추가 제작해 작업했습니다. ![Image](https://upload.cafenono.com/image/slashpagePost/20240819/160956_OdsQNFUEqZ5XTlv31v?q=80&s=1280x180&t=outside&f=webp) 작업을 하다가 궁금한 점이 생겼습니다. > 이렇게 초반 기획에는 N뱃지를 고려하지않았다가 (당장 필요가 없음 + 굳이 혹시 필요하지않을까해서 리소스 낭비X) 나중에 이렇게 추가하게 되었을 때 디자이너는 컴포넌트를 어떻게 제작할까? 그게 궁금했습니다. 물론.. 같이 작업하는 디자이너 + 개발자와 협의만 잘되면 어떤 방식이든 상관없을 것 같긴한데 저는 기존 컴포넌트에 N뱃지를 추가하는 방식을 선택했는데, 뱃지가 달린 컴포넌트를 새로 생성하는 것도 방법일 것 같은데~ 작업하면서 이런 사소한 사항이 궁금해졌습니다. ![properties에 뱃지 요소를 on/off 요소로 추가](https://upload.cafenono.com/image/slashpagePost/20240819/161838_TQOGyQ24AqXkBsyrNS?q=80&s=1280x180&t=outside&f=webp) ### 상품카드의 버튼 ![Image](https://upload.cafenono.com/image/slashpagePost/20240819/162906_3S7Y9xCQrWZZivqsKX?q=80&s=1280x180&t=outside&f=webp) 컬리는 상품카드에 버튼이 달려있습니다. 그런데 **버튼**이 조금씩 다릅니다. **"담기"**라고 되어있는 경우가 있고, **"바로구매"**라고 되어있는 것이 있습니다. 이후 클론디자인한 것을 보시면 **"상세보기"**버튼도 존재합니다. 작업하면서 해당 버튼의 로직이라고 할까요..? 규칙? 이 궁금했습니다. ![앱 내 캡쳐이미지](https://upload.cafenono.com/image/slashpagePost/20240819/163420_lKNQS3Hfgujm2swhC3?q=80&s=1280x180&t=outside&f=webp) 3가지 버튼이 모두 있었던 화면을 보았을 때 상세보기 버튼은 바로 상세페이지로 넘어가고, 담기 및 바로구매 버튼은 하단드로어가 나오며 상품을 선택 후 담기 및 구매를 할 수 있었습니다. > 정확한 규칙은 모르겠지만! **상세보기 버튼**이 있는 경우에는 고가의 상품이거나 고객이 상세페이지에서 정보를 얻길 원하는 상품일 경우에 있는 것 같고, **바로구매 버튼이 있는 상품**의 경우에는 단독으로 저 상품만 구매한 경우가 많은 상품일 경우에 붙여 놓는 것 같았다. ![클론디자인 작업물](https://upload.cafenono.com/image/slashpagePost/20240819/164107_WEAqiBO1tAnNmOC0Eu?q=80&s=1280x180&t=outside&f=webp) > 여러 콘텐츠들을 따라서 그리면서 해당 콘텐츠는 어떤 디자인으로 진행했고 어떤 인터렉션이 사용되는지 알 수 있어서 좋았습니다. ## 웹과 앱의 다른 표현 방식 작업하다보니까 탭메뉴가 가운데 정렬로 표현되는 섹션이 있었는데, 웹에서는 어떻게 표현할까 궁금해 확인해봤습니다. ![Image](https://upload.cafenono.com/image/slashpagePost/20240819/164941_qmCNbzvSnDZe7fhS3D?q=80&s=1280x180&t=outside&f=webp) 앱에서는 양 옆 스와이프가 가능한 메뉴 형태이고, 웹에서는 모든 메뉴가 펼쳐서 보여지고 있고 칩 형태로 되어있는 것을 확인할 수 있었습니다. > 이렇게 **모바일환경과 pc환경에 맞게** UX/UI디자인을 선택해 제작하는 것이 디자이너에게 중요하다는 것을 다시 깨닫게 되었습니다. ## 이외에 모바일과 pc가 다른 화면들 **[랭킹]** ![Image](https://upload.cafenono.com/image/slashpagePost/20240819/165255_QjthhUKxfNn9pWbSln?q=80&s=1280x180&t=outside&f=webp) 모바일쪽은 상품카드 배경이 흰색 + 버튼도 흰색이며 배경이 회색으로 깔려있는 반면 웹에서는 상품카드 배경이 회색, 버튼은 라인형태로 되어있었습니다. **[특가]** ![Image](https://upload.cafenono.com/image/slashpagePost/20240819/165454_mlJL1Rd2BlLVFn7WZ8?q=80&s=1280x180&t=outside&f=webp) 특가 부분은 웹에서는 가로 형태로 배치되어있었습니다. 해당 웹 캡쳐화면은 상품이 1개 진열됐을때 사진이지만 확인했을 당시 2개까지 진열을 하는 경우가 있었고 동일하게 가로형태였습니다. - **좋았던 점** - 클론디자인을 진행하면서 **디자인 작업**을 할 때 자연스럽게 이런 것을 고려해서 제작해야하는구나를 알 수 있습니다. - **모바일과 웹환경에 따라 표현을 어떻게** 했는지 확인할 수 있다. - 컴포넌트를 제작하며 진행하다보니 어떻게 제작해야 **효율적**으로 만들 수 있을지 고민하게 되는 습관 장착 - **아쉬운 점** - 홈화면만 만들어봐서 상품카드 클릭 → 상세페이지 접속 → 구매 이런 과정에 따라 알 수 있는 인사이트들이 있을 것 같아서 다음에도 커머스 서비스를 선택해 비교해 알아보면 좋겠다고 생각 감사합니다. For the site tree, see the [root Markdown](https://slashpage.com/hilda.md).