[스크랩] 내가게(사이트) 인테리어는 대충 하셨습니까? -상세 페이지

 쇼핑몰에 들어와 상품 사진을 보고 클릭을 하게 되면 상품 상세 페이지로 넘어 갑니다.

상세페이지를 표현하는 방법에는 여러가지 형태와 기술적인 부분이 있습니다.


첫번째로 많은 쇼핑몰들이 사용하고 있는 롤스크롤 방식입니다.
(정확한 용어가 없기때문에 롤스크롤 방식이라고 하겠습니다.)

옥션 상세페이지

위 에 보시는것 처럼 상품의 사진이 왼쪽에 있고  마우스  스크롤을 아래로 내리면 더많은 정보가 있는 형태입니다. html 를

이용한 대다수의 쇼핑몰에서 사용되고 있는 방식이며 가장 간단한 형태입니다. 오른쪽 스크롤을 보시면 막대가 아주 작아졌

습니다. 상세페이지 내용이 정말 많다는걸 한눈에 봐도 알수가 있겠습니다.

이러한 방식의 장점은 공간의 제약을 받지 않고 원하는데로 상세 정보를 집어 넣을수 있다는 것과 포토샵 으로 작업한 jpg,gif

이미지나  플래쉬,동영상등을 쉽게 보여줄수 있다는 것입니다.

고객의 입장에서는 상세페이지에 들어와 마우스 가운데 바퀴를 굴려 편하고 손쉽게 한눈에 모든 정보를 볼수 있기때문에 쇼

핑몰 체류 시간이 조금은 길어지고 볼거리가 풍성하여 구매로 이어질수 있는 퍼센티지가 높아집니다.

그러나, 이런 롤스크롤 상세페이지 방식은 내용이나 이미지가 많아지면 페이지 뜨는 시간이 조금은 느려질수 있습니다.

그 시간이 비록 0.5 ~ 1초 사이에서 왔다갔다 하겠지만 로딩이 되는 순간 고객들은 뒤로가기를 누르게 됩니다.

처음 찾게되는 사이트 체류시간이 3초 안팎 인점을 감안한다면 0.5~1초의 시간은 굉장히 소중한 시간이라 할수 있습니다.
 
상세페이지 전체를 포토샵으로 제작하여 전체를 이미지화 하여 웹저장으로 용량을 가볍게 한뒤 몇컷으로 나눠 보여주는 것과

 html 작업으로 텍스트화 하여 보여 주는 것입니다.

이미지 작업은 다양한 글씨체와 상품의 배치나 디자인을 쉽게 할수 있다는점등이 큰 장점이지만 외부에서 검색을 했을때 전혀

찾을수 없다는 단점이 있습니다.

이미지는 웹상에서 이미지의 파일이름은 찾아내지만 이미지안에 내용은 절대로 찾지 않습니다. 텍스트 작업은 글씨체가 웹

돋움이나 굴림 11이나 12로 맞춰져 글자의 크기를 키울경우 깨져버리거나 미관상 보기가 안좋습니다.  하지만 검색 로봇들이

하루에도 수백번은 오고가기 때문에 외부포털이나 검색에 상세페이지 내용들이 노출이 됩니다.

 
롤 스크롤 방식은 사용하기도 편하고 작은용량에 고 퀄리티의 사진을 빠르게 보여줄수 있다는 장점과 많은 내용을 자유롭게

넣을수 있다는 점에서 널리 이용되고 있는 방식입니다.




두번째로 많이 사용 되고 있는 방식은 롤오버 방식 입니다.

스토리샵 상세페이지

위 이미지를 보시면 가방의 사진은 딱 세개 입니다. 큰 가방 사진 밑에 작은 사진 세개가 있습니다.  이 작은 사진 위에 마우스를

갖다 대면 큰 사진이 바뀌는 롤오버 방식입니다.

이러한 방식은 상세페이지 구성요소를 깔끔하게 처리할수 있다는 장점이 있습니다.
롤스크롤 방식과 크게 차이는 없지만 상품의 중심을 큰사진 하나에 작은사진 몇개로 표현 한다는 것입니다.  마우스 가운데 바퀴를

심하게 굴릴 필요가 없습니다.

대체적으로 롤오버 방식은 상품페이지를 만드는 비용이나 시간이 롤스크롤 방식에 비해  적게 들고 중요한 포이트만 적절하게 집어

서 표현합니다.

고가의 제품이나 고급 상품들은 사진이나 내용이 많은게 아니라 단 한장의 사진으로 상세페이지를 만드는 경우가 많습니다.

한예로, 롤 스크롤 방식으로 수많은 사진과 상품내용을 보고 구매하는 비율과 롤 오버 방식으로 몇개의 사진만 보고 구매 하는 방식의

비율 차이는 거의 없다고 합니다.

외국의 대다수의 쇼핑몰들은 사진 한장으로 상세페이지를 만들거나 롤오버 방식으로 몇개의 사진만으로 상세페이지를 만들고 있습니다.

이러한 상세 페이지 작업은 고객들이 오프라인상에서 그 상품에 대해서 어느정도 인지하고 있거나 혹은 굳이 내용이 많지 않더라도 충분히

팔릴수 있는 상품일 경우입니다.



세번째는 국내에서는 많이 사용 되지 않지만 나름 특색있는 플래쉬 방식 입니다.

플래쉬 상세 페이지

이 사이트는 꼭 들어가셔서 상품을 클릭해 보시기 바라겠습니다.

플 래쉬 방식은 말그대로 상세 페이지에서 상품을 클릭했을때 새창이 뜨면서 상품의 세밀한 부분까지 확대하여 볼수 있는 방식입니다.

 물론 플래쉬로만 만드는것은 아니고 다른것으로도 충분히 구현 가능합니다. 하지만 플래쉬가 가장 보편적이고 만들기도 쉽고 용량도

적으니 플래쉬로 많이 만들고 있습니다. 국내에서는 잡지 사이트 같은곳에 가시면 몇번 확대하여 글자를볼수 있는 그런 방식입니다.

이 기법은 저작권으로 보호 받고 있어서 함부로 소스를 퍼가서 사용하시면 안됩니다.



네번째는 XML 상세 페이지 입니다.

XML 상세 페이지

XML 상세 페이지는 상품을 클릭했을때 다음 페이지로 넘어가서 상품의 가격정보나 상세
정보가 보여지는것이 아니라 지금 보고 있는 그 페이지에서 모든걸 볼수 있는 방식입니다.
쇼핑을 하다보면 몇번의 페이지를 넘겨야  결제가 완료 되는곳이 많습니다.


제가 몇가지 소개 해드렸는데 기존의 이미 알고 계시거나 혹은 새롭게 접하시는 분들이 계실겁니다.
어떤 방식으로 상세페이지를 만들던 그건 나를 위해서도 아니고 쇼핑몰이 멋져 보이게 하기
위한것도 아닙니다. 고객들에게 얼마나 편하고 쉽게 서비스를 제공하느냐 그것 입니다.

각 아이템에 맞게 적절한 상세 페이지를  만드신다면 고객들은 편안한 쇼핑을 할수 있을겁니다.

출처 : ▣ 내가게:인터넷쇼핑몰운영자모임

글쓴이 : introKING 원글보기

메모 :