Workshop 01
틈, 화면에서 서비스로
로그인 상태를 확인하고 있어요…
1 / 4 단계
기초 틀 받고 화면 열기
GitHub 저장소에서 Code → Download ZIP을 누르고 압축을 모두 풉니다. starter 폴더 안의 index.html을 브라우저로 엽니다.
예상 결과“이곳에 나의 아이디어를 담아보세요.” 제목과 로그인·지도·날씨·나만의 기능 박스가 보여요. 설치와 API 키는 아직 필요 없어요.
확인
- 박스마다 “아직 연결 전” 표시가 보인다.
- “Codex에 이렇게 요청해보세요”를 펼치면 요청문이 나온다.
막혔을 때
- ZIP 파일 안에서 바로 열면 스타일이 빠질 수 있어요. 압축을 모두 푼 뒤 다시 여세요.
- 글자만 보이면 코드 편집기가 아니라 브라우저로 열었는지 확인하세요.
2 / 4 단계
Codex에게 내 컴퓨터에서 실행해 달라고 하기
Codex 데스크톱 또는 VS Code에서 압축을 푼 저장소 전체 폴더를 열고, 아래 요청문을 붙여 넣습니다.
Codex에 붙여 넣을 요청문
이 저장소에서 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 / 4 단계
작은 변화 하나 만들기
내 서비스의 이름과 소개 문구를 바꿔 달라고 요청합니다. 예시 문장은 내 아이디어로 바꿔도 좋아요.
Codex에 붙여 넣을 요청문
starter의 사이트 이름을 ‘나의 캠퍼스’로 바꾸고,
소개 문구를 ‘학교생활에 필요한 정보를 한곳에 모으는 서비스’로 바꿔줘.
다른 기능 박스는 그대로 두고, 바뀐 파일과 확인 방법을 짧게 알려줘.예상 결과새로고침하면 사이트 이름과 소개 문구가 바뀌어 있어요.
확인
- 바꾸려던 문구만 바뀌고 다른 박스는 그대로다.
- 브라우저 창을 좁혀도 글자가 잘리지 않는다.
막혔을 때
- 바꿨는데 화면이 그대로면 파일 저장 후 새로고침했는지, 운영진 예제가 아니라 내 localhost 화면을 보고 있는지 확인하세요.
4 / 4 단계
내 서비스에 필요한 기능 하나 연결하기
로그인·지도·날씨 중 내 서비스에 필요한 것 하나만 고릅니다. 각 기능은 외부 서비스의 계정·키 설정이 필요하므로, Codex가 먼저 준비 항목을 설명하게 하세요.
예상 결과예시 숫자나 가짜 계정이 아니라 실제 서비스의 응답이 화면에 보여요. 처음 받은 기초 틀에는 연결이 없으니, 키와 설정을 마친 뒤에만 결과가 나와요.
확인
- 실제 응답을 받았는지 확인한다 — 날씨는 요청한 지역·날짜·시간, 로그인은 내 계정 이름, 지도는 의도한 위치의 마커.
- 실패했을 때 실패 상태가 보인다.
막혔을 때
- 인증키·비밀번호는 AI 대화, 공개 HTML/JavaScript, GitHub에 넣지 마세요. Codex가 안내한 로컬 설정 파일에 직접 입력합니다.
- 로그인·지도는 지금 접속한 주소가 외부 서비스에 등록한 주소와 같은지 확인하세요.