[BCU #00] 콘텐츠부터 디자인까지 나 혼자?, 비즈니스캔버스 웹사이트 제작기

비즈니스캔버스의 웹사이트를 개편했습니다. 올 초 저희 팀은 Typed(타입드)에 이어 re:catch(리캐치)와 Typed Finance(타입드 파이낸스)라는 새로운 프로덕트를 선보였습니다. Typed의 웹사이트가 기업 웹사이트의 역할을 대신했던 이전과는 달리, re:catch와 Typed Finance의 출시 이후 세 가지 프로덕트를 대표할 수 있는 기업 웹사이트의 필요가 팀 내에 대두되었습니다.

뜬금없이 잠깐 저의 직무를 소개해 드리고자 합니다. 저는 비즈니스캔버스에서 브랜딩과 콘텐츠를 담당하고 있습니다. 기업 전반의 브랜드 가이드라인 및 브랜디드 콘텐츠 제작, 마케팅 에셋 제작 등의 업무를 주로 맡고 있습니다. 따라서 웹사이트 내부의 콘텐츠를 제외한 웹사이트 디자인은 프로덕트 디자이너가 담당하고 있었기에 저는 방심하고 있을 수밖에 없었습니다. 그러던 찰나 ‘이번 웹사이트 프로젝트를 브랜드 써클(Circle, 비즈니스캔버스의 직무 중심 조직)에서 맡아보면 어떨까’하는 의견이 들려왔습니다. 당시 사내외에서 크고 작은 이벤트들을 앞두고 있었기에, 해당 기간 전까지 웹사이트를 선보이기 위해서는 제작에 있어 다소 빠듯한 일정을 소화해야만 했습니다. 특히 개발팀의 경우 프로덕트 개발에만 집중하기에도 시간이 모자랐던 터라, 대외적으로 웹사이트를 릴리즈하기 위해서는 ‘프레이머(Framer)’를 이용하는 수밖에 없었습니다. 프레이머는 자체적으로 간단한 인터랙션들을 포함한 UI 디자인이 가능하고, 디자인이 완료되는 즉시 웹으로 릴리즈할 수 있기에 개발 공수가 부족한 상황에서는 상당히 유용한 툴입니다. 문제는 이 UI 디자인을 담당하는 프로덕트 디자이너 또한 프로덕트 기획과 디자인에 여념이 없었다는 것입니다.

그렇게 자연스레 브랜드 써클이 기업 웹사이트 제작을 맡게 되었습니다. 그리고 브랜드 써클의 구성원은 저 하나였습니다. 제가 맡게 된 것이죠. 프레이머는 손도 대보지 않았고 피그마도 버벅대며 오직 UI 에셋 복사용으로만 사용하는 제가, 오직 어도비 계열의 툴만 사용해 오던 제가, 프레이머를 당장 공부해서 비즈니스캔버스의 웹사이트를 제작하라는 숙명을 건네받게 되었습니다. 여기에 더해 웹사이트에 삽입될 콘텐츠 또한 제가 작성해야만 했습니다. (하지만 즐겁읍니다…^^) 최고의 동기부여는 마감 기한이라는 말처럼, ‘언젠간 공부해야지’라는 마음을 먹고 있었던 프레이머를 공부할 기회는 지금이라는 생각에 그날로 웹디자인의 ‘Learning by doing’이 시작되었습니다.

BCU(BUSINESS CANVAS Universe)

저는 이번 상반기 동안 Internal Branding 프로젝트를 진행해 왔습니다. The Blueprint라는 타이틀의 시무식을 시작으로 BCU(BUSINESS CANVAS Universe)라는 세계관을 사내에 녹여내고 있었습니다. 비즈니스캔버스의 여정을 ‘로켓(프로덕트)을 설계, 조립하여 여러 행성(고객)을 거쳐 전 우주적 문제를 해결할 해답을 찾아가는 여정’에 비유하여, 사내에 게시되는 모든 에셋을 이 BCU에 기반해 제작했습니다.

이 웹사이트 또한 BCU에 기반하여 기획했습니다. 현재 비즈니스캔버스가 가진 이야기를 가장 잘 대변해 주는 소재는 이 BCU였고, 사내에서뿐만 아니라 대외적으로도 저희의 이야기를 조금 더 쉽고 흥미롭게 꺼내기 위해서는 BCU를 대외적으로도 소개할 필요가 있다고 생각했습니다. 따라서 이 웹사이트는 BCU가 Internal Branding에서 나아가 External Branding으로 확장되는 첫걸음이었습니다. 기존에는 Typed라는 BI가 곧 비즈니스캔버스라는 CI와 직결됐지만, 이제는 세 가지 프로덕트를 포괄할 수 있는 비즈니스캔버스만의 브랜드 디자인이 필요한 때를 마주하게 되었습니다.

저는 팀 내에서 ‘브랜드 써클은 비즈니스팀의 R&D 부서라고 생각한다’라는 이야기를 자주 꺼내왔습니다. 브랜드가 가진 영향력을 정량적으로 측정하고자 하는 시도는 늘 브랜드 업계에서도 주요한 이슈로서 이야기가 오고 가지만, 다른 어떤 비즈니스의 영역보다도 결과를 측정하기 쉽지 않은 영역이 ‘브랜딩’일 것입니다. 그만큼 시도와 실험에 있어 자유로운 영역이 브랜딩이라 생각했고, 이번 웹사이트에도 BCU를 기반으로 한 의미를 담아 여러 시도를 해 보고자 했습니다.

가장 중점적으로 기획한 점은 웹사이트에 비즈니스캔버스의 배경과 비전, 즉 과거와 현재 그리고 미래를 흐름이 있는 이야기로 녹여내는 것이었습니다. 디자인에서부터 한 권의 이야기책을 읽어 내려간다는 인상을 주기 원했습니다.

HOME 홈: 여정을 미리보기

홈 화면의 경우 하위 여섯 메뉴를 포괄할 수 있는 이미지로 구성했습니다. 01 ABOUT 메뉴에서부터 06 PROJECTS 메뉴까지 차례로 마우스 커서를 올려볼 때, 지구에서 출발한 로켓이 여섯 가지의 과정을 거쳐 달에 도달하는 과정을 표현했습니다. 비즈니스캔버스가 무엇을 향해, 어떤 방식으로, 왜 나아오게 되었는지, 지난 3년 동안의 여정이 모두 여섯 메뉴에 모두 담겨있기에, 그 의미를 비유적으로 홈 화면에 담아내고자 했습니다.

간단한 이스터에그도 하나 심어두었습니다. 발견하신 분이 계실지 모르겠지만, 메뉴 왼쪽 위에는 로켓의 불꽃이 그려진 버튼이 작게 자리 잡고 있습니다. 이 버튼을 누르면 메뉴의 모든 움직임과 배경에 나타나던 이미지가 사라지면서 홈 화면이 검은 배경으로 전환됩니다. 이 버튼은 바로 로켓의 엔진을 켜고 끌 수 있는 버튼입니다. 기존의 기업 웹사이트에서 벗어나 웹사이트에 방문해 주시는 분들께 사소한 즐거움을 제공해 드리고자 이 버튼을 만들어 보았습니다.

ABOUT 기업 소개: 유한의 여정, 무한의 가능성

기업 소개 페이지는 웹사이트의 첫 번째 메뉴입니다. 홈 화면이 웹사이트 내 모든 이야기를 요약하는 역할을 했다면, 기업 소개 페이지는 이 이야기의 시작을 찬찬히 들여다본다는 인상을 방문객에게 전달하기를 원했습니다. 따라서 홈 화면에서 보였던 로켓이 지구에서부터 발사되어 하늘을 향해 나아가는 형태로 디자인했으며, 콘텐츠는 크게 두 개의 챕터, ‘유한의 여정’과 ‘무한의 가능성’으로 나누어 비즈니스캔버스의 이전과 이후를 담아 보았습니다. 저희는 저희의 여정에 해답이 있으리라 믿기에, 그에 대한 기대와 이 여정을 헤쳐 나아가는 비즈니스캔버스의 방법을 ‘유한의 여정’에, 해답의 존재 여부에 대하여 조건 없는 믿음을 뒤로 하고, 그 믿음의 근거를 ‘무한의 가능성’에 담아 콘텐츠를 작성했습니다. 기업 소개 페이지의 모든 콘텐츠에 그간의 비즈니스캔버스의 과정과 노력이 담겨 있기에, 로켓이 콘텐츠 사이를 지나며 그 모든 과정을 거쳐 가는 형태로 표현했습니다. 끝으로 아직은 해답이 어디에 있을지 모르는 저희이기에 마지막에 이르러서도 멈추지 않고 계속해서 로켓이 이 여정을 나아갈 수 있도록 로켓이 ABOUT 페이지를 빠져나가며 열린 결말로 기업 소개를 마무리했습니다.

PRODUCT 제품 소개: 더 쉽게, 더 효율적으로, 더 효과적으로

제품 소개 페이지에서는 About 페이지에서 나아간 로켓이 다시 등장하며, 이 로켓이 비즈니스캔버스의 세 가지 프로덕트, 세 대의 로켓으로 나누어지는 모습을 표현했습니다. 비즈니스캔버스는 시작에서부터 현재까지 연차에 비해 작지 않은 규모로 급속도로 성장해 왔습니다. 하지만 여전히 풀어야 할 문제가 남아있는 저희이기에, 한 가지 문제에 구성원 모두가 참여하여 그 위험부담을 감당하는 것은 효율적이지도, 효과적이지도 못했습니다. 따라서 적은 인원으로 빠르게 실패하며 해답을 찾아가는 방법을 택했습니다. 이 모든 고민의 시작이었던 ‘Typed’를 비롯해, 마케팅과 세일즈 등 Revenue 관련 써클 스스로가 느껴온 문제를 해결하고자 사이드 프로젝트에서부터 출발했던 ‘re:catch’, 워드프로세서의 빈 A4용지에서 문서 작성을 시작해야만 했던 Typed의 문제에서 초점을 좁혀 스프레드시트의 빈 시트에서 사업을 계획해야만 했던 막막함을 해결하고자 한 Typed의 스핀오프 ‘Typed Finance’까지 소프트웨어를 통해 기업이 더 쉽게, 더 효율적으로, 더 효과적으로 일할 수 있게 하고자 하는 비즈니스캔버스의 미션에 바탕을 둔 세 가지의 문제와 세 가지의 프로덕트를 제품 소개 페이지에 기록했습니다. 또한 비즈니스캔버스 웹사이트의 대부분의 방문객은 비즈니스캔버스가 풀고자 하는 세 가지 문제 중 적어도 한 가지는 겪고 계시리라 예상했습니다. 이에 따라 방문객 또한 공감하고 있는 문제를 바탕으로 비즈니스캔버스의 세 가지 로켓 중 하나를 선택하여, 각 프로덕트를 통해 자신의 문제를 해결할 수 있도록 프로덕트의 웹사이트를 링크해 두었습니다.

NEWSROOM 뉴스룸: 비즈니스캔버스의 메인 커뮤니케이션 채널

뉴스룸의 경우 기자 분들의 취재와 보도를 위한 공간으로 구상했습니다. 비즈니스캔버스는 현재 SNS를 운영하지 않고 있기에, 팀과 프로덕트의 주요 이슈에 관해 공식적인 입장을 전할 수 있는 창구가 없었습니다. 따라서 기업을 대표한다고 말할 수 있는 웹사이트를 통해 비즈니스캔버스의 소식을 가장 먼저 전하고자 뉴스룸을 마련했습니다. 해당 기능을 하는 V.O.C. 섹션과 프레스킷 또한 곧 업데이트될 예정입니다.

비즈니스캔버스의 외부에서 제작된 콘텐츠들 또한 이곳에서 접할 수 있도록 기획했습니다. 더불어 그간 언론 매체를 통해 비즈니스캔버스가 보도된 기사들도 모두 뉴스룸에 아카이브해 두었습니다.

CONTENTS 콘텐츠 아카이브: 모두의 이야기를 아우를 수 있도록

세 개의 프로덕트가 운영되는 만큼 프로덕트를 홍보하고 정보를 제공하는 채널 또한 다양할 수밖에 없습니다. 따라서 비즈니스캔버스의 웹사이트는 이 세 가지 프로덕트와 팀에 대한 콘텐츠를 한 곳에서 만나볼 수 있게 하는 허브의 역할을 할 수 있도록 기획했습니다. 그래서 팀과 기술 블로그의 역할을 각각 소화하면서도 세 가지 프로덕트의 콘텐츠를 한눈에 살펴볼 수 있게 디자인했습니다. 여기에 기업과 프로덕트 차원에서 발행한 콘텐츠뿐만 아니라 팀원 개인이 개인 채널을 통해 직접 제작, 배포한 팀 콘텐츠도 한자리에서 만나볼 수 있도록 링크해 두었습니다. 개인이 제작한, 주관적인 콘텐츠만이 가질 수 있는 진정성을 더 넓은 창구를 통해 접할 수 있게 하고 싶었기 때문입니다. 콘텐츠 아카이브에서는 팀에서부터 프로덕트까지, 개인에서부터 기업 차원까지 비즈니스캔버스와 구성원이 발행한 모든 콘텐츠를 만나볼 수 있습니다.

CAREER 채용: CANVAS Crew가 되어보기

채용 페이지의 경우 비즈니스캔버스의 예비 지원자가 비즈니스캔버스의 일원이 간접적으로나마 되어 보는 컨셉으로 기획되었습니다. 비즈니스캔버스의 로켓에 탑승한 것을 환영하며, 로켓 안팎에서 비즈니스캔버스가 펼쳐가고 있는 활동을 함께 살펴볼 수 있도록 디자인했습니다.

PROJECTS 스타트업 프로젝트: 비즈니스캔버스는 왜?

마지막으로 스타트업 프로젝트 페이지의 경우 비즈니스캔버스가 스타트업을 대상으로 펼치고 있는 활동들을 모아서 볼 수 있도록, 그리고 해당 활동에 참여할 수 있도록 제작된 페이지입니다. 비즈니스캔버스는 B2B, 그중에서도 스타트업을 중요한 고객으로 여기고 있습니다. 따라서 ‘어떻게 하면 최대한 많은 스타트업 고객을 만날 수 있을까?’ 고민하였고, 그 해답은 우리가 가장 잘 할 수 있는 일을 통해 만나는 것, 즉 초기 스타트업에 계신 많은 분께 우리의 경험을 들려드리는 것이었습니다. 저희도 마찬가지로 성장하는 과정에 있는 스타트업이기에 성공하는 법을 알려드릴 수는 없지만, 때로는 딱 한 발 앞으로 나아가기 위한 경험이 갈급한 때가 있다는 것을 저희 또한 알기에, 다양한 이벤트를 열어 그 경험을 전해 왔습니다. 저희가 스타트업을 만날 수 있는 이벤트를 열어가는 것은 ‘잠재 고객과의 Contact point를 마련’하기 위함입니다. 또한 다른 마케팅 방법보다 스타트업 생태계에 긍정적인 기여를 할 수 있는 방법이기도 했습니다. 이 모든 의도와 활동을 한 곳에서 전해야 했기에, 이곳이 스타트업을 위해 마련된 광장이 되기를 바라며 이 페이지를 제작했습니다.

우리는 여전히 여행 중

브랜드 디자이너이자 콘텐츠 크리에이터가 제작한 웹사이트이기 때문에 웹사이트 구석구석에 여전히 고쳐야 할 점이 많습니다. 프로덕트 혹은 UI/UX 디자이너분들의 눈에는 부족한 부분이 너무나도 많을 것입니다. 하지만 미완으로 보일 수 있는 웹사이트와 같이, 여전히 결과가 아닌 과정에 있는 저희 팀의 진정성이 이 웹사이트를 통해 드러나기를 바라며 이 공간을 꾸려 나갔습니다. 부족한 점은 앞으로도 꾸준히 고쳐 나가려 합니다. 종종 많은 분이 이 웹사이트에서 저희의 이야기를 듣고 쉬고 가시기를, 그리고 웹사이트도 저희 팀도 어떻게 성장해 나가는지 지켜봐 주시기를 진심으로 바랍니다.

다음 아티클에서는 BCU의 시작이었던 The Blueprint로 돌아가 출발점에서부터 현재까지 구축된 비즈니스캔버스의 Internal Branding의 이야기를 차례차례 작성해 보려 합니다. 짧지 않은 글, 끝까지 읽어주셔서 감사합니다.