코피야

Cloudflare가 웹페이지를 인터넷에 올려주는 역할이라면, Firebase는 앱의 데이터를 인터넷에 저장하고 여러 사용자가 같은 데이터를 보게 해주는 역할이야.

• 로그인/회원 구분이 필요할 때
• 여러 사람이 같은 장부·채팅·여행 데이터를 볼 때
• 폰을 바꿔도 데이터가 남아야 할 때
• 실시간으로 내용이 바뀌어야 할 때

• HTML 목업만 볼 때
• 회사 로컬 대시보드처럼 외부 저장이 금지된 경우
• 내 폰 한 대에서만 쓰고 localStorage로 충분한 경우

1. Firebase Console에서 프로젝트 생성
2. 웹앱 등록
3. Firestore Database 또는 필요한 기능 생성
4. Firebase 설정값(firebaseConfig)을 복사
5. 현재 웹앱 코드에 Firebase SDK/설정 연결
6. 읽기·쓰기 테스트
7. 보안 규칙을 사용 목적에 맞게 설정
8. 배포 후 다른 기기에서 데이터 동기화 확인

내 휴대폰이나 컴퓨터에만 있는 HTML 파일을 pages.dev 주소로 인터넷에서 열 수 있게 해줘. GitHub 없이 Direct Upload로도 사용할 수 있어.

• 웹앱/여행북/장부를 휴대폰에서 주소로 열고 싶을 때
• 다른 사람에게 링크를 공유할 때
• 아이폰 홈 화면에 웹앱을 추가하고 싶을 때

• 회사 보안 PC에서 인터넷 배포가 금지된 프로그램
• Python 로컬 자동화만 필요한 경우

1. 코피/Claude에게 Cloudflare Direct Upload용 파일 요청
2. ZIP 압축 해제
3. Cloudflare Dashboard 로그인
4. Workers & Pages → Pages → Direct Upload
5. 프로젝트 생성 또는 기존 프로젝트 선택
6. 압축 푼 파일 전체 업로드
7. 배포된 pages.dev 주소 열기
8. Safari 공유 → 홈 화면에 추가

코피에서 기획과 화면 방향을 잡은 뒤, 여러 파일을 실제 코드로 구현하거나 기존 프로젝트 파일을 정확히 수정할 때 편해.

• 목업이 확정돼 실제 기능을 만들 때
• 기존 프로젝트 파일 여러 개를 수정할 때
• Python/웹앱 코드의 구체적인 구현이 필요할 때

• 아이디어만 정하는 단계
• HTML 디자인 목업만 빠르게 보고 싶은 단계

1. 코피에서 목적/기능/디자인 확정
2. 현재 프로젝트 파일 준비
3. Claude Code에 파일/폴더를 열기
4. 수정 범위와 절대 변경 금지 항목 전달
5. 코드 수정
6. 실행/빌드 테스트
7. 수정된 파일 목록 확인
8. 실제 환경에서 재검증

무엇을 만들어야 할지 막막하거나, 어떤 기술을 써야 하는지 모르거나, 화면을 먼저 보고 싶을 때 가장 먼저 사용하는 도구야.

• 아이디어를 구체화할 때
• 무엇부터 해야 할지 모를 때
• HTML 목업이 필요할 때
• 보고서 분석/구조가 필요할 때
• Claude Code에 줄 프롬프트를 만들 때

• 이미 기획/목업이 끝나 있고 단순 코드 수정만 바로 하면 되는 경우

1. 만들고 싶은 것을 한 문장으로 말하기
2. 모르는 부분은 ‘모르겠어, 추천해줘’라고 말하기
3. 목적/사용자/핵심 기능 정리
4. HTML 목업 또는 작업 순서 받기
5. 마음에 들 때까지 수정
6. 실제 개발용 프롬프트 받아 Claude Code로 넘기기

HTML은 화면을 보여주는 데 강하고, Python은 수십만 건의 Excel/CSV를 계산·판단·집계하는 데 강해. 회사 대시보드는 둘을 분리하는 게 안정적이야.

• 반복 엑셀 작업을 자동화할 때
• 대용량 데이터를 집계할 때
• 복잡한 규칙 판정이 필요할 때
• HTML 대시보드용 결과 파일을 만들 때

• 정적인 소개 페이지
• 데이터 없는 디자인 목업
• 아주 간단한 소량 계산만 필요한 경우

1. 현재 수작업 업무 순서 정리
2. 입력 파일/컬럼 확인
3. 판단·집계 규칙 정의
4. 작은 샘플로 Python 작성/검증
5. BAT 등 실행 방법 추가
6. 전체 데이터 실행
7. 집계 결과를 HTML과 연결
8. 틀린 사례로 규칙 보정

실제 데이터나 복잡한 기능을 만들기 전에 화면을 빠르게 보고 수정할 수 있어. 조이 작업 방식에서는 디자인 확정용으로 특히 유용해.

• 대시보드 화면을 먼저 볼 때
• 웹앱 디자인을 먼저 확정할 때
• 카드/차트/버튼 배치를 수정할 때

• 데이터 계산만 필요한 Python 작업
• 최종적으로 서버 데이터 저장만 필요한 백엔드 작업

1. 목적/사용자 정리
2. 임의 데이터로 HTML 목업 요청
3. 브라우저에서 화면 확인
4. 디자인/배치 수정
5. 화면 확정
6. Python/Firebase 등 실제 기능 연결

HTML이 화면의 뼈대라면 JavaScript는 버튼을 누르거나, 필터를 바꾸거나, 입력 내용을 저장하는 동작을 담당해.

• 버튼 클릭 동작
• 탭/필터/펼치기
• localStorage 저장
• 간단한 계산/화면 업데이트

• 정적인 문서/소개 화면
• Python에서 모든 계산을 끝내고 결과만 표시하는 단순 HTML

1. HTML 화면 먼저 확정
2. 필요한 동작 목록 작성
3. JavaScript로 동작 추가
4. 새로고침 후 저장 유지 확인
5. 모바일 Safari에서도 테스트
6. 오류가 있으면 해당 동작만 수정

파일 변경 이력을 남기고 여러 버전을 관리하거나, Cloudflare와 연결해 업로드 없이 자동 배포하고 싶을 때 유용해.

• 코드를 장기간 관리할 때
• 변경 이력을 남기고 싶을 때
• Cloudflare 자동 배포가 필요할 때
• PC에서 개발 파일을 체계적으로 관리할 때

• 휴대폰에서 Direct Upload만 하고 싶은 간단한 웹앱
• Git/GitHub 과정이 오히려 복잡한 개인 프로젝트

1. GitHub 저장소 생성
2. 프로젝트 파일 업로드
3. 필요하면 README 작성
4. Cloudflare Pages에서 Git 저장소 연결
5. 빌드 설정 확인
6. push할 때마다 자동 배포 확인

회사/개인 PC에서 Python, HTML, JS 파일을 폴더 단위로 보고 수정하기 편한 코드 편집기야.

• Python 파일을 직접 실행/수정할 때
• HTML/CSS/JS 여러 파일을 함께 볼 때
• 오류 메시지와 파일 구조를 확인할 때

• 휴대폰에서 Cloudflare 업로드만 하는 경우
• 코드를 직접 손대지 않고 AI가 만든 파일만 쓰는 경우

1. VS Code 설치
2. 프로젝트 폴더 열기
3. 파일 구조 확인
4. Python이면 터미널/실행 버튼으로 테스트
5. HTML이면 브라우저에서 열기
6. 오류 문구 복사해 코피/Claude에 전달