김세진

<aside> <img src="https://cdn-icons-png.flaticon.com/512/415/415237.png" alt="https://cdn-icons-png.flaticon.com/512/415/415237.png" width="40px" /> [email protected]

</aside>

<aside> <img src="https://cdn-icons-png.flaticon.com/512/8028/8028652.png" alt="https://cdn-icons-png.flaticon.com/512/8028/8028652.png" width="40px" /> Blog

</aside>

<aside> <img src="https://cdn-icons-png.flaticon.com/512/159/159684.png" alt="https://cdn-icons-png.flaticon.com/512/159/159684.png" width="40px" /> +82-10-5158-0722

</aside>

<aside> <img src="https://cdn-icons-png.flaticon.com/512/25/25320.png" alt="https://cdn-icons-png.flaticon.com/512/25/25320.png" width="40px" /> LinkedIn

</aside>

Abstract

간단 소개글

• 이커머스 가격비교 플랫폼에서 ‘가격비교’ 서비스를 담당한 웹 프론트엔드 개발자입니다.
• ‘통합검색’ 프로젝트의 메인테이너로서 검색 서비스 중심의 개발 경험과 도메인 지식을 쌓아왔습니다.
• 생산성과 개발자 경험을 저해시키는 기술 부채의 청산을 주요 목표로 삼고 업무에 임해왔습니다. 이를 위해 아래와 같이 두 갈래로 접근하였습니다.
  • **Vue 3** + **Nuxt 3**로 서비스를 처음부터 다시 구현(리라이팅)하는 프로젝트를 리드하였습니다.
  • 기존의 레거시 프로젝트는 꾸준히, 결벽적으로 퇴고하며 코드베이스를 개선했습니다. 새로 작성하는 것 이상으로 기존의 코드를 지웠습니다.
• 사용자 경험의 핵심은 성능이라고 생각하여, 체감 및 정량적 측정이 가능한 수준으로 페이지 로드 성능을 개선하였습니다.
• 서비스의 엔드포인트에 위치하는 포지션으로서 다양한 직군과의 협업 경험이 있습니다. 특히 개발 환경 개선, CI/CD 구축 등 DevOps 분야에서 밀접하게 기여한 성과가 있습니다.
• 엔지니어로서 아래와 같은 습관과 태도, 가치관을 가지고 있습니다.
  • 문제를 해결하기 위한 도구와 수단을 시의적절하게 채택하고 활용하는 것이 핵심적인 능력이자 책무라고 생각합니다.
  • 개발자가 창출하는 비즈니스적 가치는 견고한 기술적 토대로부터 비롯된다고 생각합니다. 기술 부채로 인해 장애가 반복되고, 간단한 구현에도 많은 리소스가 소요되며, 그로 인해 더 많은 시도를 할 수 없었던 사례들을 경험하면서 기술이 곧 경쟁력 있는 프로덕트를 만들 수 있게 한다는 사실을 체감했습니다.
  • 글쓰기에 친숙해, 적극적인 테크니컬 라이팅 활동으로 사내 개발자 경험 향상에 기여했습니다. 개인적으로도 기술 블로그에 아티클을 작성하면서, 업무 중 경험한 문제와 학습 내용을 회고하고 있습니다.

Work Experience

경력

커넥트웨이브

다나와사업부 기업부설연구소 / Web Frontend Developer

2019. 10 ~ 현재 재직중

가격비교 서비스 프론트엔드 개발 및 운영 2019. 10 ~ 현재

• DAU 70만 '가격비교' 서비스 개발, '통합검색' 프로젝트 메인테이너
  • 검색 서비스 운영 및 사용성 향상을 위한 UI 개발, 사용자 피드백 기반 비즈니스 피처 구현
  • '메인', '카테고리 상품리스트', '상품블로그(상품 상세 페이지)' 등 핵심 페이지 개발 및 유지보수
• 사용자 경험 개선을 위한 웹 성능 최적화, Web Vitals 개선
  • Lighthouse 기준 Performance 50 ~ 60점 → 80점대
• sitemap, robots.txt, meta data 관리, URL 구조 개선을 통한 사이트 전반의 SEO 개선
  • Lighthouse 기준 SEO 83점 → 100점
• 서비스 런칭 이후 한 번도 리팩토링되지 않은 코드베이스에서 비롯되는 기술 부채 극복
  • jQuery 완전 제거 목적의 점진적인 Vanilla(ES6+) 코드 리라이팅
  • **ESLint** + **Prettier** 도입, 기존의 모든 린트 에러를 제거하여 코드 퀄리티 견인, 팀 코드 컨벤션 정립
  • 불필요한 라이브러리/플러그인 정리, 내재화
  • 새로운 동료가 합류해도 어렵지 않게 이해하고 협업할 수 있는 가독성 및 유지보수성 확보
  • Tailwind CSS를 활용하여 내부 사용자 admin 페이지 UI 및 사용성 개선, 반복 작업 최소화 목적의 템플릿화

통합검색 페이지 리라이팅 2022. 10 ~ 2023. 07

• 기술 부채를 청산하고 모던 프론트엔드 스택으로 점프하기 위한 프로젝트 제안 및 리드 (인원 2명)
• 서비스 특성 및 환경을 종합적으로 판단, 협의를 거쳐 **Vue 3** + **Nuxt 3** 채택
  • 프로젝트 규모, 협업 용이성, 코드 퀄리티 균일성, 개발자 경험 고려
  • Nuxt 3는 시작 당시 RC 버전이었으나, 레거시가 된 Vue 2를 배제하고 진보한 Vue 3를 사용하여 미래의 마이그레이션 문제를 회피하기 위해 선택
• 시작 전 **React** + **Next** 및 **Vue 2** + **Nuxt 2**로 파일럿 개발 진행
  • 결과물 사내 공유, 기술 검증 및 프로젝트의 당위성에 대한 컨센서스 형성
• Composition API를 활용하여 코드량 감소, Composables 공용 함수로 재사용성 개선, **TypeScript** 호환성 향상
• 상태 관리에 **Pinia**를 사용하여 Vuex 대비 보일러플레이트 감소, 모듈식 store 구조에 의한 코드 스플리팅 개선
• webpack 대비 빠른 빌드 및 HMR을 통한 개발자 경험 향상 목적으로 **Vite** 채택
• 관용적인 유틸리티/헬퍼 개발에 **VueUse** 라이브러리를 활용하여 생산성 향상
• 온프레미스 인프라 활용 무중단 배포 구축
  • k8s 플랫폼 활용 Rolling, Blue/Green 배포 전략 비교 검증, Graceful shutdown 구현
• 유실된 서비스 정책, 히스토리를 재정비하고 유관 부서와의 커뮤니케이션을 통해 요구사항과 기능을 재설계
• 다른 챕터과의 협업을 통한 프로젝트 확장 및 연계
  • 완전한 백엔드 관심사 분리 및 Over/Under fetching 문제를 해결하기 위한 **GraphQL BFF** 서버와 **Apollo** 연동
  • **MSW**를 활용한 mocking으로 'API 언제 나오나요?' 문제 완화
  • 마크업 개발자와의 **Storybook** 프로젝트 연계, 컴포넌트 문서화를 통한 협업 능률 개선

<aside> <img src="/icons/link_gray.svg" alt="/icons/link_gray.svg" width="40px" /> Nuxt 프로젝트 되돌아보기

Turbopack이 Vite보다 10배 빠르다?

모던 웹 프론트엔드의 이해

</aside>

웹 페이지 성능 개선 2021. 09 ~ 2022. 06

• '검색이 느리다'는 피드백에 대응하기 위한 Redis 활용 API 캐싱 구현
  • 검색엔진 API 페치에 평균 3초 이상 소요되고, 문서 수에 따라 응답 속도도 불균일해 페이지 렌더링이 지연되는 문제 해소
  • 10여개 엔드포인트의 응답을 캐시하여 페이지 로드 시간 단축
    • TTFB 3~4초 -> 1초
    • 검색엔진 API 호출량 55% 감소
  • cache stampede 이슈를 회피하기 위해 expire 시간에 무작위 지연 부여, 키워드별 검색 빈도를 분석해 높은 히트율을 나타내는 hot key는 사전 갱신
  • **puppeteer**를 활용한 load testing, 장애를 재현하여 cluster topology에서의 failover 프로세스 검증 (w/DBA)
• 비효율적인 로직 개선
  • throttle/debounce 활용, 스크롤 성능 개선 및 API 요청 수 40% 감소
  • 가시성 감지, 오프스크린 콘텐츠 지연 로딩 등 스크롤 이벤트 기반 기능을 IntersectionObserver로 재구현하여 렌더링/인터랙션 퍼포먼스 개선
  • reflow/repaint 시점과 빈도, 메인 스레드 부하 및 FPS를 프로파일링하여 성능 개선 검증
  • 블로킹을 유발하는 불필요한 로직 제거, 오프스크린 콘텐츠 지연 로딩, 리소스 우선순위 힌트 추가, HTTP 캐싱 등의 최적화 작업을 통해 TTFB/FCP/LCP 약 1초 개선
  • 클라이언트 렌더링 제거 및 플레이스홀더 구현으로 레이아웃 시프트 완전 제거 : CLS 0
• 번들러, 모듈 시스템이 없는 레거시 프로젝트의 페이지 사이즈 40% 경량화
  • **terser**를 활용한 JS 코드 압축
  • CDN을 통한 이미지 리사이즈 및 압축, 포맷 최적화

<aside> <img src="/icons/link_gray.svg" alt="/icons/link_gray.svg" width="40px" /> Redis KEYS vs SCAN

라이브러리 없이 이미지 지연 로드하기

IntersectionObserver 프로파일링 해보기

Passive Event Listeners

Back/Forward Cache (A.K.A. bfcache)

</aside>

팀 개발 문화, 워크플로우 개선 2020. 12 ~ 2021. 05

• 주니어 포지션에서 팀 개발 문화에 기여할 방법을 찾기 위한 지속적인 도전
  • 기술 공유, 포스트모템, 튜토리얼 등 다른 개발자를 돕기 위한 테크니컬 라이팅으로 개발자 경험 개선
  • MR(PR)시 팀원들의 참여를 적극 유도하여 코드 리뷰 문화 조성
  • **husky**를 활용한 Git hooks 및 **GitLab** CI 파이프라인을 통한 포맷팅/린팅 자동화
  • 팀에 적합한 Git Workflow 도입 논의, 타사 사례를 벤치마킹하여 브랜치 전략 수립
• System, DevOps 엔지니어와의 주도적인 협업을 통한 워크플로우 개선
  • 개발 환경 재구축(VM → Docker), 온프레미스 GitLab 플랫폼 운영 및 CI/CD 구성
  • 모니터링 솔루션 도입 제안, 이슈 및 메트릭 모니터링
    • 어뷰징, 크롤링, 네트워크 에러 등 이슈 지점과 원인을 정확히 추적하고 대응하지 못하는 문제를 체감, 대응에 과도한 리소스가 소모되는 비효율 해소
    • SaaS/인하우스 솔루션(ELK) 등을 활용한 메트릭/로그 관제
    • 기존 대비 서비스 장애 시간 70% 이상 감소

사용자 경험 로그 수집 및 통계 대시보드 개발 2020. 07 ~ 2020. 10

• 데이터로 문제를 해결하기 위한 접근, 사용자 경험 애널리틱스 ETL 플랫폼 구축 기여 (w/DE, DBA)
• 키워드, 검색 결과, 전환, 클릭 등 사용자 행동을 추적한 대규모 로그 통계 분석 데이터 대시보드 개발
• 페이지뷰, 유입/체류/이탈 등을 정확하게 추적하기 위한 Page Lifecycle 연구 및 API 활용
• 서비스 고도화 및 품질 개선, 기능 설계, 마케팅, 영업 등 비즈니스 의사결정에 활용

<aside> <img src="/icons/link_gray.svg" alt="/icons/link_gray.svg" width="40px" /> 페이지 이탈을 측정하는 새로운 방법, Pending Beacon API

Referrer Policy의 이해

</aside>