[v1.0] 정보구조(IA)

# 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 - 업데이트 타임스탬프 --- 이 문서는 프로젝트의 정보 구조를 시각화하여 개발자와 사용자가 시스템을 이해하는 데 도움을 줍니다.