AI Output Evolution: Embracing HTML Over Markdown

개요

AI가 사람을 돕는 시대에 콘텐츠 포맷도 진화해야 한다. Anthropic Claude Code 팀의 엔지니어 Thariq Shihipar와 OpenAI 공동창업자 Andrej Karpathy는 거의 동시에 같은 메시지를 전했다: 마크다운은 죽었다. HTML이 새로운 표준이다. 이 강의는 왜 100줄이 넘는 마크다운 문서는 사용자가 읽지 않는지, 왜 HTML이 정보 전달의 미래인지, 그리고 어떻게 지금 당장 시작할 수 있는지를 설명한다.

배경 / 사전 지식

마크다운(Markdown): GitHub README, 기술 블로그, 문서 작성 등에 널리 사용되는 경량 마크업 언어. 2004년 John Gruber가 만들었으며, 읽기 쉬운 평문 포맷이 특징이다. 헤더, 굵은 글씨, 목록, 링크 등 기본 서식만 지원한다.

HTML(HyperText Markup Language): 웹 페이지의 구조와 콘텐츠를 정의하는 마크업 언어. CSS와 JavaScript를 결합하면 색상, 레이아웃, 애니메이션, 사용자 인터랙션을 모두 구현할 수 있다.

Claude Code: Anthropic의 AI 기반 코드 생성 도구로, 사용자의 자연어 프롬프트에 따라 코드, 문서, 설계 사항을 자동으로 생성한다.

LLM(Large Language Model): 대규모 언어 모델. 문맥을 이해하고 자연스러운 텍스트를 생성하는 신경망 기반 AI 모델. Claude, GPT 등이 대표적이다.

MCP(Model Context Protocol): Claude Code가 로컬 파일 시스템, Slack, Linear 같은 외부 서비스와 연동하여 실시간 데이터에 접근하는 프로토콜.

핵심 개념

1. 마크다운의 근본적 한계

마크다운은 사람이 사람에게 쓰던 포맷이다. 깃허브의 README 파일, 기술 블로그 포스트, 회의록 등에 최적화되었다. 평문을 읽을 때의 인지 부하를 줄이는 데 훌륭했다.

하지만 AI가 복잡한 정보를 표현하려면 마크다운은 완전히 부족하다:

• 색상 표현 불가: 중요도에 따라 색을 다르게 칠할 수 없다. 유니코드 이모지(⭐⭐⭐)로 수준을 표현하는 우회책을 쓸 수밖에 없다.
• 도표·그래프 불가: 데이터 시각화가 불가능하다.
• SVG 일러스트 불가: 벡터 그래픽을 인라인으로 포함할 수 없다.
• 애니메이션 불가: 동적 효과를 표현할 수 없다.
• 인터랙션 불가: 사용자가 버튼을 클릭하거나 슬라이더를 조작할 수 없다.

결과적으로 100줄을 넘는 마크다운 문서는 대부분의 사용자가 읽지 않는다. Thariq의 고백: "나도 클로드가 만든 200줄짜리 마크다운을 읽지 않는다. 처음부터 끝까지 다 읽는 경우가 거의 없다."

2. HTML의 5가지 강점

(1) 정보 밀도(Information Density)

HTML은 마크다운이 할 수 없는 모든 것을 할 수 있다. 같은 화면 공간에 훨씬 더 많은 정보를 의미 있게 배치할 수 있다:

• 색상으로 우선순위, 상태, 카테고리 구분
• 표(table)로 복잡한 데이터를 정렬·비교
• SVG로 아키텍처 다이어그램, 플로우 차트 그리기
• 이미지와 텍스트를 함께 배치
• 탭(tab)으로 여러 섹션을 컴팩트하게 정리

(2) 시각적 명확성(Visual Clarity)

마크다운은 줄글만 쌓인다. 사용자는 텍스트를 위아래로 스크롤하면서 계속 읽어야 한다. HTML은 카드, 섹션, 컬럼으로 정보를 구조화하여 시각적 계층을 만든다.

실측 결과: 마크다운 문서는 읽음률 20~30%, HTML은 70~90%. 같은 정보인데도 형식만으로 읽음률이 3배 이상 차이난다.

(3) 공유 편의성(Shareability)

HTML 파일은 S3 같은 클라우드 스토리지에 올리고 링크 하나만 전달하면 된다. 브라우저에서 바로 열린다. 마크다운은 깃허브에 올려야 하거나 첨부 파일로 보내야 하는데, 매번 새로운 저장소나 공유 방식을 설정해야 한다.

(4) 양방향 인터랙션(Bidirectional Interaction)

이것이 HTML의 진정한 강점이다. 단방향이 아니라 양방향 루프를 만들 수 있다.

예: 버튼 애니메이션 디자인

1. "체크아웃 버튼 클릭 애니메이션을 만들어줘. 재생 속도, 색상, 효과 강도를 각각 슬라이더로 조정 가능하게 해줘"라고 프롬프트
2. AI가 슬라이더 3개가 있는 HTML 페이지 생성
3. 사용자가 슬라이더를 조작하며 실시간으로 애니메이션 미리보기
4. 마음에 드는 값을 찾으면 "Copy Parameters" 버튼 클릭
5. 그 설정이 자동으로 클립보드에 복사되어 AI에 다시 프롬프트로 전달
6. AI가 최종 코드 생성

마크다운은 이런 루프를 절대 불가능하게 한다. 마크다운에서는 "재생 속도: 500ms, 색상: #FF5733"이라고 텍스트로만 쓸 수 있을 뿐이다.

(5) Claude Code의 고유한 컨텍스트 능력

Claude Code만이 할 수 있는 특별한 일:

• 로컬 파일 시스템의 파일을 직접 읽기
• git 히스토리 조회
• Slack, Linear, Jira 같은 MCP 도구에 연결하여 실시간 데이터 끌어오기

이 모든 데이터를 단일 HTML 페이지에 시각화할 수 있다. 예를 들어 Linear의 30개 미해결 티켓을 우선순위 그리드로 표시하고, 드래그 앤 드롭으로 정렬하고, 최종 결과를 Linear API로 다시 업데이트할 수 있다. 다른 어떤 도구도 이를 할 수 없다.

3. 뇌의 시각 처리 능력

Andrej Karpathy가 강조한 신경과학적 핵심:

"인간 뇌의 약 1/3(33%)이 시각 정보 처리에 할당되어 있다. 비전은 뇌로 들어오는 정보의 10차선 고속도로다."

이를 대역폭으로 비유하면:

• 텍스트 전용: 1차선 국도 (음성 기반, 순차적)
• 마크다운: 2~3차선 도로 (헤더, 굵은 글씨로 약간의 구조)
• HTML: 4~6차선 고속도로 (색, 레이아웃, 시각적 계층)

같은 시간에 텍스트로는 100단위의 정보를 받는다면, 잘 설계된 HTML로는 400~600단위의 정보를 받을 수 있다. 이것이 "정보 밀도"의 근본 이유다.

4. AI 출력의 진화 단계

Karpathy가 제시한 프레임워크: AI가 콘텐츠를 생성할 때 거치는 진화 과정

1단계: 텍스트만 (1980~2000)

• 순서 없는 긴 텍스트 나열
• 사용자가 읽기 힘듦
• 정보 추출 어려움

2단계: 마크다운 (2000~2020)

• 헤더, 목록, 링크로 구조화
• 가독성 개선
• 하지만 여전히 정보 전달 불완전

3단계: HTML (2020~현재)

• 색, 레이아웃, 인터랙션 추가
• 사용자 참여도 극대화
• 단방향 제시에서 양방향 협력으로 변화
• 현재 새로운 디폴트가 되고 있음

4~6단계: 미래

• 인터랙티브 3D 시뮬레이션
• 실시간 영상 생성
• AR/VR 기반 인터페이스
• AI가 직접 동영상, 실행 가능한 애플리케이션 생성

작동 원리

1단계: 프롬프트에 한 줄 추가

가장 중요한 부분: 스킬, 플러그인, 설정이 전혀 필요 없다.

기존 프롬프트:

이 프로젝트의 스펙을 정리해줘.

개선된 프롬프트:

이 프로젝트의 스펙을 정리해줘. HTML 파일로 만들어줘.

또는:

코드 리뷰 의견을 PR 문서로 정리해줘. 색깔로 위험도를 표시하고 대화형 버튼을 포함해서 HTML로 만들어줘.

2단계: AI가 HTML 생성

Claude와 같은 현대 LLM은 자신의 토큰 어휘에 HTML, CSS, JavaScript가 포함되어 있다. 프롬프트에 "HTML"이라는 키워드가 있으면:

1. 구조화된 HTML5 문서 생성
2. 필요시 자동으로 CSS 스타일 포함
3. 인터랙션 필요시 JavaScript 함수 추가

모두 단일 파일로, 바로 브라우저에서 열 수 있는 형태.

3단계: 브라우저에서 열기

생성된 index.html 또는 report.html 파일을 웹 브라우저에서 열면:

• CSS 스타일이 즉시 적용됨
• JavaScript가 자동으로 실행됨
• 모든 인터랙션(버튼, 슬라이더, 폼)이 작동

별도의 빌드 과정, 번들러, 서버 설정이 전혀 필요 없다.

4단계: 양방향 피드백 루프

사용자 → AI에게 프롬프트
   ↓
AI → HTML 생성
   ↓
사용자 → 브라우저에서 HTML 열고 상호작용
   ↓
사용자 → 슬라이더/버튼 조작해서 값 변경
   ↓
사용자 → "Copy" 버튼으로 현재 설정을 텍스트로 복사
   ↓
AI에게 새 프롬프트로 전달 ("위 설정으로 최적화해줘")
   ↓
AI → 개선된 HTML 생성
   ↓
루프 반복...

이 루프가 없으면 AI 출력은 일방통행이다. HTML로 만들면 협력 도구가 된다.

코드 예시

예시 1: 기본 인터랙티브 HTML (프롬프트로 생성 가능)

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>기능 옵션 비교</title>
    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; }
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            padding: 40px 20px;
        }
        .container {
            max-width: 1200px;
            margin: 0 auto;
            background: white;
            border-radius: 12px;
            padding: 40px;
            box-shadow: 0 10px 40px rgba(0,0,0,0.2);
        }
        h1 { color: #333; margin-bottom: 30px; text-align: center; }
        
        .grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 20px;
            margin-bottom: 40px;
        }
        
        .card {
            border: 2px solid #e0e0e0;
            border-radius: 8px;
            padding: 20px;
            cursor: pointer;
            transition: all 0.3s ease;
        }
        
        .card:hover {
            border-color: #667eea;
            box-shadow: 0 5px 20px rgba(102, 126, 234, 0.3);
            transform: translateY(-5px);
        }
        
        .card.selected {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            border-color: #667eea;
        }
        
        .card h3 { margin-bottom: 15px; font-size: 1.3em; }
        .card p { margin: 10px 0; line-height: 1.6; }
        
        .pros { color: #2e7d32; }
        .cons { color: #c62828; }
        
        .card.selected .pros,
        .card.selected .cons { color: #fff; }
        
        .button-group {
            display: flex;
            gap: 10px;
            margin-top: 20px;
        }
        
        button {
            flex: 1;
            padding: 12px 20px;
            border: none;
            border-radius: 6px;
            font-size: 1em;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
        }
        
        .btn-select {
            background: #667eea;
            color: white;
        }
        
        .btn-select:hover {
            background: #5568d3;
        }
        
        .btn-copy {
            background: #f5f5f5;
            color: #333;
        }
        
        .btn-copy:hover {
            background: #e0e0e0;
        }
        
        .slider-section {
            background: #f9f9f9;
            padding: 30px;
            border-radius: 8px;
            margin-top: 30px;
        }
        
        .slider-item {
            margin-bottom: 30px;
        }
        
        .slider-item label {
            display: block;
            font-weight: 600;
            margin-bottom: 10px;
            color: #333;
        }
        
        .slider-item input[type="range"] {
            width: 100%;
            height: 6px;
            border-radius: 3px;
            background: #ddd;
            outline: none;
            -webkit-appearance: none;
        }
        
        .slider-item input[type="range"]::-webkit-slider-thumb {
            -webkit-appearance: none;
            appearance: none;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background: #667eea;
            cursor: pointer;
        }
        
        .value-display {
            display: inline-block;
            background: #667eea;
            color: white;
            padding: 4px 12px;
            border-radius: 20px;
            font-weight: bold;
            margin-left: 10px;
        }
        
        .copy-button {
            width: 100%;
            padding: 15px;
            background: #2e7d32;
            color: white;
            border: none;
            border-radius: 6px;
            font-size: 1.1em;
            font-weight: 600;
            cursor: pointer;
            margin-top: 20px;
        }
        
        .copy-button:hover {
            background: #1b5e20;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>🎯 기능 옵션 비교</h1>
        
        <div class="grid" id="options-container"></div>
        
        <div class="slider-section">
            <h2>⚙️ 성능 파라미터</h2>
            
            <div class="slider-item">
                <label>응답 시간: <span class="value-display" id="latency-value">100</span>ms</label>
                <input type="range" id="latency-slider" min="50" max="500" value="100" step="10">
            </div>
            
            <div class="slider-item">
                <label>캐시 크기: <span class="value-display" id="cache-value">512</span>MB</label>
                <input type="range" id="cache-slider" min="256" max="2048" value="512" step="256">
            </div>
            
            <button class="copy-button" onclick="copySettings()">✅ 이 설정으로 최종화해줘</button>
        </div>
    </div>

    <script>
        // 옵션 데이터
        const options = [
            {
                name: "옵션 A: 빠른 구현",
                pros: "✅ 개발 시간 짧음 (1주)",
                cons: "❌ 기능 제한됨"
            },
            {
                name: "옵션 B: 풍부한 기능",
                pros: "✅ 모든 요구사항 충족",
                cons: "❌ 개발 시간 길음 (4주)"
            },
            {
                name: "옵션 C: 균형잡힌 방식",
                pros: "✅ 기능/시간 균형 (2주)",
                cons: "❌ 유지보수 복잡도 높음"
            }
        ];
        
        let selectedIndex = null;
        
        // 옵션 카드 렌더링
        function renderOptions() {
            const container = document.getElementById('options-container');
            container.innerHTML = '';
            
            options.forEach((opt, idx) => {
                const card = document.createElement('div');
                card.className = 'card';
                card.innerHTML = `
                    <h3>${opt.name}</h3>
                    <p class="pros">${opt.pros}</p>
                    <p class="cons">${opt.cons}</p>
                    <div class="button-group">
                        <button class="btn-select" onclick="selectOption(${idx})">선택하기</button>
                    </div>
                `;
                container.appendChild(card);
            });
        }
        
        // 옵션 선택
        function selectOption(idx) {
            selectedIndex = idx;
            document.querySelectorAll('.card').forEach((card, i) => {
                card.classList.toggle('selected', i === idx);
            });
        }
        
        // 슬라이더 값 업데이트
        document.getElementById('latency-slider').addEventListener('input', (e) => {
            document.getElementById('latency-value').textContent = e.target.value;
        });
        
        document.getElementById('cache-slider').addEventListener('input', (e) => {
            document.getElementById('cache-value').textContent = e.target.value;
        });
        
        // 설정을 텍스트로 복사
        function copySettings() {
            const selectedOption = selectedIndex !== null ? options[selectedIndex].name : '선택 안 함';
            const latency = document.getElementById('latency-slider').value;
            const cache = document.getElementById('cache-slider').value;
            
            const prompt = `다음 설정으로 최적화해줘:
- 선택된 옵션: ${selectedOption}
- 응답 시간: ${latency}ms
- 캐시 크기: ${cache}MB

상세한 구현 계획을 HTML로 다시 만들어줘.`;
            
            navigator.clipboard.writeText(prompt).then(() => {
                alert('✅ 설정이 복사되었습니다!\n\n이 텍스트를 Claude Code에 붙여넣으세요.');
            }).catch(() => {
                alert('복사 실패. 브라우저 권한을 확인하세요.');
            });
        }
        
        // 초기화
        renderOptions();
        selectOption(2); // 기본값: 옵션 C 선택
    </script>
</body>
</html>

코드 설명:

1. HTML 구조: <div class="grid">에 카드들이 동적으로 생성됨. 각 카드는 옵션 이름, 장단점, 선택 버튼으로 구성.

2. CSS 스타일:

   • Gradient 배경으로 현대적 디자인
   • .card.selected 클래스로 선택된 옵션을 색으로 강조
   • 반응형 그리드로 모바일에서도 잘 보임
   • Hover 효과로 상호작용성 표시

3. JavaScript 로직:

   • selectOption(idx): 클릭한 옵션에 selected 클래스 추가
   • 슬라이더 입력 감지하여 실시간으로 값 표시
   • copySettings(): 현재 선택과 파라미터를 텍스트로 변환해 클립보드에 복사

4. 양방향 루프: "이 설정으로 최종화해줘" 버튼을 클릭하면 현재 상태가 프롬프트로 복사되어 AI에 다시 전달할 수 있음.

예시 2: 마크다운과의 비교

마크다운 버전 (위의 HTML과 같은 정보):

# 기능 옵션 비교

## 옵션 A: 빠른 구현
- **장점**: 개발 시간 짧음 (1주)
- **단점**: 기능 제한됨

## 옵션 B: 풍부한 기능
- **장점**: 모든 요구사항 충족
- **단점**: 개발 시간 길음 (4주)

## 옵션 C: 균형잡힌 방식
- **장점**: 기능/시간 균형 (2주)
- **단점**: 유지보수 복잡도 높음

## 권장 파라미터
- 응답 시간: 100ms
- 캐시 크기: 512MB

문제점:

• 텍스트로 스크롤해야만 비교 가능
• 옵션 간 시각적 차이 없음
• "이 설정으로 최적화해줘"라고 하려면 직접 입력해야 함
• 사용자가 끝까지 읽을 확률 극히 낮음

함정·실수

1. "토큰이 4배 늘어난다" 우려

문제: HTML은 마크다운보다 2~4배 많은 토큰을 소비한다. HTML 태그, CSS 스타일, JavaScript 코드 때문이다.

실제 영향:

• 100단어 마크다운: ~150 토큰
• 동일한 HTML: ~300~600 토큰
• 추가 비용: $0.001~0.003 정도 (대부분의 사용 사례에서 무시할 수 있는 수준)

회피법: Thariq의 결론이 중요하다: "토큰 4배를 쓰는 비용보다, 사용자가 읽지 않은 마크다운 문서가 전혀 도움이 안 되는 것이 훨씬 더 큰 손해다."

실제로 양방향 상호작용으로 인한 효율 증가(반복 횟수 감소)가 토큰 비용을 충분히 상쇄한다.

2. Git diff의 노이즈

문제: HTML 파일은 한 줄 변경해도 diff가 매우 지저분해진다. 줄바꿈으로 인해 전체 코드가 변경된 것처럼 보인다.

- <button onclick="selectOption(1)">옵션 B</button>
+ <button onclick="selectOption(1)">옵션 B 선택</button>

이것이 실제로는 한 단어만 변경했는데도 전체 파일이 수정된 것처럼 git이 표시한다.

회피법:

• 일회용 도구: 프롬프트로 생성한 HTML이 일회용이라면 git에 추가하지 않는다.
• 재사용 도구: 계속 쓸 HTML이라면:
  • Minified HTML로 생성 (한 줄로 압축)
  • HTML과 데이터를 분리 (데이터는 JSON, HTML 템플릿은 정적)
  • Pre-commit hook으로 포맷팅을 분리

3. 보안 취약점: XSS(Cross-Site Scripting)

문제: 사용자 입력이나 외부 데이터를 HTML에 직접 삽입하면, 악의적인 JavaScript 코드가 실행될 수 있다.

// 위험한 예시
const userInput = "<img src=x onerror='alert(\"해킹\")'>";
document.getElementById('output').innerHTML = userInput; // XSS 취약점

회피법:

// 안전한 예시
const userInput = "<img src=x onerror='alert(\"해킹\")'>";  
const element = document.createElement('div');
element.textContent = userInput; // HTML 파싱 안 함, 텍스트로만 표시
document.getElementById('output').appendChild(element);

또는 간단하게:

document.getElementById('output').textContent = userInput; // innerHTML 대신 textContent 사용

4. 브라우저 호환성 문제

문제: 구형 브라우저(IE11 등)에서 최신 CSS, JavaScript 기능이 작동하지 않을 수 있다.

회피법:

• 대부분의 경우, 최신 브라우저를 기본 가정하면 괜찮다.
• 특수한 요구사항이 있으면 프롬프트에 명시:

  모든 최신 브라우저(Chrome, Firefox, Safari, Edge)에서 작동해야 하고,
  모바일 환경도 지원해줘. IE는 지원 안 해도 돼.
  

5. 기능 크리프(Feature Creep)

문제: "간단한 HTML 페이지"를 원했는데, 점점 더 많은 기능을 추가하다 보면 복잡하고 유지보수 어려운 코드가 된다.

// 처음
function selectOption(idx) {
    selectedIndex = idx;
}

// 나중에는 이렇게 됨
function selectOption(idx) {
    selectedIndex = idx;
    updateAnalytics(idx);
    triggerAnimation();
    saveToLocalStorage();
    syncWithServer();
    // ... 20줄 더
}

회피법:

• 프롬프트에 "최소한의 기능만" 또는 "간단하게" 명시
• 일회용 도구라면 "한 번 쓰고 버릴 거니까 간단하게"라고 명시
• 필요하면 반복해서 개선하되, 한 번에 한 기능씩만 추가

6. 성능 문제: 큰 데이터셋

문제: 1000개 이상의 항목을 HTML에 렌더링하면 페이지가 느려진다.

회피법:

• 페이지네이션: "한 페이지에 20개씩, 다음 버튼으로 넘어가게 해줘"
• 가상 스크롤: "스크롤할 때 보이는 부분만 렌더링해줘"
• 처음부터 명시: "대량의 데이터를 표시할 거니까 최적화 필요해"

베스트 프랙티스

1. 프롬프트 작성: 명확한 의도 전달

약한 프롬프트:

HTML로 만들어줘.

좋은 프롬프트:

Linear의 미해결 이슈 30개를 우선순위별로 그룹화해서 HTML 대시보드로 만들어줘.
- 색상: P0(빨강), P1(주황), P2(노랑), P3(초록)
- 드래그 앤 드롭으로 우선순위 조정 가능
- 최종 결과를 "이 우선순위로 업데이트해줘" 버튼으로 복사할 수 있게
- 모바일에서도 잘 보이게

2. 양방향 상호작용 활용: 루프의 가치

anti-pattern: HTML이 단순 제시 도구

아키텍처 다이어그램을 예쁜 HTML로 만들어줘.

→ 한 번 봤으면 끝. AI와의 상호작용 없음.

best practice: 양방향 루프 설계

API 응답 시간을 시뮬레이션하는 인터랙티브 대시보드 만들어줘.
- 동시 사용자 수 슬라이더 (1~1000)
- 데이터베이스 쿼리 시간 슬라이더 (10~500ms)
- 서버 인스턴스 개수 슬라이더 (1~10)
- 실시간으로 추정 응답 시간 계산해서 표시
- "이 설정으로 최적화해줘" 버튼

→ 사용자가 실험하고, 결과에 따라 AI에 다시 지시.

3. 모바일 반응형 설계

프롬프트에 항상 포함:

모든 기기(데스크톱, 태블릿, 모바일)에서 잘 작동해야 하고,
widescreen에서도 예쁘고 작은 폰에서도 읽을 수 있어야 해.

CSS의 핵심:

@media (max-width: 768px) {
    .grid { grid-template-columns: 1fr; }
    button { width: 100%; }
}

4. 인터랙션 우선순위

필수 인터랙션:

• 선택/토글: 중요도 표시, 옵션 선택 등
• 슬라이더: 파라미터 조정
• 복사 버튼: 결과를 텍스트로 변환

선택 인터랙션 (필요할 때만):

• 드래그 앤 드롭: 순서 변경
• 애니메이션: 시각적 피드백
• 실시간 계산: 입력 변경에 따른 즉각적 결과

5. 접근성(Accessibility) 고려

프롬프트:

WCAG 2.1 AA 표준을 따르는 접근 가능한 HTML로 만들어줘.
- 모든 버튼에 aria-label 추가
- 색상만으로 정보 전달하지 말 것 (텍스트 라벨도 포함)
- 키보드 네비게이션 가능

6. 실제 활용 시나리오별 패턴

시나리오 A: 스펙 및 기획 문서

새 기능의 3가지 구현 방식을 HTML로 비교해줘.
각 방식마다:
- 예상 개발 시간
- 기술적 리스크
- 유지보수 난이도
- 성능 특성
을 2개 열 테이블로. 각 행마다 색으로 의사결정 가이드를 표시 (추천/경고/주의).

시나리오 B: PR 리뷰 및 코드 분석

이 PR의 변경 사항을 HTML로 설명해줘.
- 수정된 파일별로 섹션 분리
- 각 섹션마다 "왜 이 변경이 필요했나" 한 문장
- 위험도별 색상 코딩 (빨강=위험, 노랑=주의, 초록=안전)
- 각 변경에 대한 테스트 영향도 표시

시나리오 C: 디자인 프로토타이핑

CSS 버튼 애니메이션 3가지를 시뮬레이션하는 HTML 만들어줘.
각 옵션마다:
- 재생 속도 슬라이더 (0.2초~1초)
- easing 함수 선택 (ease-in, ease-out, ease-in-out)
- 색상 입력창
- 실시간 미리보기
- "이 값으로 코드 생성해줘" 버튼

시나리오 D: 리포트 및 분석

코드베이스의 의존성 분석 결과를 HTML 시각화로 만들어줘.
- 모듈별 의존성 그래프 (SVG)
- 순환 의존성 빨간색으로 강조
- 각 모듈 클릭하면 세부 정보 표시
- "이 의존성 제거하는 계획 만들어줘" 버튼

시나리오 E: 커스텀 에디터

Linear의 모든 오픈 이슈를 HTML 칸반 보드로 만들어줘.
Now → Next → Later → Cut, 4개 칸으로 정렬할 수 있게.
- 초기 우선순위는 created_at 기준으로 자동 분류
- 드래그 앤 드롭으로 칸 이동 가능
- "이 우선순위로 모두 업데이트해줘" 버튼
- 클릭하면 현재 상태를 마크다운으로 복사

7. Thariq의 철학: "같은 루프 안에 있다"

가장 중요한 개념. Thariq의 원문:

"예전에는 Claude가 만들어 준 계획을 읽지 않으려는 순간이 오면서 결국 Claude의 결정을 그냥 따라가게 될까봐 걱정했다. 근데 HTML로 바꾸고 나서는 나는 그 어느 때보다 더 Claude와 같은 루프 안에 있다."

의미:

• 마크다운: AI → 문서 → 사용자 (일방통행)
• HTML: AI ↔ 인터페이스 ↔ 사용자 (쌍방향)

사용자가 HTML에서 직접 값을 조정하고, 그것이 자동으로 다음 프롬프트가 되고, AI가 그에 따라 반응한다. 이것이 진정한 협력이다.

참고

영상에서 언급된 자료

• Thariq Shihipar의 원본 글: https://thariqs.github.io/html-effectiveness/ — HTML이 마크다운보다 효과적인 이유를 상세히 분석한 엔지니어링 블로그 포스트

• Andrej Karpathy의 트윗: https://x.com/karpathy/status/1980397031542989305 — AI 출력의 진화 단계를 처음 제시한 공식 트윗

추가 학습 자료

• Claude Code 공식 문서: 프롬프트 최적화, 고급 기능, 토큰 사용량 최적화
• MDN Web Docs (https://developer.mozilla.org): HTML, CSS, JavaScript 레퍼런스
• Web Accessibility Guidelines (WCAG 2.1): 접근 가능한 웹 디자인 표준
• "Visual Processing in the Human Brain" — 시각 피질의 대역폭에 관한 신경과학 논문
• GitHub Pages / Netlify / Vercel: HTML 페이지를 빠르게 공유하는 방법

관련 기술 및 개념

MCP (Model Context Protocol): Claude Code가 Slack, Linear, Jira 같은 외부 서비스와 양방향 연동하는 표준. HTML + MCP = 강력한 자동화 도구 가능.

프롬프트 엔지니어링(Prompt Engineering): AI의 출력을 최대한 유용하게 만드는 입력 작성 기법. "HTML로 만들어줘"는 간단하지만 강력한 프롬프트 기법의 예시.

AI-Human Collaboration: AI가 자동화를 담당하고, 인간이 의사결정과 검증을 담당하는 새로운 작업 방식. HTML의 양방향 상호작용이 이를 가능하게 한다.

토큰 최적화: LLM API 비용을 줄이기 위해 입력과 출력의 토큰 수를 최소화하는 기법. 하지만 Thariq의 결론: "읽지 않은 문서의 토큰 절감보다 사용자 참여도 증가가 더 중요하다."