공개 문서
content/courses/18-show-me-visual-output.mdx
아래는 content/courses/18-show-me-visual-output.mdx 와 동일한 원문입니다. Markdown과 HTML 변환 결과를 각각 복사할 수 있습니다.
공개 문서 원문 (Markdown)
---
title: "Show me — 비주얼 결과물 즉시 만들기"
slug: "18-show-me-visual-output"
description: "Claude Code에 \"Show me\"를 붙이면 HTML 카드·차트·계산기를 즉시 생성한다. 주택 담보 대출 계산기를 예제로 배운다."
order: 18
date: "2026-03-13"
level: 2
draft: false
---
# "Show me" — 비주얼 결과물 즉시 만들기
> **이 챕터를 마치면** Claude Code에 "Show me"를 붙여 카드 UI·차트·인터랙티브 계산기를 즉시 만들고, 그 결과물을 Next.js 페이지에 붙여 넣을 수 있어요.
---
## "Show me"란?
Claude Code에 `Show me`를 붙이면 **텍스트 설명 대신 바로 열 수 있는 HTML 결과물**을 출력합니다.
| 일반 질문 | "Show me" 질문 |
|-----------|---------------|
| "주택 대출 계산 설명해줘" | "주택 30년 대출 총비용 **Show me**" |
| ASCII 표 + 마크다운 | 인터랙티브 카드 + 슬라이더 계산기 |
| 읽어야 이해 | 클릭하면 바로 확인 |
### 핵심 규칙 (CLAUDE.md에 등록된 내용)
```
"Show me" 감지 시 →
✅ 완성형 HTML Artifact 출력
✅ 카드 그리드 + 태그 pill + 호버 효과
❌ ASCII 다이어그램 금지
❌ 마크다운 테이블만으로 대체 금지
```
---
## 예제: 주택 구매 30년 총비용 계산기
아래 프롬프트를 Claude Code에 그대로 붙여 넣어 보세요.
```
주택을 구매하려고 해. 30년에 걸쳐서 총 얼마를 지불해야 하는지 궁금해. Show me.
```
Claude Code는 다음 요소를 갖춘 HTML 파일을 즉시 생성합니다.
- **입력 슬라이더** — 매매가 / 자기자본 / 연 이자율
- **결과 카드 3종** — 대출 원금 / 30년 총 납입금 / 월 납입금
- **수평 바 차트** — 자기자본·원금·이자 비율 시각화
- **5년 단위 타임라인** — 누적 납입금 막대 그래프
- **Summary 푸터** — 집값의 N배를 지불한다는 핵심 수치
---
## 직접 실행해보기
### 1단계 — 파일 저장
Claude Code가 출력한 HTML을 복사해 저장합니다.
```bash
# Downloads 폴더에 저장 (Claude Code가 자동 저장)
open ~/Downloads/mortgage-calculator.html
```
브라우저에서 슬라이더를 움직이면 모든 수치가 **실시간**으로 바뀝니다.
---
### 2단계 — Next.js 페이지로 통합
HTML 결과물을 Next.js 앱에 넣는 방법은 두 가지입니다.
#### 방법 A — iframe 임베드 (가장 빠름)
```tsx
// app/tools/mortgage/page.tsx
export default function MortgagePage() {
return (
<div className="min-h-screen bg-[#F5F4F0]">
<iframe
src="/mortgage-calculator.html"
className="w-full h-screen border-0"
title="주택 30년 비용 계산기"
/>
</div>
)
}
```
`public/mortgage-calculator.html` 에 파일을 두면 바로 동작합니다.
#### 방법 B — React 컴포넌트로 변환 (권장)
Claude Code에 이렇게 요청하세요.
```
방금 만든 mortgage-calculator.html을
Next.js 15 + Tailwind CSS React 컴포넌트로 변환해줘.
useState로 입력값을 관리하고, 계산 로직은 useMemo로 최적화해줘.
```
---
### 3단계 — "Show me" 응용 패턴
같은 방식으로 다양한 비주얼 도구를 즉시 만들 수 있어요.
```
투자 수익률(ROI)을 연도별로 비교하고 싶어. Show me.
```
```
월별 지출 카테고리를 파이 차트로 보고 싶어. Show me.
```
```
SaaS 가격 플랜 3종을 비교 카드로 만들어줘. Show me.
```
---
## "Show me" 결과물의 디자인 기준
Claude Code는 `CLAUDE.md` 에 등록된 아래 기준으로 HTML을 생성합니다.
| 요소 | 스펙 |
|------|------|
| 레이아웃 | CSS Grid 2–3열 카드 |
| 배경 | `#FAFAF8` (크림) |
| 카드 | 흰색 + `box-shadow: 0 1px 3px rgba(0,0,0,0.08)` |
| 강조색 | `#4F46E5` 인디고 |
| 타이포 | Noto Sans KR, 제목 24px bold |
| 태그 | pill 형태, 파스텔 배경 |
| 호버 | `translateY(-2px)` + 그림자 강화 |
| 폰트 | Google Fonts (Noto Sans KR) |
---
## CLAUDE.md 등록 방법
"Show me" 규칙을 자신의 프로젝트에도 적용하고 싶다면, 프로젝트 `CLAUDE.md` 에 아래 섹션을 추가하세요.
```markdown
## "Show me" 출력 규칙
사용자가 "Show me"를 사용할 때:
- 항상 완성형 HTML Artifact 출력
- 카드 그리드 + 태그 pill + 호버 효과 필수
- ASCII / 마크다운 테이블로 대체 금지
- 배경 #FAFAF8, 강조색 #4F46E5, Noto Sans KR
```
Claude Code는 이 규칙을 매 대화에 자동 적용합니다.
---
## 체크리스트
- [ ] `Show me`를 붙인 프롬프트로 HTML 파일을 생성했다
- [ ] 브라우저에서 슬라이더가 실시간 동작하는 것을 확인했다
- [ ] `public/` 폴더에 파일을 넣고 Next.js iframe으로 임베드했다
- [ ] 나만의 "Show me" 질문 2개를 만들어 실행해봤다
---
> **마무리 실습:** "Show me"로 만든 결과물을 Vercel에 배포하고 공유 링크를 만들어 실제 피드백 수집까지 연결해 보세요.
---
## 10장 보강 프로세스 적용: 시각 결과물 품질 기준 (실전)
이 챕터는 단순 생성이 아니라 **공유 가능한 품질**을 만드는 단계입니다.
기본샘플프로세스를 적용해 결과물 검증 기준을 고정합니다.
### "Show me" 결과물 품질 게이트
1. **기능 동작**
- 입력 변경 시 결과가 즉시 반영되는가
2. **가독성**
- 카드/텍스트/차트 대비가 충분한가
3. **모바일 대응**
- 375px에서도 레이아웃이 깨지지 않는가
4. **브랜드 일관성**
- 색상/톤/카피가 프로젝트 규칙과 일치하는가
5. **재사용성**
- Next.js 컴포넌트로 변환 가능한 구조인가
### 18챕터 실패 패턴 TOP 5
1. **시각적으로만 좋아 보이고 계산 로직 불일치**
- 대응: 입력값 테스트 케이스 3개로 수치 검증
2. **ASCII/표로 회귀**
- 대응: 반드시 HTML Artifact 기준 유지
3. **모바일 미검증**
- 대응: 최소 모바일 뷰포트 점검 필수
4. **임베드 후 경로 오류**
- 대응: `public/` 경로 및 `iframe src` 재확인
5. **공유 전 접근성/성능 점검 누락**
- 대응: 색 대비·로딩 시간·콘텐츠 우선순위 확인
### 18챕터 체크리스트 (DoD)
- [ ] "Show me" 결과물 1개 이상 생성 및 동작 확인
- [ ] 모바일에서 레이아웃/상호작용 확인
- [ ] Next.js 임베드 또는 컴포넌트 변환 완료
- [ ] 시각/수치/카피 품질 점검 완료
- [ ] 공유 가능한 데모 링크 준비 완료
### 10장 최종 회고 템플릿
- **문제:** 무엇을 해결하려고 했는가
- **해결:** 4도구를 어떻게 조합했는가
- **검증:** 인증/기능/시각 품질을 어떻게 확인했는가
- **다음:** 반복 가능한 자동화 포인트는 무엇인가
공개 문서 변환 코드 (HTML)
<hr>
<h2>title: "Show me — 비주얼 결과물 즉시 만들기"
slug: "18-show-me-visual-output"
description: "Claude Code에 "Show me"를 붙이면 HTML 카드·차트·계산기를 즉시 생성한다. 주택 담보 대출 계산기를 예제로 배운다."
order: 18
date: "2026-03-13"
level: 2
draft: false</h2>
<h1>"Show me" — 비주얼 결과물 즉시 만들기</h1>
<blockquote>
<p><strong>이 챕터를 마치면</strong> Claude Code에 "Show me"를 붙여 카드 UI·차트·인터랙티브 계산기를 즉시 만들고, 그 결과물을 Next.js 페이지에 붙여 넣을 수 있어요.</p>
</blockquote>
<hr>
<h2>"Show me"란?</h2>
<p>Claude Code에 <code>Show me</code>를 붙이면 <strong>텍스트 설명 대신 바로 열 수 있는 HTML 결과물</strong>을 출력합니다.</p>
<table>
<thead>
<tr>
<th>일반 질문</th>
<th>"Show me" 질문</th>
</tr>
</thead>
<tbody><tr>
<td>"주택 대출 계산 설명해줘"</td>
<td>"주택 30년 대출 총비용 <strong>Show me</strong>"</td>
</tr>
<tr>
<td>ASCII 표 + 마크다운</td>
<td>인터랙티브 카드 + 슬라이더 계산기</td>
</tr>
<tr>
<td>읽어야 이해</td>
<td>클릭하면 바로 확인</td>
</tr>
</tbody></table>
<h3>핵심 규칙 (CLAUDE.md에 등록된 내용)</h3>
<pre><code>"Show me" 감지 시 →
✅ 완성형 HTML Artifact 출력
✅ 카드 그리드 + 태그 pill + 호버 효과
❌ ASCII 다이어그램 금지
❌ 마크다운 테이블만으로 대체 금지
</code></pre>
<hr>
<h2>예제: 주택 구매 30년 총비용 계산기</h2>
<p>아래 프롬프트를 Claude Code에 그대로 붙여 넣어 보세요.</p>
<pre><code>주택을 구매하려고 해. 30년에 걸쳐서 총 얼마를 지불해야 하는지 궁금해. Show me.
</code></pre>
<p>Claude Code는 다음 요소를 갖춘 HTML 파일을 즉시 생성합니다.</p>
<ul>
<li><strong>입력 슬라이더</strong> — 매매가 / 자기자본 / 연 이자율</li>
<li><strong>결과 카드 3종</strong> — 대출 원금 / 30년 총 납입금 / 월 납입금</li>
<li><strong>수평 바 차트</strong> — 자기자본·원금·이자 비율 시각화</li>
<li><strong>5년 단위 타임라인</strong> — 누적 납입금 막대 그래프</li>
<li><strong>Summary 푸터</strong> — 집값의 N배를 지불한다는 핵심 수치</li>
</ul>
<hr>
<h2>직접 실행해보기</h2>
<h3>1단계 — 파일 저장</h3>
<p>Claude Code가 출력한 HTML을 복사해 저장합니다.</p>
<pre><code class="language-bash"># Downloads 폴더에 저장 (Claude Code가 자동 저장)
open ~/Downloads/mortgage-calculator.html
</code></pre>
<p>브라우저에서 슬라이더를 움직이면 모든 수치가 <strong>실시간</strong>으로 바뀝니다.</p>
<hr>
<h3>2단계 — Next.js 페이지로 통합</h3>
<p>HTML 결과물을 Next.js 앱에 넣는 방법은 두 가지입니다.</p>
<h4>방법 A — iframe 임베드 (가장 빠름)</h4>
<pre><code class="language-tsx">// app/tools/mortgage/page.tsx
export default function MortgagePage() {
return (
<div className="min-h-screen bg-[#F5F4F0]">
<iframe
src="/mortgage-calculator.html"
className="w-full h-screen border-0"
title="주택 30년 비용 계산기"
/>
</div>
)
}
</code></pre>
<p><code>public/mortgage-calculator.html</code> 에 파일을 두면 바로 동작합니다.</p>
<h4>방법 B — React 컴포넌트로 변환 (권장)</h4>
<p>Claude Code에 이렇게 요청하세요.</p>
<pre><code>방금 만든 mortgage-calculator.html을
Next.js 15 + Tailwind CSS React 컴포넌트로 변환해줘.
useState로 입력값을 관리하고, 계산 로직은 useMemo로 최적화해줘.
</code></pre>
<hr>
<h3>3단계 — "Show me" 응용 패턴</h3>
<p>같은 방식으로 다양한 비주얼 도구를 즉시 만들 수 있어요.</p>
<pre><code>투자 수익률(ROI)을 연도별로 비교하고 싶어. Show me.
</code></pre>
<pre><code>월별 지출 카테고리를 파이 차트로 보고 싶어. Show me.
</code></pre>
<pre><code>SaaS 가격 플랜 3종을 비교 카드로 만들어줘. Show me.
</code></pre>
<hr>
<h2>"Show me" 결과물의 디자인 기준</h2>
<p>Claude Code는 <code>CLAUDE.md</code> 에 등록된 아래 기준으로 HTML을 생성합니다.</p>
<table>
<thead>
<tr>
<th>요소</th>
<th>스펙</th>
</tr>
</thead>
<tbody><tr>
<td>레이아웃</td>
<td>CSS Grid 2–3열 카드</td>
</tr>
<tr>
<td>배경</td>
<td><code>#FAFAF8</code> (크림)</td>
</tr>
<tr>
<td>카드</td>
<td>흰색 + <code>box-shadow: 0 1px 3px rgba(0,0,0,0.08)</code></td>
</tr>
<tr>
<td>강조색</td>
<td><code>#4F46E5</code> 인디고</td>
</tr>
<tr>
<td>타이포</td>
<td>Noto Sans KR, 제목 24px bold</td>
</tr>
<tr>
<td>태그</td>
<td>pill 형태, 파스텔 배경</td>
</tr>
<tr>
<td>호버</td>
<td><code>translateY(-2px)</code> + 그림자 강화</td>
</tr>
<tr>
<td>폰트</td>
<td>Google Fonts (Noto Sans KR)</td>
</tr>
</tbody></table>
<hr>
<h2>CLAUDE.md 등록 방법</h2>
<p>"Show me" 규칙을 자신의 프로젝트에도 적용하고 싶다면, 프로젝트 <code>CLAUDE.md</code> 에 아래 섹션을 추가하세요.</p>
<pre><code class="language-markdown">## "Show me" 출력 규칙
사용자가 "Show me"를 사용할 때:
- 항상 완성형 HTML Artifact 출력
- 카드 그리드 + 태그 pill + 호버 효과 필수
- ASCII / 마크다운 테이블로 대체 금지
- 배경 #FAFAF8, 강조색 #4F46E5, Noto Sans KR
</code></pre>
<p>Claude Code는 이 규칙을 매 대화에 자동 적용합니다.</p>
<hr>
<h2>체크리스트</h2>
<ul>
<li><input disabled="" type="checkbox"> <code>Show me</code>를 붙인 프롬프트로 HTML 파일을 생성했다</li>
<li><input disabled="" type="checkbox"> 브라우저에서 슬라이더가 실시간 동작하는 것을 확인했다</li>
<li><input disabled="" type="checkbox"> <code>public/</code> 폴더에 파일을 넣고 Next.js iframe으로 임베드했다</li>
<li><input disabled="" type="checkbox"> 나만의 "Show me" 질문 2개를 만들어 실행해봤다</li>
</ul>
<hr>
<blockquote>
<p><strong>마무리 실습:</strong> "Show me"로 만든 결과물을 Vercel에 배포하고 공유 링크를 만들어 실제 피드백 수집까지 연결해 보세요.</p>
</blockquote>
<hr>
<h2>10장 보강 프로세스 적용: 시각 결과물 품질 기준 (실전)</h2>
<p>이 챕터는 단순 생성이 아니라 <strong>공유 가능한 품질</strong>을 만드는 단계입니다.
기본샘플프로세스를 적용해 결과물 검증 기준을 고정합니다.</p>
<h3>"Show me" 결과물 품질 게이트</h3>
<ol>
<li><p><strong>기능 동작</strong></p>
<ul>
<li>입력 변경 시 결과가 즉시 반영되는가</li>
</ul>
</li>
<li><p><strong>가독성</strong></p>
<ul>
<li>카드/텍스트/차트 대비가 충분한가</li>
</ul>
</li>
<li><p><strong>모바일 대응</strong></p>
<ul>
<li>375px에서도 레이아웃이 깨지지 않는가</li>
</ul>
</li>
<li><p><strong>브랜드 일관성</strong></p>
<ul>
<li>색상/톤/카피가 프로젝트 규칙과 일치하는가</li>
</ul>
</li>
<li><p><strong>재사용성</strong></p>
<ul>
<li>Next.js 컴포넌트로 변환 가능한 구조인가</li>
</ul>
</li>
</ol>
<h3>18챕터 실패 패턴 TOP 5</h3>
<ol>
<li><p><strong>시각적으로만 좋아 보이고 계산 로직 불일치</strong></p>
<ul>
<li>대응: 입력값 테스트 케이스 3개로 수치 검증</li>
</ul>
</li>
<li><p><strong>ASCII/표로 회귀</strong></p>
<ul>
<li>대응: 반드시 HTML Artifact 기준 유지</li>
</ul>
</li>
<li><p><strong>모바일 미검증</strong></p>
<ul>
<li>대응: 최소 모바일 뷰포트 점검 필수</li>
</ul>
</li>
<li><p><strong>임베드 후 경로 오류</strong></p>
<ul>
<li>대응: <code>public/</code> 경로 및 <code>iframe src</code> 재확인</li>
</ul>
</li>
<li><p><strong>공유 전 접근성/성능 점검 누락</strong></p>
<ul>
<li>대응: 색 대비·로딩 시간·콘텐츠 우선순위 확인</li>
</ul>
</li>
</ol>
<h3>18챕터 체크리스트 (DoD)</h3>
<ul>
<li><input disabled="" type="checkbox"> "Show me" 결과물 1개 이상 생성 및 동작 확인</li>
<li><input disabled="" type="checkbox"> 모바일에서 레이아웃/상호작용 확인</li>
<li><input disabled="" type="checkbox"> Next.js 임베드 또는 컴포넌트 변환 완료</li>
<li><input disabled="" type="checkbox"> 시각/수치/카피 품질 점검 완료</li>
<li><input disabled="" type="checkbox"> 공유 가능한 데모 링크 준비 완료</li>
</ul>
<h3>10장 최종 회고 템플릿</h3>
<ul>
<li><strong>문제:</strong> 무엇을 해결하려고 했는가</li>
<li><strong>해결:</strong> 4도구를 어떻게 조합했는가</li>
<li><strong>검증:</strong> 인증/기능/시각 품질을 어떻게 확인했는가</li>
<li><strong>다음:</strong> 반복 가능한 자동화 포인트는 무엇인가</li>
</ul>