[네이버 스마트스토어] 쉽지 않은 상세페이지 제작

마인도어라는 사회적 기업이 이번에 교회버전 질문카드를 제작하게 되어 상세페이지 제작을 의뢰받았다.

쉽게 금방 할 수 있을 줄 알았는데 생각보다 어려운 작업이 되었다. 상세페이지 제작을 어렵게 했던 부분과 해결 방법을 좀 정리해보려고 한다.

😢 나의 예상과 달랐던 의뢰자가 준 정보

의뢰자가 잘못한 건 아니고 내가 상세페이지 제작을 너무 쉽게 생각했다.

모든 리소스가 갖추어진 상태에서 디자인만 깨작하면 된다고 생각했다.. ㅋㅋㅋ

의뢰자가 상세페이지 구성을 보내준다고 했을 때, 나는 사실 레이아웃이 대충이라도 짜여서 올 줄 알았다. 하지만 아니었다. 모든 것이 텍스트로 왔다. 텍스트로 되어있는 콘텐츠들을 이미지로 재구성하는 일은 쉽지 않았다.
그래도 마인도어는 이미 1개의 예쁜 상세페이지를 갖고 있어서 스타일을 참고할 수 있었다.
그 외에도 많은 상세페이지를 보고 또 봤다. 역시 디자인을 하는 것은 벤치마킹(모방)의 연속이다.

나에게 상세페이지 제작을 위한 사진 촬영까지 가능하면 같이 해달라고 했지만 그건 불가능할 것 같아서 거절했다. 이후 사진은 몇 가지 버전으로 받을 수 있었다.
예상한 것보다 사진의 수량이 많지 않았고 상세페이지의 컨텐츠에콘텐츠에 맞게 촬영된 것이 아니라서 콘텐츠에 사용하기 어려웠다.
그래도 사진과 함께 상품에 사용되는 일러스트를 함께 보내주어서 활용할 수 있었다. 한정된 리소스로 콘텐츠를 만들어내는 일은 쉽지 않지만 성공했을 때 즐겁다. 퍼즐 같다.

제본을 맡기기 위해 처음 인디자인을 사용했을 때가 생각이 난다. 종이라는 제한된 사이즈 안에 내용을 넣어야 하는데 레이아웃은 일정해야 하는 것이 참 어려웠다.

스마트스토어에 올리는 상세페이지는 검색을 위해 텍스트가 최대한 많이 들어가야 하는데 스마트스토어에 상세페이지를 올리는 환경이 생각보다 제한이 많았다.

글자 뒤로 단순한 색상을 포함하여 배경이 깔리려면 무조건 이미지를 사용할 수밖에 없다. 최대한 텍스트를 많이 쓰기 위해서는 배경색을 넣지 않아야 했다.
페이지가 길어지면 배경색으로 영역을 구분 짓는 게 편한데 그러지 못해서 힘들었다. 텍스트와 텍스트 사이에 구분을 예쁘게 지을 수 있는 이미지를 만들기 위해 많은 노력을 했다.

놀랍게도(~~어이없게도~~) 스마트스토어에 상품을 올리는 스마트에디터로는 폰트를 바꿀 수 없었다. 폰트에 제한 또한 엄청나게 디자인을 힘들게 만들었다.
검색을 통해 스타일을 html 인라인로 넣어서 폰트를 바꿀 수 있었다. 보는 사람의 컴퓨터에 폰트가 설치되어 있지 않으면 기본 폰트로 보일 것이라 예상된다. 하지만 실제로 업로드를 해보지 않아서 실제 사용이 가능한지는 확인해보지 못했다. 그래도 일단 텍스트를 나눔 폰트를 사용할 수 있다는 가정하에 디자인을 했다.

최근에 팀장님에게 글자 간 간격 조절의 중요성에 대해 배웠다. 자간만으로 분위기가 많이 달라지는 것을 알게 되어서 디자인을 하면서 자간에 꽤 집착하게 됐는데 스마트에디터에서는 자간 설정이 불가능했다. 스마트에디터로 업로드할 때 폰트가 내가 원하는 대로 적용된다고 해도 자간 때문에 좀 다르게 느껴질 것이다.

쉽지는 않았지만, 평소 해보지 못했던 작업이라 더 재밌었다. 게다가 완성작을 의뢰자가 생각 이상으로 마음에 들어 해서 아주 뿌듯했다.
디자인뿐만 아니라 여러모로 배운 게 많아서 좋다.
업로드는 의뢰자가 하기로 했다. 내가 업로드까지 하게 될 줄 알고 상세페이지의 완성본과 실제 업로드될 페이지가 최대한 동일할 수 있게 디자인을 했다. 하지만 의뢰자가 그 부분까지 염두에 두고 업로드할지는 모르겠다.