토스뱅크가 패키지를 관리하는 방식 #2: 토스뱅크 패키지의 세 가지 기준
패키지의 문법과 모듈 구조를 유지하고, 환경별 변환과 번들링은 호스트에 맡겼습니다. declaration sourcemap과 원본 파일을 제공해 사용처의 구현 확인과 디버깅을 지원합니다.
#TypeScript#JavaScript#ESM
3100
모든 블로그
대표 인기 포스트캐시를 적용하기 까지의 험난한 길 (TPS 1만 안정적으로 서비스하기)499 조회499 조회 프론트엔드 프론트엔드
프론트엔드
프론트엔드
프론트엔드
프론트엔드
프론트엔드
프론트엔드
프론트엔드
프론트엔드
프론트엔드
프론트엔드
프론트엔드
프론트엔드
프론트엔드
프론트엔드
프론트엔드
프론트엔드
토스
도메인toss.tech
주요 카테고리 프론트엔드 · AI
활동 요약
- 최근 30일
- 7개
- 평균 조회
- 98
- 누적 조회
- 24,617
- 전체 글
- 252개
- 마지막 발행
- 2026. 11. 10.
토스 기술 블로그 글 (63)
토스뱅크가 패키지를 관리하는 방식 #1: 패키지를 ESM으로만 제공하기로 했어요
ESM·CJS 이중 배포에서 발생하는 상태 분리와 타입 누락 문제를 분석했습니다. 사내 패키지를 ESM-only로 전환해 관리와 디버깅 복잡도를 줄였습니다.
#ESM#CommonJS#node.js
4800
9인조 다람쥐 아이돌을 데뷔시켰습니다
적금 재방문을 높이기 위해 9종 다람쥐 캐릭터와 성장 중심 UI를 설계했습니다. AI 시안 탐색과 즉각적인 인터랙션으로 저금의 보람과 다음 방문 동기를 만들었습니다.
#UI/UX#design#prompt
8700
방해하지 않고, 눈에 띌 수 있을까
자산관리 리포트의 클릭률을 높이기 위해 표현보다 구조를 먼저 바꾼 디자인 사례를 다뤘습니다. 플로팅 카드와 인터랙션 조정으로 CTR과 CVR을 함께 3배 높였습니다.
#UI/UX#A/B test#CTR
8200
도메인 지식 없는 디자이너가 팀의 기준을 바꾼 방법
해외송금 디자인에서 수수료보다 큰 가치는 사용자의 불안을 줄이는 경험이라는 점을 발견했습니다. 인터뷰와 팀의 직접 경험을 통해 제품 기준을 바꾸고 송금 상태와 입력 과정을 단순화했습니다.
#UI/UX#API#server
6000
사용자를 위해 일부러 어렵게 만드는 경험, 어디까지 괜찮을까?
10대 저축을 돕는 잠금 저금통을 만들며, 일부러 어렵게 만드는 경험의 기준을 정리했습니다. 사용자에게 죄책감 대신 선택권과 응원을 남기는 설계를 강조했습니다.
#UI/UX#인터랙션#제품 디자인
9300
App Router의 장점은 우리에게도 장점일까요?
App Router와 RSC의 장점을 실제 서비스에 적용해 검토했지만, 전환과 운영 비용이 더 크다고 판단했습니다. 토스뱅크는 일부 이득보다 안정성과 기존 기능 호환성을 우선해 Pages Router를 유지하기로 했습니다.
#Next.js#React Server Components#SSR
13100
전체 데이터를 브라우저에 두는 광고 대시보드 만들기
전체 데이터를 브라우저와 Web Worker로 옮겨 광고 대시보드의 필터링과 정렬을 즉시 처리하도록 개선했습니다. 그 결과 속도뿐 아니라 누락 데이터, URL 검증, 정렬 제약 같은 구조적 문제도 함께 해결했습니다.
#React#Web Worker#API
9300
토스는 어떻게 광고 속에 게임을 넣었을까
토스는 게임 광고 소재를 받지 못하던 문제를 해결하기 위해 MRAID 기반 플레이어블 광고 SDK를 직접 만들었습니다. 실제 호출 범위만 구현하고 렌더 완료 감지와 배포 계약을 분리해 운영했습니다.
#MRAID#JavaScript#TypeScript
9000
토스의 디바이스 팜 만들기
팀마다 각자 관리하던 실기기 환경을 사내 디바이스 팜 네뷸라로 통합한 과정을 소개했습니다. Appium 대신 자체 드라이버와 실시간 미러링 구조로 속도와 운영성을 높였습니다.
#node.js#API#Kafka
17500
es-toolkit, 사내 작은 라이브러리가 전세계적인 라이브러리가 되기까지
토스의 es-toolkit이 lodash 대체를 목표로 성능과 번들 크기를 개선하며 성장한 과정을 소개했습니다. 국내외 커뮤니티 기여와 대형 오픈소스 채택으로 주간 다운로드 2천만 회를 넘겼습니다.
#JavaScript#TypeScript#GitHub
11500
디자이너가 시안 대신 앱을 만든 이유
디자이너가 SwiftUI와 AI를 활용해 시안 대신 동작하는 앱을 만들고 인터랙션을 직접 검증했습니다. 레포를 스펙처럼 전달해 개발 완성도와 전달 효율을 함께 높였습니다.
#SwiftUI#Xcode#iOS
22700
97% Smaller, 2x Faster: How es-toolkit Reached 10 Million Weekly Downloads
토스가 lodash 대체용 JavaScript 유틸리티 라이브러리 es-toolkit을 소개했습니다. ES Modules와 TypeScript 기반 재설계로 번들 크기와 성능을 크게 개선했습니다.
#JavaScript#TypeScript#ES Modules
11600
신입 디자이너가 꼭 알아야 할 실험 설계 팁
실험 경험이 없는 인턴 디자이너가 비회원 가입 퍼널 개선 실험을 설계한 과정을 공유했습니다. 기존 러닝을 분석해 명확한 가설을 세우고, 문구와 이미지 개선으로 전환율을 높였습니다.
#UI/UX#실험 설계#A/B 테스트
7500
쓰기 쉬운 Toss Front SDK
Toss Front 외부 연동 SDK를 Facade 패턴으로 단순하고 안전하게 설계하는 방법을 소개했습니다. 공통 유즈케이스는 고수준 API로 묶고 특수한 경우만 저수준 API를 남겨 DX와 안정성을 높였습니다.
#SDK#Facade#AWS CDK
13300
디자인 시스템 다시 생각해보기
디자인 시스템을 통제보다 제품의 관점에서 다시 바라본 글입니다. Flat과 Compound API를 함께 제공하는 하이브리드 전략으로 확장성과 사용성을 균형 있게 다루었습니다.
#디자인 시스템#API#React
20700
AST로 Outdated 없는 퍼널 문서 만들기
AST로 퍼널 라우팅을 정적 분석해 문서를 자동 생성하고, 코드 변경 시에도 최신 상태를 유지하는 방법을 소개했습니다. 조건 분기와 훅 내부 이동까지 추출해 Mermaid 다이어그램으로 시각화했습니다.
#AST#TypeScript#Next.js
11300
토스인컴 세금 환급 서비스 : 빠른 속도에서 품질을 지키기 위한 E2E 자동화 여정
토스인컴은 세금 환급 서비스의 복잡한 시나리오를 함수형 POM과 유틸로 재구성해 E2E 자동화를 안정화했습니다.클릭 실패와 페이지 전환 문제를 줄이고, 변경 대응 속도와 검증 효율을 함께 높였습니다.
#test#자동화#Playwright
7300