바이브코딩을 활용한 업무역량강화 연수

오늘 유일하게 사람이 직접 판단해야 하는 단계입니다. 계획서를 펼쳐 놓고, 무엇을 덜어낼지 직접 짚어 봅니다.

• 계획서를 열어 메모장에 통째로 복사합니다 (한글·워드는 Ctrl+A → Ctrl+C)
• 아래 기준에 따라 덜어낼 내용을 지웁니다
• 남은 내용을 소리 내어 읽어 보고, 주민이 바로 이해하기 어려운 문장에 표시해 둡니다
• 확정되지 않은 숫자·일정에는 ※ 표시를 남겨, 다음 단계에서 AI가 확정된 것처럼 쓰지 않도록 합니다

공문 말투를 주민이 알아듣는 말로 바꾸고, 주민이 궁금해하는 순서대로 항목을 재배치하는 단계입니다.

아래는 우리 부서 사업계획서에서 대외 공개가 가능한 부분만 추린 내용이야.
이걸 주민이 읽을 사업 안내문으로 정리해줘.

1. 아래 순서로 항목을 나눠줘
   한 줄 요약(30자 이내) / 누가 신청하나 / 무엇을 지원받나 /
   언제까지 어떻게 신청하나 / 무엇을 내야 하나 / 어떻게 뽑나 / 문의처
2. 공문 말투를 주민이 알아듣는 말로 바꿔줘 (예: '~하고자 함' → '~합니다')
3. 한 문장에 한 가지 정보만 담아줘
4. 계획서에 없는 내용은 절대 지어내지 말고, 빠진 항목은 '계획서에 없음'이라고 적어줘
5. ※ 표시가 붙은 것은 미확정이니 그대로 두고 '확정 후 안내 예정'이라고 써줘

--- 계획서 내용 ---
(여기에 실습 1에서 정리한 내용을 붙여넣기)

• 결과가 나오면 반드시 원문과 대조합니다. ‘계획서에 없음’으로 표시된 항목은 담당자가 직접 채우거나 페이지에서 제외합니다
• 말투가 어색하면 “더 쉬운 말로”, “문장을 더 짧게”라고 다시 지시합니다

• postimages.org 로그인 후 ‘Choose images’로 사업 포스터·홍보물을 업로드합니다
• 업로드 결과 중 ‘Direct link’(https://i.postimg.cc/… 형식)를 복사해 메모장에 보관합니다
• 학습 포인트 — 내 PC의 이미지는 남이 볼 수 없습니다. 인터넷에 올려 ‘주소’를 만들어야 화면에 표시됩니다

AI에게 요구사항을 전달하는 3가지 원칙을 먼저 익힙니다 — 숫자로 말하기 · 한 파일로 묶기 · 오류는 통째로 붙여넣기.

위에서 정리한 내용으로 사업 안내 홈페이지를 index.html 파일 하나로 만들어줘.

1. HTML·CSS·JavaScript를 한 파일에 모두 넣을 것
2. 맨 위 큰 제목 : (사업명)
3. 제목 아래 이 포스터 이미지 : (PostImages에서 받은 주소)
4. 그 아래 마감일을 가장 크고 눈에 띄게 : (신청 마감일)
5. 항목 순서는 위에서 정리한 순서 그대로
6. 지원 유형·금액은 표로 만들되, 휴대폰에서 가로로 넘치지 않게 해줘
7. 휴대폰 화면 기준. 본문 18px 이상, 제목 28px 이상, 색은 차분한 남색 계열
8. 맨 아래에 '신청·문의하기' 버튼 1개
9. 내용은 위에서 정리한 것만 쓰고 새로운 문장을 지어내지 마
10. 설명은 빼고 전체 코드만 줘

• 받은 코드를 메모장에 붙여넣고 ‘index.html’로 저장합니다 (파일 형식은 ‘모든 파일’) → 더블클릭하여 확인
• 마음에 들지 않으면 “제목을 더 크게”, “표를 카드 모양으로”처럼 다시 지시합니다

• New project 생성 — 이름 pocheon-apply, 지역 Northeast Asia / Seoul, 비밀번호는 별도 보관
• SQL Editor에서 아래 명령을 붙여넣고 실행하여 접수 테이블을 만듭니다

create table applications (
  id bigint generated always as identity primary key,
  org text,                -- 단체·모임 이름
  name text not null,      -- 신청자 성함
  phone text not null,     -- 연락처
  type text,               -- 신청 유형
  memo text,               -- 문의 내용
  created_at timestamptz default now()
);

alter table applications enable row level security;
create policy "anyone can apply" on applications
  for insert to anon with check (true);

• Settings → API 에서 Project URL과 anon public 키를 복사해 보관합니다

맨 아래 '신청·문의하기' 버튼을 누르면 입력 칸이 열리고 Supabase에 저장되게 해줘.

- CDN 방식 @supabase/supabase-js@2 사용
- Project URL : (Supabase에서 복사한 주소)
- anon key : (Supabase에서 복사한 anon public 키)
- 테이블 이름 : applications / 컬럼 : org, name, phone, type, memo
- type은 (신청 유형 선택지) 중에서 고르게 해줘
- 저장 성공 시 초록색 큰 글씨로 안내, 실패 시 빨간 글씨로 '다시 시도해 주세요' 표시
- 연락처는 숫자만 입력되게 할 것

수정된 전체 코드를 처음부터 끝까지 다시 줘.

• index.html을 폴더(예: notice)에 담아 준비합니다
• Cloudflare → Workers & Pages → Create → Pages → Upload assets 선택
• 프로젝트 이름 입력(영문 소문자·하이픈만) 후 폴더를 끌어다 놓고 Deploy
• 발급된 주소(예: https://pocheon-village.pages.dev)를 휴대폰에서 직접 열어 확인합니다
• Uptime Robot → New monitor → HTTP(s) → 이름과 주소 입력 → 점검 주기 5분, 알림 메일 지정 후 저장