디자인 지식

상세페이지 디자인도 유행을 탄다고 하는데...에 대해 알아봅시다.

su.b 2021. 8. 14. 15:00

디자인숩 [알쓸디지]

이 글은 오픈마켓에서 사용할 수 있는 jpg 상세페이지에 관한 내용입니다.


저는 컴퓨터로 온라인 쇼핑을 즐기던 때와 스마트폰으로 넘어가던 중간 시절부터 디자인을 해왔습니다. 그렇기에 상세페이지 디자인이 진화하는 과정을 실시간으로 지켜볼 수 있었습니다.

지금 생각해 보면 그때가 유행이 빠르게 변화한다는 말을 체감한 시점이 아닐까란 생각을 합니다.



  • 인터넷으로 쇼핑을 즐기던 시절의 상세페이지


인터넷으로 쇼핑을 즐기던 시절의 상세페이지는 모니터 비율에 맞춘 가로 형태의 이미지와 디자인을 많이 사용했습니다.

가로로 긴 이미지들


예시 이미지처럼 인트로 / 본문 설명 1/ 본문 설명 2를 모니터 해상도의 비율로 내용을 딱딱 나눠서 디자인을 했기에 가로 형태의 이미지가 많이 들어갈 수밖에 없는 구조였습니다.

 

 

 




상세페이지 길이 또한 길게 만드는 걸 추천하지 않았기에 내용이 많아지면 문단과 문단 사이 여백 없이 촘촘한 사전을 읽는 느낌으로 디자인했습니다.

비교적 촘촘한 간격들


이런 상세페이지가 가로가 긴 모바일로 넘어오면서 이미지 그리고 레이아웃의 형태가 점점 변화됩니다.

 

 

 

 

 

 

 

  • 모바일에 최적화되어가는 상세페이지 디자인

 

세로로 길어진 이미지들

우리는 소비자들이 모바일로 온라인 쇼핑을 많이 하는 것을 깨달았기에

-그 깨달음은 보통 1 : 1 문의글에 글씨가 안 보인다는 컨플레임을 받거나 오픈마켓 가이드라인에 있는 폰트 크기를 보고 페이지 폰트를 통제로 수정할 때 발생합니다.-

그에 맞춰 디자인이 변화되었습니다.

비교적 넓어진 간격들

이렇게 모니터로만 상세페이지를 보던 시절과는 달리 모바일로 전환이 되어가면서 사용하는 이미지의 크기와 폰트의 크기까지 커지게 됩니다.

거기에 추가로 온라인 판매가 활성화되면서 다양한 제품들을 판매하게 되었기에 페이지 길이가 점점 더 늘어나는 등의 효과가 발생하여



우리는 이 긴 상세페이지를 지루하지 않게 하기위해 중간중간 컬러를 변환하거나 여백을 주는 등의 노력을 합니다.


모바일로 넘어오는 시점에서부터 사용하는 이미지 길이와 그리고 각각의 문단의 길이가 길어졌습니다.


유행에 따라 그리고 편이에 따라 변한 점도 있지만 디자이너가 많아짐과 동시에 표현의 자유가 다양해졌기에 변화되었다고도 볼 수 있습니다.



유행하는 디자인에 맞춰가고 싶다면 최근에 광고하는 상품들의 상세페이지를 한번 참고해보세요 그렇다면 여러분은 최신 유행을 파악할 수 있습니다.


디자인숩 올림

 

 

 

반응형