W·DOT CMS DESIGN SYSTEM

웹의 시작과 끝,
마침표를 찍다.

자체 CMS 솔루션 기반의 웹 플랫폼. 5개 공식 기본 테마와 통합 관리자 시스템, 23개 실시간 커스터마이저 모달, 10단계 설치 마법사를 제공합니다.

5

기본 테마

업종별 검증된 시각 언어

23

커스터마이저

색상·타입·블록·반응형 외

12

관리자 화면

대시보드·게시판·회원·통계

PHASE A — LIVE

디자인 시스템 카탈로그

50+ 디자인 화면을 줌·팬 가능한 캔버스에서 한눈에. React 18 + Pretendard Variable 기반 프로토타입.

PHASE B — LIVE

5개 기본 테마

업종별 검증된 시각 언어. 각 테마는 색상·레이아웃·톤이 독립적으로 정의되어 있습니다. 5개 모두 라이브로 동작합니다 — 클릭하여 확인.

기업·공공 인프라. 신뢰감 있는 청색.

● LIVE/themes/aqua/ →

연구·전문기관. 깊은 네이비 톤.

● LIVE/themes/helix/ →

대기업·미니멀. 깔끔한 시안.

● LIVE/themes/canvas/ →

문화·레저. 자연적인 녹색.

● LIVE/themes/verde/ →

청년·정책. 활기찬 보라-블루.

● LIVE/themes/dynamic/ →

PHASE C — ROADMAP

통합 관리자 + 커스터마이저

콘텐츠·게시판·회원·디자인을 한 콘솔에서. 실시간 라이브 프리뷰 기반 테마 커스터마이저까지.

13 NAV · DASHBOARD

통합 관리자

사이드바 5섹션 13메뉴 + 토스 스타일 + 풀 대시보드 (KPI 5장 / 차트 / 활동 / 시스템 / 게시글 TOP / 빠른액션). 12개 sub-page stub 준비.

● LIVE (Shell)/admin/ →

Customizer

23 MODALS

테마 커스터마이저

글로벌 스타일·헤더/푸터 빌더·네비·블록·색상·타입·미디어·반응형·다크모드·페이지별 재정의·폼 빌더·A11y 감사

Phase C/admin/customize/

10 STEPS · SPA

설치 마법사

Welcome·License·Requirements·FTP·DB·관리자 계정·SEO·테마 선택·진행 애니메이션·완료. Hash routing, license gate, 6 테마 카드.

● LIVE (UI)/install/ →

ROADMAP

구축 단계

에러 검수·수정·개선·신규 아이디어 반영을 각 단계마다 진행합니다.

DONE

Phase A · 디자인 시스템 카탈로그 라이브 배포

39 JSX 컴포넌트, 50+ 아트보드. React 18 + Babel Standalone. 줌·팬 캔버스, Pretendard 한국어 최적화.

~30분 · 완료

DONE

Phase B · 5개 테마 정적 사이트 추출

React 프로토타입 → 실 HTML/CSS 변환 완료. /themes/{aqua, helix, canvas, verde, dynamic}/ 전부 라이브. 반응형(모바일 햄버거), Pretendard + Caveat + Playfair 타이포, 인라인 SVG 히어로, A11y skip-link, sticky header.

완료

NEXT

Phase C · EasyBox-W wdot-cms 패키지 풀 구축

PHP 백엔드 + React 프론트엔드 통합. 17 endpoint JSON 계약. theme_config.json 저장. 관리자 12화면 실제 CRUD. 커스터마이저 23모달 라이브 프리뷰. 설치 마법사 10단계 실동작.

수 주~수 개월 · 진행 예정