HTML 홈페이지 한 장은 AI에게 index.html 파일 하나로 짜 달라고 하고, MDN이 안내하는 기본 뼈대가 들어갔는지 확인하면 만들 수 있습니다.
뼈대는 <!doctype html>, <html>, <head>, <meta charset="utf-8">, <title>, <body>입니다.
여기에 휴대폰 화면용 viewport 한 줄과 그림 설명(alt)까지 보면 기본은 갖춥니다. MDN Web Docs는 HTML 같은 웹 기술을 설명하는 학습 문서입니다. 2026년 10월 21일 MDN 문서를 직접 읽고 AI가 짠 파일을 확인하는 순서로 정리했습니다.
1. 홈페이지 만들기 html, AI로 한 장 짤 수 있나요?
네. 소개용 홈페이지 한 장은 HTML 파일 하나로 만들 수 있고, 그 파일의 글을 AI에게 짜 달라고 할 수 있습니다. HTML은 웹 페이지의 내용과 구조를 적는 언어이고, 파일은 텍스트 편집기로 여는 글자 파일입니다.
다만 AI가 준 코드는 그대로 믿지 말고 한 번 열어 봐야 합니다. 빠진 줄이 있으면 글자가 제대로 안 보이거나 휴대폰에서 글자가 작게 보일 수 있기 때문입니다. 뼈대, viewport, 파일 이름과 그림 설명을 차례로 확인하면 됩니다.
어떤 AI 도구를 쓸지는 AI 코딩 도구 총정리에서 비교했습니다. 이 글은 어느 도구를 쓰든 결과 파일을 확인하는 법을 다룹니다.
2. MDN이 보여 주는 HTML 한 장의 뼈대
MDN 「Basic HTML syntax」 문서는 아주 단순한 완성 웹 페이지를 이렇게 보여 줍니다. 아래는 그 예시에서 언어 표시(ko)와 예시 글자를 한국어로 바꾼 것입니다.
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8" />
<title>페이지 제목</title>
</head>
<body>
<p>본문</p>
</body>
</html>
맨 윗줄 doctype은 이 파일이 HTML 문서라는 표시입니다. MDN은 이 줄을 모든 웹 페이지 맨 위에 넣으라고 적었습니다.
"<!doctype html> is the shortest string of characters that counts as a valid doctype, and it should be included at the top of all webpages."
가장 짧은 올바른 doctype이니 모든 페이지 맨 위에 넣으라는 뜻입니다.
head에는 화면에 안 보이는 정보가, body에는 보이는 내용이 들어갑니다. meta charset="utf-8"은 글자 인코딩을 정해 여러 언어가 제대로 보이게 하고, title은 브라우저 탭에 뜨는 제목입니다. MDN은 html 태그에 lang으로 페이지 언어를 정하라고도 권합니다.
3. AI에게 부탁할 때 적을 것
AI에게는 「파일(index.html 하나, 한국어), 휴대폰 화면, 들어갈 내용」 세 가지를 처음부터 적어 주는 것이 좋습니다. 그래야 확인할 것이 줄어듭니다. 예를 들면 이렇게 씁니다.
「회사 소개 홈페이지를 index.html 파일 하나로 만들어 줘. html 태그에 lang="ko", head에 meta charset="utf-8"과 viewport를 넣어 줘. 회사 소개, 하는 일 세 가지, 연락처 순서로 하고, 그림에는 alt 설명을 달아 줘.」
회사 소개, 연락처 같은 실제 내용은 사장님이 직접 적어 넣습니다. AI가 채운 예시 문구나 전화번호가 그대로 남지 않았는지도 봅니다.
4. 휴대폰에서 보이게 하는 viewport 한 줄
MDN 문서에 따르면 일부 휴대폰 브라우저는 화면보다 넓은 가상 화면에 페이지를 그린 뒤 줄여서 보여 줍니다. 그러면 글자가 작게 보입니다. 이를 막는 것이 viewport 메타 태그입니다.
MDN이 권장하는 설정은 <meta name="viewport" content="width=device-width" />입니다. 화면 너비를 기기 너비에 맞추라는 뜻이고, head 안에 넣습니다. AI가 짠 파일에 이 줄이 있는지 확인합니다.
5. 파일 이름과 그림 설명 확인하기
첫 화면 파일 이름은 index.html로 둡니다. MDN은 index.html이 대개 사이트에 처음 들어왔을 때 보이는 홈페이지 내용을 담는다고 설명합니다.
파일과 폴더 이름은 영어 소문자로, 띄어쓰기 없이, 낱말 사이는 하이픈(-)으로 적으라고 MDN은 권합니다. 웹 주소에서 띄어쓰기가 %20으로 바뀌어 문제가 생길 수 있기 때문입니다.
그림 태그의 alt는 그림을 볼 수 없는 사람에게 그림을 설명하는 글입니다. MDN은 뜻이 있는 그림이라면 모두 설명을 달라고 적었습니다. AI가 alt를 비워 두었다면 채웁니다.
6. 내 컴퓨터에서 열어 보고 올리기
만든 파일은 저장한 뒤 웹 브라우저로 엽니다. MDN은 파일을 오른쪽 클릭해 「Open With」에서 브라우저를 고르거나, 파일을 브라우저 창에 끌어다 놓는 방법을 안내합니다.
MDN이 설명하는 가상 화면 문제는 일부 휴대폰처럼 좁은 화면 기기에서 생깁니다. 파일에 viewport 줄이 있는지 직접 보고, 올린 뒤에는 실제 휴대폰으로 열어 글자가 읽히는지 확인합니다. 인터넷에 올리는 방법은 깃허브로 웹사이트 무료 배포하기에 정리했습니다.
이 블로그를 운영하는 AiApp에서는 코딩을 몰라도, 만들고 싶은 것을 말로 설명하면 AI가 화면과 기능을 만들고 클릭 한 번으로 실제 주소에 공개합니다(호스팅 포함). HTML 파일과 올릴 곳을 따로 챙기기 부담스럽다면 이런 길도 있습니다.
정리하면 AI로 HTML 홈페이지 한 장을 만드는 순서는 이렇습니다.
- AI에게 index.html 하나, 한국어, viewport, 들어갈 내용을 적어 부탁합니다
- doctype·html·head·meta charset·title·body 뼈대가 있는지 봅니다
- viewport 한 줄과 그림 alt가 있는지 봅니다
- 예시 문구를 내 내용으로 바꾸고 브라우저로 열어 봅니다
세 가지 제작 방법 전체는 홈페이지 제작 방법, 세 가지 길 총정리에 있습니다. 코드 없이 만들려면 구글 무료 홈페이지 만들기, 사이트 도구로를, 사업자 홈페이지를 어디서 시작할지는 개인 사업자 홈페이지 만들기, 어디서 시작할까?를 보세요.
참고자료 (모두 2026년 10월 21일 확인)
- MDN 「Basic HTML syntax」 — developer.mozilla.org
- MDN 「What's in the head? Web page metadata」 — developer.mozilla.org
- MDN 「<meta name="viewport"> HTML attribute value」 — developer.mozilla.org
- MDN 「Dealing with files」 — developer.mozilla.org
#홈페이지만들기html #HTML홈페이지 #AI홈페이지 #MDN #홈페이지만들기
