오늘 끝나면 이 3개가 돼 있어야 해요
1회차의 목표는 완성이 아니에요. 2, 3회차에 달릴 수 있는 출발선에 서는 겁니다.
우리 조 주제 한 문장누가, 언제, 무엇 때문에 불편한지 + 무엇으로 해결할지
Codex 앱 준비 완료앱 설치하고, 조별 계정으로 로그인하고, 조 폴더까지 열면 OK
첫 화면 띄우기Codex 앱이 만든 화면을 브라우저에서 직접 눈으로 확인
3주 전체 그림
매주 화요일 6–7교시, 총 3번 만납니다. 마지막 회차에는 전 조가 발표해요. 오늘 하는 일이 3주 뒤 발표와 어떻게 이어지는지 보고 가세요.
출발선에 서기
팀·역할 정하기, 주제 한 문장 확정, Codex 앱 준비, 첫 화면 띄우기끝나면 남는 것: 주제 한 문장 + 첫 화면
본격적으로 만들기
핵심 화면 완성, 기능 붙이기, 서로 써 보고 고치기. 오늘 정한 폴더를 그대로 이어서 엽니다끝나면 남는 것: 동작하는 핵심 기능 1개
다듬고, 발표하기
마무리 점검, 발표 준비(문제 → 해결 → 시연), 조별 발표와 서로 평가끝나면 남는 것: 완성작 + 발표
오늘 100분, 이렇게 흘러갑니다
6교시와 7교시 사이 쉬는 시간을 포함해 짜여 있어요. 각 구간마다 "끝났다"는 손에 잡히는 결과가 있습니다.
6교시 — 전반전
눈으로 보기
선생님이 Codex 앱으로 만든 앱을 직접 시연합니다. "3주 뒤엔 너희가 이 자리에서 발표한다"는 것만 기억하면 돼요.
팀 & 주제 확정
역할을 나누고, 주제를 한 문장으로 씁니다. 선생님 승인을 받아야 다음으로 넘어갈 수 있어요. 범위 큰 주제는 여기서 잘립니다. 아래 팀 역할과 주제 정하기를 보면서 진행하세요.
준비 시작 — 폴더 · Codex 앱 설치
아래 준비하기 섹션의 0~1단계를 합니다. 설치에서 막히면 바로 손들기. 혼자 5분 넘게 끙끙대지 않기.
7교시 — 후반전
준비 마무리 — 로그인 · 조 폴더 열기
준비하기 섹션의 2~3단계. 조별 구독 계정으로 Codex 앱에 로그인하고, 앱에서 조 폴더를 엽니다.
라이브 코딩 관전
선생님이 Codex 앱과 실시간으로 앱을 만듭니다. 프롬프트를 어떻게 쓰는지, 문제가 생기면 어떻게 하는지 눈여겨보세요. 곧 우리 차례예요.
첫 실행
이제 우리 차례. 아래 첫 프롬프트를 복사해 Codex 앱에 넣고, 브라우저에 첫 화면 띄우기. 뜨면 오늘 미션 클리어.
제출 & 정리
맨 아래 제출 섹션의 체크리스트 3개를 확인하고 선생님께 보여주세요. 다음 주 할 일까지 정하면 끝.
3인 1조, 역할 나누기
구독은 조당 1개, 컴퓨터 앞에서 세 명이 한 화면을 보고 같이 움직이는 팀이 제일 빨라요.
기획자무엇을 만들지 정하는 사람
화면을 스케치하고 기능 목록을 씁니다. "이 버튼을 누르면 뭐가 나와야 해"를 말로 설명할 수 있어야 해요.
프롬프터Codex 앱에 지시하는 사람
키보드 앞에 앉아 프롬프트를 쓰고, 나온 결과를 훑어봅니다. 코드를 다 이해할 필요는 없어요. 바라는 것과 다른지만 보면 돼요.
테스터써보고 부수는 사람
만들어진 걸 직접 써보고 버그를 찾습니다. "이거 안 돼"를 가장 먼저 말하는 사람이 팀의 보물이에요.
여기까지 체크
주제, 이렇게 고르세요
주제는 "우리 학교 문제 해결"입니다. 좋은 주제는 거창하지 않아요. 매일 겪는 작은 불편함이 제일 좋은 재료입니다.
쓰는 사람이 분명하다. "우리 반", "점심시간에 매점 가는 애들"처럼 얼굴이 떠올라야 해요.
3주 안에 화면으로 만들 수 있다. "전교생 실시간 채팅" 같은 건 잘라요. 한 화면, 한 기능부터.
학교가 조금이라도 나아진다. 발표 때 "그래서 뭐가 좋아지는데요?"에 답할 수 있어야 해요.
이런 주제는 골라도 안 돼요 — 처음부터 제외
- 실명·학번·연락처를 모으는 앱 — 개인정보를 수집하는 기능은 이 해커톤에서 만들지 않습니다.
- 로그인·회원가입이 필요한 앱 — 계정 기능은 3주 안에 완성할 수 없고, 개인정보 문제도 생겨요.
- 실시간 채팅·실시간 대결 — 서버가 필요한 기능이라 지금 만들 수 없습니다.
- 결제·돈이 오가는 기능 — 실제 돈이 움직이는 건 어떤 경우에도 안 돼요.
- 친구를 평가·순위 매기는 앱 — 인기 투표, 외모·성격 평가처럼 누군가 상처받을 수 있는 주제는 제외합니다.
- 다른 학교·상업 서비스와 똑같은 앱 — 우리 학교의 문제를 푸는 게 목표예요.
여기까지 체크
준비하기 — 앱 하나로 끝
준비할 도구는 Codex 앱 하나뿐이에요. 어려운 설치 명령도, 검은 명령 창도 없습니다. 0 → 1 → 2 → 3 순서 그대로 하고, 단계마다 "확인 방법"으로 성공했는지 보고 넘어가세요.
시작 전에 — 프로젝트 폴더 규칙 (다음 주에도 계속 씁니다)
만드는 파일은 전부 이 폴더 안에만 저장해요. 그래야 다음 주에 와서 그대로 이어서 열 수 있습니다.
- 위치:
문서(Documents)폴더 안에hackathon폴더를 만들고, 그 안에 조 폴더를 만듭니다. - 조 폴더 이름:
team{조 번호}-{영문 주제}— 예: 3조 급식 앱이면team3-lunch - 폴더 이름에는 영문 소문자, 숫자, 하이픈(-)만. 한글, 띄어쓰기, 특수문자는 파일을 열 때 오류가 날 수 있어요.
- 파일을 바탕화면이나 다운로드 폴더에 흩뿌리지 않기. 매주 같은 폴더를 여는 게 규칙입니다.
조 폴더 만들기
약 3분- 파일 탐색기를 열고 왼쪽에서 문서를 클릭합니다.
- 빈 곳에 마우스 오른쪽 버튼 → 새로 만들기 → 폴더. 이름을 hackathon으로 짓습니다. (이미 있으면 그냥 열기)
- hackathon 폴더 안에 들어가서, 같은 방법으로 조 폴더를 만듭니다. 이름은 위 규칙대로 — 예: team3-lunch
확인 방법
파일 탐색기 주소창에 문서 > hackathon > team{번호}-{주제} 순서가 보이면 성공.
Codex 앱 설치
약 5분오늘의 주인공. 말로 시키면 코드를 대신 써주는 AI 앱이에요. 설치할 건 이거 하나뿐입니다.
- 선생님이 안내하는 방법으로 Codex 앱 설치 파일을 받습니다. (공식 페이지에서 받거나, 선생님이 나눠주는 설치 파일 사용)
- 설치 파일을 실행하고, 안내가 나오면 기본값 그대로 다음 → 설치를 누릅니다.
- 설치가 끝나면 바탕화면이나 시작 메뉴에서 Codex 앱을 실행합니다.
확인 방법
Codex 앱이 열리고 로그인 화면이나 시작 화면이 보이면 성공. 앱 아이콘이 안 보이거나 실행이 안 되면 막혔을 때 표 1번을 보세요.
조별 구독 계정으로 로그인
약 3분- 앱의 로그인 화면에서 선생님이 나눠준 우리 조 구독 계정으로 로그인합니다. 브라우저 창이 열리면 계정을 선택하고 승인을 누르세요.
- 로그인이 끝나면 앱으로 돌아와 대화를 시작할 수 있는 화면이 뜨는지 확인합니다.
- 다른 조 계정으로 로그인돼 있으면 바로 로그아웃하고 우리 조 계정으로 다시 로그인하세요.
확인 방법
앱에 메시지를 입력할 수 있는 대화 화면이 보이면 성공. 로그인 창이 안 열리거나 실패하면 막혔을 때 표 2번을 보고, 계정이 맞는지 선생님께 확인하세요.
앱에서 조 폴더 열기
약 2분앱이 우리 조 폴더 안에서 일하게 만드는 단계예요. 이걸 해야 만든 파일이 전부 조 폴더에 쌓입니다.
- Codex 앱에서 폴더 열기(프로젝트 열기) 메뉴를 찾습니다.
- 0단계에서 만든 조 폴더(team{번호}-{주제})를 선택해 엽니다.
- 앱 화면에 표시되는 폴더 이름이 우리 조 폴더 이름과 같은지 확인합니다.
확인 방법
앱에 우리 조 폴더 이름이 표시되고 대화 화면이 준비돼 있으면 성공. 다른 폴더가 열려 있으면 폴더 열기를 다시 해서 조 폴더를 선택하세요.
준비 체크 — 네 개 다 체크돼야 준비 완료
첫 프롬프트 — 그대로 복사해서 쓰세요
Codex는 눈치가 없어요. 구체적으로 말할수록 결과가 좋아집니다. 첫 프롬프트는 고민하지 말고 아래 완성본을 쓰세요.
✕ 나쁜 예
"급식 앱 만들어줘"
○ 좋은 예
"우리 학교 급식 메뉴를 요일별로 보여주는 한 페이지 웹앱을 만들어줘. 월~금 탭이 있고 오늘 요일은 자동으로 선택돼. 파란색 테마, 큰 글씨로."
프롬프트 공식 — 두 번째 프롬프트부터는 이 순서로
- 누가누가 쓰는지 — "고등학생이", "우리 반이"
- 뭘무엇을 하는지 — "요일별 급식을 본다"
- 어떻게어떻게 보이는지 — "탭 형태, 큰 글씨, 파란 테마"
- 하나씩한 번에 하나씩 시키기 — "다 만들어줘" 금지, "첫 화면 먼저"
오늘의 첫 프롬프트 — [ ] 부분만 우리 조 내용으로 바꿔서 복사
우리는 고등학교 1학년이고, 우리 학교의 문제를 해결하는 웹앱을 만들 거야. 주제는 이거야: "[주제 한 문장을 그대로 붙여넣기]" 먼저 첫 화면만 만들어줘. - 제목과 핵심 기능이 한눈에 보이는 한 페이지로 만들어줘. - [핵심 기능 1개]를 실제로 눌러볼 수 있게 해줘. - 실제 개인정보는 쓰지 말고, 예시 데이터로 채워줘. - 글씨는 크게, 버튼은 누르기 쉽게 만들어줘. - 다 만들면 어떤 파일이 생겼는지 알려줘.
실행한 다음에는? Codex 앱이 파일을 다 만들면, 파일 탐색기에서 조 폴더를 열고 index.html 파일을 더블클릭하세요. 브라우저에 우리 조 첫 화면이 뜨면 성공입니다. 하얗게만 나오거나 깨지면, 화면에 보이는 내용을 그대로 적어서 Codex 앱에게 "이거 고쳐줘"와 함께 알려주세요.
여기까지 체크
막혔을 때 — 증상별 해결 표
준비하다 막히는 건 정상이에요. 아래 표에서 증상이 같은 줄을 찾아 순서대로 해보고, 그래도 안 되면 5분 룰 — 손들기.
| 증상 | 왜 그런지 | 이렇게 해보세요 |
|---|---|---|
| Codex 앱 설치가 안 되거나, 관리자 권한을 요구하는 창이 뜸 | 학교 PC의 관리자 권한 제한 | 혼자 우회하지 말고 바로 선생님 호출. 기다리는 동안 옆 조를 도와주세요 |
| 로그인 창이 안 열리거나 로그인 실패 | 계정 입력 실수, 또는 다른 조 계정과 섞인 경우 | 선생님께 우리 조 계정이 맞는지 재확인. 남의 계정으로 로그인돼 있으면 로그아웃하고 다시 로그인 |
| 앱은 열리는데 대화 화면이 안 보임 | 로그인이 덜 끝났거나 앱이 멈춘 경우 | 앱을 완전히 닫았다가 다시 실행. 그래도 안 되면 로그인이 끝났는지부터 확인 |
| 앱에 다른 폴더가 열려 있음 | 폴더 열기에서 잘못 선택한 경우 | 앱의 폴더 열기로 들어가 우리 조 폴더(team{번호}-{주제})를 다시 선택 |
| Codex 앱이 만든 파일이 어디 있는지 모르겠음 | 조 폴더 밖에서 작업했거나 폴더를 잘못 본 경우 | 파일 탐색기에서 문서 > hackathon > 조 폴더를 열기. 없으면 앱에서 조 폴더를 열고 다시 만들어 달라고 하기 |
| index.html을 열었는데 화면이 하얗거나 깨짐 | 만든 화면에 문제가 있는 경우 — 고장이 아니라 흔한 일 | 어떻게 깨지는지 그대로 적어서 Codex 앱에게 "이거 고쳐줘"와 함께 알려주기 |
| 뭘 해야 할지 모르겠음 | 다음 단계 안내를 놓친 경우 | 이 페이지에서 마지막으로 체크한 항목의 다음 단계부터 다시 읽기. 5분 넘으면 손들기 |
절대 규칙 4개
이것만은 어기면 안 돼요. 나머지는 다 해봐도 됩니다.
개인정보 입력 금지
실명, 학번, 반 번호, 사진, 연락처 — 어떤 개인정보도 Codex 앱에 넣지 않기. 예시 데이터는 전부 가명으로. 친구 이름도 안 돼요.
계정은 조 안에서만
조별 구독 계정은 우리 조 작업에만 씁니다. 비밀번호를 다른 조·친구에게 알려주지 않고, 수업과 상관없는 용도로 쓰지 않기.
문제가 생기면 그대로 알려주기
화면이 하얗게 나오거나 앱이 이상하게 움직이면 고장 난 게 아니에요. 어떻게 보이는지 그대로 적어서 Codex 앱에게 알려주세요. "이거 고쳐줘" 한 마디면 됩니다.
5분 룰
혼자 5분 넘게 막히면 손들기. 막힌 걸 빨리 말하는 게 팀을 위하는 일이에요. 5분 끙끙대는 것보다 10초 만에 묻는 게 훨씬 빠릅니다.
수업 끝 — 제출할 것 3가지
7교시 마지막 5분. 아래 3개를 체크하고 선생님 확인을 받으면 1회차 끝입니다.
제출 체크
2회차(11월 3일)까지의 미션 — 핵심 화면 1개 완성 준비
- 기획자: 핵심 화면 스케치 1장 그려오기 (손그림 OK, 사진 찍어와도 됨)
- 프롬프터: 다음 주에 쓸 프롬프트 3개 미리 써오기
- 테스터: "이렇게 써볼 거야" 테스트 시나리오 3개 적어오기
- 2회차 시작하면 Codex 앱에서 같은 조 폴더부터 열기 — 새 폴더 만들지 않기