[Phase 2] 고도화 프로젝트 종합 계획서

# 프린트타운 SaaS 템플릿 빌더 - 2차 고도화 프로젝트 계획서 ## 프로젝트 개요 ### 프로젝트명 프린트타운 SaaS 템플릿 빌더 Phase 2 (고도화) ### 프로젝트 기간 2026년 1월 ~ (추정 6-12개월) ### 프로젝트 목표 1차 개발 완료된 기반 시스템을 바탕으로: - 템플릿 관리 시스템의 전문화 및 고도화 - 다양한 언어/프레임워크 패키지화 - AI 기반 디자인 생성 및 위젯 시스템 - 노코드 실시간 디자인 편집기 구현 - SaaS 플랫폼으로서의 상품화 완성 --- ## 1. 미션 분석 (Mission Analysis) ### 1.1 플랫폼 목적 재정의 ```mermaid graph TD     A[무료 HTML 템플릿] --> B[자동 스캔 & 분류]     B --> C[카테고리/업종/용도 분석]     C --> D[언어별 패키지화]     D --> E[노코드 빌더 제공]     E --> F[사용자 커스터마이징]     F --> G[최종 웹사이트 배포] ``` ### 1.2 1차 개발의 의미와 연결성 | 1차 개발 성과 | 2차 고도화 연결 | |--------------|----------------| | 템플릿 스캔 시스템 | → 카테고리 재구조화 기반 | | 카테고리 관리 | → 업종/용도별 다차원 분류 확장 | | 썸네일 자동 생성 | → 페이지별 미리보기 생성 | | 문서관리 게시판 | → PM 문서 관리 체계화 | | Bootstrap 4 UI | → 노코드 빌더 UI 기반 | | utf8mb4 지원 | → 다국어 템플릿 지원 기반 | ### 1.3 놓친 이슈 분석 > [!WARNING] > **기술적 검토 필요 사항** 1. **Figma API 제약**: Figma는 디자인 *읽기*는 가능하나, *생성*은 제한적   - 대안: HTML → Figma 변환 도구 활용, 또는 자체 디자인 시스템 구축 2. **AI 에이전트 통합**: 웹 기반 AI 에이전트 구현 시 고려사항   - API 비용 (OpenAI, Claude 등)   - 실시간 코드 생성의 보안 이슈   - 샌드박스 환경 필요 3. **다중 프레임워크 변환**:   - HTML → React/Vue/Angular 자동 변환의 복잡도   - 각 프레임워크별 빌드 환경 필요 4. **노코드 편집기**:   - 실시간 렌더링을 위한 서버 자원   - 버전 관리 및 히스토리 기능 --- ## 2. 상세 작업 분류 (WBS) ### WP-1: 카테고리 구조 변경 및 템플릿 재분류 #### 목표 현재 단순 계층 구조 → 다차원 분류 체계로 전환 #### 세부 작업 | ID | 작업명 | 설명 | 예상 기간 | |----|--------|------|----------| | 1.1 | 카테고리 스키마 재설계 | 업종/용도/스타일 다차원 분류 | 3일 | | 1.2 | 데이터베이스 스키마 변경 | 태그 기반 분류 테이블 추가 | 2일 | | 1.3 | 템플릿 재분석 도구 개발 | AI 기반 자동 분류 도구 | 5일 | | 1.4 | 기존 템플릿 재분류 | 100+ 템플릿 재분류 작업 | 3일 | | 1.5 | 관리자 카테고리 UI 개선 | 다중 선택 카테고리 UI | 2일 | #### 산출물 - [ ] 카테고리 설계서 (작성 시점: 1.1 완료 시) - [ ] DB 마이그레이션 스크립트 - [ ] 재분류 완료 보고서 --- ### WP-2: 템플릿 관리 기능 고도화 #### 2.1 관리자 통합 관리 시스템 | ID | 작업명 | 설명 | 예상 기간 | |----|--------|------|----------| | 2.1.1 | 대시보드 개발 | 템플릿 현황 통계/차트 | 3일 | | 2.1.2 | 일괄 관리 기능 | 다중 선택 수정/삭제 | 2일 | | 2.1.3 | 템플릿 상태 관리 | Draft/Published/Archived | 2일 | | 2.1.4 | 버전 관리 시스템 | 템플릿 버전 히스토리 | 4일 | | 2.1.5 | 검색 고도화 | 태그/키워드 검색 | 2일 | #### 2.2 사용자 템플릿 관리 | ID | 작업명 | 설명 | 예상 기간 | |----|--------|------|----------| | 2.2.1 | 마이 템플릿 페이지 | 구매/저장 템플릿 목록 | 3일 | | 2.2.2 | 즐겨찾기 기능 | 템플릿 북마크 | 1일 | | 2.2.3 | 다운로드 이력 | 구매 및 다운로드 기록 | 2일 | | 2.2.4 | 프로젝트 관리 | 사용자 프로젝트별 그룹핑 | 3일 | #### 산출물 - [ ] 관리자 대시보드 기능 명세서 (2.1.1 시작 전) - [ ] 사용자 기능 UX 설계서 (2.2.1 시작 전) --- ### WP-3: 템플릿 페이지 관리 기능 #### 목표 템플릿 내 개별 페이지 단위 관리 | ID | 작업명 | 설명 | 예상 기간 | |----|--------|------|----------| | 3.1 | 페이지 스캔 기능 | 템플릿 내 HTML 파일 분석 | 3일 | | 3.2 | 페이지 메타데이터 관리 | 페이지별 title, description | 2일 | | 3.3 | 페이지 미리보기 | 개별 페이지 썸네일 생성 | 3일 | | 3.4 | 페이지 유형 분류 | Home/About/Contact 등 | 2일 | | 3.5 | 페이지 구성 편집기 | 드래그앤드롭 페이지 순서 | 4일 | #### 산출물 - [ ] 페이지 관리 기능 설계서 - [ ] 페이지 유형 분류 기준 문서 --- ### WP-4: 템플릿 디자인 관리 기능 | ID | 작업명 | 설명 | 예상 기간 | |----|--------|------|----------| | 4.1 | 컬러 팔레트 추출 | 템플릿 주요 색상 자동 추출 | 2일 | | 4.2 | 폰트 분석 | 사용된 폰트 목록 추출 | 1일 | | 4.3 | 레이아웃 분석 | 그리드/섹션 구조 분석 | 3일 | | 4.4 | 디자인 토큰 시스템 | CSS 변수 기반 토큰 | 4일 | | 4.5 | 디자인 에셋 관리 | 이미지/아이콘 라이브러리 | 3일 | #### 산출물 - [ ] 디자인 시스템 설계서 --- ### WP-5: 다중 언어/프레임워크 패키지화 #### 5.1 정보성 템플릿 (HTML Only) | 유형 | 설명 | |------|------| | 기업 홍보 사이트 | 회사 소개, 서비스, 연락처 | | 랜딩 페이지 | 제품/서비스 홍보 원페이지 | | 포트폴리오 | 개인/에이전시 작품집 | #### 5.2 프레임워크 패키지화 | ID | 언어/프레임워크 | 대상 | 예상 기간 | |----|----------------|------|----------| | 5.2.1 | PHP (GnuBoard) | CMS형 사이트 | 기존 완료 | | 5.2.2 | React.js | SPA 웹앱 | 10일 | | 5.2.3 | Vue.js | SPA 웹앱 | 8일 | | 5.2.4 | Next.js | SSR 웹앱 | 10일 | | 5.2.5 | Angular | 엔터프라이즈 웹앱 | 10일 | | 5.2.6 | WordPress | 블로그/CMS | 7일 | | 5.2.7 | Flutter (Web) | 크로스플랫폼 | 12일 | #### 5.3 네이티브 앱 패키지 | ID | 플랫폼 | 설명 | 예상 기간 | |----|--------|------|----------| | 5.3.1 | Flutter (iOS/Android) | 모바일 앱 | 15일 | | 5.3.2 | React Native | 모바일 앱 | 12일 | > [!IMPORTANT] > **우선순위 제안**: HTML → React → Vue → Next.js → WordPress 순서로 진행 > 나머지는 수요에 따라 추가 개발 #### 산출물 - [ ] 프레임워크별 변환 가이드 - [ ] 패키지 빌드 스크립트 --- ### WP-6: AI 기반 디자인 생성 (Figma 대안) > [!CAUTION] > Figma API는 디자인 파일 *생성*을 직접 지원하지 않습니다. > 대안 접근 방식을 제안합니다. #### 6.1 대안 접근법 | 방법 | 설명 | 장점 | 단점 | |------|------|------|------| | **Penpot 활용** | 오픈소스 Figma 대안 | API 자유도 높음 | 생태계 작음 | | **HTML → Design Token** | 코드 기반 디자인 추출 | 기존 시스템 활용 | 디자인 툴 아님 | | **AI 이미지 생성** | DALL-E/Midjourney | 시각적 컨셉 생성 | 편집 불가 | #### 6.2 권장 접근: Design Token 시스템 | ID | 작업명 | 설명 | 예상 기간 | |----|--------|------|----------| | 6.1 | Design Token 추출기 | CSS → JSON 토큰 변환 | 5일 | | 6.2 | Token 편집기 UI | 웹 기반 토큰 편집 | 7일 | | 6.3 | Token → CSS 적용 | 실시간 프리뷰 | 5일 | | 6.4 | 내보내기 기능 | Figma/Sketch 호환 포맷 | 5일 | #### 산출물 - [ ] Design Token 시스템 설계서 - [ ] Figma 연동 가능성 분석 보고서 --- ### WP-7: 위젯 옵션 시스템 및 AI 에이전트 #### 7.1 위젯 시스템 설계 ``` ┌─────────────────────────────────────────┐ │              템플릿 페이지              │ ├─────────────────────────────────────────┤ │ [헤더 위젯]  [네비게이션 위젯]          │ ├─────────────────────────────────────────┤ │ [히어로 위젯]                          │ ├─────────────────────────────────────────┤ │ [서비스 카드 위젯] [포트폴리오 위젯]    │ ├─────────────────────────────────────────┤ │ [연락처 폼 위젯]  [지도 위젯]          │ ├─────────────────────────────────────────┤ │ [푸터 위젯]                            │ └─────────────────────────────────────────┘ ``` | ID | 작업명 | 설명 | 예상 기간 | |----|--------|------|----------| | 7.1 | 위젯 컴포넌트 정의 | 표준 위젯 유형 설계 | 5일 | | 7.2 | 위젯 라이브러리 | 재사용 가능한 컴포넌트 | 10일 | | 7.3 | 위젯 속성 편집기 | 색상/크기/내용 수정 | 7일 | | 7.4 | 위젯 마켓플레이스 | 추가 위젯 구매/설치 | 5일 | #### 7.2 AI 에이전트 연동 > [!NOTE] > **가능성 분석**: 웹 기반 AI 에이전트 구현은 가능하나 비용과 보안 고려 필요 | ID | 작업명 | 설명 | 예상 기간 | |----|--------|------|----------| | 7.5 | AI 코드 생성 API | OpenAI/Claude 연동 | 5일 | | 7.6 | 샌드박스 환경 | 안전한 코드 실행 환경 | 7일 | | 7.7 | 자연어 명령 UI | "버튼 색상 파란색으로" | 5일 | | 7.8 | 생성 코드 검증 | 보안/품질 검사 | 5일 | #### 산출물 - [ ] 위젯 시스템 기술 설계서 - [ ] AI 에이전트 연동 PoC 보고서 --- ### WP-8: SaaS 커머스 컨텐츠 고도화 | ID | 작업명 | 설명 | 예상 기간 | |----|--------|------|----------| | 8.1 | 정적 페이지 추가 | About, Pricing, FAQ 등 | 5일 | | 8.2 | 컨텐츠 보강 | 텍스트, 이미지, 그래프 | 5일 | | 8.3 | 랜딩 페이지 최적화 | 전환율 개선 | 3일 | | 8.4 | SEO 최적화 | 메타데이터, Schema.org | 3일 | | 8.5 | 결제 시스템 연동 | 아임포트/토스페이먼츠 | 7일 | #### 산출물 - [ ] 컨텐츠 기획서 - [ ] SEO 체크리스트 --- ### WP-9: 도큐먼트 이용 가이드 작성 | ID | 작업명 | 설명 | 예상 기간 | |----|--------|------|----------| | 9.1 | 가이드 구조 설계 | 목차 및 카테고리 | 2일 | | 9.2 | 시작하기 가이드 | Quick Start | 2일 | | 9.3 | 템플릿 관리 가이드 | 상세 사용법 | 3일 | | 9.4 | API 문서 | 개발자용 API 레퍼런스 | 3일 | | 9.5 | FAQ 작성 | 자주 묻는 질문 | 2일 | | 9.6 | 비디오 튜토리얼 | 영상 가이드 (선택) | 5일 | #### 산출물 - [ ] 사용자 가이드 (GitBook/ReadTheDocs 형식) --- ### WP-10: 노코드 디자인 실시간 편집 시스템 #### 10.1 기술 스택 선정 | 후보 | 장점 | 단점 | 권장도 | |------|------|------|--------| | **Vue.js + Vuex** | 학습 용이, 유연성 | 대규모 앱 복잡 | ⭐⭐⭐⭐ | | **React + Redux** | 생태계 풍부 | 보일러플레이트 | ⭐⭐⭐⭐ | | **Angular** | 엔터프라이즈급 | 무거움 | ⭐⭐⭐ | | **Svelte** | 가볍고 빠름 | 생태계 작음 | ⭐⭐⭐ | > **권장**: Vue.js 3 + Pinia (상태관리) #### 10.2 핵심 기능 | ID | 작업명 | 설명 | 예상 기간 | |----|--------|------|----------| | 10.1 | 편집기 프레임워크 | Vue.js 기반 편집기 | 10일 | | 10.2 | 실시간 프리뷰 | iframe 기반 미리보기 | 5일 | | 10.3 | 드래그앤드롭 레이아웃 | 섹션 이동/크기 조절 | 7일 | | 10.4 | 스타일 패널 | 색상/폰트/여백 편집 | 5일 | | 10.5 | 텍스트 편집 | WYSIWYG 텍스트 편집 | 3일 | | 10.6 | 이미지 편집 | 업로드/크롭/필터 | 5일 | | 10.7 | 실행 취소/다시 실행 | History 관리 | 3일 | | 10.8 | 저장/내보내기 | DB 저장, HTML 다운로드 | 3일 | | 10.9 | 반응형 프리뷰 | 데스크탑/태블릿/모바일 | 3일 | | 10.10 | 템플릿 적용 | 저장된 디자인 → 템플릿 반영 | 5일 | #### 산출물 - [ ] 노코드 편집기 기술 설계서 - [ ] UI/UX 와이어프레임 --- ## 3. 마일스톤 및 일정 ``` 2026년 │ ├── 1월 ─── Phase 2 킥오프, 요구사항 분석 │          [WP-1 시작] 카테고리 재구조화 │ ├── 2월 ─── [WP-1 완료][WP-2 시작] 템플릿 관리 고도화 │          [WP-3 시작] 페이지 관리 기능 │ ├── 3월 ─── [WP-2,3 완료][WP-4 시작] 디자인 관리 │          [WP-8 시작] SaaS 컨텐츠 고도화 │ ├── 4월 ─── [WP-4,8 완료][WP-5 시작] 프레임워크 패키지화 (React) │          [WP-9 시작] 이용 가이드 작성 │ ├── 5월 ─── [WP-5 진행] Vue, Next.js 패키지화 │          [WP-10 시작] 노코드 편집기 PoC │ ├── 6월 ─── [WP-5 완료][WP-10 진행] 편집기 개발 │          중간 검토 및 방향 조정 │ ├── 7월 ─── [WP-6 시작] Design Token 시스템 │          [WP-7 시작] 위젯 시스템 │ ├── 8월 ─── [WP-6,7 진행] AI 에이전트 PoC │ ├── 9월 ─── [WP-10 완료] 노코드 편집기 베타 │          통합 테스트 │ ├── 10월 ── 베타 런칭 │          사용자 피드백 수집 │ ├── 11월 ── 피드백 반영 개선 │ └── 12월 ── 정식 런칭 ``` --- ## 4. PM 문서 관리 체계 ### 4.1 문서 유형 및 작성 시점 | 문서 유형 | 카테고리 | 작성 시점 | 담당 | |----------|----------|----------|------| | **Mission Analysis** | RFP/기획 | 프로젝트 시작 시 | PM | | **Implementation Plan** | 계획 | WP 시작 전 | PM/개발팀 | | **Task.md** | 작업 | 작업 진행 중 | 개발팀 | | **Walkthrough.md** | 완료보고 | WP 완료 시 | 개발팀 | | **Progress Report** | 보고 | 주간/월간 | PM | | **Meeting Minutes** | 회의록 | 회의 후 | PM | | **Test Report** | 테스트 | 테스트 완료 시 | QA | | **Release Notes** | 릴리즈 | 배포 시 | PM | ### 4.2 게시판 카테고리 확장 현재 카테고리: - 프로젝트 보고서 - 정보구조 IA - API 명세서 - 릴리즈 노트 **추가 제안**: - ? **기획** - RFP, 미션 분석, 요구사항 - ? **계획** - Implementation Plan, WBS, 일정 - ? **작업** - Task.md, 기술 문서 - ✅ **완료** - Walkthrough, 완료 보고서 - ? **보고** - 주간/월간 보고서 - ? **회의록** - 회의 기록 - ? **테스트** - 테스트 시나리오, 결과 ### 4.3 1차 프로젝트 문서 소급 등록 과거 작성된 문서들을 시간순으로 게시판에 등록합니다: | 순번 | 문서명 | 카테고리 | 작성 시점 | |------|--------|----------|----------| | 1 | 1차 프로젝트 미션 분석 | 기획 | 2025-12-01 | | 2 | Phase 1-4 Implementation Plan | 계획 | 2025-12-05 | | 3 | Phase 5 Implementation Plan | 계획 | 2025-12-28 | | 4 | Phase 1-4 Task.md | 작업 | 2025-12-20 | | 5 | Phase 5-6 Task.md | 작업 | 2026-01-02 | | 6 | Phase 1-4 Walkthrough | 완료 | 2025-12-27 | | 7 | Phase 5-6 Walkthrough | 완료 | 2026-01-02 | --- ## 5. 리스크 분석 | 리스크 | 영향도 | 발생확률 | 대응 방안 | |--------|--------|----------|----------| | AI API 비용 증가 | 높음 | 중간 | 캐싱, 사용량 제한 | | 프레임워크 변환 복잡도 | 높음 | 높음 | 단순 템플릿부터 시작 | | 노코드 편집기 성능 | 중간 | 중간 | 최적화, 부분 렌더링 | | 사용자 학습 곡선 | 중간 | 낮음 | 상세한 가이드 제공 | | 기술 부채 증가 | 중간 | 중간 | 정기적 리팩토링 | --- ## 6. 검증 계획 ### 6.1 단위 테스트 - 각 WP 완료 시 기능별 테스트 ### 6.2 통합 테스트 - 마일스톤별 통합 테스트 (2개월 주기) ### 6.3 사용자 테스트 - 베타 런칭 시 실사용자 피드백 수집 ### 6.4 성능 테스트 - 노코드 편집기: 동시 접속 10명 이상 테스트 - 템플릿 변환: 100개 템플릿 일괄 변환 테스트 --- ## 7. 다음 단계 1. **즉시**: 이 계획서 검토 및 승인 2. **승인 후**: 카테고리 구조 변경 상세 설계 시작 3. **1주 이내**: WP-1 킥오프 및 1차 진도 보고 --- **작성일**: 2026-01-02  **버전**: Draft v1.0  **승인**: 검토 대기 중