안녕하세요. 사용자 경험을 중시하는 프론트엔드 개발자 오영근입니다.

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

• Email: dureng5@gmail.com
• Website: younggeun0.dev
• GitHub: github.com/younggeun0

일하는 방식

서비스를 직접 써보며 불편을 찾는 편입니다. 미묘한 레이아웃 틀어짐, 폰트 크기 불일치처럼 놓치기 쉬운 UI 불일치를 발견하고 고치는 일을 중요하게 생각합니다. 구현 전에는 근거를 먼저 맞추고, 필요한 경우 테스트로 리스크를 줄입니다. 코드리뷰와 페어 프로그래밍을 선호하며, 작성한 코드에 대한 다양한 피드백을 적극적으로 수용합니다. 최근에는 Claude Code와 Codex를 병렬로 운용하는 멀티 에이전트 작업 방식을 실무에 적용하며, AI 도구를 단순 보조 수단이 아닌 개발 흐름의 일부로 다루고 있습니다.

메디쿼터스 (2022.11 ~ 현재)

메디쿼터스에서 프론트엔드 개발자로 일하며 MAU 100만 일본 커머스 플랫폼 nugu를 개발하고 있습니다. 초기에는 풀스택으로 개발에 참여했지만, 이후 사용자 인터페이스의 완성도와 사용성 개선에 더 집중하기 위해 프론트엔드 역할에 전념했습니다.

nugu 몰과 백오피스를 함께 다루며 Next.js, Storybook, TanStack Query, Jotai, TanStack Virtual 등 다양한 도구를 활용해 성능과 운영 효율을 높였습니다. 백오피스에서는 Svelte 기반 업무도 병행했고, 서버 측에서는 Python(Django REST Framework)으로 백엔드 개발에도 참여했습니다.

프로모션 페이지 빌더 CMS 구축 (2026)

마케팅/운영팀이 프로모션 페이지를 만들 때마다 개발자에게 의존하던 병목이 있었습니다. 관리자 프리뷰와 실서비스 화면이 다르게 보이는 문제도 반복됐습니다. 이를 해결하기 위해 블록 기반 페이지 빌더 CMS를 구축했습니다.

관리자 앱에서 이미지(슬라이더·갤러리·핫스팟), HTML, 구분선, 섹션(중첩·가로배치·비율조정), 탭 내비게이션, 그리고 기획전·상품목록·쿠폰·카운트다운·버튼·일일특가 등 다수의 동적 위젯 프리셋을 지원하는 에디터를 직접 설계·구현했습니다. 드래그앤드롭 기반 블록 정렬과 섹션 간 이동, 블록 복사/붙여넣기, Undo/Redo 히스토리, 실서비스 CSS를 그대로 반영한 WYSIWYG 프리뷰를 제공합니다.

가장 큰 제약은 기존 기획전 본문이 텍스트 필드 하나에 저장된다는 점이었습니다. 이 구조를 바꾸지 않고, 블록 트리 JSON을 HTML 주석에 직렬화해 같은 필드에 저장했습니다. 덕분에 기존 HTML 기획전과 새 블록 기반 기획전이 공존했고, 별도 데이터 마이그레이션 없이 기존 nugu 몰 렌더 파이프라인을 재사용할 수 있었습니다.

서비스 프론트엔드에서는 HTML 주석 마커를 placeholder로 치환한 뒤 React Portal로 동적 위젯을 마운트하는 구조를 적용했습니다. 에디터와 어드민, 미리보기 창 사이에는 postMessage 핸드셰이크를 구성해 초기 데이터 유실을 방지했고, 실제 기획전 상세 컴포넌트를 재사용해 프리뷰-실서비스 불일치를 줄였습니다.

템플릿은 localStorage에 저장하고 JSON import/export로 팀 내 공유를 빠르게 열었으며, 역직렬화 시 Zod 스키마 검증, 핫스팟 URL의 sanitizeHref XSS 방지 등으로 안정성과 보안을 강화했습니다. 그 결과 반복되는 프로모션 구좌를 템플릿으로 재사용할 수 있는 기반을 만들고, 프로모션 제작의 개발자 의존도와 수정 왕복 비용을 줄였습니다. 자세한 설계 과정은 HTML 주석 안에 페이지 빌더를 숨겼다에 정리했습니다.

nugu 몰 Tailwind CSS 이관 (2026)

기존 몰에는 scss, styled-jsx, Bootstrap 스타일링이 함께 쌓여 있어 스타일 관리 복잡도가 높았습니다. 처음에는 화면 단위의 점진적 전환으로 접근했습니다. Tailwind CSS와 Bootstrap 공존 환경을 구성하고, page diff를 위한 MCP 도구와 이미지 리그레션 검증 루프를 준비한 뒤 AI 에이전트를 활용해 전환 속도를 크게 높였습니다. 그 결과 CSS 번들이 413.3KB → 157.2KB로 약 62% 감소(gzip 66.6KB → 25.0KB, brotli 49.1KB → 20.8KB)했고, react-bootstrap 제거로 First Load JS(shared)도 916KB → 850KB(-7.2%) 줄었으며, 전체 static 폴더 기준 약 2MB(10%) 감소를 달성했습니다.

이 과정에서 AI 에이전트와 검증 루프를 활용해 작업 방식이 바뀐 경험은 점진적으로 갈 수밖에 없다 믿었던 일이, 주말 사흘 만에 끝났다에 정리했습니다.

nugu 몰 기획전 사용성 개선 (2025)

기획전 요약구좌 UI가 과도한 옵션 조합으로 복잡해진 문제를 해결했습니다. 실제 사용 패턴을 분석해 불필요한 옵션을 정리하고, 모듈 타입 중심으로 설정 구조와 데이터 모델을 단순화했습니다. 기존 분산 필드를 JSON 기반으로 통합해 마이그레이션을 수행했고, 결과적으로 신규 기능 대응 속도와 운영 편의성이 모두 개선되었습니다.

nugu 몰 최적화 (2025)

일본 네트워크 환경에서 반복적으로 제기되던 속도 이슈를 해결하기 위해 구조적 최적화를 진행했습니다. 컴포넌트 분리, 전역/지역 상태 재설계, TanStack Query 캐시 활용, 가상화 렌더링, 번들 경량화, 스크립트 로딩 전략 조정, LCP/CLS 개선 등을 종합적으로 적용했습니다. 번들 사이즈 약 0.5MB 감소, 윈도우 가상화 적용 후 최초 상품 카드 렌더링 요소가 최대 95% 감소(1403개 → 64개)되었고, CLS 0을 달성했습니다.

원인을 특정하기 어려웠던 서버 메모리 증가 문제는 임시 모니터링 엔드포인트와 힙 스냅샷 비교로 추적했습니다. 시간 간격을 두고 수집한 스냅샷에서 해제되지 않는 객체를 찾고, 해당 객체를 붙잡고 있던 참조 경로를 거슬러 올라가 원인을 좁혔습니다. 그 결과 ISR 캐시가 아니라 SSR 중 생성된 TanStack Query의 긴 gcTime 타이머가 요청별 QueryClient를 붙잡는 문제임을 확인했고, 서버 환경에서 캐시 수명을 즉시 정리하도록 조정해 배포 후 메모리 추이가 안정화되는 것을 확인했습니다. 이 과정은 원인을 모르는 메모리 누수, 추측 대신 측정부터 시작했다에 정리했습니다.

이미지 최적화에서는 오래 유지되던 q=100 설정을 직접 검증했습니다. sharp와 Squoosh로 품질별 차이를 비교해 WebP 품질을 q=85로 조정하고, 이미지 기본 로딩 정책을 lazy로 바꾸되 LCP 후보 이미지는 eager로 명시하는 방식으로 적용했습니다. 배포 후 초기 이미지 전송량은 홈 57%, 상품 상세 95%, 디렉터 페이지 70% 감소했고, LCP도 주요 라우트에서 16~29% 개선됐습니다. 이 과정은 의심한 적 없던 q=100, 직접 눈으로 확인하기로 했다에 정리했습니다.

nugu 몰 스타일링 서비스 개발 (2025)

인스타 스토리처럼 브랜드와 인플루언서들의 스타일 컨텐츠를 올릴 수 있는 서비스를 개발했습니다. 기획 1명, BE 1명, FE 3명으로 구성된 TF팀에서 프론트엔드 리드를 맡아 주니어 개발자들과 페어 프로그래밍을 진행하며 코칭 및 코드리뷰를 수행했습니다. hls.js를 활용한 동영상 스트리밍 기능을 구현하고, 인피니티 스크롤 시 비디오 누적으로 인한 메모리 오버플로우 이슈를 윈도우 가상화(react-virtualized)로 해결했습니다. 릴리즈 4개월 후 약 40명의 인플루언서가 4000개 이상의 컨텐츠를 등록했고, 평균 10% 장바구니 전환율을 달성했습니다.

nugu 몰 프로모션 페이지 개발 (2025)

마케팅 팀의 주기적인 프로모션 페이지 개발 요청에 대응하며 마케팅, 기획, 디자인 팀과 협업했습니다. 스토리보드를 기반으로 인터렉티브한 프로모션 페이지를 개발하고, 출석체크·랜덤쿠폰 발급 등 프로모션 API 백엔드도 TDD로 안정성을 확보했습니다. 반복되는 UI 패턴을 공통 컴포넌트·훅으로 추출하고, 프로모션 기간에 맞춘 메인페이지 자동 교체 기능을 추가해 불필요한 배포를 제거했습니다. 더현대 협업처럼 메인 노출이 필요한 건은 기존 기획전 구조를 확장하고, 미들웨어에서 게시 상태를 확인하는 동적 리다이렉트로 예약 노출을 안정적으로 지원했습니다.

2023~2024 작업 요약

Next.js 12→14 버전업으로 앱 라우터 전환 기반을 구축하고, Storybook을 도입해 파편화된 공용 컴포넌트를 통합했습니다. vitest·react-testing-library 기반 TDD로 리팩터링을 진행했으며, cafe24 몰·어드민을 자사 플랫폼으로 이관(데이터 마이그레이션·상품/게시물 관리 등)했습니다.

에버온 (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 제품들 간 기능 포팅을 경험했습니다. 뷰어 내용을 센스리더로 읽을 수 있도록 접근성을 개선했고, 전자문서 출력 시 인증 바코드 솔루션(MarkAny, SGA)을 연동했습니다. opencv-js와 zxing 라이브러리를 이용한 인감·카드 스캔 기능을 구현했고, 뷰어 동기화 중계 서버 모듈과 WYSIWYG 편집기(summernote) 임베딩 기능을 개발했습니다.

기타 경험

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

소프트 스킬

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

토이 프로젝트

🌐 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에 배포했습니다.