5-1 · Codex로 내 첫 웹페이지 만들기
Chat과 Work가 글이나 문서를 대화창 안에서 만들어 준다면, Codex는 내 컴퓨터의 폴더 안에 실제 파일을 만들어요. 그래서 처음엔 조금 겁이 날 수 있어요. 내 컴퓨터를 마음대로 건드리면 어쩌나 싶어서요.
안심하셔도 돼요. Codex는 파일을 만들거나 바꾸기 전에 승인 창을 띄워서 먼저 물어봐요. 그리고 처음부터 빈 연습 폴더 하나만 열어 주면, Codex가 손댈 수 있는 곳은 그 폴더 안뿐이에요. 이번 레슨은 그 안전한 연습장에서 휴대폰으로 보기 좋은 모임 안내 웹페이지 한 장을 만들어 봐요.
이렇게 해 보세요
- 바탕화면에 새 폴더를 만들고 이름을
codex-연습으로 붙입니다. 안에는 아무것도 넣지 않아요. - ChatGPT 컴퓨터 앱을 열고 왼쪽 위에서 Codex를 고릅니다. 앱이 없으면 아래 「Codex가 없다면」을 보세요.
- 작업할 폴더를 고르는 버튼을 눌러 방금 만든
codex-연습폴더를 고릅니다. 버튼 이름은 화면에 따라 조금 달라요. 「폴더」나 「프로젝트」라는 말이 보이는 곳을 찾으면 돼요. - 아래 부탁을 그대로 보냅니다. 3장에서 쓴 걷기 모임 메모예요.
저는 프로그래밍을 하지 않습니다. 아래 메모로 휴대폰에서 보기 좋은 모임 안내 웹페이지를 index.html 파일 하나로 만들어 주세요.
글씨는 크고 읽기 쉽게, 색은 차분하게 해 주세요. 메모에 없는 내용은 넣지 말고, 정해지지 않은 것은 「확인 중」으로 써 주세요.
이 폴더 밖의 파일은 건드리지 마세요.동네 걷기 모임: 11월 14일 오전 10시부터 11시까지, 동네문화센터 1층 안내대 앞에서 모임. 준비물은 편한 신발과 물. 참가비와 연락처는 아직 정하지 않음.
- 승인 창이 뜨면 무엇을 하겠다는지 읽어 봅니다. 「
codex-연습폴더에index.html을 만들겠다」는 내용이면 승인해도 괜찮아요. - 작업이 끝나면
codex-연습폴더를 열어index.html을 더블클릭합니다. 인터넷 창에 내가 만든 안내 페이지가 열려요. - 한 곳만 고쳐 달라고 해 봅니다. 예: 「날짜와 시간을 맨 위에 더 크게 보여 주세요. 나머지는 그대로 두세요.」 다시 승인하고, 페이지를 새로 고침(F5)해서 바뀐 걸 확인해요.
말로 부탁해서 내 컴퓨터에 웹페이지 한 장이 생겼다면 성공이에요. 2장에서 연습한 「한 가지씩 고치기」가 여기서도 그대로 통하는 걸 느끼셨을 거예요.
승인 창, 이렇게 읽어요
승인 창은 Codex가 「이렇게 해도 될까요?」 하고 묻는 거예요. 아래 기준으로 판단하면 돼요.
| 이런 내용이면 | 이렇게 |
|---|---|
| 연습 폴더 안에 파일을 만들거나 고치겠다 | 승인해도 괜찮아요 |
| 연습 폴더 밖의 폴더(문서, 사진 등)를 읽거나 바꾸겠다 | 거절하고, 「이 폴더 안에서만 해 주세요」라고 말해요 |
| 무슨 뜻인지 모르는 명령을 실행하겠다 | 거절하고, 「이 명령이 무슨 일을 하는지 쉽게 설명해 주세요」라고 물어봐요 |
| 무언가를 지우겠다 | 무엇을 지우는지 확실히 알 때만 승인해요 |
모르겠으면 거절해도 아무 일도 일어나지 않아요. 거절한 뒤 물어보면 Codex가 다른 방법을 찾아 줘요.
막히면
- Codex가 없다면: 웹이나 휴대폰에서는 Codex를 고르는 곳이 보이지 않는 게 정상이에요. 이 레슨은 읽기만 해도 괜찮아요. 같은 부탁을 Chat에 보내면 웹페이지 코드를 글로 보여 주는데, 그걸 직접 파일로 저장하는 건 조금 번거로워요. 그래서 이 실습은 컴퓨터 앱을 권해요.
- 처음 열 때 전화번호 인증을 하라는 창이 뜨면 문자로 온 번호를 넣으면 돼요. 내키지 않으면 창을 닫고 5-2로 가도 됩니다.
- 파일이 안 보이면 Codex에게 「방금 만든 파일이 어느 폴더에 있나요?」라고 물어보세요.
- 사용 한도 안내가 뜨면 Work와 같은 사용량을 나눠 써서 그래요. 안내된 시간이 지나면 다시 할 수 있어요.
- 회사 컴퓨터라면 회사 규칙부터 확인하세요. 회사 코드나 문서는 허락받은 곳에서만 다뤄요.
공식 안내: Use ChatGPT · Quickstart
따라 하기 칸을 불러오는 중이에요