버즈빌 웹사이트 구축기(2)
STEP2~3. 도구 설정(Contentful 도입) 및 IA 셋업
웹사이트 구축의 첫번째 여정, 팀 셋업이 끝났다면 2단계의 직면한 과제는 '과연 무슨 도구를 쓸 것인가'라고 볼 수 있습니다.
P.S. 디자인 혹은 개발 관련 용어 등의 사용에 다소 오기가 있을 수 있습니다. 마케터의 부족한 지식과 관점으로 작성된 점을 감안하여 너른 양해 부탁드립니다.
짠! IA 셋업을 통해 확정한 버즈빌 웹사이트의 GNBSTEP2. 도구(Stack 등) 설정
똑똑한 툴은 최소 1인분 이상의 몫을 해낸다.
버즈빌의 기존 웹사이트는 과거 에이전시가 직접 만든 어드민 페이지를 통해 관리되고 있었습니다. 어드민 페이지에 포함되었던 기능은 다음과 같습니다.
• 공지사항 페이지의 관리: PDF 문서를 업로드하거나, 간략한 공지사항을 팝업으로 띄울 수 있다.
• 메인 페이지의 헤더 이미지 관리: 메인페이지의 최상단 배너 이미지를 자유롭게 띄울 수 있다.
• 컬쳐 블로그 관리: 컬쳐 블로그 콘텐츠를 작성하고, 이미지를 삽입하여 발행할 수 있다.
정리해보자면, 콘텐츠 퍼블리싱을 도와주는 도구로서의 어드민을 통해 웹사이트를 제한적으로 관리를 해왔다고 할 수 있겠습니다. 사실 이 어드민 페이지를 단독으로 구축하려면 상당한 리소스가 들어갈 수 밖에 없었습니다. 해당 페이지에 들어가는 콘텐츠 DB 관리도 AWS 상에서 버즈빌 서버를 따로 열어 관리해왔는데, 이 또한 괜한 비용의 낭비라는 생각을 가지고 있었습니다. 홈페이지를 구축하고 관리하는 데 있어서 필요한 리소스를 고려해야만 했습니다.
또 하나의 고려 요소는 '영속성'입니다. 빠르게 모든 제품이 변화하고 발전하는 스타트업일수록, 2년 이상 개편 없이 웹사이트를 유지하는 것은 효과적이지 못합니다. 가장 기민하게, 제품의 반짝이는 USP를 우리의 얼굴인 사이트에 담아내는 작업이 이뤄져야합니다.
자, 정리해보자면 리소스가 적게 들면서도 콘텐츠를 빠르게 퍼블리싱할 수 있고, 2년 정도의 유효성을 가진 웹사이트란 제품을 만들어야합니다(네, 저희는 웹사이트 또한 제품이라고 생각해요!)
Website Builder: Webflow부터 Gatsby까지
Webflow, 신세계였습니다. WIX만큼 쉬운데 기능은 정말 무궁무진!결론적으로 말씀드리자면, 다양한 웹사이트 빌더를 훏어보았지만 이걸 사용하는건 STEP1 단계에서 일찌감치 제하였습니다. Webflow를 1순위로 검토했지만, 팀에서 원하는 그림을 완벽하게 구현하기 위한 수준으로 Webflow 사용법을 익히기까지 괜한 시간이 든다란 생각이었습니다. 좋은 개발자와 디자이너를 팀원으로 섭외했다는 점 또한 Builder 도입을 진행하지 않은 결정적인 이유였습니다.
만약 우리 웹사이트의 페이지 수가 적었다면 아주 심플한 페이지로, 브랜드 커뮤니케이션을 진행하고자 했다면 팀을 꾸리지 않고 Webflow를 도입했을 것 같습니다(간단한 페이지를 만들고자 하는 분에겐 Webflow를 강추합니다!)
Contents: Headless CMS- Strapi부터 Contentful까지
Headless CMS야 말로 우리의 어드민 구축을 대신할 수 있는, 정확히 우리가 지금까지 찾아온 도구였습니다. Headless CMS란 머리가 없는 CMS, 즉 '머리'로 일컬어지는 콘텐츠를 표현하는 방식(웹사이트, iOS, 안드로이드 등)을 언제든 바꿔서 쓸 수 있단 뜻입니다. 2년 후에 버즈빌이 웹사이트 개편을 또 다시 단행하게 된다하더라도, 콘텐츠는 그에 맞춰 바꿔진 형태에 맞춰 가볍게 출판할 수 있게 됩니다.
Headless CMS란 결국 가벼운 콘텐츠 관리가 핵심(출처: https://www.rws.com/)그리고 현재 버즈빌 웹사이트에서 Contentful로 관리되는 페이지는 다음과 같습니다.
• Newsroom
하나씩 페이지를 살펴보면서 무엇을 느끼셨나요? 맞습니다. 모든 페이지가 전부 판이하게, 다르게 생겼습니다. 업로드되는 콘텐츠의 종류 또한 다양합니다. 가령 Newsroom 페이지에서는 클릭하면 바로 뉴스기사 페이지가 링크되는 형태라면, Culture Blog에서는 개별 콘텐츠의 가독성에 포커싱되어있습니다. Resources 페이지 안에서도 즉각적인 다운로드를 실행하는 페이지가 있는가하면, 고객 정보를 수집받는 폼(Form)이 삽입된 페이지도 있습니다.
Headless CMS의 진짜 장점은 이러한 유연성에 있다고 생각합니다. 각기 다른 모습으로, 다양한 포맷의 콘텐츠를 마치 블로그를 하듯 즉각적으로 발행할 수 있게 도와줍니다. 작성이나 관리 방식 또한 꽤나 간편한데요, 물론 이 부분은 개발자, 디자이너와 사전 논의하여 규칙을 정의하고 개발자의 도움으로 세팅되어야만 하는 영역입니다.
버즈빌의 Contentful 페이지, 여기서 모든 페이지를 관리합니다.똑똑하고 가성비 좋은 도구인 Contentful, 저희는 아직까지 아주 만족스럽게 사용하고 있습니다. Contentful 이외에도 유사 도구가 꽤 많은데요, Strapi를 비롯해 Butter, dotCMS 등도 함께 검토해보길 추천합니다.
그리고 Vercel.
개발자 1인만으로 웹사이트를 만들 수 있게 해준 여러 도구의 힘이 있었습니다. Vercel도 그 중 하나입니다. 배포 자체가 쉽고 간편할 뿐더러, 무엇보다 쌉니다. 그러나, 이러한 개발 도구에 관련한 얘기는 딱 여기까지만 언급하고자 합니다. 저희도 잘 모르거든요...
STEP3. IA(Information Architecture) 셋업
IA 를 잡았다면, 50%는 마친 셈.
자, 이제 우리는 진짜 본업(?)으로 돌아갑니다. 웹사이트의 IA, 즉 버즈빌에 대한 정보를 전달할 구조를 잡는 것은 사이트맵의 구성이자 푸터(Footer)의 확정, 그리고 GNB를 정리하는 것과 같은 맥락일 수 있습니다. 웹사이트의 구체적인 형태를 잡는 작업인 셈입니다.
STEP3-1. 복잡한 내용을 잘 정리한 웹사이트의 구조를 살펴보자.
Figma로 정리해 본 리서치 사이트버즈빌 웹사이트에 남겨진 가장 큰 숙제는 '하나의 회사가 판매하는 여러 프로덕트'를 설명해주어야한다는 것. 그리고 개별 프로덕트의 연계성을 잘 들여다보면 결국 하나의 목표-브랜드 성장을 위한 퍼널별 솔루션을 제공한다는 것을 유저가 알게 만드는 것이 필요했습니다. 때문에 트렌디한 확장된 형태의 메뉴바를 차용하여, 이름만으로는 알기 어려운 제품에 대해 설명을 덧붙여주는 쪽으로 가닥을 잡게 되었습니다.
STEP3-2. 미팅미팅미팅미팅미...끝에 답이 온다.
제품이 여러 개라는 것은 개별 제품을 담당하는 여러 팀이 존재한다는 것, 즉 Stakeholder가 차고 넘친단 뜻이 됩니다. 하물며 개별 제품마다 하위 항목을 구분하는 방식이 다를 수도, 제품을 설명하는 방식이 일원화되어있지 않을 수도 있습니다. 때로는 이렇게 웹사이트를 만드는 작업이 Product Architecture의 정비를 수반하는 것 같아요(사실 차일피일 미뤄온 이 일을 웹사이트라는 좋은 핑계로 진행했다고 말해도 과언이 아닌 셈..이라는 속내를 밝혀봅니다).
이 과정의 답은 역시 미팅에 있습니다. 제품의 카테고리를 어떻게 나눠볼지, 해당 카테고리가 정말 제품의 성질을 잘 담아내는지, 그리고 하위 항목은 어떻게 구성할지를 개별 팀의 실무 레벨과, 그리고 팀 리더 레벨과 함께 조율해야만 합니다. 하물며 Technologies라는 커다란 항목에서 하위 페이지를 어떻게 쪼갤지, 아웃링크로 드러내야하는 페이지는 무엇일지 등에도 다양한 의사결정자가 개입됩니다.
STEP3-3. GNB의 확정 = Footer 정리 = Sitemap 끝!
확정된 사이트맵은 업무 진행 상황 확인부터 QA까지, 두고두고 써먹게됩니다이 과정에서 우리의 주요 결론은 다음과 같습니다. 그리고 이 과정에서 앞서 언급했듯, 잦은 업데이트가 필요하거나 콘텐츠 관리가 중요한 페이지는 Contentful 베이스의 연동으로 확정지었습니다.
1. 다양한 프로덕트는 심플하게 'Product'라는 하나의 카테고리로 묶어내되, 인터렉션의 불편을 감소하고서라도 상품군을 확인할 수 있도록 만든다.
2. 콘텐츠 마케팅의 허브로서 Resources 페이지를 운영한다. 모든 콘텐츠를 한 곳에 담아내되, 프로덕트 카테고리별로 브라우징할 수 있도록 지원한다.
3. 여전히 진행 중인 글로벌 사업 영역을 위해 국/영문 두개의 페이지로 구성한다. 다만, 오직 국문 콘텐츠만을 다루거나 글로벌 영역과는 거리가 먼 채용 목적의 컬쳐블로그 등은 영문 페이지에서 제외시킨다.
그리고 이 과정에서 '웹사이트의 메인 타깃인 고객에게 꼭 필요한 정보인가? 정보는 이해하기 쉽고 유용한가?'를 몇번이고 자문했습니다. 3순위까지의 타깃을 종합적으로 고려하다보면, 하나의 페이지에 담아야하는 정보가 너무 방대해지거나, 페이지 수 자체가 한없이 늘어나기도 했기에 오직 1순위의 고객에게 집중하고자 많은 부분을 걷어냈습니다.
정보 자체의 우선순위를 나열해보는 작업을 거치면서 페이지 구성을 더 깔끔해졌습니다. 가령 기존 웹사이트에서 하나의 섹션으로 다뤄졌던 BI 가이드라인 등은 모두 별도의 버즈빌 위키피디아 노션페이지로 이동시켰습니다.
이렇게 꼭 필요한 정보를 담기 위한 IA의 확정은 GNB 영역의 확정으로 이어졌고, 이 작업이 끝났다면 비로소 반은 마친 셈입니다. 자, 이젠 세부 콘텐츠의 작성으로 넘어갑니다. 찐 실무의 영역이죠...! (다음 내용은 3편에서 계속됩니다. 커밍쑨-)
