[email protected]

재미있게 일할 수 있는 회사를 찾고 있습니다.

• 8년차 프론트엔드 소프트웨어 엔지니어입니다.
• 분야를 구분하지 않고 "일이 되는 것"에 초점을 맞춥니다.
• 문제 해결 논의, 디자인 UI/UX, 데이터 기반 제품 개발, 유저 인터뷰, 오프라인 영업 등 제품을 만드는 것에 영역을 따지지 않습니다.
• 제품 성향의 엔지니어이지만, 제품 확장에 따른 복잡성을 해소하기 위한 플랫폼에서의 개선에도 관심이 많습니다.
• 피드백에 대해 열려있습니다. 세심한 피드백을 주려 노력하고, 사소한 피드백도 놓치지 않으려 주의를 기울입니다.
• 기둥을 2cm 옮기는 일들을 잘 처리합니다.
• 상상을 좋아하며 상상이 현실이 되도록 구체화하는 것을 좋아합니다.
• 회복 탄력성이 강하고 가설 검증 기반의 디버깅 능력이 우수합니다.
• 이상한 일들을 많이 해서 버그를 많이 만나 몽키 패칭을 잘합니다.
• 배포를 자주 하는 문화를 만들기 위해 노력합니다.
• 제품의 단계와 성향에 따라 적절한 엔지니어링을 추구합니다.
• 고수준의 공통화, 추상화보다 응집도가 강하고 일관된 패턴에 삭제하기 쉬운 코드를 선호합니다.
• 기본적으로 짧은 코드를 선호합니다.

중고차팀 소프트웨어 엔지니어

• 버티컬 서비스 팀에서 제품 엔지니어로써 기여
• 팀 내 프론트엔드 엔지니어링 오너십

진단 프로세스 구축

• 진단사 진단 프로세스 전체 개발
  • 진단사 가입 / 진단 가이드 / 차량 데이터 기반 문진표 / 진단 예약 관리 / 진단사 진단 체크리스트 페이지
• 100여 가지가 넘는 항목 / 타입들을 코드 스키마로 만든 이후 타이핑을 역연산하여 테스트 개념으로 타입 컴파일 타임에 안정성 확보
• 잦은 변화 속에서 주도적 협업으로 커뮤니케이션 갭 최소화

진단 비즈니스 실험

• 진단 서비스 유료화 실험
• 진단 예약 퍼널 그로스 A/B 테스트
• 보증 유료화 실험

진단 시스템 고도화

• 진단리포트의 Graphql Schema가 지나치게 복잡해 Record로 개선
  • 100여 개 항목의 잦은 변경으로 백엔드 스키마 싱크 비용 급증
  • GraphQL schema에서는 Object로 느슨하게 관리
  • 별도 type + validation 라이브러리 자체 개발
  • 프론트엔드-백엔드 로직 통일로 스키마 불일치 고통 해소
• 진단사 웹뷰 분리
  • 독립 프로젝트로 분리하여 컴파일 시간 단축
  • 배포 안정성 및 독립성 확보
• 릴레이 Fragment 기반 진단리포트 중앙 관리
  • 멀티프로젝트에서 공통 데이터 패칭 로직 중앙집중화
  • 프로젝트별 데이터 위계 불일치 문제 해소 → 클레임 리스크 제거

진단 품질 개선

• 진단사 과진단 해결
  • 타사 대비 정성적 정보 수집량이 많아 진단사들이 클레임 부담으로 과진단하는 현상 발견
  • 타사 레퍼런스와 현상-솔루션 분석
  • 진단 수집 단위 조정, 딜러 고지수준 분리
  • 경매완료율에 영향 없이 정보 수준 적절히 보정
• 진단사 수정요청 자동화
  • 기존: 밴드/문자/전화 등 다양한 경로로 수정 요청 → 높은 오퍼레이션 코스트
  • 수정 요청 시점에 따른 책임소지 변화 고려한 자동화 플로우 구현
  • 경매 인입 증가를 위한 선행 과제 해결

중고차 경매 서비스 구축

• 중고차 경매 서비스 전체 구현
• 상태-페이지 격리 아키텍처 설계
  • 진단 / 경매 / 매입 / 정산 구조로 이루어지는 4가지 병렬 상태를 view 별로 직렬로 만들어 관리
  • 강타입 컴파일 구조로 상태 매칭 누락을 사전 차단
  • 유지보수 용이한 구조로 후속 개발자 온보딩 비용 절감
• UI 컴포넌트 시스템 구축
  • 다수 UI의 컴포넌트화로 재사용성 확보
  • 디자이너-엔지니어 협업 효율화를 위한 피그마-코드 컴포넌트 설계 고민
• 확장에 따른 중복코드 효율적 제거
  • 타입 기반 정확한 피드백과 꼼꼼한 QA로 안정적 릴리즈
  • ts-morph, knip 등 기계적 코드변환을 이용한 신뢰성 확보
  • 릴리즈 직후 서비스 모니터링 및 안정화
• Tanstack Router 도입 및 POC
  • 타입 안전한 라우팅 시스템 적용
  • 파일 기반 라우팅으로 개발 생산성 향상
• 딜러웹 반응형 지원
  • 오프라인 영업 중 PC 없이 모바일만 사용하는 딜러 다수 발견
  • 신규 모바일 웹뷰 대신 기존 딜러웹을 반응형으로 전환
  • 인앱 웹뷰로 올려 1개월 내 신규 서비스 출시 효과
• 판매서류 최소화
  • 차량 매입에 있어 구매자에게 필요한 사업자 유형/사업용 여부/딜러 유형에 따른 복잡한 서류셋 로직 정리
• 중고차단지 오프라인 영업
  • 라이브 입찰 수 증가를 위해 수원 등 중고차 단지에 딜러들 상대로 영업

판매자 퍼널 개선

• 글쓰기 사진 업로드 UX 개선
• 글쓰기 리팩토링
  • 기존 글쓰기 비즈니스 로직이 UI/UX에 종속되어 복잡해지는 문제를 해결
  • 공통 UI 분리 및 각 컴포넌트의 애니메이션, 조건부 노출 동작 추상화
  • 도메인 로직 패턴화로 직거래 글쓰기와 사전 진단 예약하기 코드 구조 통일
  • 이후 추가 실험에 있어 유사한 글쓰기 퍼널 빠르게 확장 가능한 구조 확보
• zod 기반 유효성 검증 선언적 관리
  • 복잡한 폼 유효성 체크 로직을 스키마 기반으로 선언적 관리
  • 런타임 타입 검증과 정적 타입 추론 동시 확보

구매자 퍼널 개선

• 검색 개선
  • 디렉토리 기반 검색과 자연어 검색이 섞여있어 복잡했던 로직을 적절한 UX/UI로 변경하여 명확히 분리.
  • • 자체 레거시 검색 제거 이후 사내 검색 플랫폼 이관에 대한 처리.
• 동네범위 필터 UX 전면 수정 (전국 확장)
  • 기존 1~5단계 슬라이더 → 내 위치 중심 nKm 반경 개념으로 변경
  • 위치 기반 nKm 다각형 렌더링 구현
  • 다각형 → h3 인덱스 변환 및 저장 로직 개발
  • 기존 레거시 코드 분석 후 꼼꼼한 마이그레이션으로 지표 크게 향상

안심직거래

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

캠페인

• 삶은당근 캠페인 개발
  • 당근 최대 프로모션에서 중고차 퍼널 전체 UX 변경
  • 단기간 내 주요 퍼널 변경사항 성공적 배포
  • 퍼포먼스 마케팅에 의한 서비스 상방 확인

성능 최적화

• 이미지 최적화 & 썸네일 시스템
  • 유려한 로딩 경험을 위한 점진적 이미지 로딩 구현
• 청크 프리로드
  • 다음 화면에 필요한 JS 청크를 미리 로드
  • 네이티브 앱 수준의 화면 전환 경험 구현
• Stackflow Future API 적용
  • loader pattern 구현으로 서버 리소스 요청과 애플리케이션 리소스 요청 병렬화
  • 파괴적 변화가 큰 피처임에도 점진적 작업과 꼼꼼한 QA로 안정적 배포
  • p75 수치 1초 단축으로 성능 이슈 겪는 유저 경험 대폭 개선
• GraphQL Persisted Query 도입
  • GraphQL 통신 요청의 문서(쿼리) 부분 캐싱
  • p75 기준 LCP 1초 개선
• 피드 UX/성능 개선
  • Swipe, Virtual Scroll, PTR, 상단 클릭 시 스크롤 등 피드 필수 UX 구현
  • 정성적으로 갤럭시A31 기준으로도 유려하게 사용 가능한 수준으로 메모리/성능 개선

개발 환경 & DX 개선

• 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 부작용 효과적 측정 및 해결
• 오버레이 정합성 개선
  • 서비스 내 흩어진 다이얼로그 검수
  • 안드로이드 뒤로가기 경험 통일
• 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 위클리 개설
  • 타 버티컬팀 엔지니어와 격주 참여
  • 제품 개발 레슨런, 기술 흐름 읽기, 실무 팁 공유

소프트웨어 엔지니어

• 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 툴링 작성 (코드 마이그레이션, 컴포넌트 코드 생성 등)

소프트웨어 엔지니어

• 커머스 셀

  • 퍼널 줄이기 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 구조 설계 및 트러블 슈팅

프론트엔드 프로그래머

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

프론트엔드 프로그래머

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