[ 0 ] 들어가기 앞서
2022년 12월 입사하고 2024년 4월 퇴사까지 작업한 디자인 및 퍼블리싱 내용을 정리해 본다.
스스로 회고하기 위해서 작성하는 글이나, 전체 공개이기 때문에 구체적인 수치나 성과 등 기업과 관련된 내용은 배제하겠다.
전 직장에서 내가 퍼블리셔로서 맡았던 업무는 카페24 솔루션을 활용한 식품 e-커머스 쇼핑몰 운영 전반.
운영 기획, UI/UX 디자인, 퍼블리싱, 배너 디자인과 매출 관리 등... 정말 폭넓은 업무를 맡아왔는데 카페24라고 하면 개발자로선 그다지 환영받지 못하는 소위 물경력 취급을 많이 받는다는 걸 입사 후 퍼블리싱 정보를 찾아보면서야 알았다.
하지만 끊임없이 튀어나오는 변수를 스스로 머리를 깨어가며 해결해야 했던 나는, 퍼블리셔 단계부터 시작하는 사람들에게 카페24 퍼블리싱은 꽤 하드한 난이도라는 걸 안다. 상냥한 VScode로 작성해서 멀쩡히 돌아가는 코드는 카페24 편집기로 들어가는 순간 와장창 깨지는 일이 부지기수다. 이것은 (내 기준) 아래와 같은 몇 가지 이유를 들 수 있는데,
|
게다가 자체 편집기를 사용하다 보니 백업을 하는 것도 꽤 손이 가서, 코드를 수정하기 전 로컬에 따로 저장하는 습관을 들이지 않으면 열심히 작성한 코드를 잃는 일 또한 허다하다. 좀 알아보니 어떻게든 git에 올리는 곳도 있는 것 같은데 우리는 아니었다. 편집기 자체에서 히스토리를 제공하긴 하지만 저장하는 시점마다 히스토리가 생성되고, 최대 10개(...)까지만 킵 되기 때문에 크게 의미가 없다. (저장을 해야 미리 보기에 반영되니까 수정 시에는 매 초마다 저장한다고 봐도 무방)
사실 아예 無의 상태에서 시작했더라면 오히려 수월했을 것 같기도 하다. 나는 이미 4년가량 운영되어 몸집이 커진 사이트를 코드 인계 없이 넘겨받은 거라 우여곡절이 참 많았더랬다. 다 지나고 생각해 보니 참 열정 넘치는 1년 6개월이었구나...✨
잡설은 이쯤 하고, 아래부터는 작년부터 올해 퇴사 직전까지 퍼블리싱한 내용을 간단히 정리한 내용이다.
[ 1 ] 프로모션 랜딩페이지
입사 초부터 약 1년가량은 이벤트를 기획하고 그에 맞는 랜딩페이지를 제작하는 것이 나의 주 업무였던 만큼 다양한 컨셉의 랜딩페이지를 제작해 볼 수 있었다. 하지만 다양한 디자인을 해볼 수 있었던 것에 비해 코드는 늘 쓰는 것만 쓰는 경우가 허다한 랜딩페이지인 만큼 기술적으론 크게 기술할 부분이 없다. 때문에 그간 작업했던 페이지 중 기억에 남는 몇몇 디자인과 간단하게나마 JavaScript를 이용했던 랜딩페이지를 추려서 이미지로만 첨부하겠다. 각 코드는 추후 코드 리뷰 형태로 별도 기술하고 이미지 아래에 링크를 첨부해 둘 예정이다.
(1) 할인코드 증정 이벤트
(2) 타임특가 프로모션
(3) 메리윈터 세일 이벤트
(4) 연말 브랜드 어워드 이벤트
(5) 그 외 작업물
[ 2 ] 모바일 홈 화면 리뉴얼
홈 화면 리뉴얼은 입사 첫날 자사 쇼핑몰을 둘러보고 개선 사항을 정리해 보라는 업무를 받았을 때부터 마음먹어온 숙원(?) 같은 것이었는데 퇴사 직전 완수할 수 있었다. 카페24는 반응형 디자인도 사용 가능하지만 우리네 자사몰은 PC, 모바일 화면이 각각 분리된 디자인을 사용했다. 앱 스토어에서 다운로드할 수 있고, PC보다 모바일 이용자 수가 월등히 높은 편이다.
그럼에도 불구하고, 기존 모바일 홈 디자인은 모듈을 제외한 거의 모든 레이아웃이 코드 대신 이미지 임베드로 대체돼 있었는데, 이로 인해 수정용이성이 현저히 떨어졌으며 디자인도 최신 트렌드에 맞지 않는 부분이 있었고 사용성이 고려되지 않은 요소도 몇몇 눈에 띄었기 때문에 많은 신규 유입자들을 이탈하게끔 하지 않을까 걱정이 많았더랬다. 느린 속도와 더불어 전체적으로 신뢰도가 낮은 쇼핑몰의 느낌이 있었다.
위 첨부한 이미지를 통해 기존 사이트와 현재 변경된 사이트 디자인을 대략적으로 확인해 볼 수 있다. 기존 디자인은 ①정렬이나 여백의 비율이 치우친 레이아웃을 몇 군데 찾아볼 수 있었고, ②상품이 오직 수직으로만 정렬돼 있어 스크롤 압박도 상당한 편인데, ③고객이 원하는 상품을 노출하는 것도 아니라 체류 시간이 무척 짧았다. 또한 섹션별 배너가 이미지로 이루어져 있다 보니 ④환경 별로 폰트가 너무 크거나 작아지는 현상도 있었다(태블릿 등). 그중에서도 내가 가장 개선이 필요하다 여긴 점은 ⑤넓은 정방형 메인배너가 쇼핑몰 접속 시 처음 마주하는 화면을 꽉 채운다는 것인데, 이게 사이트에 대한 흥미를 뚝 떨어뜨리는 것이 문제였다. 왜냐하면, 첫인상에 무척 적은 양의 정보만 제공되니까.
이런 형태의 배너는 최신 트렌드와 잘 맞거나 컨셉이 확고한 상품 등 시각적으로 매력 있는 상품을 집중적으로 노출하고자 하는 경우엔 효과적이겠지만, 주변에 흔히 보이고 일상적으로 소비하는 상품을 판매하는 자사몰 특성상 특별한 메리트를 찾아보기 어렵단 의견이다.
예를 들어 커다란 배너에 컵라면, 조미김, 프로틴 음료, 냉동 돈가스 등 불특정 가공 식료품 이미지를 뭉쳐서 삽입해 놓으면 그다지 관심이 끌리지 않을 것이다. 시선을 사로잡을 만한 요소가 없기 때문이다. 물론 마침 내가 필요하던 상품이 구성에 있고, 최저가이거나 타사 대비 높은 할인율을 제공하는 등 특별한 프로모션이 있는(사실 이게 가장 중요) 기획전 홍보 배너라면 이야기가 다르겠지만 그런 행사를 상시로 진행할 수는 없기 때문에 단일 배너뿐만 아니라 사이트 자체에 대한 고객의 흥미가 떨어지는 것을 막기 위해서라도 더더욱 기존의 형태는 탈피했어야 했다.
카페24 및 마케팅 툴 통계를 이용해 유추해 볼 수 있는 고객의 특징 또한 포괄하여 복합적으로 생각해 봤을 때, 자사몰에서 판매중인 가공 식품이라는 상품 특성상 화면에 다양한 정보가 가득 들어차 있되, 뭉쳐 보이지 않아서 각 상품마다 눈길이 가는 깔끔한 배치가 관건이겠단 결론을 냈다. 이후에는 가공 식품을 주로 취급하면서 대중적으로도 잘 알려진 쇼핑몰의 모바일 사이트 다수를 정찰(?)하며 레퍼런스를 수집했고 아래 기술한 내용을 중점적으로 고려하며 디자인한 뒤 코드를 작성했다.
|
우선 11번가, 쿠팡 등 다양한 쇼핑몰의 레이아웃을 벤치마킹하여 기존보다 더 다양한 상품을 보여줄 수 있으면서 세로 스크롤 길이는 대폭 줄일 수 있도록 디자인했다. 가장 큰 변화는 중간중간 가로로 상품을 배치했다는 점이다. 기존의 단조로운 조작감을 탈피하면서, 세로 스크롤 압박은 줄여 더 많은 상품을 효과적으로 보여줄 수 있게 되었다. 가로 스크롤을 구현하면서, li의 개수에 따라 ul에 너비를 부여하는 JS코드를 작성할 때 애를 먹었던 내용도 있는데, 이는 추후 따로 기술할 예정이다.
첫인상이 결정되는 진입 화면에서 메인배너의 세로 길이를 대폭 줄였을 뿐 아니라 하단에 퀵메뉴를 추가해 보다 구성지고 인터렉티브 한 느낌을 줄 수 있도록 구성했다. 이는 쿠팡, 11번가, 배민B마트, 홈플러스, 컬리, 코스트코 등 가공식품을 취급하는 많은 쇼핑몰에서 채택하고 있는 구조이며, 쇼핑몰의 다양한 컨텐츠를 효과적으로 노출하여 고루 관심을 가지게끔 유도할 수 있다.
많은 쇼핑몰들이 5*2 이상의 컨텐츠를 노출하고 있어 자사몰은 비교적 컨텐츠가 적다는 점이 걱정이었는데, 4*2 배열도 생각보다 크게 비어 보이지 않아 만족스러웠다. 결정적으로, 상기 이미지의 적용 비교컷 내용에 표기해 둔 카운팅 숫자를 확인해 보면 불필요한 배너의 부피를 줄이고 간단한 퀵 메뉴를 추가한 것만으로도 진입 화면에서 보이는 정보의 수가 3배 이상 늘어난 것을 알 수 있다.
배너의 컬러 또한 기존의 은은한 고명도 저채도의 컬러감에서 벗어나 비비드 컬러로 영역감을 확실하게 잡아주어 시선이 자연스럽게 향할 수 있도록 유도했다. 다만, 이미지를 넣는 배너는 고명도 저채도 혹은 무채색 컬러를 전경색으로 사용해 시선이 이미지에 집중되면서, 내용 또한 잘 읽힐 수 있도록 했다.
또한 기존에는 메인배너 아래에 하나로 뭉쳐있던 미들배너를 상품 목록 사이마다 끼워 넣어 반복되는 컨텐츠로 인한 지루함을 환기시켜 주는 역할을 부여했다. 이렇게 배치하니 상품들만 배치되어 있을 때보다 각 섹션의 구분감도 더 좋아졌고, 배너의 내용이 눈에 더 잘 들어오게 되었다.
최대한 심플하게 디자인했기 때문에 구현에 큰 어려움은 없었으며, 당연히 모든 구조는 이미지를 임베드 한 것이 아닌 코드로 작성했으므로 간단한 텍스트를 변경하려 해도 매번 포토샵을 이용해야만 했던 이전과 달리 수정에 크게 용이해졌다. 단순 좋아졌다는 느낌뿐만 아니라 홈 화면 진입 고객의 체류 시간 또한 늘었으며, 예전에 홈 화면 하단에 배치한 적 있던 배너의 클릭수가 저조했던 것에 비해, 리뉴얼을 거치며 홈 화면의 약 3/5 지점에 세팅해 둔 미들배너의 클릭수 또한 유의미한 수치를 보여주었다.
구조적인 내용 외의 큰 변화는 최신 트렌드인 'AI 개인화 맞춤 상품 추천' 구좌를 새로이 론칭했단 점인데, 기존 자사몰 홈 화면은 '팔고 싶은 상품'만이 진열되었다면 해당 구좌를 추가하면서부터는 고객 개개인의 액션을 기반으로 '사고 싶은 상품'을 유추하여 진열할 수 있게 되었다. 뿐만 아니라 기존에는 메인 진열에 등록한 순서대로 고정되어 노출되거나, 일정 시간이 지나야만 갱신되는 카페24 자체의 자동 진열 기능을 이용했기 때문에 타 쇼핑몰이 접속할 때마다 상품이 바뀌는 것에 비해 자사몰은 무척 정적인 느낌이 들 수밖에 없었다.
들어올 때마다 같은 상품을 보여준다면 어떤 누가 홈 화면을 유심히 살펴보겠는가? 그럼 자연스레 재접속률이 떨어지고, 결국엔 이탈로 이어지게 될 것이다. 하지만 현재는 AI를 도입했기 때문에 자동으로 고객의 데이터를 분석하고 학습하여 상품을 추천해 주므로 여타 쇼핑몰과 같이 고객이 관심 있어할 만한 상품을 두루 추천할 수 있게 되었다.
이는 카페24 앱에 등록돼 있는 '푸드O'라는 유료 플러그인을 통해 구현할 수 있었다. 메일과 전화 통화로 몇 번이고 소통하며 특정 상황과 유저의 유형에 따라 노출할 상품 테마와 기대 효과에 대해 의논했는데, 굉장히 적극적으로 임해 주시고 새로운 제안에도 호의적이셔서 무척 감사하고 든든했던 기억이 난다.
사업주 입장에서, 복잡한 개발 지식이나 전문 인력 없이 필요할 때마다 적합한 플러그인을 물색하고 적용해 사이트에 큰 변화구를 줄 수 있단 점은 카페24와 같은 솔루션의 큰 장점이자 매력인 것 같다. 추후 아이디어가 생기면 카페24에 플러그인 상품으로 입점하는 목표를 세워봐도 좋겠다.
현재 리뉴얼한 디자인은 자사몰에 잘 적용되어 있고, 후임으로 오신 담당자께서 이것저것 변경하고 계신 듯하다. 모쪼록 탈 없이 잘 운영되기를 바라는 마음이다.
[ 3 ] 그 외
(1) 쿠폰존 리디자인
위 이미지의 좌측은 기존 쿠폰존, 우측은 현재 반영된 쿠폰존 디자인이다. 쿠폰존은 쇼핑몰 내의 상시 발급 쿠폰 혜택을 모아볼 수 있는 페이지로, 대표님의 디자인 개편 지시가 있어 리디자인 작업을 진행했다. 기존 쿠폰존도 충분히 깔끔했지만 쿠폰 내용만 하더라도 변경된 게 많았고, 모바일 홈 화면 또한 리뉴얼된 만큼 수정이 필요했다.
위 이미지 속 디자인은 좌측부터 컨펌을 통해 수정된 순으로 나열했다. 개인적으론 첫 번째 디자인이 가장 깔끔하다고 생각한다. 다만 원형보단 쿠폰 모양이길 바라셨고, 쿠폰 유형 별로 색상이 상이하길 바라셨다. 심플하게 컬러를 잡은 만큼 색상을 통일하는 게 좋지 않을까 하여 UI 통일성에 대한 이야기를 살짝 드려보긴 했으나 기각되었기 때문에 (UI 디자이너 입장에선) 아쉽게도 현재의 디자인이 채택되었다.
가장 첫 번째 디자인이 통과되었다면 각 원 모양의 버튼마다 효과를 부여할 생각이었는데, PC에선 마우스가 요소에 닿을 시 컬러가 중심에서부터 반전되는 애니메이션 및 카드가 기울어지는 듯한 모션을 추가하고, 모바일에선 각 요소의 중심부가 화면의 가로축 중간에 닿을 경우 느린 속도로 소폭의 확대/축소를 반복하게끔 애니메이션을 추가하고, 옅은 글로우 효과를 부여해 강조되도록 해볼까 구상했었다. 따로 구현하게 된다면 아래에 링크를 첨부할 예정이다.
(2) 100원딜 이벤트
100원딜은 카페24 앱에 등록되어 있는 유료 플러그인을 사용해 진행한 이벤트이다. 정상가로 등록돼 있는 상품을 신규회원에게만 저렴한 가격에 판매할 수 있도록 기능을 제공하는 플러그인이라, 행사 상품을 메인 진열에 등록한 후 랜딩페이지 코드에 상품 목록 모듈을 삽입하더라도 가격과 할인율이 정상가 기준으로 노출되는 문제가 있었다.
100원딜 앱은 할인 기능이 목적인 앱이기 때문에 앱 자체의 문제라곤 할 수 없지만(상세페이지 내 할인가 표시나 행사 상품 모아보기 팝업 등은 제공), 광고를 돌리는 랜딩페이지이니 만큼 다이나믹한 시각적 효과를 주고 싶었기 때문에 자사몰에 반영되어 정상가로 노출되고 있는 상품 목록 모듈을 개발자 도구로 삽질해 와서, 각 상품마다 이미지 url을 수정하고, 상품 번호와 가격을 수정하는 등 말도 아닌 노가다 작업을 거쳐야 했던 뼈아픈 작업물이다.
그렇게 작업해야만 했던 이유는, 편집기 상에서 모듈은 변수로 구조만 짜여 있는 상태이기 때문에 정상적으로 치환되어 상품 데이터가 반영된 랜딩페이지의 코드를 삽질해 와야지만 기존에 짜둔 모듈의 구조와 스타일을 유지하되, 바꾸고 싶은 내용만 홀랑 바꿀 수 있었기 때문이다. 이것 말고 원하는 걸 해낼 수 있는 방법이 나로선 없었다. 꼼수 중의 꼼수이고, 극악의 효율이다. 상품이 바뀔 때마다 그렇게 수정해야 했으므로...
이제 와서 생각해 보면 차라리 이미지로 때우고 상세페이지 url을 연결하는 게 나은 몇 안 되는 경우 중 하나가 아니었을까 하는 생각이 든다. 이렇게 여러 상황을 거치면 사고가 보다 유연해지는구나 싶다.
(3) 게릴라 이벤트
게릴라 이벤트는 앞서 기술했던 카페24 플러그인 '푸드O'를 제공하는 업체에 선제적으로 제안드려 기능 개발 및 운영하게 된 이벤트이다. 퇴사를 얼마 남겨두지 않은 시점에, 하나라도 더 컨텐츠를 만들어 보고자 기획하게 됐으며 랜딩페이지 와이어 프레임 및 디자인, 대략적인 서비스 구상이 포함된 기획은 ppt로 작성하여 전달을 마쳤는데 주어진 시간이 촉박하여 퍼블리싱은 업체 측에서 진행해 주시기로 하고, 진행 내용은 상사께 인계해 드린 후 손을 떼었다.
사용자로부터 제공받을 수 있는 정보를 백분 활용해 다양한 트리거를 설정하여 사용자 특화 이벤트를 제공하는 것이 해당 이벤트의 특징이다. 상시로 진행되지 않고 특정 조건 충족 시 자동 발동해 일정 기간 동안만 진행되고 재발동 까지는 얼마간 텀을 가지는, 식품 쇼핑몰 이벤트 치고 꽤 볼륨감있고 독특한 구조를 가지는 만큼 고객이 더 자주 자사몰을 찾을 수 있도록 유도하는 것이 목적이다.
구체화된 내용은 아니지만 추후 고도화 시 반영하고픈 아이디어도 있었는데 안정화는커녕 직접 세팅하지 못하고 퇴사하게 된 것이 못내 아쉽고, 발의자 없이 첫 기획 내용대로 잘 흘러갈 수 있을지 걱정도 되던 애정 어린 기획이었다.