모든 블로그
토스

토스

도메인toss.tech
주요 카테고리 프론트엔드 · AI

활동 요약

대표 인기 포스트캐시를 적용하기 까지의 험난한 길 (TPS 1만 안정적으로 서비스하기)499 조회
최근 30일
7개
평균 조회
98
누적 조회
24,617
전체 글
252개
마지막 발행
2026. 11. 10.
블로그 방문

토스 기술 블로그 글 (63)

프론트엔드

100년 가는 프론트엔드 코드, SDK

결제 SDK의 연동 복잡성과 운영 문제를 해결하기 위해 V2 SDK를 다시 설계했습니다. 계층 분리와 계약 중심 구조로 안정성, 확장성, 명확성을 강화했습니다.

#SDK#TypeScript#CI/CD
15800

프론트엔드

포스를 확장하는 가장 빠른 방법, 포스 플러그인

포스 확장을 위해 제휴사별 맞춤 개발 대신 플러그인 구조를 도입한 사례를 소개했습니다. 웹 워커 격리와 SDK 추상화로 안정성과 개발 편의성을 높이고, 향후 생태계 확장을 계획했습니다.

#node.js#JavaScript#TypeScript
10700

프론트엔드

“왜 아무도 에러 메시지를 읽지 않을까?” | 언더커버 사일로 비하인드 3화: 페이스페이 사일로

페이스페이 사일로가 얼굴 인증의 어색함을 줄이기 위해 반복 노출과 즐거운 체험형 이벤트, 공공 디바이스에 맞는 UX를 고민한 과정을 다뤘습니다. 에러 메시지보다 사용자의 시선 위치를 고려한 안내 방식과 결제·입장 경험 단순화 방향도 소개했습니다.

#UI/UX#인증#결제
19100

프론트엔드

눈 대신 귀로 느낄 수 있는 챗봇 흐름 만들기 | 접근성 업무일지 #3

스크린리더 사용자도 챗봇 흐름을 자연스럽게 따라가도록 초점 이동과 안내를 개선했습니다. 부드러운 스크롤, 음성 안내, 효과음으로 접근성을 높인 사례입니다.

#접근성#스크린리더#aria-live
14100

프론트엔드

토스의 접근성 문서 A11y Fundamentals 을 소개합니다 (오픈 기념 이벤트 ~9/10)

토스가 실무에서 바로 적용할 수 있는 접근성 문서 A11y Fundamentals를 소개했습니다. 스크린리더 체험 이벤트와 함께 핵심 원칙과 실수하기 쉬운 패턴도 안내했습니다.

#접근성#스크린리더#HTML
16900

프론트엔드

시각 정보를 소리로 번역하는 법 - 시각장애인을 위한 얼굴 인증 개선기 | 접근성 업무일지 #2

시각장애인 사용자를 위한 얼굴 인증 흐름을 별도로 설계하고, 진행 상태와 오류를 소리와 안내로 전환해 개선했습니다. 카메라 권한과 인증 절차도 단계별로 나눠 혼자서 인증을 마칠 수 있게 했습니다.

#접근성#스크린리더#UI/UX
8200

프론트엔드

원칙보다 사용성에 집중할 때 | 접근성 업무일지 #1

보이스오버의 읽는 순서가 사용성에 어떤 불편을 만드는지 살펴보고 개선 방향을 고민했습니다. iOS 18.4의 컨트롤 항목 순서 설정처럼 사용자 선택권이 중요하다는 점도 확인했습니다.

#iOS#접근성#UI/UX
8900

프론트엔드

토스 프론트엔드 챕터가 오픈소스를 통해 꿈꾸는 미래

토스 프론트엔드 챕터가 오픈소스 위원회를 통해 세계적 오픈소스 탄생 가능성을 실험했습니다. 자율 기여와 정기 토론으로 코드와 철학을 함께 다듬는 운영 방식을 소개했습니다.

#오픈소스#React#API
17300

프론트엔드

인터랙션으로 만드는 몰입 경험 | Simplicity 4 제작기 #3

온라인 컨퍼런스에서 이탈을 줄이기 위해 몰입형 인터랙션 흐름을 설계했습니다.모바일 우선 구조, 템플릿 시스템화, 자막·전환 효과로 시청 경험을 다듬었습니다.

#UI/UX#인터랙션 디자인#모바일
4500

프론트엔드

Simplicity 4 : 뒤에 개발자 있어요

재사용 가능한 컨퍼런스 구조를 만들기 위해 템플릿 분리, 브라우저 대응, 로드·렌더링 최적화를 진행했습니다. 모바일과 데스크탑 모두에서 자연스럽게 동작하도록 성능과 인터랙션을 다듬었습니다.

#React#mobile#web
9900

프론트엔드

이토록 아름다운 새로고침

화면을 아래로 당길 때 보이는 Pull To Refresh 그래픽의 디자인 고민을 다뤘습니다. 짧은 순간의 새로고침 경험에 아름다움을 담기 위한 방향을 소개했습니다.

#UI/UX
16300

프론트엔드

우리가 몰랐던 시각 장애인의 UX

시각 장애인의 토스 사용성을 개선하기 위한 UX 리서치 인사이트를 공유했습니다. 보이지 않는 접근성 장벽을 줄이기 위한 방향을 다뤘습니다.

#UI/UX
5700

프론트엔드

동의 화면도 간결해질 수 있을까

법적 제한이 많은 동의 화면 디자인을 더 간결하게 바꿀 수 있는지 살펴보았습니다. 관성을 깨는 시도가 어떤 변화를 만들 수 있는지 문제를 제기했습니다.

#UI/UX
7900

프론트엔드

인터랙션으로 첫 인상 만들기

토스를 처음 쓰는 외국인에게 어떻게 첫인상을 줄지 다룬 온보딩 사례였습니다. 인터랙션을 중심으로 감탄을 이끌어낸 접근이 핵심이었습니다.

#UI/UX
5900

프론트엔드

코드 리뷰할 시간이 어딨어요? 모닥불 | EP.12

토스 프론트엔드 챕터의 코드 리뷰 문화 활성화 사례를 소개했습니다. 고맥락자 리뷰, 코드스멜 워킹그룹, 가독성 위원회, 코드 리뷰 배틀 같은 운영 방식을 공유했습니다.

#코드 리뷰#refactoring#test
13200

프론트엔드

React Native에서 타입 안전한 파일 기반 라우팅 구현하기

Bedrock에서 파일 기반 라우팅의 타입 안전성을 높이는 방법을 소개했습니다. 선언 병합과 자동 타입 생성으로 파라미터 검증과 네비게이션 추론을 개선했습니다.

#React Native#TypeScript#라우팅
21300

프론트엔드

토스의 디자인 편집기 ‘데우스’, 이렇게 만들었어요! | EP.11

토스가 자체 디자인 편집기 데우스(Deus)를 만든 이유와 개발 과정을 소개했습니다. 상태 관리로 MobX를 선택한 배경과 기술적 도전도 함께 다뤘습니다.

#UI/UX#성능#MobX
23400

프론트엔드

ESBuild를 위한 HMR, 직접 만들기

프론트엔드 개발 경험을 높이는 HMR의 원리와 번들러별 구현 방식을 비교했습니다. ESBuild 기반 번들러에 HMR을 직접 붙인 과정을 통해 실시간 반영과 상태 유지를 구현했습니다.

#ESBuild#HMR#React Native
13400