안드로이드의 선언형 UI Jetpack Compose. 토스에서는 어떻게 사용할까요?
Compose 도입 배경과 토스 디자인시스템에 적용하는 과정에서의 러닝을 공유합니다.

Compose를 토스팀에 안착시키기까지

UIKit으로 만들어진 토스 디자인 시스템 SwiftUI에서 쓸 수 있을까?

Rally로 3분 만에 애니메이션 완성하기

토스 앱을 켜는 시간 1초를 줄이기까지의 과정과 시행착오를 소개합니다. 

토스 앱 오픈시간 1초를 줄이기까지

토스 디자인 플랫폼 팀은 단순히 UI 요소를 개발하고, 컴포넌트화하는 것 이상의 디자인 시스템을 꿈꿉니다.
더 좋은 사용자 경험을 제공하기 위한 크고 작은 고민들이 개발자 경험 곳곳에 어떤 모습으로 스며들었는지 공유합니다. 

UX와 DX, 그 모든 경험을 위한 디자인 시스템


모닥불 10화 특집: 캠프파이어 에피소드 🔥
이번 모닥불은 특별히 시청자 여러분과 함께하는 시간으로 준비했어요.
"폴더 구조를 설계할 때 꼭 지켜야 할 원칙은?"
"컴포넌트 추상화, 어디까지 해야 더 효율적일까요?
"함수형 프로그래밍은 언제, 왜 사용하는 게 좋을까요?"
사전에 접수된 시청자 여러분의 다양한 사연과 질문 그리고 코드 리뷰까지!
토스 개발자들이 실무 경험에서 얻은 노하우와 인사이트를 아낌없이 공유합니다!  지금 바로 확인해보세요!

타임스탬프
00:00 인트로
01:20 첫 번째 사연: 폴더 구조는 어떻게 정리해야 협업이 쉬울까요?
06:39 두 번째 질문: 컴포넌트를 어떻게 분리하고, 추상화는 어디까지 해야 할까요?
11:20 변경 사항을 예측해 추상화 하는데 어려움을 겪고 있다면
15:24 세 번째 질문: 유효성 검사는 에러로 보는 것이 맞을까요?
19:57 네 번째 질문: 함수형 프로그래밍이 꼭 필요한가요?

출연진
박서진, 토스 Head of Frontend
문동욱, 토스 Frontend Developer
박건영, 토스증권 Frontend Developer

Frontend Fundamentals ; 변경하기 쉬운 프론트엔드 코드를 위한 지침서
바로가기: https://frontend-fundamentals.com

다른 모닥불 회차 보러가기
EP.7 개발자 리더로서 성장당한 썰
EP.8 Next.js 그만 쓰세요! 면접관이 진짜 원하는 것!?
EP.9 프론트엔드 서비스 최적화? 토스에서는 '이렇게' 합니다!




모닥불 10화 특집: 캠프파이어 에피소드 🔥
이번 모닥불은 특별히 시청자 여러분과 함께하는 시간으로 준비했어요.
"폴더 구조를 설계할 때 꼭 지켜야 할 원칙은?"
"컴포넌트 추상화, 어디까지 해야 더 효율적일까요?
"함수형 프로그래밍은 언제, 왜 사용하는 게 좋을까요?"
사전에 접수된 시청자 여러분의 다양한 사연과 질문

모닥불 10화 특집: 캠프파이어 에피소드 🔥

이번 모닥불은 특별히 시청자 여러분과 함께하는 시간으로 준비했어요.

사전에 접수된 시청자 여러분의 다양한 사연과 질문 그리고 코드 리뷰까지!

지금 바로 확인해보세요!

무엇이든 물어보세요 (feat. 프론트엔드 코드, 디렉토리 관리) | EP.10 캠프파이어 특집 상편


디자이너로서 커리어를 시작할 때, 특히 경력이 부족하다면 고민이 많을 수밖에 없죠. “내가 과연 준비가 됐을까?”, “경험도 없는데 이런 회사에 도전해도 될까?” 같은 걱정이 앞서기 마련인데요. 그런 고민 속에서 도전했던 두 디자이너 세린님과 수빈님의 이야기를 들어봤어요.
두 분이 경험한 토스 인턴십은 단순히 보조 업무나 과제 중심의 경험이 아니라, 1인 디자이너로서 제품을 주도적으로 맡을 수 있었던 기회였다고 해요. 4개월이라는 시간 동안 압축적으로 성장하며 과거의 자신을 뛰어넘을 수 있었던 그 이야기, 지금 시작할게요.



Q. 토스 인턴십에는 어떤 분들이 지원하시는지 궁금해요. 두 분은 지원 당시 어떤 상황이셨나요?
세린 : UX 디자인에 흥미를 느껴 공부하던 학생이었어요. 하지만 제 실력으로는 디자이너로 시작하기에 부족하다고 느껴서 고민이 많았죠. 그러다 토스 PD 인턴십 공고를 보고 ‘이건 꼭 도전해야 한다’는 생각이 들었어요. 토스는 제가 꼭 경험해보고 싶었던 회사였거든요. 아직 졸업 전이었지만, 지금 아니면 안 될 것 같다는 마음으로 지원했어요.
수빈 : 저는 원래 산업디자인을 전공했어요. 코로나 이후 제 적성을 고민하다 UX 디자인으로 눈을 돌리게 됐죠. 다른 회사에서 프로덕트 디자이너로 인턴을 하긴 했지만, 주도적으로 문제를 해결하는 경험이 부족하다는 아쉬움이 남았어요. 그래서 더 적극적으로 일할 수 있는 환경을 찾아보다 토스에 지원하게 됐어요.



Q. 경력이 많지 않았던 만큼 걱정도 많으셨을 것 같아요. 어떤 점이 가장 고민이었나요?
세린 : 걱정이 많았죠. UX 실무 경험은 없었고 PM 인턴 경험만 있었거든요. 하지만 입사 전형을 겪으며 토스가 “경력보다 잠재력을 본다”는 걸 느꼈어요. 얼마나 많은 디자인을 해봤는지가 아니라, 문제를 해결하려는 태도와 제품을 바라보는 관점이 훨씬 중요했어요. “경력이 없다면 우리가 만들어 줄게!”라는 느낌이 강했달까요.
수빈 : 저도 비슷했어요. 포트폴리오도 완벽하지 않았고, UI 디자인 경험도 부족했거든요. ‘내가 이 정도로 가능할까?’라는 생각이 들었지만, 면접 과정에서 제게 필요한 질문들을 많이 받으면서 생각이 바뀌었어요. ‘왜 이런 디자인을 선택했는지’, ‘이 문제를 어떻게 풀려고 했는지’를 묻는 질문들 덕분에 제 사고 과정을 돌아볼 수 있었고, 자신감도 얻었어요.
또 저의 경험과 태도를 보여주는 것에 집중했어요. 예를 들어, 제가 사이드 프로젝트를 할 때 발로 뛰며 사용자 인터뷰를 했던 경험이나, 꽃 사진 촬영을 위해 꽃을 직접 사고 팝업으로 판매까지 했던 이야기들을 담았어요.결국, 토스가 원하는 건 현재 스킬보다도 그런 적극적인 태도와 문제를 해결하려는 자세가 아니었을까 싶어요.


Q. 실제로 토스에서 인턴십을 하며 어떤 경험을 하셨나요?
세린 : 대부분의 인턴십은 보조 업무 위주로 진행된다는 인식이 있잖아요. 그런데 토스는 달랐어요. 사일로에 소속된 1인 디자이너로서 제품의 모든 과정을 주도적으로 맡을 수 있었어요. 제가 제안한 디자인이 실제로 제품에 반영되고, 유저 반응을 확인하는 경험은 정말 짜릿했죠. 인턴이라기보다는 정규직처럼 일했던 것 같아요.
수빈 : 저도 가장 놀랐던 점이 인턴에게도 제품 전 과정을 맡긴다는 점이었어요. 데이터 분석가, 개발자, 기획자와 협업하면서 문제를 정의하고 해결책을 제시하는 과정이 정말 재미있었어요. 4개월 동안 수십개의 제품을 디자인하고 결과를 빠르게 확인하며 성장할 수 있었어요. 다른 곳에서는 얻기 힘든 경험을 한 것 같아요. 



Q. 인턴으로서 업무에만 집중하며 성장하기 쉽지 않았을 것 같은데, 어떻게 가능했나요?
세린 : 디자인 챕터와 페어 디자이너의 지원 덕분이에요. 단순히 평가만 하는 게 아니라, 정말 저를 성장시키고 싶어 한다는 진심이 느껴졌거든요. 정기적인 피드백과 방향성 제시 덕분에 고민도 덜 수 있었고요. 또 인턴들은 서로 다른 팀에 배정돼서 경쟁에 대한 스트레스 없이 온전히 자신의 성장에 집중할 수 있었던 것도 큰 도움이 됐어요. 
수빈 : 팀에서 “제품이 꼭 성공하지 않아도 괜찮다. 과정 속에서 배우는 게 더 중요하다”는 말을 자주 해주셨어요. 이 말 덕분에 평가에 대한 부담을 덜고, 제품 자체에 몰입할 수 있었죠. 메이트와 페어 디자이너도 부족한 점은 명확히 짚어주고, 잘하는 점은 확실히 인정해줬어요. 이런 지원 속에서 자신감 있게 일할 수 있었어요.



Q. 마지막으로, 토스 인턴십 지원을 망설이는 분들에게 하고 싶은 말이 있다면요?
세린 : 어차피 해야 할 과정이라면, 토스에 도전해보세요. 취업 준비를 하며 포트폴리오를 만드는 건 누구나 해야 하는 일이잖아요. 그렇다면 토스에 지원해서 면접만으로도 얻어가세요. 포트폴리오를 보완할 힌트를 많이 얻을 수 있을 거예요. 그리고 인턴십에 합격한다면, 4개월 동안 폭발적으로 성장할 수 있어요. 정규직 전환까지 되면 좋고요. 잃을 게 전혀 없는 도전이니 꼭 해보세요!
수빈 : 경력이나 포트폴리오 완성도가 부족해도 괜찮아요. 토스는 실력보다 태도와 성장 가능성을 더 중요하게 봐요. 저도 UX 디자인 경력이 전혀 없었지만, 4개월 동안 엄청난 성장을 경험했어요. 수십 개의 프로젝트를 진행하며 협업하는 방법도 자연스럽게 배웠죠. 망설이지 말고 도전해보세요. 토스에서의 4개월은 다른 회사에서의 1년 이상 가치 있는 경험이 될 거예요. 정말로요!



두 분의 이야기를 통해 토스 인턴십이 단순한 경험을 넘어, 성장의 장을 열어준다는 걸 알 수 있었어요. 경력이나 경험이 부족해도 괜찮아요. 토스는 여러분의 가능성을 믿고, 이를 현실로 만들어주는 곳이에요.이제, 여러분도 토스에서 새로운 여정을 시작해보면 어떨까요? 




Interviewee: 장세린, 강수빈
Interviewer & Editor: 장성연, 유아란






디자이너로서 커리어를 시작할 때, 특히 경력이 부족하다면 고민이 많을 수밖에 없죠. “내가 과연 준비가 됐을까?”, “경험도 없는데 이런 회사에 도전해도 될까?” 같은 걱정이 앞서기 마련인데요. 그런 고민 속에서 도전했던 두 디자이너 세린님과 수빈님의 이야기를 들어봤어요.
두 분이 경험한 토스 인턴십은 단순히 보조 업무

2023년 프로덕트 디자이너 인턴십 후기를 들려드릴게요

토스 인턴십에서 고속 성장할 수 있는 이유


미스터리 디자인 클럽은? 
사용자 경험 속 크고 작은 궁금증을 사용자 리서치, 실험 등 다양한 방법으로 탐구하는 모임이에요. '왜 이렇게 디자인해야 할까?'라는 질문을 시작으로, 관성처럼 굳어진 UX 패턴의 진실을 파헤치며 더 나은 사용자 경험을 찾아가고 있어요. 

타임머신이 있다면 어디로 가보고 싶나요?

다들 고르셨나요? 오늘 미스터리 디자인 클럽에서는 ‘선택지를 고르는 화면’ 디자인에 대해 이야기해볼게요.
“화면 디자인을 하다보면 사용자가 선택지를 고르는 화면을 많이 구성하게 되는데요. 때에 따라 단 하나만 선택되거나, 여러 개를 선택할 수 있는 경우가 있어요. 그럴 때, ‘하나만 선택되는 화면은 당연히 *라디오 버튼으로 디자인 해야하지 않나?’라는 생각이 먼저 들어요. 사용자에게 ‘디자인적 증거’를 줘야겠다는 생각이 들기 때문이에요.” - 토스 프로덕트 디자이너 A
*라디오 버튼이란?  옵션을 선택할 때 사용되는 UI 컴포넌트인데요. 라디오의 물리적 버튼에서 따와 만들어진 PC UI 문법으로, 옵션 중 하나를 선택해야 할 때 PC와 모바일 모두에서 많이 이용되고 있어요. 


A씨를 비롯한 많은 메이커들이 토스의 모바일 디자인 시스템에 라디오 버튼 컴포넌트를 추가하자는 이야기를 꺼내곤 했어요. ‘너무 일반적인 공식이기 때문에’, ‘다른 곳에서 모두 이렇게 하기 때문에’가 그 이유였어요. 
그러나, 모바일 환경에서는 이 형태가 적합하지 않은 면이 있어요. 마우스 포인터로 버튼을 편하게 클릭할 수 있는 PC 환경에는 어울리지만, 손가락 끝으로 탭해야 하는 모바일 환경에서는 작은 원을 정확히 눌러야 할 것 같은 형태가 최선이라 하기 어렵기 때문이에요. 실제로는 레이블을 눌러서 선택할 수 있다고 해도요. 


iOS에서도 원형의 라디오 버튼은 존재하지 않아요. 대신 세그먼티드 컨트롤(Segmented Controls)이라는 컴포넌트를 이용하거나, 위 이미지처럼 체크박스를 사용해 PC의 라디오 버튼과 같은 기능을 구현하고 있어요. 탭 가능한 큰 영역을 제공하고, 미니멀한 스타일을 유지하기 위해 대안을 제시한 거죠. 
이렇듯 모바일에서 최선의 형태가 아님에도 불구하고, ‘하나만 선택되는 화면은 반드시 라디오 버튼을 써야하지 않을까?’라고 많은 분들이 생각했던 거에요. 

여러분은 앞서 어떤 선택을 하셨나요? 
그리고, 다른 사용자들은 어떻게 선택했을까요? 


세 가지 유형의 질문을 준비해 UT를 진행했어요. 
유형 1️⃣: 앞서 여러분이 선택한 ‘타임머신’ 질문처럼, 서로 배타적이어서 여러 개를 선택할 수 없는 것이 있어요. 
유형 2️⃣: ‘최근 1년간 감상한 콘텐츠를 선택하라’는 것처럼, 대부분 여러 개를 선택할 만한 질문이 해당돼요. 
유형 3️⃣: 단일 혹은 중복 모두 선택할 수 있는 질문이 해당돼요. 
질문에서는 ‘모두 선택’, ‘하나만 선택’ 등 선택 개수를 안내하지 않았어요. 또한, 일반적인 공식과는 반대로, ‘하나만 선택’일 땐 체크박스, ‘중복 선택’일 땐 라디오 버튼을 주어 사용자가 어떻게 선택하는지 관찰했어요. 

미스터리 디자인의 진실  
대부분의 사용자들은 버튼의 모양과 상관 없이 질문에 따라 답을 선택했어요 (15명 중 13명) 
유형 1에서는 하나를, 유형 2에서는 여러 개를, 그리고 유형 3에서는 선택하고 싶은 만큼 선택한 건데요. 
그렇게 선택한 이유가 무엇인지 물었을 때, 질문 자체에 집중해서 대답했어요. “나는 올빼미형 인간이다”, ‘”최근 1년간 영화, 드라마, 예능을 모두 봤다” 이렇게요. 유형 2나 3에서 ‘여러 개를 선택해도 되는지’ 묻는 분들이 계셨지만, 이들 또한 “질문에서 ‘중복 선택’이라는 말이 없어 헷갈린다”고 말했어요. 버튼의 모양을 언급하며 질문해도, 이 모양으로 인해 헷갈렸다고 말한 경우는 거의 없었어요. 
물론, 모든 사용자가 라디오 버튼의 역할을 모른다는 것은 아니에요. 인터뷰의 의도를 설명하고 버튼의 모양에 대해 물었을 때, ‘설문 조사, 시험’ 등에서 본 것 같다고 답한 분들도 계셨어요. 그럼에도 불구하고, 유형 1에서는 하나를, 유형 2에서는 여러 개를 선택했고 어색하게 느끼지 않았다고 했어요. 
결론: 동그란 라디오 버튼을 쓰지 않는다고 해서, 사용자의 선택에 문제가 되지 않아요. 
사용자는 버튼의 모양이 아닌 맥락에 더 큰 영향을 받기 때문이에요. 
위 예시에서는 단 하나의 질문이 전체 맥락이 되지만, 실제 제품 내에서는 이전 화면, 라이팅, 설명글 등 훨씬 다양한 것이 사용자의 맥락이 될 수 있어요. 중요한 것은 사용자가 선택해야 할 개수를 자연스럽게 이해할 수 있도록, 최선의 UI로 친절한 맥락을 제공하는 것이에요. 실제로 토스 앱 내 화면으로 UT를 진행했을 때, 사용자는 더욱 명확하게 선택했어요. 버튼의 모양과 상관 없이 하나를 묻는 질문에서 하나를, 여러 개를 묻는 질문에서 여러 개를 선택했죠.  
모바일에서도 반드시 동그란 라디오 버튼을 써야한다고 생각했다면, 오래된 공식에 따르고 싶었던 디자이너의 관성일 수 있어요. 중요한 것은, ‘반드시 그래야 하는 것’은 사실 그렇지 않을 수 있다는 거예요. 

여러분은 어떻게 생각하시나요? 댓글로 의견을 남겨주세요. 





미스터리 디자인 클럽은? 
사용자 경험 속 크고 작은 궁금증을 사용자 리서치, 실험 등 다양한 방법으로 탐구하는 모임이에요. '왜 이렇게 디자인해야 할까?'라는 질문을 시작으로, 관성처럼 굳어진 UX 패턴의 진실을 파헤치며 더 나은 사용자 경험을 찾아가고 있어요. 

타임머신이 있다면 어디로 가보고 싶나요?

다들 고르