웹의 작동 원리 이해하기

사용자의 눈에는 보이지 않지만, 웹 브라우저에 페이지를 불러오려면 웹 서버에서 제공하는 데이터인 리소스가 필요합니다. 사용자가 URL을 입력하면 웹 브라우저가 웹 서버에 리소스를 요청하는데, 이때 특정 규칙에 따라 요청 메시지를 작성해야 하며, 이 규칙을 HTTP라고 합니다.

 

01 웹 브라우저는 서버에 HTTP 요청 메시지를 전달합니다.

 

02 웹 서버는 브라우저가 보낸 HTTP 요청 메시지를 분석합니다. 요청 메시지가 HTTP 규칙에 따라 잘 작성되었는지, 정당한 요청 권한이 있는지, 요청한 리소스가 웹 서버에 존재하는지 등을 확인하고, 그 결과에 따라 적절한 응답 메시지를 웹 브라우저에 전달합니다. 이렇게 서버가 작성한 응답 메시지를 HTTP 응답 메시지라고 합니다.

 

03 웹 브라우저는 HTTP 응답 메시지를 분석하여 그 결과에 따라 화면에 리소스를 출력합니다. 이처럼 서버로부터 받은 데이터가 웹 브라우저에 출력되는 과정을 렌더링이라고 합니다.

 

streamlit 웹 앱

웹 앱은 웹 브라우저를 통해 접근 가능하고 사용할 수 있는 프로그램을 말합니다. HTML, CSS, JavaScript 등 웹 개발 도구를 활용해 개발되며, 인터넷 연결만 있으면 어떤 기기에서든 사용할 수 있습니다. 사용자는 별도의 설치 과정 없이 URL을 통해 웹 앱에 접근할 수 있습니다.

streamlit 패키지를 사용하면 복잡한 웹 개발 도구를 몰라도 파이썬만으로 웹 앱을 만들어 봅시다. 비주얼 스튜디오 코드에서 터미널을 열고, 다음 명령어를 입력하세요. 터미넣에 출력된 Local URL이 데모 앱의 주소이며, 웹 브라우저가 열리고 자동으로 앱이 실행됩니다.

$ streamlit hello

 

[실행결과]

 

데모 앱의 왼쪽 상단 메뉴 '>' 아이콘을 눌러 사이드 바를 열면 다양한 데모 앱을 경험할 수 있습니다. 몇 가지 앱을 살펴봤다면 비주올 스튜디오 코드의 터미널로 돌아가 Ctrl + C 키를 누르거나 터미널상단 종료 아이콘을 클릭해 터미널을 종료해야 합니다.

 

개발자 도구에서 HTTP 메시지 분석

웹 브라우저의 개발자 도구를 사용하면 웹 브라우저가 웹 서버와 주고받은 HTTP 메시지를 기록하고 분석할 수 있습니다. 웹 브리우저를 열어서 직접 확인해 봅시다.

 

01 크롬 웹 브라우저로 네이버(https://www.naver.com)에 접속하세요. 그리고 나서 F12 키를 눌러 개발자 도구를 실행합니다.

 

02 개발자 도구는 웹사이트의 요소를 테스트하고, 생산성을 향상시키는 여러 가지 도구를 제공합니다. 웹 브라우저와 웹 서버가 주고받은 HTTP 메시지를 확인하기 위해 개발자 도구의 [네트워크] 탭을 클릭하고, Ctrl + R 키를 눌러 새로고침합니다. 왼쪽 하단에 웹 서버가 보낸 리소스를 확인할 수 있습니다.

 

03 [이름] 목록에서 웹사이트 주소인 'www.naver.com' 항목을 클릭하면, 오른쪽 HTTP 메시지를 확인할 수 있는 탭이 열립니다. 여기서 [헤더] 탭을 클릭하면, '응답 헤더'에서 웹 서버가 보낸 HTTP 응답 페이지, '요청 헤더'에서 웹 브라우저가 보낸 HTTP 요청 메시지를 확인할 수 있습니다.

 

04 [응답] 탭을 선택하면, 웹 서버가 웹 브라우저에 전달한 실제 리소스를 확인할 수 있습니다. 웹 브라우저는 [응답] 탭에 보이는 HTML 문서를 화면에 출력합니다.