Claude Code는 아이디어를 오후 한나절 만에 클릭 가능한 프로토타입으로 바꿉니다. 실제 화면, 실제 링크, 어딘가로 이동하는 버튼입니다. 막히는 부분은 공유입니다. 노트북의 폴더는 고객, PM, 테스트 참가자에게 보낼 수 있는 링크가 아니기 때문입니다. Claude Code에게 "이 프로토타입을 공개해 줘"라고 요청하면 공개 HTTPS 주소와 이를 유지할 링크를 돌려주는 명령어 하나를 실행합니다. 계정도, Git도, 먼저 설정할 빌드 파이프라인도 없습니다.
작동 방식
- Claude Code로 프로토타입을 만드세요. 일반 HTML 페이지 또는 작은 React나 Vite 앱입니다. 화면마다 실제 페이지를 요청하면 모든 화면에 열고 북마크할 수 있는 자체 주소가 생깁니다.
- Claude Code에게 공유를 요청하세요. 폴더에서
npx -y lobsite --yes를 실행합니다. 빌드된 파일만 업로드되며 중간에 아무것도 묻지 않습니다. - 링크를 보내세요. Claude가 주소와 가져오기 링크를 전달합니다. 가져오기 링크를 열고 로그인하면 6시간이 지나도 프로토타입을 유지하며 주소는 바뀌지 않습니다.
목업이 아닌 프로토타입으로 요청하기
세션 시작 시 몇 줄을 추가하면 공유 전 수정 한 번을 줄일 수 있습니다. 요청 내용과 함께 Claude Code에 붙여 넣으세요.
Build this as a static, clickable prototype:
- One HTML page per screen, linked with relative paths (about.html, not /about.html).
- Fake data in the page itself; no backend, no API keys, no login.
- Every button and link goes somewhere, even if it's a "not built yet" screen.
- Works on a phone as well as a laptop.
When it's done, share it with `npx -y lobsite --yes` and give me the link.
상대 경로가 가장 중요합니다. 같은 파일을 노트북, 미리보기 주소, 나중에 내 도메인에서 열 수 있습니다.
반복마다 링크 하나
프로토타입은 검토할 때마다 바뀝니다. 이미 보낸 링크를 계속 작동시키고 새 버전을 그 옆에 두세요.
npx -y lobsite --yes --preview
미리보기 배포는 자체 주소를 받고, 메인 링크는 사람들이 검토 중인 버전을 계속 보여 줍니다. 변경을 요청한 사람에게 미리보기를 보내세요. 합의되면 npx lobsite promote <id>로 메인 버전으로 만들고, 피드백이 반대라면 한 단계로 롤백할 수 있습니다. 무료 계정에서는 최근 7일의 배포가 미리보기 주소를 유지하므로(Standard는 30일) 다음 검토에서 "v2"와 "v3"를 비교할 수 있습니다.
누가 볼 수 있나요
- 계정 없이는 프로토타입이 검색 엔진에 색인되지 않으며, 가져오지 않으면 6시간 후 삭제됩니다.
- 미리보기 주소는 어떤 플랜에서도 색인되지 않습니다.
- Standard에서는 비밀번호를 추가할 수 있습니다(사이트 설정). 미리보기와 커스텀 도메인을 포함한 사이트의 모든 주소에서 요청합니다. 검토자는 브라우저당 한 번 입력하며, 변경하면 모두 로그아웃됩니다. 비밀번호는 프로젝트가 아닌 대시보드에 있으므로 저장소에 들어가지 않습니다.
"이걸 우리와 고객만 볼 수 있게 할 수 있나요?"의 의미는 보통 이것입니다. 정말 기밀인 것은 프로토타입에 넣지 마세요.
사용자와 테스트
호스팅된 프로토타입은 URL이며, 대부분의 테스트 도구에 필요한 것은 그것뿐입니다. 주소를 Maze, Lyssna, UserTesting에 웹사이트 작업으로 붙여 넣거나 참가자에게 바로 보내세요. 각 화면에 자체 경로가 있어 작업을 /checkout.html에서 시작하고 "/thanks.html에 도달"을 성공으로 정할 수 있습니다.
가입이나 설문 화면처럼 프로토타입에서 답변을 받고 싶나요? 폼을 /_lobsite/forms/feedback으로 지정하면 프로토타입이 계정에 있을 때 제출 내용이 스팸 필터링과 함께 이메일로 도착합니다. 폼을 참고하세요.
계정 없는 배포는 6시간 동안 공개됩니다. 가져오기 링크로 무료로 유지할 수 있습니다.
공개 전에 미리 보세요. 리디렉션까지 포함해 클릭 한 번으로 롤백합니다.
Standard에서는 사이트의 모든 주소에서 비밀번호를 요청합니다. 검토자는 브라우저당 한 번만 입력합니다.
에이전트에서 실행하면 질문하지 않으며, URL과 가져오기 링크가 담긴 Tell the user: 줄을 출력합니다.
폼의 대상을 /_lobsite/forms/contact로 지정하세요. 스팸 필터링이 포함됩니다.
Free 계정도 포함됩니다. DNS 레코드 하나를 추가하면 사이트가 내 도메인으로 이동합니다. 모든 플랜의 모든 사이트에 HTTPS가 적용됩니다.
Claude Code 프로토타입: Lobsite와 일반적인 공유 방법
| Lobsite | Claude 아티팩트 공유 링크 | Netlify Drop | GitHub Pages | |
|---|---|---|---|---|
| 업로드 주체 | Claude Code, 명령어 하나 | 나, claude.ai에서 | 나, 폴더를 끌어서 | Claude Code, 커밋과 푸시 |
| 시작할 때 계정 | 6시간은 불필요 | Claude 계정 | 약 1시간은 불필요 | GitHub 계정과 저장소 |
| 멀티 페이지와 React 빌드 | 예, 폴더 전체 | 아티팩트당 한 페이지 | 예 | 예, 빌드용 워크플로로 |
| 반복별 링크 | --preview, 승격과 롤백 포함 |
매번 새 아티팩트 | 매번 새 사이트 또는 배포 | 기본 제공 안 됨 |
| 비밀번호 | 예, Standard | 팀 공유 규칙만 | Netlify 유료 플랜 | 아니요 |
화면 하나라면 Claude 아티팩트 링크로 충분합니다. 프로토타입이 Claude Code가 프로젝트에 작성한 페이지 폴더가 되면, 폴더를 그대로 받는 호스트가 복사와 붙여 넣기를 줄여 줍니다.
자주 묻는 질문
Claude Code 프로토타입을 무료로 호스팅할 수 있나요?
네. 계정 없이 6시간 동안 공개됩니다. Claude가 주는 링크로 가져오면 같은 주소로 무료 계정에 유지됩니다.
프로토타입 링크가 로컬에서는 작동하는데 공개하면 깨집니다. 왜 그런가요?
보통 절대 경로 때문입니다. /about.html은 도메인 루트를 가리키며, 노트북과 호스팅 주소에서 다릅니다. Claude Code에게 상대 링크(about.html, ./img/logo.png)를 사용하도록 요청한 다음 다시 배포하세요. 변경된 파일만 업로드됩니다.
라우트가 있는 React 프로토타입이 작동하나요?
네. lobsite.toml의 spa = true 또는 사이트 설정의 싱글 페이지 앱으로 싱글 페이지 모드를 켜면 /settings나 /orders/42 링크가 404 대신 앱을 엽니다.
고객의 프로토타입을 고객 도메인에 둘 수 있나요?
네. 무료 계정에는 커스텀 도메인 하나가 포함됩니다. DNS 레코드 하나를 추가하면 프로토타입이 HTTPS와 함께 그곳으로 옮겨집니다.
Claude Code가 검토 후 프로토타입을 업데이트할 수 있나요?
네. lobsite.toml이 사이트를 기억하므로 어떤 세션에서든 같은 명령어로 같은 주소가 업데이트됩니다. CLAUDE.md에 한 줄을 추가하면 모든 세션이 같은 방식으로 합니다. Claude Code에서 웹사이트 배포를 참고하세요.