토스의 홈페이지는 어떻게 레퍼런스가 되었을까?

안녕하세요. 저는 토스의 브랜드 디자이너 김지윤입니다. 브랜드 디자인 팀은 모든 고객들이 일관된 브랜드 경험을 할 수 있도록 아이덴티티를 정립하고 강화하는 활동을 하고 있어요. 토스라는 브랜드를 알리고, 브랜드의 미션에 공감하게 만드는 일이죠. 오늘은 제가 하는 여러가지 일 중에, 토스의 홈페이지에 관한 이야기를 들려드리려고 합니다.

#guild-homepage

토스에는 길드(guild)라는 조직이 있습니다. 서로 다른 팀이나 사일로에 속한 팀원들이 느슨하게 모여 공통의 관심사를 공유하는데요. 저는 1년 반 전부터 ‘홈페이지 길드(guild-homepage)’의 일원으로 활동하고 있어요.

길드의 매력은 함께 하는 분들이 공감하는 만큼 치열하게 달릴 자유가 있다는 것이에요. 처음엔 느슨하게 시작했지만 지금은 토스팀에 없어서는 안될 존재가 되었고, 팀원 분들도 홈페이지의 임팩트에 공감해주고 계세요.

길드 형태로 운영되면서 20여 명의 팀원 분들이 도움을 주셨는데요. 특히 많은 개발자 분들이 홈페이지 제작에 도움을 주셨어요. 현재는 에디터 금혜원 님, 브랜드 마케터 용석민 님과 홈페이지 기획을 함께 진행하는 중이고, 전담 개발자와 디자이너 분을 채용해 안정적으로 홈페이지를 운영하려고 합니다.

토스에게 홈페이지란?

홈페이지는 너무 기본적이고 당연한 매체가 됐어요. 홈페이지를 쉽게 만들 수 있는 도구도 많고, 정형화되기도 했죠. 하지만 언택트 시대, 디지털 네이티브 시대를 맞아 홈페이지라는 매체를 더 풍성하게 사용해보고 싶었어요. 브랜드를 알릴 수 있는 가장 접근성 높은 매체라고도 생각했고요. 

토스 서비스는 쉽고 간편해요. 하지만 토스 서비스를 사용하지 않는 사람들은 토스의 가치를 몰라요. 토스팀에 와보지 않은 사람들은 토스팀의 문화를 알 수 없고요. 그런 사람들이 토스의 홈페이지를 통해 제품이나 문화를 간접적으로 체험할 수 있으면 좋겠어요. 홈페이지는 ‘제품을 써보지 않았지만 써본 것처럼’, ‘토스팀에 와보지 않았지만 와본 것처럼’ 보여줄 수 있는 유일한 매체라고 생각해요. 

토스팀은 그동안 해왔던 일과, 앞으로 할 일을 말하는 데 인색했던 것 같아요. 하지만 홈페이지를 통해서라면 토스의 과거와 현재, 미래를 효과적으로 보여줄 수 있을 것이라고 기대돼요. 일종의 도서관을 만드는 작업인 거예요. 홈페이지가 토스의 가치를 잘 전달한다면, 토스 서비스와 토스 팀에 대한 호감이 높아질 테니 홈페이지를 만든다는 건 토스를 사용하는 사람들로부터 사랑과 응원을 받기 위한 작업이 아닐까요? 

방문자를 사로잡는 토스만의 전략

홈페이지는 시간성과 공간성이 있는 일종의 ‘공간’이에요. 사람들이 이 공간을 궁금해하며 탐색하게 만들어야 하죠. 제일 중요한 건 첫 화면인데요. 보통 사람들은 첫 화면만 보고 창을 닫아요. 스크롤을 잘 내리지 않더라고요. 그래서 ‘첫 화면에서 승부를 봐야 한다, 3초 안에 결정되는 첫인상을 임팩트 있게 남겨야 한다’고 생각하며 홈페이지를 만들어요. 

제가 자주 사용하는 방법은 ‘첫 화면에 강력한 비주얼을 넣는다’예요. 사용자의 스크롤 행동 패턴을 보면 대부분 웹사이트의 첫 화면에서 25%가 이탈해요. 저희가 하고 싶은 이야기를 끝까지 읽게 하기 위해선 첫 화면에 가장 강력한 비주얼이 있어야 하죠. 강력함을 주는 방법은 움직이거나, 수가 많거나, 호기심을 자극하는 방법이 있을 것 같아요. 2020 TOSS Next 개발자 채용 홈페이지에서는 코드가 작성되는 과정을 공이 굴러가는 모션으로 표현했어요. 언뜻 보면 ‘개발자와 무슨 관련이 있지?’ 싶으면서도 어두운 배경에 공이 굴러가는 것만으로 호기심을 유발하죠. 2021 토스채용 페이지에서는 토스팀의 다양한 팀원들을 ‘많이’ 담았어요. 2일 만에 제작한 사이트지만 첫 화면에 대한 확신은 있었어요. 성별, 나이에 제한 없이 정말 다양한 사람이 토스팀에서 일하고 있다는 것을 보여주고 싶었어요.

최근 런칭한 토스의 다큐멘터리 <FINTECH: Behind the Simplicity>의 홈페이지는 핀테크라는 대명사를 구금융과 신금융의 대비로 표현하고, 여기에 인터렉션을 입혀 더 강력한 인트로를 만들었어요. 토스다운 직관적인 그래픽이 뭔지 깊게 고민했던 프로젝트에요.

후킹한 문구나 키워드를 잘 잡는 것도 중요해요. 토스 팀 문화 소개 페이지는 ‘몰입’이라는 키워드로 내러티브를 구성했는데요. ‘당신도 깊게 몰입했던 무언가가 있나요?’라는 키 문구도 오랫동안 고민해서 뽑았고요. 팀원 분들의 직접적인 인용구를 추가해 진짜 팀원들의 목소리를 담으려고 했어요. 추가적으로 팀 문화를 설명하는 카드 위에 커서를 올리면 이미지가 흐려지면서 텍스트가 나오는데 이런 방식의 인터렉션을 통해 사용자들이 홈페이지를 적극적으로 탐색할 수 있도록 했어요.

마지막으로 웹이 동작하는 원리를 이해하는 게 중요해요. PC에선 hover interaction(마우스를 갖다대었을 때 활성화되는 그래픽 요소)이 가능하고 모바일에선 가능하지 않죠. PC와 모바일 모두에서 경험할 수 있는 행동은 클릭과 스크롤이에요. 특히 저희에게 가장 익숙한 인터렉션인 ‘스크롤’에 신경을 많이 쓰고 있어요. 사람들이 홈페이지 끝까지 읽게 만들 수 있는 장치니까요. 토스 브랜드 캠페인 홈페이지에서 스크롤을 내릴수록 하늘로 올라가는 듯한 느낌을 주었고, 토스 팀 문화 소개 페이지에서 스크롤을 내릴수록 화면이 어두워지고 안으로 들어가는 느낌을 줘서 실제로 몰입하는 듯한 경험을 주려고 노력했어요.

좋은 반응이 오는 순간

홈페이지마다 ‘좋은 반응이 왔다!’ 느끼는 순간은 조금씩 달라요. 예를 들어, 토스팀 문화를 가장 많이 아는 사람은 리더인 승건님이잖아요. 그런데 승건님이 토스 채용 사이트를 보더니 “나보다 더 토스팀 문화를 잘 아는 분들이 만든 것 같다”고 얘기했어요. 큰 칭찬이었죠. 

제가 제작했던 홈페이지 중 ‘금융이 불편한 순간‘이라는 프로젝트도 소개하고 싶어요. 토스팀 문화의 제1원칙은 Customer Centric(고객 중심)인 만큼, 토스의 모든 서비스는 고객으로부터 출발하는데요. 대표적인 예로 가장 처음 출시된 ‘간편송금’ 기능은 송금의 불편함에서, ‘병원비 돌려받기’, ‘사기 의심 계좌 조회’ 등은 보험 청구나 현금 거래에서 느끼는 사용자의 불편함을 개선하기 위해 개발된 서비스예요. 그동안 불편했던 금융 생활이 토스 덕분에 조금이라도 편해졌다면, 금융의 불편한 순간들을 먼저 찾아내기 위한 우리의 노력이 빛을 발한 거겠죠. 

‘금융이 불편한 순간’ 프로젝트는 사용자에게 더 적극적으로 다가가 그들의 불편함을 수집하고 싶다는 생각에서 시작됐어요. 디자인 측면에서는 사용자들과 ‘함께’ 바꾸어나가고 있다는 걸 가장 잘 보여주고 싶었어요. 고민 끝에 사용자들이 의견을 포스트잇에 남기면 실시간으로 웹에 반영되고, 그 의견들을 사람들이 함께 볼 수 있도록 디자인했죠. 그 결과 현재까지 7,000건이 넘는 금융의 불편한 순간이 모였어요. 평소에 불편하다고 생각했던 것들도 많았지만 부모, 군인, 어린이, 고연령층 등 체감하기 어려웠던 환경의 사용자들이 남겨주시는 불편함을 알 수 있었고요. 전혀 불편하다고 생각하지 못했던 부분들에 대해서도 의견 남겨주시는 걸 보면서 다시 한번 ‘우리가 해결해야 할 금융의 불편함’에 대해 생각하게 되더라고요. 금융이 불편한 순간 페이지는 아직도 열려 있고요. 전통적인 금융(공동인증서, 은행점검시간, OTP 등) 혹은 제도에 대한 불편함, 핀테크 서비스들의 개선점, 사소한 일상 금융 생활에서의 불편함 등을 적어주고 계세요. 

홈페이지도 제품이다 

금융이 불편한 순간(이하 금불순) 프로젝트 전까지는 이벤트 페이지를 주로 만들었어요. 짧은 기간 안에 보여주고 제 기능을 다하는 경우가 많았죠. 그런데 금불순 페이지를 만들면서 홈페이지도 제품이 될 수 있다는 생각을 하게 됐어요. 제품이 된다는 건 사람들이 지속적으로, 상호작용하며 사용한다는 건데요. 사람들이 저마다의 금융이 불편한 순간을 홈페이지에 올려주면 저희는 그 불편함을 고쳐주는 거예요. 적어도 토스앱에서는 금융의 불편함을 느끼지 않도록요. 서로 상호작용한다는 면에서, 그리고 지속적으로 사용 가능하다는 점에서 홈페이지도 제품이 될 수 있다고 생각했어요. 금불순 페이지를 만든 이후로 홈페이지 길드는 ‘지속가능한 제품이 무엇일까’, 그리고 ‘토스의 브랜드 경험을 더 강화할 수 있는 아이템은 뭘까’ 고민하고 있어요. 

지금은 toss.im, 그러니까 토스 메인 홈페이지를 리뉴얼하고 있는데요. 단순한 기능 나열을 넘어 스토리를 전달하고 싶어요. 개인의 일상에 토스가 줄 수 있는 가치를 일방향적으로 알려주는 게 아니라 직접 느낄 수 있도록 내러티브를 짜려고 해요. 그러다 보니 토스의 가치가 뭔지 더 고민하게 되고, 그걸 가볍고 재밌게 풀 수 있는 방법을 고민하고 있어요. 

토스팀은 필요로 하는 홈페이지가 꽤 많은데요. 팀원들이 기존 홈페이지의 요소들을 잘 활용해주신 덕분에 효율적이면서도 일관성 있게 홈페이지가 나오고 있어요. ‘NEXT 개발자 채용’ 페이지를 기반으로 ‘포트폴리오 없는 디자이너 채용’과 ‘토스 페이먼츠 공개채용’ 페이지가 제작된 것처럼요. 홈페이지 길드는 앞으로 효율성을 더 높이기 위한 더 나은 템플릿을 제작하고, TDS(Toss Design System)에도 기여하기 위해 노력할 예정입니다

다시 내러티브로

홈페이지 길드가 처음에는 ‘내러티브(narrative) 길드’라는 이름으로 시작됐어요. 토스의 이야기를 전하는 공간을 만들고 싶은 사람들의 길드였죠. 그러다 결과물을 내야 한다고 생각하면서 ‘홈페이지 길드’로 이름이 바뀌었지만 그때의 정신을 아직도 가지고 있다고 생각해요. 저에게 홈페이지는 토스의 이야기를 생산하고 전달하는 매체예요. 

Interview 송수아 Graphic 이은호 이홍유진