[Phase 1] Information Architecture

# Information Architecture (IA) > 프린트타운 SaaS 템플릿 빌더 시스템 정보 구조도 **작성일**: 2025년 12월 28일  **버전**: 1.0 --- ## ? 시스템 구조 개요 ### 시스템 아키텍처 ```mermaid graph TB     subgraph "Frontend Layer"         A[관리자 페이지]         B[사용자 페이지]         C[미리보기 모달]     end         subgraph "Application Layer"         D[템플릿 스캔 엔진]         E[테마 변환 엔진]         F[카테고리 관리]         G[썸네일 생성기]     end         subgraph "Data Layer"         H[(g5_saas_template)]         I[(g5_shop_category)]         J[/_template/]         K[/data/template/]     end         A --> D     A --> E     A --> F     D --> H     E --> H     F --> I     D --> J     G --> K     C --> J ``` --- ## ?️ 페이지 계층 구조 ### 관리자 영역 (`/adm/`) ```mermaid graph LR     A[관리자 메뉴 999] --> B[템플릿 관리]     B --> C[템플릿 목록]     B --> D[템플릿 스캔]     B --> E[테마 변환]     B --> F[빌더 UI]         C --> C1[검색/필터]     C --> C2[카테고리 탭]     C --> C3[미리보기]     C --> C4[수정]         C4 --> G[템플릿 폼]     G --> G1[기본정보]     G --> G2[카테고리 설정]     G --> G3[메모] ``` #### 페이지 상세 구조 | 경로 | 파일명 | 기능 | 주요 기능 | |------|--------|------|----------| | `/adm/` | `saas_template_list.php` | 템플릿 목록 | 검색, 필터, 페이징, 미리보기 | | `/adm/` | `saas_template_form.php` | 템플릿 수정 | 정보 편집, 카테고리 변경 | | `/adm/` | `saas_template_form_update.php` | 수정 처리 | 데이터 저장 | | `/adm/` | `saas_template_scan.php` | 템플릿 스캔 | `_template` 폴더 탐색 및 등록 | | `/adm/` | `saas_theme_convert.php` | 테마 변환 | HTML → GnuBoard 테마 | | `/adm/` | `saas_builder_ui.php` | 빌더 UI | 노코드 편집 인터페이스 | | `/adm/` | `get_template_list_json.php` | API 엔드포인트 | JSON 템플릿 목록 | --- ## ? 사용자 행동 흐름 ### Flow 1: 템플릿 등록 및 관리 ```mermaid sequenceDiagram     actor Admin as 관리자     participant Scan as 스캔 페이지     participant DB as 데이터베이스     participant FS as 파일시스템         Admin->>Scan: 템플릿 스캔 실행     Scan->>FS: _template 폴더 탐색     FS-->>Scan: 템플릿 목록 반환     Scan->>DB: 신규 템플릿 등록     DB-->>Scan: 등록 결과     Scan-->>Admin: 스캔 완료 메시지         Admin->>Scan: 썸네일 생성 요청     Note over Scan: Python 스크립트 실행     Scan->>FS: 썸네일 저장     Scan-->>Admin: 생성 완료 ``` ### Flow 2: 템플릿 변환 및 사용 ```mermaid sequenceDiagram     actor Admin as 관리자     participant List as 목록 페이지     participant Convert as 변환 엔진     participant Theme as 테마 폴더     participant Builder as 빌더 UI         Admin->>List: 템플릿 선택     Admin->>Convert: 변환 버튼 클릭     Convert->>Theme: GnuBoard 구조 생성     Convert->>DB: 상태 업데이트 (converted)     Convert-->>Admin: 변환 완료         Admin->>Builder: 빌더 열기     Builder-->>Admin: 편집 인터페이스 표시     Admin->>Builder: 디자인 커스터마이징     Builder->>Theme: 변경사항 저장 ``` --- ## ?️ 데이터 구조 ### 엔티티 관계도 (ERD) ```mermaid erDiagram     SAAS_TEMPLATE ||--o{ SHOP_CATEGORY : "belongs to"     SAAS_TEMPLATE {         int id PK         varchar ca_id FK         varchar category         varchar name         varchar origin_path UK         varchar hero_image         varchar thumb_url         varchar theme_name         enum status         text memo         datetime created_at         datetime updated_at     }     SHOP_CATEGORY {         varchar ca_id PK         varchar ca_name         int ca_order         varchar ca_use     } ``` ### 상태 전이도 ```mermaid stateDiagram-v2     [*] --> new: 스캔 시 등록     new --> ready: 정보 입력 완료     ready --> converted: 변환 성공     ready --> error: 변환 실패     error --> ready: 수정 후 재시도     converted --> ready: 재변환 요청     converted --> [*]: 삭제 ``` --- ## ? 파일 구조 ### 디렉토리 계층 ``` html-custemplate/ ├── adm/                        # 관리자 페이지 │  ├── saas_template_list.php │  ├── saas_template_form.php │  ├── saas_template_scan.php │  ├── saas_theme_convert.php │  └── saas_builder_ui.php │ ├── _template/                  # 원본 템플릿 저장소 │  ├── category/ │  │  ├── Admin/ │  │  │  └── Dashboard/ │  │  ├── Blog/ │  │  └── Portfolio/ │  └── 무료 템플릿 모음-3/ │ ├── data/ │  └── template/              # 썸네일 저장소 │      ├── Admin/ │      ├── Blog/ │      └── Portfolio/ │ ├── theme/                      # 변환된 GnuBoard 테마 │  └── theme_YYYYMMDD_XXXX/ │ └── python_tools/              # Python 유틸리티     ├── gen_thumb.py     └── README.md ``` --- ## ? 네비게이션 구조 ### 관리자 메뉴 구조 | 레벨 1 | 레벨 2 | 레벨 3 | 파일 | |--------|--------|--------|------| | 시스템 관리 (999) | SaaS 빌더 (999100) | 템플릿 목록 | saas_template_list.php | | | | 템플릿 스캔 | saas_template_scan.php | | | | JSON API | get_template_list_json.php | ### 사용자 인터페이스 요소 #### 검색 및 필터 - **검색 필드**: 이름, 카테고리명, 카테고리 ID - **카테고리 탭**: 1단계 카테고리 필터 - **정렬**: ID, 이름, 날짜 (오름차순/내림차순) #### 템플릿 카드 정보 - 썸네일 이미지 - 템플릿 이름 - 카테고리 (계층 표시) - 원본 경로 - 변환 상태 배지 - 작업 버튼 (변환, 수정, 빌더) --- ## ? 사용자 역할 및 권한 | 역할 | 권한 | 접근 가능 기능 | |------|------|---------------| | **최고관리자** | `auth[999100]='r,w'` | 모든 기능 | | **일반관리자** | `auth[999100]='r'` | 조회만 가능 | | **일반사용자** | - | 접근 불가 | --- ## ? 외부 의존성 ### Python 도구 - **실행 환경**: Python 3.x - **라이브러리**:   - `requests` (HTTP 통신)   - `playwright` (브라우저 자동화)   ### GnuBoard/YoungCart - **버전**: GnuBoard 5.4.5.5 / YoungCart 5.4.5.5.1 - **활용 테이블**:   - `g5_config` (설정)   - `g5_shop_category` (카테고리)   - `g5_saas_template` (커스텀) --- ## ? UI/UX 패턴 ### 모달 패턴 - **템플릿 미리보기**: 클릭 시 전체화면 모달 - **iframe 렌더링**: 원본 HTML 표시 ### 리스트 패턴 - **페이징**: GnuBoard 표준 페이징 - **필터링**: 실시간 쿼리 파라미터 - **검색**: 서버사이드 검색 ### 폼 패턴 - **인라인 검증**: 카테고리 선택 시 자동 저장 - **토큰 보안**: CSRF 방지 --- ## ? 검색 및 발견성 ### 검색 전략 1. **텍스트 검색**: 템플릿 이름 부분 일치 2. **카테고리 필터**: 계층적 탐색 3. **상태 필터**: 변환 상태별 표시 (향후 구현) ### 사용자 경로 최적화 - 관리자 메뉴 → SaaS 빌더 → 템플릿 목록 (3클릭) - 템플릿 스캔 → 썸네일 생성 → 변환 → 빌더 (표준 워크플로우) --- ## ? 정보 우선순위 ### 1차 정보 (필수) - 템플릿 이름 - 카테고리 - 변환 상태 - 썸네일 ### 2차 정보 (선택적) - 원본 경로 - 등록일 - 관리자 메모 ### 3차 정보 (내부용) - 데이터베이스 ID - 업데이트 타임스탬프 --- 이 문서는 프로젝트의 정보 구조를 시각화하여 개발자와 사용자가 시스템을 이해하는 데 도움을 줍니다.