뷰티 브랜드 리바이포유(Rbfy) 자사몰 구축 과정
뷰티 브랜드 카페24 활용하여 쇼핑몰 구축하기
비글 부부혹시 인스타그램이나 유튜브에서 '하준맘, 하준파파'를 보신 적이 있을까요?
'비글부부'라는 이름의 이 가정의 모습이 선한 영향력을 끼치고 있어서 많은 분들이 팔로우하고 계신데요.
이 부부가 아이의 피부 고민을 해결하기 위해 '리바이포유(Rbfy)' 라는 브랜드를 만들었습니다.
저희 레이어(lllayer)에서 이 브랜드의 D2C 자사몰을 구축을 의뢰받았는데요.
브랜드의 아이덴티티를 담으며 카페24라는 쇼핑몰 솔루션을 활용하여 구축한 이 프로젝트에 대한 이야기를 해볼게요.
안녕하세요. 저는 레이어(lllayer) CEO이자 브랜딩 콘텐츠를 만들고 있는 '브만남'입니다.
사내에서는 Justin(저스틴)으로 불린답니다. ^^ 이곳에서는 저스틴으로 이야기해볼게요.
이 프로젝트를 함께 한 DX팀원분도 소개합니다.
그럼 그 이야기 시작해 볼게요~!!
Interviewer : Justin(저스틴)
Project Dircetor : Juntin(저스틴)
UI Design : Summer(썸머), May(메이)
Web Publisher : Joy(조이), Jerry(제리)
1. 프로젝트의 시작
Justin 벌써 1년 전이네요. 시작이 작년(2023년) 4월이었더라고요. 처음에 '리바이포유(Rbfy)'측에서 정리해 주신 문서를 받고 시작했었죠. 이전 홈페이지 기억나나요?
Joy 그 당시에는 카페24에서 제공하는 템플릿을 그대로 가져와서 필요한 내용들만 넣어서 사용하고 계셨어요. 브랜드의 아이덴티티가 사이트에 녹아 있다고 보기는 어려웠죠. 인터렉션적인 요소들도 어딘가 어색해 보이는 부분들이 많고 초기에 요청해 주신 자료들을 보면 버그를 개선해 달라는 내용들도 좀 있었습니다.
Summer 적응형 사이트였고, 일반적인 템플릿을 적용해서 만든 웹사이트라는 게 확 느껴졌던 것 같아요. 그리고 GNB를 펼쳤을 때 어두운 배경으로 되어있어서 브랜드 이미지와는 조금 어우러지지 못한다는 느낌을 받았어요. 그리고 전반적으로 어떻게 바꾸고 싶은지 그 이유에 대해서도 페이지별로 잘 정리해서 주셨어서 조금 더 이해하기 수월했던 것 같아요.
* GNB (Global Navigation Bar)
웹사이트 전반에 공통적으로 적용이 되는 상단 메뉴바를 지칭하는 말
Justin 제 기억에 'Summer(썸머)'는 이 브랜드를 이미 알고 있었기도 했고, 굉장히 좋아했던 것 같은데 처음에 이 프로젝트를 하게 된다고 했을 때 어떤 생각이 들었어요?
Summer 제가 좋아하는 인플루언서가 만든 브랜드의 자사몰을 디자인할 수 있다는 것 자체가 믿기지 않았어요. 그리고 멀리서 간접적으로 경험했던 브랜드의 경험을 직접적으로 할 수 있게 된 거잖아요. 어떻게 소통하게 될까? 리바이포유라는 제품을 만드는 사람들은 어떻게 소통하며, 어떤 애티튜드를 가지고 있을까 궁금하고 기대했었어요. 대표님을 만날 수 있지 않을까 하는 기대도 있었죠. (결국 실제로 마주치진 못했지만요 ㅠ.ㅠ)
2. 주요 미션
Justin 여러 가지 미션이 있었던 것 같은데 어떤 것들이 중요했었죠?
Summer 디자인적으로 '리바이포유(Rbfy)'의 아이덴티티가 잘 담겨 있지 않아서 그 부분을 전반적으로 디벨롭하길 원하셨어요. 컬러, 폰트, 버튼 같은 작은 요소부터 시작해서 메인 페이지, 카테고리 구성, 제품 상세 등 모든 부분들을 디벨롭해야 했어요.
Joy 기능적으로는 기존에는 PC와 모바일이 따로 되어있는 적응형 사이트였어요. 그것을 반응형으로 바꾸기를 원하셨습니다. 그래서 어떤 기기에도 대응할 수 있도록 분기점을 잡아 반응형 사이트로 작업을 했고요, 요즘에 많이 쓰는 네이버페이 간편 결제도 기존에는 따로 설치가 안되어 있어서 신규 설치하기도 했습니다. 무엇보다 가장 중요하게 생각하셨던 것이 '선물하기 기능'이었는데요, 기존에 타 프로젝트에서 카페24 솔루션에 선물하기 기능을 적용해 봤던 경험이 있어서 이 부분도 보다 더 수월하게 찾아보고 진행할 수 있었습니다.
처음에 온 미션들을 바탕으로 노션에 쫙 정리를 했었어요.
3. UX기획 (화면 설계)
Justin 이번 프로젝트는 클라이언트 측에서 페이지별로 필요한 내용이나 구성을 워낙 잘 정리해 주셔서 그 부분이 굉장히 수월했어요. 전체적으로 리뉴얼해야 하는 이유와 어떤 포인트를 바꾸고 싶은지부터 시작해서 메인페이지, 브랜드 소개 페이지, 상세페이지 등등 페이지별로 어떤 내용을 넣을 것이고, 각각의 페이지별로 어떤 레퍼런스를 참고해야 할지 정리를 해주셨었거든요.
보통은 '사이트맵(Sitemap)'부터 시작해서 각 페이지 별 '와이어프레임(Wireframe)'을 구축하고, 페이지 이동이 어떻게 이루어지는 '시나리오(Scenario)'를 구성하는데요. 이번에는 너무 잘 정리를 해주셔서 이 부분은 그 내용을 바탕으로 조금씩 디벨롭하면서 정리해 나갔습니다.
4. 디자인 무드보드 제작
Justin 화면 설계가 되고 나면 디자인을 하기 전에 전체적인 분위기를 잡기 위해 무드보드라는 것을 만들잖아요. 이 과정은 어떻게 진행이 되었나요?
Summer 처음에 원하시는 웹사이트의 무드를 구체적으로 전달 주셨어요. 그런데 그 무드 안에서도 조금 더 디테일하게 약간씩 다른 톤 앤 매너로 3가지를 제안해서 전달드렸죠.
'warm'첫 번째의 무드보드의 키워드는 'Warm'이었어요. 따듯한 채도의 색상으로 서로 잘 어울리도록 톤온톤의 느낌으로 부드럽고 편안하며 행복한 느낌의 톤 앤 매너를 제안했어요.
'Natural'두 번째의 무드보드의 키워드는 'Natural'이며, 조금 진한 채도의 색상을 사용하여 정적인 레이아웃을 제안했습니다. 이미지의 활용빈도를 높게 하여 시각적으로 보다 더 선명한 브랜드 이미지를 전달하고 싶었어요.
' Calm'마지막으로는 'Calm'입니다. 두 번째의 무드보드와 동일하게 저채도의 색상을 활용하지만 더 적은 색상칩으로 구성되어 있고 더 정적이며 진중합니다. 저채도, 저명도의 이미지의 무드로 맞추는 것을 제안했습니다.
따뜻한 느낌을 조금 배제하고 진중한 브랜드 메시지를 전달하는데 강조했어요.
5. 폰트 제안
Summer 그리고 웹사이트 전반에 사용할 타이틀 폰트를 선정하기 위해서 다양하게 제안드렸어요. 리바이포유의 로고도 세리프 형태의 폰트타입이어서, 전반적으로 웹사이트 내에 어울리는 세리프 형태의 폰트를 원하셨고 아래 폰트로 최종적으로 선정이 되었어요.
6. UI 디자인
Justin 디자인을 하면서 어떤 부분에 집중했었나요?
Summer 리바이포유는 어떤 브랜드인지 많이 이해하려고 했어요. 제품에 대한 상세페이지를 찾아보고, 제품의 가치나 만들게 된 배경을 찾아봤어요. 또 제품을 사용하는 유저는 어떤 사람들 인지도 찾아봤고요.
웹사이트에 들어왔을 때 유저에게 어떤 가치를 전달하고 싶을까? 어떤 경험을 주고 싶을까? 고민을 많이 했던 것 같아요. 전체적인 톤과 여백에서 그런 부분들이 시각적으로 잘 표현이 되도록 반문하면서 디자인했어요.
사이트 전반적인 모션에도 큰 움직임을 배제하고 잔잔하고 정적인 분위기를 주려고 했고요
Justin 처음에 시안을 전달한 것과 최종적으로 마무리된 디자인의 차이가 있었나요?
Summer 전반적인 무드가 정해진 상태여서 큰 차이는 없지만, 레이아웃이 깔끔하고 정적이며 미니멀한 느낌으로 정리가 되었어요. 당시 담당자분이 굉장히 섬세하게 피드백을 주셔서 그런 부분들은 최대한 반영했었던 기억이 나네요.
https://rebuyforyou.com/ >> 메인 페이지 구경 가기
7. PC&모바일 반응형 퍼블리싱
Justin 카페24 솔루션을 활용하면서 퍼블리싱하는 과정은 어땠나요?
Summer 피그마로 디자인하면서 구현 가능 여부를 'Joy(조이)'와 같이 지속적으로 체크했어요. 디자인으로 상상의 나래를 펼친다고 해서 막상 퍼블리싱이 불가능한 것을 클라이언트에게 보여주면 안 되니까요. 꼼꼼히 카페24내에서 기능적인 이슈가 없도록 체크한 후 시안 작업을 진행했습니다.
Justin 디자인이 완료되었다면 그 이후 퍼블리싱에 전달하기 전에 진행하는 것이 있나요?
Summer 저희는 피그마라는 프로그램을 내부에서 사용하고 있는데요. 시안이 컨펌이 되었다면, 피시와 모바일 페이지를 세부 페이지별로 정리하고, 각 페이지별 사용된 색상과 폰트의 스타일을 지정하고 각 UI 요소들을 컴포넌트로 정리하여 공유하고 있습니다.
Joy 시작은 카페24에서 제공하는 기본 스킨을 베이스로 합니다. 하지만! 기본 스킨은 말 그대로 기본 스킨이잖아요? 처음에는 브랜드 아이덴티티와 전혀 맞지 않아요. 그래서 전반적으로 싹 체크하고 브랜드에 맞게 수정하게 됩니다. 그렇게 메인페이지, 제품 리스트 및 상세페이지, 브랜드 소개 페이지뿐만 아니라 로그인페이지, 장바구니 팝업창, 제품 상세페이지, 게시판 페이지, 마이페이지 등등을 모두 새롭게 작업하게 되죠. 디자이너인 'Summer(썸머)'가 가이드를 잡아서 주시면 퍼블리싱으로 사이트 무드에 맞게 수정을 합니다.
8. 퍼블리싱 후 해야 할 세팅
Justin 퍼블리싱만 완료된다고 해서 사이트를 오픈할 수는 없잖아요. 요즘에 고객들이 원하는 것도 점점 늘어나고 기대하는 수준이 높아지고 있는데요. 어떤 것들을 세팅하게 되나요?
Joy 기본적으로는 PG를 신청하면서 네이버페이 결제도 될 수 있도록 같이 설치해 두었고요, 로그인페이지에서는 카카오와 네이버 소셜로그인이 되도록 연결해 두었습니다.
카페24 설정 사항으로는 관리자페이지 내에서 쇼핑몰 전반 설정사항을 싹 체크해요. 어떤 로직에 따라 주문이 이루어지게 할 건지를 결정하는 주문 설정, 판매할 상품을 세팅하는 상품 설정, 회원가입 항목이나 등급 관리, 적립금 등을 설정하는 고객 설정, 카카오나 SMS 메시지 발송을 위한 메시지 설정, 내 쇼핑몰 전반에 대한 정보를 기재하는 기본 설정, 결제를 위한 PG설정 등 쇼핑몰 오픈 전 체크해야 할 항목들은 이 외에도 여러 가지가 있습니다.
SEO 설치도 도와 드리고 있는데요, 오픈그래프, 파비콘 이미지 등을 등록하고, 이 외 meta태그 양식들을 채워 작업한 사이트가 네이버나 구글에서 상위 노출될 수 있도록 돕습니다. 그리고 SEO를 위해서 네이버 서치 어드바이저, 구글 서치 콘솔 세팅을 해드리는데요. 카페24 쇼핑몰 솔루션을 활용할 때는 관리자 내에 해당 영역이 있어서 그 부분을 활용하고요. 그렇지 않은 경우에는 파일 내에 직접 삽입을 해서 세팅을 합니다.
또 원하시는 곳들은 구글 애널리틱스까지 설치를 해드리고 있어요.
9. 감사페이지
Justin 그리고 다른 곳에는 없는 '감사페이지'라는 것이 있었는데 이 부분이 좀 특별한 구조였었죠. 그 당시 사이트 1차 오픈한 후 '리바이포유'에서 '감사'팝업을 열었었거든요. 그 이후에 그 현장에서 느껴졌던 그 느낌을 온라인에서도 구현하고 싶으셔서 그 부분을 구현하기 위한 부분 이야기도 해볼까요.
Justin 이 팝업이 정말 특별했는데, 보통 화장품 브랜드의 팝업이라고 하면 자신들의 제품을 드러내기 바쁜데 이곳에서는 그런 공간이 극히 일부였고요. 처음부터 '감사'가 얼마나 중요한지 이야기를 했었거든요. 우리 제품을 구매해 주셔서 감사합니다가 아니라 '감사'라는 것 자체 너무 중요하다는 메시지였었죠. 그래서 첫 공간에 들어가면 현장에 방문한 사람들이 작성한 '감사 메시지'가 큰 LED 화면에 올라가고 있었고요. '리바이포유'의 대표님이신 '하준파파'님이 자신이 감사라는 메시지가 얼마나 중요한지 느꼈던 일화를 5분 정도 짤막하게 설명해주시기도 하고요. 그 이야기 듣는데 눈물이 핑 돌더라고 ㅠㅠ 아무튼 이 감사 팝업의 감동을 온라인으로 구현해야 하는 미션도 추가가 되었죠.
Summer 팝업 현장에서 볼 수 있었던 감사메시지 월, 아치형 문, 나무재질의 벽면 등에서 모티브를 얻어서 페이지를 구성했어요. 현장 사진을 다시 보면서 그곳에서 사용한 조명이나 나무 질감을 비슷하게 표현했어요. 나무재질 그림자 등을 직접 리소스를 활용하여 하나하나 다 만들었어요. 팝업 현장의 경험을 최대한 온라인의 경험으로 옮겨오는데 집중한 것 같아요. 현장에 있던 포스터 이미지도 활용해서 넣어놨었는데, 최종적으로는 없어졌죠.
감사페이지 (진입 첫 화면)
https://rebuyforyou.com/thankswall >> 감사 페이지 보러 가기
Joy 이 디자인을 스크롤 애니메이션이 가능하도록 구현해야 했어요. 처음에는 아치형 벽이 보이다가 스크롤을 하면 그 문 안으로 빨려 들어가면서 감사메시지들이 보이는 형태였죠. 처음에는 오프라인에서 작성된 메시지를 보여주는 것으로 시작했다가 추후에는 온라인에서 남기는 메시지를 실시간으로 띄우는 쪽으로 추가 개발되었어요.
현재는 감사메시지를 남긴 후 나의 감사메시지가 담긴 이미지를 다운로드할 수 도 있고요. 다른 사람의 감사 메시지에 공감을 누를 수도 있습니다. 이렇게 모여지는 메시지를 취합해서 한 달에 한 번 메시지를 선별해서 선물을 주는 이벤트로 연결이 되었습니다.
10. 프로젝트 마무리 하고 난 후
Summer 리바이포유는 고객이 사용하는 제품에 정말 진심을 다하는구나라는 것을 피드백받으면서 느껴졌어요. 그래서 저도 어떻게 하면 자사몰에서 리바이포유가 만드는 제품에 대한 진심을 더 잘 전달할 수 있을까 고민했어요. 아이콘, 스크롤 인터렉션도 조금 더 잔잔하게 표현되도록 노력했고, 최대한 오프라인의 경험과 브랜드가 원하고자 하는 가치를 온라인에 연결해보려고 했어요.
Justin 확실히 브랜드의 아이덴티티가 명확한 브랜드들이 이런 점에서 작업하기 좋은 것 같아요. 막연하게 그냥 예쁘게 하는 것이 아니라, 브랜드 정체성에 어울리는 디자인이 무엇인지 고민할 수 있는 거죠. 그렇기 때문에 브랜딩이라는 것이 정말 중요한 것이고, 그것이 잘 잡혀야 웹사이트, 자사몰에서도 그 느낌을 보여줄 수 있는 것이고요.
Joy 리바이포유 사이트 작업은 저에게도 정말 의미 있고 보람 있는 프로젝트였어요. 브랜드의 정체성을 사이트에 잘 반영하기 위해서 원하시는 기능들에 대해서 검토해 보고 그것들을 구현해 내는 과정들이 정말 즐겁고 뿌듯했습니다. 사이트 작업을 하면서 직접 제품도 사용해 보니까 브랜드 제품에 대해 애정도 생겼어요. 저는 리바이포유 제품이 너무 좋아서 한번 써본 후에 계속 추가구매하고 있거든요. 좋은 브랜드도 알게 되고 멋진 사이트도 만들 수 있어서 저에게는 정말 뜻깊은 시간이었습니다.
크게 10가지의 과정으로 구성해서 정리해 봤는데, 물론 실제 업무 환경에서는 사이사이에 더 많은 과정들이 숨어있었답니다.
앞으로도 레이어(lllayer)의 프로젝트 이야기를 계속 남겨 볼 테니, 저희 계정을 구독하고 지켜봐 주세요~!!
더 많은 포트폴리오와 이야기는 아래 사이트에서 확인 가능합니다.
카페24 솔루션을 활용한 자사몰 구축 프로젝트 문의는 아래 메일로 연락 주세요
>> zwang@lllayer.com
