KITFORAI / STEP BY STEP

타로 키트 따라 하기

처음 실행부터 내 브랜드로 공개하기까지

구매 전에도 절차를 살펴볼 수 있습니다. 직접 따라 하려면 해당 키트 ZIP이 필요합니다.

따라 할 순서
  1. 준비 · 압축부터 풀기
  2. 실습 · 첫 결과 확인
  3. 수정 · 내 브랜드 적용
  4. 공개 · 업로드 폴더 만들기
  5. 점검 · 공개 전 체크리스트
  6. 해결 · 막혔을 때

01. 준비 · 압축부터 풀기

  1. 원본 ZIP은 백업해 두고 압축을 완전히 풉니다. ZIP 미리보기 안에서 실행하지 마세요. 컴퓨터의 브라우저로 시작하세요. 휴대폰에서는 나중에 공개 URL로 확인합니다.
  2. 압축을 푼 폴더의 START.html을 더블클릭하고 「미리보기 열기」를 누릅니다. 미리보기에는 Python·API 키·유료 AI가 필요하지 않습니다.
  3. 메이저 아르카나 22장에서 중복 없이 세 장을 뽑는 웹입니다. 미래를 확정하는 예언이나 상담 서비스는 포함하지 않습니다.
  4. 정상 확인: 제목·버튼·화면 스타일이 함께 보입니다. 인터넷 연결 없이도 구매 ZIP의 미리보기와 이 안내를 열 수 있습니다.

02. 실습 · 첫 결과 확인

  1. 주제에서 「일과 집중」을 선택하고 「세 장 뽑기」를 누릅니다.
  2. 카드 세 장을 각각 눌러 펼칩니다. 세 장의 이름이 서로 다르고 정방향 또는 역방향 문장이 보이는지 확인합니다. 다시 뽑으면 카드와 방향이 달라질 수 있습니다.
  3. 마우스 없이 Tab으로 카드에 이동하고 Enter로도 펼칠 수 있는지 확인합니다.
  4. 주제를 「관계와 대화」로 바꿉니다. 이전 결과가 숨겨지는지 확인한 후 다시 「세 장 뽑기」를 누릅니다.
  5. 「초기화」를 누릅니다. 카드와 이전 해석이 숨겨져야 합니다.

03. 수정 · 내 브랜드 적용

  1. 수정 전에 폴더를 복사해 백업합니다. 구매 때 입력한 브랜드는 이미 적용되어 있습니다. 추가로 바꿀 때만 아래 순서를 따르세요.
  2. brand-config.js를 일반 텍스트 편집기나 코드 편집기로 엽니다. 문서 편집기로 서식을 입히지 마세요.
  3. siteName은 브라우저 탭 제목, brandName은 상단 브랜드, tagline은 소개, disclaimer는 오락용 고지입니다. 예: siteName = 별빛 정원, brandName = 별빛 정원, tagline = 오늘을 돌아보는 작은 질문. disclaimer는 오락과 성찰의 한계를 유지하세요.
  4. 기존 JavaScript 구조와 따옴표·쉼표를 유지하면서 문자열 값만 수정하고 UTF-8로 저장합니다. brand-config.example.json이나 config.json만 바꾸어서는 화면이 바뀌지 않습니다.
  5. 직접 수정이 어렵다면 구매 폴더를 읽을 수 있는 AI에 아래 요청을 전달합니다. 사용 중인 AI 요금은 별도일 수 있습니다.
  6. AI 요청: 이 폴더의 START.md와 PURCHASE-START.md가 있으면 읽고, brand-config.js의 siteName과 brandName을 “별빛 정원”, tagline을 “오늘을 돌아보는 작은 질문”으로 바꿔줘. 오락용 고지와 기존 스크립트 구조를 유지하고, 이 폴더 안의 모든 brand-config.js에 같은 값을 적용해줘. 주문번호나 이메일을 웹 화면에 넣지 말고 변경 파일과 실행 결과를 보여줘.
  7. index.html을 다시 열거나 새로고침합니다. 상단 이름·소개·탭 제목이 바뀌었는지 확인하고 첫 결과 실습을 반복합니다.

04. 공개 · 업로드 폴더 만들기

  1. 브랜드 수정과 실습이 끝나면 publish.py가 있는 폴더에서 터미널을 엽니다. VS Code를 사용한다면 해당 폴더를 연 뒤 「터미널 → 새 터미널」을 선택하세요.
  2. 공개용 내보내기에만 Python 3가 필요합니다. 설치되어 있지 않다면 공식 Python 배포본을 설치한 뒤 터미널을 다시 엽니다.
  3. Mac / Linux: python3 publish.py --output public-site
  4. Windows: py -3 publish.py --output public-site
  5. 정상 확인: 새 public-site 폴더에 실행 파일 5개가 생깁니다. 그 안의 index.html을 열어 같은 동작을 확인합니다.
  6. 선택한 정적 웹 호스팅에서 public-site 폴더의 내용만 업로드합니다. 웹 루트에 index.html이 있어야 합니다. 호스팅 계정·요금·도메인 연결은 별도이며 서비스별 배포 화면은 다릅니다.
  7. 호스팅이 제공한 공개 URL을 새 브라우저 창과 휴대폰에서 엽니다. 첫 결과·초기화·브랜드를 다시 확인한 뒤 고객에게 주소를 공유합니다.
  8. 구매 ZIP 전체, PURCHASE-* 파일, config.json, 라이선스·설치 문서는 업로드하지 마세요. 내보내기는 이런 파일을 제외합니다. 브랜드를 다시 수정했다면 새 출력 폴더 public-site-v2로 내보내고 새 결과를 배포합니다.

05. 점검 · 공개 전 체크리스트

  1. 브랜드 이름·소개·오락용 고지가 내가 의도한 문구인지 확인했습니다.
  2. 정상 입력·선택, 누락 안내, 입력 변경 후 결과 숨김, 초기화를 실제 화면에서 확인했습니다.
  3. 휴대폰 화면에서 가로 넘침 없이 버튼을 누르고 결과를 읽을 수 있습니다.
  4. 공개 URL에 주문번호·이메일·구매 문서가 없고, 방문자에게 안내할 문의 경로를 준비했습니다.
  5. 이 체크리스트는 직접 실행해 확인할 항목입니다. 안내를 읽거나 화면을 여는 것만으로 공개 검증이 완료되지는 않습니다.

06. 해결 · 막혔을 때

  1. 화면이 깨지거나 버튼이 안 눌려요 → ZIP을 새 폴더에 다시 풀고 폴더 전체를 유지한 채 START.html부터 여세요. 그래도 안 되면 다른 최신 브라우저에서 확인하세요.
  2. 브랜드를 바꿨는데 그대로예요 → 실제 실행 중인 폴더의 brand-config.js를 수정했는지, 저장했는지 확인하고 새로고침하세요. 공개 사이트는 새로 내보내고 다시 배포해야 바뀝니다.
  3. Python 명령을 찾을 수 없어요 → Python 설치 후 터미널을 다시 여세요. Windows에서 py가 없고 python이 있다면 python --version으로 3.x인지 확인한 뒤 python publish.py --output public-site를 사용할 수 있습니다.
  4. publish.py를 찾을 수 없어요 → 터미널의 현재 폴더가 publish.py가 있는 구매 폴더인지 확인하세요.
  5. output directory is not empty 오류 → 기존 결과를 덮어쓰지 않도록 막은 것입니다. 기존 폴더는 보관하고 --output public-site-v2처럼 새 이름을 쓰세요.
  6. 예제와 카드가 달라요 → 무작위 추첨이므로 정상입니다. 특정 카드가 아니라 세 장의 중복 여부와 펼치기 동작을 확인하세요.
  7. 문의할 때: 키트명·버전, Mac/Windows와 브라우저, 막힌 단계 번호, 기대한 결과와 실제 결과, 오류 문구를 준비하세요. 구매 확인 정보는 고객센터의 비공개 문의로만 보내고 비밀번호·API 키는 보내지 마세요.
  8. 고객센터 첫 답변 목표는 영업일 2일 이내입니다. 정확한 문의 방법은 동봉된 SUPPORT.md 또는 KitForAI 고객센터를 확인하세요.