코피야

조이의 AI 작업 매뉴얼
← 이전
💻 HOW

웹앱 만들기

영어앱, 여행북, 모임장부처럼 Cloudflare Pages에 올려 쓰는 웹앱 공통 순서.

1만들고 싶은 웹앱 설명
왜 이 단계?
처음부터 기술을 정하기보다 사용 목적과 화면부터 잡아요.
  • 누가 쓰는지
  • 모바일/PC
  • 핵심 기능 3~5개
  • 저장/공유가 필요한지
실제로 이렇게 하면 돼
  1. 코피에게 만들고 싶은 웹앱을 한 문장으로 말한다.
  2. 누가 쓰는지, 주로 모바일인지 PC인지 적는다.
  3. 꼭 필요한 기능을 3~5개만 적는다.
  4. 저장이나 공유가 필요하면 처음부터 말한다.
  5. 모르는 부분은 ‘추천해줘’라고 요청한다.
코피/Claude에게 이렇게 말하기
웹앱을 만들고 싶어. [목적] - [사용자] - [주로 사용하는 기기] 모바일 / PC [꼭 필요한 기능] - - - 먼저 화면 구성과 작업 순서를 제안해줘.
2디자인/화면 확정
왜 이 단계?
조이는 디자인을 먼저 봐야 기능을 채우기 쉬운 편이라 이 단계가 중요해요.
  • 홈 화면부터 보기
  • 핵심 사용 화면 확인
  • 모바일 기준 확인
실제로 이렇게 하면 돼
  1. 코피에게 핵심 화면을 HTML 목업으로 먼저 만들어 달라고 한다.
  2. 홈 화면과 가장 많이 쓰는 화면부터 확인한다.
  3. 폰에서 한 화면에 보이는지 확인한다.
  4. 디자인이 마음에 들 때까지 기능 연결 전에 수정한다.
  5. 최종 디자인이 정해지면 실제 개발로 넘어간다.
코피/Claude에게 이렇게 말하기
이 웹앱의 핵심 화면을 HTML 목업으로 먼저 보여줘. 실제 저장 기능은 나중에 붙이고 디자인과 사용 흐름부터 확인하고 싶어. 모바일 우선으로 만들어줘.
3Cloudflare에 올릴 파일 받기
왜 이 단계?
GitHub 없이도 Direct Upload로 배포할 수 있게 파일 구조를 단순하게 받아요.
  • index.html 포함 확인
  • 필요한 CSS/JS 포함
  • ZIP 또는 폴더 전체 요청
  • Direct Upload 기준
실제로 이렇게 하면 돼
  1. ‘Cloudflare Pages Direct Upload용 전체 파일’을 요청한다.
  2. index.html이 있는지 확인한다.
  3. CSS/JS가 따로 있으면 파일이 모두 포함됐는지 확인한다.
  4. ZIP을 받으면 압축을 풀어 내부 파일을 확인한다.
  5. 홈 화면 아이콘이 필요하면 manifest/apple-touch-icon도 같이 요청한다.
코피/Claude에게 이렇게 말하기
이제 실제로 사용할 수 있게 만들어줘. GitHub은 사용하지 않고 Cloudflare Pages Direct Upload로 올릴 거야. [요청] - 배포 가능한 전체 파일 - index.html 포함 - 필요한 CSS/JS 포함 - 가능하면 ZIP 제공 - 업로드 방법도 짧게 설명
4Cloudflare Pages Direct Upload
왜 이 단계?
배포 주소가 생기면 휴대폰에서도 바로 열 수 있어요.
  • Workers & Pages
  • Pages / Direct Upload
  • 파일 전체 업로드
  • 배포 주소 확인
  • 아이폰 Safari 홈 화면 추가
실제로 이렇게 하면 돼
  1. Cloudflare Dashboard에 로그인한다.
  2. Workers & Pages → Pages → Direct Upload로 들어간다.
  3. 새 프로젝트 이름을 정한다.
  4. ZIP을 풀고 폴더 안 파일 전체를 업로드한다.
  5. 배포 버튼을 누른 뒤 pages.dev 주소를 연다.
  6. 아이폰 Safari에서 열고 공유 → 홈 화면에 추가를 누른다.
코피/Claude에게 이렇게 말하기
Cloudflare Pages Direct Upload로 올릴 거야. ZIP을 풀었을 때 어떤 파일을 올려야 하는지 정확히 알려줘. 배포 후 아이폰 홈 화면에 추가하는 방법도 알려줘.
5사용하면서 수정
왜 이 단계?
실제 써보면 디자인보다 저장/버튼/화면 이동 문제가 더 잘 보여요.
  • 문제 화면 지정
  • 정상 동작/현재 동작 비교
  • 전체 재작성 금지
  • 수정 파일만 요청
실제로 이렇게 하면 돼
  1. 실제로 앱을 며칠 써본다.
  2. 불편한 화면이나 오류를 메모한다.
  3. 수정할 때 현재 파일을 코피에게 같이 준다.
  4. ‘추측해서 새로 만들지 말고 현재 구조 먼저 확인’이라고 적는다.
  5. 수정된 파일만 받아 기존 Cloudflare 프로젝트에 다시 업로드한다.
코피/Claude에게 이렇게 말하기
기존 웹앱 파일을 기준으로 수정해줘. [정상 동작] - [현재 문제] - [수정 범위] - 전체를 새로 만들지 말고 필요한 파일만 수정해줘. 기존 저장 데이터와 다른 화면은 건드리지 말아줘.
조이 작업 팁
웹앱 수정 때는 기존 파일을 꼭 같이 주고 ‘추측해서 새로 만들지 말고 현재 구조 먼저 확인’이라고 적는 게 안전해.
예전에 어떻게 했는지 헷갈릴 때 이 순서대로 따라가면 돼.