AI 코딩 에이전트들은 프론트엔드 아티팩트 (artifacts)를 생성하는 능력이 점점 좋아지고 있습니다.

이들은 React 컴포넌트를 작성하거나, Vite 앱을 빌드하고, 대시보드를 생성하거나, 정적 보고서를 만들고, 단일 HTML 프로토타입을 제작할 수 있습니다.

하지만 많은 워크플로우 (workflows)가 여전히 다음과 같은 불완전한 전달로 끝납니다:

“여기 코드가 있습니다.”

이것은 유용하지만, 항상 충분한 것은 아닙니다.

프론트엔드 작업의 경우, 사람들이 검토해야 하는 것은 종종 코드가 아닙니다. 바로 렌더링된 결과물입니다.

코드는 검토의 대상이 아닙니다

에이전트가 작은 UI, 보고서 또는 프로토타입을 생성하면, 검토자는 보통 다음과 같은 질문에 답하기를 원합니다:

• 브라우저에서 열리는가?
• 레이아웃이 제대로 작동하는가?
• 크기 조절 (resize)이 올바르게 되는가?
• 링크와 버튼이 제대로 동작하는가?
• 이 방향으로 계속 진행할 가치가 있는가?

이것들은 소스 코드 (source-code)에 대한 질문이 아니라 브라우저에 대한 질문입니다.

더 나은 에이전트 전달 방식은 다음과 같습니다:

“제가 그것을 빌드하여 여기에 미리보기를 배포했습니다.”

이 한 문장이 워크플로우의 형태를 바꿉니다.

MCP는 이 패턴을 자연스럽게 만듭니다

MCP는 에이전트가 작업의 일부로 도구 (tool)를 호출할 수 있게 해주기 때문에 유용합니다.

정적 프론트엔드 아티팩트 (artifacts)의 경우, 도구는 매우 간단할 수 있습니다:

1. 빌드된 폴더 또는 HTML 파일을 가져옵니다.
2. 이를 정적 미리보기 호스팅 (static preview hosting)에 업로드합니다.
3. URL을 반환합니다.

사용자는 파일을 패키징하고 호스팅 대시보드를 열기 위해 코딩 환경을 떠날 필요가 없습니다.

이것이 제가 previewship-mcp를 만든 이유입니다:

https://www.npmjs.com/package/previewship-mcp

이 MCP 서버는 다음을 지원합니다:

• 빌드된 React/Vue/Vite/Next 정적 출력물
• 단일 .html 파일
• Markdown 파일
• AI가 생성한 HTML 아티팩트 (artifacts)
• 고정된 PreviewShip 프로젝트 URL
• 프로젝트 목록/삭제/재배포/롤백/액세스 제어

전형적인 프롬프트 (prompt)

앱을 빌드하고, 생성된 dist 폴더를 PreviewShip으로 배포한 뒤, 미리보기 URL을 반환해줘.

또는:

생성된 이 HTML을 index.html로 저장하고, PreviewShip으로 배포한 뒤, 라이브 URL을 나에게 보내줘.

중요한 점은 에이전트가 소스 코드뿐만 아니라 렌더링된 아티팩트 (artifact)를 반환해야 한다는 것입니다.

한계점 파악이 중요합니다

이 패턴은 정적 미리보기 아티팩트 (static preview artifacts)를 위한 것입니다.

이것을 프로덕션 릴리스 (production releases), 보안 검토 (security review), 백엔드 배포 (backend deployment) 또는 액세스 제어 (access control)를 우회하기 위한 지름길로 사용해서는 안 됩니다.

실제 애플리케이션의 경우에는 여전히 일반적인 인프라 (infrastructure)가 필요합니다.

하지만 초안, 보고서, 정적 프로토타입 (static prototype), 단일 파일 HTML 페이지 또는 AI가 생성한 UI 미리보기의 경우, 정적 URL (static URL)이 종종 가장 빠르고 유용한 전달 방식이 됩니다.

고정된 URL이 중요한 이유

미리보기 링크는 이슈 댓글, Slack 스레드, 문서 및 클라이언트와의 대화에 포함됩니다.

만약 매 반복 (iteration)마다 완전히 다른 URL이 생성된다면, 사람들은 어떤 링크가 최신인지 파악하기 어려워집니다.

고정된 프로젝트 URL은 반복 작업을 더 쉽게 만듭니다:

• 하나의 프로젝트 링크
• 그 뒤에 연결된 여러 번의 배포 (deployments)
• 최신 미리보기를 공유하기 쉬운 상태로 유지
• 보존된 버전이 존재할 경우 롤백 (rollback) 가능

이를 통해 에이전트가 생성한 프론트엔드 작업은 일회용 코드 덩어리 (code blob)가 아닌, 검토 가능한 아티팩트 (artifact)처럼 느껴지게 됩니다.

더 넓은 원칙은 간단합니다:

AI 에이전트가 시각적인 무언가를 생성할 때는, 그 결과물이 사용될 매체 (medium)에서 검토할 수 있도록 만드세요.

웹 아티팩트 (web artifacts)의 경우, 그 매체는 브라우저 (browser)입니다.