선박 전자증서 확인 데모, 처음부터 따라 만들기

• 위에서부터 순서대로 하세요. 단계 하나를 끝내면 맨 아래 "다 했어요"에 체크합니다. 창을 닫았다가 다시 열어도 체크는 남아 있습니다.
• 회색 상자 오른쪽의 복사 버튼을 누르면 내용이 복사됩니다. 붙여 넣을 곳에서 Ctrl + V를 누르세요.
• 이 문서에서 이런 모양은 화면에 보이는 버튼이나 메뉴 이름입니다. 웹사이트는 대부분 영어라 영어 그대로 적었습니다.
• 웹사이트 화면은 자주 바뀝니다. 버튼 이름이 조금 다르면 비슷한 이름을 찾으세요.

Claude는 Anthropic이 만든 AI입니다. 이번에 쓸 Claude Code는 유료 플랜(Pro 이상)에서만 쓸 수 있습니다.

1. 브라우저에서 https://claude.ai 를 엽니다.

2. Continue with Google(구글 계정으로 계속)을 누르거나, 이메일을 입력하고 Continue with email을 누릅니다.

   이메일로 했다면 메일함에 온 로그인 링크나 코드로 확인합니다.

3. 이름 입력, 이용약관 동의 화면이 나오면 채우고 넘어갑니다. 휴대폰 인증을 요구하면 번호를 넣고 문자로 온 코드를 입력합니다.

4. 로그인되면 왼쪽 아래 내 이름(또는 이니셜)을 누르고 Upgrade plan(또는 Settings → Billing)으로 갑니다.

5. Pro를 고르고 카드 정보를 넣어 결제합니다. 월 결제는 약 20달러(부가세 별도)이고, 연간 결제는 조금 쌉니다.

1. https://claude.com/download 를 열고 Windows용을 내려받습니다.

   대부분의 PC는 일반(x64) 버전입니다. 서피스처럼 ARM 칩을 쓰는 PC만 ARM64 버전을 받습니다. 모르겠으면 일반 버전을 받으세요.

2. 내려받은 파일(Claude Setup ….exe)을 더블클릭해 설치합니다. "이 앱이 PC를 변경하도록 허용하시겠어요?"가 나오면 예.

3. 설치가 끝나면 Claude 앱이 열립니다. 안 열리면 Windows 키 → "Claude" 검색 → 실행.

4. Log in을 눌러 1단계에서 만든 계정으로 로그인합니다. 브라우저가 열리면 거기서 승인하고 앱으로 돌아옵니다.

5. 앱 왼쪽 위(사이드바 위쪽)에 Chat, Code 같은 탭이 보이면 성공입니다. 아이콘만 보이면 마우스를 올려 이름을 확인하세요.

Claude가 작업할 때 쓰는 도구입니다. 여러분이 직접 쓸 일은 없습니다.

3-1. Git for Windows

1. https://git-scm.com/downloads/win 를 엽니다.

2. 맨 위의 Click here to download를 누르면 설치 파일(Git-…-64-bit.exe)이 내려받아집니다.

3. 파일을 실행하고 "변경 허용" 창에서 예를 누릅니다.

4. 설치 화면이 10번 넘게 이어지는데, 아무것도 바꾸지 말고 계속 Next를 누르고 마지막에 Install을 누릅니다.

5. 끝나면 Finish. (체크된 "Release Notes 보기"는 꺼도 됩니다.)

3-2. Node.js

1. https://nodejs.org/ko/download 를 엽니다.

2. LTS라고 적힌 버전의 Windows 설치 프로그램(.msi)을 내려받습니다. 화면 맨 위 큰 초록 버튼이 보이면 그걸 눌러도 됩니다.

3. 파일을 실행해 Next → 약관 동의 체크 → Next 몇 번 → Install → 예 → Finish.

4. 중간에 "Tools for Native Modules" 체크 상자가 나오면 체크하지 말고 넘어갑니다.

1. 파일 탐색기를 엽니다(Windows + E).

2. 왼쪽에서 문서(Documents)를 누릅니다.

3. 빈 곳을 오른쪽 클릭 → 새로 만들기 → 폴더. 이름을 ship-demo 로 바꿉니다(영어 소문자, 띄어쓰기 없이).

앞으로 Claude가 이 폴더 안에 데모 파일을 전부 만듭니다.

증서 내용, 사진, 로그인 계정이 저장되는 곳입니다.

5-1. 가입

1. https://supabase.com/dashboard/sign-up 를 엽니다.

2. 이메일과 비밀번호를 넣고 Sign Up. 메일함에 온 확인 메일의 Confirm your mail 링크를 누릅니다. (GitHub 계정이 있으면 Continue with GitHub도 됩니다.)

3. 로그인 후 조직(Organization)을 만들라는 화면이 나오면: 이름은 아무거나(예: 내 이름), Type은 Personal, Plan은 Free - $0/month → Create organization.

5-2. 프로젝트 만들기

1. New project(또는 Create a new project)를 누릅니다.

2. Project name: demo-hub

3. Database Password: Generate a password를 눌러 자동으로 만듭니다. 이 비밀번호는 이번 작업에 쓰지 않지만, 메모장에 적어 두면 나중에 편합니다.

4. Region: Northeast Asia (Seoul)

5. 나머지는 그대로 두고 Create new project. 1~2분 기다리면 프로젝트 화면이 나옵니다.

6. 이때 브라우저 주소창은 supabase.com/dashboard/project/abcdefghijklmnopqrst 처럼 생겼습니다. 굵게 표시한 20자 영문이 프로젝트 ref입니다. 8단계에서 씁니다.

5-3. 개인 접속 토큰 만들기

Claude가 여러분 대신 Supabase를 조작할 때 쓰는 열쇠입니다.

1. https://supabase.com/dashboard/account/tokens 를 엽니다. (메뉴로 가려면: 오른쪽 위 내 프로필 아이콘 → Account preferences → Access Tokens)

2. Generate new token을 누르고 이름에 claude-demo → Generate token.

3. sbp_로 시작하는 긴 토큰이 딱 한 번만 보입니다. 바로 다음 칸의 방법으로 보관하세요.

6-1. 가입

1. https://dash.cloudflare.com/sign-up 를 엽니다.

2. 이메일과 비밀번호를 넣고 Sign up. 메일함의 확인 메일에서 Verify email을 누릅니다.

3. 로그인 후 "무엇을 하려고 하나요?" 같은 안내 화면이나 도메인 연결 화면이 나오면 Skip 하거나 왼쪽 메뉴의 Account home으로 갑니다. 도메인(주소) 구매는 필요 없습니다.

6-2. API 토큰 만들기

1. https://dash.cloudflare.com/profile/api-tokens 를 엽니다. (메뉴로 가려면: 오른쪽 위 사람 아이콘 → Profile → 왼쪽 API Tokens)

2. Create Token을 누릅니다.

3. 템플릿 목록에서 Edit Cloudflare Workers 줄의 Use template을 누릅니다. (웹사이트 배포 권한이 들어 있는 템플릿입니다.)

4. Account Resources는 Include / 내 계정(이메일 이름의 Account)으로, Zone Resources는 Include / All zones로 둡니다. 나머지는 그대로.

5. 맨 아래 Continue to summary → Create Token.

6. 나온 토큰을 Copy해서 아까 그 메모장에 "cloudflare 토큰"이라는 제목과 함께 붙여 넣습니다. 이 토큰도 한 번만 보입니다.

6-3. 계정 ID 복사

1. https://dash.cloudflare.com 첫 화면(Account home)으로 갑니다.

2. 계정 이름 옆의 ⋯(점 세 개) → Copy account ID. 또는 왼쪽 메뉴 Compute (Workers)/Workers & Pages 화면 오른쪽에 있는 Account ID를 복사합니다.

3. 32자 영문·숫자입니다. 메모장에 "cloudflare 계정 ID"와 함께 붙여 넣습니다.

이제 메모장에 토큰 2개, 계정 ID 1개가 있고, 프로젝트 ref는 5단계의 주소창에서 볼 수 있으면 준비 끝입니다.

1. Claude 앱에서 Code 탭을 누릅니다. 업그레이드하라는 창이 나오면 1단계 구독이 끝나지 않은 것입니다.

2. 처음이면 추가 구성요소 설치나 Git 설치를 물어볼 수 있습니다. 안내대로 Install/Continue를 누르세요.

3. 입력창 바로 아래 줄에 작은 버튼들이 있습니다. 맨 왼쪽(환경 선택)을 눌러 Local 그룹의 맨 위 항목을 고릅니다. Cloud는 고르지 마세요. 내 PC에서 작업해야 합니다.

4. 그 옆 폴더 버튼 → Open folder… → 4단계에서 만든 문서 → ship-demo 폴더를 고르고 폴더 선택.

5. 같은 줄의 권한 모드 버튼을 눌러 Accept edits를 고릅니다. 파일 만들기는 자동으로 하고, 명령을 실행할 때만 여러분께 물어보는 모드입니다. (Auto가 보이면 그걸 골라도 됩니다. 묻는 횟수가 줄어듭니다.)

6. 모델 선택 버튼이 있으면 기본값 그대로 두세요.

승인 창이 뜨면 이렇게

작업 중에 Claude가 "이 명령을 실행해도 될까요?"라고 물으며 명령 내용과 버튼을 보여 줍니다. 수십 번 나올 수 있고 정상입니다.

1. 아래 상자의 작업지시서 전체 복사를 누릅니다.

2. Claude Code 입력창을 클릭하고 Ctrl + V → Enter.

3. Claude가 계획을 설명하고 작업을 시작합니다. 아래 "중간에 Claude가 부탁할 일"을 참고해 응답하세요.

중간에 Claude가 부탁할 일

미리보기 확인했어. 프로덕션 배포 승인할게.

작업이 멈췄을 때 보낼 말

작업지시서 기준으로 지금까지 어디까지 했는지 확인하고, 다음 단계부터 이어서 진행해 줘.

계속해 줘.

발급하는 쪽을 기기 A, 조회하는 쪽을 기기 B라고 부릅니다. 주소는 Claude가 알려 준 https://내별명-ship-ecert.pages.dev입니다.

1. 기기 B, 로그인 없이: 검역증 조회 → 선박명 HANBADA STAR, 국적 대한민국, IMO 9234563 → "유효한 증서"가 나와야 합니다. 사진 위 글자가 움직이고 시각이 초 단위로 바뀌는지도 봅니다.

2. 기기 B: 위변조 확인 → 데모 칩 QC-2026-000002 → "위변조 의심 증서"(전자서명 불일치)가 나와야 합니다. 유효기간을 몰래 늘린 가짜 예시입니다.

3. 기기 A: 검역관 업무 → officer01로 로그인 → 선박명 아무 영어 이름, 국적 아무거나, IMO 9234563, 항구 선택 → 카메라로 촬영으로 아무 물건이나 찍기 → 발급하기 → "유효한 증서"와 QR 코드가 보이면 성공.

4. 기기 B: 3번에서 넣은 선박명·국적·IMO로 조회 → "유효한 증서". 그리고 기기 A 화면의 QR을 기기 B의 기본 카메라 앱으로 찍기 → 위변조 확인 화면이 바로 열리면 성공.

5. 기기 A: 로그아웃 → admin으로 로그인 → 전체 발급 내역에서 3번 증서의 취소 → 취소 확정 → 기기 B에서 다시 조회하면 "취소된 증서".

6. 기기 A(admin): 화면 아래 데모 초기화 → 초기화 확정. 10초쯤 뒤 데모 증서 3건만 남습니다.

하나라도 다르게 나오면 그 화면을 캡처해서 Claude Code 창에 붙여 넣고 "9단계 ○번이 이렇게 나와"라고 보내세요.

• 시연 전: admin으로 로그인해 데모 초기화를 하면 처음 상태가 됩니다.
• 7일 규칙: Supabase 무료 프로젝트는 7일 동안 아무도 쓰지 않으면 잠깁니다(일시정지). 잠기면 데모 화면에 "데모 서버에 연결할 수 없습니다"가 나옵니다. Supabase 대시보드에서 프로젝트를 열고 Restore project(또는 Resume)를 누르면 몇 분 뒤 돌아옵니다. 시연 전날 한 번 접속해 두면 안전합니다.
• 고치고 싶을 때: Claude Code에서 ship-demo 폴더를 열고 바꾸고 싶은 점을 말로 설명하세요. 예: "발급 화면에 '비고' 입력칸을 추가해 줘. 미리보기로 먼저 보여 줘."
• 데이터는 모두 가상입니다. 실제 선박, 실제 사람 이름, 실제 기관 로고를 넣지 마세요.

이 폴더의 데모가 지금도 잘 동작하는지 점검해 줘. 사이트 주소, 데모 서버 연결, 데모 계정 로그인을 확인하고 결과를 쉽게 알려 줘.

1. Claude Code에서 ship-demo 폴더를 열고 아래 문장을 보냅니다. 서버에 올라간 것들을 Claude가 순서대로 지웁니다.

   이 데모를 폐기하려고 해. Cloudflare Pages 사이트, Edge Function과 시크릿, Storage 사진, 데모 계정, ship_ecert 스키마를 순서대로 지워 줘. 지우기 전에 목록을 먼저 보여 주고 내 확인을 받아.

   복사

2. Supabase 토큰 화면(5-3)과 Cloudflare 토큰 화면(6-2)에서 만든 토큰을 Delete/Revoke로 지웁니다.

3. Claude 구독을 더 쓰지 않으면 claude.ai → 내 이름 → Settings → Billing에서 취소합니다.