프로젝트에서 보기 →

프론트엔드, 백엔드 개발자를 위한 HTML5, CSS3 강의 03강 - 웹의 탄생배경

태그
기타 프론트엔드 백엔드 html
시작일
종료일
수정일

https://www.youtube.com/watch?v=wLqfAvVwqiI

1. 이건 꼭 알아야 한다[^1]

[? 질문] 웹(월드와이드웹)은 어떤 필요성 때문에 만들어졌는가[^2]
[= 답] CERN(입자 가속기 연구가 이뤄지는 물리 연구소)에서 쏟아지는 방대한 연구 문서/지식을 더 빠르게 찾기 위해, 문서 안의 용어·참조를 다른 문서로 즉시 연결하는 하이퍼텍스트(하이퍼링크) 필요가 생겼고, 이것이 웹의 출발점이 되었다.[^2][^8][^9]

[? 질문] 왜 초기의 하이퍼텍스트/웹은 곧바로 대중적으로 널리 쓰이지 못했는가[^10]
[= 답] 초창기 컴퓨팅 환경이 일반인에게 낯선 프롬프트(텍스트 기반) 환경 중심이었고, 키보드로 명령을 입력하는 방식(예: ‘독수리 타법’ 수준의 입력 경험)이 대중 확산에 장벽이었기 때문이다.[^10][^11][^12]

[? 질문] 웹이 대중화되면서 무엇이 핵심 사용 경험을 바꿨는가[^13]
[= 답] 윈도우 같은 GUI 환경의 확산과, 그 환경에서 하이퍼링크를 마우스로 클릭해 이동할 수 있는 **웹브라우저(초기 브라우저 → 넷스케이프 내비게이터 등)**의 등장이 ‘클릭하며 탐색하는 브라우징’을 가능하게 하며 웹 사용을 폭발적으로 자연스럽게 만들었다.[^13][^14][^15]

2. 큰 그림[^2]

이 강의는 “웹이 왜 생겼는가”를 역사적 맥락(연구 현장, 당시 컴퓨터 사용 방식, 서비스의 경쟁 구도)을 통해 설명한다.[^2][^8] 특히 하이퍼텍스트라는 아이디어가 어떤 문제(문서 탐색의 비효율)를 해결하려 했는지, 그리고 GUI/브라우저 등장 전후로 웹의 채택이 어떻게 달라졌는지를 따라간다.[^9][^10][^13]

  • 웹의 탄생 배경에는 ‘멋진 기술’ 이전에 문서를 빠르게 찾고 연결해야 하는 필요가 있었다.[^2][^8][^9]
  • 웹의 확산은 기술 자체만이 아니라 사용자 인터페이스(프롬프트 → 윈도우/마우스) 변화와 맞물려 일어났다.[^10][^13]
  • 웹을 이해하려면 문서를 제공하는 웹 서버와 요청하는 **웹 클라이언트(브라우저)**라는 기본 구조로 이어서 생각해야 한다(다음 강의 예고).[^^26]

3. 하나씩 살펴보기[^2]

3.1 오늘 강의의 목적: ‘웹은 왜 필요했나’를 보자[^2][^3][^4]

📸 0:04

강사는 인사 후, 오늘은 ‘웹’이라는 것이 어떤 필요성에 의해 만들어졌는지를 알아보겠다고 목표를 제시한다.[^2][^4] 즉, HTML/CSS 같은 기술 설명에 들어가기 전에 “웹이 왜 만들어졌는지”라는 배경을 먼저 잡아, 이후 개념(하이퍼링크, 태그, 서버/클라이언트)을 이해하기 쉬운 토대를 놓으려는 흐름이다.[^4][^23][^24]

3.2 웹을 만든 사람: 팀 버너스-리, 그리고 1990년의 문제의식[^5][^6][^7]

📸 0:17

강의는 웹의 발명과 관련된 인물로 **팀 버너스-리(Tim Berners-Lee)**를 언급한다.[^5][^6] 강사는 (표현이 다소 혼재되어 있지만) 1990년에 ‘하이퍼텍스트’에 대한 필요를 느끼고, 그것을 이용한 문서를 만들자는 발상을 하게 된 맥락으로 넘어간다.[^7]

여기서 포인트는 “웹이 ‘갑자기’ 나온 게 아니라, 당시 현장에서 문서를 다루는 방식이 비효율적이었고 그걸 바꾸려는 필요가 있었다”는 전제다.[^7][^9]

3.3 CERN(물리 연구소) 맥락: 입자 가속기와 방대한 연구 문서[^8][^9]

📸 0:41

강사는 특정 지역/기관(물리학자들이 모여 있는 곳)으로 장면을 가져가며, 그곳이 왜 물리학자 중심인지 배경을 설명한다.[^8] 그 지역/기관의 상징처럼 거대한 링 형태의 시설이 소개되는데, 이는 입자 가속기라고 설명한다.[^9]

입자 가속기가 무엇인지도 “왜 이런 곳에서 문서 문제가 심각해졌는지”를 보여주기 위해 풀어서 말한다.[^9]

  • 입자 가속기는 물질을 구성하는 요소를 알아보기 위해
    • 입자를 매우 빠르게(빛의 속도에 가깝게) 돌리고[^9]
    • 입자끼리 충돌시키며[^9]
    • 그 결과로 나오는 “쪼개진 입자/현상”을 관찰해 물질의 구성 단위를 연구하는 실험 장치/환경이라고 설명한다.[^9]

이런 연구 환경에서는 실험 결과, 해석, 참고 자료, 관련 논문/문서 등 다양한 내용이 엄청나게 쏟아질 수밖에 없다는 흐름으로 이어진다.[^10] 강사는 “연구하다 보면 다양한 내용이 쏟아지겠죠”라고 말하며, 많은 문서가 생산되는 상황을 전제한다.[^10]

3.4 문제의 핵심: 문서 안에서 ‘관련 내용’을 찾는 데 시간이 너무 오래 걸렸다[^10][^11]

📸 1:30

강사는 이 연구 현장에 있는 인물이 물리학자가 아니라 소프트웨어 엔지니어(팀 버너스-리를 가리키는 맥락)라고 두고, 그가 필요성을 느꼈다고 말한다.[^10][^11]

여기서 제기되는 구체 문제는 다음과 같이 전개된다.[^11]

  • 문서를 읽다 보면, 어떤 용어/참조/추가 정보가 필요해진다.[^11]
  • 그런데 그 “관련 내용을 더 찾아보려면” 문서를 다시 복잡하게 찾아야 하고, 그 과정이 시간이 많이 걸렸다.[^11]
  • 이 비효율을 해결하기 위해 “하이퍼텍스트”를 제안하게 되었다.[^12]

즉, 웹의 출발점은 “인터넷에 예쁜 페이지를 띄우자”가 아니라, 연구 문서의 탐색/연결 비용을 줄이자는 실무적 요구로 묘사된다.[^11][^12]

3.5 하이퍼텍스트란 무엇인가: 파란 밑줄(링크)로 문서 간을 즉시 이동[^12][^13]

📸 1:51

강사는 하이퍼텍스트를, 많은 사람이 알고 있는 파란색 밑줄 텍스트(클릭 가능한 링크)로 설명한다.[^12][^13]

이 개념을 이해시키기 위해 “문서를 읽다가 특정 단어가 나오는 상황”을 예로 든다.[^13]

  • 어떤 문서를 읽다가 ‘무궁화’라는 단어(예시)가 등장한다.[^13]
  • 읽는 사람은 “이게 뭐지?”라고 생각할 수 있다.[^13]
  • 그 단어가 파란색(하이퍼링크)으로 걸려 있으면[^13]
  • 클릭만으로 ‘무궁화’를 설명하는 문서/내용으로 이동해 쉽게 찾아볼 수 있다.[^13]

이 예시의 의도는 “문서의 흐름을 끊지 않고, 필요한 정의/배경지식/관련 항목으로 바로 점프한다”는 하이퍼텍스트의 효용을 직관적으로 전달하는 것이다.[^13]

정리하면, 강의가 제시하는 하이퍼텍스트의 기능은:

  • 용어/주제의 관련 문서들을 연결해[^14]
  • 사용자가 문서를 더 쉽게 찾아보도록 만드는 방식이며[^14]
  • 이를 연구자(물리학자)들에게 제안했고 프로젝트로 진행되었다는 흐름이다.[^14]

3.6 초기에는 ‘너무 당연한 클릭 검색’이 당연하지 않았다: 채택의 장벽[^15][^16]

📸 2:49

강사는 “지금은 웹브라우저에서 클릭해서 문서를 검색하는 게 너무 자연스럽지만, 초창기에는 실제로 많은 부분에서 사용되지 않았다”고 말한다.[^15]

그 이유를 “일반인이 컴퓨터에서 문서를 보던 환경”으로 연결해 설명한다.[^16]

  • 당시 일반인들이 문서를 보는 방식은 윈도우 같은 GUI가 아니라 **프롬프트 환경(텍스트 기반)**에 가까웠다.[^16]
  • 프롬프트 환경에서 키보드로 조작하는 것은 일반인에게 거리감이 있었다.[^16]
  • 심지어 컴퓨터를 접하더라도 키보드를 능숙하게 쓰지 못해, 한 글자씩 찍는 ‘독수리 타법’ 수준의 입력 경험이 흔했다는 식으로 묘사한다.[^17]

즉, 하이퍼텍스트가 유용하더라도, 그것을 편하게 누르고(클릭) 이동하는 UX가 정착되기 전에는 대중이 받아들이기 어려웠다는 논리다.[^16][^17]

3.7 전환점: 윈도우 환경 + 웹브라우저 등장, 그리고 넷스케이프[^18][^19][^20]

📸 3:45

이후 컴퓨터 환경이 **윈도우(그래픽 UI)**로 바뀌면서 상황이 달라진다고 설명한다.[^18]

강의의 전개는 다음과 같다.[^18][^19]

  • 윈도우 환경이 등장하고[^18]
  • 그 환경에서 하이퍼링크를 표현할 수 있는 웹브라우저(오늘날 말하는 브라우저)의 초기 형태가 만들어졌다.[^19]
  • 이 흐름 속에서 ‘최초 브라우저’ 언급과 함께, 이후 회사를 차리고 제품으로 이어지는 맥락에서 **넷스케이프 내비게이터(Netscape Navigator)**를 언급한다.[^20]

또한 강사는 90년대 후반에 이르러서는 **인터넷 익스플로러(Internet Explorer)**가 시장을 잠식해 갔다고 말하며, 브라우저 경쟁 구도도 짚는다.[^21]

여기서 강의의 의도는 “기술이 좋아서가 아니라, 사용자들이 쓰기 쉬운 GUI/브라우저가 갖춰질 때 웹이 대중화되기 시작했다”는 인과를 강화하는 것이다.[^18][^19][^21]

3.8 ‘웹이 없었다면?’ 문서 검색은 어떻게 했을까: 고퍼(Gopher)와 디렉토리(목차) 검색[^22][^23]

📸 4:55

강사는 질문을 던진다.[^22]

[? 질문] 월드와이드웹(하이퍼텍스트 기반)이 없었다면 인터넷에서 문서를 어떻게 봤을까? 어떻게 검색/요청했을까?[^22]
[= 답] 실제로 웹이 나왔어도 한동안은 고퍼(Gopher) 같은 방식이 더 많이 쓰였고, 이는 프롬프트 환경에 최적화된 메뉴/목차(디렉토리) 기반 탐색으로 문서를 찾는 방식이었다.[^23][^24]

강의에 따르면 고퍼는 웹보다 늦게 나왔음에도 한동안 더 많이 사용되었다고 설명한다.[^23] 이유는 “프롬프트 환경에 최적화”되어 있었기 때문이라고 한다.[^24]

고퍼의 사용 방식은 매우 구체적으로 묘사된다.[^25]

  • 고퍼에 접속하면 메뉴 형태의 화면이 나온다.[^25]
  • 사용자는 복잡한 타이핑 대신
    • 화살표 키로 이동하고[^25]
    • 엔터키로 선택만 하면 된다.[^25]
  • 예시로 “뉴스를 보고 싶다”면 아래로 내려가 해당 항목에서 엔터[^25]
  • 더 들어가서 “부산(지역) 뉴스” 같은 세부 항목을 골라 엔터를 치면 기사(문서)가 바로 나온다는 식으로 설명한다.[^25]

이 방식을 강사는 도서관에서 책/자료를 찾는 방식에 비유한다.[^26]

  • “도서관에서 문서를 검색하는 형태”[^26]
  • 또는 “디렉토리 검색”, “목차 검색”이라고 부를 수 있다고 덧붙인다.[^26]

또한 문서를 저장하고 싶을 때는 다운로드(모뎀을 선택해 받는 흐름)를 언급하며, 내려받아 보관하는 방식으로 이어진다고 말한다.[^27]

이 대목에서 강사는 청자에게 체감 질문을 던진다.[^28]

  • 독수리 타법으로 알파벳을 치는 것보다[^28]
  • 화살표/엔터로 메뉴를 이동하는 방식이 더 쉽지 않냐고 묻고[^28]
  • 그렇다고 답을 유도한다.[^28]

즉, “초기 대중에게는 하이퍼링크/브라우저보다, 키 입력 부담이 적은 메뉴 탐색형 서비스가 더 실용적이었다”는 비교를 만드는 파트다.[^23][^24][^28]

3.9 고퍼의 쇠퇴: 윈도우와 ‘모자이크(Mosaic)’ 브라우저의 등장[^29][^30]

📸 6:25

강사는 고퍼가 오래가지 못했다고 말한다.[^29] 그 이유로 다시 한 번 환경 변화와 브라우저의 등장을 든다.[^29][^30]

  • 윈도우 환경이 등장했고[^29]
  • **모자이크(Mosaic)**라는 브라우저가 등장하면서[^30]
  • 고퍼 같은 텍스트/트리(목차) 기반 서비스는 쇠퇴했다고 설명한다.[^29][^30]

이와 함께 “순수 텍스트로 이루어진 트리(목차) 탐색”이 사라지고, 문서 자체에 하이퍼텍스트/하이퍼링크를 다는 방식으로 이동했다고 연결한다.[^31]

3.10 클릭의 시대: 파란 글씨를 마우스로 클릭, 입력의 중심이 키보드에서 마우스로[^31][^32][^33]

📸 6:42

브라우저 기반 웹에서 사용 경험이 어떻게 달라졌는지, 강사는 매우 생활적인 언어로 풀어낸다.[^31][^32]

  • 문서에 하이퍼링크가 있고[^31]
  • 사용자는 파란색 글씨를 마우스로 클릭만 하면 된다.[^32]
  • 이 변화는 “입력 도구가 키보드에서 마우스로 옮겨가는 시대”라고 표현된다.[^33]

또한 ‘클릭’ 중심 경험을 강조하는 당시의 표현(“커맨더…”, “클릭하면 바로 본다” 같은 뉘앙스)을 언급하면서, 클릭 기반의 브라우징이 가능해진 것이 중요한 변화였음을 강조한다.[^34]

3.11 하이퍼텍스트를 가능하게 하는 ‘태그’의 존재[^35][^36]

📸 7:13

강사는 “이때 중요한 것은 하이퍼텍스트”라고 말하면서[^35] 하이퍼텍스트를 구현하기 위한 **명령어가 태그(tag)**라고 소개한다.[^36]

  • 하이퍼텍스트를 “하이퍼텍스트로 만드는” 명령어가 태그라고 하고[^36]
  • 태그는 뒤에서 자세히 알아보겠다고 예고한다.[^36]

즉, 다음과 같은 연결고리가 생긴다:

  • 하이퍼텍스트(링크)는 웹의 핵심 UX[^35]
  • 링크를 문서에 심는 기술적 수단이 태그(HTML 문법의 핵심 요소)[^36]

3.12 웹의 구조로 확장: 웹 서버와 웹 클라이언트(브라우저), 다음 시간 예고[^37][^38][^39]

📸 7:33

마지막으로 강사는 “문서를 전달하고 전달받는 월드와이드웹의 위상”을 다시 세우며, 웹을 통신 구조로 확장한다.[^37]

여기서 강의는 질문-답 형태로 진행된다.[^38]

[? 질문] 문서를 전달하고 전달받으려면 무엇이 필요할까?[^38]
[= 답] 문서를 제공하는 쪽(제공자)이 있고, 이를 제공하는 쪽을 **웹 서버(Web Server)**라고 하며, 문서를 요청하는 쪽은 **웹 클라이언트(Web Client)**라고 부른다.[^39]

강사는 청자가 서버/클라이언트 개념을 더 이해해야 할 것 같다고 말하며, 다음 시간에는 “하이퍼링크를 클릭했을 때 웹 서버와 클라이언트가 어떤 형태로 (서로) 커뮤니케이션/처리하는지”를 알아보겠다고 예고하고 강의를 마무리한다.[^40]

4. 핵심 통찰[^2]

  1. 웹의 시작점은 ‘화려한 화면’이 아니라, 연구 현장에서 쏟아지는 문서 속에서 **참조/관련 정보를 빠르게 찾기 위한 연결 구조(하이퍼텍스트)**였다.[^8][^11][^12]
  2. 같은 ‘문서 탐색’이라도 초기 대중에게는 하이퍼링크보다 **조작 난이도가 낮은 메뉴/디렉토리 탐색(고퍼)**이 실용적이었고, 이는 당시 컴퓨팅 환경(프롬프트)과 사용성의 제약을 보여준다.[^23][^25][^28]
  3. 웹 대중화의 촉매는 윈도우(GUI) + 브라우저 + 마우스 클릭이라는 사용 경험의 변화였으며, “입력의 중심이 키보드에서 마우스로 이동”했다는 표현이 이를 요약한다.[^18][^32][^33]
  4. 하이퍼텍스트(링크)를 실제 문서에 심는 기술적 기반으로 태그가 소개되며, 이후 HTML 학습(태그/링크 문법)으로 자연스럽게 연결된다.[^35][^36]
  5. 웹을 제대로 이해하려면 “문서”만이 아니라, 문서를 제공하는 서버와 **요청하는 클라이언트(브라우저)**의 역할 분담(구조)을 함께 봐야 한다는 다음 단계로 넘어간다.[^37][^39]
  • 실행 관점 시사점:
    • 웹 개발 학습에서 ‘링크/태그’가 왜 중요한지(웹의 출발점이 문서 연결이었기 때문)를 역사 맥락으로 이해하고 시작하라.[^12][^35][^36]
    • 사용자 경험은 기술 못지않게 입력 방식/인터페이스(키보드 vs 마우스, 텍스트 vs GUI)가 채택을 좌우한다는 관점을 가져라.[^16][^33]

5. 헷갈리는 용어 정리[^12]

하이퍼텍스트(Hypertext): 문서 안의 특정 단어/구절을 다른 문서(관련 정보)로 연결해, 사용자가 클릭 등으로 즉시 이동하며 탐색할 수 있게 하는 문서 구조/방식.[^12][^13]
하이퍼링크(Hyperlink): 하이퍼텍스트에서 “클릭하면 이동”을 발생시키는 연결(보통 파란 밑줄 텍스트로 인식되는 링크 표현).[^12][^13]
프롬프트 환경: GUI 이전/또는 GUI가 아닌 텍스트 기반 조작 환경으로, 키보드 입력 중심의 사용을 전제하는 컴퓨터 사용 방식.[^16]
브라우저(웹브라우저): 윈도우 같은 GUI 환경에서 하이퍼링크를 표현하고 클릭으로 문서를 이동/열람하게 해주는 클라이언트 프로그램.[^19][^39]
고퍼(Gopher): 웹이 대중화되기 전후에 사용된, 메뉴/디렉토리(목차) 방식으로 문서를 찾아 들어가는 서비스/프로토콜로, 화살표/엔터 중심 조작이 가능해 프롬프트 환경에 최적화되었다고 설명됨.[^23][^25]
디렉토리 검색/목차 검색: 도서관 목차처럼 메뉴 구조를 따라가며 문서를 찾아가는 탐색 방식(강의에서는 고퍼의 검색 방식으로 제시).[^26]
태그(Tag): 문서를 하이퍼텍스트(링크 포함) 형태로 만들기 위한 “명령어”로 소개되며, 뒤에서 자세히 다룰 HTML 문법 요소.[^36]
웹 서버(Web Server): 웹 문서를 제공하는 쪽(제공자)으로 설명됨.[^39]
웹 클라이언트(Web Client): 웹 문서를 요청하는 쪽(보통 브라우저)으로 설명됨.[^39]

참고(콘텐츠 정보)[^1]

  • 제목: 프론트엔드, 백엔드 개발자를 위한 HTML5, CSS3 강의 03강 - 웹의 탄생배경[^1]
  • 채널: 뉴렉처[^1]
  • 길이: 8분 16초[^1]
  • 링크: https://www.youtube.com/watch?v=wLqfAvVwqiI[^1]
  • 제공된 스크립트 구간: @[00:01] ~ @[08:14][^2][^40]

[^1]: 사용자가 제공한 메타데이터: "프론트엔드, 백엔드 개발자를 위한 HTML5, CSS3 강의 03강 - 웹의 탄생배경 / 채널: 뉴렉처 / 길이: 8분 16초 / https://www.youtube.com/watch?v=wLqfAvVwqiI"
[^2]: @[00:04] "제 오늘은 웹 ... 어떠한 필요성에 의해서 만들어 졌는지"
[^3]: @[00:01] "안녕하세요"
[^4]: @[00:04] "웹 ... 필요성 ... 알아 보도록"
[^5]: @[00:17] "어쨌거나 팀 버너스 리"
[^6]: @[00:21] "2분이 1990년에"
[^7]: @[00:21] "하이퍼텍스트 ... 필요성을 느끼고"
[^8]: @[00:41] "여기 보면 ... (지역)"
[^9]: @[01:03] "이게 뭐냐면 ... 입자 가속기"
[^10]: @[01:30] "연구하다 보면 ... 다양한 내용" + @[03:10] "프롬프트 환경"
[^11]: @[01:48] "문서에서 필요한 ... 더 찾아보려면 ... 시간이"
[^12]: @[01:51] "그래서 하이퍼 트 스 를 제안합니다"
[^13]: @[02:01] "파란색의 밑줄" + @[02:12] "단어" + @[02:21] "클릭"
[^14]: @[02:31] "관련 내용들을 ... 하이퍼 텍스트 ... 연결"
[^15]: @[02:49] "우리가 웹브라우저에서 ... 너무나 자연스러운"
[^16]: @[03:10] "프롬프트 환경에서"
[^17]: @[03:33] "독수리 타법"
[^18]: @[03:45] "윈도우 ... 환경으로"
[^19]: @[03:54] "웹브라우저 ... 최초 브라우저"
[^20]: @[04:15] "넷스케이프 내비게이터"
[^21]: @[04:35] "90년 후반에는 ... (인터넷 익스플로러) ... 시장"
[^22]: @[04:55] "사용하지 않았다면 ... 어떤 식으로"
[^23]: @[05:04] "월드와이드 ... 나왔음에도 ... 고 포 ... 더 많이"
[^24]: @[05:11] "고 포 ... 프롬프트 ... 최적화"
[^25]: @[05:20] "접속 ... 메뉴" + @[05:26] "화살표 키" + @[05:29] "엔터키" + @[05:34] "뉴스" + @[05:44] "6번 선택"
[^26]: @[05:50] "도서관 ... 디렉토리 검색 ... 목차"
[^27]: @[06:02] "다운로드 ... 모뎀"
[^28]: @[06:13] "독수리 타법 ... 화살표 ... 엔터"
[^29]: @[06:25] "윈도우 ... 등장"
[^30]: @[06:31] "모자 ... 브라우저" (모자이크 맥락)
[^31]: @[06:42] "문서 ... 하이퍼 텍스트 또는 하이퍼링크"
[^32]: @[06:47] "파란색 글씨를 마우스 클릭만"
[^33]: @[06:53] "입력 ... 키보드에서 마우스로"
[^34]: @[07:03] "클릭 하면 바로 볼 수 있는"
[^35]: @[07:13] "중요한 것은 ... 하이퍼텍스트"
[^36]: @[07:16] "하이퍼텍스트 ... 명령어가 태그"
[^37]: @[07:33] "문서를 전달받고 전달하는 월드 와이드 웹"
[^38]: @[07:42] "그러면 뭐가 필요하겠어요"
[^39]: @[07:47] "웹 서버" + @[07:53] "웹 클라이언트"
[^40]: @[08:03] "다음 시간엔 ... 웹서버와 ... 클라이언트 ... 어떤 형태" + @[08:14] "고생 많으셨습니다"

← 프로젝트에서 보기