오토프로그8강: 첫 프로젝트
오늘 안에 내 URL을 갖게 됩니다
오늘 끝나면 이런 걸 갖게 돼요
내 이름과 소개가 담긴 웹페이지를 만들고, 누구나 열 수 있는 주소에 공개해요. 직접 입력할 명령어나 코드는 없어요.
7강에서 배운 목표·상황·울타리를 프롬프트에 넣어 볼게요. 클로드 코드를 열고 아래 문장부터 붙여 넣으세요.
1. 첫 화면을 만들어요
첫 프로젝트는 HTML(웹페이지의 뼈대를 만드는 언어)과 CSS(모양을 꾸미는 언어)로 만들어요. 집으로 치면 HTML은 방과 문을 놓고, CSS는 색과 가구를 정해요.
파일이 단순해 배포와 오류 확인이 쉽고, 나중에 JavaScript(웹페이지에 동작을 넣는 언어)를 더할 수도 있어요. 이번에는 index.html과 style.css 두 개만 써요. 아래 프롬프트를 붙여 넣으세요.
내 홈 폴더 안에 my-page라는 새 프로젝트 폴더를 만들어줘.같은 이름의 폴더가 이미 있으면 덮어쓰지 말고 먼저 알려줘.작업할 위치를 먼저 보여주고, 이후에는 이 폴더 안에서만 작업해줘.나를 소개하는 웹페이지를 만들어줘.나는 코딩을 모르는 초보자이니 어려운 용어는 쉽게 설명해줘.파일은 index.html과 style.css 두 개만 만들어.위에서 아래 순서는 다음과 같아.1. 내 이름 "홍길동"과 한 줄 소개 "AI와 함께 만드는 사람"2. 자기소개 2~3문장3. 관심 분야 카드 3개: 바이브 코딩, AI 활용, 웹 제작4. 이메일과 GitHub 링크다크 배경은 #0a0a0a, 글씨는 #e0e0e0, 포인트 색은 #00e5ff로 정해줘.휴대폰에서도 깨지지 않게 만들어줘.JavaScript, 외부 라이브러리, 이미지, 복잡한 애니메이션은 쓰지 마.코드에는 각 부분을 설명하는 짧은 한글 주석을 달아줘.만든 뒤 두 파일의 이름을 보여주고 index.html을 브라우저에서 열어줘.
클로드가 폴더를 만들거나 브라우저를 열 때 컴퓨터 승인을 요청할 수 있어요. 경로 끝이 my-page인지 확인하고 승인하세요.
브라우저에 홍길동 소개 화면이 보이면 첫 단계가 끝났어요.
2. 내 내용으로 바꿔요
예시 이름과 소개를 내 정보로 바꿔요. [ ] 안을 먼저 채운 뒤 프롬프트를 보내세요.
방금 만든 웹페이지의 내용만 아래 정보로 바꿔줘.이름: [내 이름]한 줄 소개: [나를 설명하는 한 문장]자기소개: [소개 2~3문장]관심 분야 3개: [관심사 1], [관심사 2], [관심사 3]이메일: [내 이메일]GitHub 주소: [내 GitHub 주소]index.html만 수정하고 style.css는 건드리지 마.수정한 문구를 먼저 보여준 뒤 브라우저를 새로고침해줘.
이름, 소개, 연락처가 내 정보로 바뀌었는지 확인하세요. 공개하고 싶지 않은 정보는 넣지 않아도 됩니다.
3. 디자인을 다듬어요
7강에서 배운 레퍼런스(참고할 디자인)와 수정 범위 제한을 함께 써 봐요. 이번에는 디자인 파일만 맡겨요.
style.css만 수정하고 index.html은 건드리지 마.이름 글씨는 48px로 키워줘.카드에 마우스를 올리면 시안색 테두리가 보이게 해줘.섹션 사이 간격은 80px로 맞춰줘.Apple 사이트처럼 여백이 넓고 단정한 느낌을 참고해줘.바꿀 내용을 먼저 요약하고, 수정한 뒤 브라우저에서 보여줘.
색, 글씨 크기, 간격이 마음에 들지 않으면 보이는 문제를 그대로 말하세요. 한 번에 여러 곳을 바꾸기보다 한두 가지씩 확인하면 어긋난 부분을 찾기 쉬워요.
4. 깃허브에 올려요
지금 페이지는 내 컴퓨터에서만 열려요. GitHub Pages(깃허브가 파일을 웹사이트로 공개하는 서비스)에 올리면 주소가 생겨요.
5강에서 배운 Git(파일의 변경 기록을 저장하는 도구)도 클로드가 처리해요. 명령어를 다시 외울 필요는 없어요.
무료 계정에서는 저장소를 Public(공개)으로 만들어야 GitHub Pages를 쓸 수 있어요. 소개 페이지에 비밀번호나 공개하면 안 되는 정보가 없는지 먼저 확인하세요.
사람만 할 일
계정이 없다면 github.com에서 가입하고 로그인하세요. 브라우저에 로그인이나 권한 승인 화면이 나오면 그 버튼만 직접 누르세요. 이것만 직접 하시면 나머지는 클로드가 해요.
로그인할 준비가 됐으면 아래 프롬프트를 보내세요.
지금 상태를 저장하고 깃허브에 올려줘.실행 전에 무엇을 할지와 바뀌는 파일을 먼저 보여주고 내 확인을 받아줘.Git과 GitHub 연결 도구가 준비됐는지 확인해줘.필요한 도구가 없으면 설치 방법을 안내하고 내 승인을 기다려줘.Git 기록이 없다면 기본 작업 갈래 이름을 main으로 해서 시작해줘.올릴 파일에 비밀번호나 인증 정보가 없는지 확인해줘.문제가 없으면 "첫 번째 커밋: 내 소개 페이지"라는 이름으로 저장해줘.내 GitHub 아이디를 확인한 뒤 아이디를 모두 소문자로 바꾼"내아이디.github.io"라는 Public 저장소를 새로 만들어 연결해줘.같은 이름의 저장소가 이미 있으면 덮어쓰지 말고 멈춰서 알려줘.브라우저 로그인이나 권한 승인이 필요하면 그 화면에서 멈춰줘.내 승인이 끝나면 main 갈래를 깃허브에 올리고 저장소 주소를 보여줘.
클로드가 보여주는 계획에서 저장소가 Public인지, 이름이 내아이디.github.io 형식인지 확인하세요. GitHub 아이디에 대문자가 있어도 저장소 이름은 모두 소문자로 써요.
5. 웹사이트를 켜요
파일을 올린 뒤에는 GitHub에 이 저장소를 웹사이트로 쓰겠다고 알려야 해요. 가게에 간판을 달고 문을 여는 단계와 비슷해요.
설정도 클로드에게 맡기세요.
방금 올린 저장소에서 GitHub Pages를 켜줘.실행 전에 현재 설정과 바꿀 내용을 먼저 보여주고 내 확인을 받아줘.배포 방식은 main 갈래의 맨 위 폴더를 그대로 공개하도록 설정해줘.브라우저 로그인이나 권한 승인이 필요하면 그 화면에서 멈춰줘.설정한 뒤 저장소 공개 범위, 배포 갈래, 공개 폴더를 다시 확인해줘.마지막에는 공개 주소와 현재 배포 상태를 쉬운 말로 알려줘.
계획에 main과 맨 위 폴더가 보이는지 확인하세요. 보통 1~2분이면 열리지만 최대 10분까지 걸릴 수 있어요.
https://내깃허브아이디.github.io
클로드가 알려준 주소를 휴대폰에서도 열어 보세요. 같은 화면이 보이면 배포가 끝났어요.
수정한 내용을 다시 올려요
Pages 설정은 처음 한 번만 하면 돼요. 다음부터는 수정을 확인한 뒤 클로드에게 저장과 업로드를 함께 맡기세요.
방금 수정한 내용을 브라우저에서 다시 보여줘.문제가 없으면 바뀐 파일을 확인하고 Git 기록으로 저장한 뒤 깃허브에 올려줘.저장 이름은 변경 내용을 보고 짧은 한국어로 정해줘.실행 전에 무엇을 저장하고 올릴지 먼저 보여주고 내 승인을 받아줘.
업로드 뒤에는 보통 1~2분, 길면 10분 안에 웹사이트에도 바뀐 내용이 나타나요.
잘 안 될 때 확인할 것
페이지가 열리지 않으면 혼자 설정 화면을 헤매지 마세요. 클로드에게 Pages 설정, 저장소의 Public 상태, 저장소 이름, main 갈래의 index.html을 차례로 확인해 달라고 하세요.
업로드나 인증 오류가 나오면 문장을 고치려고 하지 말고 전체 내용을 클로드에게 보여주세요.
깃허브에 올리는 과정에서 아래 오류가 나왔어.[오류 메시지 전체를 여기에 붙여넣기]원인을 쉬운 말로 설명해줘.현재 파일과 저장 기록을 먼저 확인하고, 안전한 해결 순서를 제안해줘.파일을 삭제하거나 기록을 되돌리기 전에 반드시 내 승인을 받아줘.
클로드가 해결한 뒤에는 저장소에 index.html과 style.css가 보이는지, 공개 주소에서 화면이 열리는지 확인하세요.
이번 강에서 기억할 것
첫 프로젝트는 HTML과 CSS 두 파일이면 충분해요. 만들기, 확인하기, 저장하기, 공개하기 순서로 진행하면 돼요.
명령어는 외우지 않아도 돼요. 클로드가 실행 전에 계획과 변경 파일을 보여주게 하고, 사람은 로그인·권한 승인과 클로드가 보여준 설정만 확인하세요.
이런 분께 추천해요
아직 첫 결과물을 만들지 못한 분, 개인 소개 페이지가 필요한 분, 6~7강에서 만든 기획과 프롬프트를 실제 작업에 써 보고 싶은 분께 알맞아요.
참고 링크
다음 강
9강: CLAUDE.md에서는 프로젝트 규칙을 한 번 적어 두고, 클로드가 작업할 때마다 읽게 만드는 방법을 배워요.