Claude가 만든 HTML 페이지를 공유 가능한 라이브 링크로 게시하기

Claude를 Strata에 연결하기

Claude가 Strata에서 문서를 만들려면 먼저 Strata 계정에 연결되어야 합니다. 이 연결은 내 계정의 권한으로 동작하므로 Claude는 내 계정이 열 수 있는 문서에만 접근합니다.

claude.ai에서는 설정, 커넥터를 차례로 열고 사용자 지정 커넥터 추가를 선택한 뒤 Strata MCP 서버 URL인 https://api.strata.space/mcp 를 입력합니다. 사용자 지정 커넥터는 유료 플랜에서 이용할 수 있으며, 조직 커넥터는 소유자가 추가합니다. 다른 MCP 클라이언트에서도 같은 URL을 추가하고 로그인을 마치세요.

Claude Code에서는 /plugin marketplace add strata-space/marketplace 를 실행한 뒤 /plugin install strata@strata-space 로 Strata 플러그인을 설치합니다. 플러그인이 MCP 서버를 등록하며, Claude가 Strata 도구를 처음 사용할 때 브라우저 창이 열려 로그인할 수 있습니다.

Claude에게 페이지를 Strata 문서로 만들도록 요청하기

Strata에서 인터랙티브 페이지는 html 태그가 붙은 코드 블록이 들어 있는 문서입니다. 블록의 마크업, 스타일, 스크립트는 격리된 환경에서 라이브 미리 보기로 실행되므로 Claude는 페이지 전체를 일반 문서 내용으로 쓸 수 있습니다.

먼저 Strata의 interactive-html 작성 가이드를 읽도록 Claude에게 요청하세요. Claude는 find 도구로 가이드를 가져올 수 있으며, 가이드에는 라이브러리, 테마 변수, 아래에서 설명하는 제한 사항이 담겨 있습니다.

페이지가 할 수 있는 일과 할 수 없는 일 알아 두기

미리 보기는 완전히 격리되어 있습니다. 쿠키나 저장소가 없고, 주변 페이지에 접근할 수 없으며, 외부 URL도 쓸 수 없습니다. 스크립트와 스타일은 Strata가 검증한 라이브러리인 mermaid, d3, three.js, Doom 엔진에서만 불러옵니다. 그 밖의 모든 것은 블록 안에 직접 작성해야 합니다.

CDN에서 스크립트를 불러오거나, 웹 폰트를 불러오거나, 타사 API를 호출하는 페이지는 그대로는 동작하지 않습니다. 처음부터 페이지를 자체 완결형으로 만들도록 Claude에게 알려 주세요. 차트는 같은 문서 안의 이름 붙은 데이터(JSON이나 CSV 블록, 표 등)도 읽을 수 있어 숫자를 편집 가능한 텍스트로 유지할 수 있습니다. 방법은 인터랙티브 HTML 블록 참고 문서에 있습니다.

시도해 볼 프롬프트

먼저 find 도구로 Strata의 interactive-html 작성 가이드를 읽어 줘. 그다음 제목이 "주택담보대출 상환 계산기"인 새 Strata 문서를 만들어 줘. 두 문장짜리 소개와, 계산기 전체가 들어 있는 html 코드 블록 하나만 넣어 줘. 대출 금액, 금리, 기간 입력란과 /sandbox/libs/d3.min.js 의 d3로 그린 잔액 차트를 포함해야 해. 모든 것을 그 한 블록 안에 두고, 네트워크에서 다른 것은 불러오지 말고, Strata의 테마 변수를 쓰고, 배경색과 글자색은 함께 지정해 줘. 준비되면 알려 주고 게시는 하지 마.

Strata에서 페이지 확인하기

Strata에서 새 문서를 엽니다. Claude가 쓰는 즉시 편집기에서 페이지가 실행되고, 편집할 때마다 깨끗한 상태에서 다시 렌더링됩니다. 컨트롤을 직접 사용해 보고, 창을 휴대폰 너비로 줄여 보고, 밝은 테마와 어두운 테마에서 모두 확인하세요.

스크립트 오류와 콘솔 경고는 미리 보기 아래에 표시됩니다. 이를 Claude에게 붙여 넣어 수정하게 하세요.

공개 링크로 게시하기

게시하면 /@your-handle/your-slug 주소에 공개 버전이 만들어지며, 링크가 있는 사람은 누구나 Strata 계정 없이 열 수 있습니다. 페이지는 문서의 제목과 본문이 둘러싼 읽기 페이지 안의 블록으로 표시됩니다.

1. 문서의 게시 패널을 엽니다. 공개 프로필이 숨겨져 있으면 패널이 프로필 설정으로 안내합니다. 먼저 핸들을 선택하고 프로필을 공개로 전환하세요.
2. URL 슬러그를 선택합니다. 첫 게시 후에는 변경할 수 없으므로 계속 사용할 주소를 고르세요.
3. 게시 패널의 모양 설정에서 블록 컨트롤을 지정합니다. 숨김은 독자에게 실행 중인 페이지만 보여 줍니다. 표시는 독자가 소스를 보고 편집하고 다시 실행할 수도 있게 합니다. 발행 테마 기본값 사용은 프로필의 설정을 따릅니다. 독자의 변경 사항은 그 사람의 브라우저에서만 실행되며 저장되지 않습니다.
4. 프로필에 게시를 선택한 다음 공개 URL을 열어 독자가 보는 것처럼 페이지를 사용해 보세요.

Claude가 직접 게시하게 하기

MCP 클라이언트에서 게시 도구 그룹을 활성화하면 Claude가 문서를 직접 게시할 수 있습니다. 이 그룹은 X-Strata-Tool-Groups 헤더로 요청하며 쓰기 권한이 필요합니다. 이 경우 Strata는 문서 제목에서 주소를 정합니다. 이 헤더를 보낼 수 없는 커넥터는 게시 도구를 받지 못하므로 게시 패널에서 게시하세요. 도구 그룹은 MCP 참고 문서에 나와 있습니다.

페이지를 업데이트하면서 같은 링크 유지하기

같은 문서에서 페이지를 바꾸도록 Claude에게 요청하거나 직접 편집하세요. 편집은 먼저 작업 문서를 바꿉니다. 게시 패널에서 업데이트 게시를 선택하기 전까지 독자는 같은 주소에서 이전 버전을 계속 봅니다. 슬러그는 첫 게시 후 고정되므로 공유한 링크는 바뀌지 않습니다.

게시할 때는 페이지의 디자인과 페이지가 읽는 데이터도 함께 저장됩니다. 수치를 고쳤다면 다시 게시하세요. 페이지를 내리려면 이 문서 게시 취소를 선택합니다. 공개 주소는 더 이상 열리지 않고 작업 문서는 그대로 남습니다.

다른 사람과 함께 작업하기

작업 문서는 공개 페이지와 별개이므로 게시 전에도 후에도 협업할 수 있습니다. 공유로 사람들을 뷰어, 댓글 작성자, 편집자로 초대하세요. 댓글로 특정 부분을 논의하고, 기록에서 이전 편집을 살펴보거나, 전체 버전을 복원하거나, 변경 하나만 되돌릴 수 있습니다.

문서를 공유한다고 게시되는 것은 아니며, 게시한다고 독자가 작업 문서에 접근하게 되는 것도 아닙니다.

파일 호스팅과 다른 점

정적 호스팅은 업로드한 파일을 그대로 제공합니다. 단순하고, 페이지는 브라우저가 허용하는 것은 무엇이든 불러올 수 있습니다. Strata에서는 페이지가 문서입니다. 링크는 그대로 유지되고, 소스는 나와 공동 작업자와 에이전트가 계속 편집할 수 있으며 댓글과 버전 기록도 함께 쓸 수 있습니다.

대신 샌드박스의 제약이 있습니다. 네트워크 접근이 없고 쓸 수 있는 라이브러리도 몇 가지뿐입니다. 또한 독자에게는 모든 편집이 실시간으로 보이는 것이 아니라 마지막으로 게시한 버전이 보입니다. 페이지가 외부 스크립트나 실시간 API에 의존한다면 정적 호스팅이 더 적합합니다.