상품 상세페이지 레이아웃 최고의 초이스는? (+ PSD )

레이아웃은 끊임없이 변화하고 있다.

웹 상세페이지 레이아웃은 정보들의 관계를 다루는 것으로,

정보들 간의 질서를 통해 위계를 부여한다.

판매자가 전달하고자 하는 정보를 정확하게 전달하기 위해,

레이아웃은 구매자가 인지하기 쉽게 구성되어야 한다.

 

그렇다면, 레이아웃이란 무엇인가?
디자이너들이 툭하면,
"레이아웃이 좋다, 이런 레이아웃이 트렌드다."
등등의 이야기를 쓴다. 

레이아웃이란 간단하게 한마디로 정의하면,
일반인들은 '배열, 배치'라고 생각해도 무방할 것 같다.
"레이아웃 = 배치"
레이아웃은, 한정적인 공간에 효과적으로 요소를 배치하는 기술을 말한다.

 

굿몬드가 제작한 썸네일 레이어 예시사진

 

대표 이미지 즉, 썸네일이라는 정사각형(640x640) 공간에 나의 상품을 효과적으로 배치하는 것.
그것을 바로 썸네일 레이아웃이라고 말한다.

 

* 똑같은 상품을 두 개를 놓을 것인가? - 1+1 세일 중이라면, 같이 넣을 수도 있다.

* 상품 배경색을 상품과 대비되는 색으로 둘 것인가? 눈에 잘 띄는 것만을 위한다면 그럴 수 있다.

* 상품만 잘 보이도록, 배경을 없애고 구매자가 상품을 인지하기 쉽게 배열할 것인가?

 

2019 학과수업에 사용한 운동화 썸네일 예시본

 

의도하는 생각(컨셉)에 따라, 썸네일은 변할 수 있다.

비교적 정보의 양이 적은 썸네일에서도 세부적으로는 수천 가지의 형태로 구성이 가능할 것이다.

 

---

<썸네일 사이즈 PSD 파일 공유>

 

PSD포토샵파일과 AI일러스트파일 - 사이즈별 템플릿

썸네일 640 AI.ai

0.34MB

썸네일 640 PSD.psd

0.04MB

---

그렇다면, 왜 레이아웃이 좋아야 될까?

요즘 TV에 신박한 정리를 보는데, 정리가 얼마나 중요한지를 보여준다.
예를 들어, 밥솥 밑에 쌀통을 두어 사용자의 편의성을 높이고,
어린이 공간에서는 책장을 가로로 눕혀 어린이의 시선을 편안하게 해 준다.
이게 바로 사용자에 대한 배려라고 할 수 있다.
물론, 전문가가 아닌 모든 사람들이 동선이나, 눈높이, 공간 분리 등을 잘할 수는 없겠지만,
다른 집에서 하는 것으로 보고, 학습하면 충분히 나의 공간에 적용하고 개선할 수 있다.

레이아웃도 디자인에서 공간 정리와 비슷하다.
고객의 생각의 흐름에 맞춰, 디자인을 정리하고
타깃의 눈높이에 맞춰 글자크기 혹은 색상을 결정한다.
이 것이 구매자에 대한 배려이다.


처음 상세페이지 디자인 제작 교육을 들으러 갔을 때,
강사님께서 하신 말씀이 인상적이다!

" 고객이 나의 쇼핑몰에 구경하러 와서, 불편함만 없으면 적절한 디자인이다!"

뭐를 더할 필요 없이, 불편한 요소들만 제거해주면 그걸로 합격이라는 뜻이었다.
무조건 더 좋게 더 더하고 싶었는데, 뺄 수 있는 만큼 빼라니...



또 신박한 정리를 얘기하게 되는데,
거기서 신애라 님이 말씀하신 것 중에
정리의 기본은 비우기부터라고 했다.



상세페이지를 만들다 보면,
나의 상품에 대해 이렇게 저렇게 하고 싶은 말이 많아진다.
그러나, 그 말을 다 하고 있으면 어떻게 될까?
이는 우리가 옷장에 옷이 많으면 생겨나는 일과 같다.
옷장에 옷이 쌓이다 못해 어디, 어느 옷이 있는지 찾을 수 없을 지경이 될 것이다.
딱! 딱! 보기 편하게, 작년에 안 입은 옷은 버리거나 나눔을 하고,
내가 잘 입고, 좋아하는 옷에 공간을 할애해야 한다.

디자인도 똑같다!

고객이 집중할 수 있는 페이지의 길이는 그리 길지 않다!
판매자가 똑똑할수록 고객에게 더 좋은 서비스를 제공할 수 있고,
그 고객은 더 많은 고객을 불러올 것이 틀림없다~

---

그렇다면 레이아웃을 잘 구성하는 방법은 무엇일까?

 

레이아웃은 그리드(격자)에 의해 형성되고,

이는 정보를 정리하는 수단이자 신뢰감을 주는 요소가 된다.

정보를 더 쉽게 이해하고, 명확하게 표현할 수 있도록 도와준다.

 

"좋은 레이아웃은 미적인 요소뿐 아니라 기능적인 요소도 충족해야 한다."

 

 

레이아웃 디자인을 하기 위한 고려요소 4가지
1. 조형성	전달하고자 하는 메세지를 효과적으로 전달하기 위한 수단으로 조형을 구성 - 여백활용
2. 가독성	쉽게 읽히는 정도 - 글자크기 / 글자의 공간 / 글줄과 글줄 사이의 간격 / 글줄의 길이 등
3. 주목성	색상 / 형태 / 변형(늘어남, 줄어듦, 층밀리기, 휨, 비틀림 등) / 유머 / 변화 / 대비 등
4. 통일성	서로 관계성을 가지고 상호보완 - 폰트배치, 크기, 종류, 굵기 통일

[출처] 정다희, 모바일 환경에서 전자책의 레이아웃 디자인 분석 연구, 한양대학교 석사학위논문, 2019, p23

 

 

우연히 찾은 논문인데, 딱 궁금해하는 내용이 쏙쏙 들어있어서,

논문의 일부 내용을 발췌해서 재편집하였다.

 

1. 조형성

전달하고자 하는 메시지를 효과적으로 전달하기 위한 수단으로써의 조형을 구상하는 것이다.

이쁜 게 장땡이라며, 미에 치우치기보다는 정보의 전달을 최우선으로 생각해야 한다.

물론, 때에 따라 고급적인 요소를 강조하고 싶을 시에는 미에 치우쳐야 할 때도 있다.

 

2. 가독성

가독성은 쉽게 읽히는 정도를 말하며, 내 상품의 타깃에 따라 조금씩 달라진다.

나이 때에 따라 읽는 습관이나, 선호하는 글자체가 다를 수 있다.

글자크기 / 글자의 공간 / 글줄과 글줄 사이의 간격 / 글줄의 길이 등을 잘 조절하면,

누구나 읽기 쉬운 디자인을 만들 수가 있다!

 

3. 주목성

다양한 사람들이 비슷한 제품을 판매하는 사람이 많을 것이다.

이 중에서 나의 상품이 고객의 주의를 끌고, 눈에 잘 띄어야 할 것이다.

일반적으로 디자인을 강조하기 위해서는,

색상 / 형태 / 변형(늘어남, 줄어듦, 층밀리기, 휨, 비틀림 등) / 유머 / 변화 / 대비 등을 이용한다.

 

4. 통일성

눈코입 다 따로 보면 이쁜데, 같이 놓고 보면 조화롭지 못한 얼굴이 있다.

디자인도 마찬가지로 조화롭지 못하고 따로 놀면 좋은 디자인이 아니다.

차라리 조금씩 모자라도, 각 요소끼리 조화롭게 통일감이 있는 편이 낮다.

 

 

상세페이지 레이아웃에 필요한 4가지 구성요소를 이용하여,

고객의 머릿속에 나의 상품을 효과적으로 인지할 수 있도록 하길 바란다.