Sign In
Subscribe
👩🏻‍💻 클론디자인

[클론디자인] 오늘의집

전석희

클론디자인을 하면서 진행 한 것

•
서비스 분석
•
모바일 클론 디자인
◦
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 to my site to be the first to receive notifications and emails about the latest updates, including new posts.
Join Slashpage and subscribe to 'hilda'!
Subscribe
👍