KITFORAI / STEP BY STEP

관상 키트 따라 하기

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

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

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

01. 준비 · 압축부터 풀기

  1. 원본 ZIP은 백업해 두고 압축을 완전히 풉니다. ZIP 미리보기 안에서 실행하지 마세요. 컴퓨터의 브라우저로 시작하세요. 휴대폰에서는 나중에 공개 URL로 확인합니다.
  2. 압축을 푼 폴더의 START.html을 더블클릭하고 「미리보기 열기」를 누릅니다. 미리보기에는 Python·API 키·유료 AI가 필요하지 않습니다.
  3. 얼굴형·오관·삼정 자료에서 고른 한 항목을 이야기와 질문으로 보는 웹입니다. 사진 업로드·얼굴 인식·외모를 통한 실제 성격 판정은 포함하지 않습니다.
  4. 정상 확인: 제목·버튼·화면 스타일이 함께 보입니다. 인터넷 연결 없이도 구매 ZIP의 미리보기와 이 안내를 열 수 있습니다.

02. 실습 · 첫 결과 확인

  1. 아무것도 선택하지 않고 「관상 보기」를 누릅니다. 항목을 하나 고르라는 안내가 나오는지 확인합니다.
  2. 얼굴형에서 「둥근형」을 고르고 「관상 보기」를 누릅니다. 선택한 이름과 이야기, 성찰 질문이 표시되어야 합니다.
  3. 「긴형」을 선택합니다. 이전 「둥근형」 결과가 즉시 숨겨지는지 확인합니다. 다시 「관상 보기」를 누르면 「긴형」의 이야기가 나옵니다.
  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 고객센터를 확인하세요.