# 웹 개발 소설: 7단계

by 하늘바람 Feb 26. 2025

"오늘은 우리가 만든 웹페이지를 세상과 공유하는 방법에 대해 알아볼 거예요," 선생님이 말했습니다. "아무리 멋진 성을 지어도 아무도 찾아올 수 없다면 무슨 소용이 있을까요?"

선생님은 작은 지도를 펼쳐 보였습니다. 지도에는 수많은 성과 길이 그려져 있었습니다.

"이것이 '웹'이라고 불리는 세계예요. 수많은 웹페이지들이 서로 연결되어 있죠. 우리가 만든 페이지를 이 세계에 올리기 위해서는 '웹 호스팅'이라는 것이 필요해요."

"웹 호스팅은 여러분의 파일들을 보관하고, 다른 사람들이 접근할 수 있게 해주는 서비스예요. 마치 여러분의 성을 위한 땅을 빌리는 것과 같죠."

선생님은 양피지를 세 개의 파일로 나누었습니다:

```

index.html // HTML 코드

styles.css // CSS 코드

script.js // JavaScript 코드

```

"보통은 코드를 이렇게 세 개의 파일로 나누는 것이 좋아요. 그러면 관리하기 더 쉽거든요. HTML 파일에서는 다른 두 파일을 불러오면 돼요."

선생님은 HTML 파일을 수정했습니다:

```html

<!DOCTYPE html>

<html>

<head>

</head>

<body>

</body>

</html>

```

"여기서 `<link rel="stylesheet" href="styles.css">` (스타일시트 파일을 연결하라는 의미)는 CSS 파일을 불러오고, `<script src="script.js"></script>` (스크립트 파일을 실행하라는 의미)는 JavaScript 파일을 불러와요."

선생님은 계속해서 설명했습니다.

"이제 이 파일들을 웹 호스팅 서비스에 업로드해야 해요. 요즘에는 GitHub Pages, Netlify, Vercel 같은 무료 서비스들이 많이 있어요. 이 서비스들은 여러분의 코드를 인터넷에 올리는 것을 도와줘요."

선생님은 작은 마법 지팡이를 흔들어 파일들이 클라우드로 날아가는 모습을 보여주었습니다.

"파일들을 업로드하고 나면, 여러분만의 주소(URL)가 생겨요. 예를 들면 `https://마법사이름.github.io` 같은 형태죠. 이 주소를 알면 누구나 여러분의 웹페이지를 방문할 수 있어요."

선생님은 작은 마법 거울을 꺼내 보였습니다. 거울에는 스마트폰, 태블릿, 노트북 등 다양한 기기에서 우리의 웹페이지가 표시되는 모습이 보였습니다.

"웹의 가장 놀라운 점은 반응형 디자인을 통해 모든 기기에서 잘 보이게 할 수 있다는 거예요. 이를 위해 CSS에 몇 가지 마법 주문을 추가해볼게요."

선생님은 CSS 파일에 다음 코드를 추가했습니다:

```css

/* 반응형 디자인을 위한 미디어 쿼리 */

@media (max-width: 768px) {

nav ul {

flex-direction: column;