create-remember-web

안녕하세요. 이 도구는 코딩을 몰라도 웹 화면을 만들 수 있게 준비된 프로젝트 폴더를 만들어줍니다.

터미널에 한 줄만 입력하면 폴더가 생기고, 사이트가 켜지고, Claude가 시작돼요. 그다음부터는 만들고 싶은 걸 한국어로 말하면 됩니다. 잘 만들려는 부담은 내려놓아도 돼요.

1. 시작하기

준비물 (처음 한 번만)

1. Node 24 이상 — nodejs.org에서 LTS를 내려받아 설치해주세요. 버전이 낮으면 실행할 때 안내가 나옵니다.

2. Claude Code — 터미널에 아래를 입력해주세요.

   curl -fsSL https://claude.ai/install.sh | bash

   윈도우 PowerShell에서는 irm https://claude.ai/install.ps1 | iex를 입력하면 됩니다.

프로젝트 만들기

터미널을 열고 아래 한 줄을 입력해주세요.

npx -y create-remember-web my-project

my-project 자리에는 원하는 폴더 이름을 넣으면 됩니다. 영어와 숫자, -만 쓸 수 있어요 — 한글 이름으로는 만들어지지 않습니다.

이 한 줄로 폴더가 만들어지고, 필요한 것들이 설치되고(1~2분), 사이트가 켜지면서 브라우저가 열립니다. 그리고 그 터미널 창이 Claude로 바뀌어요. 처음 보이는 화면은 미리 담아둔 샘플이고, 첫 화면을 만들면 교체됩니다.

터미널에서 실행해주세요. Claude 대화창 안에 이 명령을 입력하면 사이트와 Claude가 자동으로 켜지지 않아요. 그때는 화면에 나오는 안내를 따라 터미널 두 개로 이어가면 됩니다.

2. 화면 만들기

Claude에게 만들고 싶은 걸 한국어로 말하면 됩니다. 예를 들어:

지원자 목록을 보여주는 화면을 만들어줘. 이름·지원일·상태가 표로 나오면 좋겠어.

Claude가 먼저 "이런 화면이 생기고, 여기서 이런 동작을 해요"라고 정리해서 보여줍니다. 맞으면 그렇게 해달라고 답하고, 다르면 그 자리에서 말해주세요. 합의가 되면 만들기 시작하고, 다 되면 브라우저로 열어서 보여줍니다.

1. 말하기 — "○○ 화면 만들어줘"
2. 보기 — 다 만들면 Claude가 브라우저로 열어서 보여줘요.
3. 고치기 — "버튼 좀 더 크게", "표로 바꿔줘", "파란색을 회색으로"
4. 되돌리기 — 잘못됐으면 "아까 상태로 되돌려줘"
5. 올리기 — "배포해줘"라고 하면 인터넷 주소를 만들어줘요.

소요 시간: 화면 하나에 보통 10~15분 걸려요. 겉으로 조용해 보여도 품질 검사까지 함께 돌리고 있어서 그렇습니다. 기획이 크면 30~40분까지도 걸리는데, 작업을 작게 쪼개서 요청하면 빨라져요.

요청 전에 한 가지 팁: 러프하게 "뭔가 만들어줘"라고 하는 것보다, 해야 할 일을 티켓이나 기획 문서로 먼저 정리한 뒤 그 내용을 통째로 붙여넣는 편이 훨씬 잘 나옵니다. 요구사항이 문서로 정리되어 있으면 Claude가 헤매지 않아요.

이렇게 말해보세요

| 상황 | 이렇게 말하면 돼요 | | ----------------- | -------------------------------------------------------- | | 기획서대로 만들기 | 기획서나 티켓 내용을 통째로 붙여넣고 "이대로 만들어줘" | | 새 화면 만들기 | "○○ 화면 만들어줘" | | 결과 보기 | "화면 보여줘" | | 기능 추가 | "목록에서 이름을 누르면 상세가 열리게 해줘" | | 표 만들기 | "이걸 정렬·검색되는 표로 보여줘" | | 디자인 바꾸기 | "○○앱처럼 깔끔한 느낌으로", "전체적으로 더 밝게" | | 저장되게 하기 | "새로고침해도 남게 해줘" | | 실수 되돌리기 | "아까 상태로 되돌려줘" | | 문제 신고 | "에러 나", "화면이 안 떠" |

git, 커밋, 배포, 코드, 폴더 구조는 몰라도 됩니다. 전부 Claude가 알아서 해요.

자동으로 지켜지는 것

따로 신경 쓰지 않아도:

• 처음 정한 디자인이 화면마다 달라지지 않아요. "전체적으로 더 밝게" 한마디면 모든 화면에 한 번에 적용됩니다.
• AI가 대충 만든 느낌이 나는 화면은 자동으로 걸러집니다.
• 코드 검사가 항상 돌고 있어서, 나중에 개발자가 이어받아도 문제없는 상태로 유지돼요.
• 실제 데이터는 확인 없이 외부 서비스에 올라가지 않아요.
• 이 검사들을 전부 통과해야 Claude가 "다 됐어요"라고 말합니다.

3. 다시 시작하고 끝내기

다시 켤 때: 터미널을 열고 아래 두 줄을 입력해주세요. my-project 자리에는 만들 때 정한 폴더 이름을 넣으면 됩니다.

cd my-project
claude

사이트가 안 떠 있으면 Claude에게 "화면 보여줘"라고 하면 알아서 켜 줍니다.

끝낼 때: Ctrl + C를 두 번 누르면 사이트와 Claude가 함께 꺼져요.

자주 묻는 질문

Q. 처음이라 뭐부터 해야 할지 모르겠어요.

만들어진 폴더 안의 docs/TUTORIAL.md를 따라 해보세요. 화면 하나를 만들고, 고치고, 되돌리는 것까지 15분이면 한 번 겪어봅니다. 나머지는 응용이에요.

Q. pnpm을 못 찾는다고 나와요.

터미널에 npm install -g pnpm을 한 번 입력하고 다시 시도해주세요. pnpm install이 실패하면 corepack enable을 한 번 실행한 뒤 다시 해보세요.

Q. claude 명령이 없다고 나와요.

위 준비물의 설치 명령을 한 번 실행해주세요. 설치한 뒤에는 터미널을 새로 열어야 인식됩니다.

Q. Node 버전이 낮다고 나와요.

nvm install 24 && nvm use 24를 입력해주세요. nvm이 없다고 나오면 nodejs.org에서 LTS를 내려받아 설치한 뒤 터미널을 새로 열면 됩니다.

Q. 화면이 안 보여요.

Claude에게 "화면 보여줘"라고 말해주세요. 알아서 켜서 열어줍니다. 직접 켜려면 프로젝트 폴더에서 pnpm dev를 입력하면 돼요. localhost:3000을 다른 사이트가 이미 쓰고 있으면 localhost:3001처럼 옆 포트로 열리니, 터미널에 뜨는 주소를 보시면 됩니다.

Q. MCP servers found라는 물음이 나왔어요.

Enter로 켜주세요. 화면을 자동으로 확인하는 도구와 기획서·티켓을 읽는 도구예요. 지나쳤다면 대화창에 /mcp를 입력해 다시 연결할 수 있습니다.

Q. 에러가 났는데 무슨 말인지 모르겠어요.

Claude에게 그대로 "에러 나", "무슨 뜻인지 쉽게 알려줘"라고 물어보세요. 스스로 고치고 결과만 알려줍니다.

더 자세한 안내는 만들어진 폴더 안의 README.md에 있어요. 그래도 막히면 이 도구를 안내해준 분께 물어보세요. 어떤 요청을 했을 때 무엇이 안 됐는지만 알려주시면 됩니다.

스택

Vite + React 19 + React Router (CSR) · TypeScript · Tailwind v4 + shadcn/ui · TanStack Query(+ Table) · React Hook Form + Zod · Zustand · overlay-kit · ky · orval · React Compiler. 패키지 매니저는 pnpm, Node 24 기준입니다.

함께 들어 있는 것

스캐폴드에는 앱 골격뿐 아니라 Claude Code용 하네스(.claude/)가 함께 들어갑니다 — 화면 만들기 절차 스킬, 파일 저장 즉시 도는 검사 훅, 커밋 전 게이트, 그리고 GitHub Actions 워크플로입니다.

코드 품질은 문서가 아니라 게이트가 강제합니다: oxlint(type-aware, --max-warnings 0) · oxfmt · dependency-cruiser · steiger(FSD) · tsc · vitest · 구조 휴리스틱(code-smell) · UI slop 검사 · knip · 테마 색 대비. pnpm verify가 이 열 개와 빌드를 한 번에 돌리고, pnpm preview는 타입·lint·경계·slop만 보는 빠른 관문이에요(약 4.5초). 배포·푸시 직전에는 로컬 리뷰 에이전트(fe-reviewer·ui-critic)가 한 번 더 판정합니다.

워크플로는 표준 액션만 쓰기 때문에 어느 저장소에 올려도 그대로 동작합니다. 조직 전용 시크릿이 필요하지 않아요.