Blesta 구현 지도

확인 범위

2026-09-12 확정된 목표는 vPanel/Pterodactyl 기반 WickedHost 공통 디자인을 Blesta까지 적용하는 것입니다. 문서·실행 예제는 같은 라임 팔레트·Pretendard·4px 모서리·40px 버튼·48×24 네모 스위치를 사용합니다. 후속 운영 적용은 같은 날 11:03 UTC에 별도로 수행했습니다. 공통 CSS/폰트/라이선스, 셸의 자산 로딩, 홈 제목 접근성, 주문 단계 표시 등 6개 파일만 반영했습니다. PHP 업무 로직·계정·결제·티켓 데이터는 변경하지 않았습니다.

blesta-theme는 전체 Blesta 저장소가 아니라 선택된 Virtus 테마·관련 파일의 로컬 작업본입니다. baseline/releases/목업을 현재 소스로 취급하지 않습니다. 이번 기준선은 theme/의 파일과 README를 확인했습니다.

구조와 데이터 흐름

Blesta 컨트롤러/플러그인 → PHP/PDT·Form helper → structure.pdt → CSS/기존 JS → 원래 폼 제출·서버 검증·거래 처리.

2026-09-25 운영 structure.pdt의 CSS 순서는 tokens.css → wicked-v3.css(wicked/ 하위 파일 @import) → teamwicked-site.css → 홈 전용 home-preview.css → wickedhost-system.css → wickedhost-catalog.css → wickedhost-storefront.css입니다. 2026-09-12 이후 추가된 뒤의 두 파일은 wickedhost-system.css가 정한 --wh-* 토큰만 사용합니다. 공개 페이지 13개를 라이트/다크로 렌더링했을 때 행동 버튼 40px/4px, 입력 42px/4px, Pretendard Variable, 배경·본문 토큰이 모두 기준과 같았고 반투명(backdrop-filter) 표면은 없었습니다. 2026-09-12 11:03 UTC 반영 후 테마 242개 파일과 주문 partial의 운영/로컬 SHA-256 일치를 확인했습니다. 후속 CSS 보완은 기존 btn-light 저장·검토·결제·답글 제출 버튼을 라임 주 버튼으로 구분하고 편집기의 구형 파란 포커스를 제거합니다. 위험 제출은 빨간색을 유지합니다. 이 파일 일치는 모든 고객 업무 경로 실행을 의미하지 않습니다.

• theme/css/tokens.css: --vx-* 의미 토큰과 --wk-site-* 사이트 별칭.
• theme/css/wicked/components/teamwicked-shell.css: 사이트 셸 호환 스타일.
• theme/css/teamwicked-site.css: 기존 사이트 어댑터.
• theme/css/wicked-v3.css: 클라이언트 테마의 유일한 진입점. wicked/components/, wicked/pages/(teamwicked-workspaces.css 포함)를 @import합니다.
• theme/css/wickedhost-system.css: 최종 WickedHost 제품군 토큰·UI 호환 계층. 라이트/다크, 상태, 폼, 표, 주문 dock, 레거시 편집기까지 대응.
• theme/css/wickedhost-catalog.css: 상단 제품 메가메뉴와 모바일 제품 목록. 가격·플랜 값은 넣지 않고 원래 Blesta 폼을 유지합니다.
• theme/css/wickedhost-storefront.css: /products/* 제품 소개·상세 페이지. CMS 홈, home-preview 자산, 원래 주문 폼에는 적용하지 않습니다.
• theme/css/pretendard-variable-subset.css + theme/webfonts/pretendard-subset/: Pretendard 1.3.9 공식 dynamic subset 92조각. 2026-09-30부터 페이지에 쓰인 글자 범위만 받습니다(2MB → 약 0.3MB). OFL 라이선스는 webfonts/Pretendard-OFL.txt. 공식 subset에 없는 2,306자(일부 악센트 라틴·키릴·그리스·기호)는 수정하지 않은 통짜 pretendard-variable.woff2를 unicode-range로 제한해 그 글자가 나올 때만 받습니다(2026-10-01). Panel·vPanel도 같은 방식입니다. 범위 없는 @font-face는 다시 선언하지 않습니다.
• theme/css/wicked/components/buttons.css: 공통 버튼 계층.
• theme/structure.pdt: 자산 순서와 원래 PHP 셸.
• README.md: 범위·기존 배포·현재 디자인 계약.

이메일 표면

Blesta HTML 이메일도 WickedHost 제품군에 속합니다. 웹 CSS를 그대로 불러오지 않고 이메일 클라이언트 호환 table 구조와 inline 값으로 canvas #f6f7f3, surface #fff, text #171916, muted #687066, border #d7dcd2, accent #8ccb24, 4px 모서리를 사용합니다. 개별 이벤트 본문은 콘텐츠 조각만 소유하고 언어별 공통 템플릿이 문서·브랜드 헤더·서명·지원 링크를 소유해야 합니다. 로고는 메인 사이트 /WICKED.svg와 같은 해시의 teamwicked-mark.svg만 사용하며, 외부 이미지가 차단되어도 옆의 WICKED HOST 텍스트와 행동 링크를 읽을 수 있어야 합니다. 2026-09-16 운영 반영에서는 120개 parser/미발송 렌더와 로고 해시, 공개 링크를 확인하고 참조가 끝난 과거 WICKED 로고 자산을 제거했습니다.

인증·검증 화면 경계

• /client/login/은 teamwicked.me/auth의 TeamWicked 통합로그인(WICKED ACCOUNT)으로 이동합니다. 이 화면은 Blesta 테마가 아니라 통합 계정 서비스가 그립니다. 라임 CTA와 WickedHost 색을 쓰지만 컨트롤 높이는 44px이고 로컬 Pretendard를 씁니다. 어느 체계가 이 화면의 시각 기준을 맡을지는 GAP-09에 남깁니다.
• 기존 Blesta /client/login/forgot/ 화면은 아직 열립니다. WickedHost 기준으로 그려지지만 제목(아이디 찾기)과 제출 버튼(사용자 이름 복구)의 문구가 다릅니다.
• 스토어 브라우저 검증 화면은 PHP보다 먼저 ingwprox1 nginx(blesta-live.conf)가 인라인 HTML로 응답합니다. 2026-09-25부터 wickedhost-system.css와 같은 canvas/text/muted/border/lime 값을 인라인으로 복제하고, Blesta와 같은 localStorage theme(dark/light, 없으면 시스템 설정)으로 다크 모드를 정하며, 모션 감소 환경에서는 회전을 멈춥니다. 쿠키 이름·값·유효시간과 즉시 새로고침 동작은 방어 계약이라 바꾸지 않았습니다.

상태색

Blesta가 먼저 쓰던 대비 보정 danger/warning/info 값(#b73737/#f08080, #805200/#e5b04c, #285d91/#93b8ec)은 2026-09-30부터 WickedHost 공통값입니다. Blesta 운영 CSS는 이번 통일로 바뀌지 않았습니다. 경위는 GAP-07에 있습니다. 링크(#416315 / #b7e56a)와 성공(#356515 / #a4e238)은 아직 Blesta에만 정의된 역할입니다.

적용 원칙

BLESTA-01 MUST: form action/method/name/CSRF·multipart·기존 검증·중복 제출 이벤트를 보존합니다.

BLESTA-02 MUST: --vx-*와 --wk-site-*를 같은 역할로 단정하지 않습니다. 최종 cascade와 페이지별 예외를 확인합니다.

BLESTA-03 MUST: baseline·releases·mockups를 운영 소스로 배포하지 않습니다.

BLESTA-04 SHOULD: 신규 표면은 기존 wk-solid-surface, 후속 행동은 wk-action-row 등의 실제 계약을 먼저 검토합니다.

BLESTA-05 MUST: 이메일의 동적 URL 태그가 호스트인지 경로인지 발송 코드에서 확인합니다. {client_uri}·{admin_uri} 같은 경로 태그에 프로토콜만 붙이지 않습니다.

BLESTA-06 MUST: 개별 이메일 본문에 html/body 문서를 넣고 다시 공통 HTML 템플릿으로 감싸지 않습니다. H2O 태그·텍스트 대안·첨부·발송 이벤트는 외형 변경과 분리해 보존합니다.

BLESTA-07 SHOULD: 새 화면 계층은 wickedhost-system.css 뒤에 두고 --wh-* 토큰만 소비합니다. 새 HEX 값을 추가하지 않고, 파일을 바꾸면 structure.pdt의 ?v=를 올립니다.

BLESTA-08 MUST: nginx 인라인 검증 화면처럼 CSS를 불러오지 않는 표면은 wickedhost-system.css의 값을 복제한 위치를 기록하고 토큰 변경 때 함께 갱신합니다. 쿠키·재시도·캐시 헤더 같은 방어 동작은 외형 변경과 분리합니다.

이행 전 원문과 선언의 차이

이행 전 tokens.css에는 오렌지 CTA 설명·중성 기본 CTA·오렌지 상태색이 남아 있었습니다. 원본은 롤백/과거 근거로 유지하고 최종 어댑터에서 공통 라임 CTA와 읽기 쉬운 의미 상태색으로 매핑합니다. 최종 cascade를 확인하지 않은 원문 값은 현행 시각 계약으로 승격하지 않습니다.

남은 확인

77개 고객 테마 PDT의 PHP 문법, CSS 41개, 공개 수정안 24경로×4조건, 공개 티켓 작성 4부서, 가입 52개 격리 검사와 실제 주문 partial 40개 조합을 확인했습니다. 공통 UI 격리 검사에서 탭/메뉴/모달/오류/첨부 재시도 동작을 확인했습니다. 독립 mock의 통과를 실제 결제 결과로 간주하지 않습니다.

2026-09-25 확인에서 로컬 작업본 blesta-theme/theme는 css/wicked/pages/order-signup-wizard.css 하나만 운영보다 오래됐습니다(운영은 .phone-verify, 로컬은 이전 이름). 로컬 기준으로 재배포하기 전에 이 파일을 운영본과 맞춰야 합니다. 존재하지 않는 경로는 404 대신 홈으로 302 이동합니다.

로그인 세션이 없어 고객별 청구서·결제 계정·서비스·답글·도메인 관리와 관리자 화면은 실제 렌더 검증이 남아 있습니다. 좁은 화면 폭과 스위치 실물(공개 페이지에는 없음)도 아직 확인하지 않았습니다. 실제 결제·환불·티켓 저장·메일·SMS·계정 생성도 실행하지 않았습니다. 공개 진입에서 로그인/홈/부서 목록으로 이동한 경로는 인증 후 페이지 통과가 아닙니다. 기존 동의·청구서 선택·저장 폼 체크박스는 자동 저장 스위치로 변환하지 않습니다.