스마트 스토어(스토리보드:2)

1. 스마트 스토어 ( 읽기 편한 상세페이지 꾸미기)

 

스마트 스토어에 등록한 상세 페이지 이미지는 모바일이나 태블릿 화면 등 사용하는 기기에 맞게 리사이즈되어 보입니다. 
즉, 모바일 화면 크기에 맞춰서 작게 보여요. 
이렇게 작은 화면으로 상품 상세 페이지를 보는 고객들을 고려하여 모바일에 최적화된 상품 상세 페이지를 만들어야 합니다. 

 

스마트 에디터에  등록하는 상세 페이지 제작 방식은 HTML을 제외하면 크게 두 가지가 있습니다. 
A:포토샵을 이용해서 완성한 한 장의 파일을 등록하는 방식과 
B:스마트 에디트 에디터에서 직접 낱장의 이미지와 텍스트를 입력하는 방식이 있습니다. 

 

A 이미지 방식을 통 이미지 방식이라고 하고 B와 같이 글과 이미지를 등록하는 방식을 블로그와 같다 하여 블로그 방식이라고 합니다. 

 

스마트 스토어의 가로 권장 사이즈는 860 픽셀이고 세로 권장 사이즈는 따로 있지 않아요. 
세로 길이는 제품 내용에 따라 페이지가 길어지기고 하고 짧아지기도 하기 때문입니다. 

 

그러나 너무 긴 통 이미지 파일을 용량이 커서 로딩 속도가 늦어지는 원인이 되기도 하기 때문에 모바일 최적화 상세 페이지로는 적당하지 않습니다. 
따라서 모바일에 최적화된 상세 페이지를 만들려면 스마트 스토어의 권장 사이즈(가로: 860 픽셀)를 지키고 가급적 낱장의 이미지를 사용하거나 짧은 길이의 이미지를 나누어 등록하는 것이 좋습니다.  

 

작은 모바일 화면을 고려해서 상품의 불필요한 죄우 여백을 줄이고 상세 페이지의 가로 폭을 최대한 활용하는 것이 좋아요. 

 

만약 포토샵으로 한다고 하면 포토샵에서 사용할 폰트는 제목명 사이즈는 네이버 나눔 고딕 48포인트로 설명글은 네이버 나눔 고딕 30포인트로 해주시면 됩니다. 
그러면 모바일에서 보기에도 잘 보이는 텍스트 사이즈가 잘 보이실거에요. 

 

만약 이보다 폰트 사이즈가 작아질 경우 모바일에서는 가독성이 떨어질 수 있기 때문에 포토샵에서 텍스트까지 작성하여 등록하는 경우에는 모바일 화면을 고려하여 너무 작은 사이즈의 텍스트는 사용하지 않도록 해 주시는 게 좋습니다. 

 

스마트 에디터ONE에서 작성된 텍스트는 모바일에 맞게 자동 리사이즈되어 작성이 됩니다. 
스마트 스토어의 상품 상세 페이지를 제작할 때는 되도록 텍스트는 스마트 에디터 ONE에서 직접 작성하시기 바래요. 

 

문제는 모바일에 맞게 텍스트가 리사이즈되면서 줄 바꿈이 PC와는 다른다는 점입니다. 
모바일 화면에서는 줄 바꿈을 해서 중간 정렬로 글을 쓰면 휠씬 읽기 편한 텍스트가 됩니다. 
텍스트의 행이 너무 자주 바뀌면서 전체적인 텍스트를 읽는데 다소 흐름이 끊기는 단점이기는 하지만 내용을 파악하는 데는 무리는 없어요. 

 

포토샵에서는 사진 2장을 PC로 본다면 별 무리가 없지만 모바일로 본다면 작은 가로 폭을 나누어서 두 장의 사진이 보이기 때문에 이미지와 텍스트가 작게 보입니다. 

 

그래서 가급적이면 2단 구성은 피하는 게 좋습니다. 
상세 페이지에 들어간 이미지나 텍스트가 작은 모바일 화면에서도 잘 보이도록 최적화된 상품 상세 페이지를  만들어 보세요. 

 

모바일 최적화 상세 페이지 만드는 법
1) 이미지 권장 사이즈 지키기
2) 통 이미지보다는 낱장 이미지 사용
3) 택스트는 스마트 에디터ONE에서 작성
4) 사진 2단 구성 피하기