문서

프론트엔드 배포 시스템의 진화 (1) - 결제 SDK에 카나리 배포 적용하기

라웅배 토스 · 토스 기술 블로그

AI 핵심 요약

결제 SDK를 모든 가맹점에 한 번에 배포하면 실제 환경에서 발생하는 문제의 영향이 커지고, 개발자도 배포와 모니터링에 부담을 느꼈다. 처음에는 Lambda@Edge에서 요청마다 난수로 stable/canary를 선택했지만, 캐시를 켜면 일부 버전이 캐시에 고정되고 끄면 비용과 로딩 지연이 커지는 한계가 있었다. 이를 해결하기 위해 JA3 지문을 0~9의 코호트로 변환해 CloudFront 캐시 키에 반영하고, Lambda@Edge가 설정된 카나리 비율에 따라 버전을 선택하도록 설계했다. 쿠키로 사용자별 버전 일관성을 보조하면서 캐싱, 비율 조정, 신속한 롤백을 함께 지원하는 구조를 만들었으며, 쿠키는 필수 기능이 아니므로 없어도 동작해야 한다는 점을 강조한다.

정적 리소스에 요청별 난수 기반 카나리를 적용하면 캐시가 버전 선택을 고정하거나, 캐시를 끌 경우 엣지 함수 비용과 지연이 커질 수 있다.
JA3 지문을 소수의 코호트 값으로 변환하면 사용자 환경을 폭넓게 나누면서 캐시 키의 종류를 제한할 수 있다.
CloudFront 캐시 키에 코호트 헤더를 포함하고 Lambda@Edge에서 배포 비율에 따라 버전을 선택하면 캐싱과 가중치 조정을 함께 지원할 수 있다.
쿠키는 사용자에게 버전을 일관되게 제공하는 보조 수단으로만 쓰고, 쿠키가 없어도 서비스가 정상 동작하도록 설계해야 한다.

소개

토스페이먼츠 SDK 팀에서 카나리 배포를 프론트엔드 제품에 적용하면서 개발자들의 배포 경험을 개선한 사례를 소개해요.

비슷한 학습 자료

컨퍼런스 SLASH

토스ㅣSLASH 24 - 토스가 오프라인 결제를 빠르고 안정적으로 혁신하는 방법

컨퍼런스 SLASH

요즘 매장들의 요즘 결제는 어떻게 달라야 할까요? 빠른 배포 속도와 결제 안정성까지 모두 잡은 토스 포스 제작기를 소개합니다. 유건 / 토스플레이스 Frontend Developer 나석주 / 토스플레이스 Frontend Developer 토스 개발자 컨퍼런스 SLASH에 대한 자세한 정보는 👉🏻 https://toss.im/slash-24 컨퍼런스 및 세션에 대한 문의는 👉🏻 slash@toss.im 토스플레이스에 합류하고 싶다면 👉🏻 https://toss.im/career/jobs?company=%ED%86%A0%EC%8A%A4%ED%94%8C%EB%A0%88%EC%9D%B4%EC%8A%A4) #토스 #개발자컨퍼런스 #SLASH #SLASH24 #frontend #frontenddeveloper #POS 유의 사항 *본 발표자료의 저작권은 연사에 있으며, 저작권자의 사전 서면 동의 없이 자료의 일부 또는 전부를 이용하거나 배포할 수 없습니다. *또한 해...

프론트엔드 데스크톱 앱 개발

컨퍼런스 SLASH

토스ㅣSLASH 21 - 결제 시스템의 SDK와 API 디자인

컨퍼런스 SLASH

PG 연동 개발자들에게 쉽고 빠른 가이드 제공을 위해, 20년 동안 유지된 기존 시스템에 추상화 레이어를 만들고 SDK와 API를 설계했던 경험을 공유합니다. 추가로 인터페이스의 일관성과 예측 가능성 그리고 TypeScript와 npm 모듈 지원을 위한 시도들까지, 토스페이먼츠 오픈 API의 첫 여정에 대해 공유합니다. 이홍채 / 토스페이먼츠 Technical Product Owner 이현섭 / 토스페이먼츠 Frontend Developer 박순영 / 토스페이먼츠 Server Developer 토스 개발자 컨퍼런스 SLASH에 대한 자세한 정보는 👉🏻 https://toss.im/slash-21 컨퍼런스 및 세션에 대한 문의는 👉🏻 slash@toss.im *영상 15분 10초 발표 장표 중 'code(2번째)'를 'message'로 정정하오니 참고해주십시오. #토스 #개발자컨퍼런스 #SLASH

프론트엔드 백엔드 개발 도구