배경

마켓봄(구 마켓봄 프로)은 식자재 유통사(도매상)를 위한 B2B SaaS 플랫폼입니다. 유통사가 다수의 거래처(음식점)를 관리하고, 발주를 수신·처리하며, 정산까지 할 수 있는 올인원 플랫폼입니다. 웹·앱·관리자까지 프론트엔드 전 레이어에 걸쳐 개발했습니다.

마켓봄은 단일 서비스가 아니라 여러 프로덕트가 연계된 에코시스템입니다. 웹 서비스, 두 개의 하이브리드 앱, 정산 관리자, 전사 디자인 시스템이 각각 독립 레포지토리로 운영됩니다. 각 레포지토리별 상세 내용은 위 탭에서 확인할 수 있습니다.

전체 기술 스택

관련 링크

• 마켓봄 웹사이트

이 레포의 역할

유통사(도매상)가 거래처 관리, 발주 수신·처리, 상품 관리, 배송 일정 관리, 세금계산서·정산 업무까지 처리하는 B2B 웹 서비스입니다. 마켓봄 에코시스템에서 가장 많은 기능을 담당하는 메인 프로덕트입니다.

담당 역할 & 기여

핵심 업무 기능 개발

유통사의 일상 업무 흐름 전반을 지원하는 기능을 구현했습니다.

• 발주 수신 및 처리: 거래처로부터 들어오는 발주를 실시간으로 수신하고, 확인·처리·취소 워크플로우 구현
• 거래처별 단가 관리: 거래처마다 다른 상품 단가를 설정하고 일괄 적용하는 가격 관리 인터페이스
• 배송 일정 관리: 날짜별·지역별 배송 일정 조회 및 도서산간 배송비 그리드 연동
• 출고 지시서 관리: 출고 지시서 정렬·필터링 및 출고완료 상태 처리

자료 일괄 등록 기능 개발

유통사가 상품·단가·거래처 정보를 엑셀 파일로 일괄 등록하는 기능을 담당했습니다.

• 파일 버전 관리: 서식 버전을 서버에서 관리하고, 구버전 서식 업로드 시 사용자에게 안내 메시지 표시
• 유효성 검증: 업로드 불가 확장자, 단가 그룹 50개 초과 등 엣지 케이스에 대한 프론트엔드 예외 처리
• 사용자 정보 연동: 파일 처리 결과에 업로드한 사용자 정보를 포함하여 이력 추적 가능

세금계산서 & 거래금액 비교 화면 개발

유통사가 세금계산서와 실제 거래금액을 대조·검증하는 화면을 구현했습니다. 조회 기간 설정, 결제 수단별(가상계좌·신용카드) 금액 분류, 매입처 탭의 지급금액 컬럼 구성, 조회 기준 툴팁 등 세부 UI를 담당했습니다.

거래전표 등록 기능 개발

거래전표 등록 화면에서 발생하는 복잡한 상태(삭제된 상품 포함 전표, 인쇄 흐름 등)를 처리했습니다. 전표 인쇄 시 저장 완료 메시지와 인쇄 화면 전환 타이밍 문제를 수정했습니다.

Apollo Client + GraphQL 데이터 레이어

Apollo Client를 통해 GraphQL API와 통신합니다. 복잡한 쿼리 캐싱 전략을 활용하여 페이지 전환 시 네트워크 요청을 최소화하고, optimisticResponse로 UI 응답성을 개선했습니다.

RealGrid 기반 고성능 테이블

대용량 발주·단가·정산 데이터를 처리하는 화면에서 RealGrid를 활용합니다. 그리드 내 인라인 편집, 다중 선택, 컬럼 고정 등 스프레드시트 수준의 인터랙션을 제공합니다.

기술 선택 이유

기술 스택

기술스택은 퇴사 시점 기준으로 작성되었습니다.

성과

• 발주 수신부터 처리까지의 워크플로우 디지털화로 운영 효율 개선
• 자료 일괄 등록 파일 버전 관리 도입으로 서식 불일치 오류 감소
• 세금계산서·거래금액 비교 화면으로 유통사의 수작업 대조 업무 자동화
• Apollo 캐싱 전략 최적화로 반복 조회 시 네트워크 요청 감소

이 레포의 역할

음식점 사장님(거래처)이 모바일·PC에서 식자재를 발주하는 전용 웹 앱입니다. Flutter WebView Shell 안에서 실행되는 웹 레이어로, 상품 검색·장바구니·발주 제출·주문 이력·거래내역·취소·반품까지 거래처 업무 전반을 담당합니다.

Nuxt.js 2 SPA, 35개 이상 페이지, 10개 Vuex 모듈, 5단계 Apollo Link 체인으로 구성되며, 6개 환경(Local·Dev·Lab·QA·Stage·Prod)에 독립적으로 배포됩니다.

담당 역할 & 기여

1. 인증 흐름 & WebView 라우팅

auth.ts 미들웨어가 URL 쿼리 파라미터로 초기 인증을 처리합니다. Flutter WebView가 앱 진입 시 인증 파라미터가 포함된 URL을 열면, 미들웨어가 이를 감지해 GraphQL로 로그인하고 인증 토큰을 localStorage에 저장합니다.

WebView 특성상 history.go(-1) 같은 뒤로가기 동작이 로그인 URL로 돌아가는 문제가 있어, history.replaceState로 히스토리 엔트리를 메인 URL로 교체한 뒤 이동합니다.

2. Apollo Link 체인 설계

5개 Link를 조합하여 인증·버전 체크·에러 처리·로깅을 요청 파이프라인으로 분리했습니다.

Request  →  authLink  →  versionCheckLink  →  logLink  →  errorLink  →  httpLink  →  서버
Response ←                                                                           ←

authLink — localStorage에서 인증 토큰을 읽어 모든 요청 헤더에 JWT Bearer 토큰을 주입합니다.

versionCheckLink — 서버 응답 헤더의 배포 버전과 현재 클라이언트 버전을 비교합니다. 불일치 시 CDN을 추가로 조회하여 “클라이언트 갱신 필요”와 “백엔드 배포 문제”를 구분합니다.

errorLink — GraphQL 에러 유형별로 공통 처리를 중앙화했습니다. 토큰 만료 시 자동 재로그인, 비활성 계정 안내 후 로그아웃 등 에러 코드별 처리를 파이프라인에서 일관되게 처리합니다.

3. 유통사별 가격 표기 시스템

거래처마다 부가세 표시 방식과 금액 반올림 단위가 다릅니다. 서버가 내려주는 환경 설정 코드를 프론트엔드 계산 로직에 적용하여, 유통사별로 다른 정책(부가세 포함/별도, 원 단위/10원 단위 반올림 등)을 클라이언트에서 처리합니다.

Big.js로 모든 금액 연산을 처리하여 부동소수점 오차를 원천 차단합니다.

4. 주문 수량 유효성 검증

상품마다 최소 주문 수량, 최대 일별 주문 수량, 재고 한도를 프론트엔드에서 독립적으로 검증합니다. 서버 왕복 없이 즉각 피드백을 주고, 최종 제출 시 서버에서 한 번 더 검증하는 이중 구조입니다.

5. 주문 마감 시간 클라이언트 검증

각 상품의 주문 마감 시간을 클라이언트에서 먼저 검증합니다. 마감된 상품은 장바구니에서 “주문 가능 상품”과 분리하여 별도 섹션으로 표시합니다.

6. 서비스 워커 (Workbox)

폰트·이미지 자산을 Workbox 전략으로 캐싱하여 네트워크 불안정 환경의 앱 신뢰성을 높였습니다.

// plugins/serviceWorker.ts
if ('serviceWorker' in navigator) {
  window.addEventListener('load', () => {
    navigator.serviceWorker.register('/service-worker.js');
  });
}

// static/service-worker.js (Workbox 6)
const { CacheFirst, StaleWhileRevalidate } = workbox.strategies;

// Google Fonts 스타일시트 — Stale-While-Revalidate
registerRoute(
  ({ url }) => url.origin === 'https://fonts.googleapis.com',
  new StaleWhileRevalidate({ cacheName: 'google-fonts-stylesheets' }),
);

// 폰트 파일 — Cache-First, 1년 유효
registerRoute(
  ({ url }) => url.origin === 'https://fonts.gstatic.com',
  new CacheFirst({
    cacheName: 'google-fonts-webfonts',
    plugins: [
      new CacheableResponsePlugin({ statuses: [0, 200] }),
      new ExpirationPlugin({ maxAgeSeconds: 60 * 60 * 24 * 365, maxEntries: 30 }),
    ],
  }),
);

// 이미지 — Cache-First, 최대 100개 / 7일 유효
registerRoute(
  ({ request }) => request.destination === 'image',
  new CacheFirst({
    cacheName: 'images',
    plugins: [
      new CacheableResponsePlugin({ statuses: [0, 200] }),
      new ExpirationPlugin({ maxEntries: 100, maxAgeSeconds: 60 * 60 * 24 * 7 }),
    ],
  }),
);

아키텍처

거래처 주문 앱 (Nuxt.js 2 SPA)
│
├── middleware/     → 인증·UA 분기·공지 체크·모니터링 초기화
│
├── apollo/link/    → 인증·버전 체크·로깅·에러 처리 파이프라인
│
├── store/ (Vuex)   → 유통사 환경 설정·주문 상태·거래내역 필터
│
├── utils/calc/     → 금액 계산·수량 검증·날짜 처리
│
└── Flutter WebView Shell (별도 레포)
    └── JS Bridge

주요 화면 & 도메인

기술 스택

기술스택은 퇴사 시점 기준으로 작성되었습니다.

성과

• Apollo Link 체인으로 인증·버전체크·에러 처리를 파이프라인화 — 페이지 컴포넌트에서 공통 관심사 제거
• versionCheckLink의 CDN 이중 검증으로 “클라이언트 갱신 필요” vs “백엔드 배포 이상”을 자동 구분
• 유통사별 부가세·반올림 전략을 서버 코드 기반으로 처리 — Big.js로 금액 정확성 확보
• Workbox 서비스 워커 도입으로 폰트·이미지 캐싱 — 네트워크 불안정 환경의 앱 신뢰성 개선

이 레포의 역할

유통사(도매상) 담당자가 외출 중에도 발주 수신·확인, 배송 현황 조회, 출고 수량 수정 등을 할 수 있는 모바일 앱의 웹 레이어입니다. React 기반 웹 앱을 Flutter Shell로 감싼 하이브리드 구조로, 사내 디자인 시스템을 기반으로 구축되었습니다.

담당 역할 & 기여

React 웹뷰 앱 개발

Flutter WebView 안에서 실행되는 React 웹 앱을 개발했습니다. 사내 디자인 시스템 컴포넌트를 기반으로 모바일 최적화된 UI를 구성하고, 터치 친화적인 인터랙션을 구현했습니다.

• 수주 관리 화면: 거래처별 발주 목록 조회, 상세 확인, 출고 수량·단가 수정 기능 구현. 매입처 헤더 타이틀, 합계 출고 수량 표시 처리
• 자동발주 처리: 여러 매출처에서 생성된 자동발주의 대표 거래처 표시 로직 구현
• 토스트(Snackbar) 스타일 관리: 출고완료 알림 등 사용자 피드백 UI 타입 시스템 구축

Apollo Client GraphQL 연동

마켓봄 웹과 동일한 GraphQL API를 사용합니다. Apollo Client의 캐싱 전략을 모바일 환경에 맞게 조정하여, 네트워크 연결이 불안정한 상황에서도 기존 캐시 데이터를 표시합니다. apollo-upload-client로 납품 사진 등 파일 업로드를 처리합니다.

네이티브 기능 연동

Flutter Shell이 제공하는 네이티브 기능(카메라, 갤러리, 푸시 알림)을 웹 레이어에서 JS Bridge를 통해 호출합니다. 납품 사진 촬영·첨부, 발주 알림 등에 활용됩니다.

Datadog RUM 모바일 모니터링

모바일 환경에서의 성능 지표와 에러를 Datadog RUM으로 수집합니다. 데스크탑 웹과 분리된 뷰로 모바일 특이 이슈를 추적합니다.

기술 선택 이유

기술 스택

기술스택은 퇴사 시점 기준으로 작성되었습니다.

성과

• iOS·Android 동시 출시로 유통사 담당자의 이동 중 업무 처리 가능
• 웹 자산 재사용으로 별도 네이티브 앱 개발 대비 개발 기간 단축
• 사내 디자인 시스템 연동으로 마켓봄 전 서비스와 UI 일관성 확보

이 레포의 역할

마켓봄·마켓봄프로·마켓봄도매 세 서비스의 운영 업무를 단일 인터페이스로 통합한 내부 관리자 웹입니다. 정산 집계, 매입처 관리, 공지 관리, 롤링 설정, 초기화 처리 등 운영팀·재무팀이 사용하는 어드민 도구입니다.

배경 & 문제 의식

마켓봄 에코시스템이 마켓봄프로·도매·마켓봄으로 확장되면서 각 서비스의 운영 업무를 처리하는 내부 도구가 분산되어 있었습니다. 운영팀이 서비스마다 별도 화면을 오가야 했고, 서비스 간 데이터 비교가 어려웠습니다. 세 서비스의 운영 화면을 하나의 어플리케이션으로 통합하여 운영 효율을 높이는 것이 목표였습니다.

담당 역할 & 기여

정산·매입처 관리 화면 개발

• 정산 집계: 기간·유통사·거래처 조건으로 거래 내역을 필터링하고 합산하는 집계 인터페이스 구현. ag-Grid 커뮤니티 에디션을 활용하여 대용량 정산 데이터를 클라이언트에서 정렬·필터링 처리
• 매입처 관리: 매입처 등록·수정·조회 화면 구현. 임시 아이디 대소문자 표시 오류 수정, 매입처 필드 GraphQL 연동
• 초기화 처리: 정산 초기화 진행 중·반려 상태 관리 화면 — 상태 전환 흐름을 React 상태로 모델링

공지 관리 기능 개발

운영팀이 서비스별로 공지를 게시·수정하는 화면을 구현했습니다. 공지 대상(매출처·매입처)을 필터링하여 표시하는 기능, 리치 텍스트 편집기(React-Quill) 연동, 공지 롤링 설정(종료일·제한 없음 옵션) 등을 담당했습니다.

React 18 + Vite 기반 아키텍처

이전 Vue/Nuxt 기반 레거시 어드민 도구들과 달리, 최신 React 18 + Vite 스택으로 신규 구축했습니다. Recoil로 전역 상태를 관리하고, React Hook Form + Zod로 복잡한 폼 유효성 검증을 선언적으로 처리합니다.

GraphQL Code Generator 도입

GraphQL 스키마에서 TypeScript 타입과 Apollo 훅을 자동 생성합니다. API 스키마 변경 시 프론트엔드 타입이 자동으로 동기화되어 런타임 타입 오류를 빌드 타임에 감지합니다.

기술 선택 이유

기술 스택

기술스택은 퇴사 시점 기준으로 작성되었습니다.

성과

• 마켓봄·마켓봄프로·도매 세 서비스의 운영 화면을 단일 어드민으로 통합
• GraphQL Code Generator 도입으로 API 타입 자동 동기화 — 수작업 타입 정의 제거
• ag-Grid 활용으로 대용량 정산 데이터 클라이언트 처리 성능 확보

이 레포의 역할

유통사 전용 앱을 위한 React 컴포넌트 라이브러리입니다. 사내 npm 패키지로 배포되며, ESM·CJS 듀얼 빌드를 지원합니다.

배경 & 문제 의식

마켓봄 서비스가 웹, 유통사 앱, 운영 관리자 등 여러 프로덕트로 확장되면서 각 팀이 비슷한 UI(버튼, 테이블, 모달, 폼 요소)를 중복 구현하는 문제가 생겼습니다. 디자이너-개발자 간 협업에서도 컴포넌트 명칭과 명세가 불일치하는 경우가 많았습니다. 이를 해결하기 위해 공유 컴포넌트 라이브러리를 별도 패키지로 분리했습니다.

담당 역할 & 기여

핵심 컴포넌트 개발

유통사 앱의 모바일 UX에 필요한 컴포넌트들을 설계하고 구현했습니다.

• Bottom Navigation: 모바일 앱의 하단 탭 내비게이션 컴포넌트 — 활성 탭 상태·아이콘·라벨 구성
• DatePicker: 모바일 환경에 최적화된 날짜 선택 컴포넌트 — 터치 친화적 인터랙션 구현
• Iconography / Logo: 서비스 전용 아이콘셋과 로고 컴포넌트 정의 및 추가
• Dialog: 줄바꿈(linebreak) 처리 개선 — 긴 메시지 표시 시 레이아웃 깨짐 수정

Emotion 기반 테마 시스템

초기에는 MUI를 내부 의존성으로 사용했으나, 번들 크기 최적화를 위해 MUI를 Emotion 기반의 자체 테마 시스템을 전환했습니다. 소비측 서비스는 BoronThemeProvider로 감싸기만 하면 전체 스타일이 자동 적용됩니다.

소비측 서비스는 ThemeProvider로 앱을 감싸기만 하면 전체 스타일이 자동 적용되는 구조로 설계했습니다. 버튼, DatePicker 등 컴포넌트를 선언적으로 사용할 수 있습니다.

Storybook 문서화

모든 컴포넌트를 Storybook 8으로 문서화했습니다. Props 명세, variant별 렌더링 예시, 인터랙션 테스트를 Storybook에서 확인할 수 있어 디자이너와 개발자가 동일한 기준으로 소통합니다.

npm 패키지 배포 및 버전 관리

Semantic Versioning으로 패키지를 관리합니다. 브레이킹 체인지 없는 업데이트는 패치·마이너 버전을, API 변경이 있으면 메이저 버전을 올려 소비측 서비스가 안전하게 업데이트 시점을 결정할 수 있습니다.

ESM·CJS 듀얼 빌드

Vite 라이브러리 모드로 ESM과 CJS를 동시에 빌드합니다. 소비측 프로젝트의 번들러 종류에 관계없이 최적 모듈 형식이 자동 선택됩니다. TypeScript 타입 정의 파일도 자동 생성하여 소비측 IDE 지원을 보장합니다.

기술 선택 이유

기술 스택

기술스택은 퇴사 시점 기준으로 작성되었습니다.

성과

• 유통사 앱 전체에 디자인 시스템 적용 — UI 일관성 확보
• MUI 대신 자체 디자인시스템 전환으로 소비측 번들 크기 감소
• ESM·CJS 듀얼 빌드 지원으로 다양한 소비 환경 호환
• Storybook 문서화로 디자이너-개발자 협업 기준점 확보