피그마를 이용하여 상세페이지 디자인 공부하기

 

1. 피그마(Figma)를 이용한 상세페이지 기획

노트에 그려보고, 마인드맵으로 그려보다가 피그마라는 설치가 필요 없는 가벼운 툴을 발견하다. 상세페이지 자체가 세로로 긴 캔버스가 필요한데 안성맞춤을 찾았다. 유튜브 알고리즘을 따라다니며 강의 듣다가 보니 대부분의 초기 기획은 피그마가 많이 사용된다는 것도 알게 되다. 팀과 협업이 가능하다고 한다. 부업으로 이어진다면 의뢰자와 나와의 소통을 할 수 있다는 점이 가장 매력적으로 다가온다.

2. 상세페이지 디자인의 중요성

나부터도 제품 구입 시 스크롤로 상세페이지를 훓어가며 쇼핑하는데 가독성도 좋고 제품에 대한 자세하며 내가 알고 싶어 하는 페이지로 보인다면 구매 결정할 확률이 높아진다. 그래서 전체적인 흐름 즉, 기획 단계부터가 중요하다고 느낀다. 시각적으로 보여지는 이미지와 영상 등이 설득력을 높여주기도 한다. 기반이 되는 기획을 위해 꼭 필요하다고 생각해서 가입을 하였다. 

피그마 메인화면

3. 사용방법 - https://www.figma.com/

Figma: The Collaborative Interface Design Tool

 

일단 설치가 필요없고 교육용으로 구글 계정을 통해 간편 가입이 되고 무료다. 단순 캔버스가 아닌 팜플렛도 많고 직관적으로 써 볼 수 있는 인터페이스들이 맘에 든다. 프레임을 그려보고 이미지도 넣어 보았는데 해상도 또한 깨지지 않는 것이 백터 기반인 것 같다. 선명하게 보여서 이미지를 이것저것 넣어보며 많은 시간을 시도해 보았다.

 

하단의 코멘트 아이콘이 바로 상세페이지 디자인에 있어 가장 필요한 핵심 툴이다. 클라이언트와 소통하는 메모장 같은 기능으로 디자인에 대한 의견 교환이 이루어질 수 있는 창으로 활용성이 좋아 보인다. 딱 필요한 기능만 있어 군더더기 없는 프로그램으로 디자이너의 기획 단계에서 많이 애용되고 있는 이유를 알게되다. 

 

4. 기본설정

상세페이지의 사이즈는 가로가 860이고 세로는 픽셀기준이지만 20,000정도라고 한다. 이미지와 글이 들어갈 수 있도록 프레임으로 재어보니 약 10개 정도가 나온다. 하지만 그림이 길 수도 있고 텍스트가 없을 수도 있는 프레임이 있으니 상품의 정보를 어떻게 배치하느냐에 따라 천차만별이 될 것이다. 

 

무료 이미지가 많은 핀터레스트나 클립아트코리아, 게티뱅크와 대표 텍스트 다운 사이트 눈누 및 산돌구름을 모두 즐겨찾기에 두고 세팅을 마쳤다. 이것들을 이용하여 상세페이지를 하나씩 만들어 보려고 한다. 잘 만들어져 있는 상품의 모델을 찾기부터 아마 시작해야겠지만 궁금하다. 순전히 내 주관적인 관점이 될 것 같긴 하지만 잘 팔리는 상품이나 브랜드 상세페이지를 우선 벤치마킹을 하다 보면 디자인의 감각이 늘지 않을까?

 

https://kr.pinterest.com/

Pinterest

https://www.clipartkorea.co.kr/

이미지 플랫폼 1위 고화질의 스톡이미지, 사진, 일러스트 및 영상을 경험해보세요 | 클립아트코

게티이미지뱅크 - 사진, 일러스트, 그래픽이미지, 파워포인트, 동영상

게티이미지뱅크 - 사진, 일러스트, 그래픽이미지, 파워포인트, 동영상

눈누

https://www.sandoll.co.kr/

산돌

 

📌 컬러까지 따라 해 보려면 앞으로 눈이 좀 혹사하게 될 듯~ 잘 만들어진 디자인은 시각적으로 피곤하지 않음을 잘 알고 있어서 톤&매너(Tone & Manner)를 잘 나타내는 브랜드나 일관된 분위기와 스타일의 표현이 잘 되어 있는 레퍼런스 수집이 가장 첫 단계겠지?