How Stripe Built Their New Website

Chapter 1 · 해설: 와우멘토

How Stripe Built Their New Website

A WOW Mentor strategy teardown.

오늘 와우멘토가 해부할 주제는 스트라이프가 새 웹사이트를 어떻게 다시 지었는가입니다. 이 이야기의 중심에는 스트라이프의 디자인 총괄 케이티 딜이 있습니다. 그녀는 팀과 함께 완전히 새로운 스트라이프 홈페이지를 세상에 내놓았고, 한 대담에서 그 무대 뒤편을 하나하나 풀어놓았습니다. 그녀는 이번 작업이 단순한 화면 교체가 아니라 회사가 스스로를 어떻게 설명할 것인가에 관한 결정이었다고 말합니다. 와우멘토가 이 대화에서 가장 먼저 주목하는 지점은, 겉으로는 웹사이트 리뉴얼처럼 보이는 이 프로젝트가 사실은 브랜드가 자기 정체성을 다시 쓰는 과정이었다는 사실입니다. 흥미로운 것은 그녀가 이 홈페이지를 두고 앞으로 6년쯤 입고 다닐 옷을 고르는 일에 비유했다는 점입니다. 사용자를 위한 제품은 내일 당장 나가야 하지만, 이 홈페이지는 많은 의미에서 스스로를 위한 작업이었기에 서두르지 않았고, 팀은 1년이 넘는 시간을 그 위에 부었습니다. 그녀의 설명을 따라가다 보면, 잘 만든 홈페이지 하나가 어떤 전략적 사고 위에서 태어나는지가 선명하게 드러납니다. 그녀는 먼저 옛 사이트로 시선을 돌립니다. 그 사이트는 2020년에 만들어졌고, 대담 시점 기준으로 약 6년을 버텨온 화면이었습니다. 그녀는 그 시절 팀이 시간의 시험을 잘 견디는 무언가를 만들었다고 공을 돌리면서, 바꿔야 했던 이유가 사이트가 낡아서가 아니었다고 분명히 선을 긋습니다. 진행자조차 이 사이트가 어제 나왔다고 해도 믿길 만큼 앞서 있었다고 인정할 정도였습니다. 오히려 진짜 문제는 사업이 그 사이트가 들려주던 이야기보다 훨씬 멀리 나아가 버렸다는 데 있었습니다. 처음에는 결제가 사업의 중심이었지만, 이제 스트라이프는 다국적 대기업의 구독 관리, AI 기업의 사용량 기반 과금, 세금, 매출 인식, 그리고 쇼피파이 같은 플랫폼의 자금 이동까지 떠받치는 회사가 되었습니다. 그녀는 포브스가 꼽은 AI 50대 기업 가운데 78퍼센트 이상이 스트라이프를 쓴다는 사실을 예로 듭니다. 이들은 스트라이프의 제품으로 빠르게 몸집을 키우고 사용량 기반 과금 같은 새로운 방식으로 수익을 만들고 있는데, 정작 옛 사이트에서 그런 이야기는 작은 타일 하나로만 존재했습니다. 와우멘토가 주목하는 지점은, 옛 사이트가 이 확장된 제품군을 겨우 한 조각만 보여주고 있었다는 그녀의 진단입니다. 시간이 흐르며 팀은 서로 다른 사용자를 겨냥한 섹션을 계속 덧붙였고, 그럴수록 사이트 전체를 관통하던 서사는 조금씩 흐려졌습니다. 사람들이 자신에게 맞는 구역에 닿을 때까지 스크롤하기를 바라는 방식이었던 셈입니다. 여기에 더해 그녀는 시각적 언어 자체에도 손볼 때가 되었다고 판단했습니다. 옛 디자인이 유행에 뒤처졌다기보다, 사업이 정교해진 만큼의 세련됨을 담아내지 못했다는 것입니다. 실제로 팀 안에서는 12도로 기울인 바를 어떻게 쓸지, 색과 오버레이는 어떻게 다룰지, 서체는 어떻게 적용할지에 대한 기준이 흐릿했고, 상단의 그라데이션 물결도 하나의 요소이긴 했지만 확장성이 좋지 않았습니다. 그래서 팀은 새 디자인 비전을 세우는 동시에 이야기를 다시 써야 했습니다. 그렇다면 무엇부터 다시 물어야 했을까요. 그녀는 팀이 첫 번째 원칙으로 되돌아갔다고 말합니다. 웹사이트란 대체 무엇을 위한 것인가. 그녀는 패트릭이 회의에서 던졌다는 질문을 그대로 옮깁니다. 웹사이트의 존재 이유는 무엇인가. 그녀가 내놓은 답은 웹사이트가 일종의 선언문이라는 것이었습니다. 명시적으로 그렇게 부르든 아니든, 사이트는 우리가 누구이며 무엇을 하고 왜 그것을 하는지를 드러낸다는 뜻입니다. 와우멘토가 여기서 강조하고 싶은 것은, 그 선언이 문장으로만 이루어지지 않는다는 그녀의 통찰입니다. 어떻게 사이트를 짓는지, 자신을 어떻게 내보이는지, 어떤 색을 고르고 어떤 서체를 쓰는지, 무엇에 정성을 쏟기로 하고 무엇을 그냥 지나치는지, 그 모든 선택이 간접적으로 회사의 태도를 말한다는 것입니다. 그래서 팀은 누구를 위해 무엇을 하고 무엇을 중요하게 여기는지를 극도로 선명하게 만드는 데 매달렸고, 그녀의 표현대로 뼈를 깎는 시간을 1년 넘게 쏟아부었습니다. 그녀는 이번만큼은 서두르지 않았다고 덧붙입니다. 사용자를 위해 무언가를 만들 때는 그들이 그것에 의존하기에 내일 당장이라도 나가야 한다는 압박이 있지만, 이 홈페이지는 스트라이프 자신을 위한 작업이었기에 올바른 디자인의 냄새를 끝까지 따라갈 여유가 있었습니다. 여러 주, 여러 달에 걸친 탐색 속에서 마음에 드는 안이 나와도 이건 아니라고 되돌린 적이 많았습니다. 앞으로 6년을 입고 다닐 옷을 아무렇게나 고를 수는 없었기 때문입니다. 와우멘토가 이 대목에서 배우고 싶은 것은, 마감의 압박이 없는 내부용 프로젝트일수록 오히려 기준을 더 높게 붙잡는 규율이 필요하다는 역설입니다. 새 홈페이지의 첫 화면에서 그대로 유지된 문장이 하나 있습니다. 매출을 키우는 금융 인프라라는 헤드라인입니다. 그녀는 이 핵심 약속은 그대로 두고, 대신 스트라이프가 자신에게도 맞는 제품임을 알아챌 더 다양한 단서들을 주위에 배치했다고 설명합니다. 진행자가 특히 눈여겨본 것은 화면 상단의 GDP 카운터였습니다. 스트라이프 위에서 돌아가는 거래가 전 세계 GDP에서 차지하는 비율을 실시간으로 보여주는 장치인데, 미국만이 아니라 지구 전체의 GDP를 기준으로 삼는 이런 지표를 내걸 수 있는 회사는 많지 않습니다. 그녀는 웹사이트를 만드는 사람이라면 누구나 신뢰를 어떻게 증명할지 고민한다고 말합니다. 우리가 만들어낸 영향, 우리를 믿어도 되는 이유, 이미 우리를 택한 사용자들이라는 사회적 증거가 그것입니다. 미세 창업가부터 거대 기업까지 모두를 돕는 회사에게는 스트라이프가 믿을 만하고 안정적이며 그들의 규모에서도 작동한다는 사실이 무엇보다 중요합니다. 와우멘토가 주목하는 지점은, 스트라이프가 이 신뢰를 남들이 흔히 쓰는 방식이 아니라 오직 자신만이 내놓을 수 있는 수치, 곧 세계 GDP의 한 조각으로 번역했다는 선택입니다. 화면 하단에는 십억 번째 거래를 뜻하는 단어가 놓여 있어, 수십억 건을 처리하는 회사라면 스트라이프가 맞다는 신호를 조용히 보냅니다. 그녀는 이것이 자신들이 감당해 온 거대한 영향과 책임을 정량적으로 드러내는 방법이라고 말합니다.

그다음 구역을 그녀는 벤토라고 부릅니다. 여기가 바로 제품군의 규모를 표현한다는 오래된 숙제를 풀어내는 자리입니다. 결제는 물론이고 온라인 결제와 대면 단말기, 사용량 기반 과금과 고정 구독을 아우르는 청구, 조직 안에서 AI가 하는 역할, 발급 상품과 스테이블코인, 그리고 플랫폼과 마켓플레이스를 위한 기능까지가 한자리에 담겼습니다. 그녀는 이 화면의 목표가 정보로 사용자를 압도하지 않는 것이라고 말합니다. 담긴 것은 많지만 글자는 아주 적고, 핵심은 말하기보다 보여주는 데 있습니다. 그래서 이미지가 전면에 나섭니다. 더 알고 싶은 사람에게는 큰 오버레이 모달이 열리는데, 이때도 사용자를 홈페이지 밖으로 데려가지 않습니다. 와우멘토가 주목하는 지점은 점진적 공개라는 이 설계 철학입니다. 벤토에 놓인 여섯 칸 뒤에는 한 화면에 다 담을 수 없는 수십 개의 제품이 겹겹이 쌓여 있지만, 팀은 그것을 한꺼번에 쏟아붓는 대신 사용자가 원할 때 한 겹씩 들춰볼 수 있게 했습니다. 그녀는 사용자를 페이지 밖으로 내보내면 아직 결정할 준비가 되지 않은 사람을 너무 일찍 떠나보내는 셈이라고 설명합니다. 그래서 이 구역은 가볍고 쉽게 탐색하고 몰입할 수 있는 둘러보기 경험으로 설계되었습니다. 진행자는 전용 페이지로 보내는 대신 사용자를 그 자리에 머물게 하고 원하는 것을 바로 보여주는 이 선택이 영리하다고 평가합니다. 벤토 박스 위에 팝업 모달을 얹어 더 많은 정보를 바로 그 페이지에서 펼쳐 보이는 이런 구성은 그가 다른 곳에서 본 적 없는 방식이라고 말합니다. 다음 구역으로 건너뛰는 버튼을 주거나 계속 스크롤하게 하면서도, 사용자가 아직 이곳이 자신에게 맞는지 판단하기 전에 여정을 끊지 않는 것입니다. 와우멘토가 여기서 배우고 싶은 것은, 담을 것이 많을수록 한꺼번에 보여주려는 유혹을 이기고 사용자에게 탐색의 주도권을 넘기는 절제입니다. 각 카드에 담긴 움직임에 대해 그녀는 그것이 무척 까다로운 균형이라고 털어놓습니다. 어떤 카드는 처음에 선이 너무 많았고, 다음에는 너무 적었으며, 공이 지나치게 빨리 움직이기도 했습니다. 그래서 미세하게 조율하고 또 조율해야 했습니다. 그녀가 이 움직임에 그토록 공을 들인 이유는 다시 선언문으로 이어집니다. 눈에 보이는 정성이 진짜라면, 사용자는 화면 뒤편에서 돈을 옮기고 기업의 정보를 지키는 방식에도 같은 정성이 깃들어 있으리라 믿게 된다는 것입니다. 와우멘토가 강조하고 싶은 것은, 스트라이프에게 모션이 장식이 아니라 신뢰의 증거라는 점입니다. 동시에 움직임은 사이트에 살아 있는 존재감을 부여합니다. 다만 그녀는 지나치면 오히려 방해가 되고 성가셔지며 아무도 그런 것과 어울리고 싶어 하지 않는다고 경고합니다. 그래서 움직임은 섬세해야 하고, 사용자가 무언가를 건드렸을 때 반응하며 여기를 누를 수 있다는 신호를 되돌려 주어야 합니다. 그러지 않았다면 사용자는 그 요소가 상호작용 가능하다는 사실조차 몰랐을 것입니다. 진행자는 이 모든 애니메이션이 움직임을 위한 움직임이 아니라 저마다의 숫자가 전하려는 메시지와 연결된 의도를 품고 있다는 점을 짚습니다. 그저 재미있어 보이지만 결코 무작위가 아니며, 그 뒤에는 많은 고민이 쌓여 있다는 것입니다. 그녀는 한동안 모든 사스 웹사이트가 똑같아 보이던 시절을 지나, 이제 웹사이트가 다시 재미있어질 수 있는 시대에 들어섰다고 말합니다. 그녀가 품은 희망은, AI가 우리를 훨씬 빠르게 좋은 수준까지 데려다주면 그렇게 아낀 시간으로 정말 흥미롭고 장난기 있고 아름다운 무언가를 한 단계 더 밀어붙일 수 있다는 것입니다. 그녀는 큰 지표들을 보여주는 구역을 특별히 아낍니다. 세계적 규모나 가동 시간 같은 숫자들이 부드럽게 움직이는 이 화면은 엄밀한 데이터 시각화가 아니라, 그녀의 표현을 빌리면 그저 재미있고 그저 아름다운 것입니다. 숫자만 덩그러니 놓을 수도 있었지만, 팀은 여기에 약간의 흥미를 더해 각 지표의 의도를 느슨하게 전하기로 했습니다. 여기서는 세계적 규모를, 저기서는 가동 시간을 이야기한다는 감각이 이어지고, 시간대에 따라 낮과 밤이 바뀌기까지 합니다. 와우멘토가 주목하는 지점은 바로 여기서 나온 결정입니다. 이 구역 때문에 사이트는 12월에 나가지 못하고 1월에야 공개되었습니다. 네 개의 애니메이션은 이미 다 있었지만, 하나에서 다음으로 넘어가는 전환이 매끄럽지 못했고 어딘가 어설펐습니다. 팀은 셋만 하거나 하나만 하거나 아예 움직이지 않게 하자는 선택지를 앞에 두고, 결국 제대로 될 때까지 기다리자고 함께 결정했습니다. 그녀는 마감을 무한정 미루는 습관은 경계해야 하지만, 이번만큼은 제대로 해낼 가치가 있었다고 말합니다. 연말 휴가 기간이었고 한 주를 더 미루는 것이 세상이 끝날 일은 아니었으며, 오히려 그 애정과 정성, 그리고 기술적 역량을 보여주는 즐거운 경험을 완성하는 편이 전체 구성 안에서 장기적으로 훨씬 좋은 일이었다는 것입니다. 사용자를 소개하는 구역에서는 스트라이프 브랜드와 고객 브랜드가 한 이미지 안에서 만납니다. 각 이미지는 맞춤 제작되었고, 스트라이프의 평행사변형 기호와 함께 그 브랜드의 개성을 담아냅니다. 그녀는 여기서 흔한 착각을 솔직하게 드러냅니다. AI를 쓰면 하루 만에 근사하게 끝나리라 기대했지만, 현실은 달랐습니다. AI로 무언가를 만드는 일에도 만드는 사람의 애정과 정성, 주의가 필요했습니다. 특히 그녀가 웃으며 꺼낸 일화는 거품이었습니다. 얼음과 거품이 든 한 이미지에서 팀은 거품 하나하나에 놀랄 만큼 많은 시간을 쏟았습니다. 이건 괜찮아 보인다, 진짜 같다, 그냥 내보내자 하는 순간마다 팀은 어디가 어색한지를 짚어내는 비평을 붙였습니다. 어반 아웃피터스 사례에서는 얼핏 그럴듯해 보였지만 자세히 보면 팔이 어색했고 손이 제대로 없었으며 그림자도 실제와 달랐습니다. 그녀는 각 픽셀 하나하나가 다른 모든 요소와 똑같은 수준의 주의를 받아야 한다고 말합니다. 와우멘토가 주목하는 지점은 그녀의 결론입니다. AI는 스무 개의 아이디어를 두 개를 보던 시간에 볼 수 있게 해 탐색을 극적으로 앞당기지만, 장인정신과 안목, 그리고 세부에 쏟는 주의를 대신해 주지는 못한다는 것입니다. 그녀에게 이미지는 빠르게 스크롤하는 사람을 잠시 멈춰 세우는, 노래 속 쉼표 같은 순간이기도 합니다. 어디서 사람들이 속도를 늦추고 눈길을 두게 할지를 정하는 리듬의 문제인 셈입니다. 특히 잘 알려지지 않은 브랜드와 함께 일할 때, 그 브랜드가 어떤 성격인지를 한 장의 이미지로 전하는 일은 그런 쉼표의 순간에 더욱 중요해집니다. 와우멘토가 이 대목에서 되새기고 싶은 것은, 도구가 아무리 빨라져도 결국 무엇을 왜 만드는지에 대한 판단은 사람에게 남는다는 사실입니다. AI는 스무 개의 시안을 눈앞에 펼쳐 주지만, 그중 무엇이 사랑과 정성의 수준에 도달했는지를 가려내는 눈은 여전히 만드는 사람의 몫입니다.

… The rest of this chapter continues in the full edition, available with a subscription.

Listen to this chapter