Resume & Portfolio

👨🏻‍💻 Yohan Kim

ddalpange@gmail.com

• 분야를 구분하지 않고 “일이 되게 하는 것”에 초점을 맞춥니다.
• 문제 정의, UX 개선, 데이터 분석, 유저 리서치, 필요하다면 영업까지 제품을 만드는 일이라면 영역을 가리지 않습니다.
• 제품 개발뿐 아니라, 제품이 지속적으로 확장될 수 있도록 복잡성을 줄이고 플랫폼을 개선하는 일에도 강점을 가지고 있습니다.
• 피드백에 대해 열려있습니다. 세심한 피드백을 주고 받기 위해 주의를 기울입니다.
• 회복 탄력성이 강하고 가설 검증 기반의 디버깅 능력이 우수합니다.
• 필요하다면 기둥을 2cm 옮기는 일들을 잘 처리합니다.

원본 링크

📌 Work Experience

당근마켓 (2023.04 ~ 현재)

2026.02 - 현재 | 커뮤니티실 아파트 단지

아파트 오픈 게시판 개발

기존 당근아파트는 폐쇄형으로써 아파트에 가입한 사람만 컨텐츠를 소비하고 쓸 수 있는 구조에요. 따라서 일반 유저들은 사용할 수 없기에 유입을 확장해도 커뮤니티의 근간인 콘텐츠 발행 - 소모 - 인입의 선순환 싸이클을 돌릴 수 없다는 한계가 있어요. 그에 따라 입주민이 아니어도 입주민에게 질문하거나, 아파트를 대상으로 글을 작성할 수 있는 오픈 게시판을 설계하고 구현했어요.

개발환경 개선

SSR ↔ CSR의 차이에서 오는 에러와 업데이트 한지 오래된 개발 환경 & 빌드파이프라인에서 오는 문제들이 섞여 개발환경에서 실제로 생산성과 결과물에 영향을 주는 문제들이 발생하고 있었어요.

• vite 사용 중 다수 모듈 사용으로 인해 개발환경에서 2000개 이상의 js 요청을 지연로딩으로 해결
• pnpm 전환으로 CI, 로컬의 install 속도 대폭 개선 및 유령 의존성 제거
• 빌드 툴링, 컴파일러, 사내 프레임워크 메이저 업데이트 및 CI 캐싱 & 속도 개선
• React Compiler, Storybook, VRT 회귀테스트 도입
• 피드 목록이 연속으로 쌓이는 UX여서 윈도잉, 렌더링 최적화로 웹뷰 메모리가 200kb 언더로 관리되도록 개선

에이전트 코딩 환경 개선

에이전트 코딩에 있어 구현을 전담하고 멱등하고 결정적인 결과물을 빠르게 얻으며 결과물에 대해 쉽고 독립적이게 검증할 수 있도록 개선했어요.

• iOS, App Scheme 관리 툴링을 개발하여 웹뷰 QA를 에이전틱하게 손쉽게 할 수 있도록 수정
• tsgo, oxfmt, oxlint 등 rust, go 기반의 네이티브 툴링을 통해 에이전트가 코드 수정시 피드백 사이클을 빠르게 직접 돌 수 있도록 개선
• 이미 대부분 Atomic Styling 기반으로 개발되고 있기에 더 적합간 기술스택으로 Vanila Extract를 tailwind로 전환했어요.
  • 에이전트를 활용해 스타일 회귀를 유닛 테스트, e2e 테스트, iOS Simulator를 활용한 A-A 테스트로 코드의 동작 일치를 확인했고 ts-morph, 단계별 인터페이스 수정으로 아웃풋에 대해 결정적인 신뢰를 할 수 있었어요. 99%의 작업을 AI가 진행했고 3일이 채 걸리지 않았어요. AI에게 위임하고 빠른 피드백을 얻고 결정성을 확보한 유효한 사례였어요.
• 에이전트 병렬 개발 환경에서 손쉬운 QA를 위해 기기에 등록된 사내망 고정 ip에 도메인을 할당받고 Portless를 활용해 워크트리별로 각각의 영속적이고 독립된 도메인으로 띄울 수 있게끔 셋업했어요.

에러 모니터링 고도화

모든 에러가 같은 위계로 설정되어 노이즈가 심하고 그 밖에도 여러가지 문제가 존재했어요.

• 스택 트레이스가 ts로 보일 수 있도록 datadog, sentry, loki 등에 release 업로드 정책 최신화 및 소스맵 연동을 추가
• 에러별 위계 분리로 실제 웹뷰 크래시를 분리해서 볼 수 있도록 개선
• 실제로 문제가 되는 이슈들을 리스트업해 주기적으로 해소
• 유효한 모니터링이 될 수 있도록 피드백 수집 후 개선

2023.04 - 2026.02 | 버티컬 사업실 중고차

5~15명 규모의 버티컬 사업팀에서 중고차 시장의 1등을 지향하며, 직거래 기반 서비스의 1→10 성장을 이끌었습니다. “거래가 늘려면 고객의 거래비용(노력)이 줄어야 한다”는 가설 아래, 빠르고 공격적인 실험 문화 속에서 편의성/신뢰를 만드는 제품을 반복적으로 만들었습니다.

대표적으로 전문가 기반 가격 추천, 차량 감정(검수) 실험, 그리고 딜러·진단·클레임·탁송까지 포함한 복잡도 높은 거래 플로우를 설계·구현했습니다. 그 결과(지표는 보안상 근사치) MAU 500만+, 월 게시글 1만5천+, 월 거래완료 1만+ 규모로 성장에 기여했고, 나아가 완전 비대면 C2B 내차팔기를 0→1로 구현해 1년 만에 거래전환율 20%+, 월 경매 1만+, 딜러 4천+, 1차 목표 BEP 달성을 만들었습니다.

고객과 시장에 관심을 가지고 제품을 만드는 메이커형 엔지니어입니다.

진단 도메인 설계 구현 및 운영

기존 직거래 서비스 운영 중에 낮은 평균 거래 가격 등 구매자와 판매자간의 정보 비대칭 등 다양한 문제와 현상을 발견했어요. 수익화 또한 고려하게 됨으로써 진단을 솔루션으로 정했고 1차적으로 관련 정비 업체와의 협업을 통해 사전 진단 실험이 워킹함을 증명했어요. 다음 스텝으로 당근 내부에 진단 내재화를 통해 차량 정보를 수집하고 시장의 이해도를 높이며 도메인을 확장할 수 있는 무기를 만들었어요.

진단 프로세스 구축

• 진단 서비스는 단순한 온라인 피처가 아니라 진단사와 고객간의 시간조율, 168여가지가 넘는 항목과 종류가 다른 다양한 인풋들을 지원하는 최적의 UX를 통해 40분 안의 객관적인 차량의 상태를 수집, 진단사의 정산과 대조 그리고 거래 성사율과 비례한 동기부여를 위한 베네핏 시스템, 진단사의 진단 결과까지 검수 및 피드백 할 수 있어야하는 대작업이었어요.
• 진단사 가입 / 진단 가이드 / 차량 데이터 기반 문진표 / 예약 관리 / 진단 체크리스트 등 당근 내의 하나의 버티컬 서비스의 사이즈를 넘는 양을 모두 전담해 만들었어요.
• 168여 가지가 넘는 항목 / 타입들을 코드 스키마로 만든 이후 타이핑을 역연산하여 테스트 개념으로 타입 컴파일 타임에 안정성 확보했어요.
• 대표적으로 진단항목 수정 같은 잦은 변화 속에서 주도적 협업으로 커뮤니케이션 갭을 최소화 했어요.

진단 비즈니스 실험

• 대신봐주기 / 사전 진단 등 구매자, 판매자 사이의 진단 니즈를 찾아 수익화와 정보 비대칭을 해결하기 위한 실험을 진행했어요.
• 진단 예약 퍼널을 1-pager로 만드는 등 파격적인 퍼널 개선 실험을 다수 진행했어요.
• 전문가간 거래가 아닌 직거래에서도 보증이 워킹하는지에 대한 실험을 다수 진행했어요.

진단 품질 개선

• 진단사 과진단 해결
  • 진단사가 진단한 정보가 실구매자(딜러)가 보기에 다르면 진단사가 일부 책임을 보상하는 클레임이 진행돼요.
  • 당근 진단은 타사 대비 진단에 대한 퀄리티가 매우 높아, 진단사들이 지레 겁먹어 단순 미세누유도 심각한 문제로 고지하는 과진단 현상이 발견됐어요.
  • 타사도 동일하게 겪은 레퍼런스를 통해 현상-솔루션을 분석해 정리했어요.
  • 진단에서 수집하는 정보 단위를 조정하고, 딜러에게 고지되는 위계를 수정해 적절한 정보로 전달되게끔 중개했어요.
• 진단사 수정요청 자동화
  • 진단사의 역량 부족으로 진단을 완료한 후에도 밴드/문자/전화 등 다양한 채널로 수정을 요청했어요. → 이는 일일이 사람이 보아야하고 경매가 진행됐는지에 따라 높은 오퍼레이션 코스트를 소모해요.
  • Json Diff를 통해 적절한 정보를 보정해 변화된 정보만 노출하고 시스템화해 오퍼레이션 코스트를 줄였어요.

진단 시스템 기술적 고도화

• 진단리포트의 Graphql Schema가 지나치게 복잡해 Record로 개선
  • 168여 개 항목의 잦은 변경으로 스키마의 변화에 따라 애플리케이션 타입이 매번 깨졌어요.
    • 본래 설계에 의도에 맞고, 변화에 따른 결과를 정확하게 예상할 수 있었지만 변화가 너무 잦았어요.
    • GraphQL schema에서는 Object로 느슨하게 관리하도록 수정했어요.
    • 별도 type + validation 라이브러리를 모노레포에서 관리하고 퍼블리싱하며 서버에서도 함께 사용했어요.
    • 프론트엔드-백엔드 로직 통일로 스키마 불일치에 따른 고통을 해소하고, 버전별로 진단 리포트를 관리할 수 있었어요.
• 진단사 웹뷰 분리
  • 앱이 커짐에 따라서 컴파일 속도, 복잡도 등 다양한 문제들이 발견됐어요.
    • 독립 프로젝트로 분리하여 컴파일 시간을 단축하고 배포 안정성 및 독립성을 확보했어요.
    • Typescript 성능 측정을 통해 오랜 시간이 걸리는 구문을 짚어내고 캐싱하도록 수정했어요.
• 릴레이 Fragment 기반으로 비즈니스 로직 집중 관리
  • 진단 정보는 매우 민감한 정보로 딜러 / 진단사 / 판구매자 들 중 누구 하나에게라도 잘못 노출되거나 노출하지 않으면 클레임으로 이어지고 오퍼레이션과 금전적 비용을 소모하게 돼요.
  • 릴레이(Graphql)에서 모노레포 설정을 통해 공통 데이터의 프레그먼트, 패칭 로직을 중앙집중화했어요.
    • 그 어디서도 워킹하는 예시도 없고 사례도 없었지만 Relay Discord, Github를 디버깅하고 수많은 기술적 현상 / 솔루션을 시도하며 성공했어요.
  • 다수 프로젝트에서 발생할 수 있는 데이터 위계 불일치 문제를 해소하고 클레임 여지를 제거했어요.

C2B (개인-딜러 경매)

C2C 만으로는 시장내 스케일업이 느리고 거래 과정에서 플랫폼이 담보하는 것이 없기에 주도권을 가질 수 없어요. 그 때문에 시장의 정보비대칭을 근본적으로 해결하기에 명확한 한계가 존재했어요. 또한 시장 구조상 중고차 사업은 글로벌 시장과 국내 시장 둘 다 자체 상품 판매자가 승리하고 있는 상황이었으며 당근 또한 이 흐름에 올라타고 차량 유통 공급망을 만드는게 최우선 과제라고 생각해 기존 C2C 직거래에서 더 나아가 개인-딜러간 거래 즉 C2B 시장을 도전했어요.

C2B 서비스 확장으로 중고차 팀은 딜러, 진단사, 탁송, 결제, 정산 등의 세부 도메인 에셋을 품으며 비즈니스적 복잡도와 기술적 복잡도도 J-Curve로 증가하게 돼요. 10명 남짓한 소수의 인원으로 헤이딜러와 맞먹는 고관여 비즈니스를 당근에서 최초로 시도하게 됐어요.

피처개발만 해도 불가능해보일 정도로 챌린징한 일정 속에서도 틈틈이 시간날 때 열심히 소매넣기로 기술적인 개선을 멈추지 않았고 제품 개발 일정과 퀄리티 또한 양보하지 않았어요. 돌뿌리를 넘어가지 않았고 필요하다면 기둥을 뽑아 옮기는 개혁을 단행했어요. 새로운 FE가 오더라도, 관리하는 프로젝트가 늘어나더라도, 제품의 세계관이 더 커지더라도 개발 복잡도와 생산성을 선형적으로 관리할 수 있다는 것을 엔지니어 역량으로 증명했어요.

안심경매 서비스 설명

• 딜러 비대면 + 무감가(온라인 입찰가 그대로)로 거래하는 서비스에요.

• 중고차 시장의 가격불신 - 거래과정의 어려움을 적극 해결해요.

• 판매자는 차량 판매에 필요한 서류준비, 가격 합의 등의 힘든 과정 대신 몇번의 클릭만으로 차량을 최고가에 판매해요.

판매자 FLOW

• 판매자가 원하는 위치로 평가사가 방문, 차량을 점검하고 경매에 등록해줘요.
• 48시간 동안 온라인 경매가 진행되며 가격이 마음에 들면 판매하면 돼요.
• 딜러 대면 없어요. 서류를 준비해서 차량에 두면 탁송이 시작되고 차량대금이 입금돼요.

딜러 FLOW

• 딜러는 등록된 차량에 입찰을 진행하며, 입찰가 그대로만 거래할 수 있어요.
• 딜러와 고객은 만나지 않고 탁송으로 거래가 진행돼요.
• 만약 받은 차량에 문제가 있으면 당근마켓에 이의제기하여 비용 보상을 받을 수 있어요.
• 
• 

바로경매 서비스 설명

• 판매자가 직접 글 작성 후 경매에 등록, 입찰 딜러와 만나서 거래하는 서비스에요.

• 거래내역을 전수 모니터링하여 딜러의 정보비대칭을 제한해요.

판매자 FLOW

• 판매자가 직접 게시글을 등록하면 1시간 내로 경매가 시작돼요.
• 48시간 동안 온라인 경매가 진행되며, 제안가격+평판 정보를 보고 딜러를 선택해요.
• 딜러와 대면하여 가격을 조율하고 명의이전 등 필수 절차를 안내 받아 거래를 마무리해요.

딜러 FLOW

• 딜러는 등록된 차량에 입찰을 진행하며, 입찰가에서 조율하여 거래할 수 있어요.
• 딜러는 고객을 만나 차량을 점검하고 최종 가격을 제안해요.
• 딜러는 거래완료 후 최종 입찰가와 달라진 부분에 대해 반드시 소명해야해요. 만약, 당근 심사를 통과하지 못하면 고객에게 금액을 환급해줘야 해요.

중고차 경매 서비스 구축

• 중고차 경매 서비스를 전체 구현했어요.
  • 상태-페이지 격리 아키텍처 설계
    • 진단 / 경매 / 매입 / 정산 구조로 이루어지는 4가지 병렬 상태(아래 수많은 서브상태)를 view 단위로 세부적으로 쪼개 직렬로 만들어 관리했어요.
    • 타입스크립트를 활용해 강타입 컴파일 구조로 상태 매칭 누락을 사전 차단하며 optional 여부까지 strict하게 체크했어요.
    • 한눈에 파악하기에는 거대하지만 사이드 이펙트 없이 유지보수 용이한 구조로 후속 개발자의 온보딩 비용 절감됐어요.
  • 웹뷰, 딜러용 PC웹, 진단사 검수용 PC웹, 채팅용 웹뷰 등 확장되는 다수의 제품을 효율적으로 통합 및 관리했어요.
• 딜러웹 반응형 지원
  • 오프라인 영업 중 PC 없이 모바일만 사용하는 딜러들을 다수 발견했어요.
  • 일이주간의 작업으로 신규로 모바일 웹뷰 한벌 개발하는 대신 기존 PC 딜러웹을 반응형으로 전환하며, 기존 웹뷰 인터페이스에 맞추어 새로 출시했어요.
• 판매서류 최소화
  • 차량 매입에 있어 구매자에게 필요한 사업자 유형/사업용 여부/딜러 유형에 따라 14가지 정도 되는 복잡한 서류셋 로직 분기를 정리하고 자동화했어요.
• 중고차단지 오프라인 영업
  • 라이브 입찰 수 증가를 위해 수원 등 중고차 단지에 딜러들 상대로 오프라인 영업을 진행했어요.

C2C (개인-개인 직거래)

당근 중고차는 국내 중고차 서비스 직거래 1위 플레이어로써 당근의 비전에 가장 큰 기여를 할 수 있는 제품이에요. 사용자간의 직거래에 있어 신뢰를 담보할 수 있도록 안심직거래 에스크로 등의 실험과 여러가지 진단 정보를 활용한 실험을 진행했어요. 또한 높은 매물 수 증가를 통해 매물 검색 비용의 감소와 네트워킹 효과를 기대하고 설계했어요.

판매자 차량 등록 퍼널 개선

• 글쓰기 사진 업로드 UX 개선
  • 매물정보에 가장 중요한건 사진이란 것을 여러가지 실험과 정량적 데이터로 증명했어요.
  • 차량 사진을 규격에 맞게 많이 업로드할 수 있는 UX를 고민하고 실험했어요.
• 글쓰기 리팩토링
  • 차량 등록 퍼널은 커머스와 비슷하게 전형적인 퍼널깎기라고 볼 수 있어요.
    • 글쓰기 비즈니스 로직이 UI/UX에 종속되어 복잡해지는 문제를 공통 UI 분리 및 각 컴포넌트의 애니메이션, 조건부 노출 동작 추상화를 통해 해결했어요.
  • 여러가지 다른 실험을 통한 글쓰기에 가져다쓸 수 있도록 로직을 모듈화 해서 이후 추가 실험에 있어 유사한 글쓰기 퍼널 빠르게 확장 가능한 구조를 확보했어요.
• zod 기반 유효성 검증 선언적 관리
  • 복잡한 폼 유효성 체크 로직을 스키마 기반으로 선언적으로 분리했어요.
  • 런타임 타입 검증과 스키마로 정적 타입 추론을 동시 확보해 오차를 제거했어요.

구매자 퍼널 개선

• 검색 개선
  • 검색어를 입력하지 않을 때는 제조사-모델로 이어지는 디렉토리 기반 검색이 진행되고, 검색어를 입력할 시에는 세부모델을 바로 짚는 자연어 검색이 한 페이지에 구현되어 있어 복잡성이 매우 높았어요.
  • 적절하게 디렉토리 검색과 키워드 검색의 페이지를 분리하고 유저 경험에는 차이가 없도록 조정했어요.
  • 자체구현한 엘라스틱서치를 사용하고 있어 통합 검색 플랫폼에 대한 이전 처리를 진행하며 여러가지 검색 필터를 고도화 했어요.
• 동네범위 필터 UX 전면 수정 (전국 확장)
  • 기존에는 1~5단계 슬라이더로 행,정,동을 정해진 범위에 따라 추가해주었어요.
  • 어떠한 동네에 속하는지 알기 어렵고, 명확히 한눈에 보기 어려워 개선을 진행했어요.
  • maplibre 기반의 당근 지도와 turf 폴리곤을 통해 위치 기반 nKm 다각형 렌더링을 구현했어요.
  • 다각형 → h3 해상도 및 인덱스로 변환 및 저장해 서버와 교환하도록 수정했어요.
  • 기존 레거시 코드 분석 후 꼼꼼한 마이그레이션으로 지표 크게 향상
• 중고차 전국 확장
  • 지역 nKm까지만 가능하던 중고차 직거래를 전국으로 확장했어요.

안심직거래

• 에스크로를 통한 제3자가 금액을 예치받고 중간에서 조율하는 안심 직거래 서비스를 구현했어요.
• 복잡한 상태 관리 설계
  • 결제/탁송/명의이전 등 병렬로 진행되는 다수 상태를 직렬 상태로 변환
  • 유효한 상태 조합별로 묶어 추적 관리 용이한 구조 설계
• ts-pattern 도입으로 Exhaustive Pattern Matching 적용
  • 상태 추가/삭제 시 컴파일 타임에 누락된 케이스 감지
  • 런타임 에러 사전 방지 및 코드 가독성 향상

캠페인

• 삶은당근 캠페인 개발
  • 당근 최대 프로모션에서 2주 가량의 타임어택으로 중고차 차량등록 퍼널 전체를 때네어 캠페인 등록 프로세스로 진행했어요.
  • 당근 내에서도 서비스를 경험해볼 수 있는 특별한 사례로 소개됐어요.
  • 퍼포먼스 마케팅에 의한 서비스 상방을 확인했어요.

기술적 기여

성능 최적화

• 이미지 최적화 & 썸네일 시스템
  • 유려한 로딩 경험을 위한 점진적 이미지 로딩 구현
  • sizes, srcSet 등을 통한 반응형 이미지 리사이징 구현
• 청크 프리로드
  • 라우트별 관계도 구현으로 다음 화면에 필요한 JS 청크를 미리 로드
  • 네이티브 앱 수준의 화면 전환 경험 구현
• Stackflow(사내 웹뷰 라우팅 Framework) Future API 적용
  • loader pattern 구현으로 서버 api 리소스 요청과 애플리케이션 javascript 리소스 요청 병렬화
  • 파괴적 변화가 큰 피처임에도 점진적 작업과 꼼꼼한 QA로 안정적 배포
  • p75 수치 1초 단축으로 성능 이슈 겪는 유저 경험 대폭 개선
• GraphQL Persisted Query 도입
  • GraphQL 통신 요청의 문서(쿼리) 부분 캐싱
  • p75 수치 1초 단축으로 성능 이슈 겪는 유저 경험 대폭 개선
• 피드 UX/성능 개선
  • Swipe, Virtual Scroll, PTR, 상단 클릭 시 스크롤 등 피드 필수 UX 구현
  • 정성적으로 갤럭시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 로그인 기능 첫 베타테스터
  • 버그 수정 및 모니터링으로 서비스 안정화 기여
  • 타팀이 신뢰 가지고 유려하게 적용할 수 있도록 품질 확보

AI 코딩 워크플로우 구축

• agent의 코드 피드백 싸이클 구성
  • code-gen, type-check, fix-lint 등 에이전트가 실제 프로그래머와 가깝게 일할 수 있도록 스크립트 & 프롬프트 구성
  • 피드백이 빨라질 수 있도록 성능 최적화
  • git, deploy 관련 skills를 작성하여 실제 프로그래머와 일하는 스타일이 비슷해질 수 있도록 구성
• 거대 모노레포 맥락 분리
  • 서비스별 적절한 컨텍스트 작성
  • AI 도구가 이해하기 쉬운 구조화된 정보 제공
• Rule-Based 코드젠 라이브러리 도입
  • 코드 패턴 최대한 일관되게 유지
  • 할루시네이션이 눈에 띄게 감소
• 정적 분석 도구 강제 적용
  • LSP, ts-morph, dry-run 옵션 등 before-after를 명확히 알 수 있는 툴링 확보
  • LLM만으로 진행하는 변환 대비 compiler 등 도구가 강제하는 역할로 품질 향상
  • 테스트를 통해 코드 변환에 대한 신뢰성 담보
• AI 도구 활용 레슨런 팀 내 공유
  • 별다른 추가 프롬프트 없이 고난이도 작업 해결 사례 공유
  • 디자인 시스템 v2 마이그레이션
  • emotion -> tailwind 변환
  • 품질 / 변경 가시성 확보하기

팀 매니징

채용

• FE 채용 기여

지식 공유 & 문화

• 버티컬 FE 위클리 개설
  • 타 버티컬팀 엔지니어와 격주 참여
  • 제품 개발 레슨런, 기술 흐름 읽기, 실무 팁 공유

뤼이드 (2020.11 ~ 2022.11)

소프트웨어 엔지니어

Schema based development

• Protobuf 기반으로 webview와 native, server 인터페이스 작성
• 작성된 schema를 통해 반복적인 코드를 기계적으로 자동 생성
• Open API Schema를 기반으로 rest api들의 반복적인 코드를 기계적으로 자동 생성
• 스키마 저장소를 분리하여 PR을 통해 api tech spec 논의

컴파일 / 번들링 방식 연구 및 개선

• css-in-js로 인한 babel 의존성을 제거하고 swc로 컴파일러 교체
• esm, cjs 두 모듈링을 지원하기 위한 작업 진행
• 모노레포에서 각 패키지들의 hmr을 지원

Trunk Based Development 구현하기 위한 일들을 진행

• yarn2 + ultra-runner를 사용한 초기 모노레포 셋업
• pnpm + turbo를 통한 모노레포 개선
• PR 검증과 프로덕트 배포를 위한 CI&CD 작성
• 빌드 캐싱을 통해 배포 속도 대폭 개선
• 모노레포로 인한 각종 빌드 이슈 해결
• 배포 프로세스 정의

테스트 코드 작성

• 커버리지 80%를 목표로 유닛테스트 작성
• E2E 테스트를 위해 Cypress를 셋업하고 QA Engineer 온보딩 진행
• 스키마를 통해 목 데이터 생성기, msw 코드를 자동으로 생성해 유닛 테스트, 스토리북에 활용

사내 백오피스 구현

• 공용 컴포넌트, 로직, 컨버터 작성 후 라이브러리로 말아서 배포
• 어드민 데이터그리드, 공통 필터 구현 스펙 논의

그 외 것들

• 기존 코드리뷰 방법을 보완하기 위해 Graphite를 사용하여 Stacked Changes 방법을 팀내 전파
• 3개월 정도 미국 지사에서 영어권 엔지니어들과 협업
• 소수 오픈소스 프로젝트 기여 (Pbkit, Storybook 등)
• 다수 웹뷰 프로덕트 MVP 구현 및 유지보수
• CLI 툴링 작성 (코드 마이그레이션, 컴포넌트 코드 생성 등)

클래스101 (2019.03 ~ 2020.06)

소프트웨어 엔지니어

커머스 셀 소프트웨어 엔지니어

• 퍼널 줄이기 A/B 테스트를 통한 결제 컨버전 400% 개선
• 쿠폰 및 구성품 선택 UX 개선
• 배송 추적 UX 개선
• 커머스 도메인 레거시 대응
• 각종 결제, 배송 에러 트러블 슈팅

프론트엔드 챕터 DRI

• Class101 CSR 프로젝트를 SSR을 지원하도록 변경
• SEO 최적화를 위해 메타태그, 사이트맵, 스키마 등을 세팅
• 서버리스 이미지 압축 서비스에서 다양한 포멧(webp, png, jpg)을 지원하도록 변경
• 스크린 크기에 따른 반응형 이미지 최적화로 이미지 리소스 용량을 82% 절감
• 50mb ~ 100mb 단위로 JS 청크 스플리팅 적용
• 사이트 총 리소스를 25.8mb에서 11.4mb로 55% 절감
• 브라우저, 자바스크립트 렌더링 최적화로 노트8 기준 TTI를 158초 -> 21초로 절감
• 인피니티 스크롤 개선 및 관성 스크롤 적용해 스크롤 UX 최적화
• 센트리, 슬랙을 통한 에러 모니터링 셋업
• 어드민 공통 필터, 테이블 추상화
• 알림 서버 개선 (분당 최대 전송 횟수 40개 -> 20,000개)
• 프론트엔드 개발자 채용 가이드 문서 제작
• 기술 블로그 개발 및 공유 문화 전파
• 리액트 모노레포 프로젝트 에러 핸들링
• Graphql Apollo 구조 설계 및 트러블 슈팅

노루 (2018.03 ~ 2019.03)

NOTE

• 다양한 차트라이브러리를 활용해 데이터 시각화 작업 (오픈소스 컨트리뷰션)
• 심플한 소스코드 관리자 설계 (Diff, Versioning 등)
• RxJS의 사용하여 스트림 기반의 반응형 프로그래밍에 대해 고민하였음.
• WebRTC를 이용한 양방향 영상 통신 구현
• Gatsby + Bulma 를 통해 회사 소개 사이트 구축

트래포트 (2016.07 ~ 2017.08)

NOTE

• 호텔, 액티비티 서비스 아키텍쳐 설계
• 여행 올인원 커머스 개발

🔗 Links

Site	Link
Blog	https://ddalpange.github.io
Email	ddalpange@gmail.com
Github	https://github.com/ddalpange