세 줄 요약
- 한 장짜리 소개 페이지를 만들어 인터넷에 올리고 주소를 받는 데까지 30분이면 됩니다.
- 프롬프트에 “휴대폰에서 봐도 안 깨지게 해줘”를 넣는 게 핵심입니다. 링크를 받는 사람은 대부분 휴대폰으로 엽니다.
- 무료로 올릴 수 있는 곳은 Netlify, Cloudflare Pages, GitHub Pages입니다. 가입 절차는 자주 바뀌니 각 사이트 안내를 따라가시는 편이 정확합니다.
오늘은 남한테 보낼 수 있는 걸 만듭니다
지난 편에서 만든 영수증 정리기는 내 컴퓨터 안에만 있습니다. 파일을 열어야 보이고, 남한테 보여주려면 파일을 보내야 합니다.
오늘 만드는 건 다릅니다. 주소가 생깁니다. 카톡으로 링크를 보내면 상대방이 눌러서 봅니다.
이게 왜 중요하냐면, 만든 걸 자랑할 수 있어야 계속하게 되기 때문입니다.
제 아들 이야기를 잠깐 하겠습니다. 아이는 개발을 하고 싶다면서도 예전 방식으로는 진도가 안 나갔습니다. 문법을 외우고 예제를 따라 치는 구간에서 재미를 못 느꼈고, 재미가 없으니 학습도 안 됐습니다.
그런데 순서를 뒤집으니 달라졌습니다. 먼저 뭔가 만들고, 되는 걸 확인하고, 그다음에 궁금해지는 순서입니다. 그리고 그 되는 걸 확인하는 단계에서 가장 강한 건 친구한테 링크를 보내는 것이었습니다.
만들 것
한 장짜리 소개 페이지입니다. 중학생이면 자기소개, 주부라면 공방이나 가게, 직장인이라면 간단한 포트폴리오. 들어가는 내용만 바뀌고 만드는 방법은 똑같습니다.
폴더부터 만듭니다
지난 편과 같습니다. 편한 곳에 폴더를 하나 만들고 이름을 내페이지라고 붙이세요. 터미널에서 그 폴더로 들어갑니다.
cd 경로
claude프롬프트
아래를 복사해서 붙여넣고, 대괄호 안만 본인 이야기로 바꾸시면 됩니다.
나를 소개하는 한 장짜리 웹페이지를 만들어줘.
· 맨 위에 이름 [블록이]과 한 줄 소개 [만드는 걸 좋아하는 중딩]
· 좋아하는 것 3개 [레고, 비트박스, 로블록스 게임]를 카드로
· 만든 것 3개를 목록으로
· 맨 아래에 한마디
나는 코딩을 전혀 모르는 사람이야.
파일 하나로 만들어줘.
휴대폰에서 봐도 안 깨지게 해줘.
마지막 줄이 오늘의 핵심입니다.
링크를 받은 사람은 대부분 휴대폰으로 엽니다. 그런데 만드는 사람은 PC로 보면서 만듭니다. 이 말을 안 하면 PC에서는 멀쩡한데 휴대폰에서 글자가 넘치거나 옆으로 스크롤이 생기는 페이지가 나옵니다.
저도 만들고 나서 두 화면을 다 확인했습니다.
여기까지 30분이 안 걸립니다
만드는 데 5분, 내용 다듬는 데 20분쯤 걸렸습니다. 대부분은 이 문장 말고 저 문장 하면서 고치는 시간입니다. 고칠 때는 이렇게 말하면 됩니다.
제목 아래 한 줄 소개를 더 짧게 해줘
카드 색을 좀 더 따뜻하게 해줘
맨 아래 한마디를 더 눈에 띄게 해줘
한 번에 완성되지 않는 게 정상입니다. 지난 편에서도 세 번 고쳤습니다.
이제 인터넷에 올립니다
여기가 오늘의 진짜 목적지입니다. 지금은 내 컴퓨터 안에 파일 하나가 있을 뿐이고, 아직 주소가 없습니다. 무료로 올릴 수 있는 곳이 여럿 있습니다.
- Netlify — 폴더를 끌어다 놓으면 주소가 생깁니다
- Cloudflare Pages — 비슷한 방식이고, 국내에서 빠른 편입니다
- GitHub Pages — 개발자들이 많이 쓰는데, 처음이라면 앞의 둘이 쉽습니다
어느 쪽이든 계정을 하나 만들어야 합니다. 이메일로 가입하면 되고, 무료 범위 안에서 개인 페이지 정도는 충분합니다.
⚠️ 가입 절차와 무료 범위는 자주 바뀝니다. 이 글에 단계별 화면을 그려 넣으면 몇 달 뒤에 틀린 안내가 됩니다. 각 사이트에 들어가시면 첫 화면에 안내가 나와 있으니 그걸 따라가시는 게 정확합니다.
그리고 여기서도 AI에게 물어보시면 됩니다.
지금 만든 페이지를 인터넷에 무료로 올리고 싶어.
나는 개발자가 아니고 깃허브도 써본 적 없어.
가장 쉬운 방법으로, 지금 화면에서 뭘 눌러야 하는지 하나씩 알려줘.
그래도 막히시면
솔직히 말씀드리면, 이 단계에서 막히는 분이 제일 많습니다. 가입 화면이 영어로 되어 있거나, 버튼 이름이 안내와 다르거나, 눌렀는데 다른 화면이 뜨거나 합니다.
그래서 카카오 오픈채팅을 열어뒀습니다. 막힌 화면을 그대로 캡처해서 올리시면 됩니다. 저나 먼저 해보신 분이 뭘 눌러야 하는지 알려드립니다. 무료이고, 질문에 자격 같은 건 없습니다.
글에 화면을 박아 넣는 것보다 이 편이 정확합니다. 화면은 바뀌지만 사람은 그 자리에 있으니까요.
주소가 생기면 해야 할 일
휴대폰으로 먼저 열어보세요. PC에서 잘 보인다고 끝이 아닙니다. 실제로 링크를 받는 사람은 휴대폰으로 봅니다. 본인 폰에서 열어서 글자가 안 깨지는지, 옆으로 밀리지 않는지 확인하시면 됩니다.
이상하면 그대로 말하면 됩니다.
휴대폰에서 보니까 제목이 두 줄로 넘치고 카드가 옆으로 삐져나와. 휴대폰에서도 깔끔하게 보이게 고쳐줘.
그다음 한 명에게 보내보세요. 가족이든 친구든 한 명이면 됩니다. 이게 오늘의 마지막 단계이고, 사실 가장 중요한 단계입니다.
막힐 때
주소로 들어갔는데 아무것도 안 나옵니다
파일 이름이 index.html인지 확인하세요. 다른 이름이면 주소 뒤에 파일 이름을 붙여야 나옵니다.
한글이 깨져 보입니다
한글이 깨져. UTF-8로 저장해줘. 라고 하시면 됩니다.
카톡으로 보냈는데 미리보기가 안 뜹니다
페이지에 미리보기용 정보가 없어서입니다. 카톡으로 공유했을 때 제목과 설명이 보이게 해줘 라고 하시면 넣어줍니다.
사진을 넣고 싶어요
사진 파일을 페이지와 같은 폴더에 두고 이 폴더의 사진.jpg를 맨 위에 동그랗게 넣어줘 라고 하시면 됩니다. 올릴 때 폴더째 올려야 사진도 같이 갑니다.
주소가 너무 길고 이상해요
무료로 받으면 대개 그렇습니다. 짧고 예쁜 주소는 따로 사야 하는데, 처음부터 살 필요는 없습니다. 계속 만들게 된 다음에 생각하셔도 됩니다.
오늘 하신 일
한 장짜리 페이지를 만들었고, 휴대폰에서도 확인했고, 인터넷에 올려 주소를 받았고, 한 명에게 보냈습니다. 지난 편까지는 내 컴퓨터 안에서 끝났습니다. 오늘부터는 만든 게 밖으로 나갑니다.
만든다 → 휴대폰으로 확인한다 → 올린다 → 보낸다마지막 단계를 빼먹지 마세요. 보내고 나서 오는 한마디가 다음 걸 만들게 합니다.
만드셨으면 오픈채팅에도 링크를 자랑해주세요. 남이 만든 걸 보는 게 다음 걸 만들게 하는 데 꽤 도움이 됩니다.
다음 글
AI가 시키는 대로 다 했는데 안 될 때 — 에러 읽는 법
여기까지 오시면 슬슬 빨간 글씨를 만나기 시작합니다. 그게 무섭게 생겨서 그렇지 대부분은 별것 아닙니다. 어디부터 읽어야 하는지 정리하겠습니다.
연재 순서
처음부터 순서대로 따라오시면 됩니다. 앞 편을 안 읽으셨어도 각 글은 따로 읽을 수 있게 썼습니다.
- 1편 · 안 된다고 답해왔던 사람들이 이제 스스로 만듭니다
- 2편 · 바이브코딩이란 무엇인가 — 과장도 폄하도 빼고
- 3편 · 터미널이 무서운 분들께 — 검은 화면과 5분 만에 친해지기
- 4편 · 클로드 코드 vs 코덱스 vs 제미나이 — 뭘 골라야 하나
- 5편 · 주부를 위한 첫 프로그램 — 영수증 정리기 만들기
- 6편 · 중학생도 만드는 웹페이지 — 30분 만에 인터넷에 공개하기 (지금 보고 계신 글)
- 7편 · AI가 시키는 대로 다 했는데 안 될 때 — 에러 읽는 법
막히는 데가 생기면 카카오 오픈채팅에 화면을 그대로 캡처해서 올려주세요.