Share
Sign In
👩🏻‍💻 클론디자인
[클론디자인] 오늘의집
전석희
👍
클론디자인을 하면서 진행 한 것
서비스 분석
모바일 클론 디자인
PC화면과 차이
좋았던점, 아쉬운점 작성
[서비스 분석]
Mission
'이렇게 살아보고 싶다'는 전 세계 사람들의 꿈을 현실로 만듭니다.
콘텐츠, 커뮤니티, 커머스를 연결한 독창적 서비스로 전 세계 사람들의 라이프스타일에 영감을 주고, 꿈꾸던 삶을 현실로 만드는 도전을 하고 있습니다.
강점
공간공유 콘텐츠 (유저가 직접 꾸민 본인 방을 올림 → 다른 유저가 그것을 보고 오늘의집에서 상품 구매)
인테리어 시공업체 ↔ 고객 연결
3D인테리어 서비스
인스타그램을 활발히 운영
캐릭터를 통해 친근하게 오늘의집을 알릴 수 있음
메인화면 클론디자인
이미지 요소 및 배너 그래픽 요소를 제외하고 최대한 다 따라그리기
아이콘은 직접 똑같이 따라 그리면서 아이콘 디자인 감각을 익혔습니다.
💬
직접 따라 그리면서 느낀 것은 keyline에 맞춰서 진행은 했지만...
가끔 살짝 복잡한 아이콘이 있을 경우에는 어떻게 라인을 잘 지키면서 보기에 괜찮은 아이콘 디자인을 할 수 있을까?에 대한 인사이트도 얻을 수 있었습니다.
피그마로 아이콘을 그렸습니다. 네비게이션 바에 들어가는 아이콘은 선택되었을 때 아닐 때 상태가 따로 존재함으로 묶어서 진행했습니다.
컴포넌트 제작 하며 클론 디자인 진행
Nested Instances 기능을 활용해 하단네비게이션 컴포넌트에서 각각의 아이템들의 탭 여부, 레이블 작성, 아이콘 변경까지 가능하게 했습니다.
잘 활용하면 좋은 Nested 기능! 편리하다
클론 디자인 진행 과정
1.
캡쳐 화면을 옆에 둔다.
2.
작업 화면에 캡쳐화면을 보면서 텍스트 크기, 이미지 크기, 간격이 이정도 일 것이다. 생각하고 먼저 그린다.
3.
그린 것을 캡쳐한 화면에 대보면서 맞는지 확인해본다.
이렇게 이미지를 넣지 않은채로 쭉 진행을 한 뒤에 이미지를 넣습니다.
이미지는 오늘의 집 pc로 들어가서 가져왔습니다!
홈화면 클론디자인을 진행한 모습
사진을 전부 넣은 모습입니다.
사진을 가져오기 위해 pc환경에서 접속을 해보았는데 오늘의집은 모바일과 pc화면이 많이 달랐던 점을 확인할 수 있었습니다.
배너
이미지1
이미지2
모바일에서는 가로형태의 배너를 사용하고있고, 웹(pc)에서는 세로형 배너를 사용하고 있습니다.
안에 들어가는 이미지 또한 조금 다른형태로 사용이 되었고
이미지 1에서 보시면, pc에서는 세로 배너 좌측에 배너보다 크게 커뮤니티로 콘텐츠 부분이 차지하고있었습니다.
💡
모바일은 pc보다 배너가 차지하는 비율이 적고, pc처럼 구성을 할 수가 없기때문에 작은 형태의 띠배너가 사용된 것 같고 pc에서는 띠배너로 할 때 자리차지가 많이 되고 콘텐츠를 주요하게 보여줘야하는데 그것을 보여주는 방식을 배너와 같은 위치에 놓은 것으로 풀어낸 것 같습니다!
그리고 모바일과 웹의 배너의 배치와 일러스트 요소의 배치도 조금 다르게 하는 것으로 디테일이 중요하다는 것도 다시 깨닫게됩니다.
+ 모바일과 웹에서 인디케이터의 디자인도 조금 다르다... 왜일까..?
(아이콘 굵기도 달라보이고, 오퍼시티도 달라보인다)
메인의 콘텐츠 나열
앱과 pc웹에서의 메인화면 구성도 다른 것을 확인해 볼 수 있었습니다.
아무래도 모바일의 환경과 pc웹에서의 환경이 다르고 사용자가 접속하는 목적도 다를 것이라고 생각됩니다.
그에 따라서 콘텐츠의 나열도 다르게하는 것이 아닐까 생각이 듭니다.
상품카드
이 부분은 앱과 웹의 차이라기보다는 무슨 이유로 이렇게 했을까?에 대해 고민해볼 수 있는 부분이었습니다.
앱 - 홈화면에서는 위와 같이 브랜드/상품명/가격만 표시되고있습니다.
동일한 상품을 pc에서 검색해서 보았을 때에는 리뷰,뱃지,부가정보까지 포함되어있었습니다.
모바일에서도 쇼핑 탭에 들어가 확인했을 때에는 저런 부가정보가 상품카드에 포함되어있었는데
홈화면에서만 부가정보를 넣지않았을까? 깔끔하게 보기 위함이었을까? 고민하게 되는 부분이었습니다.
추가적으로 오늘의 집의 상품카드에서는 "원"단위를 표기하고 있지 않는 것을 확인할 수 있었습니다.
→ 국내에서 이용하는 고객이 많기때문에
따로 원을 표기하지 않더라도 사용자가 바로 얼마임을 인지할 수 있기때문에 빼는 것도 좋은 아이디어 같다고 생각이 들었습니다.
더불어 상품카드에서 원가가 표시되지않았는데요! 이 점도 깔끔하게 이 상품의 최종가격과 할인율만 보여주는 것 같습니다. 딱 필요한 정보만 바로 확인할 수 있게하는 점이 좋았습니다.
(물론 상세페이지에 들어가면 원가/할인가/최종가 다 표기되어있습니다. / 자세한 정보는 상세페이지에서 다 확인할 수 있기때문에 메인이나 상품리스트에서는 최대한 간결하게 가는 것이 좋아보입니다.)
💡
예전 업무가 커머스였기때문에 상품카드에서 가격을 어떻게하면 잘 보여줄까? 아니면 뱃지나 리뷰 등 표시할게 많은데 어떻게하면 복잡하지않게 정보를 보여줄 수 있을까? 에 대한 고민을 했던 적이 많았는데 클론디자인을 진행하면서 다시 생각할 수 있게되는 계기가 된 것 같습니다.
🧐 궁금증
그래픽 요소는 따라그리지 않아서 웹에서 캡쳐하거나 복사해서 사용했습니다.
그랬을 때 이미지가 저렇게 회색부분까지 통채로 사용하고 있던 것을 확인할 수 있었습니다. (패딩값포함된 이미지)
pc에서만 저렇게 쓰는지 앱에서도 동일하게 사용하는지까지는 모르겠지만! 이미지에 패딩값까지 다 포함되어서 사용하는 이유가 무엇일까~ 궁금했습니다. (개발공수..? 관리하기 용이?)
좋았던 UXUI 디자인
상품카드가 깔끔하게 보여지는 점
모바일 홈화면에서는 상품이미지 + 브랜드명 + 상품명 + 할인율 + 최종가만 딱 보여져서 사용자가 필요한 정보만 바로 확인하고 상세페이지에 진입할 수 있다.
상품카드에 "원"을 빼 가격만 더 직관적으로 확인할 수 있으며 여러개 가격이 있는 상품의 경우에도 "외" 글자가 들어가도 "원"과 충돌하지 않는다.
모바일과 웹(pc)의 특성을 잘 파악해 디자인이 다른점
배너 : 띠배너와 세로형배너
오늘의 딜 : 모바일에서는 딱 하나만 보여지며 할인율이 굉장히 크게 보여진다. / pc에서는 기존 상품카드 형식으로 보여지고있다.
모바일
pc
아쉬웠던 UXUI 디자인
해당 콘텐츠 카드에서 유저의 닉네임이 흰색 글씨로 표기가 되는데 화이트톤의 인테리어가 들어갔을 경우 닉네임이 잘 보이지 않는 점이 조금 아쉬웠다.
닉네임부분에 딤처리를 줬어도 됐을 것 같은데 주지 않은 이유를 생각해보면
인테리어 사진이 더 중요하기때문에 사진의 이미지가 주는 느낌이 달라질 수 있어서
닉네임은 그렇게까지 중요한 요소가 아니기때문에
이지 않을까 생각해본다!
더 해보고 싶은 부분
내가 아쉬웠다고 느꼈던 부분을 리디자인 해본다면 어떨까?
환경에 따라 설계가 달라지는 것을 알게되어서 좀 더 파고들어서 공부하면 좋을 것 같다.
홈화면밖에 클론디자인 및 분석을 진행했는데 다음에는 홈 - 상세 이런식으로 2페이지 이상 클론디자인 및 분석을 진행하고 싶다!
Subscribe to 'hilda'
로그인 후 구독하실 수 있습니다!
Subscribe
👍
전석희
[클론디자인] 29cm
이번에는 29cm 클론디자인을 진행했습니다. 진행한 페이지 : 메인 + 상품상세페이지 진행 방식 똑같이 따라그리기 좋은점, 아쉬운점 파악 클론 디자인 폰트는 웹에서 개발자모드로 봤을 때 campton은 유료폰트라 제외하고 apple SD Gothic neo로 진행했습니다. 아이콘의 경우 Help 아이콘 제외하고는 전부 똑같이 그렸습니다. 이번에는 가볍게 홈화면과 상품상세페이지를 따라 그리기만 했습니다. 홈화면 처음에서부터 살짝 고민이 많았는데요... 배너가 있는 저 제일 상단 부분을 보면 아래의 배경이 현재 배너 이미지가 블러처리 된 것 처럼 보이고 밑으로 갈수록 조금씩 옅어지는 것을 확인할 수 있었습니다. 29cm 디자이너분이 어떻게 저 부분 작업을 진행했을지는 모르겠지만.. 일단 최대한 비슷하게 보이게 작업을 진행했습니다. 그렇지만 아마 개발자가 보기에는 파악하기 어렵게 제가 디자인을 진행해서 작업하면서 정말 궁금했던 부분이었습니다. 모바일 앱에서 홈화면은 크게 배너, 베스트 상품 리스트, 큐레이션 상품 리스트, 메뉴별 큐레이션 이렇게 나뉘어지는 것을 확인할 수 있었고, 대부분 이미지 + 텍스트 + 상품카드리스트 섹션이 주를 이루고 있었습니다. 다음으로 상품상세페이지 클론 디자인을 진행했습니다.
전석희
[클론디자인] 컬리
이번 클론디자인은 컬리로 진행했습니다. 작업을 진행하면서 왜 이렇게 디자인했을까? 처럼 왜?를 생각하면서 작업을 하려고 노력했습니다. 분명 어떤 디자인이든 이유가 있어서 해당 방법을 진행했을텐데 (물론 시간이 없어서...같은 이유가 있을수 있겠지만서도) "왜"를 생각하면서 진행하려고 하니 많이 도움이 되는 것 같습니다 서비스분석 Misson 컬리의 지속가능경영 컬리는 파트너사와의 동반성장, 친환경 경영, 사회적 기여를 통해 지속가능한 경영을 실천하고 있습니다. 강점 샛별배송을 통해 원하는 상품을 빠르게 받아볼 수 있음 뷰티컬리를 통해 식품 이외에도 필요한 뷰티상품도 같이 받아볼 수 있음 클론디자인 * 캡쳐된 화면을 옆에 두고 따라 그리는 방식으로 진행 (먼저 보고 따라 그린 후 → 캡쳐 화면에 대보면서 내가 생각한게 맞았나 재확인) * 이미지는 web에서 따와서 이용 컬러 (사용했던 컬러만 정리) 폰트의 경우에는 웹에서 확인해봤을 때는 Noto sans KR이 먼저 나왔지만, 휴대폰 캡쳐화면을 봤을 때의 폰트는 Apple SD Gothic Neo로 사용되는 것을 확인해서.. 모바일 환경에 따라 (iOS, AOS) 시스템 폰트가 적용되는 것 같았습니다. 영문 폰트는 Inter을 사용하는 것 같았습니다. 아이콘의 경우에는 보고 그리기만 진행했습니다. 그래서 완벽하게 따라 그리지는 못했지만 클론디자인하면서 계속 따라 그리다보면 감이 더 생길 것 같습니다. 클릭했을 때 fill처리되는 아이콘일 때 검색이나 메뉴같이 선으로만 표현되는 아이콘은 클릭 시 더 굵게 처리하는 방식으로 진행되는 것을 확인할 수 있었습니다. 컴포넌트