디지엠 유닛원 · 실무
프비티
본사·가맹점·고객을 연결하는 프랜차이즈 통합 솔루션
프비티는 프랜차이즈 본사가 멤버십, 수발주, 재고, 가맹점 관리, CRM 마케팅을 한곳에서 운영하는 솔루션입니다. 고객용 화면과 본사·가맹점 운영 화면을 개발했으며, API·계정·권한 의존성을 분석해 영업관리·수발주 서비스를 분리하고 Flask·PyQt6 기반 네이버 리뷰 자동화도 구현했습니다.
- React
- Next.js
- TypeScript
- styled-components
- Spring Boot
- MySQL
- Docker
- Flask
CASE 01
고객 프로모션과 운영 화면의 반응형 UI 개발
상황
고객은 모바일로 소식과 프로모션을 확인하고, 가맹점과 본사는 태블릿·데스크톱으로 운영 업무를 처리해야 했습니다.
판단
고객용 콘텐츠 화면과 본사·가맹점의 운영 화면을 각 사용 환경에 맞게 구현하고 API를 연동했습니다.
구현
- 여러 브랜드의 고객 유입을 지원하는 CRM·마케팅 랜딩을 배너·캐러셀·공지·이벤트·프로모션 중심으로 리뉴얼했습니다.
- 룰렛 프로모션 참여부터 결과 확인까지 이어지는 화면을 구현했습니다.
- 고객 모바일·가맹점 태블릿·본사 데스크톱에 맞춰 반응형 UI를 구성하고 크로스 브라우징 이슈를 해결했습니다.
- 프랜차이즈 운영 어드민의 기존 기능을 유지보수하고 신규 콘텐츠·공지사항 화면을 API와 연결했습니다.
결과
고객이 소식·이벤트를 확인하고 프로모션에 참여할 수 있는 화면과 본사·가맹점의 운영 화면을 제공했습니다.
CASE 02
영업관리·수발주 서비스와 계정관리 분리
상황
영업관리·수발주·계정관리 기능이 강하게 결합돼 각 도메인을 독립적으로 운영하기 어려웠습니다.
판단
코드를 옮기기 전에 의존성과 API 연결 범위를 분석하고 각 프로젝트에 필요한 계정·인증 흐름을 정리했습니다.
구현
- Next.js·TypeScript와 PHP·MariaDB 기반 서비스에서 36,238 LOC·300개 이상 파일·39개 API 규모의 영향 범위를 분석했습니다.
- hqID·brandID 참조 233곳, header.php 참조 24개 파일, EcAccessControl 사용 18개 파일을 추적해 데이터·인증·권한 의존성을 구분했습니다.
- 영업관리 화면을 별도 저장소로 분리하고 API·모델·Repository와 전용 계정 흐름을 재구성했습니다.
- 공유 테이블과 공통 인증 로직의 사용 범위를 서비스별로 재정의해 사용자 조회·권한 확인·API 접근 흐름을 분리했습니다.
결과
영업관리와 수발주를 별도 프로젝트로 분리하고 각 서비스에 필요한 계정관리 흐름을 구성했습니다.
파일·LOC·API 수는 분석 범위입니다. 개발량이나 생산성 지표로 해석하지 않습니다.
CASE 03
AI 퍼블리싱 작업에 공용 컴포넌트와 검수 기준 적용
상황
반복 퍼블리싱과 API 확정 후 재작업이 발생했고, 단발성 AI 코드 생성만으로 공용 컴포넌트와 접근성 기준을 일관되게 반영하기 어려웠습니다.
판단
AI가 디자인뿐 아니라 기존 컴포넌트와 프로젝트 규칙을 함께 참고하도록 작업 지침을 만들고, 구현 전 계획과 구현 결과를 사람이 검토하도록 했습니다.
구현
- Figma 디자인과 가이드, 기존 공용 컴포넌트를 참조하는 frontend-publishing Skill을 구성했습니다.
- 시맨틱 마크업·ARIA·모바일 우선 반응형 기준과 검증 절차를 명시했습니다.
- 구현 전에 범위와 검증 항목을 정하고 결과를 사람이 검수하는 흐름을 적용했습니다.
- Figma MCP로 디자인 정보를 읽도록 연결했습니다. Cursor Docs·MCP·Skills 활용 방법을 팀에 공유하고, 기존 이슈·PR·기술 문서를 작업 시 참고하도록 했습니다.
결과
반복 가능한 퍼블리싱 절차를 만들었습니다. 당시 작업 기록에서 반복 퍼블리싱 시간이 4시간 이상에서 약 30분으로 줄었습니다.
특정 반복 작업의 기록이며 전체 개발 생산성이나 모든 화면의 소요 시간을 의미하지 않습니다.
WORKFLOW & SKILL
frontend-publishing Skill에 담은 작업 기준
AI가 화면을 생성하는 데서 끝나지 않고, 기존 컴포넌트와 프로젝트 규칙을 따르도록 작업 지침을 구성했습니다. 구현 전 범위를 확인하고 결과를 검수하는 과정은 사람이 맡도록 했습니다.
- 입력: Figma 디자인·디자인 가이드·기존 공용 컴포넌트와 관련 기술 문서를 함께 참조하도록 했습니다.
- 구현: 공용 컴포넌트 재사용, 시맨틱 마크업·ARIA, 모바일 우선 반응형 기준을 명시했습니다.
- 검수: 구현 전에 계획과 검증 항목을 확인하고 승인된 범위에서 작업한 뒤 품질을 점검하도록 했습니다.
작업 계획부터 검수까지
아래는 업무 기록에 기재된 적용 기준을 정리한 요약입니다. 당시 Skill 원본 파일을 그대로 옮긴 코드는 아닙니다.
## 작업 전
- 기존 코드와 공용 컴포넌트 확인
- Figma 디자인과 프로젝트 디자인 가이드 참조
- 구현 범위와 검증 항목을 정하고 사람의 승인 확인
## 구현 기준
- 기존 공용 컴포넌트 재사용
- 시맨틱 마크업과 ARIA 적용
- 모바일 우선 반응형 구현
## 결과 검수
- 프로젝트 규칙과 공용 컴포넌트 사용 여부 확인
- 접근성과 반응형 구현 결과 확인
- 구현 결과를 사람이 검수