atMediquitous | 오영근

/**
*atMediquitous
*
*-2022.11 ~ 현재 · 프론트엔드 개발자
*-MAU 100만 일본 커머스 플랫폼 nugu
*-메디쿼터스 · nugu 몰
*
*
*/
function atMediquitous(): ProfileBuilder {
const stack = {
  fe: {
    react: [
      'Next.js 16 (app router)',
      'React Server Components',
      'tailwindcss',
      'Jotai',
      'TanStack Query',
      'TanStack Virtual',
      'Storybook',
      {
        testing: [
          'Vitest',
          'testing-library/react',
          'Playwright',
          'MSW',
        ],
      },
    ],
    svelte: ['SvelteKit', 'Svelte 4'],
  },
  be: {
    python: {
      django: ['Django REST Framework'],
    },
  },
  platform: [
    'Docker Compose',
    'Redis',
    'Kafka',
    'OpenSearch',
  ],
  vcs: ['git', 'GitHub'],
}
return this
.withStack(stack)
.()
.()
.()
.()
.()
.()
.()
}

/**
*migratePagesToAppRouter
*
*-선행 정비, 공용 컴포넌트, 페이지, 검증 순으로 이관했습니다.
*-다국어 스택 교체와 React Compiler 도입도 함께 진행했습니다.
*
*/
function migratePagesToAppRouter(): ProfileBuilder {
return this.addExperience({context: "Pages Router 기반 nugu 몰",
contribution: "107개 페이지를 App Router로 전환",
impact: "RSC·PPR·공유 캐시 기반 확보"
})
}

/**
*optimizeMallPerformance
*
*-가상화로 렌더링 요소를 95% 줄이고 CLS 0을 달성했습니다.
*-힙 스냅샷으로 SSR 메모리 누수의 참조 경로를 추적했습니다.
*-PPR 하이드레이션 오류는 깨지는 경계를 찾아 격리했습니다.
*-원인 모를 메모리 누수, 추측 대신 측정부터 했다
*-3년간 아무도 건드리지 않던 이미지 q=100을 다시 측정했다
*
*/
function optimizeMallPerformance(): ProfileBuilder {
return this.addExperience({context: "렌더링·캐시·배포 안정성",
contribution: "스트리밍·Redis·이미지 구조 개선",
impact: "이미지 57~95%·LCP 16~29% 개선"
})
}

/**
*buildContentCMS
*
*-블록 트리를 기존 텍스트 필드의 HTML 주석에 저장했습니다.
*-기존 HTML 기획전과 페이지 빌더를 데이터 이관 없이 공존하게 했습니다.
*-마이그레이션 없이 기존 HTML에 블록 CMS를 추가한 방법
*
*/
function buildContentCMS(): ProfileBuilder {
return this.addExperience({context: "개발자 의존적인 프로모션 제작",
contribution: "CMS 에디터·임베드 컴포넌트 구축",
impact: "캠페인 제작을 기획자 셀프서비스로 전환"
})
}

/**
*migrateDomainsToBff
*
*-검색·쿠폰·주문·프로모션을 작은 단위로 나눠 이관했습니다.
*-두 백엔드의 응답 차이가 화면에 영향을 주지 않게 처리했습니다.
*-두 API로 같은 화면을 렌더링해 비교하는 회귀 테스트를 만들었습니다.
*
*/
function migrateDomainsToBff(): ProfileBuilder {
return this.addExperience({context: "모놀리스에서 BFF·MSA로 전환",
contribution: "4개 도메인의 호출 경로 이관",
impact: "레거시 테스트 정리로 테스트 시간 73% 단축"
})
}

/**
*buildLocalDevPlatform
*
*-Kafka 이벤트와 검색 색인까지 로컬에서 재현했습니다.
*-CI는 병목을 실측해 가장 큰 DB 셋업부터 캐시했습니다.
*
*/
function buildLocalDevPlatform(): ProfileBuilder {
return this.addExperience({context: "로컬 재현이 어려운 MSA 통합 흐름",
contribution: "로컬 풀스택·e2e 환경 구축",
impact: "CI DB 셋업 161초 → 2.5초"
})
}

/**
*migrateBootstrapToTailwind
*
*-자동 변환 도구와 시각 회귀 검증 루프를 함께 만들었습니다.
*-100건 이상의 후속 UI 차이는 추적 목록으로 관리했습니다.
*-점진적으로 준비하던 Tailwind CSS 마이그레이션의 80%가 사흘 만에 끝났다
*
*/
function migrateBootstrapToTailwind(): ProfileBuilder {
return this.addExperience({context: "Bootstrap 기반 스타일 시스템",
contribution: "Tailwind CSS v4로 전면 이관",
impact: "CSS 62%·공유 JS 7.2% 감소"
})
}

/**
*highlightEarlierWork
*
*-비디오 누적으로 인한 메모리 문제는 피드 가상화로 해결했습니다.
*-TF에서는 페어 프로그래밍과 코드리뷰를 병행했습니다.
*-프로모션 예약 노출로 반복 배포를 줄였습니다.
*
*/
function highlightEarlierWork(): ProfileBuilder {
return this.addExperience({context: "2023~2025 nugu 몰과 백오피스",
contribution: "스타일링 TF 리드·프로모션 운영 개선",
impact: "콘텐츠 4,000개·장바구니 전환율 10%"
})
}

/** *atMediquitous * *-2022.11 ~ 현재 · 프론트엔드 개발자 *-MAU 100만 일본 커머스 플랫폼 nugu *-메디쿼터스 · nugu 몰 * * */ function atMediquitous(): ProfileBuilder { const stack = { fe: { react: [ 'Next.js 16 (app router)', 'React Server Components', 'tailwindcss', 'Jotai', 'TanStack Query', 'TanStack Virtual', 'Storybook', { testing: [ 'Vitest', 'testing-library/react', 'Playwright', 'MSW', ], }, ], svelte: ['SvelteKit', 'Svelte 4'], }, be: { python: { django: ['Django REST Framework'], }, }, platform: [ 'Docker Compose', 'Redis', 'Kafka', 'OpenSearch', ], vcs: ['git', 'GitHub'], } return this .withStack(stack) .() .() .() .() .() .() .() } /** *migratePagesToAppRouter * *-선행 정비, 공용 컴포넌트, 페이지, 검증 순으로 이관했습니다. *-다국어 스택 교체와 React Compiler 도입도 함께 진행했습니다. * */ function migratePagesToAppRouter(): ProfileBuilder { return this.addExperience({context: "Pages Router 기반 nugu 몰", contribution: "107개 페이지를 App Router로 전환", impact: "RSC·PPR·공유 캐시 기반 확보" }) } /** *optimizeMallPerformance * *-가상화로 렌더링 요소를 95% 줄이고 CLS 0을 달성했습니다. *-힙 스냅샷으로 SSR 메모리 누수의 참조 경로를 추적했습니다. *-PPR 하이드레이션 오류는 깨지는 경계를 찾아 격리했습니다. *-원인 모를 메모리 누수, 추측 대신 측정부터 했다 *-3년간 아무도 건드리지 않던 이미지 q=100을 다시 측정했다 * */ function optimizeMallPerformance(): ProfileBuilder { return this.addExperience({context: "렌더링·캐시·배포 안정성", contribution: "스트리밍·Redis·이미지 구조 개선", impact: "이미지 57~95%·LCP 16~29% 개선" }) } /** *buildContentCMS * *-블록 트리를 기존 텍스트 필드의 HTML 주석에 저장했습니다. *-기존 HTML 기획전과 페이지 빌더를 데이터 이관 없이 공존하게 했습니다. *-마이그레이션 없이 기존 HTML에 블록 CMS를 추가한 방법 * */ function buildContentCMS(): ProfileBuilder { return this.addExperience({context: "개발자 의존적인 프로모션 제작", contribution: "CMS 에디터·임베드 컴포넌트 구축", impact: "캠페인 제작을 기획자 셀프서비스로 전환" }) } /** *migrateDomainsToBff * *-검색·쿠폰·주문·프로모션을 작은 단위로 나눠 이관했습니다. *-두 백엔드의 응답 차이가 화면에 영향을 주지 않게 처리했습니다. *-두 API로 같은 화면을 렌더링해 비교하는 회귀 테스트를 만들었습니다. * */ function migrateDomainsToBff(): ProfileBuilder { return this.addExperience({context: "모놀리스에서 BFF·MSA로 전환", contribution: "4개 도메인의 호출 경로 이관", impact: "레거시 테스트 정리로 테스트 시간 73% 단축" }) } /** *buildLocalDevPlatform * *-Kafka 이벤트와 검색 색인까지 로컬에서 재현했습니다. *-CI는 병목을 실측해 가장 큰 DB 셋업부터 캐시했습니다. * */ function buildLocalDevPlatform(): ProfileBuilder { return this.addExperience({context: "로컬 재현이 어려운 MSA 통합 흐름", contribution: "로컬 풀스택·e2e 환경 구축", impact: "CI DB 셋업 161초 → 2.5초" }) } /** *migrateBootstrapToTailwind * *-자동 변환 도구와 시각 회귀 검증 루프를 함께 만들었습니다. *-100건 이상의 후속 UI 차이는 추적 목록으로 관리했습니다. *-점진적으로 준비하던 Tailwind CSS 마이그레이션의 80%가 사흘 만에 끝났다 * */ function migrateBootstrapToTailwind(): ProfileBuilder { return this.addExperience({context: "Bootstrap 기반 스타일 시스템", contribution: "Tailwind CSS v4로 전면 이관", impact: "CSS 62%·공유 JS 7.2% 감소" }) } /** *highlightEarlierWork * *-비디오 누적으로 인한 메모리 문제는 피드 가상화로 해결했습니다. *-TF에서는 페어 프로그래밍과 코드리뷰를 병행했습니다. *-프로모션 예약 노출로 반복 배포를 줄였습니다. * */ function highlightEarlierWork(): ProfileBuilder { return this.addExperience({context: "2023~2025 nugu 몰과 백오피스", contribution: "스타일링 TF 리드·프로모션 운영 개선", impact: "콘텐츠 4,000개·장바구니 전환율 10%" }) }

오영근 프로필 — atMediquitous

오영근 프로필 — atMediquitous