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

몰입할 수 있는 환경을 선호합니다.
소통을 최우선으로 생각합니다.
코드리뷰, 페어 프로그래밍을 좋아합니다.
근거 있는 코드를 작성하기 위해 노력합니다.
필요 시 테스트 코드를 작성합니다.
작성된 코드에 관한 다양한 의견을 환영합니다.
풀스택으로 일해 본 경험도 있습니다.
커서, 클로드같은 AI 도구를 통제 가능한 범위로 활용합니다.

2022.11 ~ 현재
FE Developer
MAU 100만 일본 커머스 플랫폼 nugu를 개발 중입니다.
프로젝트 초기 풀스택으로 개발에 참여했습니다.

UI의 미묘한 차이를 발견하고 개선하는 것에 보람을 느껴 현재는 FE 개발에 집중하고 있습니다.

const MEDIQUITOUS = {
  fe: {
    // nugu mall
    react: [
      'Next.js 14 page router',
      'storybook',
      'react-bootstrap',
      'jotai',
      'react-query',
      'tanstack-virtual',
      {
        testing: ['vitest', 'testing-library/react'],
      },
    ],
    // back office
    svelte: ['SvelteKit', 'svelte4'],
  },
  be: {
    python: {
      django: ['django-rest-framework'],
    },
  },
  vcs: ['git', 'github'],
}

2022.03 - 2022.10 (7개월)
FE Developer
차세대 백오피스 기능 개발을 담당했습니다.

기반을 만들어가는 경험을 했습니다.
제약 없는 환경으로 BE 개발도 해볼 수 있었습니다.
개발문화가 성숙한 조직에서 일하고 싶어 이직했습니다.

const EVERON = {
  fe: {
    js: ['typescript', 'es6'],
    react: ['react-admin', 'mui'],
  },
  be: {
    node: ['express'],
    java: ['spring boot'],
  },
  vcs: ['git', 'gitlab'],
}

2019.06 - 2022.02 (2년 8개월)
Software Engineer
OZReport HTML 뷰어 기능을 개발했습니다.

개발 프로세스에 맞춰 일하는 법을 배웠습니다.
주어진 과제를 의도대로 구현하는 것에 집중했습니다.
오래되고 복잡한 솔루션 코드를 다루는 경험을 했습니다.
다양한 기술 스택을 경험해보고 싶어 이직했습니다.

const FORCS = {
  fe: {
    html5: {
      js: ['vanila js(ES5)', 'jQuery'],
    },
    flash: ['ActionScript'],
    java: ['Applet'],
  },
  vcs: ['git', 'gitlab'],
}

Python Java 응용 SW 실무 개발자 양성과정 수료
2018.10 - 2019.05 (7개월) 

2018.01 - 2018.06 (5개월)
인턴으로 개발 중이던 솔루션 QA 업무를 수행했습니다.

YMS(Youth Mobility Scheme) 비자로 해외 체류했습니다.
2015.06 - 2017.06 (2년) 

2010.03 - 2018.08 

함께 자라기를 지향합니다.
애자일 선언을 따르기 위해 노력합니다.
요구사항이 틀릴 수 있다는 점을 염두에 두고 고민합니다.
적극적으로 질문하고 상황을 공유합니다.
혼자 해결하기 어려운 문제는 도움을 요청합니다.
팀 안에서 내 일과 남의 일의 경계를 두지 않으려 합니다.

🤔 배경
⋅ 기획전 요약구좌 UI는 어드민에서 옵셔널한 필드값을 조합해서 설정 하는 구조였음
  ⋅ 동작하지 않는 옵션 조합이 암묵적으로 존재
  ⋅ 선택 가능한 조합수가 너무 많아져 인지부하가 커졌고 신규 MD분들이 사용하기 어려워함
⋅ 동적 UI를 위한 기획전 모델 필드값들이 나눠져 있어 UI 옵션 추가 시 DB 마이그레이션이 필요했음

🚧 진행
⋅ 용례 분석을 통해 미미하게 사용되는 불필요한 필드 옵션값 제거
⋅ 자주 사용되는 기획전 요약구좌 UI 설정 사용가이드를 기획요청하고 사용가이드 버튼을 추가하여 팝업 모달로 사용가이드를 제공
⋅ 기획팀과 논의 후 어드민에서 설정 가능한 모듈타입을 정의. 모듈별로 동적으로 설정가능한 필드만 노출하도록 변경
⋅ 기획전 모델에 동적 UI 관련된 필드값들을 관리하는 JSON필드 추가
  ⋅ 파이썬 쿼리셋 갱신 스크립트 작성, 데이터 마이그레이션 진행하여 기존 개별 UI 필드들을 JSON필드로 일원화
  ⋅ 기존 개별 UI 옵션 필드들은 deprecated 처리
⋅ 몰에서 개별 UI 필드 조건별로 동적 렌더링하던 부분을 모듈 타입별로 렌더링하도록 분기 단순화

🙌 결과
⋅ 기획전 요약구좌 UI 모듈을 구분하고 모듈별 설정 가능한 옵션값만 동적 노출하여 MD분들이 원하는 UI를 쉽게 설정하게됨
⋅ 신규 요약구좌 모듈이나 기능 요청이 들어왔을 때 FE레벨에서 유연하게 대처 가능하게됨

🤔 배경
⋅ 일본 인터넷 속도가 한국에 비해 느려 속도관련 이슈들이 주기적으로 인입
⋅ 기존 몰의 크롬 개발자도구 라이트하우스, 퍼포먼스 탭 측정결과가 좋지 않음

🚧 진행
⋅ 큰 컴포넌트를 작은 컴포넌트로 분리하여 관련 상태와 훅 분리
⋅ 불필요한 프롭 드릴링 제거: 전역 상태 공유는 jotai Atom, 중첩된 컴포넌트 상태 공유는 컨텍스트 API 활용
⋅ react-hook-form 모듈 적용: 상태값 관리 위임, 필드 컴포넌트 내 유효성 검사 코드 포함으로 응집도 향상
⋅ react-query로 서버 상태 관리하여 캐시 활용, 불필요한 요청 제거
⋅ 윈도우 가상화(tanstack/react-virtual) 적용하여 뷰포트 밖 요소 렌더링 제거
⋅ 번들 사이즈 감소를 위해 동일 기능 모듈 교체 (classNames → clsx, react-virtualized → tanstack/react-virtual)
⋅ next/script 로드 전략 변경(beforeInteractive → afterInteractive)하여 Total Blocking Time 개선
⋅ CDN 프리커넥트 링크 추가하여 연결시간 단축
⋅ LCP 개선을 위해 가장 큰 렌더링 요소인 이미지에 fetchPriority high 추가
⋅ CLS 방지를 위해 렌더링 요소와 동일한 플레이스 홀더 추가 및 최소 높이 설정
⋅ 상하 여백 전용 컴포넌트 제거, 주변 요소 margin/padding 조정으로 DOM 요소 감소
⋅ SSR 대신 ISR 페이지로 변경 (서버 렌더링이 매번 필요하지 않거나 데이터 변경이 빈번하지 않은 페이지)

🙌 결과
⋅ 컴포넌트 분리로 문제 발생 시 확인해야 할 컴포넌트 코드 감소, DX 개선
⋅ 번들 사이즈 약 0.5MB 감소
⋅ 몰 페이지 로딩 속도 개선
  ⋅ 메인 페이지 기준 측정결과
    ⋅ FCP 이전측정 기록 깜빡 🫠 → 404ms
    ⋅ LCP 이전측정 기록 깜빡 🫠 → 0.48s
    ⋅ Total Blocking Time 이전측정 기록 깜빡 🫠 → 600ms 
    ⋅ 퍼포먼스 점수 28 → 43
    ⋅ CLS 0 달성 🎉
⋅ 윈도우 가상화 적용 후 최초 상품 카드 렌더링 요소 최대 95% 감소 (최대 감소 페이지: 1403개 → 64개)

🤔 배경
⋅ 인스타 스토리처럼 브랜드와 인플루언서들의 스타일 컨텐츠를 올릴 수 있는 서비스 니즈

🚧 진행
⋅ 기획 1명, BE 1명, FE 3명 TF팀 구성, FE 리드 역할
⋅ 주니어 개발자들과 페어 프로그래밍으로 진행하며 코칭 및 코드리뷰
⋅ 동영상 스트리밍 기능 구현(hls.js)
⋅ 인피니티 스크롤 시 비디오 누적으로 인한 메모리 오버플로우 이슈 해결: 윈도우 가상화 구현(react-virtualized)

🙌 결과
⋅ 예상 기한에 맞춰 이슈 없이 서비스 출시
⋅ 릴리즈 4개월 경과 후 7월 기준 약 500명의 인플루언서가 4000개 이상의 컨텐츠 등록, 평균 10% 장바구니 전환율 달성

🤔 배경
⋅ 마케팅 팀에서 주기적으로 인터렉티브한 요소가 포함된 프로모션 페이지 개발요청

🚧 진행
⋅ 마케팅, 기획, 디자인팀과 협업
⋅ 스토리 보드 참고하여 인터렉티브한 프로모션 페이지 개발
⋅ 출석체크, 랜덤쿠폰 발급 등 프로모션 API 백앤드 개발
  ⋅ TDD로 프로모션 전 후 엣지 케이스 테스트 작성, 안정성 확보
⋅ 반복되는 프로모션 UI 패턴을 파악, 공통 컴포넌트, 훅으로 추출하여 재사용성 확보
  ⋅ 프로모션 기간에 맞춰 메인페이지 자동 교체 기능 추가하여 불필요한 배포 제거
⋅ 프로덕션 환경에서 설정한 프로모션 데이터를 로컬 개발환경에서 사용하기 위해 데이터 dump 스크립트 구현
  ⋅ 로컬 환경에서 프로덕션 데이터 기준으로 작업을 하고 바로 배포할 수 있는  기반 마련

🙌 결과
⋅ 다양한 프로모션 요구사항에 소화, 큰 이슈 없이 분기별 프로모션 진행중
⋅ 반복 사용되는 컴포넌트, 훅 코드를 개선하여 프로모션 페이지 개발 속도 향상

🤔 배경
⋅ 작성한 코드를 리뷰받을 때 타입 import type 키워드 추가 요청이 많이 발생
⋅ type 키워드를 강제하는 TS 컴파일러 옵션 필요

🚧 진행
⋅ TS verbatimModuleSyntax 컴파일러 옵션 추가
⋅ 208개의 파일 import 정리

🙌 결과
⋅ 빌드타임 약 8% 빌드 속도 향상

🤔 배경
⋅ 개발 환경에서 레이아웃이나 UI 컴포넌트 작업 시 CDN 이미지 리소스들은 쓸 필요가 없다 생각함

🚧 진행
⋅ 개발환경에서 더미 이미지를 사용하는 환경변수 추가

🙌 결과
⋅ 개발환경에서 불필요한 CDN 이미지 요청 제거

🤔 배경
⋅ PR 요청 시 개발자마다 다른 내용을 제공하여 맥락 파악에 어려움

🚧 진행
⋅ git PR template MD파일 추가
⋅ 개요, 주요 작업내용, 리뷰 요청사항, 참고링크 기입 안내

🙌 결과
⋅ PR 코드리뷰 시 맥락 파악 용이, 리뷰요청자에게 질문 빈도 감소

🤔 배경
⋅ 자사몰 패션 브랜드 쇼핑몰이 많아 신상 구경에 어려움

🚧 진행
⋅ 자사몰 패션브랜드 신상을 모아보고 할인가, 즐겨찾기를 할 수 있는 토이프로젝트 진행

🙌 결과
⋅ 나와 동료들이 편하게 신상품을 구경할 수 있게 됨

nugu 몰 UI 고도화
⋅ nextjs12→14로 버전업: nextjs 마이너 이슈 해결, 앱 라우터로 전환 가능한 기반 구축
⋅ Figma 디자인 기반 디자인 리뉴얼: 기획, 디자인 팀과 협업하여 UI/UX 개선
⋅ Storybook을 도입하여 일부 공용 컴포넌트들을 스토리로 추출: 구현이 파편화된 공용 컴포넌트들을 하나의 컴포넌트로 통합
⋅ vitest, react testing library로 리팩터링 진행한 일부 컴포넌트들 TDD 진행: 테스트 코드 작성으로 컴포넌트 안정성 확보

nugu 기획전 퍼블리싱
⋅ 디자인 요구사항에 맞춰 flex, grid를 이용하여 다양한 레이아웃 구성, 영상, 애니메이션 등 요구사항을 맞추기 위해 vimeo sdk, aos 등 모듈을 사용

nugu 몰, 어드민(Back Office) 개발
⋅ cafe24 몰과 어드민을 자사 몰, 어드민으로 이관: cafe24 종속성 제거
⋅ 스크래핑을 통해 cafe24 데이터 마이그레이션
⋅ 게시물 관리 기능(tinymce, ace editor, dropzone) 구현
⋅ 카테고리 관리 기능(fancytree) 구현
⋅ 상품 관리 기능 구현
⋅ 셀메이트 상품 동기화 기능 개발

⋅ react-admin 프레임워크를 이용한 어드민 페이지 구현
⋅ Keycloak을 이용한 RBAC SSO 구현
⋅ Dooray! 그룹웨어 연동
⋅ nivo 그래프 모듈을 이용한 통계 대시보드 구축
⋅ 게시판으로 관리되던 고객 문의를 칸반보드 UI로 이관: 고객 문의 관리 환경 개선
⋅ SVN으로 관리하던 소스코드를 Gitlab으로 이관: 소스코드 관리 환경 개선

⋅ 다양한 브라우저 호환성(IE8~)을 고려하는 개발 경험
⋅ 동일 로직을 사용하는 다양한 언어(C++, C#, Applet, ActionScript)의 제품들이 있어 다양한 개발 언어로 기능 포팅 경험
⋅ 뷰어 내용을 스크린 리더(센스리더)로 읽을 수 있도록 접근성 개선
⋅ 전자문서 출력 시 인증 바코드 솔루션 연동(MarkAny, SGA)
⋅ opencv-js, zxing 라이브러리를 이용하여 인감 스캔, 카드 스캔 기능 구현
⋅ 뷰어 동기화 중계 서버 모듈 개발
⋅ WYSIWYG 편집기(summernote) 임베딩 기능 개발

모바일 청첩장 개발했습니다. 방명록, 길찾기 기능을 제공했습니다.

🛠️ 사용
⋅ NextJS app router RSC
⋅ tanstack query
⋅ tailwindcss
⋅ firebase
⋅ NAVER map API # 라이센스 변경으로 현재는 제거

🚀 배포
⋅ Vercel

임직원용 자사몰 할인 상품을 모아볼 수 있는 페이지를 개발했습니다.
cafe24로 운영중인 여러 자사몰 상품들을 모아볼 수 있게 했습니다.

🛠️ 사용
⋅ NextJS app router RSC
⋅ tanstack query
⋅ tailwindcss

🚀 배포
⋅ Vercel

개인적으로 뽀모도로를 사용하기 위해 일렉트론 뽀모도로 앱을 만들었습니다.

🛠️ 사용
⋅ electron-react-boilerplate

🚀 배포
⋅ github release

지역별 통계 정보를 보여줄 수 있는 간단한 한국 지도 차트 컴포넌트를 만들었습니다.

🛠️ 사용
⋅ React

🚀 배포
⋅ npm

사진 촬영 후 클라이밍 문제를 만들어 이미지를 공유할 수 있는 웹앱을 만들었습니다.

🛠️ 사용
⋅ vanilaJS(jQuery), React

🚀 배포
⋅ 이전 블로그(github.io)에 배포