브랜드 이야기를 담은 웹사이트 구축 : 널핏 자사몰
프로젝트 리뷰 #6- 널핏(Nurfit) 자사몰 리뉴얼 프로젝트
브랜드의 웹사이트를 만들 때 가장 중요한 것은 무엇일까요?
브랜드의 성격이 그대로 드러나는 웹사이트는 과연 어떻게 만들어지는 걸까요?
이번 6번째 프로젝트 리뷰에서는 브랜드 목표와 아이덴티티를 효과적으로 전달하기 위해, 사이트맵 설계부터 UX/UI 디자인, 그리고 퍼블리싱까지, 각 단계에서 어떤 고민과 시도가 이루어졌는지 함께 살펴보겠습니다.
안녕하세요, 저는 레이어(lllayer) CEO이자 브랜딩 콘텐츠를 만들고 있는 브만남 저스틴 입니다.
2023년 여름 저희 레이어(lllayer)에서 간호사를 간호하는 브랜드, 널핏 Nurfit의 리브랜딩을 함께 했어요. 널핏 리브랜딩 프로젝트는 널핏만의 목소리와 성격을 만들었던 프로젝트라면 이번에는 그 목소리가 울려 퍼질 수 있는 널핏 자사몰 구축 프로젝트에 대한 이야기를 해볼게요!
Interviewer: Justin (저스틴)
Project Dircetor : Juntin(저스틴)
UI Design : Mia(미아), Summer(썸머)
Web Publisher : Jerry(제리), Joy(조이)
1. 프로젝트의 시작
Justin 기억을 더듬어 볼까요! 처음 널핏에서 브랜드 가이드 자료를 전달받고 킥오프 미팅을 했었죠?
Mia 네, 자사몰 구축을 위한 첫 미팅에서 ‘웹사이트가 허브가 되어 널핏 콘텐츠를 더 전달하고 싶다’, ‘널핏만의 커뮤니티를 구축하고 싶다’는 목표를 전달받았어요.
Summer 우선 브랜드 니즈에 맞춰 레퍼런스를 조사하고 브랜드 목표를 가장 잘 드러내면서 그 안에 브랜드 아이덴티티를 잘 녹여낼 수 있도록 웹사이트를 구축하기 위해 사이트맵 설계부터 시작했죠.
2. UX 기획 (화면 설계)
Justin 보통은 ‘사이트맵(Sitemap)’부터 시작해서 각 페이지 별 ‘와이어프레임(Wireframe)’을 구축하고, 페이지 이동이 어떻게 이루어지는지 ‘시나리오(Scenario)’를 구성하는데요. 이번 프로젝트는 어떻게 진행됐는지 설명해 줄 수 있나요?
Mia 사이트맵을 기획할 때 널핏의 브랜드 스토리를 이야기할 수 있는 카테고리(널핏스토리)와 사용자들이 서로 소통할 수 있는 커뮤니티성 게시판 카테고리 (널핏플), 널핏측에서 정보 글을 게시하는 콘텐츠 성격의 카테고리(널싱스토리), 그리고 상품을 구매할 수 있는 제품 카테고리를 나누어 구성했어요.
2-1 메인 홈페이지
Mia 초기에 (A)쇼핑몰을 우선시하는 레이아웃과 (B)컨텐츠를 우선시하는 레이아웃 두 가지로 나누어 준비하고 각각 참조할 수 있는 레퍼런스를 토대로 얘기를 나눴어요. 주요 목적에 따라서 메인 페이지 내용의 구조, 순서, 배치 등을 피드백을 주고받으며 수정해 나갔고요.
Summer 결론적으로는 콘텐츠를 우선시하는 레이아웃으로 관련 영역을 상단에 배치하고 콘텐츠를 소비하다 필요한 상품을 구매할 수 있게 유도하는 방향으로 구성했어요.
2-2 콘텐츠 게시판
Jerry 게시판의 구조와 구성에 대해 상세히 설명드린 후, 피드백을 주고받았어요. 처음 게시판 구성을 제안드린 후 추가적인 게시판 개발과 커스터마이징을 위해서는 추가 비용이 발생한다는 점을 안내해 드렸고요. 이후 피드백에 맞춰 널핏만을 위한 게시판을 구성했어요.
3. UI 디자인
Justin 자사몰 구축 이전에 널핏 리브랜딩 프로젝트가 마무리 단계였기 때문에 톤 앤 매너, 폰트 등 무드보드는 정리되어 있었네요. UI 디자인의 시작은 어땠나요?
Mia 초기 디자인 시안은 정해진 톤 앤 매너 안에서 널핏이 어떤 이미지를 사용자에게 더 전달하고 싶은지에 초점을 맞췄어요.
A안은 풀 스크린 이미지와 직선적인 요소를 활용해서 임팩트 있고 시원한 구성으로 배치하여 콘텐츠 하나하나에 집중도를 높였고
B안은 라운딩 된 코너와 이미지 크기 조정을 통해 보다 부드러운 인상을 전달하고 한 화면 안에 더 많은 콘텐츠를 노출할 수 있도록 디자인했어요.
Justin 이미지 크기나 구성에 차이가 좀 있네요
Mia 네, 메인 의도에 따라서 UI 디자인에 차이를 주려고 노력했어요. 또 의견을 주고받을 때 피드백이 자세하고 꼼꼼하게 왔기 때문에 어렵지 않게 A안과 B안을 적절히 섞는 방향으로 진행했어요.
3-1 널핏스토리(브랜드 소개) 페이지
Mia 브랜드의 목표와 성격을 드러내는 소개 페이지에는 심볼과 색상 등 디자인적 요소를 활용해 활기찬 이미지를 전달하는 A안과 절제된 레이아웃으로 좀 더 안정적인 느낌을 주는 구성의 B안으로 기획했었어요.
널핏스토리는 '브랜드 소개'와 '활동' 내용으로 이루어져 있는데, 자연스러운 페이지 이동을 위해서 한 화면 안에 브랜드 소개와 활동이 스크롤로 이어지되 ‘브랜드 소개 / 활동’ 탭을 화면 하단에 항상 띄워 편리하게 각 영역으로 이동할 수 있도록 했어요.
3-2 커뮤니티 게시판
Jerry 커뮤니티를 어떤 방법으로 보여줄지에 대해 고민을 많이 했어요. 카페24의 기존 기능을 활용가능한 선에서 무언가 새롭게 시도할 수 있는 게 없을지에 대해, 특히 기능적인 측면에서 2가지를 해결해야 했어요.
첫째, 해당 기수들만 확인이 가능한 프라이빗 게시판 적용이 가능한지
둘째, 이벤트 참여를 위해 자사몰 내에서 신청폼을 제공하고 지원 신청이 가능한지
카페24 기능을 테스트해 본 결과 비공개 게시판 기능을 활용해서 특정 그룹(해당 기수)만 사용할 수 있도록 설정했고 신청폼은 결국 외부 링크 연결로 해결했어요. 기능 테스트를 아주 치열하게 한 기억이 납니다 (웃음)
Joy 특히 게시판의 경우 ‘커뮤니티 형성’이라는 브랜드 목표가 설정 되어있다 보니 커뮤니티 형성을 위해 사용 가능한 기능들을 많이 시험하고 체크했어요. 아무래도 카페24 같은 경우 커스텀할 수 있는 기능이 한정적인 형식이어서 기존 기능들을 어떤 방식으로 활용해야 할지 고민을 많이 했습니다.
선택한 글을 상단에 고정하여 원하는 콘텐츠를 강조할 수 있게 하기도 했고요.(상기이미지)
3-3 제품 페이지
Jerry 제품 페이지에서는 새로운 아이디어가 필요했어요. 고객이 제품 분류를 클릭했을 때 별도의 새로고침 없이 선택한 제품들이 보일 수 있기를 원했거든요. 일반적인 분류 기능으로는 구현을 하기 어려워서 테스트를 반복하다 카페24의 메인 분류 기능을 활용해 상단탭은 고정하되 하단에는 제품 목록을 띄울 수 있도록 커스텀을 했어요.
Mia 전체적으로 UI 디자인 및 개발 과정에서 정말 많은 피드백을 주고받았어요. 끊임없는 소통을 통해서 이해도를 올려가며 진행한 덕분에 완성도 있게 마무리된 것 같아서 뿌듯했어요.
4.PC&모바일 퍼블리싱
Justin 카페24 솔루션을 활용하면서 퍼블리싱하는 과정은 어땠나요?
Summer 카페24 솔루션에서 시안대로 구현이 가능할지 디자인 작업을 병행하면서 Joy와 함께 계속해서 확인했어요. 카페24 내에서 기능적인 문제가 없는지 꼼꼼히 확인하고 시안 작업을 진행했어요.
그리고 널핏의 경우엔 PC보다 모바일 웹을 중점으로 진행했는데 그 이유는 SNS 인스타를 통해 넘어오는 사람이 많았기 때문에 PC보다 모바일 랜딩 페이지에 좀 더 중점을 두고 작업했죠. PC웹 또한 모바일과 유사하게 고정된 화면에서 스크롤 다운 할 수 있는 디자인도 적용했고요.
Justin 디자인이 끝나면 퍼블리셔한테 넘기기 전에 따로 하는 작업이 있나요?
Summer 프로젝트의 규모마다 조금씩 다르긴 한데, 각 페이지에서 사용된 UI 요소를 컴포넌트화 하고, 색상이나 폰트를 스타일화 하여 정리하여 퍼블리셔에게 공유해요.
Joy 카페24에서 제공하는 기본 스킨은 브랜드 이미지와 맞지 않는 게 많아서 전체적으로 살펴보고 브랜드에 맞게 수정하여 주신 디자인을 받아 작업해요. 메인 페이지, 제품 리스트나 상세 페이지, 브랜드 소개 페이지뿐만 아니라 로그인 페이지, 장바구니 팝업창, 제품 상세 페이지, 게시판 페이지, 마이페이지까지 모두 새로 작업하는 편이에요.
Joy 퍼블리싱 이후에는 내부에서 구글시트를 활용하여 전체 페이지 검수를 진행했어요. 추가적으로 화면 설명이 필요한 부분은 피그마 코멘트 링크를 활용했어요.
5. 후기
Justin 카페24 솔루션을 활용한 널핏 자사몰 구축 프로젝트, 프로젝트를 끝마치고 공유하고 싶은 점들이 있을까요?
Summer 카페24에 다양한 기능이 커스텀이 가능하다는 사실을 다시 한번 느꼈고 브랜드 가이드라인을 따라 웹사이트를 만들어나가는 경험이 즐거웠습니다. 더불어 클라이언트와의 소통이 얼마나 중요한지도 느꼈고, 디테일한 피드백을 전달해 주셨기 때문에 작업하기 한결 수월했던 것 같습니다.
Mia 개인적으로는 프로젝트 스케줄이 타이트했기 때문에 시간적 여유가 없어 시안들이 더 다양하지 않았던 것 같아 아쉬웠어요. 이번 프로젝트를 통해서 크게 배운 점은 내부에서 협업하고 같이 문서를 통해서 기록하며 넘어가는 것이, 또 병렬적으로 프로젝트를 진행하는 태도의 중요성에 대해 느꼈어요.
Jerry 이번 프로젝트를 진행하면서 개인적으로 많은 공부가 되었습니다. 클라이언트의 요구에 맞는 콘텐츠 구성을 위해 카페24의 다양한 기능을 적극적으로 활용하며, 여러 가지 방법을 시도해 보았습니다. 이를 통해 카페24의 기능에 대한 이해도가 높아졌고, 실무에서 이를 적용하는 과정에서 큰 성취감을 느꼈습니다. 덕분에 카페24 플랫폼을 활용한 구축에 대해 더욱 깊은 자신감을 가지게 되었습니다.
Joy 이번 프로젝트에서는 다양한 레이아웃과 기능들이 담긴 콘텐츠들을 어떻게 사이트에 잘 반영할 수 있을지, 그리고 어떻게 하면 관리자가 보다 더 운영 관리하기 편리한 사이트를 만들 수 있을지 고민하고 적용했던 것이 가장 큰 포인트였던 것 같습니다. 원하시는 디자인과 기능들을 표현하기 위해 카페24에서 활용할 수 있는 다양한 기능들을 찾아보고 커스텀하는 시도들을 하게 되었는데, 결론적으로 클라이언트로부터 사이트를 리뉴얼하면서 전보다 훨씬 사용하기 좋아졌다는 피드백을 받아 뿌듯함을 느낄 수 있었습니다.
널핏 자사몰 구축 프로젝트에 대한 이야기, 어떠셨나요?
저희 레이어(lllayer)는 브랜드의 가치와 목표를 효과적으로 전달하는 웹사이트를 만들기 위해 항상 최선을 다하고 있답니다! ㅎㅎ 자사몰 리뉴얼이나 브랜드 웹사이트 구축에 대해 고민하고 계시다면, 언제든지 저희에게 연락 주세요.
저희 레이어(lllayer)가 함께 해결책을 찾아드릴게요. 감사합니다. 다음 프로젝트 리뷰로 다시 찾아올게요!
더 많은 포트폴리오와 이야기는 레이어(lllayer) 웹사이트에서 확인 가능합니다.
카페24 솔루션을 활용한 자사몰 구축 프로젝트 문의는 아래 메일로 연락 주세요
zwang@lllayer.com
