오전 7시, 눈을 뜨자마자 손은 이미 노트북 화면을 열고 있었다. 전날 새벽 3시쯤 잠들었는데도 전혀 피곤하지 않았다. 손끝에 긴장감이 맴돌았고 걱정도 됐지만 설레는 마음도 컸다. 8시가 되자 사람들이 조금씩 리브랜딩 랜딩 페이지로 들어오기 시작했다. 실시간으로 늘어나는 사람들을 보고 있자니, 과장이 아니라 심장이 터질 것 같았다.
진짜 당근이 됐구나!
노트북 앞에 앉아 시간이 흐르는 줄도 모르고 마무리 작업을 이어갔고, 점심을 먹을 때가 되어서야 시간이 그만큼 흘렀음을 인지했다. 당근이라는 새로운 이름으로 펼쳐지는 첫 여정에서 아주 작은 아쉬운 것 하나까지 놓치고 싶지 않았다.
이 글은 당근 리브랜딩 캠페인 페이지를 함께 만들며 느낀 것을 기록한 글이다. 개발적인 내용은 당근 테크 블로그에 업데이트되었으며, 글의 하단에 링크를 걸어 두었다. 이번 글에서는 프론트엔드 엔지니어로서 리브랜딩 프로젝트에 함께 하며 느낀 감정, 당근이 일하는 방식에 대한 이야기를 진솔하게 나눠보려 한다.
당근마켓에서 당근으로, 당근의 리브랜딩은 중고거래를 넘어서 더 많은 접점으로 이웃을 연결하기 위한 지역 로컬 커뮤니티로서의 선언이었다. 동시에 팀 내부적으로 합을 맞추는 시기이기도 했다. 리브랜딩 프로젝트는 브랜드 디자이너와 브랜드 마케터를 중심으로 오랜 시간을 걸쳐 치열하게 진행됐는데, 본격적인 론칭을 두 달 정도 앞둔 시기에는 리브랜딩 웹 사이트 개발 TF가 꾸려졌다. 그런데 매주 진행하는 프론트엔드 코어팀 티타임이 있던 어느 날, 팀 리더 Tony가 “캠페인 페이지 개발을 맡아줄 담당자가 필요하다.”는 이야기를 전해 주었고 나는 주저 없이 하고 싶다고 손을 들었다.
당근에서는 전사 차원에서 설정한 하나의 목표를 향해 여러 조직이 함께 협업하는 Cross-functional 프로젝트가 종종 진행되고, 이에 대해 자발적으로 업무를 맡아 진행할 수 있다. 당근에 입사한 지 막 1년이 되었던 나는 지금까지 전사 차원의 규모로 TF 업무를 맡은 적은 없었는데, 이번에는 업무나 일정에 대한 고민보다도 ‘하고 싶다!’는 마음에 손이 먼저 올라갔다.
당근에는 우리가 사는 동네를 더 나은 곳으로 만든다는 비전에 대해 자부심을 가지고 일하는 구성원이 많다. 그 비전이 더욱 선명해지는 리브랜딩의 과정, 즉 당근마켓이 당근이 되는 중요한 순간에 함께 기여하는 것 자체만으로도 일에 대한 큰 몰입과 재미를 가져다줄 것이라는 기대감이 일었다. 그렇게 리브랜딩 프로젝트 TF의 일원으로 합류했다.
사용자의 손끝이 화면을 밀고 스쳐 지나가는 그 순간, 몇 초도 안 되는 그 순간에 만들어질 당근의 인상과 경험을 위해 리브랜딩 TF의 고민과 노력, 투지에 가까운 열정이 들어갔다. 브랜드 디자이너뿐 아니라 모션 그래픽 디자이너, 브랜드 마케터, 커뮤니케이션팀과 법무팀, 그리고 나와 같은 소프트웨어 엔지니어들까지... 모두가 저마다의 전문성을 발휘하며 하나의 프로덕트를 만들어 나갔다. 다양한 직군이 One Team으로 일하며 완벽하게 멋지고 사용성 좋은 결과물을 내기 위해 치열하게 협업하는 그 과정은 그 자체로서 큰 영감이 됐다.
평소 디자인시스템팀에서 업무할 때는 엔지니어로서 아키텍처적인 고민, 예를 들어 ‘컴포넌트는 어떻게 관리하고 기술적인 해결을 어떻게 할지’ 등을 주로 고민해 왔다면, 이번 리브랜딩 프로젝트를 통해서는 사용자와 훨씬 더 가까운 거리에서 업무할 수 있었다. 애니메이션을 어떻게 구현할지, 트랜지션을 어떻게 넣을지, 영상이 나오는 타이밍은 언제고(0.1초 단위로도 테스트했다) 텍스트가 들어가는 딜레이는 어떻게 줄 건지... 캠페인 페이지를 탐색할 사용자를 구체적으로 상상하며 완벽한 경험과 타이밍에 대해 고민했다.
사실 처음에는 1, 2주 정도면 개발을 마무리할 수 있을 거라 생각했지만 착각이었다. 예상과 달리, 약 한 달 남짓의 시간 동안 리브랜딩 TF에 완전히 몰입해야 했다. 0.1초의 디테일을 잡아내며 사용자가 새로워진 당근의 모습에 완전히 몰입할 수 있도록 고민하고 또 고민했기 때문이다. 브랜드 디자이너, 프로덕트 디자이너와 끊임없이 논의했고 협업했다. 기능조직에서 일해온 내게 이렇게 다양한 직군과 적극적으로 함께 일하는 경험이 새로우면서도 도전적이었고 또 즐거웠다. 하나의 목표에 처음부터 다 같이 몰입해 고도로 집중하는 새로운 경험이었다.
이번 당근의 리브랜딩 랜딩 페이지에는 영상과 이미지가 많이 들어갔다. 당근에서는 JSON 기반의 애니메이션 파일 로티를 활용 했는데, 실제 구현하는 과정에서 성능 문제가 있었다. 처음에는 엔지니어로서 개발만으로 문제를 해결할 수 있겠다고 생각했는데, 역시 이번에도 정답은 ‘협업’에 있었다. 개발로는 어렵게 끙끙 고민했던 것이, 매주 진행한 리브랜딩 TF 체크업 회의 시간에 디자이너와 함께 살펴보니 파일 자체를 최적화하는 방식으로 아주 쉽게 해결할 수 있었던 것이다. 동시에 해당 섹션을 검토하는 과정에서 미처 발견하지 못한 경험의 아쉬운 점에 대해서도 논의할 수 있었다. 문제를 발견하면 팀에 빠르게 공유하는 게 중요하단 것을 다시 한번 체감한 순간이었다. 원팀으로서 투명하게 공유하고 함께 논의할 때 문제 해결과 목표 달성에 성큼 가까워질 수 있음을 느꼈다.
엔지니어로서 단순히 유려한 애니메이션과 트랜지션을 구현했다고 ‘기술적인 성장을 했다’라고 말할 수는 없다. 변경 사항을 유연하게 반영할 수 있는 짜임새 높은 코드 퀄리티를 만들어 내는 것이 중요하기 때문이다. 그동안 팀 내에서 작업할 때는 챕터 내 엔지니어끼리 코드를 꼼꼼하게 리뷰하고 인사이트를 공유하면서 빠르게 성장할 수 있었는데, 이번 프로젝트처럼 기본적으로 혼자 작업해야 하는 경우 어떻게 하면 함께 성장할 수 있을지 고민했다.
어떻게 하면 프로젝트도 나도 함께 성장할 수 있을까?
엔지니어로서의 성장이 꼭 ‘기술적인 성장’만을 의미하진 않을 것이다. 당근에서 엔지니어는 코드로만 일하는 게 아니라, 결국은 문제를 해결해야 하는 메이커(Maker)로 일한다. 다른 직군 구성원과의 유기적인 커뮤니케이션, 업무의 우선순위 결정과 분배 등을 고민하는 것 역시 코드를 다루는 시간만큼 책임지고 해내야 하는 일인 것이다.
이번 리브랜딩 프로젝트에서는 새로워진 당근의 비전을 전달하는 브랜드 커뮤니케이션 관점에서의 완성도가 중요했기 때문에, 평소보다 QA 과정에 더 충분한 시간을 할애해 꼼꼼하게 진행했고 새롭게 추가되는 변경사항도 무리 없이 적용할 수 있도록 업무를 조정했다. 어떻게 하면 디자이너와 더 원활히 소통할 수 있을지도 항상 고민했다. 같은 화면을 수십 수백번씩 돌려보며 최고의 프로덕트를 만들기 위한 허슬 플레이가 힘들지만은 않고 오히려 즐거웠다.
랜딩 페이지에는 많은 섹션이 있었는데, 각 섹션마다의 전환, 요소의 등장 타이밍 등에 대한 QA를 거듭하고 또 거듭했다. 정말 많았던 변경은 한 요소에 거의 10번 이상은 값을 바꾸기도 했다. 색의 대비, 버튼의 굴곡, 직관적인 아이콘, 부드러운 애니메이션, 원활한 전환을 갖춘 잘 설계된 UI… 이 모든 것이 담긴 캠페인 페이지는 결국 ‘함께 사는 방법’이라는 당근의 핵심 가치를 잘 전달하기 위한다는 목적 아래 한 궤로 맞추어졌다. 애니메이션이나 트랜지션, 스크롤의 움직임을 디자이너와 소통하며 실제 웹 사이트에 구현할 수 있는 힘과 자신감을 얻었다. 당근 리브랜딩 페이지는 역대 당근에서 진행한 여느 프로젝트 페이지보다 체류시간이 길었고, 압도적인 스크롤 깊이를 보였으며, 공유되는 수를 보며 사용자들도 이런 디테일을 체감했다고 느껴졌다.
개발 전반을 돌이켜 보며 한 가지 팁을 꼽아 보자면, 기획 단계에서부터 엔지니어가 함께 협력하는 것에 대한 중요성이다. 보통 랜딩 페이지를 기획한다고 하면, PM이나 프로덕트 디자이너가 먼저 킥오프하고 엔지니어는 나중에 구현 단계에서 합류하기도 하는데 이는 추후 오히려 큰 부담이 될 수 있다. 건물을 지을 때 철근을 놓고 기반을 다니는 것처럼, 기획 단계에서부터 엔지니어도 함께 프로젝트의 방향성과 전반적인 구성을 결정하는 게 중요하다. 이번 리브랜딩 프로젝트에서도 구체적인 디자인 시안이 나오지 않은 상황에서, 프로젝트를 세팅하거나 섹션을 나눠 놓는 등을 고민하며 대략적인 프로토타입을 작성해놓으려고 노력했다. 물론 이때 주의해야 할 게 하나 있는데, 기획할 때 엔지니어가 들어가서 개발 스택에 제한적으로 설명하며 PM이나 디자이너의 상상력을 제한하지 않아야 한다는 것이다. 특히 리브랜딩과 같은 랜딩 페이지 프로젝트는 다양하고 창의적인 상상력이 많이 요구되는 영역이기 때문에, 이 부분이 더더욱 중요하다.
한 달간 시간이 어떻게 흘러갔는지 모르겠다. 프로젝트가 끝나고 많이 쉬어야 할 것 같았는데 막상 끝나니 또 평범하게 일상으로 돌아왔다. 최근 TF 차원의 회고까지 마치니 밀도 있던 프로젝트가 끝났다는 게 실감 난다. 때론 창의적인 아이디어를 펼치고, 때론 폭주 기관차처럼 몰아쳤던 지난날을 돌이키며 아쉬웠던 점과 개선할 점을 공유했는데, 그중에서도 잘한 점은 특히 서로 하나라도 놓치지 않으려고 오랜 시간을 할애해 이야기를 나눴다. '함께 사는 방법'이 리브랜딩 타이틀이었는데, 우리는 ‘함께 일하는 방법’에 대해 잘 알게 됐다.
이번 리브랜딩은 하이퍼로컬이라는 당근의 꿈을 전하는 캠페인이었던 만큼, 전반적인 메시지 전달과 경험이 중요했다. 그러한 목표를 달성하기 위한 문제 발견과 소통, 해결까지의 모든 과정은 엔지니어로서 크게 성장할 수 있는 씨앗이 됐다고 믿는다. 개인적인 욕심도 더 생겼다. 웹 애니메이션을 더 공부해서 더 많은 프로젝트를 하고 싶다는 욕심이다. 이번 리브랜딩 캠페인 페이지를 구현하면서 ‘이게 될까?’하는 어려운 애니메이션을 정확히 구현해 냈을 때의 성취감을 잊을 수 없다. 오랜 to-do 리스트에 남아있는 ‘웹 3D 프로젝트’에 대한 갈망이 커졌다. 언젠가 당근의 캐릭터 ‘당근이’가 3D 웹 페이지 공간에서 빵실한 앞머리를 휘날리며 동네를 걸어 다닐 수 있도록 재미있는 프로젝트를 만들어 보고 싶다.
진한 과몰입의 순간이 이렇게 지나갔다. 잔뜩 달아올랐던 열기를 식히고, 건강한 체력도 되찾은 후에, 다음에 또 이런 프로젝트가 있으면 발 벗고 나설 수 있을 것 같다. 이 말을 들은 디자이너 Lizzy가 “후후, 준비됐나요?”라고 했다. 조…금 무섭다. 하하. 장난이고, 앞으로도 이런 프로젝트라면 몇 번이고 더 함께하고 싶다.
저희 이제, 당근입니다!
Software Engineer, Frontend