Vibe Canvas: 사용자가 Sanity Studio에서 재구성할 수 있는 공간(Spatial) AI 테마의 랜딩 페이지

This is a submission for the Sanity Challenge, Path Two: Vibe-Code Something Strange

제가 만든 것 (What I Built)

Vibe Canvas는 개인이 운영하는 크리에이터 또는 소규모 브랜드가 코드를 건드리지 않고도 독특하고 애니메이션이 적용된 '공간적(spatial)' 히어로 페이지를 만들 수 있는 랜딩 페이지 빌더입니다. 이 기능에는 떠다니는 노드, 사용자 지정 테마 프리셋 (Cyberpunk, Vaporwave, Zen Minimal, Aurora Glitch), 그리고 실시간으로 조정 가능한 색상 팔레트가 포함됩니다. 소유자는 Sanity Studio에서 테마, 색상, 레이아웃(떠다니는 그리드 / 원형 궤도 / 3D 카드 스택)부터 헤딩 카피, 그리고 자체 라벨, 설명 및 위치를 가진 여러 개의 인터랙티브 '노드'까지 모든 것을 편집할 수 있습니다.

이것은 자신의 랜딩 페이지가 살아있고 브랜드에 맞는 느낌을 갖기를 원하며, 공개되기 전에 가벼운 에디토리얼 워크플로우(초안 → 검토 → 승인 → 라이브)가 필요한 사람들을 위해 만들어졌습니다. 이는 한 사람이 카피를 작성하고 다른 사람이 게시하기 전에 승인하는 소규모 팀에 유용합니다.

저는 Sanity Studio의 커스터마이징 기능이 얼마나 멀리까지 갈 수 있는지 탐구하기 위해 이것을 만들었습니다: 진정으로 유용한 사용자 지정 입력 컴포넌트(단순한 데모가 아님), 문서 필드로 모델링된 실제 다단계 에디토리얼 워크플로우, 그리고 라이브 페이지의 빈 필드를 클릭하면 바로 Studio로 이동하는 엔드투엔드 비주얼 에디팅 기능입니다.

데모 (Demo)

라이브 사이트: https://vibe-canvas-production.up.railway.app
Studio: https://vibe-canvas-production.up.railway.app/studio
비디오 데모:https://drive.google.com/file/d/1ZKCCdWzNjrtkRFo0FXqKb09ZVV0ir4UF/view?usp=sharing

코드 (Code)

https://github.com/sundanaeem-systems/vibe-canvas

제 빌드 과정 (My Build Process)

저는 Next.js 15 + Sanity Studio v3를 사용하여 AI 코딩 어시스턴트의 도움을 받아 만들었으며, Railway에 배포했습니다.

잘 작동한 점:

• 실시간으로 에디터가 색상을 선택할 때 검은색/흰색 배경에 대한 실제 WCAG 2.1 대비 비율(상대 휘도 계산, relative luminance math)을 계산하고 AA/AAA/Fail 배지를 표시하는 커스텀 Studio 입력 컴포넌트 (ColorPalettePicker)를 구현했습니다. 이는 단순한 미적인 색상 견본을 훨씬 뛰어넘는 기능입니다.
• 원클릭으로 외부 재검증(revalidate) API를 게시하고 호출하며, 각 단계마다 토스트 피드백을 제공하는 커스텀 문서 액션("Deploy Vibe")을 추가했습니다.
• 콘텐츠 옆에 데이터로 모델링된 전체 편집 워크플로우: reviewStatus (draft/in-review/approved/live), 기록이 남는 append-only 형태의 reviewHistory 감사 추적(audit trail) (전환당 액터 + 타임스탬프 포함), 그리고 문서의 현재 단계에서만 나타나는 커스텀 문서 액션(검토 제출, 승인, 초안으로 반송, 라이브 전환)을 구현했습니다. "Deploy Vibe" 자체는 문서가 Approved/Live 상태에 도달할 때까지 비활성화되는 조건(gated)이 있으며, 커스텀 Studio 구조를 통해 문서를 Needs Review / Approved / Live / All Drafts 사이드바 뷰로 분리하여 승인자의 받은 편지함이 클릭 한 번 거리에 있도록 했습니다.
• 프레젠테이션 및 시각 편집: 공개 페이지에서 빈 필드를 강조 표시하고 에디터가 라이브 페이지에서 Studio 내부로 바로 클릭할 수 있게 했습니다.

막혔던 부분 (Where I got stuck):

• 배포 과정에서 로컬 개발 서버에서는 숨겨지는 실제 문제들이 발견되었습니다. 환경 변수(env variable)에 포함된 불필요한 후행 공백 하나가 Sanity 클라이언트 초기화(initialization)를 깨뜨려 "projectId는 a-z, 0-9 및 하이픈만 포함할 수 있습니다"라는 암호 같은 오류를 발생시켰습니다. 또한 오래된 잠금 파일(stale lockfile)이 Next.js를 알려진 보안 권고가 있는 버전으로 고정했고, Railway의 빌드 스캐너는 제가 이 파일을 재생성하기 전까지 빌드를 차단했습니다. 그리고 NEXT_PUBLIC_* 변수들은 런타임 시뿐만 아니라 빌드 단계 이전에 존재해야 했기 때문에 문제가 되었습니다. 이는 Next.js가 해당 변수들을 빌드 시간에 인라인(inlines) 처리하기 때문입니다.
• Sanity의 Studio는 자체 내부 라우터(internal router)를 가지고 있기 때문에, Next.js에서 /studio로 접근하면 Studio 셸이 비어버렸습니다. 이를 일반 태그(plain tag) (전체 페이지 로드를 강제함)로 교체하여 해결했습니다.

이번 빌드에서는 App SDK나 Workflows-as-a-plugin은 다루지 않았습니다. 여기의 에디토리얼 워크플로우는 전용 Workflows 기능 대신, 스키마 필드와 문서 액션으로 직접 모델링되었습니다. 다음으로 탐색할 부분입니다.

Sanity 프로젝트 상세 정보

Sanity 프로젝트 ID: lvf6oqo1
데이터셋: production

스키마: 테마/색상/레이아웃 필드, interactiveNodes 배열, 그리고 위에서 설명된 에디토리얼 필드(reviewStatus, reviewNotes, reviewHistory)를 가진 단일 vibeCanvas 문서 유형.

Agent 세션