웹에 올리고 계속 고쳐 나가기

내 컴퓨터의 파일과 웹페이지는 무엇이 다를까

지금까지 우리는 index.html 파일을 만들고 브라우저에서 열어 보았습니다. 이때 주소창을 보면 보통 file:///...처럼 시작합니다. 이 말은 브라우저가 인터넷이 아니라 내 컴퓨터 안의 파일을 직접 열고 있다는 뜻입니다.

이 상태에서는 나만 볼 수 있습니다. 다른 사람에게 파일을 보내면 그 사람도 열어 볼 수는 있지만, 우리가 흔히 말하는 '웹사이트 주소'는 아닙니다.

인터넷에 공개된 웹페이지는 다릅니다. 주소가 보통 https://...로 시작합니다. 누군가 그 주소를 입력하면 브라우저가 인터넷 어딘가에 있는 컴퓨터에 파일을 요청합니다. 그 컴퓨터는 HTML 파일, 이미지 파일, CSS 파일을 보내 줍니다. 브라우저는 그것을 받아 화면에 보여 줍니다.

여기서 인터넷 어딘가에 있는 컴퓨터를 아주 쉽게 말하면 '항상 켜져 있는 저장 공간'이라고 생각하면 됩니다. 그리고 그 공간을 빌려 HTML 파일을 올려 두는 일을 '호스팅'이라고 부릅니다.

AI 생성 이미지

정적 웹사이트 호스팅이 하는 일

우리가 만든 HTML 페이지는 보통 '정적 웹사이트'에 가깝습니다. 정적이라는 말은 어렵게 들리지만, 뜻은 단순합니다. 누가 열어도 같은 파일을 보여 주는 웹사이트라는 뜻입니다.

예를 들어 작은 카페 안내 페이지를 생각해 봅시다.

• 가게 이름

• 소개 문장

• 대표 사진

• 운영 시간

• 위치 안내

• 문의 이메일

이 정보는 방문자마다 다르게 계산될 필요가 없습니다. 이미 만들어 둔 index.html 파일을 그대로 보여 주면 됩니다. 이런 페이지는 정적 웹사이트 호스팅 서비스에 올리기 좋습니다.

정적 웹사이트 호스팅 서비스가 하는 일은 대략 이렇습니다.

1. 내가 만든 HTML 파일과 이미지 파일을 받아 둡니다.

2. 공개 주소를 하나 만들어 줍니다.

3. 누군가 그 주소에 접속하면 index.html을 찾아 보냅니다.

4. HTML 안에 이미지나 CSS 경로가 있으면 그 파일도 함께 불러오게 해 줍니다.

대표적으로 GitHub Pages나 Netlify 같은 서비스가 이런 방식으로 HTML 웹사이트를 공개할 수 있게 도와줍니다. GitHub Pages는 저장소에 파일을 올린 뒤 Pages 설정에서 공개할 branch를 고르면 웹 주소를 받을 수 있고, Netlify는 GitHub 저장소와 연결해 배포하는 흐름을 제공합니다.¹

지금 단계에서 중요한 것은 서비스 이름을 모두 외우는 것이 아닙니다. 핵심은 이것입니다.

내 컴퓨터 안에만 있던 index.html을 인터넷에 연결된 공간에 올리면, 다른 사람도 주소로 볼 수 있습니다.

올리기 전에 폴더를 먼저 정리하기

웹에 올리기 전에 실습 폴더를 한 번 정리해 봅시다. 완성 페이지가 다음처럼 되어 있다고 가정하겠습니다.

my-cafe-site/
  index.html
  images/
    cafe-front.jpg

여기서 index.html은 첫 화면 역할을 합니다. 많은 호스팅 서비스는 폴더의 기본 페이지로 index.html을 찾습니다. 파일 이름을 home.html이나 cafe.html로 바꾸면, 서비스가 첫 페이지를 바로 찾지 못할 수 있습니다.²

이미지 경로도 중요합니다. index.html 안에 다음 코드가 있다고 해 봅시다.

<img src='images/cafe-front.jpg' alt='카페 입구 사진'>

이 코드는 브라우저에게 이렇게 말하는 것과 같습니다.

'현재 HTML 파일이 있는 곳에서 images 폴더를 찾고, 그 안에서 cafe-front.jpg 파일을 찾아 보여 줘.'

그런데 웹에 올리기 전에 폴더 이름을 images에서 image로 바꾸면 어떻게 될까요? HTML은 여전히 images/cafe-front.jpg를 찾습니다. 실제 폴더 이름은 image가 되었으니 파일을 찾지 못합니다. 그러면 이미지가 깨져 보입니다.

파일 이름을 바꿔도 마찬가지입니다.

원래 파일 이름: cafe-front.jpg
바뀐 파일 이름: front.jpg
HTML에 적힌 경로: images/cafe-front.jpg

이 세 가지가 서로 맞지 않으면 브라우저는 이미지를 찾을 수 없습니다. 웹페이지가 갑자기 이상해졌을 때는 먼저 파일 이름과 폴더 이름, HTML 안의 경로가 같은지 확인하면 됩니다.

처음에는 파일 이름을 단순하게 정하는 것이 좋습니다.

• 영어 소문자 사용하기

• 띄어쓰기 대신 - 사용하기

• 파일 이름을 자주 바꾸지 않기

• 이미지를 따로 images 폴더에 모아 두기

예를 들면 cafe front photo.JPG보다 cafe-front.jpg가 관리하기 쉽습니다.

가장 가벼운 공개 흐름

서비스마다 화면과 버튼 이름은 조금씩 다릅니다. 그래도 기본 흐름은 비슷합니다.

1. 내 컴퓨터에서 페이지를 완성합니다.

2. index.html, 이미지 폴더, 필요한 파일이 한 폴더 안에 있는지 확인합니다.

3. 호스팅 서비스에 가입합니다.

4. 파일을 업로드하거나 GitHub 저장소와 연결합니다.

5. 게시 또는 배포 버튼을 누릅니다.

6. 서비스가 만들어 준 https://... 주소를 엽니다.

7. 그 주소를 다른 사람에게 공유합니다.

여기서 '배포'라는 말이 나올 수 있습니다. 배포는 어렵게 생각할 필요가 없습니다. 내가 만든 파일을 사람들이 볼 수 있는 자리로 내보내는 일입니다. 식당 앞에 메뉴판을 걸어 두는 것과 비슷합니다. 내 컴퓨터 안에 있을 때는 주방 안쪽에 놓인 메뉴판이고, 배포한 뒤에는 손님이 볼 수 있는 입구에 걸린 메뉴판입니다.

GitHub Pages를 사용한다면 보통 저장소를 만들고, 파일을 올리고, Settings의 Pages 메뉴에서 공개할 branch를 선택하는 흐름을 따릅니다. 설정이 끝나면 GitHub가 공개 주소를 제공합니다.²

Netlify처럼 GitHub 저장소를 연결해 배포하는 서비스도 있습니다. 저장소를 고르고 기본 설정으로 배포하면 잠시 뒤 공개 주소가 만들어지는 방식입니다.¹

어떤 서비스를 쓰든 처음 목표는 하나입니다. 완벽한 배포 전문가가 되는 것이 아니라, 내가 만든 HTML 페이지를 다른 사람이 열 수 있는 주소로 만드는 것입니다.

웹에 올린 뒤 확인할 것

내 컴퓨터에서 잘 보이던 페이지가 웹에서도 똑같이 보인다고 바로 믿지는 않는 것이 좋습니다. 환경이 달라지면 작은 문제가 보일 수 있습니다.

공개 주소를 받은 뒤에는 다음을 확인해 봅니다.

• 주소를 눌렀을 때 페이지가 열리는가?

• 브라우저 탭 제목이 알맞게 보이는가?

• 이미지가 깨지지 않는가?

• 메뉴나 SNS 링크가 잘 이동하는가?

• 이메일 링크가 예상대로 열리는가?

• 휴대폰 화면에서도 글이 너무 넓거나 작지 않은가?

• 운영 시간, 주소, 전화번호에 오타가 없는가?

가능하면 내 컴퓨터뿐 아니라 휴대폰에서도 열어 보세요. 실제 방문자는 대부분 다양한 화면 크기에서 페이지를 봅니다. 아주 전문적인 테스트가 아니어도 괜찮습니다. 휴대폰에서 읽기 불편한 문장, 너무 큰 이미지, 누르기 어려운 링크를 발견하는 것만으로도 페이지 품질이 좋아집니다.

다른 사람에게 주소를 보내고 이렇게 부탁해도 좋습니다.

'이 페이지가 잘 열리는지 봐 줄래?'

'이미지와 링크가 제대로 보이는지만 확인해 줄래?'

처음 만든 웹페이지는 혼자 오래 들여다보는 것보다, 실제로 누군가에게 열어 보게 할 때 문제가 빨리 드러납니다.

고칠 때는 작게 고치기

웹페이지는 한 번 올리고 끝나는 문서가 아닙니다. 운영 시간이 바뀔 수 있고, 사진을 교체할 수 있고, 새로운 공지를 추가할 수 있습니다.

이때 가장 좋은 습관은 한 번에 크게 고치지 않는 것입니다. 작게 고치고 바로 확인하세요.

추천 흐름은 이렇습니다.

1. 고칠 내용을 하나만 정합니다.

2. 내 컴퓨터의 HTML 파일을 수정합니다.

3. 저장합니다.

4. 브라우저에서 새로고침해 확인합니다.

5. 문제가 없으면 웹에 다시 올립니다.

6. 공개 주소에서 다시 확인합니다.

예를 들어 운영 시간만 바꾸기로 했다면 운영 시간만 바꿉니다. 이미지 교체, 문장 수정, 표 구조 변경을 한꺼번에 하지 않습니다. 한 번에 여러 곳을 고치면 문제가 생겼을 때 어디에서 잘못되었는지 찾기 어렵습니다.

작은 수정은 실수를 줄입니다. 그리고 HTML 실력도 더 잘 쌓입니다. '이번에는 표의 시간만 바꿔 보자', '이번에는 이미지 설명인 alt만 더 정확히 고쳐 보자'처럼 하나씩 다루면 태그의 역할이 자연스럽게 익숙해집니다.

수정 기록을 남기면 안심할 수 있다

페이지를 계속 고치다 보면 이런 일이 생깁니다.

'지난주에는 뭐를 바꿨지?'

'이전 문장이 더 나았던 것 같은데?'

'이미지가 언제부터 안 보였지?'

그래서 수정 기록을 남기는 습관이 중요합니다. 개발자들은 보통 Git 같은 도구로 변경 기록을 관리합니다. Git에서 '커밋'은 특정 시점의 저장 기록이라고 생각하면 됩니다. 사진첩에서 오늘 상태를 한 장 찍어 두는 것과 비슷합니다.

하지만 처음부터 Git을 완벽히 배울 필요는 없습니다. 아주 간단한 방법으로도 시작할 수 있습니다. 실습 폴더 안에 change-log.txt 같은 파일을 만들고 이렇게 적어 보세요.

2026-06-28
- 첫 페이지를 웹에 공개함
- 대표 이미지 경로 확인함

2026-07-02
- 운영 시간을 평일 10:00~19:00으로 수정함
- 인스타그램 링크를 새 주소로 변경함

이 정도만 해도 큰 도움이 됩니다. 나중에 문제가 생겼을 때 최근에 무엇을 바꿨는지 알 수 있습니다.

GitHub를 사용한다면 파일을 수정해 올릴 때 짧은 설명을 남길 수 있습니다. 예를 들면 다음처럼 적습니다.

운영 시간 수정
대표 이미지 교체
문의 이메일 오타 수정

좋은 수정 기록은 길 필요가 없습니다. 나중의 내가 알아볼 수 있으면 충분합니다.

파일을 바꿀 때 조심할 세 가지

웹에 올린 뒤에도 가장 자주 생기는 문제는 파일과 경로입니다. 다음 세 가지만 기억해도 많은 실수를 피할 수 있습니다.

첫째, index.html 이름을 함부로 바꾸지 않습니다. 첫 페이지 역할을 하는 파일이므로 그대로 두는 것이 안전합니다.

둘째, 폴더 구조를 바꾸면 HTML 안의 경로도 함께 바꿉니다. 이미지를 images 폴더에서 photos 폴더로 옮겼다면 src 값도 바꿔야 합니다.

셋째, 대문자와 소문자를 섞지 않습니다. 내 컴퓨터에서는 Cafe.jpg와 cafe.jpg를 비슷하게 봐 주는 경우가 있어도, 웹에서는 다르게 취급될 수 있습니다. 처음부터 소문자로 통일하면 마음이 편합니다.

이 세 가지는 단순하지만 중요합니다. 웹페이지가 깨졌을 때 복잡한 기술 문제라고 생각하기 전에 이름과 위치부터 확인하세요.

이제 진짜 웹페이지가 되었다

HTML을 배운다는 것은 태그 이름을 많이 외우는 일이 아닙니다. 내가 전하고 싶은 정보를 다른 사람이 읽을 수 있는 구조로 정리하는 일입니다.

처음에는 내 컴퓨터에서만 보이던 작은 파일이었습니다. 이제는 주소를 가진 페이지가 될 수 있습니다. 그 주소를 명함에 넣을 수도 있고, SNS 소개에 붙일 수도 있고, 손님이나 친구에게 보낼 수도 있습니다.

앞으로 페이지를 더 좋게 만들고 싶다면 큰 계획보다 작은 수정을 반복해 보세요.

• 소개 문장을 더 분명하게 고치기

• 이미지의 alt를 더 친절하게 쓰기

• 운영 시간 표를 최신 정보로 바꾸기

• 링크 문구를 더 구체적으로 다듬기

• CSS로 여백과 색을 조금 조정하기

웹페이지는 완성품이면서 동시에 계속 고쳐 나가는 문서입니다. 오늘 올린 페이지가 끝이 아닙니다. 오늘의 페이지를 바탕으로 내일 조금 더 읽기 좋게 만들면 됩니다.

그 정도면 충분합니다. 이제 여러분은 HTML 파일을 만들고, 브라우저에서 확인하고, 웹에 올리고, 다시 고쳐 나가는 기본 흐름을 알고 있습니다.

참고

¹How to Publish an HTML Website on Netlify or GitHub Pages

²How to Deploy a Static Website on GitHub Pages: A Step-by-Step Guide