토스

RSS

게시글: 281
등록: 2026년부터

All Frontend Backend AI DevOps Architecture Etc

Frontend
하마터면 못생겨질 뻔했다 - 토스 프론트 2 제작기
토스플레이스에서 제작한 결제 단말기 '프론트 2'의 개발 과정을 공유하는 글입니다. 단순히 결제 기능만 수행하는 기기를 넘어, 높은 사용성과 심미성을 갖춘 제품을 만들기 위한 집요한 고민과 개선 과정을 세 가지 핵심 문제 중심으로 설명합니다. 특히 NFC 결제 방식의 불편함을 개선하고, 복잡해질 수 있는 디자인을 사용자 친화적으로 다듬기 위한 노력들을 보여줍니다. 디자인 시스템과 사용자 경험에 대한 깊은 고민이 어떻게 제품의 완성도를 높이는지 잘 보여주는 사례입니다.
토스FrontendUI/UX
토스·2026년 4월 9일
Frontend
97% Smaller, 2x Faster: How es-toolkit Reached 10 Million Weekly Downloads
Toss의 프론트엔드 팀은 1000만 다운로드를 돌파한 JavaScript 유틸리티 라이브러리 'es-toolkit'을 개발했습니다. 기존 lodash의 대안으로, ES Modules와 TypeScript를 기반으로 처음부터 재설계되었습니다. es-toolkit은 lodash 대비 최대 97% 작은 번들 크기와 2배 이상 빠른 런타임 성능을 제공하며, TypeScript를 기본 지원하고 호환성을 위한 'es-toolkit/compat'도 포함합니다. 웹 표준 변화(ES Modules, V8 엔진 성능 향상, TypeScript 보편화)와 번들 크기의 중요성 증대에 맞춰 lodash의 아키텍처 한계를 극복하고자 개발되었습니다. 이는 한국에서 시작된 글로벌 규모의 JavaScript 라이브러리 성공 사례를 보여줍니다.
JavaScriptes-toolkitlodash
토스·2026년 4월 1일
Frontend
쓰기 쉬운 Toss Front SDK
토스플레이스에서 개발한 결제 단말기 'Toss Front'의 외부 연동 SDK 개발 경험을 공유합니다. SDK의 품질은 기능 제공 방식에 따라 결정되며, 사용자가 쉽게 사용할 수 있도록 퍼사드(Facade) 패턴을 기반으로 메서드와 인터페이스를 설계하는 것이 중요합니다. 본문에서는 SDK 초기 단계에서 사용 경험을 개선하기 위한 고민과 함께, 연동사의 휴먼 에러를 구조적으로 방지하여 SDK 안정성을 높이는 방법에 대해 구체적인 코드 예시를 통해 설명합니다. 이를 통해 외부 연동사의 개발 편의성을 높이고 Toss Front 생태계를 확장하는 것을 목표로 합니다.
SDKToss FrontFacade Pattern
토스·2026년 2월 26일
Frontend
디자인 시스템 다시 생각해보기
토스의 디자인 시스템 TDS를 운영하며 '어떻게 하면 더 많은 팀이 시스템을 잘 사용하게 할 수 있을까?'라는 질문에 대한 고민과 해결 과정을 공유합니다. 디자인 시스템은 일관된 UI, 빠른 개발 속도, 효율적인 협업을 목표로 하지만, 조직 성장과 제품 다양화에 따라 사용하기 어려워지는 경우가 발생합니다. 제품팀은 시스템의 제약을 우회하기 위해 Figma 컴포넌트를 detach하거나 디자인 시스템 패키지를 fork하는 등의 행동을 합니다. 이는 시스템의 효율성을 위해 만들어진 것이 오히려 마찰의 원인이 되는 상황을 초래합니다. 이러한 문제를 해결하기 위해 디자인 시스템을 바라보는 관점의 전환이 필요하며, 디자인 시스템 자체를 하나의 '제품'으로 인식하고 수요에 맞는 공급을 제공해야 함을 강조합니다. Deus라는 자체 툴을 사용하지만, 예시에서는 Figma를 활용하여 detach와 fork의 문제점을 설명하고 있습니다.
디자인 시스템TDSUI 컴포넌트
토스·2026년 1월 8일
Frontend
AST로 Outdated 없는 퍼널 문서 만들기
판매자 입점 퍼널 문서를 코드를 기반으로 자동 생성하여 항상 최신 상태를 유지하는 경험을 공유합니다. 기존 수기 문서는 코드 변경 시 업데이트가 어렵고 조건부 분기 표현에 한계가 있었습니다. 이 글에서는 AST(추상 구문 트리)를 활용하여 소스코드에서 퍼널 로직을 추출하고, 이를 시각화하여 '절대 Outdated 되지 않는' 퍼널 문서를 만드는 방법을 소개합니다. 이를 통해 개발팀은 복잡한 판매자 입점 과정을 명확하게 이해하고 유지보수 효율성을 높일 수 있습니다.
AST퍼널 문서코드 분석
토스·2025년 12월 24일
Frontend
달리는 기차 바퀴 칠하기: 7년만의 컬러 시스템 업데이트
토스의 디자인 시스템인 TDS의 컬러 시스템이 7년 만에 전면 개편되었습니다. 기존 컬러 시스템은 컬러 간 명도 차이, 라이트/다크 모드 간 명도 기준 불일치, 접근성 문제 등 여러 한계를 가지고 있었습니다. 이러한 문제들을 해결하기 위해 토스팀은 컬러 토큰 시스템을 처음부터 다시 설계했습니다. 이 과정에서 명도와 색상 값을 분리하고, 각 색상에 대한 명도 기준을 통일하며, 접근성을 고려한 컬러 팔레트를 구축하는 데 중점을 두었습니다. 이번 개편은 일관성과 확장성을 갖춘 디자인 시스템의 기반을 마련하고, 사용자 경험을 향상시키는 데 기여했습니다.
디자인 시스템컬러 시스템토큰 시스템
토스·2025년 12월 15일
Frontend
100년 가는 프론트엔드 코드, SDK
본 글은 토스페이먼츠에서 결제 연동을 간편하게 하기 위해 개발한 결제 SDK의 개발 과정과 운영 중 겪었던 기술적 어려움에 대해 다룹니다. 결제 SDK는 복잡한 결제 연동 과정을 몇 줄의 코드로 단순화하지만, SDK 개발은 일반적인 프론트엔드 개발과는 다른 특수성을 가집니다. 예를 들어, SDK에 로그를 추가하는 간단한 변경이 브라우저 성능 저하와 결제 실패를 야기하거나, 특정 환경에서의 API 호환성 문제로 인해 `startsWith` 함수를 사용하지 못하는 등의 예상치 못한 문제가 발생할 수 있습니다. 이러한 문제들을 해결하기 위해 개발팀은 SDK의 안정성과 성능을 최우선으로 고려하며, 100년 가는 코드를 만들기 위한 핵심 가치를 설정하고 이를 달성해나가고 있습니다.
SDK결제Frontend
토스·2025년 11월 14일
Frontend
포스를 확장하는 가장 빠른 방법, 포스 플러그인
토스플레이스 Plugin Silo는 다양한 서비스와 쉽게 통합될 수 있는 유연한 포스(POS) 시스템 구조를 설계하고 구현한 경험을 공유합니다. 기존 포스 시스템의 한계를 극복하고, 각기 다른 업종의 요구사항을 충족시키기 위해 외부 제휴를 늘리면서 발생한 복잡성 증가, 유지보수 어려움, DRI(Directly Responsible Individual) 모호성 등의 문제를 해결하고자 플러그인 아키텍처를 도입했습니다. VSCode의 확장성과 유사한 구조를 목표로 하여, 사용자와 외부 개발자 모두에게 가치 있는 경험을 제공하는 데 중점을 두었습니다.
포스토스플레이스플러그인
토스·2025년 10월 29일
Frontend
눈 대신 귀로 느낄 수 있는 챗봇 흐름 만들기 | 접근성 업무일지 #3
토스 고객센터 챗봇에서 스크린리더 사용자를 위한 접근성 개선 경험을 공유하는 글입니다. 기존 챗봇은 화면이 변경되어도 스크린리더 사용자에게는 이를 인지할 방법이 없어 대화 흐름이 단절되는 문제가 있었습니다. 이를 해결하기 위해 시각적 UI 흐름을 초점 이동에 반영하고, 초점 이동 타이밍을 정교하게 조정하는 두 가지 개선 방안을 제시합니다. 특히, `scrollIntoView({ behavior: 'smooth' })`와 `target.focus({ preventScroll: true })`를 조합하여 부드러운 스크롤과 자연스러운 초점 이동을 동시에 구현함으로써, 시각 장애가 있는 사용자도 챗봇 흐름을 직관적으로 따라갈 수 있도록 개선한 과정을 상세히 설명합니다.
접근성챗봇스크린 리더
토스·2025년 8월 13일
Frontend
토스의 접근성 문서 A11y Fundamentals 을 소개합니다 (오픈 기념 이벤트 ~9/10)
토스에서 개발한 'A11y Fundamentals' 문서를 소개하는 글입니다. 이 문서는 '접근성은 어려운 것'이라고 느끼는 개발자들을 위해 실무에서 바로 적용 가능한 접근성의 핵심 개념과 실수하기 쉬운 패턴을 다룹니다. 버튼 안에 버튼을 넣는 경우, `<a>` 태그 안에 `<button>`이 들어가는 경우 등 실제 예시를 통해 스크린 리더 사용자가 콘텐츠를 읽는 방식과 문제점을 설명합니다. 프론트엔드 개발자가 접근성의 출발점이자 핵심 역할을 수행하며, 접근성 준수는 장애인 사용자뿐만 아니라 일반 사용자에게도 더 빠르고 편리한 웹 경험을 제공하고, 개발자에게는 견고하고 유지보수하기 쉬운 코드를 작성하는 데 도움을 준다고 강조합니다.
접근성A11y FundamentalsFrontend
토스·2025년 8월 13일
Frontend
시각 정보를 소리로 번역하는 법 - 시각장애인을 위한 얼굴 인증 개선기 | 접근성 업무일지 #2
이 글은 시각장애인 사용자를 위한 얼굴 인증 과정 개선 경험을 공유합니다. 기존 얼굴 인증 방식은 시각 정보에 의존하여 시각장애인 사용자에게 불편함을 야기했습니다. 이를 해결하기 위해 스크린리더 사용자를 위한 별도의 인증 과정을 설계하고, 사용자 테스트(UT)를 통해 문제점을 발견하고 개선했습니다. 특히, 진행 상태를 시각적인 프로그레스 바 대신 소리로 전달하여 사용자의 불안감을 해소하고 직관적인 경험을 제공했습니다. 또한, 오류 발생 시 토스트 메시지를 활용하는 등 시각 정보를 청각적으로 효과적으로 번역하는 접근성 개선의 중요성을 강조합니다.
접근성시각장애인UI/UX
토스·2025년 7월 18일
Frontend
시각장애인에게 ‘읽는 순서’가 왜 중요할까? | 접근성 업무일지 #1
본 글은 시각장애인 사용자를 위한 웹/앱 접근성, 특히 스크린리더 사용 시 '읽는 순서'의 중요성을 다룹니다. 스크린리더(iOS의 VoiceOver)는 화면의 요소들을 음성으로 읽어주며, 이때 레이블, 역할, 상태 정보가 사용자에게 명확히 전달되어야 합니다. 글에서는 시스템의 문법을 재고하며 사용자의 관찰을 통해 '읽는 순서'가 어떻게 개선될 수 있는지, 그리고 이것이 왜 시각장애인 사용자 경험에 필수적인지에 대한 경험을 공유합니다. 궁극적으로는 모든 사용자가 편리하게 서비스를 이용할 수 있도록 접근성 개선의 필요성을 강조합니다.
접근성웹 접근성스크린 리더
토스·2025년 6월 27일
Frontend
[현장으로 간 리서처] EP1. 커피값은 저희가 낼게요, 테스트 참여 해보실래요?
토스플레이스의 결제 단말기 '프론트' 개발 과정에서 진행된 사용성 평가 리서치 사례를 소개합니다. 다양한 변수가 존재하는 오프라인 결제 환경에서 카드사 할인 정보 안내 기능의 효과를 검증하기 위해, 실제 카페 매장을 빌려 사용자들의 결제 경험을 면밀히 관찰했습니다. 인위적인 환경이 아닌 실제와 유사한 맥락에서 사용자 행동을 파악함으로써, 기능의 실효성을 높이고 더 나은 결제 경험을 제공하기 위한 노력을 보여줍니다. 특히, 다양한 상황(혼자 결제, 친구와 함께 결제 등)에서의 사용자 주의력과 행동 변화를 고려하여 리서치를 설계한 점이 인상 깊습니다.
토스플레이스결제 단말기Frontend
토스·2025년 6월 5일
Frontend
인터랙션으로 만드는 몰입 경험 | Simplicity 4 제작기 #3
Simplicity 4 컨퍼런스의 인터랙션 디자인 제작기를 다루는 글입니다. 온라인 컨퍼런스에서 사용자의 몰입도를 높여 끝까지 시청하게 만드는 것을 목표로 삼았습니다. 기존 컨퍼런스의 높은 중간 이탈률 원인을 분석하고, 이를 해결하기 위한 인터랙션 디자인 전략을 제시합니다. 특히 모바일과 데스크탑 환경 각각의 특성을 고려하여 최적화된 사용자 경험을 설계한 과정이 상세히 설명됩니다. 모바일에서는 숏폼 감성을 살린 가로·세로 스크롤 조합과 세션 포커싱 시 프리뷰 영상 자동 재생 기능을, 데스크탑에서는 가로 스크롤 기반 포커싱 구조를 통해 시각적인 정보 전달과 사용 편의성을 높였습니다. 이 글은 사용자 경험을 향상시키기 위한 인터랙션 디자인의 중요성과 구체적인 구현 사례를 보여줍니다.
인터랙션 디자인UI 디자인UX
토스·2025년 5월 29일
Frontend
Simplicity 4 : 뒤에 개발자 있어요
토스 디자인 컨퍼런스 Simplicity 4 사이트 개발 경험을 공유하는 글입니다. 이번 프로젝트의 핵심 목표는 다음 시즌에도 재사용 가능한 컨퍼런스 사이트를 만드는 것이었습니다. 이를 위해 세션 화면을 컴포넌트 단위로 템플릿화하고, 세션 정보를 시트에서 입력받아 쉽게 수정할 수 있도록 구조화했습니다. 특히, 각 세션 화면 간의 자연스러운 인터랙션 구현에 많은 고민이 있었는데, 플랫폼과 화면마다 다른 인터랙션 스펙을 고려하여 세션 템플릿의 구성 요소를 4분할하고 공통된 인터랙션 흐름을 정의하는 방식으로 해결했습니다. 또한, 모바일 환경에서의 다양한 브라우저(삼성, Safari 등) 대응 작업도 진행하며 웹 성능과 접근성을 고려한 개발 과정을 설명합니다.
ReactUI 컴포넌트디자인 시스템
토스·2025년 5월 27일
Frontend
토스 그래픽 더 토스답게 만들기
토스 팀의 다양한 디자인 및 UX 관련 세션 내용을 소개하는 글입니다. '진짜 모두를 위한 금융'을 목표로 유니버설 디자인, AI 시대 UX 라이터의 역할, 'Pull To Refresh' 그래픽 디자인, 사용자 경험 연구 운영, 경험 수치화 방법, 인터랙션 디자인을 통한 첫인상 만들기, 디자인 조직 내 개발자들의 역할 등 다채로운 주제를 다룹니다. 특히, 토스 그래픽을 '토스답게' 만들기 위한 고민과 노력, 그리고 사용자를 깊이 이해하기 위한 방법론들이 공유됩니다. 디자인과 개발이 협력하여 사용자 경험을 향상시키는 토스 팀의 철학과 실제 사례를 엿볼 수 있습니다.
토스디자인UX
토스·2025년 5월 23일
Frontend
토스 프론트엔드에 이력서 없이 리포지토리 링크로 지원하세요 (~4/30)
토스 프론트엔드 팀에서 이력서 대신 GitHub 리포지토리 링크로 지원받는 새로운 채용 방식을 소개합니다. 이력서 작성의 부담을 줄이고, 오직 코드 자체로 평가받고 싶은 개발자들에게 좋은 기회를 제공합니다. 지원자는 모듈화, 코드 품질, 명확한 디렉토리 구조, TypeScript 활용 등 코드의 완성도와 개발자의 고민을 보여줄 수 있는 리포지토리를 제출해야 합니다. 이 전형은 2025년 5월 31일까지 진행되며, 코드 중심의 평가를 통해 개발 역량을 검증하고자 합니다.
토스Frontend채용
토스·2025년 4월 8일
Frontend
React Native에서 타입 안전한 파일 기반 라우팅 구현하기
이 글은 토스에서 개발한 React Native 프레임워크인 Granite의 타입 안전한 파일 기반 라우팅 구현 방식을 소개합니다. 기존 파일 기반 라우팅 방식은 화면 이동 시 필요한 파라미터의 타입을 명확히 정의하기 어렵다는 한계가 있었습니다. Granite은 이러한 문제를 해결하기 위해 tanstack router와 같이 타입 안정성을 핵심으로 하는 라우터 프레임워크에서 영감을 받아, co-location 원칙을 적용하여 각 화면의 타입을 같은 위치에서 정의하도록 개선했습니다. 이를 통해 개발자는 어떤 파라미터가 필요한지 명확하게 인지하고 안전하게 라우팅을 구현할 수 있게 되었습니다. Granite은 현재 오픈소스로 공개되어 있습니다.
React NativeGraniteFile-Based Routing
토스·2025년 3월 26일
Frontend
ESBuild를 위한 HMR, 직접 만들기
이 글은 프론트엔드 개발 경험을 향상시키는 HMR(Hot Module Replacement)의 원리와 다양한 번들러에서의 구현 방식을 소개하고, ESBuild 기반 번들러를 직접 개발한 경험을 공유합니다. HMR은 코드 수정 시 페이지 새로고침 없이 변경 사항을 즉시 반영하여 빠른 피드백 루프를 제공하며, 특히 UI 상태를 유지하면서 개발할 수 있다는 장점이 있습니다. Metro, Webpack, Vite 등 주요 번들러들이 HMR을 지원하는 방식을 설명하고, ESBuild를 활용하여 HMR 기능을 직접 구현하는 과정을 상세히 다룹니다. 이를 통해 개발 생산성을 높이는 HMR의 중요성과 구현 방법에 대한 깊이 있는 이해를 돕습니다.
HMRESBuild번들러
토스·2025년 3월 18일
Frontend
자료구조를 활용한 복잡한 프론트엔드 컴포넌트 제작하기
이 글은 토스증권 PC의 종목 상세 페이지에서 사용되는 복잡한 그리드 레이아웃 기능을 직접 구현한 경험을 공유합니다. 패널 추가/제거, 크기 조절, 최소 크기 지원, 레이아웃 저장, 터치 스크린 지원 등 다양한 요구사항을 만족시키기 위해 기성 라이브러리 대신 직접 구현을 선택했습니다. 복잡한 요구사항을 가진 UI를 구현할 때 라이브러리 사용과 직접 구현 사이의 장단점을 비교하고, 자료구조를 활용하여 이러한 복잡성을 어떻게 해결했는지에 대한 과정을 설명합니다. 궁극적으로는 라이브러리의 한계를 극복하고 요구사항에 완벽하게 부합하는 커스텀 UI를 성공적으로 구축한 사례를 보여줍니다.
Frontend컴포넌트그리드 레이아웃
토스·2025년 3월 18일