최근, 업무를 하면서 머리 속에서 생성되던 '디자인 리소스나 레이아웃 아이디어들이 고갈되고 있다'는 생각을 했다.
프론트 개발을 하는데 있어서도 이 부분이 시간을 많이 잡아먹기 시작했고,
이를 해결해보고자 각 잡고 공부 해 보자는 심정으로 챌린지를 시작했다!
1일차 과제: Product Card 만들기
조건은 위시 리스트 버튼, 장바구니 버튼, 상품 이미지, 상품 제목, 상품 description과 shade 정도였다.
Figma를 사용해서 만들었고, 최대한 오토레이아웃(Auto Layout)을 사용해서 만들었으며, 필요한 경우 절대 위치를 사용했다.
[디자인 가이드 반영 전 결과물]
자세히 레이아웃을 뜯어보고 싶은 경우 아래의 피그마 링크를 이용하면 된다!
👉 피그마 바로가기
챌린지는 SquarePlanet을 통해서 진행하고 있으며, 나 같은 경우 pro를 결제했는데, 그 이유는 Michał이 작성한 해답을 볼 수 있기 때문!
내가 해답을 보고 따라하는 것은 절대 아니다...
다만, 내가 한 방법과 이 챌린지 출제자의 의도가 일치하는 부분이 있는지, 다르게 구현한 부분이 있는지, 나보다 더 뛰어난 방법이 있는지를 알 수 있어서 좋다(부가세 포함 $11 이지만...😭)
Michał의 방식과 내 방식에서 차이점
둘 사이에 다른 점은 다음과 같았다
1. 설계 순서
- 나: 외부 > 내부
- Michał: 가로의 넓이에 가장 크게 영향을 주는 컴포넌트 먼저(버튼)
- 디자인 규칙
- 나: 없음...^^
- Michał: 폰트, 간격, 색상 선택, radius 등에서 strict한 rule이 있었음.
자세한 내용들이 무지하게 많았지만 이것을 블로그에 공유해도 되는지는 한 번 알아보고 올려보겠다!
참고!
사진 리소스 같은 것이 가장 고민이 될텐데, 사진 리소스를 무료로 제공하는 곳들이 있다.
보통은 Canva 같은 업체를 사용했지만 >> 사진만 << 필요할 때는 굉장히 불편하고, 저작권도 신경쓰인다.
이번에는 무료로 이용가능한 pixabay를 사용했고, 아주 만족스러웠다!
🔗 링크: https://pixabay.com/ko/
나는 이번 챌린지 설명을 보는 것 만으로도, 그 동안 내가 굉장히 머리 아파하던 부분이 한 번에 해결됨을 느꼈다.
그 동안은 "보기에 좋은" 디자인이면 된다고 생각했던 것 같다.
그렇지만 생각보다 엄격한 디자인의 규칙이 있다는 점이 충격이면서도 이것 때문에 매 번 어떤 지점이 아름답다고 판단하고, 어떤 값을 기본으로 설정해야하는지 고민하던 것이 한 번에 풀려버렸다.
혹시 SquarePlanet에서 챌린지를 하시는 분이 또 있다면 소통하면서 같이 챌린지를 진행하고 싶다.
(댓글에 남겨 주신다면 매우 반가울 것입니다!! 🥹💖)
