프로젝트에서 보기 →

프론트엔드, 백엔드 개발자를 위한 HTML5, CSS3 강의 04강 - 웹문서와 웹서버의 이해

태그
기타 html5 css3 publisher
시작일
종료일
수정일

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

description: |

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

[? 질문] 웹에서 **클라이언트(브라우저)**와 **서버(웹서버)**는 각각 어떤 역할과 형태로 존재하는가[^4]
[= 답] 웹서버는 인터넷 상에서 웹문서(파일)들을 보관하고 있다가, 클라이언트(브라우저)가 주소(URL)로 요청하면 약속된 방식인 HTTP로 요청을 이해하고 해당 문서를 찾아 응답으로 돌려주는 역할을 한다.[^5][^16]

[? 질문] 웹서버가 문서를 “찾는 기준”은 무엇이며, 문서는 서버에 아무렇게나 놓여 있어도 되는가[^6]
[= 답] 웹서버는 문서를 디스크 여기저기에 무작위로 찾는 것이 아니라, 서버 설정으로 지정된 **특정 디렉토리(홈 디렉토리)**를 기준으로 요청된 경로에 맞는 파일을 찾아 제공한다.[^6][^7]

[? 질문] 개발/학습 단계에서의 웹서버 준비는 어떻게 접근해야 하는가[^20]
[= 답] 실제 서비스용 웹서버는 “거창하게” 구성될 수 있지만, 개발 단계에서는 간단히 실행해볼 수 있는 초간단 개발용 웹서버도 존재하며, 강의에서는 우선 간단한 서버를 두고 웹문서를 배치한 뒤 요청-응답 흐름을 실습해 나간다.[^20][^21][^22]

2. 큰 그림[^4]

이 강의는 웹 개발에서 가장 기본이 되는 웹서버와 웹문서의 관계, 그리고 브라우저가 문서를 요청하고 서버가 응답하는 요청-응답(Request/Response) 구조가 실제로 어떤 형태로 동작하는지 설명한다.[^4][^16] 또한 서버에 문서가 저장되는 위치(홈 디렉토리 개념)와 HTTP라는 통신 약속을 통해 서버가 요청을 해석하고 문서를 찾아 반환한다는 흐름을 잡아준다.[^7][^16]

  • 웹은 웹서버가 문서를 보관/제공하고 클라이언트가 문서를 요청하는 구조로 동작한다.[^5][^16]
  • 서버는 문서를 아무 데서나 찾는 것이 아니라, 설정된 **홈 디렉토리(문서 루트)**를 기준으로 경로를 해석해 파일을 찾는다.[^6][^7]
  • 요청과 응답은 HTTP라는 “약속된 방식”으로 오가며, 이 약속 덕분에 서버가 요청을 이해하고 적절히 응답할 수 있다.[^16][^17]

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

3.1 서버와 클라이언트: 문서를 “가진 쪽”과 “요청하는 쪽”[^4]

📸 0:03

강의자는 “서버가 있고 클라이언트가 있다면 그들은 어떤 형태로 존재하는지”를 설명하겠다고 시작한다.[^4] 웹(인터넷) 환경에서 기본 전제는 다음처럼 나뉜다는 점을 먼저 잡는다.[^5]

  • 인터넷 어딘가에는 문서를 가지고 있는 쪽이 있다.[^5]
  • 그리고 반대편에는 그 문서를 요청하는 쪽이 있다.[^5]

여기서 “문서를 가지고 있으면서 문서를 제공하는 쪽”을 **웹 서버(Web Server)**라고 부른다.[^6] 웹서버에는 “수많은 웹문서”가 존재한다고 말하며, 웹서버의 핵심 기능이 문서 제공임을 강조한다.[^6]

[!NOTE] 용어 관점에서의 큰 축[^5]

  • 클라이언트: 문서를 요청하는 주체(강의에서는 브라우저를 전제로 설명).
  • 웹서버: 문서를 보관하고 있다가 요청이 오면 찾아서 돌려주는 주체.

3.2 웹서버의 문서 저장 방식: 홈 디렉토리(문서 루트)라는 “기준점”[^6]

📸 0:21

웹서버에 문서가 많다고 해서, 그 문서들이 “디스크에 아무렇게나 퍼져 있는 것은” 아니라고 선을 긋는다.[^6] 즉, 서버는 아무 폴더나 뒤져서 파일을 찾는 방식이 아니라, 문서를 찾기 위해 사용되는 특정 디렉토리가 존재한다.[^7]

강의자는 서버 설정을 통해, 요청이 들어왔을 때 서버가 뒤질(탐색할) 특정 데이터 저장 위치를 정해두며, 이를 홈 디렉토리라고 부른다고 설명한다.[^7][^8]

  • 웹서버는 요청이 오면 “찾아볼 디렉토리”가 정해져 있다.[^7]
  • 그 정해진 기준 디렉토리가 홈 디렉토리다.[^8]
  • 홈 디렉토리 안에는 **또 다른 디렉토리(하위 폴더)**가 있을 수도 있다고 덧붙인다.[^9]

이어서 예시 형태로 홈 디렉토리의 실제 위치를 가정한다. 예를 들어 “D 드라이브에 home” 같은 폴더를 홈 디렉토리로 정하고, 그 안에 “wiki”라는 폴더가 있을 수 있다는 식으로 설명한다.[^10][^11]

+++ 상세 예시(강의에서 가정한 폴더 구조를 문장 그대로 재구성)

  • 홈 디렉토리를 “D:\home”으로 정한다.[^10]
  • 그 안에 “wiki”라는 폴더가 들어있다.[^11]
  • 클라이언트는 브라우저를 통해 이 폴더 구조에 대응되는 경로의 문서를 요청하게 된다.[^12] +++

[!IMPORTANT] 홈 디렉토리 개념이 중요한 이유[^7] 서버는 요청이 오면 파일 시스템 전체를 무작정 찾는 것이 아니라, **서버가 문서 제공 대상으로 삼는 기준 폴더(홈 디렉토리)**를 중심으로 파일을 찾는다. 이 기준이 있어야 URL 경로를 파일 경로로 매핑해 응답할 수 있다.[^7][^8]

3.3 웹서버의 종류 예시: IIS와 Apache[^13]

📸 1:16

웹서버는 여러 가지가 있다고 하면서 대표 예시를 든다.[^13]

  • 마이크로소프트의 경우 **IIS(Internet Information Server)**가 있다고 언급한다.[^13]
  • 무료로 사용할 수 있는 Apache 웹서버도 있다고 말한다.[^14]
  • 그 밖에도 “굉장히 많다”고 덧붙여, 웹서버가 특정 제품 하나가 아니라 범주/종류가 다양하다는 점을 짚는다.[^15]

이 대목의 의도는 “웹서버”가 개념이며, 구현체는 IIS/Apache 등 다양하지만, 공통 역할은 “요청을 받아 문서를 찾아 제공”하는 데 있음을 뒤에서 이어갈 기반을 마련하는 것이다.[^15][^18]

3.4 사용자의 동작(클릭/주소 입력) → 서버로 “무엇을 달라”는 요청이 발생[^16]

📸 2:12

강의자는 사용자가 웹을 사용할 때의 행위를 예로 들어 흐름을 연결한다.[^16]

  • 사용자는 주소를 입력하거나(“주소를 쓰겠죠”)[^16]
  • 또는 하이퍼텍스트를 클릭한다.[^16]

“예를 들어 (어떤) 버튼을 클릭한다”고 가정하면, 그 순간 클라이언트는 서버에 어떤 주소(경로)의 자원을 달라는 형태로 요청을 보낸다는 것을 설명한다.[^16][^17]

여기서 강의자는 “이 서버에서 제가 요청하는 건 이거예요. 요걸 달라고 하는 거예요”라고 표현하며, 요청의 본질이 특정 문서(파일) 요구라는 점을 직관적으로 강조한다.[^17]

3.5 URL/경로 해석: “홈 디렉토리 기준 + 하위 폴더 + 파일 이름”을 찾아 달라[^18]

📸 2:29

강의는 요청이 서버에서 어떤 의미를 갖는지 구체적으로 펼친다.[^18]

클라이언트가 “A 서버”에 있다고 치면(표현상 “내가 어디 있느냐 A 서버 있다”) 그 서버의 홈 디렉토리를 기준으로,[^18]

  • 홈 디렉토리 안에 “wiki” 폴더가 있고[^18]
  • 그 “wiki” 폴더 안에서 “sunny(써니)”라는 것을 찾아서 달라고 요청하는 것이라고 설명한다.[^19]

즉, 사용자의 클릭/주소 입력은 서버 관점에서 “(홈 디렉토리 기준으로) 특정 폴더/파일을 찾아서 반환해 달라”라는 구체적 파일 탐색 요청으로 변환된다.[^18][^19]

[!TIP] URL을 파일 탐색 요청으로 이해하는 관점[^18] “/wiki/sunny …” 같은 경로가 보이면, 서버는 (설정된) 홈 디렉토리를 루트로 삼아 “wiki 폴더로 들어가서 sunny 파일을 찾아 반환”하는 식으로 해석한다는 감각을 먼저 잡으라는 흐름이다.[^18][^19]

3.6 HTTP라는 “약속된 방식”으로 요청이 전달되면, 서버는 이해하고 찾아서 돌려준다[^16]

📸 2:12

요청은 “HTTP라고 하는 것으로 약속된 방식”으로 진행된다고 말한다.[^16] 이 “약속” 덕분에 서버는 요청을 이해할 수 있다고 설명한다.[^17]

  • [? 왜 서버가 요청을 이해할 수 있는가]
    [= HTTP라는 약속된 방식으로 요청이 전달되기 때문에, 서버가 그 형식을 해석할 수 있다][^16][^17]

이어서 서버의 동작을 단계적으로 묘사한다.[^18]

  1. 서버가 요청을 받는다(HTTP 형식의 요청).[^16]
  2. 서버는 그 요청이 가리키는 위치로 가서 문서를 “찾는다”.[^18]
  3. 예시에서는 “wiki 폴더 안에 있는 것 중에서 sunny를 찾았다”고 한다.[^18]
  4. 찾았으면 “그걸 돌려주는 것”이 웹서버의 일이라고 정의한다.[^18]

강의자는 이 과정을 “기본적인 요청과 응답 형태”라고 부르며, 웹의 기본 골격이 이 요청/응답 왕복임을 정리한다.[^19]

3.7 클라이언트는 응답 문서를 받아 열어본다: 웹의 기본 형태(요청-응답)[^19]

📸 2:43

서버가 문서를 찾아 돌려주면, 클라이언트 쪽에서는 “sunny란 문서를 받아서 열어 보게” 된다고 설명한다.[^19]

그리고 이것이 “우리가 웹이라고(하는) 형태의 기본적인 요청과 응답”이라고 다시 한번 규정한다.[^19]

  • 서버 쪽: 홈 디렉토리(및 하위 디렉토리)에 문서가 있고, 식별 가능한 이름이 있으면 그 문서를 제공한다.[^19]
  • 클라이언트 쪽: 그 문서를 요청하고, 응답으로 받으면 브라우저가 연다.[^19]

[!NOTE] 강의자가 강조하는 ‘형태’라는 표현의 의미[^19] 웹을 구성하는 기술 스택을 깊게 들어가기 전에, “어떤 모양으로 일이 굴러가는지” (서버에 문서가 있고, 클라이언트가 요청하고, 서버가 찾아 응답한다)라는 동작 형태를 먼저 기억하라고 요구한다.[^19]

3.8 서비스용 웹서버 vs 개발용(간단한) 웹서버: 학습은 “간단한 것”부터[^20]

📸 3:15

강의자는 “우리는 웹문서라는 녀석을 만져서 배치해 놓고, 배치된 것을 요청하는 방식으로 구현해야 될 것 같다”는 방향을 제시한다.[^20] 즉, 앞으로의 실습은

  • 웹문서를 만들고
  • 웹서버의 홈 디렉토리 아래에 배치하고
  • 브라우저로 요청하여
  • 응답을 확인하는 흐름으로 진행될 것임을 예고한다.[^20][^23]

이때 웹서버는 “실제로 서비스하기 위해서 조금 거창하게” 움직일 수 있는 형태도 있지만,[^21] 개발할 때 “간단하게 운영해볼 수 있는 초간단 개발 웹 서버” 같은 것도 존재한다고 말한다.[^21]

강의에서는 “일단 간단한 서버를 가지고 운영하면서 요청하게 할 것”이라고 정리하며, 다음 시간에 웹서버를 실행해보는 시간을 갖겠다고 한다.[^22][^23]

3.9 다음 강의 예고: 웹서버에 두기 위한 기본 문서를 만들기 시작[^23]

📸 3:57

마지막으로 강의자는, 이제 웹서버와 클라이언트까지의 구조를 봤으니 이후(“2~3시간부터는”이라는 표현으로 다음 파트/다음 강의들을 지칭)에는 웹서버에 두기 위한 “기본적인 문서”를 만들어가겠다고 말한다.[^23]

  • “문서를 만드는 방법부터” 알아볼 것이고[^23]
  • “다음 시간부터 문서를 만드는 가장 기본적인 내용”을 다루겠다고 예고하며 마무리한다.[^23]

4. 핵심 통찰[^19]

  1. [h 웹은 ‘문서 제공자(웹서버)’와 ‘문서 요청자(클라이언트)’의 역할 분담으로 이해하면 구조가 단순해진다.] 문서를 가진 쪽이 제공하고, 다른 쪽이 요청한다는 2역할 모델로 웹의 기본을 잡는다.[^5][^6]
  2. [h 서버는 문서를 무작정 찾지 않고, 설정된 ‘홈 디렉토리’를 기준으로 요청 경로를 해석한다.] URL 경로가 파일/폴더 탐색으로 이어지는 이유가 여기에 있다.[^7][^8]
  3. [h HTTP는 서버가 요청을 이해하게 해주는 ‘약속된 형식’이다.] 이 약속이 있기 때문에 서버는 “뭘 달라는지”를 파악하고 문서를 찾아 응답할 수 있다.[^16][^17]
  4. [m 학습/개발 단계에서는 ‘서비스급 거창한 서버’가 아니라 ‘간단한 개발용 서버’로도 충분히 요청-응답 실습이 가능하다.] 강의의 진행 전략 자체가 “간단한 서버로 운영하면서 문서 배치와 요청을 익히자”는 흐름이다.[^21][^22]
  • 실행 관점의 시사점(강의 흐름에 맞춘 행동 항목)[^20]
    • 웹서버를 준비할 때 먼저 **홈 디렉토리(문서 루트)**가 어디인지 확인/설정한다.[^7][^8]
    • “/wiki/sunny”처럼 URL 경로를 보면, 서버에서 어떤 폴더/파일을 찾을지 파일 시스템 관점으로 대응시켜 본다.[^18][^19]
    • 개발 단계에서는 가벼운 서버로 “문서 배치 → 요청 → 응답 확인” 루프를 빠르게 반복한다.[^21][^22]

5. 헷갈리는 용어 정리 (해당 시에만)[^6]

클라이언트: 웹문서를 요청하는 쪽. 강의에서는 주로 브라우저를 클라이언트로 지칭한다.[^12][^19]
웹서버(Web Server): 웹문서를 보관하고, 요청이 오면 해당 문서를 찾아 응답으로 돌려주는 서버 프로그램/역할.[^6][^18]
웹문서: 웹서버가 보관하고 있다가 클라이언트 요청에 따라 제공되는 문서(파일)들의 총칭.[^6][^19]
홈 디렉토리(Home Directory): 웹서버가 문서 요청을 처리할 때 기준으로 삼는 “특정 디렉토리”. 요청이 오면 이 위치를 기반으로 문서를 찾는다.[^7][^8]
HTTP: 클라이언트의 요청이 서버에 전달될 때 따르는 “약속된 방식(프로토콜)”. 서버가 요청을 이해하게 해준다.[^16][^17]

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

  • 제목: 프론트엔드, 백엔드 개발자를 위한 HTML5, CSS3 강의 04강 - 웹문서와 웹서버의 이해[^1]
  • 채널: 뉴렉처[^1]
  • 길이: 4분 15초[^1]
  • 링크: https://www.youtube.com/watch?v=Z1xMjavecKc[^1]

[^1]: 제공된 콘텐츠 메타데이터(제목/채널/길이/링크). [^4]: @[00:03] "이제 오늘은 서버 가 있고 클라이언트의 있다면 그들은 어떤 형태로 존재하는 지를..." [^5]: @[00:10] "인터넷... 문서를 가지고 있는 쪽... 문서를 요청..." [^6]: @[00:21] "문서를... 제공하는 쪽 우리가 웹 서버 라고 하고 웹 서버에는... 수많은 웹문서..." [^7]: @[00:33] "문서를 찾을 때 사용되는 특정 디렉토리가 있습니다" [^8]: @[00:39] "특정 데이터를 저장... 우리가 뭐라고 하냐면... 홈 디렉토리" [^9]: @[00:52] "홈 디렉토리... 안쪽에는 또 ... 수도 있어요" [^10]: @[00:57] "홈디렉토리... d 드라이브에 홈..." [^11]: @[01:04] "d 드라이브에 홈에 ... 위키 라고 하는 폴더..." [^12]: @[01:13] "브라우저 라고 하는..." [^13]: @[01:16] "마이크로소프트... iis... 인터넷 포메이션 서버" [^14]: @[01:21] "무료... 아파치 웹서버" [^15]: @[01:24] "뭐 굉장히 많습니다" [^16]: @[02:12] "요청은... htp... 약속된 방식으로 요청" [^17]: @[02:22] "요청... 이해... 약속되어 있는 방식으로 요청" [^18]: @[02:29] "찾아요... 위키... 써니... 찾았으면 그걸 돌려주는 것이 웹서버..." [^19]: @[02:43] "문서를 받아서 열어... 기본적인 요청과 응답..." [^20]: @[03:15] "웹문서... 만져서 배치... 요청하는 방식..." [^21]: @[03:34] "실제로 서비스... 거창... 개발 때... 초간단 개발 웹 서버..." [^22]: @[03:40] "일단 간단한 서버를 가지고 운영... 요청" [^23]: @[03:57] "웹서버에 두기 위한 기본적인 문서... 만드는 방법부터..."

← 프로젝트에서 보기