Work Experience
비바리퍼블리카 (Toss)
Frontend Engineer Assistant · Design Platform Team (Mobile) · 2025.09 — 2026.03
- -React · React Native 환경에서 동작하는 디자인시스템 라이브러리 개발·유지보수 참여 (v2→v3, v3→v4 배포 및 마이그레이션 참여)
- -디자인 에디터에서 사용되는 코드 컴포넌트와 코드 제너레이팅 툴 개발 및 유지보수
- -문의 채널 응대 — 버그 리포트·스펙 제안·마이그레이션 문의 등 100+ 건 대응
데우스 코드 컴포넌트 · 코드 제너레이터 구조 개선
CONTEXT
- -데우스(사내 디자인 에디터)의 코드 컴포넌트는 화면 렌더링과 코드 생성(코드젠)을 함께 담당하는 진입점
- -변환 로직이 렌더링용·코드젠용으로 이중 존재해 화면과 생성 코드가 어긋나는 경우가 자주 발생
- -mobile · react-native와 각 legacy까지 4개 플랫폼이 같은 데이터를 서로 다른 형태로 코드젠해야 해, 플랫폼 분기가 얽혀 유지보수가 어려움
ACTION
- -플랫폼 분기 로직을 빌더 패턴으로 재설계해, 플랫폼별 차이를 override로 분리하고 신규 플랫폼은 override 추가만으로 확장 가능하도록 개선
- -props·codegen·schema·test를 컴포넌트 단위로 통합(colocate)해 코드 컴포넌트와 코드 생성 로직의 응집도 향상
- -디자인 데이터 타입 ↔ JSON Schema 동기화 검증과 코드 생성 결과 스냅샷 테스트를 구축해 코드 생성 정확성을 자동 검증
RESULT
- -화면과 생성 코드가 동일 로직을 공유하게 되어 불일치 문의를 구조적으로 제거
- -테스트 부재 상태에서 코드 생성 정확성을 자동 검증하는 체계를 마련
레거시 패키지 자동 마이그레이션 CLI 구축
CONTEXT
- -유지보수가 중단된 tds-web 패키지가 다수 프로젝트에서 여전히 사용 중
- -일부 컴포넌트는 복잡한 DOM 구조와 API 변경으로 직접 마이그레이션이 어려운 상황
ACTION
- -jscodeshift(AST 기반 코드 변환) CLI로 최신 패키지에 호환되도록 코드 자동 변환
- -컴포넌트마다 반복되던 변환 로직(import 경로 변경 · prop 매핑 · compound→flat 구조 변경 등)을 재사용 가능한 유틸로 묶어
migration-utils패키지로 분리
RESULT
- -프로젝트별 수작업 마이그레이션을 CLI 한 번으로 자동화, 마이그레이션 비용 절감
- -마이그레이션 코드 가독성 및 유연성 증대
문서화 체계 구축 및 개선
ACTION
- -prop table이 실구현체와 자동 동기화되도록 문서 플랫폼 이전(nextra → fumadocs) 제안 및 진행
- -TDS-RN 라이브러리의 사용 패턴과 컴포넌트 활용 방법을 예제 중심으로 문서화
Projects
confeti
2025.01 — 2025.04 · React · TypeScript · Turborepo · Vanilla Extract · Storybook
공연 정보를 바탕으로 나만의 타임테이블을 만드는 웹서비스
CONTEXT
- -서비스 규모가 커지며 첫 화면 로딩 지연, CI 빌드 시간 누적, 아이콘·컴포넌트 관리 비효율이 동시에 발생
- -번들 분석과 Lighthouse를 근거로 성능과 빌드 환경을 함께 개선
ACTION
이미지 성능 최적화
- -홈 캐러셀 병목을 개선하기 위해 이미지 CDN(Imgix)을 도입하고 WebP 변환·리사이징을 적용
개발 인프라 구축
- -Turborepo 기반 모노레포 구조를 설계
- -pnpm Catalog로 의존성 버전을 중앙 관리
- -GitHub Actions matrix/cache를 적용해 CI 빌드 효율 개선
공통 UI 개발 및 유지보수
- -중복 관리가 발생하던 아이콘을 SVG sprite로 통합
- -스토리북 도입 및 크로마틱 배포 자동화, Compound 기반 컴포넌트 재설계
RESULT
- -LCP 6.6s → 1.5s로 약 77% 감소, Lighthouse 성능 점수 56 → 96점
- -CI 효율화로 반복 실행 비용을 줄이고 검사 구조를 단순화
- -중복 관리 해소로 인해 아이콘 관련 코드량 약 98.5% 절감
Lettie
2025 · Next.js · TypeScript · Tanstack Query · Vanilla Extract · Playwright
타임캡슐 웹 서비스
CONTEXT
- -파일 업로드, 폼 상태 관리, 라우팅, 캐시 흐름을 한 서비스 안에서 일관되게 정리할 필요가 있었음
ACTION
공통 UI 설계
- -breakpoint / typography 토큰을 중앙화해 responsive 규칙을 일관되게 관리
- -Matter.js 기반 물리 인터랙션을 재사용 가능한 Physics 컴포넌트로 추상화, 반응형 화면 크기에 맞춰 물리엔진을 재구성하도록 설계
Query State 관리 개선
- -편지·캡슐 생성 후 관련 목록 반영 흐름을 query·mutation key factory로 통합해 타입 안전하게 관리
파일 업로드 구조
- -presigned URL 기반으로 클라이언트가 S3에 직접 업로드하도록 개선
- -
useQueries로 편지별 이미지 presigned URL을 병렬 조회해 이미지 로딩 흐름을 선언적으로 관리
모달 라우팅 개선
- -모달이 URL과 독립 동작해 새로고침·뒤로가기 시 상태가 깨지던 것을, App Router Intercepting · Parallel Route를 적용하여 URL 기반 관리로 전환
RESULT
- -공통 UI와 상태 흐름을 정리해 재사용성과 유지보수성을 높임
- -업로드와 모달, 인증 복귀 흐름을 분리해 사용자 경험을 안정화
모립 (morib)
2024.07 — 2025.01 · React · TypeScript · Framer Motion · Tailwind · Electron
Saas 기반 생산성 웹 애플리케이션
CONTEXT
- -React SPA 특성상 사용하지 않는 의존성까지 초기 번들에 묶여 첫 화면 렌더가 지연
- -친구의 타이머 상태를 실시간에 가깝게 공유해야 했지만, 빠른 릴리즈와 서버 구현 부담을 함께 고려해야 했음
ACTION
코드 스플리팅 · preloading
- -Login 전용 Lottie와 카테고리 추가 시에만 쓰는 Calendar를
React.lazy·Suspense로 사용 시점에만 로드 - -lazy만 적용 시 생기는 클릭 직후 빈 시간을,
onMouseEnter시점에 해당 청크를 미리 불러오는 preloading으로 해소
친구 타이머 상태 동기화
- -실시간성 보장을 위해 SSE도 검토했으나, 서버의 연결·트랜잭션 관리 부담과 빠른 릴리즈 필요성을 고려해 polling 기반 동기화로 구현
- -TanStack Query의
refetchInterval로 친구 타이머 상태를 주기적으로 갱신하고, 서버에서 받은elapsedTime과timerStatus를 기준으로 화면의 타이머 표시를 이어감
RESULT
- -초기 로딩 속도와 체감 지연을 줄임
- -친구의 집중 상태를 실시간에 가깝게 공유할 수 있는 타이머 경험 구현