김찬섭

토스 디자이너와 개발자가 사용하는 데우스랠리 구조를 설계·구현하고, TDS 인터랙션 컴포넌트, interaction 패키지 현대화, 토스쇼핑 결제 모션 성능 개선을 맡았습니다.

• 데우스랠리

  작업기록

  기존 데우스에서는 하나의 프레임에 하나의 모션만 담을 수 있어, 디자이너가 단순한 인터랙션도 여러 프레임을 겹쳐 구성해야 했고 개발자는 이를 다시 해석해 제품 코드로 옮겨야 했습니다. 데우스랠리는 토스 디자이너와 개발자가 GUI에서 편집한 모션 데이터를 React/Native 핸드오프 코드로 변환하는 사내 플러그인입니다.

  • -토스 디자이너와 개발자가 함께 사용하는 모션 핸드오프 데이터 인터페이스를 MobX 기반 모델로 설계
  • -GUI에서 만든 모션 데이터를 React/Native 코드로 변환하는 코드젠 로직과 누락/예외 케이스 처리
  • -프리뷰, 타임라인 편집, 스크롤 트리거, 커스텀 easing 입력 등 모션 제작 UI 구현

• TDS 인터랙션 컴포넌트

  작업기록

  토스 디자인 시스템에서 재사용되는 인터랙션 표현을 컴포넌트로 제공하려고 ProgressiveBlur와 EdgeShadow를 구현했습니다. 시각 효과의 완성도와 지원 환경별 안정성을 함께 고려했습니다.

  • -토스 디자인 시스템에서 사용하는 ProgressiveBlur를 0부터 구현하고, WebGL canvas 렌더링과 CSS fallback을 함께 구성
  • -이미지 가장자리와 코너 라운드에 맞춰 흐르는 EdgeShadow를 구현하고, 투명 컨텐츠 조건을 고려해 중앙부 마스킹 처리
  • -TDS 컴포넌트 API와 데우스 코드컴포넌트를 함께 정리해 같은 인터랙션 표현을 제품 코드와 디자인 도구 양쪽에서 재사용하게 구성

• interaction 패키지 현대화

  작업기록

  interaction 패키지의 빌드와 스타일 의존성을 정리해 RSC 환경을 지원하고 서비스 번들 사이즈를 최적화했습니다. Vite 기반 빌드로 전환하고 emotion 의존성을 제거해 패키지의 런타임 의존 범위를 줄였습니다.

  • -여러 서비스와 컴포넌트에서 사용하는 interaction 패키지를 RSC 환경에 맞게 Vite 기반 개발/빌드 환경으로 전환
  • -emotion 의존성을 제거하고 inline style 기반으로 스타일을 정리해 서비스 번들 사이즈 감소

• 토스쇼핑 결제 모션

  작업기록

  토스쇼핑 결제 플로우에서 사용하는 `밀어서 결제` 모션을 개발하고, Revert 이후 재구현까지 담당했습니다. 실제 사용자 결제 흐름에서 끊김 없이 동작하도록 성능 측정과 개선을 함께 진행했습니다.

  • -토스쇼핑 결제 플로우의 `밀어서 결제` 모션을 개발하고 Revert 이후 재구현까지 담당
  • -6x CPU throttle 환경에서 30회 반복 측정해 클릭 직후 peak frame freeze p50을 32% 줄이고 300ms+ 멈춤 발생을 0건으로 낮춤

마케팅 담당자의 반복적인 데이터 수집 업무를 대체하려고 크롬 익스텐션 기반 데이터 크롤러를 개발했습니다.

• 마케팅 담당자가 수기로 반복하던 데이터 수집 흐름을 자동화해 크롤링 시간을 90% 감소시켰습니다.
• 비동기 pagination으로 최대 300만 건 요청을 안정적으로 처리했습니다.
• showDirectoryPicker API를 활용해 대용량 다운로드를 브라우저 환경에서 안정적으로 내려받게 했습니다.

소프트웨어 마에스트로 팀 프로젝트에서 프론트엔드 개발과 팀 리드를 맡아, 기획·고객 인터뷰·마케팅·개발을 연결하며 웨딩 준비 사용자의 문제를 검증했습니다.

• 팀 프로젝트의 MVP 프로토타입을 빠르게 구축한 뒤 반복 개선해 약 6주 만에 500명 가입자를 확보했습니다.
• S3, CloudFront, Lambda@Edge 기반 FE 배포 인프라를 직접 구성해 프론트엔드 운영 환경을 갖췄습니다.
• 이미지 리사이징과 progressive 렌더링 최적화로 LCP를 50% 감소시키고 AWS 예상비용을 20% 절감했습니다.
• 웨딩홀 탐색 경험에 맞춰 무한스크롤 목록을 구현했습니다.

개인 프로젝트로, 반복된 투자 실패를 줄이려고 자동매매 전략을 직접 검증하고 실행하는 프로그램을 만들었습니다.

• 유명 알고리즘 전략 기반 자동매매 로직을 구현해 개인 투자 의사결정을 자동화하고, 일 최대 30% 수익을 기록했습니다.
• Threading으로 최대 3개 종목 동시 감시를 지원해 실시간 대응 범위를 넓혔습니다.
• Upbit API와 Pandas 기반 백테스팅으로 전략 상수를 조율하고 tkinter GUI까지 직접 구현했습니다.