[인터넷프로그래밍]인터넷 프로그래밍 개요와 웹 프로젝트 환경 구축

728x90

웹 개발을 시작하려는 분들이라면 가장 먼저 알아야 할 것이 바로 ‘인터넷과 웹의 기본 구조’입니다. 이 글에서는 인터넷과 웹의 차이, 웹 표준의 중요성, HTML5의 핵심 기능, 그리고 웹 프로젝트 실습 환경 구축 방법까지 차근차근 공부해 봅시다~!

1. 인터넷과 웹의 차이

많은 분들이 인터넷과 웹을 같은 의미로 사용하지만, 사실 둘은 다릅니다.

인터넷(Internet): 전 세계 컴퓨터들이 서로 연결된 네트워크입니다. 이메일, 파일 공유, 웹 등 다양한 서비스가 여기에 포함됩니다.
웹(Web): 인터넷 위에서 동작하는 하나의 서비스로, 우리가 흔히 사용하는 웹사이트나 웹페이지는 모두 웹의 일부입니다.

즉, 웹은 인터넷의 일부이며, 웹 브라우저를 통해 접근하는 인터넷 서비스라고 이해하면 됩니다.

2. 웹 브라우저와 웹 표준

✔ 웹 브라우저

웹 브라우저는 사용자가 웹사이트에 접속하고 콘텐츠를 볼 수 있도록 도와주는 프로그램입니다. 대표적인 웹 브라우저로는 Chrome, Edge, Firefox, Safari 등이 있습니다.

✔ 웹 표준

웹 표준은 웹 문서를 어떤 브라우저에서든 동일하게 해석할 수 있도록 정해놓은 규칙입니다. 대표적인 표준으로는 HTML, CSS, JavaScript가 있으며, 이를 제대로 지켜야 웹사이트가 모든 환경에서 안정적으로 동작합니다.

✔웹 브라우저 전쟁의 시작: 모자이크에서 모질라까지

오늘날 우리는 크롬, 사파리, 파이어폭스 등 다양한 웹 브라우저를 자유롭게 사용할 수 있지만, 여기까지 오기까지는 치열한 '웹 브라우저 전쟁'이 있었습니다. 이 전쟁은 단순한 프로그램 경쟁이 아니라, 인터넷의 주도권을 건 거대한 싸움이었죠.

(1) 모자이크(Mosaic)의 등장 – 웹 브라우저의 태동

1993년, 미국 NCSA(국립 슈퍼컴퓨팅 응용센터)는 모자이크(Mosaic)라는 웹 브라우저를 최초로 공개합니다.
이 브라우저는 그래픽 사용자 인터페이스(GUI)를 도입해, 텍스트 중심의 인터넷에서 시각적인 웹 환경으로의 전환을 이끌었습니다.

🌐 최초의 GUI 웹브라우저 = 인터넷 대중화의 불씨

(2) 넷스케이프의 폭발적인 성공

모자이크 개발에 참여했던 마크 안데르센(Marc Andreessen)은 이후 넷스케이프 커뮤니케이션즈를 설립하고, 넷스케이프 내비게이터를 출시합니다.

빠른 속도, 안정적인 성능, 직관적인 UI 덕분에 넷스케이프는 빠르게 시장을 장악했고
1990년대 중반에는 웹 브라우저 시장의 90% 이상을 차지할 만큼 폭발적인 성공을 거뒀습니다.

🚀 넷스케이프 = 최초로 상업적인 성공을 거둔 웹 브라우저

(3) 마이크로소프트의 반격과 IE의 강제 탑재

넷스케이프의 독주를 견제하고자 마이크로소프트는 인터넷 익스플로러(IE)를 발표합니다.
이후 IE를 윈도우 운영체제에 기본으로 강제 탑재하며 시장을 잠식해 나갔습니다.

기술적인 성능은 넷스케이프에 미치지 못했지만
운영체제 점유율을 무기로 시장을 잠식, 점점 넷스케이프의 입지를 좁혀나감

넷스케이프는 반격을 위해 소스코드를 전면 공개하고, 비영리 단체인 모질라 재단(Mozilla Foundation)을 설립합니다.
이 결정은 이후 오픈소스 웹 브라우저의 시대를 여는 계기가 됩니다.

💥 마이크로소프트 vs 넷스케이프 = 브라우저 전쟁의 절정

(4) AOL의 인수, 그리고 몰락

1998년, 미국의 대표적인 인터넷 서비스 업체 아메리카 온라인(AOL)이 넷스케이프를 인수합니다.
하지만 브라우저 시장은 이미 IE의 점유율이 90%를 넘기고 있었고, 넷스케이프는 점점 존재감을 잃어갔습니다.

AOL은 넷스케이프를 재건하지 못했고
결국 넷스케이프는 역사 속으로 사라지게 됩니다.

다만, 이때 남겨진 오픈소스 프로젝트가 ‘모질라 파이어폭스’로 부활하며 IE의 독점을 흔드는 중요한 역할을 하게 되죠.

🔄 넷스케이프는 졌지만, 오픈소스는 살아남았다

🔚 그래서 결국: 브라우저 전쟁이 남긴 것

웹 브라우저 전쟁은 단순한 기술 경쟁이 아니었습니다.
누가 웹의 문을 열 수 있는 '열쇠'를 쥐는가에 대한 권력 싸움이었죠.

오늘날 크롬, 파이어폭스, 사파리 등 다양한 브라우저가 공존하는 이유는
이 치열한 경쟁 덕분에 웹 표준이 강화되고, 사용자 중심의 기술 발전이 가능했기 때문입니다.

웹 개발의 역사는 곧 표준화와의 싸움이었습니다. 특히 HTML5의 등장은 웹 기술에 대전환을 일으켰고, 브라우저 시장에도 큰 영향을 미쳤습니다. 이번 글에서는 웹 표준의 발전 과정을 중심으로, 브라우저 생태계가 어떻게 변해왔는지도 공부해 봅시다.

1. WHATWG의 등장 – 웹 애플리케이션 1.0

2004년, 웹 기술의 미래를 걱정하던 개발자 그룹은 WHATWG(Web Hypertext Application Technology Working Group)를 결성합니다.
W3C의 XHTML 중심 정책에 반발하며, 현실적인 웹 애플리케이션 중심의 표준을 직접 만들기 시작했죠.

그 결과물이 바로 Web Applications 1.0, 즉 HTML5의 전신입니다.
이 표준은 기존 HTML을 버리지 않고 확장하는 방향을 택해, 더 유연하고 실용적인 웹 개발이 가능하게 했습니다.

2. W3C의 수용 – HTML5 공식 표준화

처음에는 다른 길을 걸었던 W3C(World Wide Web Consortium)도 결국 현실을 인정합니다.
WHATWG의 표준을 수용하여 HTML5를 공식 웹 표준으로 채택하면서 두 조직은 협력 체제로 전환하게 됩니다.

이로 인해 HTML5는 다양한 멀티미디어 기능과 시맨틱 태그, 향상된 입력 요소 등
현대적인 웹 환경에 필수적인 요소들을 담은 강력한 언어로 진화했습니다.

3. IE의 낙오 – 호환성의 악몽

하지만 모든 브라우저가 HTML5를 잘 받아들인 것은 아니었습니다.
마이크로소프트의 인터넷 익스플로러(IE)는 최신 웹 표준을 지원하지 못하면서 개발자와 사용자 모두에게 골칫거리가 되었죠.

ActiveX, 독자적 렌더링 방식 등으로 인해 웹 호환성 이슈가 끊이지 않았고
HTML5 기반 사이트는 IE에서 제대로 작동하지 않는 경우도 많았습니다.

📛 웹 표준을 무시한 대가는 브라우저 시장에서의 급격한 퇴장이었습니다.

4. 빠른 업데이트, 치열한 경쟁

반면, 크롬(Chrome), 파이어폭스(Firefox), 사파리(Safari), 엣지(Edge) 등은 HTML5 표준을 빠르게 수용하며 사용자 경험을 최우선으로 개선했습니다.

자동 업데이트 시스템을 통해 항상 최신 표준을 반영하며
웹 개발자들이 특정 브라우저에 맞춰 따로 코딩할 필요가 줄어들었습니다.

또한, 각 브라우저들은 자신들만의 엔진 최적화, 확장 기능, 보안성, 속도 개선 등을 내세우며 치열한 마케팅 경쟁에 돌입했습니다.

💡 그 결과, 오늘날의 웹은 ‘하나의 코드로 모든 브라우저에서 동일하게 작동’하는 이상에 점점 가까워지고 있습니다.

HTML5의 도입은 단순한 기술 변화가 아니라 웹 플랫폼 전체의 생태계를 바꾼 전환점이었습니다.
웹 표준을 중심으로 브라우저들이 협력과 경쟁을 반복한 덕분에, 우리는 더 빠르고 안전하며 풍부한 웹 환경을 누릴 수 있게 되었습니다.

💡 한 줄 요약

모자이크가 문을 열었고, 넷스케이프가 질주했으며, 마이크로소프트가 잠시 왕좌에 올랐고, 오픈소스는 결국 살아남았다.ㅎ

3. 웹 동작 원리

웹은 클라이언트(사용자)와 서버(웹사이트 제공자) 간의 요청과 응답으로 작동합니다.

사용자가 웹 브라우저에서 주소(URL)를 입력하면
브라우저는 해당 주소에 있는 웹 서버에 요청(Request)을 보냅니다.
웹 서버는 요청을 받아 HTML, CSS, JS 파일을 응답(Response)합니다.
브라우저는 받은 파일을 해석해 사용자에게 보여줍니다.

이러한 구조를 클라이언트-서버 모델이라고 부르며, 웹의 기본적인 동작 원리입니다.

4. 웹 표준과 HTML5의 주요 기능

HTML5는 기존 HTML의 최신 표준이며, 웹 개발에서 중심적인 역할을 합니다. HTML5는 웹의 다양한 기능을 강화하며, 특히 다음과 같은 기능이 강화되었습니다.

시맨틱 태그: <article>, <section>, <header>, <footer> 등 구조적 의미를 부여
미디어 지원: <audio>, <video> 태그로 별도 플러그인 없이 멀티미디어 재생 가능
폼 기능 개선: 날짜 선택, 이메일 형식 입력, 자동 검증 등 입력 요소 향상
로컬 저장소: 웹 브라우저 내 데이터 저장 (LocalStorage, SessionStorage)
캔버스(Canvas) API: 2D 그래픽 및 애니메이션 구현 지원

5. HTML5의 장점

HTML5를 사용하면 다음과 같은 이점을 누릴 수 있습니다.

모바일 친화성: 반응형 웹 개발에 최적화
플러그인 없는 멀티미디어 지원: Flash 없이 동영상·오디오 가능
빠른 로딩 속도와 성능 향상
표준화된 코드로 유지보수 용이
브라우저 간 호환성 우수

이러한 이유로 HTML5는 오늘날 대부분의 웹 개발 프로젝트에서 필수적으로 사용됩니다.

6. 웹 실습 환경 구축

1) 기본 편집기 설치

추천 도구: Visual Studio Code
→ 가볍고 확장성이 뛰어난 코드 편집기

2) 웹 브라우저 설치

권장: Chrome 또는 Edge
→ 개발자 도구(F12)를 이용한 디버깅 가능

3) 로컬 서버 구축 (선택)

초급: HTML 파일을 그냥 열어도 OK
중급 이상: Live Server 확장 기능 (VS Code에서 실시간 미리 보기)

4) 폴더 구조 구성

MyWebProject/
├── index.html
├── css/
│ └── style.css
├── js/
│ └── script.js
└── images/

이 구조를 통해 HTML, CSS, JS 파일을 체계적으로 관리할 수 있습니다.

마무리

웹 프로그래밍을 시작하기 위한 첫걸음은 기초 개념을 제대로 이해하는 것입니다. 인터넷과 웹, 웹 브라우저의 역할, HTML5의 장점과 기능, 그리고 실습 환경 구축까지 탄탄하게 다져두면 앞으로의 프로젝트 진행이 훨씬 수월해질 것입니다.

🌐 기술은 끊임없이 변하지만, 웹의 중심에는 언제나 사람과 연결이 있습니다.
익숙한 브라우저 하나에도, 수많은 고민과 선택의 역사가 담겨 있죠.
오늘 우리가 누리는 편리한 웹 환경은 어제의 치열한 도전 위에 세워졌다는 걸, 문득 기억해 봅니다.

오늘 공부 끝!!ㅎ