브라우저와 반응형 웹

브라우저의 특징과 웹의 동작 원리

 

사용자가 선택한 자원(Resource)를 서버에 요청(Request)하고, 서버의 응답(Response)을 브라우저에 띄우는(Rendering) 방식

 

먼저, 사용자가 웹 브라우저를 통해 찾고 싶은 웹 페이지의 URL 주소를 입력

DNS 서버에서 사용자가 입력한 URL 주소 중 도메인 네임을 검색

해당 도메인 네임에 해당하는 IP 주소를 찾아 사용자가 입력한 URL 정보와 함께 전달

 

웹 페이지 URL 정보와 전달받은 IP 주소는 HTTP 프로토콜을 사용해 HTTP 요청 메시지를 생성해 TCP 프로토콜을 사용해 인터넷을 거쳐 해당 IP 컴퓨터로 전송되고, 이 요청 메시지는 다시 HTTP 프로토콜을 통해 웹 페이지 URL 정보로 변환

 

웹 서버는 이 변환이 된 정보에 해당하는 데이터를 검색하여 찾아낸 뒤 HTTP 프로토콜을 통해 HTTP 응답 메시지를 생 TCP 프로토콜을 이용해 인터넷을 거쳐 사용자의 컴퓨터로 전송

 

사용자의 컴퓨터에 도착한 HTTP 응답 메시지는 HTTP 프로토콜을 사용해 웹 페이지 데이터로 변환

변환된 데이터는 웹 브라우저 상에 출력되어 사용자 봄

 

브라우저의 구조

 

브라우저 렌더링 과정

 

• 사용자가 브라우저를 통해 웹 사이트에 접속합니다.
• 브라우저는 서버로부터 HTML, CSS, JavaScript와 같은 웹사이트에 필요한 리소스를 다운받습니다.
• 렌더링 엔진은 전달받은 HTML 문서를 파싱(parsing)해 DOM(Document Object Model, 문서 객체 모델) 트리를 만듭니다.
• 이어서 다운받은 외부 CSS 파일과 함께 포함된 스타일 요소를 파싱(parsing)해 CSSOM(CSS Object Model, CSS 객체 모델) 트리를 만듭니다.
• 만든 DOM 트리와 CSSOM 트리를 결합해 Render 트리를 구축합니다.
• 레이아웃 과정을 통해 각 요소를 어디에 배치할지 결정합니다.
• 레이아웃 과정이 끝나면 UI 백엔드에서 Render 트리를 화면에 그리기 시작합니다. 이 과정을 paint라고 합니다. 이제부터 렌더링 과정에 쓰이는 개념들을 알아보도록 하겠습니다.

 

반응형 웹

여러 장치의 다양한 특성에 대응하는 하나의 웹 문서 또는 사이트로써 브라우저의 크기(스크린의 크기, 디바이스의 종류)에 실시간으로 반응하여 크기에 따라 레이아웃이 변하는 웹 사이트를 의미

 

반응형 웹의 특징

 

장점, 효율적인 유지보수

하나의 콘텐츠에 오직 하나의 HTML 소스만 있기 때문에 하나의 소스를 수정하면 모든 스크린 사이즈에 맞춰 컨텐츠가 최적화되기 때문에 유지보수가 효율적

장점, 검색엔진(SEO) 최적화 유리

반응형 웹 디자인은 읽어 들여야 할 소스가 많아 불필요하게 많은 데이터를 소비하기 때문에 이는 사이트 속도와 직결

PC용 URL과 모바일용 URL이 동일합니다. 따라서 검색 포털 등 광고를 통한 사용자 접속을 효율적으로 관리

단점, 사이트의 속도 저하

로딩의 속도나 이미지 리사이징의 문제로 성능이 떨어질 수 있으며, 실제로 사용하지 않은 자원을 전송받거나 실제 사용되는 이미지보다 더 큰 이미지를 사용

단점, 웹브라우저 호환성 문제

현재 존재하는 웹 브라우저는 스펙 및 사양이 제각기 다르기 때문에 하나의 웹 브라우저에서는 잘 반응하던 HTML 소스가 다른 웹 브라우저에서는 디자인이 깨지는 경우가 발생