진행했던 기술적 기여

하나의 제품에 속하지 않는 기술적 개선들을 모았어요.

성능 최적화

• 이미지 최적화 & 썸네일 시스템
  • 유려한 로딩 경험을 위한 점진적 이미지 최적화를 진행했어요.
  • sizes, srcSet 등을 통해 뷰포트별. 컴포넌트에 최적화된 이미지 크기를 가져왔어요.
  • webp, apng 등을 적절히 활용해 이미지의 용량을 개선했어요.
• 청크 프리로드
  • 큰 단위의 단일 청크를 화면 / 피쳐 별로 세분화해서 분리했어요.
  • 청크별 관계도를 그래프로 구현하고 다음 액션에 필요한 청크를 프리로드 했어요. 개발자가 신경쓰지 않아도 되도록 심리스하게 설계했어요.
  • 네이티브 앱 수준의 화면 전환 경험을 구현했어요.
• Stackflow(사내 웹뷰 라우팅 Framework) Future API 적용
  • loader pattern 구현으로 서버 api 리소스 요청과 애플리케이션 javascript 리소스 요청 병렬화
  • 파괴적 변화가 큰 피처임에도 점진적 작업과 꼼꼼한 QA로 안정적 배포
  • DataDog RUM 기준으로 p75 수치 1초 이상 단축했어요
• GraphQL Persisted Query 도입
  • GraphQL은 리소스에 대한 명세도 쿼리에 포함되기에 명세가 클 경우 네트워크 대역폭이 선형적으로 증가해요. 따라서 클라이언트<->서버간 요청 별 명세에 대한 부분을 별도 서버(스토리지)에 캐싱하고 활용했어요.
  • DataDog RUM 기준으로 p75 수치 1초 이상 단축했어요
• 피드 UX/성능 개선
  • 당근 중고차는 스크린 자체의 Iphone 백스와이프, 탭 요소간의 Swipe, 상하 Pull To Refresh, 상단 클릭 시 스크롤 등 다양한 제스처가 서로 충돌해 오동작하거나 일부 옵션이 꺼져있었어요. 제스쳐가 서로 충돌되지 않게 개선하고 Windoing을 도입해 피드 스크롤 성능을 극단적으로 개선했어요.
  • 정성적으로 갤럭시A31 기준으로 네이티브와 구분할 수 없을 정도로 유려하게 보이는 수준으로 메모리/성능을 개선했어요.

개발 환경 & DX 개선

• UI 컴포넌트 시스템 구축
  • 모바일 디자인시스템 교체 시기로 중간중간 누락된 다수 컴포넌트를 자체 구현해 재사용성 확보
  • PC 디자인 시스템 퇴사로 인해 팀간 협업을 넘어 관리 권한을 가져와 메인테이너로써 기여
  • 디자이너-엔지니어 협업 효율화를 위한 피그마-코드 컴포넌트 설계 고민
• Tanstack Router 도입 및 POC
  • 타입 안전한 라우팅 시스템에 깊은 인상을 받아 POC 이후 개발했어요.
  • 파일 기반 라우팅으로 개발 생산성 향상
    • 해당 사용성에 영감을 받아 사내 웹뷰 프레임웍에 파일 기반 라우팅 & 코드젠을 개발해 기여했어요.
• E2E 테스트 셋업
  • 판매자 글쓰기/진단 예약에 대한 e2e 프로세스 구축
  • 모든 페이지에 대한 Visual Regression Test 프로세스 구축
  • PR별 자동 헬스체크 가능하도록 CI 연동
• 데이터 트래킹 고도화
  • 정리되지 않던 이벤트들을 빅쿼리로 추출 후 엑셀에 문서로 정리
  • 문서 → 코드 자동화로 이벤트 데이터 정적 검사 가능
  • 협업 효율성 대폭 개선
• 채팅 웹뷰 개발환경 개선
  • 메인테이닝 미비로 몇년째 outdated된 환경 주도적 개선하여 타팀 아웃풋 향상에 기여
• 중고차 전용 채팅 웹뷰 분리
  • 기존: 모든 서비스 웹뷰가 하나의 레포 공유 → 배포 부담 증가
  • 중고차만의 기술 맥락 가져가며 배포 안정성/독립성 확보
• QA / Release Process 개선
  • Preview 환경 고도화
    • GitHub deploy 라벨만 붙이면 알파 환경 자동 배포
  • 멀티 QA 환경 구축
    • 개발자 증가에 따른 단일 alpha 환경 부족 문제 해결
    • 클라이언트/서버 각각 preview 스킴 자유롭게 조합 가능
    • 모노레포 공통 패키지로 자동 주입되도록 로직 일원화
• React Compiler 19 도입
  • 주요 코드 변경 및 QA 전담
  • 잔버그로 알파 환경 테스트 기간 길어졌으나 꼼꼼한 QA로 안정적 프로덕션 배포
  • useCallback, useMemo 등 명시적 메모이제이션 불필요해져 팀 생산성 향상
• Recoil → Jotai 마이그레이션
  • Recoil 메인테이닝 중단 및 잔버그 이슈 대응하여 동일한 Atomic Pattern을 유지하기 위해 수정
• emotion → Tailwind 마이그레이션
  • emotion의 런타임 오버헤드, 번들 사이즈 이슈 해결
  • utility-first 접근으로 스타일 일관성 확보
  • variant 피쳐로 컴포넌트 스타일 변형 생산성 개선
• 모노레포 설정 & 최적화
  • 프로젝트 다수화에 따른 모노레포 필요성 대응
  • 모노레포 통합 후 공통화되지 않은 코드 대규모 정리
  • turbo를 기반으로 target project를 더 쉽게 정할 수 있는 shotcut 개발
  • 릴레이 멀티프로젝트 지원
    • 문서에서조차 working하는 예제가 없어 discord, open source 등 다양한 매체 탐구
    • 모노레포 내 각 프로젝트의 공통 데이터 로직 중앙집중화
    • Fragment 기반 관리로 데이터 일관성 확보
  • TypeScript 속도 개선
    • 거대 모노레포 내 타입체킹 속도 측정 및 개선
  • HMR 타이밍 충돌 문제 해결
    • 모노레포 환경에서 발생하는 HMR 부작용 효과적 측정 및 해결
• 오버레이 정합성 개선
  • 서비스 내 흩어진 다이얼로그 검수
  • 안드로이드 뒤로가기 경험 통일
• 확장에 따른 중복 코드 효율적 제거
  • 타입 기반 정확한 피드백과 꼼꼼한 QA로 안정적 릴리즈
  • ts-morph, knip 등 기계적 코드변환을 이용해서 코드의 결정적 신뢰성을 확보했어요.
  • 프로젝트 전반의 미사용 코드 레거시 안정적 제거
  • 정기적 기술부채 해소 프로세스 확립

메타프로그래밍 & 자동화

• 스택플로우 파일 기반 코드젠 구현
  • 24년 4분기에만 50여 개 페이지를 만들고 제거했어요. 하나를 만들 때 마다 8가지 반복작업이 필요하며 실수할 여지도 높았어요.
  • 코드 패턴을 린트 등으로 강제하는데 한계가 있어 개발자별 파편화가 발생했어요.
  • tanstack-router 영감 받아 파일 기반 자동 연결 메타프로그래밍 구현
  • 번들러 연동으로 사용자 입장에선 투명하게 동작
  • 타입 체킹 완벽 지원으로 견고한 프로그램 구조
  • 사내 코어팀에 제품팀 니즈 정확히 전달하며 스택플로우 v2 개발에 기여했어요.
• 약관 생성기 개발
  • 경매 복잡성에 따른 개인정보 취급 변경으로 약관 버저닝 필요
  • Sanity 정적 컨텐츠 생성기 도입
  • 약관 Key와 1:1 매칭되는 Rule Based 동작
  • 운영팀 직접 컨텐츠 추가/제거 가능하여 운영 효율화

디자인 시스템

• Seed Design (Mobile)
  • 사내 No.1 얼리어답터로 v2로 대폭 변경된 디자인 시스템 피드백
  • 인터페이스와 성능, 제품단의 고민 전달
  • 이전 구현체와 동작 맞추기, 크고 작은 버그 수정
  • 다양한 구현체 동시 사용 하는 케이스에 대해 네이티브 수준 UX/UI 제공 노력
  • 타팀이 중고차팀 밟은 이슈 피해갈 수 있도록 기여
• Carotene (PC)
  • 이전 담당자 부재로 프로젝트 메인테이닝
  • Seed Design 업데이트에 맞춰 동일 파운데이션 사용하도록 수정

인증 & 플랫폼

• PC 웹 로그인 베타테스터
  • 사내 인증팀 PC 로그인 기능 첫 베타테스터
  • 버그 수정 및 모니터링으로 서비스 안정화 기여
  • 타팀이 신뢰 가지고 유려하게 적용할 수 있도록 품질 확보