LEARNING STUDIOAI와 함께,
나의 첫 홈페이지.
작은 페이지 하나가, 다음 가능성의 시작입니다.
- 코딩 경험 없이 시작하는 3시간 실습
- 소개 · 제공 가치 · 연락 링크가 있는 한 페이지
- 만들기 → 실행 → 한 번 수정 → 혼자 다시 열기
완료 기준 · 오늘의 도착점: 내가 만든 파일을 내 컴퓨터에서 다시 열 수 있다.
조금 더 알아보기
완성된 서비스를 약속하는 수업이 아닙니다. 내 생각이 담긴 첫 버전을 직접 만들어보는 수업입니다. 준비가 되지 않았다면 사전 준비표부터 확인하세요.
링크 하나로,
내 일을 설명한다.
같은 설명을 반복하는 일에서 시작해보세요.
| 지금의 상황 | 홈페이지로 시도할 변화 |
|---|---|
| 매번 자기소개를 길게 보낸다 | 한 페이지에 소개와 작업을 모은다 |
| 무엇을 하는지 질문을 받는다 | 누구를 어떻게 돕는지 먼저 보여준다 |
| 연락 방법을 따로 알려준다 | 다음 행동을 버튼 하나로 안내한다 |
직접 해보기
2인 대화: 최근 반복해서 설명한 내용을 한 문장으로 말해보세요.
완료 기준 · 만들 이유를 자신의 실제 상황으로 설명한다.
조금 더 알아보기
홈페이지가 있다고 문의나 매출이 자동으로 늘지는 않습니다. 이번에는 방문자가 나를 이해하고 다음 행동을 찾는 데 도움이 되는지 확인합니다.
방문자 한 명,
행동 하나.
누구에게 보여줄지 정하면, 넣을 내용도 줄어듭니다.
- 방문자: 예) 처음 나를 소개받은 동네 주민
- 제공 가치: 예) 초보자를 위한 작은 책 모임
- 다음 행동: 예) 모임 소개를 읽고 이메일로 문의
직접 해보기
실습 기록지의 방문자·제공 가치·다음 행동을 채우세요.
완료 기준 · “나는 ___에게 ___을 소개하고 ___하게 하고 싶다.” 한 문장이 완성된다.
조금 더 알아보기
연습 예시는 가상의 「작은 책방」입니다. 실제 연락처를 아직 공개하고 싶지 않다면 hello@example.com을 사용하세요. 실제 수신함이 아닌 교육용 주소입니다.
파일과 웹주소는
다른 것입니다.
내 컴퓨터에서 보이는 것과, 다른 사람에게 보이는 것을 구분합니다.
| 이름 | 쉬운 설명 |
|---|---|
| HTML | 페이지의 내용과 순서를 담은 파일 |
| CSS | 글자 크기·색·간격을 정하는 규칙 |
| 브라우저 | HTML을 화면으로 보여주는 앱 |
| 로컬 파일 | 내 컴퓨터에 저장된 파일 |
| 공개 URL | 인터넷으로 다른 사람이 열 수 있는 주소 |
직접 해보기
질문: file:///로 시작하는 주소를 친구에게 보내면 같은 페이지가 열릴까요?
완료 기준 · 내 파일과 공개 주소의 차이를 설명한다.
조금 더 알아보기
이번 실습에서는 내용과 디자인을 index.html 하나에 담습니다. JavaScript는 버튼에 특별한 동작이 필요할 때 쓰지만, 이번 예제의 목차와 연락 링크에는 꼭 필요하지 않습니다. 내 파일 경로를 메시지로 보내도 상대방은 열 수 없습니다.
세 영역이면
첫 버전은 충분합니다.
처음부터 기능을 늘리지 않습니다.
- 01 소개: 누구인지, 누구를 돕는지 한 문장
- 02 가치: 제공하는 도움 또는 작업 예시 3개
- 03 연락: 문의를 시작할 링크 하나
직접 해보기
실습 기록지에 소개 한 문장과 가치 3개를 적으세요.
완료 기준 · 페이지의 세 영역과 필요한 문장을 정한다.
조금 더 알아보기
회원가입·예약·결제·게시판·문의 내용 저장은 이번 실습에 넣지 않습니다. “문의 폼”은 화면만 있어서는 메시지가 전달되지 않으므로 메일 링크로 시작합니다.
수업 전 준비를
마지막으로 확인합니다.
같은 출발점에서 시작하면 실습 시간이 늘어납니다.
- 개인 노트북 · 충전기 · 인터넷 · Chrome 준비
- Codex 사용 가능한 계정과 로컬 폴더 작업 준비
- Mac: Finder / Windows: 파일 탐색기에서 실습 폴더 만들기
- 준비가 막히면 강사에게 현재 화면과 오류 문구 보여주기
직접 해보기
사전 준비표의 네 항목을 확인하고, 부족한 항목을 강사에게 알리세요.
완료 기준 · 작업 폴더에 파일을 저장할 수 있는 상태다.
조금 더 알아보기
공식 Quickstart는 데스크톱 앱 설치·로그인·폴더 선택·Codex 선택 흐름을 안내합니다. 기존 Codex 앱을 쓰는 경우 화면 구성이 다를 수 있습니다. 수업 전 “샘플 텍스트 파일 저장”까지 확인합니다. Windows 설치는 공식 문서 기준 안내이며 이번 제작 환경에서 실제 Windows 기기를 시험하지는 않았습니다. Hermes·LLM Wiki 준비는 기본 과정에서 다루고, 홈페이지 실습의 제작 도구는 Codex입니다.
내 작업을 담을
폴더부터 만듭니다.
폴더 이름은 my-first-homepage로 통일합니다.
- 문서 폴더에 my-first-homepage를 만든다
- Codex에서 이 폴더를 작업 위치로 선택한다
- 아래 요청을 보내 저장 위치를 확인한다
현재 작업 폴더가 my-first-homepage인지 확인해줘. 아직 파일은 만들지 말고, 앞으로 index.html을 저장할 전체 경로를 알려줘.
직접 해보기
경로를 실습 기록지에 적으세요. 다른 수업 폴더가 선택되지 않았는지 확인하세요.
완료 기준 · AI가 말한 저장 위치와 내가 연 폴더가 일치한다.
조금 더 알아보기
Mac은 Finder → 문서 → 새 폴더, Windows는 파일 탐색기 → 문서 → 새로 만들기 → 폴더입니다. 앱에서 폴더 선택 또는 프로젝트 열기를 이용해 같은 폴더를 연결합니다. 시작 예제를 쓰려면 starter/index.html을 이 폴더로 복사합니다.
요청은 구체적으로,
계획은 먼저.
대상·결과·범위·완료 기준을 함께 전달합니다.
나는 코딩을 모르는 성인 입문자야. 가상의 작은 책방 소개 홈페이지를 만들고 싶어. 대상은 동네 주민이야. 소개, 가치 3개, 연락 링크를 넣어줘. 외부 라이브러리 없이 index.html 한 파일로 만들 거야. 밝은 배경과 파란색을 사용해줘. 지금은 파일을 만들지 말고, 구성과 작업 순서를 3단계로 제안해줘.
직접 해보기
계획을 요청하고, 방문자·영역·연락 방식이 내 의도와 맞는지 읽으세요.
완료 기준 · 내가 이해할 수 있는 제작 계획이 나온다.
조금 더 알아보기
실습 기록지에서 정한 주제로 “작은 책방”과 “동네 주민”만 바꿔도 됩니다. 계획을 먼저 읽는 이유는 내용·범위를 확인하기 위해서입니다. AI가 많은 기능을 추가하면 “오늘의 세 영역으로 줄여줘”라고 요청하세요.
좋은 계획은
눈으로 확인할 수 있습니다.
멋진 용어보다 실제 화면과 동작을 확인합니다.
| 확인할 항목 | 이번 수업의 기준 |
|---|---|
| 내용 | 소개 · 가치 3개 · 연락 링크 |
| 파일 | index.html 하나, 선택한 폴더에 저장 |
| 화면 | 넓은 화면·좁은 화면 모두 읽힘 |
| 기능 | 목차 이동과 이메일 링크 |
| 범위 | 회원·결제·서버 없음 |
직접 해보기
계획에서 마음에 들지 않는 한 항목을 고쳐 달라고 요청하세요.
완료 기준 · 제작 전에 범위를 한 번 조정해본다.
조금 더 알아보기
계획에 “백엔드”, “데이터베이스”처럼 이해하기 어려운 기능이 있으면 왜 필요한지 물어보세요. 이번 작은 소개 페이지에는 필요하지 않습니다. 수정 요청은 한 번에 하나씩 전달합니다.
이제 첫 파일을
만들어봅니다.
합의한 계획을 실제 파일로 바꿉니다.
확인한 계획대로 현재 폴더에 index.html을 만들어줘. 소개·가치 3개·연락 영역과 목차 링크를 넣어줘. 연락은 hello@example.com을 쓰고 교육용 주소라고 표시해줘. 외부 이미지·글꼴·라이브러리 없이 작성해줘. 모바일에서도 읽기 쉽고 키보드로 버튼을 선택할 수 있게 해줘. 파일을 저장한 뒤 전체 경로와 여는 방법을 알려줘. 공개 업로드는 하지 마.
직접 해보기
생성이 끝나면 폴더에서 index.html 파일을 직접 찾으세요.
완료 기준 · 대화 속 코드가 아니라 실제 HTML 파일이 생긴다.
조금 더 알아보기
도구가 계획만 답하고 끝나면 “확인한 계획을 파일로 저장해줘”라고 요청합니다. 코드가 대화에만 보이는 경우에도 실제 index.html 저장 여부를 확인해야 합니다. 처음 나온 결과가 기대와 조금 달라도 다음 단계에서 고칩니다.
직접 열어보는 순간,
내 결과물이 됩니다.
Finder 또는 파일 탐색기에서 index.html을 엽니다.
- index.html을 더블클릭하거나 Chrome으로 연결해서 연다
- 소개·가치·연락 세 영역이 있는지 확인한다
- 브라우저를 닫고 같은 파일을 다시 연다
직접 해보기
제목을 소리 내어 읽고, 예상과 다른 부분 하나를 기록하세요.
완료 기준 · 같은 파일을 두 번 열어 같은 페이지를 확인한다.
조금 더 알아보기
코드 글자가 보이면 메모장 대신 Chrome으로 여세요. Windows에서는 파일 이름 확장명을 표시해 index.html.txt가 아닌지 확인합니다. 새 버전이 보이지 않으면 저장된 폴더 경로를 비교한 후 새로고침하세요.
잠깐 쉬어가요.
지금까지 만든 파일을 저장하고, 10분 뒤 다시 시작합니다.
- AI 응답과 파일 저장이 끝났는지 확인
- 지금 열린 파일의 이름과 경로 메모
- 다음 목표: 내 문장으로 바꾸고 동작 확인
완료 기준 · 돌아와서 이어갈 위치가 남아 있다.
조금 더 알아보기
강사는 쉬는 동안 설치·저장·실행 단계에서 멈춘 수강생의 상태를 확인합니다. 파일이 없는 상태와 화면만 다른 상태를 구분하세요.
누를 수 있다고,
작동하는 건 아닙니다.
목차와 연락 링크를 실제로 눌러봅니다.
- 목차의 소개·가치·연락을 각각 클릭한다
- Tab 키로 이동하고 Enter로 링크를 연다
- 이메일 링크의 주소가 의도한 값인지 확인한다
직접 해보기
클릭 결과와 키보드 결과를 각각 실습 기록지에 남기세요.
완료 기준 · 세 목차가 맞는 영역으로 이동하고, 연락 링크의 목적을 이해한다.
조금 더 알아보기
mailto 링크는 메일 앱이나 브라우저 설정을 통해 작성 화면을 엽니다. 설정이 없으면 아무 반응이 없을 수 있습니다. 이는 자동 발송 기능이 아닙니다. 예제의 hello@example.com으로 실제 메일을 보내지 마세요.
수정은 한 번에
한 가지만.
바뀐 결과를 비교할 수 있게 요청합니다.
index.html의 첫 제목만 “책 한 권으로, 동네와 연결되다.”로 바꿔줘. 나머지 문장, 색상, 배치, 링크는 유지해줘. 저장 후 무엇이 바뀌었는지 한 줄로 알려줘.
직접 해보기
제목을 자기 문장으로 바꾼 뒤, 나머지 영역이 유지되는지 비교하세요.
완료 기준 · 직접 요청한 한 가지 변화가 파일과 화면에 반영된다.
조금 더 알아보기
수정하기 전 index.html을 복사해 index-before.html로 보관합니다. 저장 뒤 브라우저를 새로고침하고 제목과 링크를 다시 확인합니다. 만족하지 않으면 복사본으로 돌아갈 수 있습니다.
작은 화면에서도
편하게 읽히나요?
휴대폰 크기에서도 내용과 행동이 보여야 합니다.
- 브라우저 창을 좁혀 세 영역을 읽는다
- 가치 3개가 세로로 쌓이는지 확인한다
- 긴 제목·버튼이 화면 밖으로 나가지 않는지 본다
390px, 768px, 1440px 너비에서 확인할 항목을 알려줘. 좁은 화면에서 글자와 버튼이 겹치거나 가로로 넘치면 그 부분만 수정해줘.
직접 해보기
좁은 화면과 넓은 화면에서 각각 제목·가치·연락을 확인하세요.
완료 기준 · 화면 폭이 달라져도 읽고 누를 수 있다.
조금 더 알아보기
Chrome 메뉴 → 도구 더보기 → 개발자 도구에서 기기 도구 모음을 사용할 수 있습니다. 기기 화면 흉내는 실제 휴대폰 시험과 다릅니다. 로컬 파일 주소는 다른 기기에서 열리지 않으므로 휴대폰 실물 확인은 별도 공유 방법 또는 공개 URL이 필요합니다.
막히면, 관찰한 사실을
세 줄로 전달합니다.
기대한 것 · 실제로 보인 것 · 마지막 작업.
| 보이는 현상 | 먼저 확인할 것 |
|---|---|
| 코드 글자가 보인다 | Chrome으로 파일을 열었는가 |
| 예전 제목이 보인다 | 다른 폴더의 파일인가 / 저장·새로고침했는가 |
| 문의가 열리지 않는다 | 메일 앱 설정과 링크 주소 |
| 파일을 찾을 수 없다 | AI가 알려준 저장 경로 |
| AI가 응답하지 않는다 | 인터넷·로그인·사용 가능 상태 |
직접 해보기
“제목 변경을 기대했는데 / 예전 제목이 보입니다 / 방금 저장하고 새로고침했습니다.”처럼 상황을 설명하세요.
완료 기준 · 추측 대신 관찰한 사실로 도움을 요청한다.
조금 더 알아보기
오류 메시지는 뜻을 몰라도 원문을 남기는 것이 도움이 됩니다. 비밀번호와 계정 정보가 보이는 화면은 가린 뒤 공유합니다. 해결이 어려우면 완성 예제로 실행을 연습하고, 실제 제작은 미완료로 기록하세요.
파일과 만드는 순서를
함께 남깁니다.
다음 수업을 기다리지 않고 이어갈 수 있도록.
- 현재 index.html과 수정 전 복사본 보관
- 잘 작동한 요청문과 수정 내용을 기록
- 브라우저를 닫고 파일을 다시 열어 확인
직접 해보기
실습 기록을 내려받고 홈페이지 파일과 같은 폴더에 보관하세요.
완료 기준 · 파일·요청문·다음 행동 세 가지가 남아 있다.
조금 더 알아보기
실습 기록지의 “기록 내려받기” 버튼을 누르면 텍스트 파일로 저장할 수 있습니다. 입력 내용은 서버로 전송하지 않습니다. 페이지를 새로고침하면 입력이 사라질 수 있으므로 닫기 전에 내려받으세요.
내 상황에 맞게
한 번 더 바꿉니다.
따라 만들기에서, 스스로 선택하기로.
- 프리랜서: 소개를 작업 분야와 포트폴리오로
- 자영업자: 가치를 고객에게 제공하는 도움으로
- 모임 운영자: 연락을 참여 문의로
직접 해보기
강사 도움 없이 방문자를 바꾸고 제목 또는 가치 한 항목을 수정하세요.
완료 기준 · 이전 결과와 달라진 이유를 자기 말로 설명한다.
조금 더 알아보기
예제 주제를 자기 상황으로 바꾸되, 세 영역 구조는 유지합니다. 새로운 기능 대신 방문자와 문장 하나를 바꾸고 전후를 비교하세요.
다른 사람이
이해하는지 확인합니다.
성과를 추측하지 않고, 반응을 관찰합니다.
| 방문자에게 물을 질문 | 기록할 내용 |
|---|---|
| 이 페이지는 누구를 위한 것 같나요? | 대상에 대한 답 |
| 어떤 도움을 받을 수 있나요? | 가치에 대한 답 |
| 다음에 어디를 누르면 되나요? | 연락 버튼을 찾는 과정 |
직접 해보기
옆 사람에게 세 질문을 하고, 예상과 다른 답 하나를 기록하세요.
완료 기준 · 수정할 다음 항목을 방문자의 반응에서 찾는다.
조금 더 알아보기
동료에게 먼저 설명하지 말고 페이지를 보여주세요. 예상과 다른 답이 나오면 문장을 수정할 단서입니다. 수업에서 얻은 짧은 반응을 매출 증가나 학습 효과의 증거로 확대하지 않습니다.
공개는 준비가 되었을 때
선택합니다.
로컬 완성과 공개 완료를 구분합니다.
- 올릴 내용·사진·연락처의 공개 여부를 확인
- GitHub Pages 같은 정적 호스팅으로 파일 공개
- 제공받은 URL을 새 창에서 열어 링크·모바일 폭 확인
직접 해보기
오늘은 “로컬 완성” 또는 “공개까지 확인” 중 실제 상태만 적으세요.
완료 기준 · 공개 여부와 다음 행동을 구분해서 기록한다.
조금 더 알아보기
GitHub Pages는 저장소의 파일로 웹사이트를 공개하는 방법입니다. 로그인·저장소 생성·업로드는 본인이 선택해 진행합니다. 처리 중이라는 안내만으로 공개 완료라고 기록하지 않습니다. 준비표에 공식 안내 링크와 선택형 절차를 넣었습니다.
내일, 혼자
다시 해보세요.
같은 흐름을 다른 주제로 반복합니다.
- 새 폴더에 다른 주제를 한 문장으로 정하기
- 계획 → 파일 → 실행 → 한 가지 수정 반복
- 막힌 지점과 마지막 성공 단계를 기록
직접 해보기
다음 24시간 안에 할 작은 재실습 한 가지와 시작 시간을 기록하세요.
완료 기준 · 혼자 다시 시작할 구체적인 행동이 정해져 있다.
조금 더 알아보기
과제는 새로운 기능 추가가 아닙니다. 오늘의 흐름을 혼자 재현하는 것입니다. 예제 파일을 그대로 연 것과 직접 AI에게 제작을 요청한 것을 구분해서 적으세요.
작은 첫 버전,
분명한 다음 한 걸음.
내가 만들고, 확인하고, 다시 실행했습니다.
- 누구를 위한 페이지인지 설명할 수 있다
- 소개·가치·연락이 화면에 있다
- 제목을 수정하고 동작을 다시 확인했다
- 내 파일을 다시 열고 다음 행동을 기록했다
직접 해보기
실습 기록지의 완료 항목을 체크하고 파일을 내려받으세요.
완료 기준 · 오늘 만든 것과 아직 남은 것을 정확하게 말한다.
조금 더 알아보기
네 항목 중 부족한 것이 있으면 미완료 항목으로 남깁니다. 결과 화면만으로 모든 학습을 마쳤다고 판단하지 않습니다. 수료증 발급이나 성과 보장은 이번 자료실에 포함하지 않습니다.
공식 자료와
교재의 사용 범위.
버전 1.0 · 확인일 2026.09.13
- 4MAT의 네 질문을 교육 흐름에 적용한 자체 교안
- Codex: 공식 Quickstart의 로컬 폴더 작업 흐름 참고
- 예제의 이름·연락처는 가상의 교육용 정보
- Windows 실제 기기·유료 수강생 수업 효과는 별도 확인
완료 기준 · 사실·예시·미확인 범위를 구분한다.
조금 더 알아보기
기존 프로젝트 자료는 참고 원본으로 모았으며 새 강의와 구분합니다. 제품 화면과 제공 조건은 바뀔 수 있습니다. 수업 전 공식 안내와 계정 사용 가능 상태를 확인하세요. 학습 성향을 진단하거나 특정 성향에 따라 수강생을 분류하지 않습니다.