소개
클로드디자인(줄여서 클디??)... 정말 좋은 툴이지만 자유도가 워낙 높다보니 만드는 디자인마다 클로드디자인과 제가 함께하는 개발경험(?)이 천차만별이었습니다.
처음에는 클디가 색상이나 글꼴 등 tweak가능한 UI를 알아서 제공해주는 것를 보고 희열을 느꼈지만 그런 부분은 금방 지나가고, 경험이 쌓일수록 나만의 테스트용 UI에 대한 필요가 생겼습니다.
진 행 방법
클디에게 이것도 필요해.저것도 필요해 하다보니 저만의 유용한 개발환경을 구축하게 되어 공유해봅니다.
스킬
# 화면 제작 도구(Screen Editor) 구축 스킬
새 디자인을 시작할 때, **완성 화면을 만들기 전에 화면 제작 도구부터 세운다.**
결과물은 항상 두 벌이다.
| 파일 | 용도 |
| --- | --- |
| `editor.html` | 화면 목록·핫스팟·텍스트/스타일 편집·흐름 보기를 갖춘 프로토타입 에디터 (단일 파일, 오프라인 동작) |
| `<project>-standalone.html` | 배포·공유용 단일 파일 사이트 (클라이언트 라우팅) |
| `screens/*.html` | 화면별 원본 HTML (수정·추가의 기준) |
| `screens/site.css` | 모든 화면이 공유하는 공통 CSS |
| `screen-map.js` | 화면 목록·그 룹·라벨·핫스팟 정의 |
---
## 1. 폴더 구조
```
screens/
site.css 공통 CSS (전 화면 공유)
index.html 각 화면 — <head>에 <!--GOVCSS--> 주석 한 줄 필수
...
screen-map.js 화면 목록 / 그룹 / 핫스팟
editor.html 에디터 (screens + css + screen-map을 내장한 단일 파일)
site-standalone.html 배포용 사이트
tools/editor-shell.html 빈 에디터 셸 템플릿 (재사용)
```
## 2. 화면 HTML 작성 규칙
- 각 화면은 **완결된 HTML 문서**. `<head>`에 `<!--GOVCSS-->` 주석을 넣으면 에디터가 그 자리에 공통 CSS를 주입한다.
- 화면 간 이동 요소에는 `data-nav="키"`를 붙인다. 헤더 내비게이션은 `<a href="대상.html">`로 쓴다 (standalone에서 그대로 라우팅됨).
- **상태별로 화면을 나눈다.** 탭 전환·모달 열림·장바구니 수량·완료 화면은 각각 별도 파일. 에디터는 정적 화면 사이의 이동을 핫스팟으로 잇는 도구이므로, 상태 = 화면이다.
- 예: `index.html` / `index-tori.html`(탭 전환), `book.html` / `endorse-a.html`(모달 열림), `order.html` / `order-both.html` / `order-empty.html` / `order-done.html`
- 오버레이 화면은 배경 화면 HTML을 그대로 복사하고 `</body>` 앞에 오버레이 마크업만 덧붙인다.
## 3. `screen-map.js` 형식
```js
const UNIVERSAL_HOTSPOTS = [ // 모든 화면에 적용 (헤더 등)
{ sel: '.nav a[href="index.html"]', to: 'index.html', note: '홈' },
];
const SCREEN_GROUPS = [ // 사이드바 그룹 = 사용자 여정 단위
{ id: 'landing', label: '랜딩', screens: [['index.html', '홈']] },
];
const SCREEN_HOTSPOTS = { // 화면별 이동
'index.html': [{ sel: '[data-nav="order"]', to: 'order.html', note: '주문' }],
};
const SCREEN_LABELS = {};
for (const g of SCREEN_GROUPS) for (const [f, l] of g.screens) SCREEN_LABELS[f] = l;
const SCREEN_BREADCRUMB = {};
const SCREEN_SEARCH_FILTERS = {};
```
`sel`은 화면 iframe 안에서 매칭되는 CSS 선택자, `to`는 대상 파일(`'__back'`이면 뒤로가기), `note`는 핫스팟 라벨.
## 4. 에디터 조립 (run_script)
`tools/editor-shell.html`을 읽어 `__sa_data` JSON 블록만 교체한다. 블록 키는
`{ css, logo, lucide, injector, screenmap, screens }` — `injector`는 셸의 것을 **그대로 재사용**하고, 나머지만 프로젝트 것으로 바꾼다.
```js
let s = await readFile('tools/editor-shell.html');
const lines = s.split('\n');
const bi = lines.findIndex(l => l.includes('id="__sa_data"'));
const old = JSON.parse(/id="__sa_data">([\s\S]*)<\/script>$/.exec(lines[bi])[1].replace(/<\\\//g, '</'));
const screens = {};
for (const f of (await ls('screens')).filter(f => f.endsWith('.html'))) screens[f] = await readFile('screens/' + f);
const blob = {
css: await readFile('screens/site.css'),
logo: '', lucide: '',
injector: old.injector,
screenmap: await readFile('screen-map.js'),
screens,
};
lines[bi] = '<script type="application/json" id="__sa_data">' +
JSON.stringify(blob).replace(/<\//g, '<\\/') + '</script>';
await saveFile('editor.html', lines.join('\n'));
```
그다음 브랜딩·뷰포트만 문자열 치환한다.
- 헤더: `프로젝트 이름` / `Screen Editor` / `프로토타입` / 화면 수 문구
- 시작 화면: `current: 'index.html'`, `history: ['index.html']`
- **뷰포트 크기**: CSS 변수 `--phone-w` / `--phone-h`
- 모바일 390×820 (기본) · 데스크톱 1280×860 · 태블릿 834×1112
- 데스크톱으로 바꿀 때는 `.phone` 라운드(44px→10px), `.phone-screen`(36px→6px), `.phone::before`(노치 `content: none`), `.status-bar { display: none }`도 함께 손본다.
- 흐름 뷰 썸네일 비율도 맞춘다: `.fl-thumb`(세로 44×76 → 가로 76×51), `#flow-wide .fl-thumb`, 각각의 `transform: scale(...)`
- `fitPhone()`은 CSS 변수를 읽게 되어 있으므로 숫자를 직접 고치지 않는다.
## 5. standalone 사이트 조립
`screens/*.html`의 `<body>` 안쪽만 뽑아 `.route` div로 감싸고, 공통 CSS + 라우터 스크립트를 붙여 단일 파일로 저장한다.
- 라우터: `a[href$=".html"]` 클릭과 `[data-nav]` 클릭을 가로채 `.route.on`을 교체
- 화면별 `data-nav` → 대상 파일 매핑은 `screen-map.js`의 `SCREEN_HOTSPOTS`와 동일한 표를 쓴다
- 해시 URL(`#order`)과 `localStorage`로 마지막 위치를 복원
- 오버레이 화면은 배경 클릭·× 버튼으로 배경 화면으로 되돌린다
- `<template id="__bundler_thumbnail">`에 간단한 SVG 썸네일을 넣는다
## 6. 작업 순서
1. 공통 CSS(`screens/site.css`) — 색·타이포·버튼·카드·폼 등 시스템을 먼저 확정
2. 화면 HTML을 상태 단위로 하나씩 작성 (run_script 한 번에 한두 화면씩; 너무 긴 스크립트는 중간에 끊긴다)
3. `screen-map.js` 작성
4. 에디터 조립 → `eval_js`로 iframe 안 렌더링·프레임 정렬 확인
5. standalone 조립 → 라우팅을 `eval_js` 클릭 시퀀스로 검증 (파일이 커서 스크린샷은 타임아웃될 수 있음)
## 7. 주의점
- `run_script`는 **한글 파일명을 거부**한다. 영문 파일명으로 저장한 뒤 `copy_files`로 옮긴다.
- 긴 `run_script`는 중간에 잘린다. 화면 2~3개 단위로 나눠 실행한다.
- 문자열 치환으로 에디터를 손볼 때 `__sa_data` 블록까지 같이 바뀌지 않도록, **블록 삽입은 항상 마지막에** 한다.
- 에디터의 이름 변경·텍스트/스타일 편집은 브라우저 localStorage에만 저장된다. 영구 반영은 사용자가 "프로젝트에 반영"을 눌러 복사한 내용을 채팅으로 전달하면 `screens/`와 `screen-map.js`에 반영한다.claude.md
# 프로젝트 지침
## 모든 디자인은 화면 제작 도구부터 시작한다
새 디자인(사이트·앱·프로토타입)을 만들 때는 완성 화면을 바로 그리지 말고,
먼저 `tools/screen-editor-skill.md`의 절차대로 **화면 제작 도구를 구축한다.**
산출물은 항상 이 구성이다.
- `screens/` — 화면별 원본 HTML + 공통 CSS
- `screen-map.js` — 화면 목록·그룹·핫스팟
- `editor.html` — 화면 에디터 (`tools/editor-shell.html`을 재료로 조립)
- `<project>-standalone.html` — 배포용 단일 파일
작업을 시작하기 전에 `tools/screen-editor-skill.md`를 읽고 그 순서를 따른다.실제화면
구글 문서 - 스크린샷
갖춘 기능
전/후 페이지 확인
페이지 내 액션버튼 확인
화면요소 (텍스트) 직접 수정
html파일로 다운로드
요소 특정하기(클디한테 이거 고쳐라 할 때 지명하려는 용도)
홈화면, 전체메뉴화면 바로가기
정도입니다.
클로드디자인에 관심있는 분이라면 제가 다듬은 스킬과 개발UI가 유익할 것이라는 생각에 공유해봅니다~!
