• Client: 내추럴 라이프 스타일
• Launching Date: 2017년 8월 25일

Background

카페24의 쇼핑몰 솔루션은 쇼핑몰 운영을 위한 무료 호스팅과 다양한(거의 모든) 편의 기능을 제공합니다. 그렇다 보니 이미 카페24의 쇼핑몰 솔루션을 이용하여 사이트를 운영하고 있다면 다른 플랫폼으로의 이전을 권하기가 어렵습니다. 별도의 호스팅 비용이 발생할 수 있고 또 새로운 쇼핑몰 솔루션을 학습해야 하는 불편함도 크기 때문입니다.

우커머스 플러그인을 이용하여 워드프레스 기반으로 제작하는 쇼핑몰은 더욱 그렇습니다. 지금까지의 쇼핑몰 운영 및 프로모션 방식 자체가 콘텐츠 중심으로 바뀌어야 하기 때문입니다.

결국 오엠(OM) 코리아의 새로운 사이트 구축 프로젝트는 카페24의 쇼핑몰 솔루션을 그대로 이용하면서 스킨만 새롭게 제작하는 정도로 제안되었습니다.

Design

제품 썸네일 이미지

기존 사이트에서 가장 큰 문제점은 바로 제품 썸네일 이미지였습니다. 전체 썸네일 사이즈와 비교하여 제품의 사이즈가 너무 작았기 때문입니다. 게다가 어색한 반사 효과가 과도하게 적용되어 있어서, 고가의 유기농 화장품이라는 브랜드 이미지와도 맞지 않았습니다.

반사 효과가 (과도하게) 적용된 고해상의 이미지가 jpg 형태로 관리되고 있었지만, 배경이 분리되어 있는 상태는 아니었습니다. 90여개의 제품 이미지 누끼 작업을 진행하기에는 일정과 비용 모두가 맞지 않았기 때문에 기존 이미지 위에서 과도한 반사 효과를 줄이고, 배경색을 옅은 회색으로 변경하는 작업을 진행하였습니다. 썸네일 하단에는 반투명의 그라데이션을 적용하여 과도했던 반사 효과를 약하게 만들었습니다.

 

메인페이지 상품 노출

이전의 메인페이지는 ‘Weekly Best Item’, ‘New Arrivals’, ‘Best Item’ 3개의 영역으로 구분되어 있었습니다. 그렇다 보니 3개 영역에서 동시에 노출되는 제품의 수가 많았습니다. 또한 4~5단의 컬럼으로 나열되어 있어서 메인페이지에 펼쳐 놓은 제품의 수가 50여개에 달했습니다. 이런 식의 나열은 쇼핑몰의 다채로움을 보여준다기 보다는 정리되지 않은 창고 같은 모습으로 보여졌습니다.

이를 해결하기 위해서 새로운 스킨에서는 가장 인기가 많은 제품 9개를 Best Seller란 이름으로 묶어서 나열하였습니다. 3단 컬럼을 적용하여 제품 썸네일이 더욱 강조되도록 하였고, 제품 정보는 중요도에 따라서 리듬감있게 크기와 색상을 조정하였습니다.

상세 페이지

카페24 쇼핑몰의 최대 문제점은 사실 콘텐츠 영역을 등록하는 WYSIWIG 에디터입니다. WYSIWIG 에디터가 어떻게 HTML 코드를 생성하는가는 매우 중요한 문제입니다. 국산 WYSIWIG 에디터의 문제점을 지적한 바 있는데, 그 중에서도 카페24의 WYSIWIG 에디터는 최악입니다.

그 동안 대부분의 쇼핑몰 운영자들은 제품 상세 설명을 이미지로 처리해왔습니다. 그러니 WYSIWIG 에디터는 이미지를 업로드하고 게시할 수 있는 수준이면 충분했습니다. 하지만 이 마저도 불필요한 태그들을 마구 생성하고 있습니다.

 

정말 바라는 것 없으니, 카페24는 이 WYSIWIG 에디터 만이라도 교체해주길 바랍니다. 오엠 코리아의 제품 상세 페이지는 별도로 코딩한 코드를 붙여넣는 방식으로 진행했습니다.

 

카페24 쇼핑몰 스킨 제작은 지난 몇 번의 경험으로 많이 익숙해졌습니다. 하지만 매번 진한 아쉬움을 남기게 됩니다. 카페24 쇼핑몰 솔루션이 현 시스템 하에 사용성 개선이 이루어질 수는 없어 보입니다. 좋은 UX 전문가가 참여한 Ver. 2를 간절히 기대해 봅니다.

그리고 크리에이티브 밴드는 우커머스가 적용된 새로운 e커머스 테마를 제작 중에 있습니다. 곧 출시될 Creative Store 워드프레스 테마에 대해서도 많은 관심 부탁드립니다.