타로 카드 이미지 패키지
메이저 아르카나 22장과 뒷면의 SVG·PNG, 한글 이름과 정·역방향 키워드가 담긴 JSON, AI 제작 프롬프트. 자신이 만든 웹앱에 넣어 사용한다.
카드 이미지 ZIP 받기M2 · BUILD & DEPLOY · CLOUDFLARE WORKERS AI
카드 세 장으로
나만의 AI 웹앱 만들기
“새로운 팀 프로젝트를 잘 시작하려면?”
질문을 적고, 카드를 뽑고, AI의 해석을 읽는다. 이 짧은 경험을 직접 만들어 인터넷에 공개한다.
먼저 완성 예제에서 대화를 나눠본다
카드를 뽑고 그림을 누르면 기본 의미를 볼 수 있다. AI의 첫 해석을 읽은 뒤 같은 카드를 두고 다섯 번까지 더 물어볼 수 있다. 대화형 타로 예제 열기 ↗
카드를 뽑고 그림을 누르면 기본 의미를 볼 수 있다. AI의 첫 해석을 읽은 뒤 같은 카드를 두고 다섯 번까지 더 물어볼 수 있다. 대화형 타로 예제 열기 ↗
STARTER FILES
이미지만 가져가도, 예제로 시작해도 된다
학생의 Cloudflare 계정에 자신의 앱을 배포하는 실습이다. 카드 그림과 데이터는 두 패키지에 모두 들어 있다.
Cloudflare 웹앱 예제 패키지
카드 그림·뜻풀이·AI 해석·후속 대화가 연결된 HTML·CSS·JavaScript와 Worker 코드. 카드 전체와 실행·배포 안내를 포함한다.
웹앱 예제 ZIP 받기직접 수정하는 자료
그림과 데이터는 수업용으로 직접 만들었다. 자유롭게 복사·수정·배포할 수 있다. 그림은 SVG 원본과 800 × 1,200 PNG로 제공한다. 기본 덱은 메이저 22장으로 구성되며 78장 전체 덱은 아니다.
그림과 데이터는 수업용으로 직접 만들었다. 자유롭게 복사·수정·배포할 수 있다. 그림은 SVG 원본과 800 × 1,200 PNG로 제공한다. 기본 덱은 메이저 22장으로 구성되며 78장 전체 덱은 아니다.
FROM QUESTION TO URL
화면과 AI를 연결하고, 내 주소로 배포한다
브라우저는 질문과 카드 선택을 보내고, Cloudflare Worker가 LLM을 호출한다. 카드의 이름·방향·키워드가 텍스트로 전달된다. 이 실습에서 그림은 화면 표시용이다.
브라우저 · 질문과 카드→Worker · /api/reading→Workers AI · LLM→ 한국어 해석
01 · 준비
계정과 프로젝트 폴더
Cloudflare 계정과 Node.js 22 이상을 준비한다. 웹앱 예제 ZIP을 풀고 package.json이 있는 tarot-web 폴더를 코드 편집기에서 연다.
wrangler.jsonc의 name을 자신의 앱 이름으로 바꾼다. 영문 소문자·숫자·하이픈을 사용한다. 예: tarot-minji-2026.
이미지 패키지만 사용한다면 아래 제작 프롬프트와 폴더를 AI 코딩 도우미에게 함께 전달한다.
02 · 내 컴퓨터에서 실행
로그인하고 앱 열기
npm install npx wrangler login npx wrangler whoami npm run dev
브라우저에서 로그인한 뒤 계정을 확인한다. 터미널에 나온 로컬 주소를 열고 질문 입력 → 카드 추첨 → 해석을 확인한다.
기본 주소는 http://localhost:8787. 로컬에서도 LLM은 Cloudflare에서 실행되므로 인터넷 연결이 필요하고 Workers AI 사용량에 포함된다.
03 · 나만의 앱으로 수정
그림과 프롬프트 바꾸기
public/style.css에서 색과 배치, public/cards/에서 그림을 바꾼다. PNG를 사용하려면 cards.json의 image 경로도 바꾼다.
src/worker.js의 SYSTEM_PROMPT에서 대상 사용자, 말투, 답변 순서를 바꾼다. 질문과 카드를 고정하고 답변의 차이를 관찰한다.
그림의 의미를 바꿨다면 JSON의 키워드도 함께 수정한다. LLM은 카드 이미지를 직접 보지 않는다.
04 · 공개 URL 만들기
확인하고 Cloudflare에 배포
로컬 실행을 Ctrl+C로 종료한 뒤 다음 명령을 실행한다.
npm run check npm run build:check npm run deploy
출력된 https://앱이름.본인서브도메인.workers.dev를 휴대전화에서도 연다. 다음 수정은 npm run deploy로 다시 반영한다.
Workers 하위 도메인이 없으면 첫 배포의 안내에 따라 만든다. 계정이 여러 개라면 README의 account_id 설정을 참고한다.
Cloudflare API 토큰은 어디에 넣는가?
이 예제는 Worker의 AI 바인딩으로 Cloudflare 모델 API를 호출한다. wrangler.jsonc의 "ai": { "binding": "AI", "remote": true }가 연결 설정이며, 서버 코드에서 env.AI.run()을 호출한다. 기본 실습에서는 별도 API 토큰 발급이나 브라우저 입력이 필요 없다.
다른 서버에서 REST API를 직접 호출할 때는 Workers AI 전용 토큰을 그 서버의 비밀 환경변수에 둔다. HTML이나 브라우저 JavaScript에는 넣지 않는다. 이 웹앱은 Worker와 정적 파일을 함께 배포한다. Pages에 화면 파일만 올리면 AI 기능이 빠진다.
사용 모델과 Qwen 3.8 비교 실습
완성 예제와 내려받는 프로젝트의 기본 모델은 Gemma 4 26B A4B다. wrangler.jsonc의 MODEL은 @cf/google/gemma-4-26b-a4b-it이며, 짧은 대화를 위해 추론 모드를 끄고 호출한다. 서버는 응답의 choices[0].message.content에서 최종 답변을 읽는다.
Qwen 3.8 비교: 같은 설정을 @cf/qwen/qwen3.8-27b로 바꾸고 다시 배포한다. 예제 코드가 낮은 추론 강도와 최대 2,000토큰을 적용한다. 같은 질문·카드·프롬프트로 한국어 표현, 응답 시간, 맥락 유지와 사용량을 비교한다.
AI 코딩 도우미에게 전달할 제작 프롬프트
압축을 푼 폴더와 함께 전달한다. 예제 프로젝트에 같은 내용의 PROMPT.md가 있다.
프롬프트를 불러오는 중입니다.
A DECK YOU CAN EDIT
카드를 뽑고, 이미지 링크를 가져간다
아래 미리보기는 카드 추첨만 실행한다. 실제 해석과 대화는 위의 완성 예제나 자신의 웹앱에서 체험한다. 카드 파일의 URL을 복사하거나 ZIP을 풀어 앱의 public/cards/ 폴더에 넣을 수 있다.
같은 질문, 세 가지 관점
현재 상황 → 살펴볼 점 → 시도할 행동. 미리보기는 정방향으로 표시한다. 예제 웹앱에는 역방향 선택도 있다.
SVG는 크기를 바꿔도 선명하며 색과 도형을 편집할 수 있다. PNG는 일반 이미지 파일이 필요한 곳에 쓴다. 각 카드의 ‘URL’은 SVG의 전체 주소를 복사한다.
카드 데이터는 어떻게 연결되는가?
{
"id": 17,
"name_ko": "별",
"name_en": "The Star",
"image": "cards/17-the-star.svg",
"png": "cards/17-the-star.png",
"upright": ["희망", "회복", "영감"],
"reversed": ["낙담", "믿음 회복", "작은 목표"]
}id가 그림과 해석 데이터를 연결한다. 브라우저에서 ID와 방향을 보내면 Worker는 서버의 JSON에서 이름과 키워드를 찾는다. AI가 카드 종류를 임의로 바꾸지 않도록 기준 데이터를 함께 준다. 키워드는 실습용으로 단순화한 해석 자료다.
PROMPT & CONTEXT
내가 바꾼 것은 답변에 어떻게 나타나는가?
실습 목표는 질문·카드 데이터를 프롬프트로 묶고 생성 결과를 자신의 서비스에서 보여 주는 것이다. 같은 질문과 카드 세 장을 유지한 채 한 조건씩 바꾸면 프롬프트의 영향을 비교하기 쉽다.
| 바꾸는 조건 | 조작 안내 | 관찰 포인트 |
|---|---|---|
| 대상 사용자 | 신입생 / 팀 프로젝트 참여자로 역할 변경 | 조언이 그 상황의 구체적 행동과 연결되는가? |
| 답변 형식 | 자유 서술 / 카드별 해석 + 작은 실천 | 세 카드의 정보가 빠지지 않고 반영되는가? |
| 해석 지침 | 방향별 키워드를 포함한 지침을 추가 | 정방향과 역방향의 차이가 나타나는가? |
| 이미지와 화면 | 직접 그린 그림과 질문 예시로 변경 | 휴대전화에서 질문·추첨·해석 흐름이 읽히는가? |
생성 결과는 같은 조건에서도 달라질 수 있다. 한 번의 답변만으로 효과를 단정하지 않고 반복해서 나타나는 차이를 기록한다.
실습 결과로 남길 것
배포 URL, 모바일 실행 화면, 바꾼 그림이나 코드, 프롬프트 수정 전후 답변과 차이를 짧게 정리한다. 타로는 놀이·자기성찰의 소재이며 생성된 이야기는 미래 예측의 근거가 아니다.
배포 URL, 모바일 실행 화면, 바꾼 그림이나 코드, 프롬프트 수정 전후 답변과 차이를 짧게 정리한다. 타로는 놀이·자기성찰의 소재이며 생성된 이야기는 미래 예측의 근거가 아니다.
CHECK & CONTINUE
막히는 지점을 확인한다
| 현상 | 확인할 곳 |
|---|---|
| npm 명령을 찾지 못한다 | Node.js 22 이상 설치 후 터미널을 다시 연다. |
| 카드는 보이지만 AI가 동작하지 않는다 | HTML 더블클릭·정적 호스팅 대신 npm run dev 또는 배포한 Workers 주소를 연다. |
| AI 연결 오류나 502 응답이 나온다 | AI 바인딩, 모델 이름, 로그인 계정, Workers AI 대시보드의 사용량을 확인한다. |
| 429 응답이 나온다 | 1분 뒤 다시 시도한다. 기본 예제는 같은 IP의 요청을 합산해 60초에 30회로 제한한다. |
| 바꾼 카드가 나오지 않는다 | JSON 경로와 파일 이름의 대소문자를 확인하고 다시 배포한다. |
질문과 카드 정보는 Cloudflare로 전송된다. 개인정보 없이 질문한다. 예제는 질문과 답변을 별도 DB에 저장하지 않는다.
2026-09-28 확인 기준 Workers AI는 하루 10,000 Neurons의 무료 할당량을 제공한다. Free 플랜은 할당량을 넘으면 요청이 실패하며, 유료 계정은 초과 사용에 과금될 수 있다. 호출 제한은 전체 비용 상한이 아니므로 현재 요금 안내와 대시보드 사용량을 확인한다.