토스 프론트엔드 개발자 직무의 역할과 책임

 

토스 프론트엔드 개발자 직무의 역할과 책임

토스(Toss)는 금융의 모든 순간을 간편하게라는 미션을 중심으로 혁신적인 금융 서비스를 제공하는 대한민국의 대표적인 핀테크 기업입니다. 프론트엔드 개발자는 이러한 금융 서비스의 **사용자 경험(UX)**을 직접 설계하고, 크로스 플랫폼 환경에서 일관된 서비스 품질을 유지하는 핵심 역할을 맡고 있습니다.

이 문서에서는 토스 프론트엔드 개발자의 직무에 대해 깊이 있게 설명하고, 특히 빌드, 알파 배포, 라이브 배포 등 기술적 세부 사항까지 포함해 설명드리겠습니다.

---

📌 1. 토스 프론트엔드 개발자의 핵심 역할

토스의 프론트엔드 개발자는 단순히 화면을 구현하는 것이 아닌, 제품의 완성도와 사용자 경험을 주도적으로 책임지는 역할을 수행합니다.

✅ 주요 업무 범위

1. 크로스 플랫폼 환경에서의 UI 개발
   • React Native, WebView를 사용하여 모바일 및 웹에서 동일한 UX 제공.
   • 다양한 디바이스와 해상도에서 일관된 사용자 경험 유지.
   • **디자인 시스템(TDS)**을 활용하여 개발 시간 단축 및 디자인 일관성 유지.
2. 데이터 기반의 의사결정
   • A/B 테스트와 사용자 행동 분석을 통한 기능 개선.
   • Google Analytics, Amplitude 등을 활용한 사용자 데이터 분석.
3. 기술적 품질 보장 및 성능 최적화
   • Tree Shaking, Code Splitting, Lazy Loading과 같은 모던 프론트엔드 기술 적용.
   • 웹 및 앱의 렌더링 속도 개선, 메모리 최적화, 네트워크 요청 최소화.
4. 코드 품질 유지와 협업
   • 모노레포(Monorepo) 기반의 코드베이스 유지.
   • 코드 리뷰 및 CI/CD 자동화 도구를 통한 코드 품질 관리.
   • ESLint, Prettier 등 린팅 도구를 활용한 코드 일관성 보장.

---

📌 2. 토스 프론트엔드 개발 환경과 기술 스택

✅ 사용 기술 스택

• 프론트엔드 언어: JavaScript, TypeScript
• 프레임워크: React, React Native, Next.js
• 패키지 관리: Yarn, npm
• 상태 관리: Redux, Recoil, Zustand
• 스타일링: TDS(Toss Design System), TailwindCSS
• 테스트 도구: Jest, Cypress
• 빌드 도구: Webpack, TurboRepo
• 백엔드 연동: GraphQL, REST API

---

📌 3. 빌드, 알파 배포, 라이브 배포 프로세스 (CI/CD 파이프라인)

토스의 프론트엔드 개발자들은 고도화된 배포 자동화 환경에서 개발을 진행합니다. 이 과정은 크게 빌드 → 알파 배포 → 라이브 배포로 구분됩니다.

---

✅ 빌드(Build)

빌드는 개발한 코드를 최적화 및 번들링하여 배포 가능한 형태로 만드는 과정입니다.

• 사용 도구: Webpack, Babel, SWC
• 주요 작업:
  • JavaScript/TypeScript 코드 번들링 및 최소화.
  • Tree Shaking: 사용되지 않는 코드를 제거.
  • Code Splitting: 필요한 코드만 로딩되도록 분리.
  • CSS 및 이미지 최적화.
• 출력물: dist 폴더에 배포 가능한 정적 파일 생성 (HTML, CSS, JS 번들).

특징:

• TurboRepo 기반의 모노레포 빌드 → 수백 개의 서비스 코드를 병렬로 빌드하여 속도 최적화.
• 자동화된 의존성 관리 → Yarn workspace를 통한 프로젝트 전반의 패키지 관리.

---

✅ 알파 배포(Alpha Deployment)

알파 배포는 내부 테스트 환경에서 제품을 배포하고, 제한된 사용자만 접근 가능한 환경을 의미합니다.

• 알파 배포의 목적:
  • 새로운 기능의 기능 테스트 및 안정성 검증.
  • QA 팀의 사전 검증.
  • 개발 환경에서 발생하는 잠재적 오류 확인.
• 알파 배포 특징:
  • Feature Toggle(기능 플래그): 특정 사용자에게만 기능을 활성화.
  • 일일 수십 회 배포 가능: 배포 자동화 파이프라인 구성.
  • 자동화 테스트: Cypress 및 Jest를 활용한 E2E 테스트 자동화.
• 사용 도구: Vercel, GitLab CI/CD, Docker

---

✅ 라이브 배포(Live Deployment)

라이브 배포는 실제 사용자들에게 서비스를 제공하는 최종 배포 단계입니다.

• 라이브 배포의 원칙:
  • 무중단 배포(Zero Downtime Deployment): 배포 중에도 서비스 중단 없이 운영.
  • 블루-그린 배포 전략: 기존 서비스와 신규 버전을 병렬로 운영 후, 안정성 검증 후 교체.
  • 자동화된 롤백 시스템: 문제 발생 시 자동으로 이전 버전으로 롤백.
• 배포 자동화:
  • 하루 40회 이상 라이브 배포 가능.
  • 완전 자동화된 CI/CD 환경.
  • A/B 테스트와 사용자 반응을 실시간 모니터링.

---

📌 4. 프론트엔드 개발자의 협업 방식

✅ 크로스 기능 팀 구조 (Squad)

토스는 스쿼드(Squad) 단위로 구성된 협업 방식을 운영하고 있습니다.

• 구성원:
  • 프론트엔드 개발자
  • 백엔드 개발자
  • 기획자 (PM)
  • 디자이너
  • 데이터 분석가
• 협업 도구:
  • Slack, Jira, Notion, Figma

스쿼드의 장점:

• 자율적인 의사결정: 팀 내에서 의사결정의 자율성이 높음.
• 빠른 피드백 루프: 기능 개발, 테스트, 배포까지의 주기가 빠름.
• 데이터 기반 개발: 데이터 분석가와 협력하여 A/B 테스트 및 사용자 행동 분석 진행.

---

📌 5. 프론트엔드 개발자로서의 성장 기회

✅ 기술적 성장

• React, Next.js, Yarn 등의 오픈소스 기여.
• Slash Library를 통한 사내 오픈소스 프로젝트 참여.
• FEConf, JSConf 등 개발자 컨퍼런스 발표 참여.
• 사내 기술 블로그 및 사내 기술 컨퍼런스(Slash) 개최.

✅ 리더십 성장

• 주니어 멘토링: 메이트 시스템을 통한 온보딩 지원.
• 코드 리뷰 주도: 코드 품질 개선을 위한 기술적 리더십 발휘.
• 기술적 의사결정 참여: 플랫폼 아키텍처 개선 및 기술 스택 선정에 참여.

---

반응형

📌 6. 토스 프론트엔드 개발자의 역량 요구사항

• React, Next.js, TypeScript 사용 경험
• 크로스 플랫폼 환경에서의 개발 경험 (WebView, React Native)
• 빌드 및 배포 자동화 경험 (CI/CD 경험 필수)
• 성능 최적화 및 코드 품질 개선 경험
• 팀 협업 및 커뮤니케이션 능력
• 데이터 기반 의사결정 역량 (A/B 테스트 경험)

---

📌 결론: 토스 프론트엔드 개발자는 이런 직무입니다

• 크로스 플랫폼 환경에서의 UI 개발 및 유지보수.
• 데이터 기반의 의사결정과 A/B 테스트 진행.
• 고도화된 CI/CD 파이프라인을 통한 빌드, 알파, 라이브 배포 경험.
• 협력 중심의 크로스 기능 팀 스쿼드 방식.
• 기술적 깊이와 개인 성장을 동시에 추구하는 환경.

✅ 최신 기술 환경, 협력 중심의 개발 문화, 데이터 기반 의사결정이 어우러진 최고의 프론트엔드 경험을 제공합니다.

 

2025.01.13 - [IT & Tech 정보] - 토스 최연소 임원 엔지니어링 박서진 헤드 프로필 학력 나이 주요 이력 20대 슈퍼개발자

토스 최연소 임원 엔지니어링 박서진 헤드 프로필 학력 나이 주요 이력 20대 슈퍼개발자