리브랜딩
2023년 8월 28일 아침 7시, 눈을 뜨자마자 노트북을 켰다. 전날 새벽 3시에 잠에 들었다. 하지만 피곤한지는 몰랐다. 설레기도 하고 약간의 긴장감도 있었다.
8시가 되자 사람들이 조금씩 페이지로 들어오기 시작했다. 당근을 사용하는 사람들에게 알람이 가는 것은 10시였지만 8시부터 들어올 수 있었다. 실시간으로 늘어나는 사람들을 보면서 심장이 터질 것 같았다.
진짜 시작됐구나. 진짜 당근이 됐구나.
아침 7시에 노트북 앞에 앉아서 그대로 12시까지 5시간을 앉아있었다. 시간이 흐르는 줄 몰랐다. 왜냐하면 자잘한 버그들이 있었기 때문에 그것을 고쳐야 했다.
많은 생각이 들었다. 사람들은 내가 만든 페이지를 보면서 어떤 생각을 할까, 버그는 없을까, 많은 사람들이 봤으면 하는 마음과 버그가 있으면 많은 사람들이 내가 만든 버그를 보겠지.
사람들에게는 단순한 약 20초 정도에 모든 경험을 다 해볼 수 있는 랜딩 패이지일수도 있다. 정말 스쳐지나가는 순간, 1분도 안되는 그 순간을 위해 한 달간 많은 사람들의 노력이 들어갔다.
조금 시간이 지나고 난 뒤에는 뿌듯하기도, 허무하기도 했다. 그래도 당근마켓이 당근으로 바뀌는 기념비적인 날의 중간에 내가 있어서 기뻤다. 내가 모든 것을 한 것은 아니지만 리브랜딩을 사람으로 비유하면 내가 얼굴에 화장 정도는 한 것 같았다. 그리고 나름 화장이 잘된 것 같다.
이 글은 리브랜딩 페이지를 만들고 느낀 모든 것을 기록한 글이다. 개발적인 내용은 팀 블로그에 따로 올릴 예정이다. 이 외에 비개발적인, 정말 개인적으로 느꼈던 것들을 모두 기록하려한다.
개발
랜딩 페이지를 개발하는건 정말 어렵다.
Brand New Daangn, 내가 만든 페이지다. 정확히는 나와 많은 디자이너분들과 개발자들이 함께 만든 페이지다. (예니, 리지, 엠버, 민나, 댄, 레이첼, 토니, 피터 감사합니다.)
평소에 우리가 고민하는 아키텍처적인 고민이라던지, 컴포넌트는 어떻게 관리하고, 기술적인 해결을 어떻게 하는 고민들 보다는 애니메이션을 어떻게 구현할지 혹은 트랜지션을 어떻게 넣을지, 이 영상이 나오는 타이밍은 언제고 텍스트가 들어가는 딜레이는 어떻게 줄건지에 대한 고민이 더 많다.
많은 개발자들이 기술에 대한 성장을 얘기할 때 단순 유려한 애니메이션과 트랜지션을 구현했다고 기술적인 성장을 했다라고 얘기하진 않는다. 하지만 랜딩 페이지를 개발하면서 기술적인 성장이 없어도 어떤 것을 얻어갈 것인지에 대한 것은 온전히 나의 몫이다.
우리는 오직 코드로만 일하진 않는다. 코드 이외에 신경써야 하는 것들이 너무 많다. 사람과의 커뮤니케이션, 테스크의 우선순위, 업무의 분배 등 사실 코드를 치는 시간만큼 다른 것을 하는 시간도 많이 든다.
나는 이 프로젝트를 통해 여러 디자이너분들과 일하는 법, 소통하는 법을 배우고 커뮤니케이션에 있어서 조 금 더 단단해졌다. 그리고 난 나를 개발자라고 생각하지 않고 메이커(Maker)라고 생각하는 사람으로써 내가 원하는 애니메이션이나 트랜지션을 실제 웹 사이트에 구현할 수 있는 힘을 얻었다. 그 중에서 스크롤과 애니메이션을 연동해서 구현하는 웹 페이지는 이제 자신있다.
디테일
디테일은 정말 중요하고, 앞으로 모든 프로젝트에서 진심을 담을 것이다.
난 랜딩 페이지에서 여러 디테일에 꽤나 신경을 썼다. 누군가는 아예 알아차리지도 못하고 넘어갈 디테일도 정말 많다.
하지만 나는 디테일의 힘을 믿는다. 직관적인 아이콘, 부드러운 애니메이션, 원활한 전환을 갖춘 잘 설계된 UI이 얼마나 많은 공수가 들어갔는지 안다. 버튼의 느낌, 색의 대비, 적당한 너비와 편안한 간격에 들어간 수많은 변경을 안다.
그리고 이런 디테일을 나도 모르게 알아차릴 때 다가오는 감동을 안다. 그런 감동을 이 페이지에 넣고 싶었다. 모두가 알아차리진 못해도 누군가는 알아차릴 것을 안다.
랜딩 페이지는 많은 섹션이 있다. 각 섹션마다의 전환 그리고 각 요소가 어떻게 등장할건지, 언제 등장할건지에 대한 QA가 정말 많이 있었다. 정말 많았던 변경은 거의 한 요소에 10번 이상은 값을 바꿨다.
사실 랜딩페이지를 빠르게 개발하려면 2주만에도 개발할 수 있었다. 나머지 기간은 QA와 변경사항을 적용하는데에 시간을 쏟았다.
이제 다른 회사에서 만든 랜딩 페이지를 보면 자세히 살펴보게 될 것 같다. 얼마나 많은 변경과 QA가 있었을까와 같은 생각도 했고, 이 화면을 만든 개발자와 디자이너는 이 화면을 수백번은 봤겠지와 같은 생각도 했다.
기획
랜딩 페이지를 기획할 땐 꼭 개발자가 들어가야 한다.
기획 단계는 건물을 지을 때 철근을 놓고 기반을 다니는 것처럼 프로젝트의 방향성과 전반적인 구성이 결정된다. 어떤 느낌을 원하는지, 어떤 애니메이션과 트랜지션을 원하는지 처음부터 같이 얘기하는 것이 훨씬 시간을 아낄 수 있겠다고 느꼈다.
개발자도 애니메이션에 관한 프로젝트를 많이 해보지 않았으면 모를수도 있지만, 대충 어떤 기능을 들으면 느낌이 온다. "아, 이 기능은 오래걸리겠구나." 혹은 "이 기능은 금방 할수 있겠는데?" 아니면 "이건 해봐야 알 것 같아." 와 같이.
사실 위 세 경우 모두 시간 절약에 도움이 된다. 오래 걸리겠다고 생각이 되면 조금 더 쉽지만 비슷한 감동을 줄 수 있는 애니메이션을 찾을 수 있다. 금방 할수 있겠다고 생각되면 그대로 진행하면 되고, 해봐야 알것 같으면 미리 정보를 찾아볼 수 있다.
그리고 디자인 시안이 꼭 나와야 개발을 시작할 수 있는 것도 아니기 때문에 더더욱 기획에 참여해야한다. 프로젝트 세팅을 해둔다던지, 섹션을 나눠놓는다던지, 대충 혼자서 프로토타입을 작성해놓을 수 있다.
하지만 기획할 때 중요한 점은 개발자가 들어가서 PM분이나 디자이너분의 상상력을 제한시키지 않는 선을 잘 지켜야 한다. 랜딩 페이지 프로젝트는 상상력이 정말 많이 요구되기 때문에 더더욱 중요하다.
앞으로 이런 단기간 프로젝트는 모두 기획에 적극적으로 참여하려 한다.
우선순위
랜딩 페이지와 같이 단기간 프로젝트는 우선순위를 정말 잘 따져야 한다.
아무래도 랜딩 페이지는 한 페이지에 영상, 이미지가 많이 들어간다. 그리고 우리는 로띠도 사용했다.
아니나 다를까 로띠에서 성능 문제가 있었고, 나는 혼자 일을 하는게 익숙해서 그런지 내가 문제를 해결할 수 있다고 생각했다. 하지만 내가 해결할 수 있는 한계가 있었다. 이 문제를 디자이너분과 같이 얘기를 했고 디자이너분이 로띠 파일 자체를 최적화 해주시면서 해결이 됐다.
내가 할 수 있는 일과 없는 일, 그리고 함께 할 수 있는 것을 잘 구분하고 빠르게 움직여야 한다.
사실 위와 같은 생각을 누구나 할 수 있지만 지금 내가 겪고 있는 문제에 대한 지식이 없고 막상 상황이 닥치면 삽질을 하고 혼자서 해결하려고 하는 것 같다.
하지만 이런 문제들은 경험을 통해서 채워진다. 그리고 이런 부분들을 자각하고 프로젝트가 진행될 때 지속적으로 상기해야 한다.
3D
웹 애니메이션을 더 공부해서 더 많은 프로젝트를 하고 싶다.
예전부터 나는 웹 애니메이션, 유려한 웹 페이지, 트랜지션에 관심이 많았다. 사이트를 구현하면서 구현이 될지 애매했던 애니메이션을 구현했을 때의 성취감을 잊을 수 없다. 그리고 부드럽게 상호작용하는 웹 사이트를 보면 마음이 편안하다.
나의 투두리스트에 남아있는 웹 3D 프로젝트에 대한 갈망이 커졌다. 예전에 카카오에서 낸 춘식이의 관찰일기가 줬던 충격을 잊지 못한다.
나도 당근 캐릭터로 3D 웹 페이지를 만들어 보고싶다.
인정하기
나에게 칭찬해주자.
예전의 나는 나한테 엄격한 스타일이라서 자기 칭찬을 잘 못했다. 사람들이 칭찬을 해도 "그냥 입에 발린 말이겠지" 하고 생각했다. 자존감이 낮아서 그랬을까.
지금은 사람들의 말을 그대로 듣는다. 정말 잘 만들었다고 하면 감사하다고 인사한다. 내가 하지 못하는 것이 아니라 경험하지 않은 것이라고 생각한다.
지표도 잘 나온 것 같아서 좋다. 자신감도 생겼다. 다음에 이런 프로젝트가 있으면 발 벗고 나설 수 있을 것 같다.
끝
한 달간 시간이 어떻게 흘러갔는지 모르겠다.
프로젝트가 끝나고 많이 쉬어야 할 것 같았는데 막상 끝나니 또 평범하게 일상으로 돌아왔다. 정말 바빴지만 운동도 꾸준히 하고 컨디션 조절을 잘 했던 것 같다.
그리고 이렇게 과몰입해보는 순간도 나쁘지 않다고 느꼈다. 하지만 쿨타임은 필요하다. 리브랜딩 처럼 큰 이벤트가 얼마나 많을까 싶지만 1년에 2-3번 정도면 할만할 것 같다.
잘 해낼 수 있는 나의 능력에 감사하다. 이렇게 중요한 프로젝트의 기회가 나에게 와서 감사하다. 나와 함께한 출중한 능력을 가진 동료들에게 감사하다.
