웹 문서와 요청·응답을 읽는 기초

웹·서버·인프라를 요청 한 번의 흐름으로 연결한다

관리자로 로그인한 브라우저에서는 안내가 보여도, 외부 수집기가 같은 주소를 요청하면 로그인 화면을 받을 수 있다. 이때 화면에 입력한 키워드나 구조화 데이터는 수집기에 전달되지 않는다. 요청이 어느 서버를 지나 어떤 응답으로 끝났는지 알아야, 본문을 고칠지 접근 설정을 고칠지 결정할 수 있다.

웹 화면을 만드는 프런트엔드(frontend)는 방문자가 읽는 문서와 누르는 버튼을 담당한다. 서버의 백엔드(backend)는 공개할 데이터를 고르고 요청을 처리한다. 인프라(infrastructure)는 이 코드를 실행하고 인터넷 요청을 전달하는 DNS·호스팅·네트워크·저장소를 말한다. 한 Next.js 애플리케이션이 프런트엔드와 백엔드를 함께 맡을 수 있다.

브라우저와 크롤러는 모두 서버에 자료를 요청하는 클라이언트(client)다. https://example.com/guides/opening-hours를 요청하면 먼저 DNS로 연결할 주소를 찾고, HTTPS 연결을 맺고, 해당 경로의 문서를 요청한다. 앞단에 CDN이 있으면 저장된 응답을 돌려주거나 원본 서버로 요청을 전달한다. 원본 서버는 공개 데이터를 읽어 HTML을 만들고 응답한다.

CDN(Content Delivery Network)은 여러 지역의 서버에서 파일이나 응답을 전달하는 서비스다. 원본 서버(origin server)는 CDN 뒤에서 원래 응답을 만드는 서버다. 캐시(cache)는 이전 결과를 저장했다가 재사용하는 기능이다. CDN 없이 서버가 직접 응답하는 구성도 가능하며, 정적 사이트는 애플리케이션 서버 대신 미리 만든 파일을 제공할 수 있다.

브라우저·검색 수집기 → DNS에서 접속 주소 조회 → HTTPS 연결 → CDN·방화벽·프록시가 요청 처리(사용하는 경우) → 원본 애플리케이션이 공개 글 조회 → HTML·상태 코드·헤더 응답 → 브라우저가 CSS·JavaScript·이미지 요청 → 화면 표시와 버튼 동작 연결

본문이 비어 있으면 페이지와 서버 조회를 먼저 보고, 접속 자체가 실패하면 DNS·인증서·앞단 차단을 본다. 글을 수정했는데 이전 내용이 나오면 데이터 조회 결과와 각 캐시를 비교한다. 응답 코드·본문·캐시 기록을 대조해 요청이 멈추거나 내용이 바뀐 위치를 찾는다.

URL·HTTP·헤더·본문을 나누어 읽는다

URL은 인터넷 자원의 주소다. https는 통신 방식인 스킴(scheme), example.com은 접속할 호스트(host), /guides/opening-hours는 문서를 지정하는 경로(path)다. 물음표 뒤 page=2는 쿼리(query)이며 서버에 전달할 추가 조건이다. #hours 같은 프래그먼트(fragment)는 문서 안의 위치를 가리키며 일반적인 HTTP 요청에는 전송되지 않는다.

도메인은 example.com처럼 사람이 읽는 이름이다. 포트(port)는 같은 서버에서 연결할 서비스의 번호이며 HTTPS는 보통 443을 사용한다. 브라우저 보안에서 오리진(origin)은 스킴·호스트·포트의 조합이다. 앞 절의 원본 서버라는 뜻과 구분해서 읽는다.

HTTP는 클라이언트와 서버가 요청·응답을 주고받는 규칙이다. GET은 자원을 요청하고, HEAD는 본문 없이 헤더를 요청한다. 응답에는 처리 결과인 상태 코드(status code), 형식·캐시 등을 설명하는 헤더(header), 실제 자료인 본문(body)이 들어간다. SEO 확인에서는 GET으로 실제 본문까지 받아야 로그인 화면이나 오류 안내로 바뀌는 문제를 찾을 수 있다.

Content-Type은 본문의 형식을 알려주는 헤더다. HTML 문서는 text/html, JSON 데이터는 application/json, WebP 이미지는 image/webp처럼 제공한다. 이 형식 이름을 MIME 타입이라고도 부른다. Location은 이동할 주소, X-Robots-Tag는 응답 전체에 적용할 검색 지시, Cache-Control은 캐시 사용 조건을 담는다.

상태 코드와 본문은 함께 읽는다. 200은 요청에 성공 응답을 보냈다는 뜻이지만, 그 내용이 운영 시간인지 봇 확인 화면인지는 본문에서 드러난다. 301·308은 새 주소로 다시 요청할 경로를 전달하고, 404는 요청한 문서가 없음을 알린다. 검색기는 이 응답을 처리해 수집과 색인을 진행하므로, 모든 주소에 200과 홈 화면을 주면 문서의 존재와 이동 관계가 불분명해진다. Google의 HTTP 응답 처리

HTML·CSS·JavaScript가 맡는 일을 나눈다

HTML(HyperText Markup Language)은 제목·단락·링크 같은 문서 구조를 적는 형식이다. CSS(Cascading Style Sheets)는 글꼴·간격·색·화면별 배치를 정한다. JavaScript는 브라우저에서 버튼·검색·데이터 갱신 같은 동작을 실행한다. 공개 글의 제목과 본문은 HTML 요소로 제공하고, 화면 장식과 상호작용은 CSS·JavaScript로 연결한다.

태그(tag)는 <p>처럼 요소의 종류를 표시하는 표기다. 요소(element)는 태그와 그 안의 내용을 포함한다. 속성(attribute)은 href나 lang처럼 요소에 붙이는 설정이다. DOM(Document Object Model)은 브라우저가 문서를 메모리에 구성한 구조다. 서버 HTML을 읽어 만든 DOM은 이후 JavaScript가 추가하거나 지울 수 있으므로 최초 응답과 동작 후 화면을 함께 확인한다.

head에는 문서 제목과 메타데이터, body에는 읽을 본문이 들어간다. main은 페이지의 주요 영역, article은 독립된 글, h1·h2·h3는 제목의 단계, p는 단락이다. 제목은 내용의 계층에 맞춰 쓰고 크기는 CSS로 조절한다. 단락을 그림으로 바꾸면 수집기와 화면 읽기 도구가 텍스트를 직접 읽기 어려워진다.

링크는 a 요소의 href에 목적지 URL을 넣는다. 버튼의 클릭 코드에만 주소가 있으면 수집기가 다음 문서를 발견하지 못할 수 있다. “대출 신청 서류”처럼 연결된 문서를 설명하는 링크 문구를 쓴다. Google의 링크 작성 안내는 수집 가능한 a·href 구성과 링크 문구를 설명한다.

반응형(responsive) 화면은 화면 폭에 맞춰 배치를 바꾼다. 모바일에서도 본문·출처·이동 링크를 읽을 수 있게 하고, 표는 각 값이 어느 열 제목에 속하는지 유지한다. 접근성(accessibility)은 장애나 입력 방식의 차이에도 내용을 사용할 수 있게 만드는 일이다. 이미지 대체 텍스트인 alt, 제목 계층, 키보드로 이동할 수 있는 링크는 문서 이해에도 도움이 된다.

메타데이터와 검색 설정의 용어를 구분한다

메타데이터(metadata)는 문서의 제목·설명·대표 주소처럼 문서를 설명하는 정보다. title은 검색 결과와 브라우저 탭의 제목 후보가 되고, meta description은 요약 후보가 된다. 검색 시스템은 질문과 문맥에 따라 다른 제목·요약을 표시할 수 있으므로 실제 결과도 확인한다.

canonical URL은 중복되거나 매우 비슷한 문서들에서 대표로 사용할 주소다. HTML의 link rel="canonical"은 그 주소를 제안하는 방법 중 하나다. PDF처럼 HTML head가 없는 자료는 HTTP Link 응답 헤더로 제안할 수 있다. Google은 여러 신호를 합쳐 최종 대표 주소를 선택한다. 리다이렉트는 방문자를 새 주소로 이동시키며 canonical 표시는 방문자를 이동시키지 않는다. 대표 주소 지침

robots.txt는 사이트 루트에서 크롤러에게 수집 경로를 안내하는 파일이다. Allow는 허용, Disallow는 제한 규칙이다. meta robots와 X-Robots-Tag의 noindex는 검색 색인 제외를 요청한다. nofollow는 링크 추적에 관한 지시다. 비공개 자료는 서버의 인증·권한 검사로 보호하고, 검색 지시는 공개 자료의 수집·색인 정책에 맞춰 설정한다.

사이트맵(sitemap)은 수집할 URL과 수정일 등을 나열하는 파일이다. XML은 데이터를 태그 구조로 기록하는 형식이며 사이트맵에서 사용한다. 구조화 데이터(structured data)는 제목·작성자·날짜·대상 같은 관계를 기계가 읽는 속성으로 표현한 자료다. JSON은 이름과 값으로 데이터를 기록하는 형식이고, JSON-LD는 연결된 대상과 관계를 JSON으로 표현한다. Schema.org는 Article·Person 등 유형과 속성을 정의한 어휘다.

Open Graph(OG)는 공유 카드에 쓸 제목·설명·이미지 등을 적는 메타데이터다. hreflang은 같은 내용을 다른 언어·지역으로 제공하는 페이지의 관계를 알린다. 둘 다 실제 페이지와 일치하는 주소와 언어를 넣는다. 작성자 author, 발행 주체 publisher, 글의 대상 about, 같은 대상을 가리키는 sameAs는 서로 다른 관계다.

BreadcrumbList는 “홈 → 이용 안내 → 운영 시간”처럼 문서가 사이트의 어느 계층에 있는지를 표현하는 Schema.org 유형이다. 화면의 경로 안내인 breadcrumb와 같은 실제 탐색 경로를 사용한다. 현재 문서의 위치를 알리고 상위 문서로 돌아가게 하는 역할이며, 다른 글의 출처를 표시하는 citation과 다르다. 경로 안내 구조화 데이터

HTTP/1.1 200 OK Content-Type: application/pdf Link: <https://example.com/guides/opening-hours>; rel="canonical"

이 응답은 같은 안내를 담은 PDF 인쇄본의 대표 주소로 HTML 페이지를 제안한다. PDF가 다른 연도의 시간표를 담고 있다면 그 기록의 대표 주소를 사용한다. Link 헤더는 PDF를 전달하는 서버나 저장소에서 설정한다.

터미널과 브라우저에서 같은 문서를 읽는다

터미널은 명령을 입력하고 결과를 읽는 프로그램이며 셸(shell)은 명령을 해석해 실행한다. curl은 URL에 요청을 보내고 응답을 저장한다. rg는 파일에서 문자열을 찾는다. dig는 DNS에 주소 정보를 질의한다. 명령이 설치돼 있는지 확인한 뒤 작업할 공개 URL을 지정한다.

curl의 -sS는 진행 표시를 줄이면서 오류를 출력하고, -D는 헤더를 저장하며, -o는 본문을 저장한다. -L은 리다이렉트를 따라간다. 처음에는 -L 없이 응답의 이동 지시를 확인하고, 이후 최종 주소까지 따라가 이동 횟수와 결과를 비교한다. --max-time은 기다릴 최대 시간을 초로 정한다.

브라우저 개발자 도구의 Network는 요청·응답·전송 시간을 보여주고 Console은 코드 오류를 보여준다. Elements는 현재 DOM을 보여준다. 최초 HTML과 JavaScript 실행 뒤 DOM이 다르면 어떤 요청이나 코드가 내용을 추가했는지 찾는다. 화면의 CSS 크기와 실제 내려받은 이미지 픽셀 크기도 구분해 읽는다.

일반 HTML에서 의미와 메타데이터를 함께 읽는다

아래를 opening.html로 저장해 브라우저에서 열면 서버나 프레임워크 없이 문서 구조를 볼 수 있다. 개발자 도구의 Elements에서 head의 title·description·canonical과 body의 제목·날짜·근거 링크를 비교한다. 배포할 때는 example.com을 실제 운영 도메인으로 바꾼다.

<!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>도서관 일요일 운영 시간과 휴관일</title> <meta name="description" content="일요일 10~17시 운영하며 첫째 일요일과 공휴일은 쉽니다."> <link rel="canonical" href="https://example.com/guides/opening-hours"> </head> <body> <main><article> <h1>도서관 일요일 운영 시간과 휴관일</h1> <p>게시일 <time datetime="2026-10-01T00:00:00+09:00">2026년 10월 1일</time></p> <h2>운영 시간과 예외</h2> <p>일요일 10시부터 17시까지 운영합니다. 첫째 일요일과 공휴일은 쉽니다.</p> <p>2026년 10월 1일부터 적용합니다.</p> <a href="https://example.com/policies/opening-hours">운영 시간 안내 원문</a> </article></main> </body> </html>

h1은 문서 주제, h2는 하위 절이다. a의 href는 실제 이동 주소이고 time의 datetime은 기계가 읽을 값이다. 일반 HTML은 datetime, React JSX는 dateTime으로 쓴다. title은 검색·탭에 쓰일 제목 신호이며 화면 제목과 역할이 다르다. 검색엔진은 실제 title link와 snippet을 자체 판단해 표시할 수 있다.

CSS나 JavaScript를 꺼도 제목·시간·휴관 예외가 남는지 확인한다. 없는 URL의 404 처리는 뒤의 Next.js 실습에서 HTTP 응답으로, 예약 공개 경계는 문서와 시간의 고정 시각 테스트로 확인한다.

이 HTML에서 h1은 운영 시간 안내라는 주제를, p는 시간과 휴관 조건을, a는 근거 문서로 가는 경로를 제공한다. 본문을 읽는 도구는 이 요소에서 답에 필요한 문장을 얻는다. time의 datetime은 날짜 값을 일정한 형식으로 제공하지만, 그 날짜가 게시일인지 적용일인지는 옆의 라벨과 문장이 설명한다. 태그와 사람이 읽는 설명을 같이 두는 이유다.

이미지에도 값의 의미를 구분해야 한다. CSS 표시 폭 358px은 화면에서 차지하는 크기다. srcset의 640w는 내려받을 파일 자체의 픽셀 폭이다. naturalWidth는 밀도를 보정한 CSS 픽셀 값이므로 파일의 원시 폭을 확인할 때는 응답 파일을 이미지 도구로 읽는다. currentSrc는 브라우저가 선택한 주소다. 같은 화면에서 이 네 값을 함께 읽으면 작은 칸에 큰 원본을 보내는 문제를 찾을 수 있다. naturalWidth의 정의