오늘의 진행
체크 0 / 0
서해고 학교문제 해결 해커톤 · 1회차

우리 학교 문제,
우리가 해결한다

3주 동안 3인 1조로, 진짜 쓸 수 있는 앱을 만듭니다. 코딩을 몰라도 돼요. AI한테 일을 시키는 법만 알면 됩니다. 이 페이지를 위에서 아래로 따라가면 오늘 수업이 끝납니다.

1회차 · 10월 27일(화) 6–7교시 50분 + 쉬는 시간 + 50분 컴퓨터실 3인 1조 · 구독 1개를 조가 함께 사용
이 페이지 사용법 — 단계가 하나 끝날 때마다 □ 체크박스를 눌러 표시하세요. 맨 위 "오늘의 진행" 막대가 차오르면 수업이 끝나갑니다. 체크는 이 화면에서만 표시되고, 새로고침하면 지워지니 한 번에 끝까지 따라가세요.
MISSION

오늘 끝나면 이 3개가 돼 있어야 해요

1회차의 목표는 완성이 아니에요. 2, 3회차에 달릴 수 있는 출발선에 서는 겁니다.

01

우리 조 주제 한 문장누가, 언제, 무엇 때문에 불편한지 + 무엇으로 해결할지

02

Codex 앱 준비 완료앱 설치하고, 조별 계정으로 로그인하고, 조 폴더까지 열면 OK

03

첫 화면 띄우기Codex 앱이 만든 화면을 브라우저에서 직접 눈으로 확인

ROADMAP

3주 전체 그림

매주 화요일 6–7교시, 총 3번 만납니다. 마지막 회차에는 전 조가 발표해요. 오늘 하는 일이 3주 뒤 발표와 어떻게 이어지는지 보고 가세요.

1회차 · 10월 27일(화) — 오늘

출발선에 서기

팀·역할 정하기, 주제 한 문장 확정, Codex 앱 준비, 첫 화면 띄우기

끝나면 남는 것: 주제 한 문장 + 첫 화면

2회차 · 11월 3일(화)

본격적으로 만들기

핵심 화면 완성, 기능 붙이기, 서로 써 보고 고치기. 오늘 정한 폴더를 그대로 이어서 엽니다

끝나면 남는 것: 동작하는 핵심 기능 1개

3회차 · 11월 10일(화)

다듬고, 발표하기

마무리 점검, 발표 준비(문제 → 해결 → 시연), 조별 발표와 서로 평가

끝나면 남는 것: 완성작 + 발표

TIMELINE

오늘 100분, 이렇게 흘러갑니다

6교시와 7교시 사이 쉬는 시간을 포함해 짜여 있어요. 각 구간마다 "끝났다"는 손에 잡히는 결과가 있습니다.

6교시 — 전반전

0 – 12분

눈으로 보기

선생님이 Codex 앱으로 만든 앱을 직접 시연합니다. "3주 뒤엔 너희가 이 자리에서 발표한다"는 것만 기억하면 돼요.

12 – 32분

팀 & 주제 확정

역할을 나누고, 주제를 한 문장으로 씁니다. 선생님 승인을 받아야 다음으로 넘어갈 수 있어요. 범위 큰 주제는 여기서 잘립니다. 아래 팀 역할과 주제 정하기를 보면서 진행하세요.

32 – 50분

준비 시작 — 폴더 · Codex 앱 설치

아래 준비하기 섹션의 0~1단계를 합니다. 설치에서 막히면 바로 손들기. 혼자 5분 넘게 끙끙대지 않기.

쉬는 시간 10분 — 컴퓨터는 켜 둔 채로 두세요. 설치가 진행 중이면 창을 닫지 말고 그대로. 자리에서 일어나서 몸 좀 풀고 오세요.

7교시 — 후반전

0 – 15분

준비 마무리 — 로그인 · 조 폴더 열기

준비하기 섹션의 2~3단계. 조별 구독 계정으로 Codex 앱에 로그인하고, 앱에서 조 폴더를 엽니다.

15 – 28분

라이브 코딩 관전

선생님이 Codex 앱과 실시간으로 앱을 만듭니다. 프롬프트를 어떻게 쓰는지, 문제가 생기면 어떻게 하는지 눈여겨보세요. 곧 우리 차례예요.

28 – 45분

첫 실행

이제 우리 차례. 아래 첫 프롬프트를 복사해 Codex 앱에 넣고, 브라우저에 첫 화면 띄우기. 뜨면 오늘 미션 클리어.

45 – 50분

제출 & 정리

맨 아래 제출 섹션의 체크리스트 3개를 확인하고 선생님께 보여주세요. 다음 주 할 일까지 정하면 끝.

TEAM

3인 1조, 역할 나누기

구독은 조당 1개, 컴퓨터 앞에서 세 명이 한 화면을 보고 같이 움직이는 팀이 제일 빨라요.

기획자무엇을 만들지 정하는 사람

화면을 스케치하고 기능 목록을 씁니다. "이 버튼을 누르면 뭐가 나와야 해"를 말로 설명할 수 있어야 해요.

프롬프터Codex 앱에 지시하는 사람

키보드 앞에 앉아 프롬프트를 쓰고, 나온 결과를 훑어봅니다. 코드를 다 이해할 필요는 없어요. 바라는 것과 다른지만 보면 돼요.

테스터써보고 부수는 사람

만들어진 걸 직접 써보고 버그를 찾습니다. "이거 안 돼"를 가장 먼저 말하는 사람이 팀의 보물이에요.

구독 1개를 3명이 나눠 쓰는 법

  • 로그인은 한 번만. 프롬프터 자리의 컴퓨터에 조별 계정으로 로그인하면, 나머지 두 사람은 같은 화면을 보며 함께 일합니다.
  • 동시에 여러 컴퓨터에서 같은 계정으로 접속하지 않기. 충돌이 나면 작업이 꼬여요.
  • 프롬프터는 매 회차 교대. 오늘 프롬프터가 다음 주에도 키보드를 잡으면 안 돼요. 세 사람 다 Codex 앱을 만져봐야 합니다.
  • 계정 비밀번호는 조 안에서만. 다른 조, 친구에게 알려주지 않기. 수업이 끝나면 선생님 안내에 따라 로그아웃하세요.
TIP — 역할은 고정 아니에요. 오늘 정한 역할로 시작하되, 2회차부터는 돌아가면서 해보세요. 프롬프터가 제일 배우는 게 많다는 건 안 비밀.

여기까지 체크

TOPIC

주제, 이렇게 고르세요

주제는 "우리 학교 문제 해결"입니다. 좋은 주제는 거창하지 않아요. 매일 겪는 작은 불편함이 제일 좋은 재료입니다.

1

쓰는 사람이 분명하다. "우리 반", "점심시간에 매점 가는 애들"처럼 얼굴이 떠올라야 해요.

2

3주 안에 화면으로 만들 수 있다. "전교생 실시간 채팅" 같은 건 잘라요. 한 화면, 한 기능부터.

3

학교가 조금이라도 나아진다. 발표 때 "그래서 뭐가 좋아지는데요?"에 답할 수 있어야 해요.

요일별 급식 위젯분실물 게시판자습실 자리 현황판동아리 모집 페이지수행평가 D-day도서관 신간 알림교실 청소 당번 알림체육관·운동장 사용 신청 현황
주제 한 문장 템플릿 — 빈칸을 채워보세요"___(누가)가 ___할 때 겪는 ___(불편함)을, ___(기능)으로 해결한다"

이런 주제는 골라도 안 돼요 — 처음부터 제외

  • 실명·학번·연락처를 모으는 앱 — 개인정보를 수집하는 기능은 이 해커톤에서 만들지 않습니다.
  • 로그인·회원가입이 필요한 앱 — 계정 기능은 3주 안에 완성할 수 없고, 개인정보 문제도 생겨요.
  • 실시간 채팅·실시간 대결 — 서버가 필요한 기능이라 지금 만들 수 없습니다.
  • 결제·돈이 오가는 기능 — 실제 돈이 움직이는 건 어떤 경우에도 안 돼요.
  • 친구를 평가·순위 매기는 앱 — 인기 투표, 외모·성격 평가처럼 누군가 상처받을 수 있는 주제는 제외합니다.
  • 다른 학교·상업 서비스와 똑같은 앱 — 우리 학교의 문제를 푸는 게 목표예요.

여기까지 체크

SETUP

준비하기 — 앱 하나로 끝

준비할 도구는 Codex 앱 하나뿐이에요. 어려운 설치 명령도, 검은 명령 창도 없습니다. 0 → 1 → 2 → 3 순서 그대로 하고, 단계마다 "확인 방법"으로 성공했는지 보고 넘어가세요.

시작 전에 — 프로젝트 폴더 규칙 (다음 주에도 계속 씁니다)

만드는 파일은 전부 이 폴더 안에만 저장해요. 그래야 다음 주에 와서 그대로 이어서 열 수 있습니다.

  • 위치: 문서(Documents) 폴더 안에 hackathon 폴더를 만들고, 그 안에 조 폴더를 만듭니다.
  • 조 폴더 이름: team{조 번호}-{영문 주제} — 예: 3조 급식 앱이면 team3-lunch
  • 폴더 이름에는 영문 소문자, 숫자, 하이픈(-)만. 한글, 띄어쓰기, 특수문자는 파일을 열 때 오류가 날 수 있어요.
  • 파일을 바탕화면이나 다운로드 폴더에 흩뿌리지 않기. 매주 같은 폴더를 여는 게 규칙입니다.
0

조 폴더 만들기

약 3분
  1. 파일 탐색기를 열고 왼쪽에서 문서를 클릭합니다.
  2. 빈 곳에 마우스 오른쪽 버튼 → 새로 만들기 → 폴더. 이름을 hackathon으로 짓습니다. (이미 있으면 그냥 열기)
  3. hackathon 폴더 안에 들어가서, 같은 방법으로 조 폴더를 만듭니다. 이름은 위 규칙대로 — 예: team3-lunch

확인 방법

파일 탐색기 주소창에 문서 > hackathon > team{번호}-{주제} 순서가 보이면 성공.

1

Codex 앱 설치

약 5분

오늘의 주인공. 말로 시키면 코드를 대신 써주는 AI 앱이에요. 설치할 건 이거 하나뿐입니다.

  1. 선생님이 안내하는 방법으로 Codex 앱 설치 파일을 받습니다. (공식 페이지에서 받거나, 선생님이 나눠주는 설치 파일 사용)
  2. 설치 파일을 실행하고, 안내가 나오면 기본값 그대로 다음 → 설치를 누릅니다.
  3. 설치가 끝나면 바탕화면이나 시작 메뉴에서 Codex 앱을 실행합니다.

확인 방법

Codex 앱이 열리고 로그인 화면이나 시작 화면이 보이면 성공. 앱 아이콘이 안 보이거나 실행이 안 되면 막혔을 때 표 1번을 보세요.

2

조별 구독 계정으로 로그인

약 3분
  1. 앱의 로그인 화면에서 선생님이 나눠준 우리 조 구독 계정으로 로그인합니다. 브라우저 창이 열리면 계정을 선택하고 승인을 누르세요.
  2. 로그인이 끝나면 앱으로 돌아와 대화를 시작할 수 있는 화면이 뜨는지 확인합니다.
  3. 다른 조 계정으로 로그인돼 있으면 바로 로그아웃하고 우리 조 계정으로 다시 로그인하세요.

확인 방법

앱에 메시지를 입력할 수 있는 대화 화면이 보이면 성공. 로그인 창이 안 열리거나 실패하면 막혔을 때 표 2번을 보고, 계정이 맞는지 선생님께 확인하세요.

3

앱에서 조 폴더 열기

약 2분

앱이 우리 조 폴더 안에서 일하게 만드는 단계예요. 이걸 해야 만든 파일이 전부 조 폴더에 쌓입니다.

  1. Codex 앱에서 폴더 열기(프로젝트 열기) 메뉴를 찾습니다.
  2. 0단계에서 만든 조 폴더(team{번호}-{주제})를 선택해 엽니다.
  3. 앱 화면에 표시되는 폴더 이름이 우리 조 폴더 이름과 같은지 확인합니다.

확인 방법

앱에 우리 조 폴더 이름이 표시되고 대화 화면이 준비돼 있으면 성공. 다른 폴더가 열려 있으면 폴더 열기를 다시 해서 조 폴더를 선택하세요.

설치가 막히면? — 학교 PC는 관리자 권한이 막혀 있을 수 있어요. 권한을 요구하는 창이 뜨면 혼자 우회하려 하지 말고 바로 손들기. 선생님과 함께 해결합니다. 기다리는 동안 옆 조 준비를 도와줘도 좋아요.

준비 체크 — 네 개 다 체크돼야 준비 완료

PROMPT

첫 프롬프트 — 그대로 복사해서 쓰세요

Codex는 눈치가 없어요. 구체적으로 말할수록 결과가 좋아집니다. 첫 프롬프트는 고민하지 말고 아래 완성본을 쓰세요.

✕ 나쁜 예

"급식 앱 만들어줘"

○ 좋은 예

"우리 학교 급식 메뉴를 요일별로 보여주는 한 페이지 웹앱을 만들어줘. 월~금 탭이 있고 오늘 요일은 자동으로 선택돼. 파란색 테마, 큰 글씨로."

프롬프트 공식 — 두 번째 프롬프트부터는 이 순서로

  1. 누가누가 쓰는지 — "고등학생이", "우리 반이"
  2. 뭘무엇을 하는지 — "요일별 급식을 본다"
  3. 어떻게어떻게 보이는지 — "탭 형태, 큰 글씨, 파란 테마"
  4. 하나씩한 번에 하나씩 시키기 — "다 만들어줘" 금지, "첫 화면 먼저"

오늘의 첫 프롬프트 — [ ] 부분만 우리 조 내용으로 바꿔서 복사

우리는 고등학교 1학년이고, 우리 학교의 문제를 해결하는 웹앱을 만들 거야.
주제는 이거야: "[주제 한 문장을 그대로 붙여넣기]"

먼저 첫 화면만 만들어줘.
- 제목과 핵심 기능이 한눈에 보이는 한 페이지로 만들어줘.
- [핵심 기능 1개]를 실제로 눌러볼 수 있게 해줘.
- 실제 개인정보는 쓰지 말고, 예시 데이터로 채워줘.
- 글씨는 크게, 버튼은 누르기 쉽게 만들어줘.
- 다 만들면 어떤 파일이 생겼는지 알려줘.

실행한 다음에는? Codex 앱이 파일을 다 만들면, 파일 탐색기에서 조 폴더를 열고 index.html 파일을 더블클릭하세요. 브라우저에 우리 조 첫 화면이 뜨면 성공입니다. 하얗게만 나오거나 깨지면, 화면에 보이는 내용을 그대로 적어서 Codex 앱에게 "이거 고쳐줘"와 함께 알려주세요.

여기까지 체크

HELP

막혔을 때 — 증상별 해결 표

준비하다 막히는 건 정상이에요. 아래 표에서 증상이 같은 줄을 찾아 순서대로 해보고, 그래도 안 되면 5분 룰 — 손들기.

증상왜 그런지이렇게 해보세요
Codex 앱 설치가 안 되거나, 관리자 권한을 요구하는 창이 뜸학교 PC의 관리자 권한 제한혼자 우회하지 말고 바로 선생님 호출. 기다리는 동안 옆 조를 도와주세요
로그인 창이 안 열리거나 로그인 실패계정 입력 실수, 또는 다른 조 계정과 섞인 경우선생님께 우리 조 계정이 맞는지 재확인. 남의 계정으로 로그인돼 있으면 로그아웃하고 다시 로그인
앱은 열리는데 대화 화면이 안 보임로그인이 덜 끝났거나 앱이 멈춘 경우앱을 완전히 닫았다가 다시 실행. 그래도 안 되면 로그인이 끝났는지부터 확인
앱에 다른 폴더가 열려 있음폴더 열기에서 잘못 선택한 경우앱의 폴더 열기로 들어가 우리 조 폴더(team{번호}-{주제})를 다시 선택
Codex 앱이 만든 파일이 어디 있는지 모르겠음조 폴더 밖에서 작업했거나 폴더를 잘못 본 경우파일 탐색기에서 문서 > hackathon > 조 폴더를 열기. 없으면 앱에서 조 폴더를 열고 다시 만들어 달라고 하기
index.html을 열었는데 화면이 하얗거나 깨짐만든 화면에 문제가 있는 경우 — 고장이 아니라 흔한 일어떻게 깨지는지 그대로 적어서 Codex 앱에게 "이거 고쳐줘"와 함께 알려주기
뭘 해야 할지 모르겠음다음 단계 안내를 놓친 경우이 페이지에서 마지막으로 체크한 항목의 다음 단계부터 다시 읽기. 5분 넘으면 손들기
RULES

절대 규칙 4개

이것만은 어기면 안 돼요. 나머지는 다 해봐도 됩니다.

1

개인정보 입력 금지

실명, 학번, 반 번호, 사진, 연락처 — 어떤 개인정보도 Codex 앱에 넣지 않기. 예시 데이터는 전부 가명으로. 친구 이름도 안 돼요.

2

계정은 조 안에서만

조별 구독 계정은 우리 조 작업에만 씁니다. 비밀번호를 다른 조·친구에게 알려주지 않고, 수업과 상관없는 용도로 쓰지 않기.

3

문제가 생기면 그대로 알려주기

화면이 하얗게 나오거나 앱이 이상하게 움직이면 고장 난 게 아니에요. 어떻게 보이는지 그대로 적어서 Codex 앱에게 알려주세요. "이거 고쳐줘" 한 마디면 됩니다.

4

5분 룰

혼자 5분 넘게 막히면 손들기. 막힌 걸 빨리 말하는 게 팀을 위하는 일이에요. 5분 끙끙대는 것보다 10초 만에 묻는 게 훨씬 빠릅니다.

SUBMIT

수업 끝 — 제출할 것 3가지

7교시 마지막 5분. 아래 3개를 체크하고 선생님 확인을 받으면 1회차 끝입니다.

제출 체크

2회차(11월 3일)까지의 미션 — 핵심 화면 1개 완성 준비

  • 기획자: 핵심 화면 스케치 1장 그려오기 (손그림 OK, 사진 찍어와도 됨)
  • 프롬프터: 다음 주에 쓸 프롬프트 3개 미리 써오기
  • 테스터: "이렇게 써볼 거야" 테스트 시나리오 3개 적어오기
  • 2회차 시작하면 Codex 앱에서 같은 조 폴더부터 열기 — 새 폴더 만들지 않기