스마트스토어 상세페이지 제작 주목받는 디자인 만들기

모이모이 IT스토리를 운영하면서 가장 많이 접하는 영역이 스마트스토어입니다. 이러한 인터넷 쇼핑몰에서 원하는 만큼 매출을 올리기 위해서는 아이템 선정이 중요합니다. 다음이 주목받는 디자인의 스마트 스토어 상세 페이지를 작성해야 합니다.

일반적으로 상세 페이지 작성은 디자이너에게 의뢰합니다. 실력 있는 전문가 만나는 것도 어렵지만 제가 원하는 포인트를 정확히 전달하고 마음에 들게 반영됐는지 소통하는 과정도 상당히 번거롭고 힘듭니다.

이럴 때 ‘누구나 디자이너가 되다’라는 모토를 가진 망고 보드의 다양한 템플릿을 참고하여 직접 상세 페이지 디자인 제작에 도전할 수 있습니다. 사업 초기에는 비용 절감에 도움이 되고 실제 고객 반응을 보면서 셀링 포인트를 변경하여 빠르게 대처할 수도 있습니다. 처음 과정에 익숙하지 않더라도 충분히 도전해 볼 가치가 있습니다.

망고보드에는 용도, 사용처, 스타일, 색상별 큰 카테고리가 있습니다. 또한 카드뉴스, 인포그래픽, 프레젠테이션, 포스터, 전단지, 유튜브 썸네일/채널아트 등의 용도와 쇼핑몰, 공공기관, 기업, 프리랜서 등 사용처별 다양한 세부 카테고리로 구분되었습니다.

각 카테고리에는 디자이너가 업로드 해놓은 다양한 샘플이 있습니다. 또한 시즌, 계절, 큰 이슈 등에 따라 꾸준히 업데이트되고 있으니 참고할 만한 템플릿이 부족하지 않을까 걱정하실 필요는 없습니다.

오늘은 요즘 취미로 즐기는 맛있는 커피를 추출해주는 모카포트를 가지고 스마트스토어 상세페이지를 제작해보려고 합니다. 전문적인 교육을 받지 못하고 미적 감각도 떨어지는 제가 다양한 샘플을 활용해서 어떻게 결과물을 만드는지 확인해 보세요.

같은 카테고리라도 용도별과 사용처별-쇼핑몰을 선택했을 때 조금 다른 위치에 나열됩니다. 키워드를 검색하는 방법도 있고, 자신이 가지고 있는 아이템에 적합한 항목을 선택하면 좀 더 쉽게 커스터마이징할 수 있으니까 꼼꼼히 비교하면서 찾아보세요.

모카포트가 커피를 추출하는 기기이기 때문에 에스프레소 머신 이미지가 있는 샘플을 선택했습니다. 마우스 커서를 가져가면 총 몇 장으로 구성되어 있는지 볼 수 있으며 클릭하여 키워드를 확인하고 마음에 들면 편집을 시작할 수 있습니다.

에디터에서 볼 수 있는 텍스트와 이미지, 표, 아이콘 등 모든 항목은 각각 추가, 삭제 및 위치 및 크기를 조절할 수 있는 객체로 구성되어 있습니다. 편집이라고 하면 부담스러울 수 있지만 실제로 오피스 프로그램 정도는 다룰 수 있어도 누구나 익혀서 바로 사용할 수 있을 정도로 간단합니다.

우선 직접 촬영한 제품의 사진과 동영상을 업로드했습니다. 동영상은 100MB에 제한이 있어서 용량을 잘 조절해야 합니다. 요금제는 학생과 일반, 프로 세 종류가 있으며 업로드 용량은 각각 300MB, 3GB/30GB로 다릅니다. 무료로 회원가입만 해도 100MB가 제공되므로 충분히 활용해보시고 필요하다고 판단되면 유료로 전환하셔도 됩니다.

첫 번째 슬라이드에서 텍스트를 브랜드를 모이모이 카페에 입력하고 제품 설명도 모카 포트에 맞게 변경했습니다. 아이템 선정 단계부터 모두 알고 있는 내용이기 때문에 어렵지 않게 설명을 작성할 수 있습니다.사진 추가도 정말 쉬워요. 업로드한 파일을 클릭하면 에디터에 들어가는데 클릭한 상태에서 원하는 위치로 이동하면 배경화면으로 지정됩니다.더블 클릭하면 추가한 사진의 크기와 위치, 기울기 등도 조절할 수 있기 때문에 원하는 형태의 배경으로 만들 수 있습니다. 직접 촬영한 사진이 마음에 들지 않으면 망고보드에서 지원하는 다양한 배경이나 관련 이미지를 검색해 바꿀 수도 있습니다.직접적인 제품 설명이 아닌 배경을 훌륭하게 촬영하기 위한 투자를 줄일 수 있습니다. 또한 기본적으로 포함된 글꼴이나 그래픽, 도형, 선, 아이콘, 캐릭터 등 모든 항목은 저작권 문제 없이 상업적인 용도로 사용할 수 있습니다. 상세 페이지를 만드는 데 드는 시간과 비용을 절약하고 다른 곳에 투자할 수 있는 여유를 확보할 수 있습니다.상세페이지 디자인 작성 시 배경 없이 제품만 필요할 수 있습니다. 이러한 결과는 보통 포토샵과 같은 프로그램을 다룰 수 있어야 하고 불가피하게 의뢰해야 하는 경우가 있었습니다.망고보드를 이용한 후에는 포토 에디터의 누키 사냥을 이용하면 되기 때문에 작업이 정말 쉬워졌습니다. 업로드한 파일을 클릭하여 편집기에 넣고 포토 에디터로 이동합니다. 다음 배경 삭제를 실행하면 빠른 누키 제거가 됩니다. 마지막으로 원하지 않는 영역을 지우개로 지워줬더니 모든 작업이 완료되었습니다.기존에 있던 다른 제품을 삭제한 후 빼낸 결과의 크기와 위치를 조절하여 배치하였습니다. 클릭과 드래그 앤 드롭, 타이핑 몇 번으로 첫 번째 슬라이드를 완성할 수 있었습니다. 지금까지 보여드린 과정이 가장 기본적인 사용법이기 때문에 직접 가능한지 판단해 보세요.벽지 자리에 동영상을 넣을 수도 있습니다. 실제 커피가 추출되는 모습을 촬영한 후 동영상에 넣었더니 더 리얼해 보였어요. 영상도 왼쪽 메뉴에서 검색해서 넣는 방법도 있으니 잘 활용하시면 됩니다.모든 작업을 마친 후에는 PNG, JPG와 MP4, GIF 등으로 다운로드할 수 있습니다. 또한 PPTX에서 저장하여 파워포인트로 수정하거나 프레젠테이션 자료로 활용할 수 있으며 PDF로 보내자마자 인쇄 의뢰를 할 수 있어 다양한 용도로 이용 가능합니다.앞뒤.앞뒤.앞뒤.앞뒤로 원본과 편집을 거쳐 완성된 결과물을 함께 업로드하여 비교해 보았습니다. 전체적인 큰 틀은 그대로 유지하면서 문구와 이미지, 각종 아이콘을 교체하고 동영상까지 넣어 제가 스마트스토어에서 판매하는 제품을 돋보이게 하는 디자인이 적용된 상세 페이지 제작을 마쳤습니다. 누구나 쉽게 익혀 퀄리티 높은 완성이 가능하니 무료로 충분히 테스트 후 결정해주세요.앞뒤로 원본과 편집을 거쳐 완성된 결과물을 함께 업로드하여 비교해 보았습니다. 전체적인 큰 틀은 그대로 유지하면서 문구와 이미지, 각종 아이콘을 교체하고 동영상까지 넣어 제가 스마트스토어에서 판매하는 제품을 돋보이게 하는 디자인이 적용된 상세 페이지 제작을 마쳤습니다. 누구나 쉽게 익혀 퀄리티 높은 완성이 가능하니 무료로 충분히 테스트 후 결정해주세요.