우글우글 어쩌다 만들었을까요?

우아한청년들에 마케팅팀과 크리에이티브팀이 생긴 지 약 2년 정도가 되었습니다. 이제 두 팀은 브랜딩과마케팅실(이하 브마실)로 묶여 함께 달리고 있어요. 2년간 우리 실은 여러 가지 업무를 해왔는데요. (제 개인적으로는) 바쁘다는 핑계로 프로젝트를 꼼꼼하게 회고하지 못하고 있었답니다.(반성) 우리가 겪은 시행착오들을 어딘가에 쌓아두고 필요할 때마다 꺼내볼 수 있는 잘 정리된 장치가 필요하다고 생각했어요. 또, 우리 실 구성원뿐만 아니라 같은 업에 종사하는 마케터, 디자이너 분들과 이 고민을 공유하면 어떨까! 생각했습니다. 이것이 바아-로 우리가, 우아한청년들 브마실이, 우글우글 사이트를 만들게 된 배경이에요.

먼저 말씀드리고싶은 점은 이 프로젝트가 실의 "조모임 제도"에서 비롯되었다는 것이에요. "조모임 제도"란 마케터, 디자이너가 한 주제로 팀을 이루어 본인들이 원하는 주제를 선정하고, 해당 프로젝트를 완성시키는 제도인데요. 여러가지 주제 중 "회고사이트 구축"이 있었고, 여기에 뜻이 맞은 마케터 2명과 디자이너 2명이 모여 시작하게 됐어요. 업무와 함께 병행한다는게 쉬운 일은 아니지만, 자발적으로 시작했던 프로젝트인 만큼 다들 열의를 갖고 임했습니다. 사이트의 구조와 톤앤매너를 기획하는 단계에서는 모두가 참여했고, 이후 마케터는 콘텐츠 수급과 리스크 검토를 디자이너는 사이트의 구축과 그래픽 에셋을 담당해 진행했습니다. 이 모든 것이 총 5개월에 걸쳐 진행됐는데요. 아래 보시는 것처럼 한 꼭지를 부러뜨리는데 평균 1개월씩을 소요했습니다.

우글우글이 가진 의미

첫 기획단계에서 가장 많은 공을 들였던 것은 사이트의 첫인상을 결정하는 네이밍과, 로고 디자인이었어요. 우글우글이라는 네이밍은 브랜딩과마케팅실 구성원의 아이디어로 만들어졌어요. 100개가 넘는 아이디어가 공모되었고, 그 중 몇 가지 후보들을 저희 조에서 먼저 추려 이후 투표를 받아 선정했습니다. 그렇게 100:1의 경쟁률을 뚫고 "우글우글"이 선정되었답니다. 우글우글 외 다른 네이밍 후보들도 궁금하시다면, 여기서 그 히스토리를 확인해 보실 수 있어요.

"우글우글"이 마음에 드는 이유는 하나 더 있었는데요, 바로 숨은 의미가 좋았기 때문이에요. "우리가 글쓰고, 우리가 그린다" 라는 의미가 있는데, 마케터와 디자이너로 이루어진 브마실에 찰떡인 네이밍이라고 생각했습니다. 더불어 와글와글한 우리 실을 잘 대변해주는 이름 같기도 했고요. 추후에 필요하다면, 와글와글, 징글징글, 쟁글쟁글 등 다양하게 변주가 가능할 것 같은 단어였습니다. 쏙 마음에 들었어요.

이름이 지어진 이후, "우글우글"이라는 단어의 느낌과 걸맞은 손글씨 느낌의 로고도 만들었어요. 로고와 함께 상단 메뉴바를 구성하는 메뉴명들도 결을 맞춰 직접 손으로 하나하나 그려 제작했답니다. 로고가 사이트의 얼굴인 만큼, 로고만 해도 여러개의 시안이 나왔었는데요, 선택되지 못한 시안들이 사이트 가장 마지막 메뉴에 숨어있으니 한 번 확인해 보셔도 좋을 것 같아요.

Framer로 외형 잡아가기

이번 프로젝트는 기획단계에서부터 Framer라는 툴을 사용하는 것으로 계획 되어있었어요. Framer는 개발자 없이 누구나 사이트 빌드가 가능한 툴이랍니다. 디자이너와 마케터로 뭉친 저희가 개발자 없이도 충분히 활용해 퀄리티가 있는 결과물을 만들어 낼 수 있는 툴이라고 생각했어요. 초반, Medium이나 브런치와 같은 블로그 툴을 활용할까도 했지만, 저희만의 색을 온전히 담기에는 한계가 있다고 생각했습니다. 이 프로젝트를 함께 진행했던 저희 네 명 모두 Framer를 한 번도 사용해 본 적이 없지만, Framer로 만든 결과물들이 놀라우리만큼 괜찮았던 것을 확인했던 저희는 한번 도전해 보기로 했어요. 

📍 간단하게 써보는 Framer 사용 후기

아직 국내에 Framer 관련 자료가 많지 않아서, 다른 분께 도움이 될 수 있도록, 디자이너로서 Framer로 웹사이트를 구축하며 제가 느낀 점을 간략하게 적어볼게요.

1. 우글우글과 같은 블로그형 사이트에는 주기적으로 콘텐츠를 업로드해야 하는데요. 이 경우 에디터 기능이 필요합니다. Framer에는 CMS(Content Management System)라는 기능이 있어 한 번 포맷을 만들어 두면 이를 활용해 다른 포맷화된 글을 쉽게 업로드 할 수 있어요. 주기적으로 콘텐츠 업로드가 필요한 상황에서 매번 다른 페이지를 만들려면 장기적으로 운영이 힘들어질 수 있는데, Framer에서 제공해 주는 기본 에디터 기능으로 운영을 원활히 할 수 있다는 장점이 있었어요.

2. 다양한 인터랙션을 지원합니다. 사이트를 구축하며 가장 신경을 많이 썼던 부분이 인터랙션에 관한 부분이었어요. Framer는 다양한 인터랙션을 손쉽게 구축할 수 있도록 만들어져 있어요. 예시로 저희 사이트 메뉴바에는 눈으로 표현된 아이콘이 있는데요. 저희끼리는 놀이터라고 부르는데, 이곳에 가시면 우글우글 로고들을 옮겨 재미있는 것들을 만들어 볼 수 있어요. 개발자 없이도 이런 기능을 구현할 수 있다니! 정말 대단하지 않나요? 

3. 협업이 원활합니다. 피그마(figma)에서 사용하는 기능의 대부분을 지원해요. 커서챗이나 코멘트 기능이 가능해서 디자이너, 마케터 분과 원활하게 협업할 수 있었습니다. 

* 커서챗(Cursor Chat)이란? 커서에 말풍선을 띄워 바로 채팅을 할 수 있는 기능입니다.

4. 하나 아쉬웠던 점은 국내에 Framer 툴 사용과 관련된 자료가 많지 않아 공식 홈페이지에서 대부분의 것을 해결해야 한다는 것이었어요. 혹시 Framer와 관련된 정보를 찾고 계신 분들을 위해 도움 받았던 두 곳을 소개합니다.

• Framer와 관련된 강의 : Framer 공식 유튜브 채널에서 잘 설명해 주고 있어요!

• 지원이 필요하거나 버그가 발견됐다면 : Framer 커뮤니티를 이용해보세요!

결론적으로 Framer는 기대했던 것 이상의 결과물을 저희에게 가져다 주었어요. 저희가 원하는 대로 어느정도 커스터마이징이 된 모습으로 웹 빌드에 성공한 것이지요!

"우글우글"로 확인하고 싶은 것들

어느정도 사이트의 모습이 갖춰진 이후 저희는 2가지를 추가로 진행했어요. 우글우글에 더 많은 유저가 유입될 수 있도록 홍보전략을 짜는 것과 사이트에 GA(Google Analytics)를 붙여 데이터를 확인할 수 있는 기반을 만드는 것이었습니다. 추후 데이터를 통해 '우리가 무엇을 확인해야 사이트를 운영하는데 도움이 될 수 있을까'를 고민했고 아래 3가지의 간단한 가설을 세워보았습니다.

가설1. 우글우글의 인기 컨텐츠는 시각적으로 자료가 풍부한 디자이너의 컨텐츠일 것이다.

가설2. 채용과 관련된 채널에서 유저 유입이 많을 것이다.

가설3. 유저당 2개 이상의 컨텐츠를 조회할 것이다.

저희가 이것을 확인하려는 이유는, 앞으로 우글우글을 더 잘 운영해 나가고 싶기 때문이에요. 보시는 분들이 관심있어 하시는 콘텐츠를 확인하고, 어떤 목적으로 방문하실지 가늠하여, 더 나은 콘텐츠를 만들고, 더 나은 우글우글을 만들어 볼 생각입니다. 이 가설들이 어떻게 입증되었는지에 대해서는 추후 우글우글 데이터 편을 통해 말씀드려보도록 할게요!

시작이 반, 재미가 반, 그렇게 탄생한 하나!

앞서 말씀드린 것처럼 이번 우글우글 프로젝트는 우아한청년들 브랜딩과마케팅실의 조모임 제도에서 시작됐어요. 저희 조 이름이 회고TF였답니다. 성과를 내기보다도, 개개인의 성장에 초점을 두자는 배경이 있었기 때문에 Framer라는 새로운 툴도, 사이트 하나를 만든다는 다소 거창했던(?!) 이번 프로젝트도 덜 부담스럽게 시작해볼 수 있었던 것 같아요. 좋은 제도와 적당한 호기심들이 만나 브마실이 고민하고 성장할 수 있는 공간이 생겨, 당장 저희는 기쁠 따름입니다. 앞으로 가벼운 마음으로 그러나 꽤 무거운 책임감을 갖고 우글우글을 가꿔가볼게요! 우글우글의 성장기를 지켜봐주세요 :) !

Special thanks to …

글을 마무리하기 전, 우글우글이 탄탄한 내용을 담은 사이트가 될 수 있도록 콘텐츠를 가득 채워주신 라희님, 진솔님, 은경님, 규헌님께 심심한 감사의 인사를 드립니다. 더불어, 완벽한 배포를 위해 꼼꼼하게 리스크 검토를 해주신 CR팀의 재규님과 브랜딩과마케팅실 예진님 그리고 세세한 부분까지 하나 하나 같이 검토해주신 두희님께 감사의 마음을 전합니다.