# HTML 목업 스케쳐 > UI/UX 디자인 방향을 비교하기 위해 2-3개의 인터랙티브 HTML 목업 변형을 생성하세요. 단일 접근 방식에 전념하기 전에 다양한 시각적 스탠스를 빠르게 탐색하고 피드백을 수집하세요. - Canonical: https://nanoskill.ai/ko/skills/html-mockup-sketcher - Markdown: https://nanoskill.ai/ko/skills/html-mockup-sketcher.md - Author: NousResearch - Published: 2026-06-04T05:30:00.000Z - Updated: 2026-07-21T18:34:02.819Z - Language: ko - Source type: github - Popularity signal: 2137 ## Sources - https://github.com/NousResearch/hermes-agent ## Install ```shell npx skills add https://github.com/NousResearch/hermes-agent/tree/main/skills/creative/sketch ``` ## About HTML 목업 스케쳐는 일회용 HTML 목업을 통해 사용자가 UI/UX 디자인 방향을 빠르게 탐색하고 비교할 수 있도록 설계된 강력한 스킬입니다. 단일 디자인에 전념하는 대신, 이 도구는 2-3개의 상호작용형 변형을 생성하여 다양한 시각적 스탠스를 나란히 비교할 수 있게 해줍니다. 이는 초기 단계 디자인 탐색에 이상적이며, 상당한 개발 투자 전에 개념을 시각화하고 피드백을 수집하는 데 도움을 줍니다. 이 스킬은 정적 이미지를 넘어서는 기능적이고 상호작용형 HTML 목업을 만드는 데 중점을 둡니다. 각 변형은 인라인 CSS, 시스템 글꼴 및 실제와 같은 콘텐츠를 특징으로 하는 독립적인 HTML 파일입니다. 결정적으로, 목업은 클릭 가능한 링크, 호버 상태 및 적어도 하나의 상태 전환과 같은 기본적인 상호작용을 포함하여 사용자 경험에 더 현실감 있는 느낌을 제공합니다. 통합 브라우저 도구를 통해 시각적 검증이 가능하여 목업이 깨끗하고 버그가 없도록 보장합니다. 정보에 입각한 의사 결정을 촉진하기 위해 HTML 목업 스케쳐는 구조화된 비교를 제공합니다. 각 변형에는 디자인 원칙, 주요 선택 사항, 트레이드오프 및 최적의 사용 사례를 설명하는 상세한 \`README.md\`가 함께 제공됩니다. 생성 후에는 다양한 디자인 차원에서의 차이를 요약한 비교 표가 제공되며, 승자를 선택하거나 요소를 결합하거나 추가로 반복하는 데 도움이 되는 주관적인 분석이 포함됩니다. ## Key features - **여러 디자인 변형 생성**: 서로 다른 디자인 관점(예: 밀도, 강조, 미적 감각, 레이아웃)을 탐구하는 2~3개의 별개의 HTML 목업 변형을 동시에 생성하여 나란히 비교할 수 있습니다. - **대화형 HTML 목업**: 인라인 CSS, 시스템 글꼴 및 사실적인 가짜 콘텐츠가 포함된 독립형 HTML 파일을 만듭니다. 목업은 대화형이어서 클릭 가능한 링크, 호버 및 적어도 하나의 상태 전환을 허용합니다. - **브라우저 도구를 사용한 시각적 확인**: 통합 브라우저 탐색 및 비전 도구를 활용하여 각 HTML 목업을 시각적으로 검사하고 확인하여 레이아웃이 깨끗하고 읽기 쉬우며 버그가 없는지 확인한 후 제공합니다. - **구조화된 변형 문서**: 각 HTML 목업 변형에는 디자인 관점, 주요 선택 사항(레이아웃, 타이포그래피, 색상, 상호작용), 장단점 및 이상적인 사용 사례를 자세히 설명하는 \`README.md\`가 포함되어 있어 정보에 입각한 비교를 용이하게 합니다. - **비교 분석 표**: 생성된 모든 HTML 목업 변형을 비교 표에 제시하여 밀도, 주요 작업 가시성, 스캔 가능성, 전체적인 느낌과 같은 주요 차원의 차이점을 주관적인 요약과 함께 강조합니다. ## Use cases - **UI/UX 디자인 방향 탐색**: 상당한 개발 시간을 투자하기 전에 다양한 사용자 인터페이스 및 사용자 경험 디자인 아이디어를 탐색하기 위해 여러 HTML 목업 변형을 빠르게 생성하고 비교합니다. - **시각적 개념에 대한 피드백 수집**: 이해관계자나 사용자에게 대화형 HTML 목업을 제시하여 다양한 시각적 방향에 대한 초기 피드백을 수집함으로써 개념을 구체화하고 정보에 입각한 디자인 결정을 내릴 수 있도록 돕습니다. - **새로운 기능을 위한 신속한 프로토타이핑**: 일회성 HTML 목업을 만들어 새로운 기능이나 화면을 신속하게 프로토타이핑하며, 프로덕션 준비 코드보다 핵심 기능과 시각적 흐름에 중점을 둡니다. ## Result preview 이 에이전트 스킬이 생성한 부티크 호텔 웹사이트의 실제 HTML을 확인하세요. ![the demo of HTML mockup Agent Skill](https://file.nanoskill.ai/HTML-mockup-demo-1.jpg) ![the demo of HTML mockup Agent Skill](https://file.nanoskill.ai/HTML-mockup-demo-2.jpg) ![the demo of HTML mockup Agent Skill](https://file.nanoskill.ai/HTML-mockup-demo-3.jpg) ![the demo of HTML mockup Agent Skill](https://file.nanoskill.ai/HTML-mockup-demo-4.jpg) ## Result walkthrough ### 1단계：설치 스킬을 에이전트에 추가하세요. ![a simple demonstration of the first step in using HTML mockup](https://file.nanoskill.ai/HTML-mockup-step-1.jpg) ### 2단계：웹사이트 설명 만들고 싶은 웹사이트의 세부 정보(예: 스타일, 유형)를 설명하세요. ![a simple demonstration of the second step in using HTML mockup](https://file.nanoskill.ai/HTML-mockup-step-2.jpg) ### 3단계：결과 검토 생성된 HTML 목업을 검토하고 비교하세요. ![a simple demonstration of the third step in using HTML mockup](https://file.nanoskill.ai/HTML-mockup-step-3.jpg) ## Skill definition # 스케치 사용자가 **디자인 방향을 미리 확인한 후 결정**하고 싶을 때 이 스킬을 사용하십시오 — UI/UX 아이디어를 일회성 HTML 목업으로 탐색합니다. 목표는 2-3개의 인터랙티브 변형을 생성하여 사용자가 시각적 방향을 나란히 비교할 수 있도록 하는 것이며, 배포 가능한 코드를 생성하는 것이 아닙니다. 사용자가 "이 화면을 스케치해 줘", "X가 어떤 모습일지 보여줘", "레이아웃 A와 B를 비교해 줘", "이 UI에 대해 2-3가지 시도를 보여줘", "변형들을 보고 싶어", "만들기 전에 목업을 보여줘"와 같이 말할 때 이 스킬을 로드하십시오. ## 사용하지 말아야 할 때 - 사용자가 프로덕션 컴포넌트를 원할 때 — `claude-design`을 사용하거나 제대로 작성하십시오 - 사용자가 정교한 일회성 HTML 결과물(랜딩 페이지, 덱)을 원할 때 — `claude-design` - 사용자가 다이어그램을 원할 때 — `excalidraw`, `architecture-diagram` - 디자인이 이미 확정되었을 때 — 그냥 빌드하십시오 ## 사용자에게 완전한 GSD 시스템이 설치된 경우 `gsd-sketch`가 형제 스킬로 나타난다면( `npx get-shit-done-cc --hermes`를 통해 설치), 전체 워크플로우를 위해 **`gsd-sketch`**를 선호하십시오: MANIFEST가 포함된 지속적 `.planning/sketches/`, 프론티어 모드 분석, 과거 스케치 간 일관성 감사, 그리고 GSD의 나머지 부분과의 통합이 가능합니다. 이 스킬은 경량 독립형 버전입니다 — 상태 머신 없이 일회성 스케치를 위한 것입니다. ## 핵심 방법 ``` 인테이크 → 변형 → 헤드투헤드 → 승자 선택 (또는 반복) ``` ### 1. 인테이크 (사용자가 이미 충분한 정보를 제공했다면 건너뛰십시오) 변형을 생성하기 전에 세 가지를 얻으십시오 — 한 번에 하나씩 질문하되, 한꺼번에 모두 묻지 마십시오: 1. **느낌.** "이것이 어떤 느낌이어야 할까요? 형용사, 감정, 분위기를 말해주세요." — *"차분하고, 편집적이며, Linear 같은"* 이라는 말이 *"미니멀"* 보다 더 많은 정보를 줍니다. 2. **참고 자료.** "당신이 상상하는 느낌을 포착하는 앱, 사이트, 또는 제품은 무엇인가요?" — 실제 참고 자료가 추상적인 설명보다 낫습니다. 3. **핵심 액션.** "이 화면에서 사용자가 하는 가장 중요한 단일 작업은 무엇인가요?" — 변형들이 모두 이것을 잘 수행해야 합니다; 그렇지 않다면 단지 장식일 뿐입니다. 각 답변에 대해 다음 질문 전에 간략히 반영하십시오. 사용자가 이미 세 가지를 모두 미리 제공했다면 바로 변형 단계로 넘어가십시오. ### 2. 변형 (2-3개, 절대 1개, 드물게 4개 이상) 한 번에 **2-3개의 변형**을 생성하십시오. 각 변형은 완전하고 독립적인 HTML 파일입니다. 변형을 설명하지 말고 빌드하십시오. 비교가 목적입니다. 각 변형은 **다른 디자인 스탠스**를 취해야 하며, 픽셀 값만 다른 것이 아닙니다. 세 가지 좋은 변형 축: - **밀도:** 조밀함 / 널찍함 / 초밀집 (대비되는 두 극단을 선택) - **강조:** 콘텐츠 우선 / 액션 우선 / 도구 우선 - **미적 감각:** 편집적 / 실용적 / 유쾌함 - **레이아웃:** 단일 열 / 사이드바 / 분할 창 - **근거:** 카드 기반 / 콘텐츠 원시 / 문서 스타일 하나의 축을 선택하고 거기서부터 벌리십시오. 액센트 색상만 다른 두 변형은 노력 낭비입니다 — 사용자가 구분할 수 없습니다. **변형 명명:** 스탠스를 설명하되 번호는 사용하지 마십시오. ``` sketches/ ├── 001-calm-editorial/ │ ├── index.html │ └── README.md ├── 001-utilitarian-dense/ │ ├── index.html │ └── README.md └── 001-playful-split/ ├── index.html └── README.md ``` ### 3. 진짜 HTML로 만들기 각 변형은 **단일 자기 완비형 HTML 파일**입니다: - 인라인 ` ``` ### 4. 변형 README 각 변형의 `README.md`는 다음을 답해야 합니다: ```markdown ## 변형: {스탠스 이름} ### 디자인 스탠스 이 변형을 이끄는 원칙에 대한 한 문장. ### 주요 선택 - 레이아웃: ... - 타이포그래피: ... - 색상: ... - 인터랙션: ... ### 트레이드오프 - 강점: ... - 약점: ... ### 최적 용도 - 이 변형이 실제로 적합한 사용자 유형 또는 사용 사례 ``` ### 5. 헤드투헤드 모든 변형이 빌드된 후, 비교로 제시하십시오. 단순 나열이 아니라 — **의견을 제시하십시오**: ```markdown ## 홈 화면에 대한 세 가지 시도 | 차원 | 차분한 편집 | 실용적 밀집 | 유쾌한 분할 | |-----------|----------------|-------------------|---------------| | 밀도 | 낮음 | 높음 | 중간 | | 주요 액션 가시성 | 낮음 | 높음 | 중간 | | 스캔 용이성 | 높음 | 중간 | 낮음 | | 느낌 | 차분하고 신뢰감 | 날카롭고 도구적 | 초대적이고 활기참 | **내 생각:** 실용적 밀집은 파워 유저에게, 차분한 편집은 콘텐츠 중심 오디언스에게 적합합니다. 유쾌한 분할이 가장 약합니다 — 양쪽을 다 하려다 어느 쪽도 충실하지 못합니다. ``` 사용자가 승자를 선택하거나 두 가지를 결합하도록 하거나, 다음 라운드를 요청하게 하십시오. ## 테마 설정 (프로젝트에 시각적 정체성이 있을 때) 사용자가 기존 테마(색상, 글꼴, 토큰)를 가지고 있다면, 공유 토큰을 `sketches/themes/tokens.css`에 넣고 각 변형에서 `@import`하십시오. 토큰을 최소한으로 유지하십시오: ```css /* sketches/themes/tokens.css */ :root { --color-bg: #fafafa; --color-fg: #1a1a1a; --color-accent: #0066ff; --color-muted: #666; --radius: 8px; --font-display: "Inter", sans-serif; --font-body: -apple-system, BlinkMacSystemFont, sans-serif; } ``` 버려질 스케치에 과도하게 토큰화하지 마십시오 — 세 가지 색상과 하나의 글꼴로 충분한 경우가 많습니다. ## 인터랙티비티 기준 스케치는 사용자가 다음을 할 수 있을 때 충분히 인터랙티브합니다: 1. **주요 액션을 클릭**하면 눈에 보이는 무언가가 발생 (상태 변경, 모달, 토스트, 네비게이션 시늉) 2. **의미 있는 상태 전환 하나** 보기 (리스트 필터, 모드 전환, 패널 열기/닫기) 3. **인지 가능한 어포던스에 호버** (버튼, 행, 탭) 그 이상은 버려질 스케치에 과잉 엔지니어링입니다. 그 이하는 스크린샷일 뿐입니다. ## 프론티어 모드 (다음에 무엇을 스케치할지 고르기) 이미 스케치가 존재하고 사용자가 "다음에 무엇을 스케치해야 할까?"라고 묻는다면: - **일관성 격차** — 서로 다른 스케치에서 나온 승리한 두 변형이 독립적으로 선택했지만 아직 함께 구성되지 않은 것 - **스케치되지 않은 화면** — 참조되었지만 탐험되지 않은 것 - **상태 커버리지** — 행복 경로는 스케치되었지만 빈 상태 / 로딩 / 에러 / 1000개 항목은 아직 - **반응형 격차** — 하나의 뷰포트에서 검증되었지만 모바일 / 초광각에서 유지되는가? - **인터랙션 패턴** — 정적 레이아웃은 존재하지만 전환, 드래그, 스크롤 동작은 존재하지 않음 2-4개의 명명된 후보를 제안하십시오. 사용자가 선택하게 하십시오. ## 출력 - 저장소 루트에 `sketches/` (또는 사용자가 GSD 관례를 따른다면 `.planning/sketches/`)를 생성하십시오 - 변형당 하나의 서브디렉토리: `NNN-stance-name/index.html` + `README.md` - 사용자에게 여는 방법을 알려주십시오: macOS에서는 `open sketches/001-calm-editorial/index.html`, Linux에서는 `xdg-open`, Windows에서는 `start` - 변형을 일회용으로 유지하십시오 — 보존해야겠다고 느낀 스케치는 실제 프로젝트 코드로 승격되어야 하며, 자산으로 관리하지 마십시오 **한 변형에 대한 일반적인 도구 순서:** ``` terminal("mkdir -p sketches/001-calm-editorial") write_file("sketches/001-calm-editorial/index.html", "...") write_file("sketches/001-calm-editorial/README.md", "## 변형: 차분한 편집\n...") browser_navigate(url="file://$(pwd)/sketches/001-calm-editorial/index.html") browser_vision(question="이 화면은 어떻게 보입니까? 명백한 레이아웃 문제가 있습니까?") ``` 각 변형에 대해 반복한 다음 비교 표를 제시하십시오. ## 저작권 표시 GSD (Get Shit Done) 프로젝트의 `/gsd-sketch` 워크플로우에서 각색 — MIT © 2025 Lex Christopherson ([gsd-build/get-shit-done](https://github.com/gsd-build/get-shit-done)). 완전한 GSD 시스템은 지속적 스케치 상태, 테마/변형 패턴 참조, 일관성 감사 워크플로우를 제공합니다; `npx get-shit-done-cc --hermes --global`로 설치하십시오. ## FAQ ### HTML 목업이란 무엇인가요? HTML 목업은 서로 다른 UI/UX 디자인 아이디어를 신속하게 시각화하고 비교하기 위해 HTML과 기본 스타일(종종 인라인 CSS)로 구축된 일회성 대화형 웹 페이지입니다. 이는 프로덕션용이 아니라 초기 단계의 디자인 탐색을 위한 것입니다. ### 이 스킬은 몇 개의 HTML 목업 변형을 생성하나요? 이 스킬은 일반적으로 한 번에 2~3개의 대화형 HTML 목업 변형을 생성합니다. 목표는 사소한 변형을 모두 나열하는 것이 아니라 비교를 위한 대조적인 디자인 관점을 제공하는 것입니다. ### 이 스킬을 사용하여 프로덕션 준비 코드를 만들 수 있나요? 아니요, 이 스킬은 디자인 방향을 탐색하기 위한 '일회성' HTML 목업용으로 특별히 설계되었습니다. 프로덕션 준비가 완료된 구성 요소나 세련된 결과물을 위해서는 \`클로드 디자인\`과 같은 다른 도구나 스킬을 사용해야 합니다. ### HTML 목업에는 어떤 종류의 상호작용이 있나요? 생성된 HTML 목업은 대화형이어서 링크를 클릭할 수 있고, 호버가 실제로 작동하며, 패널 열기/닫기, 목록 필터링 등과 같은 적어도 하나의 상태 전환이 있습니다. 이를 통해 정적 이미지보다 더 사실적인 느낌을 줍니다. ### 이 스킬은 어떻게 다른 디자인을 비교하는 데 도움이 되나요? HTML 목업을 생성한 후, 이 스킬은 다양한 디자인 차원(예: 밀도, 레이아웃, 미적 감각)에서 주요 차이점을 강조하는 비교 표를 제공합니다. 또한 의사 결정을 안내하기 위한 주관적인 요약을 제공합니다. ### HTML 목업을 생성하려면 어떤 정보를 제공해야 하나요? 효과적인 HTML 목업을 생성하려면 원하는 '느낌'(형용사, 분위기), 해당 느낌을 포착하는 참조 앱/사이트, 그리고 사용자가 화면에서 수행하는 가장 중요한 '핵심 동작'에 대해 질문을 받게 됩니다.