Workshop 01 진행 완료
틈, 화면에서 서비스로
기초 틀을 열고, Codex와 함께 내 서비스에 필요한 기능 하나를 연결해요.
- 일정
- 2026년 10월 26일 (월) 18:00–19:00 (한국 시간)
- 장소
- 서울대학교 관악캠퍼스 56동(자연과학관10) 105호
- 시간
- 60분
- 대상
- 전공 무관 · 코딩 경험 없어도 OK
워크숍에 오지 못했어도 이 페이지만으로 따라 할 수 있어요.
준비물
- 노트북과 충전기
- Codex를 쓸 수 있는 ChatGPT 계정
- 만들고 싶은 서비스 한 문장
- Node.js 20 이상 (서버로 실행할 때만)
시작 전 확인
- 압축 푼 폴더에 starter 폴더가 보인다
- starter/index.html이 브라우저에서 열린다
- Codex에 로그인되어 있다
단계별 미션
단계를 눌러 펼쳐요. 요청문은 복사해서 Codex에 붙여 넣으세요.
1기초 틀 받고 화면 열기
GitHub 저장소에서 Code → Download ZIP을 누르고 압축을 모두 풉니다. starter 폴더 안의 index.html을 브라우저로 엽니다.
예상 결과“이곳에 나의 아이디어를 담아보세요.” 제목과 로그인·지도·날씨·나만의 기능 박스가 보여요. 설치와 API 키는 아직 필요 없어요.
- 박스마다 “아직 연결 전” 표시가 보인다.
- “Codex에 이렇게 요청해보세요”를 펼치면 요청문이 나온다.
막혔을 때
- ZIP 파일 안에서 바로 열면 스타일이 빠질 수 있어요. 압축을 모두 푼 뒤 다시 여세요.
- 글자만 보이면 코드 편집기가 아니라 브라우저로 열었는지 확인하세요.
2Codex에게 내 컴퓨터에서 실행해 달라고 하기
Codex 데스크톱 또는 VS Code에서 압축을 푼 저장소 전체 폴더를 열고, 아래 요청문을 붙여 넣습니다.
이 저장소에서 Workshop 1 기초 틀을 실습하려고 해.
README.md와 starter/README.md를 읽고 starter 화면을 로컬에서 실행해줘.
Node.js가 있는지 먼저 확인하고, 없다면 설치 방법을 안내해줘.
화면을 확인할 주소와 서버를 종료하는 방법도 알려줘.
아직 로그인·지도·날씨 기능을 구현하지는 마.예상 결과Codex가 npm run dev로 서버를 켜고 http://localhost:5173/starter/ 주소를 알려줘요. npm install은 필요 없어요.
- 브라우저에서 http://localhost:5173/starter/ 를 열면 1단계와 같은 화면이 보인다.
- 서버를 끌 때는 서버가 실행 중인 터미널에서 Ctrl+C를 누른다.
막혔을 때
- Windows에서 npm.ps1 실행이 막히면 같은 폴더에서 npm.cmd run dev를 사용하세요.
- “5173이 이미 사용 중”이면 먼저 켜 둔 실습 서버를 Ctrl+C로 끄세요. 모르는 프로그램은 끄지 말고 Codex에 다른 포트를 요청하세요.
- package.json을 찾을 수 없다고 나오면 starter 안이 아니라 README.md가 있는 저장소 폴더를 열었는지 확인하세요.
3작은 변화 하나 만들기
내 서비스의 이름과 소개 문구를 바꿔 달라고 요청합니다. 예시 문장은 내 아이디어로 바꿔도 좋아요.
starter의 사이트 이름을 ‘나의 캠퍼스’로 바꾸고,
소개 문구를 ‘학교생활에 필요한 정보를 한곳에 모으는 서비스’로 바꿔줘.
다른 기능 박스는 그대로 두고, 바뀐 파일과 확인 방법을 짧게 알려줘.예상 결과새로고침하면 사이트 이름과 소개 문구가 바뀌어 있어요.
- 바꾸려던 문구만 바뀌고 다른 박스는 그대로다.
- 브라우저 창을 좁혀도 글자가 잘리지 않는다.
막혔을 때
- 바꿨는데 화면이 그대로면 파일 저장 후 새로고침했는지, 운영진 예제가 아니라 내 localhost 화면을 보고 있는지 확인하세요.
4내 서비스에 필요한 기능 하나 연결하기
로그인·지도·날씨 중 내 서비스에 필요한 것 하나만 고릅니다. 각 기능은 외부 서비스의 계정·키 설정이 필요하므로, Codex가 먼저 준비 항목을 설명하게 하세요.
예상 결과예시 숫자나 가짜 계정이 아니라 실제 서비스의 응답이 화면에 보여요. 처음 받은 기초 틀에는 연결이 없으니, 키와 설정을 마친 뒤에만 결과가 나와요.
- 실제 응답을 받았는지 확인한다 — 날씨는 요청한 지역·날짜·시간, 로그인은 내 계정 이름, 지도는 의도한 위치의 마커.
- 실패했을 때 실패 상태가 보인다.
막혔을 때
- 인증키·비밀번호는 AI 대화, 공개 HTML/JavaScript, GitHub에 넣지 마세요. Codex가 안내한 로컬 설정 파일에 직접 입력합니다.
- 로그인·지도는 지금 접속한 주소가 외부 서비스에 등록한 주소와 같은지 확인하세요.
+내 아이디어로 바꾸기
박스 배치와 역할은 출발점일 뿐이에요. 필요 없는 박스는 지우고, 남길 기능의 역할을 내 서비스에 맞게 바꿔보세요. 한 번에 하나씩 요청해야 문제가 생긴 곳을 찾기 쉬워요.
내 서비스는 [누구]가 [어떤 일]을 하는 웹사이트야.
starter의 [박스 이름]에 [필요한 기능]을 구현해줘.
사용자가 [행동]하면 [결과]가 보이게 해줘.
필요한 계정이나 API 설정이 있으면 먼저 알려줘.
구현한 뒤 내가 직접 동작을 확인하는 방법도 알려줘.?막혔을 때
무엇을 했고 무엇이 보이는지 Codex에 그대로 설명하세요. 비밀번호·API 키는 가려 주세요.
내가 한 일: [어떤 요청과 설정을 했는지]
기대한 결과: [어떤 화면이나 동작을 기대했는지]
실제 결과: [무엇이 보이는지]
오류 문구: [화면이나 터미널의 오류]
원인을 먼저 확인하고, 필요한 부분만 고쳐줘.
다시 확인할 방법도 알려줘.자료
- 기초 틀 받기 (새 창) GitHub → Code → Download ZIP
- 시작 안내 (새 창)
- 기능별 안내 (새 창) 로그인 · 지도 · 날씨
- 운영진 예제 ‘틈’ (새 창) 발표용 예제예요. 열어도 내 프로젝트가 생기지는 않아요. 2026-10-26 기록 기준으로 로그인·지도는 아직 확인 중이에요.
- 발표 슬라이드 (새 창) 발표 자료