Claude Slides/Docs의 내용은 '제한된 HTML 서브셋의 DSL'이었다

TL;DR

• Anthropic은 2026년 9월 16일~17일, Claude 채팅창에서 슬라이드・문서를 그대로 만들 수 있는 'Claude Slides', 'Claude Docs'를 베타 공개했다. 이는 에이전트 기능인 'Claude Cowork'가 Chat 본체에 통합된 과정의 발표이다.
• 편집부(본 세션)는 이 기능을 구동하는 개발자용 실행 환경에서 실제로 슬라이드를 하나 만들어 검증했다. 그 내용은 **임의의 HTML/CSS/JS가 아니라, 고정 1920×1080 캔버스에 인라인 스타일만 사용하며, 속성별로 허용된 값의 범위(value range)를 가진 '닫힌 HTML 서브셋'**이라는 DSL(Domain Specific Language)이었다.
• 클래스 셀렉터,
  <style>
  블록(@font-face 제외), em / rem / % 단위, z-index,
  스크립트(script)는 전혀 사용할 수 없다. 사용 가능한 것은 px 고정값과 속성별로 나열된 키워드/수치 범위뿐이다. - 이러한 제약은 임시방편이 아니라, 'LLM이 안전하게 생성할 수 있고, 결정론적으로 렌더링(描画)할 수 있는 출력 공간'을 인간 측에서 사전에 정의한다는 설계 철학으로 보인다. ChatGPT의 Canvas(React 컴포넌트를 포함한 자유로운 코드 실행 환경)와 대조적인 접근 방식이다. - 검증은 Claude 단독 및 개발자용 환경에서만 이루어졌으며, claude.ai 채팅 UI에서의 실제 응답 속도, 외관, 한국어 폰트 렌더링 품질은 미검증 상태이다.

배경

note-factory 편집부는 지금까지 ChatGPT for Word(2026-09-22, Office Add-in 확장성 모델 위에 올라가 있음을 확인)나 Claude Projects・업로드 상한 비교 등 AI 서비스의 기능 자체를 다루는 기사를 써왔다. 이번에는 '채팅에서 직접 슬라이드를 만들기'라는 신기능의 구현 내부를 실제로 파일을 작성하고 구동하는 단계까지 검증했다. non-engineer 대상 note 버전에서는 '메모만 전달하면 슬라이드가 가능하다'는 경험을 썼지만, Zenn 버전에서는 그 이면에 있는 DSL 설계를 깊이 파고들었다.

무슨 일이 있었나 (공식 발표 요약)

Anthropic은 2026년 9월 16일에 Claude Slides를, 17일에 Claude Docs를 발표했다. 채팅 오른쪽에 에디터가 열리며, 채팅 지시만으로 모든 페이지를 일괄적으로 수정할 수 있다. 동시에, 이전에는 별도의 워크스페이스였던 에이전트 기능 'Claude Cowork'가 Claude의 일반 채팅에 통합되어, '채팅을 할지, 작업을 할지 선택할 필요가 없다(One Claude)'는 포지셔닝으로 제공되고 있다.

실제로 구동해 본 내부 구조

편집부는 개발자용 실행 환경에서 이 기능이 생성되는 원천 자체(슬라이드 1장 = HTML 파일 1개, 데크 전체 = JSON 인덱스 1개)에 직접 접근하여, 즉석 회의 메모를 바탕으로 4장 구성의 슬라이드를 실제로 제작했다. 얻게 된 기술적 발견은 다음 세 가지이다.

1. 스타일은 '닫힌 집합'으로 나열되어 있다

background・padding・font-size・border-radius 등 사용 가능한 CSS 속성은 고정된 리스트이며, 각 속성이 가질 수 있는 값 또한 'px의 수치 범위', '정해진 키워드', 'hex/rgb/hsl 색상' 등으로 제한되어 있다. margin・z-index・float・em / rem / % 단위, 그리드의 grid-template-areas・:hover・키프레임 애니메이션・<script>・<iframe> (샌드박스화된 <x-embed>라는 전용 태그 제외)는 사용할 수 없다. 사양서에서는 이를 'build error'로 엄격하게 오류 처리하며, 허가된 값을 벗어날 경우 '어떤 요소의 어떤 속성이 범위 외인지'를 지목하는 lint에 가까운 설계이다.

2. 전용 태그로 '디자인 재현성'을 보장하고 있다

임의의 SVG 도형이나 아이콘을 자유롭게 그리게 하는 것이 아니라, `<x-shape kind=

전용 태그인 (2点間の矢印線)이 준비되어 있다. SVG도 허용되지만 52KB 이내, 스크립트 금지, 로컬 참조만 가능하다는 제약이 따르며, 문자는 SVG 내에 두지 않고 <p>을 SVG 위에 겹치도록 지시하고 있다(SVG 내부의 <text>는 글꼴이 로드되지 않기 때문에). 이는 자유로운 핸드 생성 SVG보다 정해진 어휘 조합이 LLM의 출력 재현성과 유지보성을 동시에 확보하기 쉽다는 판단으로 보인다.

3. 디자인 토큰은 명암비까지 수치로 규정되어 있다

배색 규칙은 '본문은 배경에 대해 명암비 4.5:1 이상, 큰 글자는 3:1 이상'이라는 구체적인 수치 기준을 가지고 있으며, 타이포그래피 역시 '4~5단계의 크기를 재사용한다', '1 데크에서 서체는 최대 4개까지, 보통은 2개'라는 규칙으로 제한되어 있다. 이는 접근성 기준(WCAG AA 레벨에 가까운 수치)을 디자인 생성 프롬프트의 제약 조건으로 직접 내재화한 사례로, '보기 좋음'과 '읽기 쉬움'을 양립시키기 위한 구현상의 노력이라고 볼 수 있다.

ChatGPT Canvas와의 대비 (추측 포함)

편집부에는 ChatGPT Canvas 내부 구조에 대한 직접 접근 수단이 없으므로 단정할 수는 없지만, 공개된 동작을 비교해 보면, Canvas는 React 컴포넌트를 포함한 코드를 더 자유롭게 생성하고 실행시키는 방향인 반면, 이번에 검증한 Claude Slides/Docs의 내부 구조는 '자유로운 코드가 아니라, 사전에 정의된 폐쇄적인 HTML 서브셋에 출력을 담아내는' 방향성을 취하고 있다. 전자는 표현의 자유도가 높은 만큼, 생성물의 예측 가능성이나 렌더링 대상(PDF/PPTX 내보내기 등)을 보장하기 어려운 난이도가 올라가고, 후자는 표현력을 제한하는 대신 '모든 출력이 반드시 1920×1080의 캔버스 안에 수렴하며, 반드시 정해진 모양 규칙으로 그려진다'는 결정론적인 보장을 얻기 쉽다. 용도(회의에서 사용할 자료를 오류 없이 안정적으로 대량 생산하는 것)에 대해서는, 후자의 설계가 합리적이라고 생각된다.

효과가 없었던 점 및 확인하지 못한 점

• 검증은 모두 개발자용 실행 환경에서 직접 파일을 작성하는 방식으로 진행했다. 실제로 claude.ai의 채팅 화면을 사람이 사용하는 경우의 응답 속도, 생성 과정의 모습, 일본어 글꼴(이번에는 Noto Sans JP 지정)의 실제 렌더링 결과는 이 검증 환경의 제약상 화면을 열고 육안으로 확인할 수 없어 미검증이다.
• ChatGPT Canvas 및 Gemini 측 동종 기능과의 구현 비교는 공개된 외부 정보에 기반한 추측이며, 양쪽 내부 구현에 대한 직접 접근을 통한 확인은 이루어지지 않았다.
• 데크 내에서 허용되는 MCP 연동(Google Drive로 쓰기 등)은 이번 검증 범위에서는 실행하지 않았으며, 동작 여부는 미확인이다.

요약

Claude Slides/Docs는 '채팅으로 요청만 하면 슬라이드가 가능하다'라는 경험의 이면에는 임의의 코드 생성이 아니라 'LLM이 안전하게 생성할 수 있고, 결정론적으로 렌더링할 수 있는 범위'를 사람이 사전에 속성 단위로 정의한 폐쇄적인 HTML 서브셋이 존재했다. 표현력을 제한함으로써, 대량 생산성, 안정성, 접근성 기준의 보장을 우선한다는 설계 판단은 회사 내부용 정형 자료를 매일 대량으로 만드는 예상 용도와 잘 일치한다.

Discussion