오영근 — 프론트엔드 개발자 이력서

안녕하세요. 프론트엔드에 깊고, 제품 전체를 다루는 개발자 오영근입니다.

사용자의 불편을 빠르게 포착하고, 팀과 맥락을 공유하며, 유지보수 가능한 코드로 개선하는 과정을 가장 중요하게 생각합니다.

일하는 방식

서비스를 직접 써보며 불편을 찾는 편입니다. 미묘한 레이아웃 틀어짐, 폰트 크기 불일치처럼 놓치기 쉬운 UI 불일치를 발견하고 고치는 일을 중요하게 생각합니다. 구현 전에는 근거를 먼저 맞추고, 필요한 경우 테스트로 리스크를 줄입니다. 코드리뷰와 페어 프로그래밍을 선호하며, 작성한 코드에 대한 다양한 피드백을 적극적으로 수용합니다.

메디쿼터스 (새 창에서 열림) (2022.11 ~ 현재)

메디쿼터스에서 프론트엔드 개발자로 일하며 MAU 100만 일본 커머스 플랫폼 nugu를 개발하고 있습니다. nugu 몰과 백오피스를 함께 다루며 대규모 프론트엔드 전환, 렌더링 성능과 배포 안정성, 프로모션 운영 도구를 개선해 왔습니다. 초기에는 Python(Django REST Framework) 백엔드 개발에도 참여했고, 백오피스에서는 Svelte 기반 개발을 병행했습니다.

Next.js 16 App Router 전면 전환 (2026)

Pages Router와 클라이언트 중심 다국어 구조가 React Server Components와 Partial Prerendering 적용을 막고 있었습니다. Next.js 16 업그레이드에 필요한 호환성 정비를 먼저 끝낸 뒤, 인프라·공용 컴포넌트·페이지·검증 단계로 나눠 107개 페이지를 App Router로 이관했습니다.

i18next를 next-intl로 교체해 서버 컴포넌트 경계를 확보했고, 서버 셸과 클라이언트 island를 구분하는 패턴을 팀 규칙으로 정리했습니다. React Compiler 도입에 맞춰 수동 메모이제이션도 걷어냈습니다. 전환 전후를 비교하는 성능 하니스를 마련하고, 전환 기간에 다른 작업으로 들어온 변경이 유실되지 않도록 추적하며 홈·상품 상세·주문 등 핵심 흐름을 중단 없이 유지한 채 전환을 마쳤습니다.

렌더링 성능과 배포 안정성 개선 (2025~2026)

상품 목록에는 상태 재설계와 윈도우 가상화를 적용해 최초 렌더링 요소를 최대 95%(1,403개 → 64개) 줄이고 CLS 0을 달성했습니다. 서버 메모리가 계속 증가하던 문제는 힙 스냅샷에서 참조 경로를 추적해, SSR 중 생성된 TanStack Query의 긴 gcTime 타이머가 요청별 QueryClient를 붙잡는 것이 원인임을 확인했습니다. 서버에서는 캐시 수명을 즉시 정리하도록 조정해 메모리 추이를 안정화했습니다. 이 과정은 원인 모를 메모리 누수, 추측 대신 측정부터 했다에 정리했습니다.

App Router 전환 후에는 홈과 주요 페이지를 섹션 단위 Suspense 스트리밍 구조로 바꾸고, PPR 하이드레이션 오류는 원인을 Suspense 경계 단위로 좁혀 정적 셸을 안정화했습니다. 여러 서버가 캐시를 공유하도록 Redis 외부 캐시를 연결해 노드별 콜드 미스도 줄였습니다. 이미지 품질과 로딩 정책은 결과물을 직접 비교해 조정했고, 초기 이미지 전송량을 주요 라우트에서 57~95%, LCP를 16~29% 개선했습니다. 관련 과정은 3년간 아무도 건드리지 않던 이미지 q=100을 다시 측정했다에 정리했습니다.

배포 중에는 이전 버전의 정적 자산 요청이 새 서버로 향해 404가, 프로세스 재시작 시에는 간헐적인 502가 발생했습니다. 버전별 정적 자산을 CDN에 함께 유지해 404를 없앴고, 외부 API 장애가 빌드 실패로 이어지지 않도록 빌드 시 의존을 끊고 배포 후 주요 경로를 워밍업했습니다. 서버 재시작 전에는 로드밸런서에서 연결을 먼저 드레이닝해 배포 중 502도 제거했습니다.

프로모션 Content CMS 플랫폼 구축 (2026)

마케팅/운영팀이 프로모션 페이지를 만들 때마다 개발자에게 의존했고, 관리자 프리뷰와 실서비스 화면도 자주 달랐습니다. 2025년에 만든 기획전 JSON 모듈 시스템과 메인 화면 교체 구조(아래 '코드 배포 없이 운영하는 전시 시스템')를 발전시켜, 이미지·HTML·섹션·탭과 동적 위젯을 조합할 수 있는 블록 기반 에디터를 만들고 실서비스 컴포넌트와 CSS를 재사용하는 WYSIWYG 프리뷰를 구축했습니다.

기존 기획전 본문이 텍스트 필드 하나에 저장되는 제약은 블록 트리를 같은 필드의 HTML 주석에 직렬화하는 방식으로 풀었습니다. 기존 HTML 기획전과 블록 기반 기획전이 데이터 마이그레이션 없이 공존할 수 있었고, Zod 스키마 검증과 URL 정제로 저장 데이터의 안정성도 보완했습니다. 이 설계는 마이그레이션 없이 기존 HTML에 블록 CMS를 추가한 방법에 정리했습니다.

이후 카운트다운, 쿠폰, 래플, 출석체크, 추천 스타일 등 20여 종의 임베드 컴포넌트로 범위를 넓혔습니다. 운영자가 캠페인을 직접 조립할 수 있게 된 뒤에는 클라이언트에서 렌더링하던 CMS 본문을 서버에서 React 트리로 합성하도록 전환했습니다. 콘텐츠와 주요 섹션이 첫 HTML에 포함되면서 프로모션 페이지도 App Router의 스트리밍 구조를 활용할 수 있게 됐습니다.

모놀리스에서 BFF·MSA로 점진 이관 (2026)

Django 모놀리스의 기능이 도메인별 서비스로 분리되면서 nugu 몰과 백오피스의 호출 경로도 안전하게 교체해야 했습니다. 검색·쿠폰·주문·프로모션을 작은 단위로 나눠 BFF로 이관하고, 두 백엔드의 응답 차이가 화면에 영향을 주지 않도록 처리했습니다.

기존 백엔드와 BFF의 응답으로 같은 화면을 렌더링해 결과를 비교하는 MSW 회귀 테스트를 만들고, OpenAPI 타입이 최신 상태인지 확인하는 CI 게이트를 추가했습니다. 이관이 끝난 도메인은 실제 호출부를 전수 확인해 더 이상 쓰지 않는 코드와 테스트를 함께 정리했습니다.

백오피스 어드민 재구축과 주문(OMS) BFF 전환 (2025~2026)

레거시 Svelte 어드민을 대체할 신규 어드민 모노레포(백오피스·파트너오피스)를 React 19, TanStack Router/Query, Vite 기반으로 처음부터 설계했습니다. 공통 UI 패키지와 OpenAPI 타입 자동 생성 파이프라인을 갖춰 화면 추가 비용을 낮췄고, 고객 상담 관리, 카페24 외부상품 수집·승인, 캠페인 이벤트 관리 등 운영 기능을 새로 구축했습니다.

주문 상세 화면은 레거시 API 호출을 여섯 단계로 나눠 BFF로 이관했습니다. 전환 전(레거시)과 후(BFF) 코드가 같은 테스트를 통과하도록 두 백엔드 경로를 모두 목킹한 회귀 테스트를 만들어 전환 전후 동작이 같은지 검증했고, 서버 에러 코드를 다국어 사용자 메시지 체계로 정규화했습니다.

로컬 개발·CI·테스트 플랫폼 구축 (2026)

MSA 전환 후에는 공유 QA 환경 없이 전체 사용자 흐름을 재현하기 어려웠습니다. 여러 BFF와 서비스, Kafka, OpenSearch 중 필요한 것만 골라 한 명령으로 기동하는 로컬 풀스택 환경을 구축하고, 실행마다 데이터를 초기화하는 Playwright e2e 하니스를 연결해 머지 전에 통합 흐름을 반복 검증할 수 있게 했습니다. CI 병목은 실측한 뒤 테스트 DB 캐싱 등 큰 것부터 정리해 대기 시간을 줄였습니다.

Bootstrap에서 Tailwind CSS v4로 전환 (2026)

SCSS, styled-jsx, Bootstrap이 섞인 스타일 구조를 Tailwind CSS v4로 전면 이관했습니다. 유틸리티 클래스 변환 도구와 시각적 회귀 검증 루프를 만들고, 100건 이상의 후속 UI 차이를 추적해 정리했습니다.

CSS 번들은 413.3KB에서 157.2KB로 약 62% 감소했고, react-bootstrap 제거로 First Load JS(shared)도 916KB에서 850KB로 7.2% 줄었습니다. 이 과정에서 AI 에이전트와 검증 루프를 활용해 작업 방식이 바뀐 경험은 점진적으로 준비하던 Tailwind CSS 마이그레이션의 80%가 사흘 만에 끝났다에 정리했습니다.

AI 에이전트 워크플로 정착 (2026)

Tailwind 마이그레이션 자동 변환, CMS 콘텐츠 생성, PR 리뷰 응답 같은 반복 작업을 에이전트 스킬로 만들어 팀 프로세스에 정착시켰습니다. 에이전트 결과물은 시각적 회귀 검증과 성능 벤치 하니스 같은 검증 루프로 받쳐, 자동화할 일과 사람이 판단할 일을 구분했습니다.

코드 배포 없이 운영하는 전시 시스템 (2025)

어드민에서 옵션 필드를 조합해 만들던 기획전 UI는 동작하지 않는 조합이 숨어 있었고, 새 옵션이 생길 때마다 DB 마이그레이션이 필요했습니다. 사용례를 분석해 모듈 타입을 정의하고 레이아웃 설정을 JSON 필드로 일원화해, 운영자에게는 모듈별로 유효한 옵션만 보이도록 재설계했습니다.

이어서 메인 화면 자체를 설정으로 교체하는 구조를 만들었습니다. 프로모션 기간에 맞춰 메인 페이지와 탭이 자동 전환되고, 더현대 백화점관처럼 별도 테마의 브랜드관도 배포 없이 열 수 있게 됐습니다. 이 구조가 이듬해 Content CMS 플랫폼으로 발전했습니다.

주문서 개선과 e2e 회귀 테스트 (2025)

상태가 얽혀 있던 주문서를 react-hook-form과 컨텍스트로 재구조화하고, 클라이언트 유효성 검사를 서버 규칙과 일치시켰습니다. 쿠폰·포인트·배송지 조합을 검증하는 Playwright e2e를 구축해 결제 흐름의 회귀를 막았고, 최대할인 쿠폰처럼 엣지 케이스가 많은 도메인 규칙은 QA 라운드마다 경계 조건을 좁혀 안정화했습니다.

이전 주요 성과 (2023~2025)

스타일링 서비스 TF에서 프론트엔드 리드를 맡아 주니어 개발자와 페어 프로그래밍·코드리뷰를 진행했습니다. 동영상 스트리밍과 가상화 기반 피드를 구축했고, 출시 4개월 후 약 40명의 인플루언서가 4,000개 이상의 콘텐츠를 등록해 평균 10%의 장바구니 전환율을 기록했습니다.

매달 이어지는 프로모션 이벤트의 반복 UI와 API를 공통 모듈로 추상화해 개발 속도를 높였습니다. 이외에도 Next.js 12→14 업그레이드, Storybook 기반 공용 컴포넌트 통합, jest→vitest 전환, 카페24 몰·어드민의 자사 플랫폼 이관을 수행했습니다.

에버온 (새 창에서 열림) (2022.03 ~ 2022.10)

에버온에서 프론트엔드 개발자로 근무하며 차세대 백오피스 기능 구축을 담당했습니다. React Admin과 MUI를 중심으로 프론트엔드를 개발했고, 필요 시 Node(Express), Java(Spring Boot) 영역과도 협업하며 제품 전체 흐름을 이해하는 경험을 쌓았습니다. Keycloak을 이용한 RBAC SSO를 구현하고, Dooray! 그룹웨어 연동과 nivo 그래프 모듈을 이용한 통계 대시보드를 구축했습니다. 게시판으로 관리되던 고객 문의를 칸반보드 UI로 이관해 관리 환경을 개선했고, SVN으로 관리하던 소스코드를 Gitlab으로 이관해 소스코드 관리 환경도 개선했습니다.

포시에스 (새 창에서 열림) (2019.06 ~ 2022.02)

포시에스에서 소프트웨어 엔지니어로 근무하며 OZReport HTML5 뷰어 솔루션 개발을 담당했습니다. IE8부터의 브라우저 호환성과 스크린리더 접근성을 지원했고, 동일 로직을 쓰는 C++, C#, Applet, ActionScript 제품 간 기능 포팅을 경험했습니다. 인증 바코드·인감/카드 스캔(opencv-js, zxing) 등 외부 솔루션 연동과 뷰어 동기화 중계 서버 모듈도 개발했습니다.

기타 경험

동국대학교 멀티미디어공학과에서 CS 기초를 다지고, 쌍용교육센터 Python/Java 실무 과정 수료와 미래융합정보기술 QA 인턴을 거치며 개발·품질 양쪽의 기본기를 쌓았습니다. 영국 워킹홀리데이 경험을 통해 낯선 환경에서 스스로 문제를 해결하고 적응하는 역량을 키웠습니다.

소프트 스킬

저는 함께 성장하는 팀 문화를 지향합니다. 요구사항은 언제든 바뀔 수 있다는 점을 염두에 두고 먼저 질문하며, 상황을 빠르게 공유하고, 혼자 해결하기 어려운 문제는 적절한 타이밍에 도움을 요청합니다. 팀 안에서 업무 경계를 과도하게 나누기보다 제품 관점에서 필요한 일을 함께 해결하는 태도를 중요하게 생각합니다.

토이 프로젝트

📏 옷자 otja(2026) (새 창에서 열림)에서는 중고거래 때마다 옷 치수를 재서 적는 일이 번거로워, A4 용지나 카드처럼 크기를 아는 물체와 함께 찍으면 사진에서 실측 치수를 계산해 주는 앱을 만들어 App Store에 출시했습니다.

🎸 비인기곡외판원노동조합 밴드 사이트(2026) (새 창에서 열림)에서는 취미 밴드의 공식 사이트를 만들어 밴드 소개와 공연 정보를 웹에서 확인할 수 있도록 했습니다.

🌐 wcag-handbook(2026) (새 창에서 열림)에서는 WCAG 2.2와 KWCAG 매핑 정보를 함께 정리해 접근성을 학습할 수 있는 페이지를 만들었습니다.

🔔 모바일 청첩장(2025) (새 창에서 열림)에서는 모바일 결혼 청첩장을 직접 만들어서 공유했습니다.

👕 메디쿼터스 자사몰 상품 모아보는 페이지(2025) (새 창에서 열림)에서는 Google OAuth 인증, 검색, 찜하기, 브랜드 탐색 기능을 제공해 임직원이 할인 상품을 빠르게 찾을 수 있도록 구현했습니다.

🍅 domado(2024) (새 창에서 열림)는 개인적으로 뽀모도로를 사용하기 위해 만든 Electron 앱입니다.

🧗 Pick Your Holds(2022) (새 창에서 열림)에서는 사진 촬영 후 클라이밍 문제를 만들어 이미지를 공유할 수 있는 웹앱을 만들었으며, 초기 vanilla JS(jQuery)로 만들고 React로 마이그레이션했습니다.

🇰🇷 react-simple-south-korea-map-chart(2022) (새 창에서 열림)는 지역 통계 시각화를 쉽게 적용할 수 있도록 만든 React 컴포넌트로 npm에 배포했습니다.