Claude Code로 HTML 하나면 충분하다: 빌드 없이 도구 만드는 법

참고 URL 접근 없이 주제에 대한 전문 지식으로 포스트를 작성합니다.

---

### 개발 환경 세팅만 하다 시간을 다 쓴 적 있는가

간단한 내부 도구가 필요했다. CSV 데이터를 시각화하거나, 특정 로직을 검증하는 계산기, 혹은 팀원과 공유할 수 있는 간단한 대시보드. 그때마다 나는 React 프로젝트를 새로 만들었고, npm install이 끝나기를 기다렸고, 배포 방법을 고민했다.

결과물보다 준비 과정에 더 많은 시간을 쓰고 있었다. 그러다 Claude Code로 작업하면서 방식이 완전히 바뀌었다. HTML 파일 하나로 충분한 경우가 생각보다 훨씬 많다는 것을.

---

### HTML 단일 파일이 이렇게 쓸 만한 이유

Claude Code에게 "HTML 파일 하나로 만들어줘"라고 요청하면, CSS와 JavaScript를 모두 인라인으로 담은 완전히 작동하는 파일을 만들어낸다. 열어보면 바로 돌아간다. npm도, 빌드도, 서버도 없다.

이게 강력한 이유는 HTML이 브라우저만 있으면 실행되는 가장 원시적인 런타임이기 때문이다. 플랫폼에 상관없이 파일을 더블클릭하는 것만으로 실행된다. 동료에게 전달할 때도 파일 하나를 슬랙으로 보내면 끝이다.

---

### 내가 실제로 쓰는 방식

다음은 내가 Claude Code에 실제로 입력하는 프롬프트 유형이다.

아래 JSON 데이터를 바차트로 시각화하는 HTML 파일 하나 만들어줘. 외부 CDN 의존성 없이, CSS와 JS 모두 인라인으로 포함시켜. 파일 하나만 있으면 브라우저에서 바로 열 수 있어야 해.

[데이터 붙여넣기]

이렇게 하면 Chart.js 같은 라이브러리 없이도 SVG나 Canvas로 직접 그려주거나, CDN 링크를 포함한 완전히 독립적인 파일을 만들어준다. 나는 CDN 포함 여부를 명시적으로 요청한다. 오프라인 환경이냐 온라인 환경이냐에 따라 다르게 쓰기 때문이다.

또 자주 쓰는 유형은 계산 도구다.

공사 견적 계산기를 HTML로 만들어줘. 입력: 면적(㎡), 자재 종류(드롭다운), 층수 출력: 예상 비용 범위 모바일에서도 보기 좋게 반응형으로.

이런 도구를 React로 만들면 컴포넌트 설계부터 시작해서 30분은 걸린다. HTML 파일로 받으면 2분 안에 동작하는 것을 확인할 수 있다.

---

### 왜 이 방법이 잘 작동하는가

Claude Code는 파일 시스템을 직접 다루는 에이전트다. HTML 파일을 생성하고 즉시 브라우저로 확인하는 피드백 루프가 매우 짧다. 코드 수정이 필요하면 "여기 색상 바꿔줘", "이 버튼 클릭하면 CSV로 내보내지게 해줘" 같은 자연어로 이어서 수정할 수 있다.

기술적으로도 HTML은 상태 관리 라이브러리나 컴파일러 없이 DOM API만으로 놀랍도록 많은 것을 할 수 있다. 인터랙티브 차트, 폼 처리, 로컬 스토리지 활용, 심지어 파일 읽기/쓰기까지 가능하다. Claude가 이 패턴을 매우 잘 알고 있어서 복잡한 설명 없이도 의도를 잘 캐치한다.

---

### 이 방법이 잘 안 되는 경우

외부 API 호출이 필요한 경우는 주의해야 한다. 브라우저 보안 정책(CORS) 때문에 서버 없이 다른 도메인의 API를 직접 호출하는 데는 제약이 있다. 이 경우 Claude Code는 종종 CORS 프록시를 제안하는데, 그것이 항상 현실적인 해법은 아니다.

또한 데이터가 수십만 건을 넘어가면 단일 HTML 파일 방식은 느려진다. 브라우저 메모리에서 처리하는 데이터 크기에는 한계가 있다. 그리고 여러 사람이 동시에 쓰면서 데이터를 공유해야 하는 경우, 즉 진짜 "서비스"가 필요한 경우라면 이 방법은 시작점이지 완성형이 아니다.

자주 하는 실수는 처음부터 너무 많은 기능을 요청하는 것이다. "로그인 기능도 넣고, DB 연동도 하고..." 같은 방향으로 가면 HTML 파일의 장점을 잃는다. 기능은 최소로, 파일은 하나로 유지해야 이 방법이 빛을 발한다.

---

### 오늘 바로 해볼 것

Claude Code를 열고 다음 프롬프트를 그대로 입력해봐라.

최근 30일간 업무 시간 분포를 시각화하는 HTML 파일 만들어줘. 샘플 데이터를 직접 넣어줘도 되고, 내가 직접 수정할 수 있도록 데이터 부분을 파일 상단에 변수로 분리해줘. CSS, JS 모두 인라인으로, 파일 하나로 완결되게.

만들어진 파일을 브라우저로 열어봐라. 그리고 숫자 몇 개를 바꿔봐라. 이 경험 하나로 어떤 상황에서 이 방법을 쓸 수 있는지 감이 잡힐 것이다.

※ 본 글은 정보 제공 목적이며 특정 제품·서비스의 추천이 아닙니다.