Share
Sign In
👩🏻‍💻 클론디자인
[클론디자인] 29cm
전석희
👍
이번에는 29cm 클론디자인을 진행했습니다.
진행한 페이지 : 메인 + 상품상세페이지
진행 방식
똑같이 따라그리기
좋은점, 아쉬운점 파악
클론 디자인
폰트는 웹에서 개발자모드로 봤을 때 campton은 유료폰트라 제외하고 apple SD Gothic neo로 진행했습니다.
아이콘의 경우 Help 아이콘 제외하고는 전부 똑같이 그렸습니다.
이번에는 가볍게 홈화면과 상품상세페이지를 따라 그리기만 했습니다.
홈화면 처음에서부터 살짝 고민이 많았는데요...
옆에 두고 따라 그리기
배너가 있는 저 제일 상단 부분을 보면 아래의 배경이 현재 배너 이미지가 블러처리 된 것 처럼 보이고 밑으로 갈수록 조금씩 옅어지는 것을 확인할 수 있었습니다.
🧐
29cm 디자이너분이 어떻게 저 부분 작업을 진행했을지는 모르겠지만..
일단 최대한 비슷하게 보이게 작업을 진행했습니다. 그렇지만 아마 개발자가 보기에는 파악하기 어렵게 제가 디자인을 진행해서 작업하면서 정말 궁금했던 부분이었습니다.
모바일 앱에서 홈화면은 크게 배너, 베스트 상품 리스트, 큐레이션 상품 리스트, 메뉴별 큐레이션 이렇게 나뉘어지는 것을 확인할 수 있었고, 대부분 이미지 + 텍스트 + 상품카드리스트 섹션이 주를 이루고 있었습니다.
다음으로 상품상세페이지 클론 디자인을 진행했습니다.
하단에 상품 카드 부분에서는 홈에는 없던 "뱃지"가 있었고 홈과 동일하게 스와이프형태의 상품카드인데 크기가 조금 더 큰 것을 확인할 수 있었습니다. 어떤 차이로 사이즈를 정한건지 궁금했던 부분이기도하면서 굳이 다르게할 필요가 있었을까? 하는 생각도 들었습니다.
좋았던 점
전체적인 디자인이 큐레이션을 해주는 듯한 느낌이었고, 감각적이면서 29cm만의 느낌이 나서 좋았다. 잡지같은 느낌!
블랙톤 안에서 주황색으로 포인트를 준 점이 좋았다. 자칫 주황색만 쓰면 잘 보이지않거나 할테지만 블랙과 어울러지면서 정말 포인트가 되어 눈에 잘 보이는 것이 좋았다.
하단 네비게이션이 아래의 콘텐츠를 블러처리해주는 것이 29cm만의 느낌을 더 살리는 것 같았다.
아쉬운 점
스와이프형태의 카드가 20px정도 차이가 나는데 굳이 그래야했을까? 하는 점이 아쉬웠다.
살펴보면 가격부분의 폰트 굵기도 다르던데... 똑같이하는게 더 관리하기 쉽지않을까 하는 아쉬움?과 함께 이유가 있을텐데 어떤 이유일까도 궁금하다.
Subscribe to 'hilda'
로그인 후 구독하실 수 있습니다!
Subscribe
👍
전석희
[클론디자인] 컬리
이번 클론디자인은 컬리로 진행했습니다. 작업을 진행하면서 왜 이렇게 디자인했을까? 처럼 왜?를 생각하면서 작업을 하려고 노력했습니다. 분명 어떤 디자인이든 이유가 있어서 해당 방법을 진행했을텐데 (물론 시간이 없어서...같은 이유가 있을수 있겠지만서도) "왜"를 생각하면서 진행하려고 하니 많이 도움이 되는 것 같습니다 서비스분석 Misson 컬리의 지속가능경영 컬리는 파트너사와의 동반성장, 친환경 경영, 사회적 기여를 통해 지속가능한 경영을 실천하고 있습니다. 강점 샛별배송을 통해 원하는 상품을 빠르게 받아볼 수 있음 뷰티컬리를 통해 식품 이외에도 필요한 뷰티상품도 같이 받아볼 수 있음 클론디자인 * 캡쳐된 화면을 옆에 두고 따라 그리는 방식으로 진행 (먼저 보고 따라 그린 후 → 캡쳐 화면에 대보면서 내가 생각한게 맞았나 재확인) * 이미지는 web에서 따와서 이용 컬러 (사용했던 컬러만 정리) 폰트의 경우에는 웹에서 확인해봤을 때는 Noto sans KR이 먼저 나왔지만, 휴대폰 캡쳐화면을 봤을 때의 폰트는 Apple SD Gothic Neo로 사용되는 것을 확인해서.. 모바일 환경에 따라 (iOS, AOS) 시스템 폰트가 적용되는 것 같았습니다. 영문 폰트는 Inter을 사용하는 것 같았습니다. 아이콘의 경우에는 보고 그리기만 진행했습니다. 그래서 완벽하게 따라 그리지는 못했지만 클론디자인하면서 계속 따라 그리다보면 감이 더 생길 것 같습니다. 클릭했을 때 fill처리되는 아이콘일 때 검색이나 메뉴같이 선으로만 표현되는 아이콘은 클릭 시 더 굵게 처리하는 방식으로 진행되는 것을 확인할 수 있었습니다. 컴포넌트
전석희
[클론디자인] 오늘의집
클론디자인을 하면서 진행 한 것 서비스 분석 모바일 클론 디자인 PC화면과 차이 좋았던점, 아쉬운점 작성 [서비스 분석] Mission '이렇게 살아보고 싶다'는 전 세계 사람들의 꿈을 현실로 만듭니다. 콘텐츠, 커뮤니티, 커머스를 연결한 독창적 서비스로 전 세계 사람들의 라이프스타일에 영감을 주고, 꿈꾸던 삶을 현실로 만드는 도전을 하고 있습니다. 강점 공간공유 콘텐츠 (유저가 직접 꾸민 본인 방을 올림 → 다른 유저가 그것을 보고 오늘의집에서 상품 구매) 인테리어 시공업체 ↔ 고객 연결 3D인테리어 서비스 인스타그램을 활발히 운영 캐릭터를 통해 친근하게 오늘의집을 알릴 수 있음 메인화면 클론디자인 이미지 요소 및 배너 그래픽 요소를 제외하고 최대한 다 따라그리기 아이콘은 직접 똑같이 따라 그리면서 아이콘 디자인 감각을 익혔습니다. 직접 따라 그리면서 느낀 것은 keyline에 맞춰서 진행은 했지만... 가끔 살짝 복잡한 아이콘이 있을 경우에는 어떻게 라인을 잘 지키면서 보기에 괜찮은 아이콘 디자인을 할 수 있을까?에 대한 인사이트도 얻을 수 있었습니다.