Almanac 앱은 빌드되면 어떤 기능을 하나요?

Almanac은 협업자가 웹 페이지를 열고, iframe에 렌더링된 HTML 아티팩트에 핀으로 고정된 댓글을 직접 남기고, 스레드 토론을 할 수 있는 로컬 호스팅 디자인 검토 도구(Figma 댓글과 유사)입니다. 반응, 스레드 해결, 실시간 존재 여부(누가 보고 있는지), AI 검토자를 위한 API 레인을 지원합니다.

시드는 어떤 스택으로 빌드되나요?

인증을 위해 NextAuth v4를 사용하고, KV 환경 변수가 없을 때 인메모리 Map 폴백을 사용하여 영구성을 위해 Vercel KV(@vercel/kv, Redis 호환)를 사용하며, 에이전트 기능을 위한 서버 측 HTML 구문 분석을 위해 Cheerio를 사용하고, E2E 검증을 위해 Playwright를 사용하여 Next.js 14 App Router 앱(React 18, TypeScript strict)을 빌드합니다.

Almanac을 로컬에 설치하고 실행하는 방법은 무엇인가요?

제공된 curl 명령을 통해 시드를 설치한 다음, 시드의 “단계”에 따라 종속성(Playwright Chromium 포함 `npx playwright install --with-deps chromium`을 통해)을 설치하고, `.env.local` 시크릿을 생성하고, `cookoff-seeds/` HTML 코퍼스가 있는지 확인하고(시드에서 예제를 생성할 수 있음), 빌드하고, 포트 3210에서 서버를 실행합니다(`next dev -p 3210` / `next start -p 3210`).

Google OAuth 없이 로컬 로그인은 어떻게 작동하나요?

개발/검증을 위해 앱에는 `ALMANAC_TEST_LOGIN=1`에 의해 보호되는 개발 전용 경로 `GET /api/test-login`이 포함되어 있습니다. 이 경로는 `@plow.co` 이메일(기본값 `tester@plow.co`)에 대해 유효한 NextAuth JWT 세션(`NEXTAUTH_SECRET`으로 서명됨)을 생성하고 요청된 페이지로 리디렉션합니다. 플래그가 설정되지 않으면 경로는 404를 반환합니다.

Google SSO를 원하지 않는 경우 공개 배포는 어떻게 보호되나요?

시드는 `ALMANAC_ACCESS_PASSWORD`가 설정될 때 활성화되는 프로덕션 암호 기반 NextAuth 자격 증명 공급자를 지정합니다. 로그인은 암호와 필수 표시 이름(빈 이름은 클라이언트 및 서버 측에서 거부됨)을 모두 요구합니다. Google SSO는 선택 사항입니다.

HTML 아티팩트는 어디에 저장되며 어떻게 검색되나요?

아티팩트는 `/seed/<round>/<slug>`를 통해 `cookoff-seeds/<projectDir>/<file>.html` 아래 디스크에서 제공될 수 있으며(Project → Option → Version v1으로 자동 검색됨), 추가 업로드된 버전은 KV에 저장되고 `/seed-kv/<project>/<option>/<version>`을 통해 제공될 수 있습니다.

시드에 자동화된 검증 스위트가 포함되어 있나요?

예. 시드에는 `localhost:3210`에서 실행되는 앱에 대해 27개의 승인 여정(핀, 답글, 반응, 해결, 존재 여부, 버전 전환, 에이전트 API와 같은 기능 흐름 포함)과 사양의 절대 디자인 값에 대해 계산된 스타일/DOM을 통해 주장되는 시각적 충실도 검사를 실행하는 Playwright를 사용하는 “검증” 프로세스가 포함되어 있습니다.

두 가지 액세스 ‘정문’과 에이전트 API는 무엇인가요?

사람은 NextAuth 세션(Google OAuth 선택 사항, 암호 로그인 지원)을 사용합니다. 에이전트는 두 개의 헤더가 있는 헤더 보호 API를 사용합니다. `x-vercel-protection-bypass`(`VERCEL_AUTOMATION_BYPASS_SECRET`와 일치해야 함) 및 `x-almanac-agent-key`(`ALMANAC_AGENT_API_KEY`와 일치해야 함). 에이전트 엔드포인트는 아티팩트를 읽고 인간 댓글과 동일한 댓글 저장소에 나타나는 에이전트 작성 댓글을 쓰고/해결하고/삭제할 수 있습니다.

Almanac Seed

WebsiteFreeAI Code Generator AI Developer Tools

Almanac Seed는 AI 코딩 에이전트가 핀 고정 주석, 스레드 토론, 반응, 해결, 실시간 존재 및 AI 검토자를 위한 헤더 게이트 API를 갖춘 완전한 Next.js 14, Figma 스타일 HTML 디자인 검토 앱을 구축하고 자체 검증할 수 있도록 하는 단일 파일 SEED.md 레시피입니다.

웹사이트 방문

이 도구 광고하기

https://seeds.plow.co/seed/plow-pbc/almanac-seed?ref=producthunt&utm_source=aipure

개요
동영상
대안

제품 정보

업데이트됨:Jun 8, 2026

Almanac Seed이란?

Almanac Seed는 Almanac을 위한 독립형 "제품 시드"로, 렌더링된 HTML 아티팩트에 직접 주석을 달 수 있도록 구축된 로컬 호스팅 가능한 디자인 검토 도구입니다. Figma의 핀 기반 주석과 유사하지만 웹 프로토타입 및 단일 파일 HTML 탐색을 위한 것입니다. 애플리케이션 코드를 제공하는 대신, 저장소는 AI 코딩 에이전트에게 경로, 데이터 모델, UI 동작, 보안 규칙 및 승인 테스트를 포함하여 전체 애플리케이션을 처음부터 생성하는 방법을 지시하는 하나의 권위 있는 사양 파일인 SEED.md를 제공합니다. 결과 앱은 NextAuth 기반 인증 및 KV 기반 영구 계층을 갖춘 Next.js 14(앱 라우터) 프로젝트로, 외부 서비스나 프로덕션 자격 증명 없이 개발자 머신에서 완전히 실행하고 검증하도록 설계되었습니다.

Almanac Seed의 주요 기능

Almanac Seed는 AI 코딩 에이전트가 Next.js 14 디자인 검토 도구인 Almanac 웹 앱 전체를 처음부터 구축하도록 지시하는 단일 파일 "SEED.md" 레시피입니다. 이 도구를 통해 협업자는 렌더링된 HTML 아티팩트에 핀 앵커 스레드(Figma 스타일), 반응, 해결 상태 및 실시간 존재감을 통해 직접 주석을 달 수 있습니다. 이 시드에는 고정된 데이터 모델, KV 스키마, 경로/API 계약(헤더로 보호되는 에이전트 API 포함), UI/브랜드 요구 사항, 그리고 개발 전용 테스트 로그인 경로와 선택적 인메모리 KV 대체 기능을 사용하여 외부 서비스나 프로덕션 인스턴스 없이 로컬에서 실행할 수 있는 자동화된 검증 스위트(27가지 승인 여정)가 포함됩니다.

전체 앱으로 변환되는 단일 파일 제품 사양: 애플리케이션 코드는 제공하지 않고 SEED.md만 제공하므로 AI 에이전트는 사양만으로 전체 Almanac 구현(Next.js 14 + TypeScript)을 생성할 수 있습니다.

실제 HTML 아티팩트에 대한 Figma 스타일 핀 주석: 검토자는 iframe에 렌더링된 아티팩트를 열고 스레드 토론, 링크화된 텍스트, 반응, 해결/미해결 동작이 포함된 번호가 매겨진 드래그 가능한 핀을 배치합니다.

내장된 승인 검증 (27가지 여정): 사양의 절대 디자인 토큰에 대한 계산된 스타일/DOM 어설션을 통해 기능 흐름과 시각적 충실도를 검증하는 종단 간 Playwright 스위트가 포함됩니다.

두 가지 액세스 경로: 사람 세션 + 에이전트 API: NextAuth 세션을 통한 사람 검토와 AI 검토자가 아티팩트를 읽고 동일한 저장소에 주석을 작성할 수 있도록 별도의 두 헤더로 보호되는 API 레인을 지원합니다.

로컬 + 프로덕션을 위한 휴대용 보안 및 인증: 프레이밍/보안 규칙을 위해 미들웨어 및 Next.js 헤더(배포 전용 구성 아님)를 사용합니다. Google 없이 검증을 위한 개발 전용 테스트 로그인 경로와 프로덕션 암호 로그인 옵션을 제공합니다.

탄력적인 개발 대체 기능이 있는 KV 기반 협업: 고정된 Redis 키/유형 스키마를 사용하여 Vercel KV(Upstash Redis)에 주석/존재감/반응을 유지하며, 로컬 실행 시 KV 환경 변수가 없을 때 인메모리 Map 대체 기능을 제공합니다.

Almanac Seed의 사용 사례

HTML 프로토타입을 위한 제품 디자인 검토: 정적 HTML 목업(랜딩 페이지, UI 탐색, 마케팅 페이지)을 검토하는 팀은 핀과 스레드 피드백을 통해 아티팩트에 직접 주석을 달 수 있습니다.

내부 디자인 QA 및 이해관계자 승인: PM, 엔지니어 및 이해관계자는 스레드를 해결하고, 반응하며, 활동/존재감을 추적하여 피드백을 별도의 문서로 옮기지 않고도 승인을 조율할 수 있습니다.

AI 지원 UX 비평 및 자동화된 검토: AI 에이전트는 아티팩트와 후보 앵커를 가져와 에이전트 API를 통해 구조화된 주석을 게시하고, 동일한 검토 화면에서 사람들과 함께 참여할 수 있습니다.

규제 환경을 위한 비공개 로컬 호스팅 검토 도구: 로컬 우선 도구가 필요한 조직은 외부 종속성 없이(개발 인증 + 메모리 KV) 로컬 호스트에서 앱을 실행하고 나중에 제어된 액세스로 배포할 수 있습니다.

디자인 시스템 및 시각적 회귀 적용: 팀은 사양 기반 시각적 어설션을 사용하여 반복 전반에 걸쳐 일관된 타이포그래피, 대소문자, 레이아웃 밀도 및 상호 작용 동작을 적용할 수 있습니다.

장점

자체 포함, 재현 가능한 빌드: 단일 시드 파일과 자동화된 검증을 통해 처음부터 일관된 변환이 가능합니다.

강력한 협업 기본 요소: 앵커 핀, 스레드, 반응, 해결 상태 및 존재감은 익숙한 디자인 검토 워크플로를 반영합니다.

에이전트 친화적인 설계: 전용 헤더로 보호되는 엔드포인트를 통해 AI 검토자가 피드백을 프로그래밍 방식으로 읽고 쓸 수 있습니다.

단점

복잡한 사양 표면 영역: 엄격한 KV 스키마, 인증 규칙 및 UI 충실도 요구 사항은 구현 및 유지 관리 복잡성을 증가시킵니다.

프로덕션 설정에는 여전히 플랫폼 단계가 필요합니다. 공개적으로 배포하려면 Vercel 프로젝트 설정과 Upstash/Vercel KV 연결(및 비밀 관리)이 필요합니다.

도메인별 기본값: 이 시드는 특정 워크플로(HTML 아티팩트, Next.js, Vercel KV, NextAuth)에 맞춰져 있으므로 조정 없이는 모든 스택에 적합하지 않을 수 있습니다.

Almanac Seed 사용 방법

1) Almanac Seed 설치 (Plow Seeds CLI 레시피): 실행: curl -fsSL https://raw.githubusercontent.com/plow-pbc/seed/main/install.sh | bash -s -- https://github.com/plow-pbc/almanac-seed/blob/main/SEED.md 이렇게 하면 Plow Seeds 도구가 설치되고 Almanac SEED.md 레시피가 가져와집니다.

2) SEED.md를 열고 코딩 에이전트에 전달: 편집기 또는 브라우저에서 원시 SEED.md를 열고 다음 지침과 함께 AI 코딩 에이전트(예: Claude Code)에 붙여넣습니다. "이 시드를 하이드레이션하세요. 지정된 앱을 빌드한 다음 27개의 §16 여정이 모두 통과할 때까지 ## 단계 및 ## 확인을 실행하세요." 참고: SEED.md는 완전한 제품 사양입니다. 의도적으로 구현 코드가 포함되어 있지 않습니다.

3) 로컬 검증을 수행할지 아니면 실제 공개 배포를 수행할지 결정: 로컬 빌드/검증: 0단계의 배포 인터뷰를 건너뛰고 바로 빌드 단계로 이동할 수 있습니다(시드는 이를 "바로 §13.5로 건너뛰기"라고 부릅니다). 공개 배포: 빌드하기 전에 먼저 0단계를 완료해야 합니다(Vercel 로그인 + Upstash 스토어 생성/연결).

4) (공개 배포 전용) 0단계 인터뷰 전제 조건 완료: 터미널에서 Node가 사용 가능한지(>= 18.17) 확인하고 Vercel CLI가 설치되어 있는지 확인합니다. Vercel CLI가 없으면 사용자 쓰기 가능한 접두사로 설치합니다. mkdir -p ~/.npm-global && npm config set prefix ~/.npm-global export PATH="$HOME/.npm-global/bin:$PATH" npm i -g vercel 그런 다음 인증합니다. vercel login 이제 Vercel 프로젝트를 생성/연결합니다(범위는 팀과 개인에 따라 다릅니다). - 팀: vercel link --yes --project <your-almanac> --scope <your-team> - 개인: vercel link --yes --project <your-almanac> Vercel 대시보드에서 Redis용 Upstash 데이터베이스를 생성하고 이 프로젝트에 연결합니다(스토리지 → 데이터베이스 생성 → Redis용 Upstash → 프로젝트 연결 → 모든 환경).

5) (공개 배포 전용) 프로덕션 비밀 설정 (에이전트 생성 암호): 비밀을 생성하고 설정합니다(시드는 에이전트가 암호를 생성해야 한다고 지정합니다. 사용자는 선택하지 않습니다). PASSPHRASE="$(openssl rand -base64 18)" printf '%s' "$(openssl rand -base64 32)" | vercel env add NEXTAUTH_SECRET production printf '%s' "$PASSPHRASE" | vercel env add ALMANAC_ACCESS_PASSWORD production 프로덕션에서 ALMANAC_TEST_LOGIN을 설정하지 마십시오.

6) 시드의 빌드 단계를 로컬에서 실행 (시드의 §13.5 "단계"): SEED.md §13.5 단계를 따라 앱을 하이드레이션/빌드합니다. 요약하자면, 시드는 에이전트에게 다음을 지시합니다. - Node >= 18.17 확인 - npm 종속성 설치 (npm install) - cookoff-seeds/ 코퍼스가 존재하는지 확인 (없으면 시드가 예제를 생성) - Playwright Chromium + OS 종속성 설치: npx playwright install --with-deps chromium - 로컬 개발을 위한 .env.local 생성 (NEXTAUTH_SECRET, NEXTAUTH_URL=http://localhost:3210, ALMANAC_TEST_LOGIN=1 및 개발 에이전트 키 포함) - 포트 3210에서 빌드 및 실행 (npm run build; npm start -p 3210 또는 동등한 명령)

7) 포트 3210에서 앱을 시작하고 응답하는지 확인: 서버를 실행하고 /login이 로드되는지 확인합니다. npm run build npm start 그런 다음 확인합니다. curl -sI http://localhost:3210/login HTTP 200을 예상합니다.

8) 개발 전용 테스트 로그인 경로를 사용하여 Google 없이 로컬에서 로그인: .env.local에 ALMANAC_TEST_LOGIN=1이 있는 경우 다음을 엽니다. http://localhost:3210/api/[email protected]&next=/ 이렇게 하면 NextAuth 세션 쿠키가 생성되고 앱으로 리디렉션됩니다(로컬 검증에는 Google OAuth가 필요하지 않습니다).

9) 시드의 검증 스위트 실행 (시드의 §15 "확인" / §16 여정): Playwright E2E 스위트를 실행합니다. npm run e2e 시드의 승인 기준은 §16의 27개 여정입니다(기능 + 시각적 계산 스타일 어설션). 모두 localhost:3210에 대해 통과해야 합니다.

10) (선택 사항) 제공된 Docker stranger-test 스크립트 사용: 완전히 격리된 "빈 컨테이너" 검증을 원하면 저장소의 검증 스크립트를 실행합니다(Docker 및 구성된 claude CLI 필요). verify/hydrate-and-verify.sh 이 스크립트는 node:20-slim 컨테이너에서 낯선 사람 흐름을 자동화하고 FINAL_VERIFY 결과를 출력합니다.

11) (공개 배포 전용) Vercel에 배포 (시드의 §13.6 "배포"): 0단계가 완료되고 앱이 로컬에서 빌드되면 배포합니다. vercel deploy --prod 그런 다음 API 또는 대시보드를 통해 Vercel 배포 보호(ssoProtection)를 비활성화합니다(/login에 도달할 수 있도록 필요). NEXTAUTH_URL을 배포된 URL로 설정하고 한 번 다시 배포합니다. printf '%s' "https://<project>.vercel.app" | vercel env add NEXTAUTH_URL production vercel deploy --prod

12) (공개 배포 전용) 생성된 암호를 사용하여 액세스 공유: 배포된 Almanac은 암호 로그인(자격 증명 공급자)을 사용합니다. 검토자는 모든 표시 이름 + 생성된 ALMANAC_ACCESS_PASSWORD 암호로 로그인합니다. 새로 고침 시 주석이 유지되는지 확인합니다(Upstash KV가 연결되었음을 증명).