TPI 엔터프라이즈 템플릿 시스템 명세서
재사용 가능한 엔터프라이즈 웹 아키텍처 및 시스템 커스터마이징 가이드
1. 프로젝트 포지셔닝 (Project Positioning)
본 시스템은 단일 웹사이트 구축 프로젝트가 아닌, 다양한 기업 고객 및 다양한 산업군(테크, 리테일, SaaS, B2B 서비스)에 즉각 재사용 및 확장이 가능한 엔터프라이즈 모듈형 웹 템플릿 프레임워크입니다.
- 해결하는 문제: 프로젝트마다 반복되는 프론트엔드 UI/백엔드 API 구조 재개발 방지 및 브랜드 전환 시 소요되는 개발 비용 최적화.
- 적합한 대상: B2B 테크 솔루션 기업, SaaS 스타트업, 브랜드 쇼케이스 및 멀티 브랜드 라인업을 보유한 엔터프라이즈.
- 부적합 대상: 고도로 개별화된 3D 게임 웹 앱, 캔버스 전용 그래픽 툴.
- 핵심 가치: 구성 요소 분리(Decoupling), 표준화된 디자인 토큰, JSON 스키마 기반 실시간 설정.
2. 알려진 정보 및 가정 (Known Information & Assumptions)
알려진 정보 (Known Information):
- 기업명: TPI 솔루션 계열 (TPI 테크, TPI 커머스, TPI SaaS, TPI 서비스)
- 기술 요구사항: 동적 반응형 뷰포트, 브랜드 토큰 제어, 모듈 토글, API 연동 추상화
가정 (Assumptions):
- [가정 1] 백엔드는 Headless CMS 또는 JSON API 엔드포인트를 통해 사이트 설정 스키마를 전달함.
- [가정 2] 모든 UI 컴포넌트는 CSS 변수(Design Tokens)를 참조하여 브랜드 스타일을 유연하게 교체함.
3. 템플릿 시스템 설계 원칙 (System Design Principles)
- 통합 구조 원칙: 동일한 레이아웃 뼈대 안에서 컴포넌트 조합만으로 페이지 구성.
- 설정 가능성 원칙: 브랜드 컬러, 폰트, 문구, 모듈 노출 여부를 코딩 없이 JSON 데이터로 관리.
- 확장성 원칙: 새로운 섹션 컴포넌트 추가 시 독립적인 슬롯 인터페이스 제공.
- 프론트엔드-백엔드 분리 원칙: REST/GraphQL 규격 기반 API 통신으로 데이터 독립성 보장.
4. 프론트엔드 아키텍처 설계 (Frontend Architecture)
계층 구조 및 모듈 추상화:
Template Engine
├── Header (Navigation, Brand Asset)
├── Dynamic Section Renderer
│ ├── Hero Banner Module
│ ├── Features Grid Module
│ ├── Solution Showcase Module
│ └── Contact Form Module
└── Footer (Information, Social Links)
권장 프론트엔드 스택: Modern HTML/CSS + Vanilla JS (본 프로토타입 구현 방식) 또는 Next.js / React (SSR 및 SEO 최적화 엔터프라이즈 도킹 시).
5. 백엔드 아키텍처 설계 (Backend Architecture)
백엔드는 데이터 저장소와 템플릿 설정엔진 간의 결합을 최소화하는 API 서버 역할을 담당합니다.
GET /api/v1/config/site-schema -> 사이트 테마 및 모듈 토글 정보 수신
POST /api/v1/contact/submit -> 문의 폼 데이터 캡처 및 알림 전달
6. 템플릿 커스터마이징 메커니즘 (Customization Mechanism)
브랜드 레이어(컬러, 로고), 페이지 레이어(섹션 순서), 기능 레이어(문의 폼, 언어 설정)의 3단계 커스텀 매커니즘을 제공합니다.
7. 다종 산업 적용안 (Multi-Industry Adaptation)
TPI 템플릿 시스템은 단 하나의 프레임워크 기반에서 '산업별 프리셋 데이터' 교체만으로 테크, 커머스, SaaS, B2B 서비스 웹사이트로 즉시 전환됩니다.