7월 12일 금요일. 원래 금요일이라면 많은 팀원들이 재택해서 사무실이 썰렁하기 마련인데, 웬일로 아침부터 사무실은 북적북적하고 평소에 듣지 못한 대화가 들려와요. 
“12시간만에 끝낼 수 있을까요? 24시간도 모자란데”
”근데 지금 DB가 없어서…”
금요일 아침부터 토스 팀원들은 왜 모였을까요?
바로 제1회 토스 해커톤, 토커톤(Tockerthon)에 참여하기 위해서입니다. 토스 개발자, 디자이너, PO(Product Owner) 등 다양한 직군의 팀원들이 토커톤에 참여하려고 금요일 아침에 사무실을 찾아왔어요. 해커톤은 ‘해킹’과 ‘마라톤’의 합성어인데요. 정해진 시간 안에 팀원들과 집중해서 MVP(minimum viable product)를 만드는 과정이에요. 
토커톤은 아래 4개 주제 중 하나를 선택해서 팀을 만들고, 오전 10시부터 밤 10시까지 12시간 동안 집중해서 제품을 만들기로 했어요. 
토스 CSR(Corporate Social Responsibility, 기업의 사회적 책임)에 기여할 수 있는 것
토스 서비스를 개선할 수 있는 것
직장인 삶의 질을 높일 수 있는 것
자유주제
  
토커톤 함께 참여해요
아무리 MVP를 만든다고 해도, 제품은 혼자 만들 수 없죠. 그래서 토커톤은 7월 12일 훨씬 전부터, 팀을 구성할 때부터 시작된 셈이죠. 이번 토커톤은 토스의 혁신과 one team 정신을 다시 한번 강조하기 위해 주최된 만큼 2개 이상 법인 구성원이 속한 팀에는 가산점을 부여했어요. 그리고 이 가산점이 수상 팀을 정하는 중요한 역할을 하게 됐어요.

또 토커톤에서 더 안전하고 혁신적인 서비스가 만들어질 수 있도록 보안 팀에서는 팀원들께 보안 및 컴플라이언스 측면 가이드라인을 공유했어요. 하루만 진행되는 해커톤에서도 보안, 개인정보 보호는 중요하니깐요. 실제로 토스에서 서비스가 출시될 때는 다양한 법무, 보안, 개인정보 검토 과정을 거쳐요. 오늘 토커톤에서 나온 아이디어도 실제로 출시되기 위해서는 이런 과정이 필요하고요.  
토커톤을 시작합니다!
팀별로 주제를 선정하고 참가 신청하면 준비는 끝. 그리고 대망의 토커톤 당일, 팀원 하나둘씩 모니터부터 칠판, 선풍기, 조명까지 들고 나타나기 시작했어요. 각 팀원의 자리에는 토스 수건과 토커톤 레고 피규어가 웰컴 키트로 준비되어 있었는데요. 수건은 보통 24시간 동안 진행되는 해커톤에서 씻고 다시 제품을 만드는 정신을 상징하고,  레고는 블록을 맞추듯이 팀원 한 명 한 명이 해커톤을 만들고 토스 역사를 함께 만들어간다는 의미가 담겨있답니다.
토커톤 시작과 함께 토스 리더 승건님이 팀원들의 사기를 충전해주는 한 말과 토스를 창업하기 전에 참여했던 첫 해커톤에서 든든한 공동 창업자를 만난 경험을 공유해주셨어요. 이런 도전 정신을 팀원분들께도 공유하고자 승건님에게 질문하고 조언을 받을 수 있는 ‘승건 찬스’도 마련했어요. 

이렇게 본격적으로 제1회 토스 해커톤, 토커톤을 시작했습니다. 21개의 팀, 72명의 팀원이 함께 해주셨는데요. 토스 커뮤니티의 다양한 팀원분들의 함께해주신 만큼 많은 재미있는 주제가 나왔어요. 개발자 없이 인공지능으로 개발하는 서비스, ChatGPT로 법무 검토하는 서비스, 토스 포인트로 소액기부할 수 있는 서비스, 똑똑하게 재무설계를 추천하는 서비스 등 다양한 아이디어를 가진 팀들이 토커톤에 도전했어요.
이번 '토커톤'은 이래서 좀 특별합니다! (feat. 팀 빌딩)
토커톤이 다른 해커톤과 다른 점은 바로 팀 빌딩인데요. 토커톤에 참여한 팀원분들은 다양한 피드백을 받아서 더 즐겁고 생산적인 하루를 보낼 수 있었어요. 팀 빌딩을 잘 보여준 팀의 이야기를 공유드려요.

8번의 창업 후 9번째 도전에 토스를 만들어낸, 토스팀 리더 승건님의 피드백
점심 먹고 나른한 시간, 오후 2시에 ‘승건 찬스’가 시작됐어요. 서비스의 방향성, 시장에서의 가치를 조금 더 명확하게 살펴볼 수 있도록 승건님은 기획 측면에서 신청 팀들에게 진심 어린 조언을 해주셨는데요. 기억에 남는 ‘승건 찬스’ 하나를 공유드려요.
패기 넘치게 팀 이름도 ‘토스’라고 지은 토스팀. 토스의 만보기만큼 사용자를 끌어모을 수 있는 제품을 만들겠다는 포부와 함께 야심 차게 준비한 서비스는 ‘하루에 물 2L 마시기’였는데요. 멋진 애니메이션까지 마무리한 순간, ‘승건 찬스’에서 날벼락을 맞게 됩니다. 승건님이 “풀어야 할 중요한 문제가 아닐 수 있다”라는 조언을 해주시기 때문인데요. 마감까지 남은 시간은 단 5시간… 

팀이 더 유능하게 작동할 수 있도록 돕는 애자일 코치, 희열님의 피드백
토스팀의 해결책은 ‘희열 찬스’에서 옵니다. 희열님은 오늘 이루고 싶은 게 무엇인지 다시 생각할 기회를 마련해주셨고, 토스팀은 목표를 ‘즐거움’과 ‘재미’로 다잡게 돼요. 다시 동기부여를 받고 토스팀은 남은 시간 동안 엄청난 회고를 하면서 팀원들과 라포를 형성하는데 대성공하고 오늘 세운 목표도 얻어 갑니다. 
발표시간에 토스팀은 이런 과정을 모두 공유해주셨는데요. 유쾌한 발표에 현장은 웃음바다가 되었고, 심사위원은 제품 기획, 실행, 실패를 경험하려면 몇 달 또는 몇 년이 걸리는데 이 모든 성장 과정을 하루 만에 이룬 걸 축하하기도 했습니다. 때로는 참여와 과정이 결과물보다 중요하다는 걸 몸소 보여준 팀이었습니다.

결과만을 위해 달리는 것이 아닌, 과정 자체를 즐기는 우리의 자세
또 다른 재미로 모두가 배꼽 잡으면서 들은 발표는 바로 매치사일로의 <내게 맞는 사람 찾기>였어요. 귀여운 캐릭터와 간단한 조건 선택 과정이 인상적인 데이팅 서비스였는데요, 획기적인 만큼 심사위원들의 반응도 뜨거웠어요. 만우절 이벤트로 한 번 열어보면 어떨까라는 의견도 있을 만큼 많은 팀원들에게 재미를 주었던 것 같아요.
팀을 이끌었던 Frontend Developer 성준님의 한마디
사실 전날 트라이브 내에서 워크샵을 진행해, 팀원들이 많이 피곤한 상황이었거든요. 그런데도 모두가 각자의 역할을 너무 잘 담당해서, 팀워크로 느끼는 쾌감이 정말 컸어요. 고려사항이 많은 기획과 요구사항을 UI로 깔끔하게 풀어내는 디자이너, 복잡한 로직을 설계하고 구현하는 테크 리드, 필요한 부분들을 캐치해서 챙기는 풀스택 엔지니어 팀원들 덕분에 ‘실패할 수가 없는 드림팀’ 을 경험할 수 있었어요. 

'토커톤'을 통해 무엇을 얻었냐고요?
늦은 저녁에 대망의 발표 시간이 시작됐는데, 모두가 자리를 지키고 귀를 기울어 발표에 집중했어요. 서로의 발표, 아이디어를 기대하고 응원하는 축제의 장이 열렸는데요. 토커톤에서 수상한 팀의 발표와 협업 과정을 공유드려요.
3위. 리모태 없인 일모태 <사장님들은 이렇게 리뷰관리에 빠지게 됩니다>

바쁜 사장님은 매일 홀 관리, 직원 관리, 매출 관리, 배달 관리를 해야 되는데요. 여기에 리뷰 관리까지 해야 됩니다. 컴퓨터 들여다볼 시간도 없는 사장님, 하루 종일 보고 있는 곳은? 바로 POS입니다. 
그래서 리모태 없인 일모태 팀은 POS 시스템에 리뷰 관리 서비스를 넣었습니다. 배달 앱, 쇼핑앱 등 다양한 플랫폼을 연결하고, 각 플랫폼에 AI로 답글을 만들 수 있어요. 실제로 발표 시간에 리뷰와 답글을 남기는 실시간 시연을 보여주셨는데요, 매끄러운 유저 경험에 모두가 놀랐습니다. 사장님의 불편함을 명쾌히 해결해준 리모태 없인 일모태 팀은 3위를 차지했어요. 
팀을 이끌었던 Product Manager 민주님의 한마디
같은 목표를 향한 열정적인 팀워크가 큰 동기부여가 되었어요. 부족한 리소스였는데, 팀원들 덕에 서로 보완하면서 즐거운 분위기 속에서 성과를 만들 수 있었던 것 같아요.
약 10시간이라는 제한된 시간 안에 프로덕션 수준의 결과물을 만들어내는 경험이 짜릿했어요. 
창의적인 아이디어를 내고 팀원들과 같이 고민할 수 있는 시간을 따로 만들기가 힘든데, 해커톤 덕분에 색다른 성취감과 재미를 느낄 수 있었어요!
2위. 토스랑산악회 <진짜 결혼해요? 모바일 청첩장>

실제 새신랑이 되신 팀원의 험악하고 어려운 결혼 준비 과정을 바탕으로 토스랑산악회 팀에서는 토스에서 무료로 모바일 청첩장을 만들고, 토스페이로 축의금도 받을 수 있는 서비스를 기획했어요. ATM 가서 현금 뽑는 시대, 엑셀로 축의금 내역을 관리하는 시대를 대체할 수 있는 똑똑하고 편리한 축의금 관리 방법을 제시해주신 것이죠. 토스랑산악회 팀은 발표 도중에 실제로 축의금을 보낼 수 있는 모바일 청첩장도 공유해주셨어요. 
매끄럽게 작동하는 모바일 청첩장에 모두가 감탄했고 몇 시간 만에 서비스를 발전시키고 실현해낸 팀원들에게 찬사를 보냈습니다. 심사위원은 시연을 위해 만든 모바일 청첩장으로 실제로 몇 백원을 보내기도 했고요. 사업성이 좋아서 축의금뿐만 아니라 다양하게 활용할 수 있을 거 같다는 호평도 받았어요. 정말 아쉬운 점수 격차로 2위를 차지했습니다.
팀을 이끌었던 Head of Frontend 서진님의 한마디
저는 과거에 같이 일하면서 손발이 척척 맞았던 팀원들과 함께했는데요,
이번 해커톤에서 다시 모여 뚝딱뚝딱 제품을 만들면서, 여전히 마음이 잘 맞아 너무 즐거웠어요. 뛰어난 역량을 가진 팀원들과 평소에 만들고 싶었던 제품을 개발하니, 훨씬 신나게 개발할 수 있었던 것 같아요.
1위. 토스철학관 <프론트는 당신의 운명을 알고 있다>

‘결제’만 하는 단말기는 토스에서 너무 평범하죠? 고객의 운명과 천명 정도는 알려줘야죠! 대망의 1위를 차지한 토스철학관 팀은 토스플레이스 단말기에서 생년월일 입력하면 사주를 볼 수 있는 서비스를 기획했답니다. 고객에게 개인화된 경험과 재미있는 이벤트를 제공하는 일석이조 서비스죠. 
토스철학관 팀은 서비스가 충분히 상품성이 없다는 걱정을 했다는데, 실제로는 심사위원의 호평이 쏟아졌습니다. 승건님은 토스철학관의 상품성은 큰 ‘재미’라고 말씀해주셨어요. 
팀을 이끌었던 Node.js Developer 보미님의 한마디
실제 업무 시간에는 회의나 여러 이슈로 하나의 작업에 집중하기가 어려웠는데, 12시간 동안 여러 개발자가 모여 하나의 제품을 집중해서 개발하니까 생각보다 제품이 금방 나오더라고요. 모두 다 같이 몰입해서 짧은 시간에 깊은 유대감을 쌓은 것 같아서 너무 행복한 경험이었어요!
팀에서 함께했던 Android Developer 세희님의 한마디
저는 ‘토스’ 소속이었는데 이번에 처음 ‘토스플레이스’ 팀원분들과 협업해 보았거든요. 이런 계기로 협업을 확장할 수 있어서 좋았고, 토스플레이스 기기도 만져보는 새로운 경험을 해서 재미있었어요.
팀에서 함께했던 Server Developer 동현님의 한마디
1-2시간 단위의 작업 목표를 세우고, 상태를 체크하면서 구현해나가는 과정이 제한된 시간 내에 속도감 있게 목표를 달성하는데 적절한 전략이었던 것 같아요. 오랜만에 재밌는 서비스를 팀원들과 만들 수 있어서 좋았어요!
마무리하며
이렇게 절찬리에 마무리된 첫 번째 토커톤이었습니다. 참여한 모든 팀원이 각자 원했던 목표를 이루고 토스에서 잊지 못할 또 하나의 추억을 적립했어요. 마지막으로 참여한 팀원의 소감과 기억에 남는 에피소드를 들으면서 마무리해볼게요.
Q. 오늘 토커톤 참여하신 소감 한 마디 해주세요.
평소에 협업하지 못한 동료들과 함께 서비스를 만드는 기회가 있어서 너무 재밌었습니다. 일할 때는 우선순위에 따라서 업무를 하는데 오늘은 하고 싶은 게 하고 있어서 재밌지 않았나 싶습니다. 주제도 팀에서 떠오른 아이디어 중에서 가장 재미있는 걸 기준으로 선택했어요. - 간바레 오또상
1회 토커톤에 참여하게 돼서 감회가 새로워요. 내가 1회라니! 그리고 정말 해커톤처럼 아무것도 준비하지 않고 왔는데 아이디어가 잘 나와서 신기했어요. 아무것도 없는 상태에서 바닥부터 다 만들어야 되니까 신선한 경험이었고, 10시간 동안 오로지 제품을 만드는 것에만 집중할 수 있어서 재밌었어요. - 토네이션
맨날 정해진 일만 하다가 완전히 다른 걸 하니까 리프레시됐어요. 저는 이 제품 잘 되면 진짜 창업하고 싶어요! - 대한수면연구학회
Q. 가장 기억에 남는 순간이 있으신가요?
저희 제품이 유기견 또는 유기묘를 위해 기부금을 내면 고양이나 강아지랑 메시지를 주고받을 수 있는 컨셉이었는데요. 시현을 위해서 저희 개발자가 고양이, 강아지 페르소나로 채팅을 만들어내야 돼서 토커톤 마지막 3시간은 고양이로 살았어요. 그 모습이 너무 웃겼어요.  - 제로코딩단
저희 팀은 재무 설계를 도와주는 제품을 만들었는데요. 전문가가 아니어도 어떻게 포트폴리오를 굴려나갈지 알려주고 실시간으로 발생하는 금융 이벤트에 의해서 포트폴리오를 재구성하라는 넛지도 주는 아이디어였어요. ‘승건 찬스’를 썼는데 저희에게 제품에 와우 포인트가 없다는 혹평을 주셔서 조금 멘붕이 왔어요. 다들 좀 무너졌는데 새로운 걸 하기엔 시간이 없어서 그냥 밀고 나갔어요. 다행히 발표에서는 충분히 제품으로써 가치가 있다는 평가를 받았습니다! - 금융웃음클럽
희열님께 1등을 어떻게 하면 되는지 여쭤봤어요. 희열님은 평가 항목을 모두 잘 하려고 하지 말고, 잘할 수 있는 항목을 선택해서 잘 해보라는 조언을 해주셨어요. 근데 저희 팀은 모든 항목이 욕심났어요. 그래도 조금 기준이 모호하다고 생각한 항목을 조금 포기했어요. - 토스철학관



7월 12일 금요일. 원래 금요일이라면 많은 팀원들이 재택해서 사무실이 썰렁하기 마련인데, 웬일로 아침부터 사무실은 북적북적하고 평소에 듣지 못한 대화가 들려와요. 
“12시간만에 끝낼 수 있을까요? 24시간도 모자란데”
”근데 지금 DB가 없어서…”
금요일 아침부터 토스 팀원들은 왜 모였을까요?
바로 제1회 토스 해커톤

토스 개발자, 디자이너, PO(Product Owner) 등 다양한 직군의 팀원들이 토커톤에 참여하려고 금요일 아침부터 사무실을 찾아왔는데요. 토커톤에서 도대체 무슨 일이 일어났을까요?

제 1회 토스 해커톤, 토커톤(Tockerthon)

300명이 넘는 개발자와 디자이너를 위한 디자인 시스템을 4명의 디자이너가 운영하고 있어요. 이 과정에서 컴포넌트의 유려함뿐만 아니라, 가이드의 효율적인 제작도 중요함을 깨달았어요. 이번 아티클에서는 TDS 컴포넌트 가이드를 제작할 때 어떤 부분들을 고려해서 만들어가고 있는지 소개해드릴게요.


문제 
컴포넌트를 개선하려고 할 때, 기존 가이드로는 동료 플랫폼 디자이너 및 개발자분들과 소통하기 어려웠어요. 컴포넌트 가이드 작성에 대한 규칙이 없으니 디자이너마다 작성된 방식이 제각기였고, 이 때문에 기존에 작성된 가이드를 읽는 데에도 컴포넌트를 온전히 파악하기 어려웠기 때문이에요.
기존 컴포넌트의 가이드에서 어떤 부분들이 문제였길래, 컴포넌트를 만드는데 메이커들이 어려움을 겪었을까요? 그리고 플랫폼 디자이너들은 이 문제들을 어떻게 해결했을까요?


해결책
가이드 읽는 방향성 정하기
기존에는 한눈에 스펙을 확인할 수 있도록 정사각형에 가까운 형태로 가이드를 배치했어요. 


각 옵션이 한 눈에 보이고, 깔끔하게 정리된 가이드를 보며, 이 완벽한 가이드만 있으면 더 이상의 커뮤니케이션은 필요 없을 줄 알았어요. 하지만 개발자분들이 이미 가이드에 정의된 스펙을 보지 못한 채 따로 요청해주시기도 하고, 컴포넌트를 구현하면서 누락된 옵션들도 종종 나타났죠.
이유를 개발자와 이야기해보니 가이드를 어떤 순서로 읽어야 하는지 파악하기 어려웠다는 걸 알게 됐어요. 그래서 어떤 구조로 컴포넌트를 만들어야 하는지 이해하기 힘들었다고 하더라고요.


그래서 정보를 단순히 그룹핑만 하는 것이 아니라, 읽는 방식부터 누구나 같은 방향으로 읽을 수 있게끔 그룹핑된 가이드 내용을 위에서 아래로 흐르게끔 배치했어요. 

이로써, 가이드를 어떤 순서로 읽어야 하는지 알기 쉬워졌고, 그 결과 컴포넌트의 스펙을 단계별로 쉽게 소화할 수 있게 됐어요.


큰 구조부터 자세한 요소로
가이드의 방향성을 정한 이후로 순서에 대해서 고민하고 있을 때, 때마침 컴포넌트 스펙맞추기 해커톤이 예정되어있었어요. 안드로이드 iOS, 웹 세 플랫폼이 모이는 시간에 저도 아예 옆에 앉아서 가이드는 어떻게 기록되어야 좋은 가이드가 될 수 있을지, 신속하게 피드백을 구하며 빠르게 의사결정을 해나갔어요. 
그 과정에서 발견한 것은 개발도 그림을 그리듯이 큰 구조부터 자세한 요소로 진행된다는 점이었어요. 전체적인 스케치를 한 다음 묘사를 하는 것처럼요.

그래서, 토스트 컴포넌트 가이드에서는 가장 먼저 컴포넌트의 상위 옵션인 상단과 하단 타입을 보여주어 개발자가 구조를 이해할 수 있도록 하고, 그다음으로 각 타입에 포함된 요소들을 정리했어요. 마지막으로는 컴포넌트의 다양한 상태 변화(예를 들어 다크모드나 텍스트가 두 줄이 됐을 때)의 상세 스펙을 추가했어요. 
이처럼 큰 옵션 정의부터 내부 변경될 수 있는 자세한 스펙들 순으로 점층적으로 가이드를 구성해 원하는 스펙을 찾아 방황할 필요 없이 효율적으로 가이드를 읽을 수 있게 했어요.


최악의 케이스 그리기
컴포넌트의 정보 위계가 생긴 것은 좋았지만, 그 정보 위계의 지도를 한 눈에 볼 수 없다는 점이 아쉬웠어요. 컴포넌트 안에도 다양한 요소들이 있어서, 어떤 요소는 쓰고 어떤 요소는 안 썼을 때 등등 굉장히 다양한 경우의 수가 있었거든요. 
예를 들어 토스트에서 주로 쓰는 형태는 왼쪽이지만, 오른쪽처럼 버튼을 넣는 케이스도 있었어요.

이런 케이스를 하나하나 살펴볼 수 없으니, 오른쪽처럼 모든 요소를 최대한으로 썼을 때의 모습을 가이드의 제일 위에 첨부해두었어요. 모든 옵션을 다 사용한 사례를 먼저 보고 나면, 어떤 옵션이 있는지 전체적으로 지도를 그린 다음 하나씩 살펴볼 수 있으니까요.


접근성 영역 나누기
기존 가이드에선 접근성 스펙을 컴포넌트 레이아웃에 대한 설명할 때 포함하기도 하고, 별도의 페이지에 작성하기도 했어요. 그렇다 보니 ‘음! 새로운 A컴포넌트를 만들 땐 B컴포넌트의 접근성 가이드를 참고해야지! ‘라고 떠올리기 쉽지 않았어요. 그래서 접근성을 챙기기 위한 여러 가지 장치들을 새로운 컴포넌트를 설계할 때 참고하기 어려웠죠.
그래서 접근성에 대한 기존의 의사결정들을 비슷한 컴포넌트를 새롭게 설계할 때도 빠르게 참고할 수 있도록 선형으로 설계된 가이드에 가장 하단에 위치시키기로 약속했어요.

이를 통해서 디자이너가 가이드를 설계할 때 이 옵션을 의식적으로 챙길 수 있었고, 이러한 구조 변경으로 더 큰 텍스트 뿐만 아니라 보이스오버 사용성, 동작 줄이기와 같은 조건들을 조금씩 쌓아나갈 수 있었어요.


수십개의 컴포넌트 가이드에 적용하기
토스트, CTA, 리스트 등 여러 요소를 조합해 사용하는 대다수 컴포넌트는 앞서 정한 구성을 그대로 적용할 수 있게 했어요. 이를 위해, 큰 구조부터 시작해 타입, 영역, 상세 스펙, 더 큰 텍스트, 다크모드까지 포함하는 체크리스트를 정의했죠. 이 체크리스트를 바탕으로 가이드를 작성하도록 했어요. 타입이 나뉘어있지 않거나, 상세 스펙을 따로 정의할 필요가 없는 경우에는 생략했어요.


에셋, 버튼, 체크박스와 같은 아토믹 컴포넌트들은 구성요소가 단순해서 일반적인 컴포넌트 가이드와 비슷한 구조로 짜다 보면, 불필요한 정보를 넣게 되더라고요. 그래서 컴포넌트 자체의 특성에 맞게 뒤따라올 옵션들이 예측할 수 있게끔만 가이드를 구성했어요.


그리고 화면을 덮으며 나타나는 다이얼로그나, 바텀시트와 같은 컴포넌트들은 화면 안에서 어디에 위치해야 하는지에 대해 정의할 수 있도록 position이라는 항목을 체크리스트에 추가했어요.


또한 각 스펙을 가이드에 작성할 때는, 정확한 스타일 값과 결과물을 한 번에 볼 수 있도록 왼쪽에는 예시 이미지를 오른쪽에는 정확한 값을 꼭 작성하도록 했고, 이 작업을 최대한 효율화하기 위해 디자인 스펙을 표기하는 몇 가지 형태를 복붙해서 사용할 수 있도록 만들어두기도 했어요



결과 
이러한 해결책들을 통해서 기존 가이드의 많은 문제의식을 해결할 수 있었어요.
가이드 작성에 대한 규칙이 없을때는 하나의 컴포넌트 가이드를 작성하는 데에만 일주일이 걸렸는데, 가이드 작성하는 규칙이 생긴 이후로는 컴포넌트 3개를 하루 만에 가이드를 작업할 수도 있었어요. 또한 팀에 새로 합류한 플랫폼 디자이너들이 기존 시스템을 빠르게 이해하고 바로 기여할 수 있었어요. 
하지만 시스템이 성장하면서 가이드가 길어진 것들은 지금의 방식으로는 원하는 스펙을 찾아가기 힘들어져, 구조에 맞게 가이드를 끊거나 목차를 만드는 등의 새로운 방식들을 고민하고 있어요.
앞으로 시스템의 규모가 성장함에 따라 기존 가이드를 개선했던 것처럼 팀원들과 함께 논의해가며 가이드를 개선해 나가려고 해요.




300명이 넘는 개발자와 디자이너를 위한 디자인 시스템을 4명의 디자이너가 운영하고 있어요. 이 과정에서 컴포넌트의 유려함뿐만 아니라, 가이드의 효율적인 제작도 중요함을 깨달았어요. 이번 아티클에서는 TDS 컴포넌트 가이드를 제작할 때 어떤 부분들을 고려해서 만들어가고 있는지 소개해드릴게요.


문제 
컴포넌트를 개선하려

디자인 시스템을 운영하면서, 컴포넌트의 유려함뿐만 아니라 가이드의 효율적인 제작도 중요하다는 것을 깨달았어요. 이번 아티클에서는 TDS 컴포넌트 가이드를 제작 할 때 어떤 부분들을 고려해서 만들어가고 있는지 소개해드릴게요.

제품이 커지면 디자인 시스템 가이드는 어떻게 개선돼야 할까?

Simplicity는 더 나은 사용자 경험을 만들기 위해, 토스가 치열하게 고민해온 과정을 나누는 디자인 컨퍼런스예요. 우리의 실험과 시도들이 사용자 경험을 고민하는 다른 디자이너들에게도 영감이 되기를 바라며 시작했어요. 
2021년부터 토스 디자인 챕터가 정기적으로 개최하고 있죠. 내용뿐 아니라 메시지를 어떻게 전달할지도 늘 중요하게 여겼기 때문에, 2023년부터는 유튜브 영상이 아닌 웹 기반 인터랙티브 사이트로 전환해 운영하고 있어요.

지속 가능한 컨퍼런스 만들기
디자인 챕터에게 심플리시티는 거의 종합 예술에 가까운 프로젝트예요. 운영, 디자인, 개발, 대본, 촬영, 녹음, 홍보까지—모든 과정이 고도화된 협업으로 이루어지죠.
한 번으로 끝나는 행사가 아니라, 매년 반복되는 시즌제 컨퍼런스이기 때문에 ‘지속 가능성’이 정말 중요한 주제였어요. 매년 퀄리티와 지속 가능성 사이의 균형을 고민해야 했죠. 그 과정에서 많은 부분을 효율적으로 만들어왔지만, 촬영만큼은 늘 어려운 과제였어요.
촬영을 하려면 대본이 완성되어야 하는데, 그 과정만 무려 두 달이 넘게 걸려요. 내부 피드백, 법무·보안·개인정보 검토를 거치며 수차례 수정되고, 최종적으로는 발표자 톤에 맞춰 구어체로 다시 다듬어야 하거든요. 대본이 늦어지면 촬영도 늦어지고, 전체 일정이 밀리기도 하죠.
그런데 이게 끝이 아니에요. 혹여라도 대본상의 문제를 나중에 발견하게 되면, 다시 촬영을 해야 해야 하거든요. 촬영은 디자인 챕터의 전문 영역이 아니라 항상 외부 전문가나 다른 팀의 도움을 받아야 하는 구조적 제약도 있었죠. 



더 큰 문제는, 발표 경험이 익숙하지 않은 연사들에게도 부담이 컸다는 거예요. 실제로 워크숍에서 연사자들이 가장 꺼리는 일로 “발표하기, 촬영하기, 녹음하기”를 꼽았을 정도였죠. 컨퍼런스인데, 발표가 가장 하기 싫다니—아이러니하죠?
그래서 자연스럽게 이런 질문이 생겼어요
지속가능한 컨퍼런스를 만들기 위해서는, 
촬영 프로세스부터 바꿔야 하지 않을까?



AI 아바타가 발표한다면
그래서 이번 시즌에는 새로운 방식을 시도했어요. AI 아바타가 발표를 대신해보는 실험이었죠. 혹시 눈치채신 분 계실까요?
간단할 거라고 생각했지만, 막상 해보니 쉽지만은 않았어요. AI 서비스들의 한국어 지원이 매끄럽지 않아서, 자연스러운 음성을 만들기가 어려웠거든요. 그래서 여러 번 테스트를 거쳐, 최적의 방법을 찾아냈어요.

연사자의 음성을 녹음한 뒤, ElevenLabs에서 대본 기반으로 AI 발표 음성을 생성
연사자가 말하는 영상을 촬영해 Heygen에서 AI 아바타를 생성
1번에서 만든 음성을 Heygen에 입력해, AI 아바타가 발표하는 최종 영상으로 출력



기존의 방식이라면 연사자는 발표 내용을 자연스럽게 말하기 위해 여러 번 연습하고, 촬영 중간에 한 번이라도 말을 더듬거나 버벅이면 처음부터 다시 찍어야 했어요. 하지만 이번에는 딱 한 번만 찍어도 AI 아바타를 만드는 데 충분했어요.
촬영 자체도 훨씬 간편해졌어요. AI 아바타 생성을 위한 학습용 데이터로만 쓰이다 보니, 연사자가 회의실에 들어와서 나갈 때까지 30분이면 촬영이 끝났거든요.
덕분에 연사자의 부담은 확 줄었고, 일정도 유연하게 조율할 수 있었어요. 심지어 오픈을 일주일 앞두고도 대본 수정이 가능한 정도였죠.
촬영은 어떻게 했냐고요? 아마 들으면 깜짝 놀라실 거예요. 스튜디오도, 전문 장비도 없었어요. 회의실에서, 아이폰 전면 카메라로, 스노우 앱을 켜고 녹화했거든요. 말 그대로 셀카 찍듯 촬영했죠.
처음에는 전문 장비를 갖춰서 촬영해보기도 했지만, 오히려 익숙하지 않아 결과물이 더 어색하더라고요. 그래서 여러 번 시도해 본 끝에, 지금의 제약 안에서도 원하는 결과를 만들 수 있는 가장 효율적인 방식을 찾아냈어요. 



물론 지금 저희가 만든 AI 아바타가 실제 사람에 비해 어색한 부분도 있지만, 기술이 워낙 빠르게 발전하고 있어서 앞으로 훨씬 더 자연스럽게 될 것 같아요. 그리고 이 방식보다 더 효율적인 방법이 많이 생겨나겠죠.



시청 경험까지 새롭게
이번 시즌에서는 AI 아바타 외에도 시청 경험 자체를 더 나아지게 만들기 위한 변화들이 있었어요.
1. 모바일 최적화
2023년에는 데스크탑으로 시청하는 사용자가 많았지만, 2024년에는 모바일 사용자 비율이 크게 늘었어요.
데스크탑 환경이 아닌 숏폼 형식으로 콘텐츠를 소비하는 게 적합한 것 같았죠. 그래서 이번엔 처음부터 모바일 중심으로 화면과 인터페이스를 설계했어요. “숏츠 보는 것 같았다”고 느꼈다면, 저희가 의도한 바를 정확히 느끼신 거예요. 실제로 데스크탑 디자인은 모바일 디자인을 완성한 이후에 제작되었어요.




2. 콘텐츠 길이 최적화
지난 시즌 평균 시청 시간이 3분 정도였어요. 그래서 이번에는 세션이 너무 길지 않도록 모두 5분 이하로 구성했어요. 짧지만 명확한 메시지를 전하기 위해 이미지 자료나 구성도 더욱 정교하게 다듬었죠. 그래서일까요? 지난 시즌에는 평균 완독률이 12% 정도였는데, 이번에는 51%를 넘었어요.


3. 세션별 특색 강화
커버 이미지, 배경 음악, 메인 컬러까지—각 세션마다 모두 다르게 설정했어요. 음악만 듣거나 커버만 봐도 어떤 세션인지 연상할 수 있도록, 개성과 몰입감을 중요하게 생각했어요.


앞으로의 심플리시티
이번 시즌을 계기로, Simplicity는 단순 온라인 컨퍼런스가 아니라 콘텐츠 플랫폼으로써 더 효율적이고 지속 가능한 형태로 진화했어요.  기존처럼 시즌마다 새로운 사이트를 만드는 방식에서 벗어나, 앞으로는 https://toss.im/simplicity/ 에 시즌별로 콘텐츠가 업데이트될 예정이에요. 
그리고 이 변화는 이번 시즌 4의 주인공이기도 UX플랫폼 조직의 노력으로 만들어졌어요. 
그래픽 디자이너, 인터랙션 디자이너, 플랫폼 디자이너, UX 엔지니어, UX라이터 등 UX 플랫폼 조직의 많은 팀의 협업이 있었기에 가능한 일이었죠. 곧 각 팀의 시선에서 바라본 Simplicity 제작 비하인드도 소개해드릴게요.
이번 저희의 실험을, 부디 재미있게 지켜봐주세요!

심플리시티 시즌 4 보러가기 >



Simplicity는 더 나은 사용자 경험을 만들기 위해, 토스가 치열하게 고민해온 과정을 나누는 디자인 컨퍼런스예요. 우리의 실험과 시도들이 사용자 경험을 고민하는 다른 디자이너들에게도 영감이 되기를 바라며 시작했어요. 
2021년부터 토스 디자인 챕터가 정기적으로 개최하고 있죠. 내용뿐 아니라 메시지를 어떻게 전달할지

알고 보면 더 재미있어요. 심플리시티 시즌 4의 흥미로운 제작기를 소개합니다.

Simplicity 4 : AI 아바타가 발표하는 온라인 컨퍼런스 제작기

토스 디자인 컨퍼런스 네 번째 이야기, Simplicity 4


일하면서 한 번쯤, 이상을 꿈꿔본 적이 있나요? 
빠른 문제해결이 중요한 토스에서도, 그 너머의 이상을 그리는 사람들이 있어요. 디자이너, 리서처, 라이터, 엔지니어링 등 다양한 분야에서 정교하고 아름다운 UX를 실현하기 위해 새로운 시도를 이어가고 있죠.하지만 현실은 쉽지만은 않아요. 
이번 시즌에서는, 일하는 누구나 꿈꿔본 이상을 현실로 만들기 위해 고군분투한 토스팀의 여정을 들려드려요. 우리는 어떤 고민을 했고, 어떻게 답을 찾았을까요? 
그래픽, 인터랙션, 엔지니어링, UX 라이팅, 리서치, 플랫폼 디자인까지, 총 14개의 이야기가 준비되어 있어요. 잠깐 들여다보실래요?




토스다움을 완성하는 순간들

이토록 아름다운 새로고침 
Graphic Design
화면을 아래로 당기면 나오는 그래픽, Pull To Refresh. 그 짧은 찰나에 아름다움을 담기 위한 고민을 들려드려요.

인터랙션으로 첫인상 만들기 
Interaction Design 
토스를 처음 써보는 외국인에게 토스를 어떻게 소개해야 할까? 모두가 감탄한 온보딩, 그 중심에는 인터랙션이 있었어요.

토스 그래픽 더 토스답게 만들기 
Graphic Design
IT 업계에 3D 그래픽이 넘쳐나는 시대. 토스는 어떻게 '토스다움'을 만들어냈을까요? 그 여정을 보여드려요.

디자인 조직의 개발자들 
Android, FE, iOS 
인터랙션 개발의 매력은 무엇일까요? 아름다움과 감각을 설계하는 세 명의 인터랙션 개발자가 답해드릴게요.




진짜 ‘모두’를 위한 유니버셜 UX

진짜 모두를 위한 금융 
Universal Design
2,800만 명이 쓰는 앱에서 7,000명의 스크린 리더 사용자 경험까지 챙기기 위해, 토스는 어떤 노력을 하고 있을까요?

우리가 몰랐던 시각 장애인의 UX 
UX Research
시각 장애인이 토스를 더 쉽게 쓰려면, 무엇이 달라져야 할까요? 리서치를 통해 얻은 세 가지 인사이트를 공유할게요.




토스가 사용자 경험과 마주하는 법

경험을 수치화하는 방법 
UX Research
사용자가 원하는 기능을 잘 찾는지, 정성적인 경험도 이제 수치로 말할 수 있어요. 토스만의 새로운 기준으로요.

모두가 유저를 만나는 순간까지 
UX Research
일하느라 사용자를 만날 시간이 없다면, 점심시간은 어떨까요? 식사하며 사용자의 목소리를 듣는 토스 팀의 이야기를 들려드릴게요.




UX가 AI를 만났을 때

AI시대에 라이터로 살아남기 
UX Writing
AI는 UX라이터에게 위기이자 기회예요.
다크패턴을 계기로, 라이터에서 프롬프트 엔지니어로 성장한 이야기를 들려드려요.

AI봇을 만들면서 배운 3가지 
UX Research
사용자를 만나기 전에 가볍게 의견을 물어볼 수 있는 AI UT봇. ‘휴리봇’ 을 만들면서 배운 3가지들 알려드릴게요.

토스 그래픽을 10초 만에 그리는 AI 
Graphic Design
‘토스트’를 소개합니다. 인간이 3일 걸려 만드는 3D 그래픽을 10초 만에 만든다니, 퀄리티까지 따라올 수 있을까요? 




익숙함 너머, 본질을 보다

동의 화면도 간결해질 수 있을까 
Interaction Design 
각종 법적 제한 때문에 자유롭지 않은 동의 화면 디자인. 관성을 깨면 얼마나 달라질 수 있을까요?

토스가 디자인툴을 만든 이유 
UX Engineering 
스케치, 피그마, 프레이머… 모두 써봤지만 우리에게 딱 맞는 건 없었어요. 그래서 만들었습니다. 토스만의 디자인 툴, 데우스.

아무도 쓰지 않는 디자인 시스템 
Platform Design
새로운 컴포넌트를 배포했는데, 왜 아무도 안 쓰지? 컴포넌트를 넘어서, 일하는 방식 자체를 바꿔보기로 했어요.


Vision Driven Design
Simplicity 4는 거창한 해답보다는, 현실 속에서도 이상을 놓지 않으려 한 태도에 대해 이야기 하려고 해요. "정말 이런 게 가능할까?" 싶은 순간에도 끝까지 답을 찾으려고 한 사람들의 이야기. 그리고 그 집요함이 만들어낸 변화를 들려드리고 싶었어요. 토스는 어떻게 상상 속에만 있던 UX를 현실로 만들어냈는지, 그 과정을 함께 즐겨주세요. 

Simplicity 알림 신청하기 >> 

여러분이 가장 기대되는 세션은 무엇인가요? 댓글로 남겨주세요 !


토스 디자인 컨퍼런스 네 번째 이야기, Simplicity 4


일하면서 한 번쯤, 이상을 꿈꿔본 적이 있나요? 
빠른 문제해결이 중요한 토스에서도, 그 너머의 이상을 그리는 사람들이 있어요. 디자이너, 리서처, 라이터, 엔지니어링 등 다양한 분야에서 정교하고 아름다운 UX를 실현하기 위해 새로운 시도를 이어가고 있죠.

토스 디자인 컨퍼런스 Simplicity가 돌아왔어요.

Simplicity 4 : 한 번쯤 이상을 꿈꿔본 모두에게

안녕하세요, 토스 Ads Performance 팀 ML Engineer 김영호입니다.
토스앱 진입 시 확인하실 수 있는 다양한 광고들은 어떤 과정을 거쳐 유저에게 노출될까요? 이 글에서는 토스 광고 추천 시스템의 전체 흐름과 그 안의 머신러닝 활용 방식을 소개해 드리겠습니다.

웹사이트나 앱에서 볼 수 있는 대부분의 광고는 실시간 입찰 방식을 통해 노출됩니다. 매체에서 광고 지면에 노출 기회가 발생하면 해당 정보를 광고주에게 전달하고, 광고주는 기회에 대한 가치를 평가해 자신이 지불할 금액을 산정하여 입찰에 참여하죠. 제출된 입찰가 중 가장 높은 금액을 제시한 광고주의 광고가 최종적으로 해당 지면에 노출됩니다.

실시간 입찰에는 여러 광고 플랫폼이 관여하는데요, 대표적으로 SSP(Supply-Side Platform)와 DSP(Demand-Side Platform)가 있습니다. 이 둘은 실시간 입찰 과정에서 유기적으로 연동되어 매체에 안정적인 수익을, 광고주에는 효율적인 광고 집행 및 성과 최적화를 제공합니다.
SSP: 매체가 보유한 지면을 효율적으로 관리・판매하도록 돕는 플랫폼입니다. 광고 노출 기회마다 자동으로 여러 DSP를 연결하여 최적의 입찰을 유도함으로써 매체 수익을 극대화합니다. 
DSP: 광고주를 대신해 실시간 입찰에 참여하며, 설정된 예산과 목표에 따라 최소 비용으로 최대 광고 성과를 달성하도록 돕는 플랫폼입니다.
토스는 리스트・모먼트 배너 등 다양한 광고 지면을 보유한 매체이자, 토스애즈 플랫폼을 통해 광고주가 토스 앱 내에서 손쉽게 광고를 집행하고 최적화할 수 있는 환경을 제공합니다. 따라서 광고 요청부터 노출까지의 모든 과정이 토스 내에서 이루어지죠.

유저 접속부터 광고 노출까지
유저가 광고 지면이 있는 토스 앱 화면에 접속하면 광고 요청이 발생하고, 입찰을 통해 최적의 광고가 선정되어 노출됩니다. 이 과정은 크게 Targeting, Filtering, Ranking의 세 단계로 이루어지며, 각 단계에서 머신러닝이 활용돼요.

1. Targeting
유저 정보를 기반으로 노출할 광고를 선별하는 과정이에요. 광고주마다 캠페인 목표와 원하는 타겟 유저가 다르기 때문에, 광고 노출 대상인 유저가 설정된 타겟에 포함되는지 확인합니다. 포함되지 않을 경우 해당 광고는 제외돼요.
성별, 연령대, 직업 등의 특성을 바탕으로 유저를 세분화하여 광고를 집행하는 전략을 오디언스 타겟팅(Audience Targeting)이라고 합니다. 광고주는 인구통계학적 정보만으로도 타겟팅 그룹을 만들 수 있지만, 많은 광고주들은 자신의 상품을 구매한 유저와 유사한 특성을 지닌 잠재 고객을 타겟팅하고 싶어하죠.
이러한 니즈를 충족시키기 위해 Lookalike 모델을 활용해 광고주가 타겟으로 설정한 오디언스와 행동 패턴이 유사한 잠재 고객을 찾습니다. 유저의 행동 로그를 학습하거나 Two-tower 모델을 통해 유저와 광고 간의 상호작용을 학습하여 유저 임베딩을 생성하고, 주어진 오디언스와의 임베딩 유사도를 계산해 잠재 고객을 선별해요.


2. Filtering
이 단계에서는 유저에게 제공할 광고 후보를 선별하고, 광고주의 예산 및 광고 품질을 고려한 필터링 과정을 수행합니다.
광고 후보군 선정(Candidate Selection): 유저를 타겟팅하는 수십만~수백만 개의 광고 중에서 사용자가 관심을 가질 만한 광고를 빠르게 선택해야 해요. 모든 광고를 실시간으로 개별 평가하면 지연 시간이 늘고 연산 비용이 크게 증가하므로, 유저의 관심사를 기반으로 광고 후보군을 선별합니다. 이 과정에서는 정확성도 중요하지만 대규모 광고 풀에서 알맞은 후보군을 빠르게 추출하는 것이 중요한데요. 이 단계에서는 주로 Two-tower 모델을 활용해 유저와 광고에 대한 임베딩을 생성하고, 유사도 검색을 통해 관련 광고를 빠르게 탐색합니다.
예산 소진 조절(Pacing): 광고주가 설정한 캠페인 예산을 기간 내에 균등하고 안정적으로 소진하도록 광고 노출 및 입찰을 제어합니다. 과거 입찰 로그를 바탕으로 시간대・요일 등 컨텍스트에 따른 트래픽을 예측하고, 이를 바탕으로 사용 가능한 예산을 산정하고 실시간으로 소진 속도를 조절해요.
노출 빈도 제한(Frequency Capping): 동일한 광고가 한 유저에게 일정 기간 내에 노출될 최대 횟수를 설정하여 광고 피로도를 줄입니다. 하루 최대 3회와 같이 고정 캡을 설정할 수 있지만, 유저의 행동 패턴에 따른 최적 빈도를 예측해 적용할 수 있어요.

3. Ranking
이전 단계에서 선별된 후보 광고의 입찰가를 산출해 노출될 광고를 결정합니다. 입찰가는 매체의 기대 수익을 의미하는 eCPM(effective Cost Per Mille, 1,000회 노출당 비용)으로 표현하며, 이 값을 기준으로 광고 순위를 매겨요. eCPM은 광고주가 클릭당 지불하는 비용(CPC, Cost Per Click)과 광고의 클릭률(CTR, Click-Through Rate)을 기반으로 계산합니다.
eCPM(1,000회 노출당 비용) = CPC(클릭당 지불 비용) * CTR(클릭률) * 1,000
이때 실제 CTR은 광고가 실제로 노출된 후에야 알 수 있기 때문에, 노출 전 단계에서는 유저, 광고, 컨텍스트 정보를 기반으로 CTR을 예측하여 사용합니다. CTR 예측 모델은 광고 ID, 유저 속성 등 고차원의 희소 특징(Sparse Feature) 간의 상호작용을 효과적으로 학습해야 하기 때문에, 주로 FM(Factorization Machine), DeepFM, DCN(Deep & Cross Network) 구조를 사용해요. 
또한, 광고주는 각 노출 기회마다 전환율(CVR, Conversion Rate)을 예측해 입찰가를 조절할 수 있습니다. 전환율이 낮다고 예상되는 상황에서는 클릭당 비용을 낮춰 불필요한 지출을 최소화하고, 전환율이 높다고 예상될 때 클릭당 비용을 높여 경쟁 우위를 차지할 수 있어요. 

결론
앞서 살펴본 광고 노출 과정 이외에도 머신러닝은 광고 운영 전반에서 다양하게 활용될 수 있습니다.
동적 입찰가 조절: 광고주가 설정한 클릭당 비용은 고정된 값이기 때문에 실시간으로 변화하는 경쟁 상황에 빠르게 대응하지 못해요. 이를 보완하기 위해 DQN(Deep Q-Network)와 같은 강화학습 모델을 사용하여 광고 운영 현황에 따라 클릭당 비용을 동적으로 조절함으로써 광고 효율 저하를 방지합니다.
광고 소재 최적화: 사용자에게 노출되는 광고 소재의 성과를 향상시키기 위해 생성형 AI를 활용하여 다양한 소재를 자동 생성・테스트하고 최적의 소재를 찾습니다.

토스애즈는 광고 플랫폼의 기반을 만들어가는 단계로, 광고 시스템 전반에 필요한 머신러닝 모델을 초기부터 설계하고 고도화할 수 있어요. 광고는 머신러닝 모델의 작은 변화가 바로 비즈니스 성과로 이어지는 분야입니다. 다양한 실험을 통해 머신러닝 모델로 비즈니스 성과를 만들어가고 싶으신 분들의 많은 지원을 기다립니다.


안녕하세요, 토스 Ads Performance 팀 ML Engineer 김영호입니다.
토스앱 진입 시 확인하실 수 있는 다양한 광고들은 어떤 과정을 거쳐 유저에게 노출될까요? 이 글에서는 토스 광고 추천 시스템의 전체 흐름과 그 안의 머신러닝 활용 방식을 소개해 드리겠습니다.

웹사이트나 앱에서 볼 수 있는 대부분의 광고