설치 다음 첫 성공: HTML 파일 하나 열어보기

첫 성공은 파일 하나면 충분해요

준비물은 로그인한 도구 하나, 실습 폴더, 브라우저입니다. 두 도구를 동시에 실행하지 마세요. 같은 폴더를 여러 도구가 동시에 수정하면 어떤 변경인지 파악하기 어려워집니다.

이 실습에서는 Node.js·npm·GitHub·도메인·서버를 사용하지 않습니다. 내가 요청한 파일이 생기고 브라우저에서 열리는 것만 확인합니다.

1. 폴더와 요청을 준비하기

도구에서 code6office-practice 폴더를 엽니다.
기존 index.html이 있는지 확인합니다. 있다면 덮어쓰지 말고 별도 빈 실습 폴더를 만드세요.
에이전트 대화 입력칸에 아래 요청을 보냅니다. 일반 터미널 명령줄에 입력하지 않습니다.

나는 개발을 처음 시작해.
현재 빈 실습 폴더 안에 index.html 파일 하나만 만들어줘.
제목은 '내 첫 웹페이지', 본문은 '작은 시작을 완료했어요.'로 해줘.
스타일은 파일 안에 넣고 외부 이미지·라이브러리는 쓰지 마.
서버 설치, 회원가입, 결제, 외부 배포는 하지 마.
수정할 파일과 확인 방법을 먼저 설명해줘.

파일 생성 요청의 경로를 확인하고 진행합니다. 완성 안내만 믿지 말고 파일 탐색기에 index.html이 생겼는지 확인하세요.

2. 브라우저에서 직접 확인하기

Finder 또는 파일 탐색기에서 실습 폴더를 엽니다.
index.html을 두 번 클릭합니다. 코드 편집기가 열리면 오른쪽 클릭 후 브라우저로 여는 기능을 사용합니다.
주소창이 file:로 시작할 수 있습니다. 이 실습에서는 정상입니다.
요청한 제목과 문장이 보이는지 확인합니다.
AI에게 “본문을 ‘오늘부터 만드는 사람입니다.’로 바꿔줘. 다른 부분은 유지해줘.”라고 요청합니다.
브라우저를 새로고침해 문장이 바뀌는지 확인합니다.

결과가 달라서 진행하기 어렵다면

AI가 만든 결과는 매번 다를 수 있습니다. 구조가 복잡해지거나 오류로 막혔다면 실습 폴더의 index.html을 코드 편집기로 열고, 아래 전체 코드를 붙여넣어 저장합니다. 원래 파일이 필요하면 먼저 별도 이름으로 복사해두세요. 이 코드는 외부 파일·라이브러리·네트워크 요청 없이 화면을 표시합니다.

<!doctype html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="robots" content="noindex, follow">
  <title>내 첫 웹페이지</title>
  <style>
    * { box-sizing: border-box; }
    body { margin: 0; padding: 24px; font-family: system-ui, sans-serif; background: #f2f5eb; color: #203b2d; }
    main { max-width: 640px; margin: 48px auto; padding: 28px; background: white; border-radius: 16px; }
    h1 { font-size: clamp(26px, 6vw, 40px); line-height: 1.3; overflow-wrap: anywhere; }
    p { font-size: 18px; line-height: 1.8; overflow-wrap: anywhere; }
  </style>
</head>
<body>
  <main>
    <h1>내 첫 웹페이지</h1>
    <p>작은 시작을 완료했어요.</p>
  </main>
</body>
</html>

검증용 예제 화면을 브라우저에서 먼저 볼 수도 있습니다. 이 링크는 서버의 예제이며, 내가 만든 로컬 파일과는 별개입니다. 내 결과를 확인할 때는 실습 폴더의 파일을 여세요.

웹사이트가 인터넷에 공개된 건가요?

아닙니다. 로컬 파일을 연 것입니다. 내 컴퓨터의 file: 주소를 다른 사람에게 보내도 그 사람에게 같은 파일은 없습니다. 공개 배포는 이후 별도 단계에서 배웁니다.

페이지가 안 보일 때

코드가 글자로 보여요: 파일 확장자가 .html인지 확인합니다. index.html.txt가 아닌지 살펴봅니다.
이전 문장이 보여요: 저장된 파일과 열어둔 파일이 같은 경로인지 확인하고 새로고침합니다.
서버 실행을 요구해요: 이 요청의 범위를 다시 알려주세요. HTML 하나로 가능한 실습입니다.

완료 기준: 파일이 존재하고, 브라우저에서 보이고, 한 문장 수정이 반영됩니다. 다음은 종료하고 다음 날 이어 하기입니다.

참고 자료

문서·예제 확인: 2026-11-15. 위 전체 HTML을 로컬 HTTP 검증 서버로 열어 제목·본문 표시와 파일 문장 수정 후 새로고침 반영을 확인했습니다. 360px 화면에서 가로 넘침이 없었습니다. 운영체제의 파일 두 번 클릭 동작, 도구별 AI 응답과 macOS·Windows의 모든 설치·로그인 과정을 재현한 것은 아닙니다.

MDN: 첫 웹사이트

다음 실습으로 이어가기

AI와 로컬 사이트 만들기