UI·UX 디자인 공부/제로베이스 스쿨 - UXUI 디자인 학습일지

[7주차-1] 마켓컬리 클론디자인

CY__ 2024. 10. 16. 16:15

6주차 무신사 클론디자인에 이어 7주차에는 마켓컬리 클론디자인을 하게 되었다.

https://cy79.tistory.com/51

 

[6주차-3] 무신사 클론디자인

6주차부터 여러 서비스를 클론디자인하는 과제가 주어졌다.이번주는 무신사를 클론디자인 해야 했다. 클론디자인 과제를 하면서 이미지 영역을 채울 땐 Unsplash 플러그 인을 사용했다.https://www.f

cy79.tistory.com

 

무신사 클론디자인을 했을 때 폰트때문에 꽤 애를 먹었었는데

마켓컬리는 무신사보다는 폰트 분석이 쉬웠다.

여기서 폰트 분석 팁을 주자면, 'ㅈ'자와 'ㅎ'자 위주로 구분하면 쉽다.

나눔바른고딕

 

애플산돌고딕
프리텐다드

 

 

나눔바른고딕의 'ㅈ'은 'ㄱ'에 획추가한 듯한 모양이고 'ㅎ'의 모자(?)부분이 평행하다.

애플산돌고딕의 'ㅈ'은 좌우대칭 모양이고 'ㅎ'은 나눔바른고딕과 동일한 형태로 나타난다.

프리텐다드의 'ㅈ'은 좌우대칭 모양이고 'ㅎ'의 모자 부분이 'ㅗ' 모양이다.

보통은 위의 3개의 폰트를 많이 사용하기 때문에 이러한 특징을 알아두면 좋다!

 

이번 마켓컬리 클론디자인은 최대한 상품 설명과 이미지가 매칭되도록 유의해가며 디자인했다.

 


1. 메인 페이지

 

 

 

 

2. 상세페이지

 

 

 

3. 공지사항 리스트

 

 

 

4. 공지사항 상세

 

 

 

5. 마이페이지

 

 

 

6. 신상품

 

 

 

7. 신상품 - 필터

 

 

 

8. 특가혜택

 

 

 

9. 뷰티컬리

728x90