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

오늘 유일하게 사람이 직접 판단해야 하는 단계입니다. 계획안은 내부 문서라 그대로 옮기면 안내문이 되지 않습니다. 무엇을 덜어낼지 직접 짚어 봅니다.

• 계획안을 열어 메모장에 통째로 복사합니다 (한글·워드는 Ctrl+A → Ctrl+C)
• 아래 기준에 따라 덜어낼 내용을 지웁니다
• 남은 내용을 읽어 보고, ‘읽는 사람이 이 문장으로 무엇을 하면 되는가’가 분명하지 않은 곳에 표시해 둡니다
• 확정되지 않은 사항에는 ※ 표시를 남겨, 다음 단계에서 AI가 확정된 것처럼 쓰지 않도록 합니다

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

아래는 우리 과 연수 계획안에서 참석자에게 안내할 부분만 추린 내용이야.
이걸 참석 대상자가 읽을 연수 안내문으로 정리해줘.

1. 아래 순서로 항목을 나눠줘
   한 줄 요약(30자 이내) / 누가 듣는 연수인가 / 무엇을 만들게 되나 /
   언제 어디서 하나 / 무엇을 준비해 와야 하나 / 어떻게 진행되나 / 문의처
2. 공문 말투를 읽는 사람의 말로 바꿔줘 (예: '~하고자 함' → '~합니다')
3. 한 문장에 한 가지 정보만 담아줘
4. 계획안에 없는 내용은 절대 지어내지 말고, 빠진 항목은 '계획안에 없음'이라고 적어줘
5. ※ 표시가 붙은 것은 미확정이니 그대로 두고 '확정 후 안내 예정'이라고 써줘
6. 준비물은 참석자가 하나씩 체크할 수 있게 목록으로 만들어줘

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

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

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

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

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

1. HTML·CSS·JavaScript를 한 파일에 모두 넣을 것
2. 맨 위 큰 제목 : 바이브코딩을 활용한 업무역량강화 연수
3. 제목 아래 이 포스터 이미지 : (PostImages에서 받은 주소)
4. 그 아래 일시를 가장 크고 눈에 띄게 : 2026. 9. 7.(월) 10:00 ~ 12:00
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,     -- 연락처
  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, memo
- org는 교육정책팀·교육협력팀·평생교육팀·청소년팀·애지중지팀 중에서
  고르는 펼침목록으로 만들어줘
- 저장 성공 시 초록색 큰 글씨로 안내, 실패 시 빨간 글씨로 '다시 시도해 주세요' 표시
- 연락처는 숫자만 입력받고 010-0000-0000 형태로 자동으로 하이픈을 넣어줘

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

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