[지식루프 웹개발] 002. 웹사이트는 어떻게 만들어질까? (왕초보 가이드)

웹사이트는 어떻게 만들어질까? 

1. 웹사이트의 기본 구조

웹사이트를 만든다는 건 결국 세 가지 언어를 사용하는 거예요.

• HTML → 웹사이트의 뼈대(구조)
• CSS → 뼈대에 색깔과 옷을 입히는 옷(디자인)
• JavaScript → 움직이고 반응하게 만드는 근육(동작)

예를 들어, 사람이 있다면:

• HTML = 뼈대
• CSS = 옷, 헤어스타일
• JavaScript = 걸어 다니고, 말하고, 반응하는 기능

👉 이 세 가지가 합쳐져야만 "진짜 살아있는 웹사이트"가 됩니다.

---

2. 서버(Server)란 무엇일까?

많은 사람들이 “웹사이트 = 서버”라고 생각하는데, 사실 서버는 웹사이트를 저장하고, 다른 사람들에게 배포해주는 컴퓨터일 뿐이에요.

• 개발할 때는?
  → 내 컴퓨터에서만 HTML 파일을 열고 확인하면 돼요. (임시 서버)
• 다른 사람도 접속하게 하려면?
  → 서버(호스팅 서비스)에 업로드해야 해요.

즉, 개발 단계 = 내 컴퓨터 / 서비스 단계 = 서버
이렇게 기억하면 쉽습니다.

---

3. 개발자는 어떻게 작업할까?

1. 내 컴퓨터에서 코드를 작성한다.
2. 브라우저(크롬, 파이어폭스 등)로 실행하며 테스트한다.
3. 완성되면 서버에 업로드해서 전 세계 사용자들이 접속할 수 있도록 한다.

개발자들은 이렇게 "내 PC → 서버" 두 단계를 거칩니다.
즉, 처음부터 서버가 필요한 건 아니라는 거죠.

---

4. 개발을 시작하기 위해 필요한 것: 단 2가지

웹 개발은 생각보다 단순합니다. 시작하는 데 필요한 건 딱 두 가지예요.

(1) 브라우저 (Browser)

• 웹사이트를 실제로 열어보고 확인하는 도구입니다.
• HTML, CSS, JavaScript를 해석해서 사람이 볼 수 있는 모습으로 바꿔 줍니다.
• 크롬(Chrome), 파이어폭스(Firefox)를 추천하는 이유는 개발자 도구(DevTools)가 강력하기 때문이에요.
  (예: 코드 실시간 수정, 에러 확인, 네트워크 속도 체크 등 가능)

👉 쉽게 말해, 브라우저는 웹사이트를 보여주는 번역기라고 할 수 있어요.

(2) HTML 파일

• 웹사이트의 기본이 되는 문서 파일입니다.
• 확장자를 .html로 저장하면 됩니다.
• 안에는 HTML 태그(<h1>, <p>, <a> 등)를 써 넣으면 브라우저가 그걸 읽고 화면에 표시합니다.
• CSS와 자바스크립트도 HTML 파일 안에서 함께 불러올 수 있습니다.

👉 즉, HTML 파일 하나만 있어도 간단한 웹사이트는 만들 수 있다는 거예요.

 

---

5. 운영체제는 중요할까?

많은 초보자들이 묻습니다.
“윈도우를 써야 하나요? 맥을 써야 하나요? 리눅스가 더 좋은가요?”

정답은: 상관없습니다.

• 윈도우, 맥, 리눅스 어떤 환경이든 웹사이트는 똑같이 만들어지고, 똑같이 실행됩니다.
• 단지 개발자가 익숙한 환경을 쓰면 되는 거예요.

강의에서는 맥을 사용하지만, 여러분이 윈도우나 리눅스를 써도 문제 없습니다.

---

6. 정리

• 웹사이트는 HTML(구조) + CSS(디자인) + JS(동작) 으로 구성된다.
• 서버는 “저장 & 배포” 역할일 뿐, 개발할 때는 내 컴퓨터만 있으면 된다.
• 개발에 필요한 건 딱 두 가지: 브라우저 + HTML 파일
• 특별한 프로그램 설치 없이 메모장만으로도 웹사이트를 만들 수 있다.
• 운영체제는 전혀 상관없다.

 

 

왜 웹 개발자들은 VS Code를 사용할까?

1. 메모장만으로도 충분하지 않나요?

네, 맞습니다.
HTML, CSS, JavaScript는 그냥 텍스트 파일이라서 메모장(Notepad) 같은 단순 편집기로도 작성할 수 있습니다.

하지만 문제가 있어요:

• 코드가 길어지면 가독성이 떨어짐
• 오류가 있어도 어디가 잘못됐는지 알기 어려움
• 파일을 여러 개 다룰 때 정리하기 불편함

그래서 초보자도 조금만 배우면 훨씬 편한 도구인 코드 에디터를 쓰는 게 좋아요. 그중 가장 널리 쓰이는 게 바로 VS Code입니다.

---

2. VS Code란?

**VS Code (Visual Studio Code)**는 마이크로소프트에서 만든 무료 오픈소스 코드 편집기입니다.

• 무료로 쓸 수 있고
• 윈도우, 맥, 리눅스 어디서든 설치 가능하고
• 전 세계 개발자들이 가장 많이 사용하는 도구 중 하나예요.

👉 쉽게 말해, 개발자용 슈퍼 메모장이라고 할 수 있습니다.

---

3. VS Code를 쓰면 좋은 이유

(1) 코드 색상 강조 (Syntax Highlighting)

HTML, CSS, JS 코드를 그냥 쓰면 글자만 잔뜩 보이죠.
VS Code는 태그, 속성, 값, 함수 등을 자동으로 색깔별로 구분해 줍니다.

→ 코드가 눈에 잘 들어오고, 실수를 줄일 수 있어요.

---

(2) 자동 완성 기능 (Auto-complete)

예를 들어 <div>를 입력하면, VS Code는 </div>를 자동으로 닫아 줍니다.
CSS에서 color:라고 쓰면 가능한 속성들을 자동으로 추천해 주기도 합니다.

→ 초보자도 훨씬 빠르고 정확하게 코딩할 수 있어요.

---

(3) 오류 체크 (Error Highlighting)

괄호를 안 닫았다든가, 철자를 틀렸다든가 하면
VS Code가 빨간 밑줄로 표시해 줍니다.

→ "어디가 잘못됐는지" 바로 알 수 있어요.

---

(4) 확장 기능 (Extensions)

VS Code에는 수많은 플러그인(확장 기능)이 있습니다.

• 코드 자동 포맷팅 (Prettier)
• GitHub 연동
• Live Server (HTML 파일을 바로 브라우저에서 미리보기)
• 테마 변경

→ 필요에 따라 나에게 맞는 기능을 추가할 수 있어요.

---

(5) 프로젝트 관리

웹사이트는 보통 여러 개의 파일(HTML, CSS, JS, 이미지, 폰트 등)로 구성됩니다.
메모장으로는 이런 걸 한눈에 관리하기 어렵지만,
VS Code는 폴더 단위로 프로젝트를 열고 파일을 정리할 수 있어요.

→ 큰 프로젝트도 쉽게 관리 가능합니다.

---

4. 초보자가 특히 좋아할 기능: Live Server

웹 개발 초보자라면 Live Server 확장 기능은 꼭 써보세요.

• HTML 파일을 저장할 때마다,
• 브라우저가 자동으로 새로고침 되면서 결과가 바로 반영됩니다.

👉 일일이 브라우저에서 새로고침 버튼 누르지 않아도 되니, 작업 속도가 엄청 빨라집니다.

---

5. 정리

메모장으로 시작해도 되지만, VS Code를 쓰면 훨씬 편합니다.

• 코드 색상 강조
• 자동 완성
• 오류 체크
• 확장 기능
• 프로젝트 관리

이런 기능 덕분에 전 세계 대부분의 웹 개발자가 VS Code를 선택하고 있어요.

---

👉 결론:
웹 개발 입문자라면 VS Code 설치는 필수라고 생각해도 될 정도입니다.
크롬(브라우저)와 VS Code(에디터), 이 두 가지를 준비하면 웹 개발의 기본 환경이 갖춰집니다.