통일감있고 일관성된 홈페이지와 상세페이지를 제작해보세요!

홈페이지에서 상품을 구매 시, 상품 상세페이지는 어떻게 구성이 되어야 방문자가 읽고 보기가 편할까요?

상세페이지 내용 구성도 중요하지만 홈페이지와 상세페이지의 일관된 버튼과 효과, 디자인 컬러, 구도를 상세페이지도 적용시켜 작업해주시면 통일감을 줄 수 있습니다.

상세페이지는 상품설명서를 쉽게 확인할 수 있도록 간추려 만든 페이지입니다.

구매자가 구매를 결정하는 건 상품이 필요하고 구매의향이 있어서지만, 같은 가격대의 상품을 판매한다면 제품에 대한 세부내용이 잘 표현되어 있고 설명이 보기 쉬운 홈페이지에서 구매를 할 것입니다.

구매자가 구매를 쉽게 하기 위해서는 우선, 홈페이지에서 바로 이탈하지 않고, 상품을 찾아가기 위해 메뉴버튼을 찾기 쉬워야 하며, 결제 이전까지 이탈하지 않고 장바구니/구매까지 이뤄져야합니다.

이를 위해서는 홈페이지 + 상세페이지 제작 시 메인과 상세 페이지의 이어짐이(통일감, 일관성) 혼란스럽지 않아야 하며, 기억에 남을 수 있도록 시각적 영향력을 행사해야 합니다.

(이미지는 시각적으로 한눈에 들어오기 때문에 영향력을 무시할 수 없습니다.)

* 이미지에 배경색은 흰색을 사용하시는것을 추천드립니다.

- 이미지는 텍스트 보다도 영향력이 있기때문에, 고퀄리티 이미지와 텍스트를 적절히 조합하여 안정감있는 구도로 작업하셔야 합니다.

- 이미지 뒤에 배경색을 넣게되면, 다른 상품을 교체하거나, 이미지 사이즈 수정 시 배경을 또 수정해야하기때문에 번거로움이 들 수 있습니다.

- 홈페이지 제작 시 템플릿이나 스킨을 사용하시면, 템플릿의 메인컬러와 서브컬러가 지정되어 있습니다. 대표컬러와 세부컬러가 제목, 버튼 등에 알아서 색을 지정해주기에 통일감을 형성시킬 수 있습니다.

<대표컬러 지정이 핑크색 계열 일 시>

대표 컬러에 따른 제목, 버튼 소제목의 컬러 통일감

<대표컬러 지정이 녹색 계열 일 시>

* 구매자나 방문자가에게 가독성 높은 폰트로 구매률을 높이는 문구를 작성하시기 바랍니다.

- 구매율을 높일 수 있는 문구가 녹아 들어갔는지

- 구매자나 방문자가 보기 쉽고 읽기 쉽게 구성되어있는지 확인해보시기 바랍니다.

* 모바일에서도 최적화된 상세페이지인지 모바일에서 확인해 보시기 바랍니다.

- 폰트도 읽기 쉬운 사이즈인지, 이미지가 모바일에서 작아서 안보이는 것은 아닌지. 상세페이지를 다 읽기에 스크롤을 너무 쭉쭉 내려야 하는것은 아닌지도 확인하시기 바랍니다.

- 한행에 이미지 최대 2개까지 배치해야 모바일에서는 보기 쉽습니다.

* 이미지의 용량을 줄여 페이지 로딩시간을 단축한다면 페이내의 이탈률이 줄어들 것입니다. 이는 구매전환률을 높이는데 중요한 요소이기도합니다.

상세페이지는, 상품을 장바구니에 담기, 구매하기까지 가기전에 나오는 마지막 페이지입니다.

상품 구매는 구매자의 몫이므로 가격이나 배송요인을 변경하기 어렵다면, 방문자와 구매자가 홈페이지를 조금 더 편리하게 이용할 수 있게 함과 상세페이지에서의 각인으로 구매를 높일 수 있는 방법을 제시해드립니다.

상세페이지나 홈페이지를 운영하신다면 위 내용은 당연히 생각해봤고 실천하고 계신 분들도 많으실것이라고 생각합니다. 하지만 항상 동일한 상세페이지를 작업하다보면, 한번씩 그 본질을 까먹고 작업을 할때가 찾아오기도 합니다. 다시 한번 내 홈페이지와 상세페이지의 중요성을 생각해보실 수 있는 시간이었으면 합니다.