[TIL No. 15] 피그마(Figma) 클론 준비

Figma를 소개하지도 않고 바로 피그마 클론이라니 정말 뜬금없지만 TIL은 체계적으로 쓰기보단 흐름따라 써보려고 한다. 먼저 내가 가장먼저 클론하고 싶은 페이지는 프라이탁(FREITAG) 공식홈페이지이다.

프라이탁 공식 홈페이지 : https://www.freitag.ch/en

 

이 홈페이지로 선정한 배경에 대해 잠깐 살펴보면, 제품은 단 한 개밖에 구매하지 않았지만 동일한 디자인으로 만들어지는 제품이 없는만큼 독특한 색과 디자인으로 만들어진 제품을 얻기위해 폰으로 100번도 넘게 접속했던 기억이 있고, 배송을 기다리면서도 10번 이상 접속했던 것 같다..😂 이전에 UI/UX에 대한 개념이 전혀 없을 때에도 사용경험이 나쁘지 않았던 기억이있고... (사실 업사이클링을 하는 기업이라 좋아하는 측면도 있고, 힙한 느낌이라 개인적인 기호도 듬뿍 들어갔다.)

또, 피그마로 여러가지 컴포넌트를 만들었는데 그것들을 꽤 여러가지 활용해볼 수 있는 웹페이지면서 깔끔한 디자인이 클론을 만들었을 때에도 큰 어려움 없이 만들어질 수 있을 것 같아 도전하게 되었다.

(음... 근데 지금보니까 깔끔하긴한데... 약간 촌스러운가 너무 단순한가..? 싶기도하고 그렇다..😅)

 

사용경험에 대해서는 기억도 어렴풋하고 이번에 클론을 하면서 웹페이지를 설계할 때 어떤 점을 고려해야할지 직접 느껴보고 배웠던 이론들을 통해 분석하는 시간을 다시 가져보고 개선할 수 있다면 어떤 점이 있는지 정말 좋은 점이 있다면 어떤 점인지를 분석해보고자 한다.

 

 

#1. 컬럼그리드 적용해보기

 

먼저 화면의 UI를 구성할 때 컬럼그리드를 고려해서(당연히 그랬을거라 생각은 들었으나) 만들었는지 궁금해서 가장 먼저 시도해보기로 하였다.

메인화면에 이리저리 컬럼그리드를 적용해 보았으나... 이렇게 하는게 맞는건지도 헷갈렸다.

무엇을 한 것인가..

 상품페이지에 적용해보니 그나마 7대5로 나뉜 비율이 아닌가... 조심스럽게 추측해본다(이렇게 추측해야만 하는 내가 슬프다). 다시 보니 가방이 두 컬럼씩 딱 차지하는게 컬럼그리드 기준에 맞게 만들어진것으로 보인다. 그러다가도 상단에 슬라이드 되는 부분은 그런것을 무시하고 만든 것 같고 상당히 헷갈린다.

 

 

#2. 구현되어있는 기능 살펴보기

 

간단한 기능으로 버튼에 커서를 올려놓으면 hover 효과가 있는 것부터 화살표를 누르거나 드래그를 하면 상품사진이 넘어가도록 구현해야한다.
구현한 컴포넌트 중 사용된 것을 살펴보면, 오른쪽 하단에 메세지 모양은 드롭 업(?) 되고, 왼쪽 상단의 메뉴바는 드롭다운된다. 물론 작동방식은 그렇지만 구현한 컴포넌트로 분류하자면 아코디언 종류로 볼 수 있다.

리스트를 만들어보면 다음과 같다.

1. 버튼에 hover 기능

2. 오버레이 기능으로 구현된 GNB와 메세지 버튼(도우미 버튼)  
3. 아코디언으로 구현된 LNB 안의 검색창

4. "WE REPAIR"와 같은 버튼 바깥의 사진을 클릭해도 같은 링크로 이동하는 기능

5. 화살표 버튼 또는 마우스 드래그로 스크롤링 되는 상품사진들

6. 드랍다운과 자동완성기능을 가지고 있는 국가선택 탭

 

위 기능들을 전부 구현할 것은 아니고, 만들어보면서 기능을 최대한 구현해보되 UI,UX 분석에 초점을 두어 클론을 만들어보고 추후에 프로토타입을 만들 때 참고할 수 있도록 하겠다.