YKSS
한 번의 왕복 요청으로 이루어지는 내비게이션
브라우저 내비게이션 시 여러 번의 네트워크 왕복을 단 한 번으로 줄이는 최적화 기법을 설명하는 아티클로, 103 Early Hints, HTTP/2 Server Push, Speculation Rules API 등을 활용한 성능 최적화 전략을 다룹니다. 페이지 전환 시 발생하는 렌더링 블로킹을 최소화하여 Core Web Vitals 지표를 개선할 수 있습니다.
핵심 요약
이 아티클은 웹 성능 최적화를 실무 판단 기준으로 다시 정렬해 주는 읽기 자료입니다. 브라우저 내비게이션 시 여러 번의 네트워크 왕복을 단 한 번으로 줄이는 최적화 기법을 설명하는 아티클로, 103 Early Hints, HTTP/2 Server Push, Speculation Rules API 등을 활용한 성능 최적화 전략을 다룹니다. 페이지 전환 시 발생하는 렌더링 블로킹을 최소화하여 Core Web Vitals 지표를 개선할 수 있습니다.
이 아티클은 웹 성능 최적화를 면접에서 바로 꺼낼 수 있는 답변 프레임으로 접어 두는 메모처럼 읽으면 좋습니다.
웹 성능 최적화를 설명할 때 정의만 말하면 답변이 얕아지기 쉽습니다. 전통적인 내비게이션은 HTML → CSS/JS → API 데이터 순으로 여러 번의 왕복 요청이 발생한다. 실무 판단 근거와 면접 답변의 밀도를 동시에 끌어올릴 수 있습니다.
학습 포인트
면접 답변으로 연결할 학습 포인트입니다.
전통적인 내비게이션은 HTML → CSS/JS →
전통적인 내비게이션은 HTML → CSS/JS → API 데이터 순으로 여러 번의 왕복 요청이 발생한다. 이 포인트를 알고 있으면 비슷한 상황에서 왜 이 접근을 선택하는지까지 설명할 수 있습니다.
전통적인 내비게이션은 HTML → CSS/JS → 를 개념으로만 기억하고 맥락 없이 적용하면 전통적인 내비게이션은 HTML → CSS/JS → API 데이터 순으로 여러 번의 왕복 요청이 발생한다. 성능 측정을 건너뛰면 체감 품질이 나빠져도 원인을 놓치기 쉽습니다.
HTTP 103 Early Hints를 활용하면 메
HTTP 103 Early Hints를 활용하면 메인 응답 전에 리소스 프리로드 힌트를 브라우저에 전달할 수 있다. 이 포인트를 알고 있으면 비슷한 상황에서 왜 이 접근을 선택하는지까지 설명할 수 있습니다.
HTTP 103 Early Hints를 활용하면 메를 개념으로만 기억하고 맥락 없이 적용하면 HTTP 103 Early Hints를 활용하면 메인 응답 전에 리소스 프리로드 힌트를 브라우저에 전달할 수 있다. 성능 측정을 건너뛰면 체감 품질이 나빠져도 원인을 놓치기 쉽습니다.
Speculation Rules API로 다음 페이
Speculation Rules API로 다음 페이지를 미리 프리페치/프리렌더링하여 즉각적인 내비게이션이 가능하다. 이 포인트를 알고 있으면 비슷한 상황에서 왜 이 접근을 선택하는지까지 설명할 수 있습니다.
Speculation Rules API로 다음 페이를 개념으로만 기억하고 맥락 없이 적용하면 Speculation Rules API로 다음 페이지를 미리 프리페치/프리렌더링하여 즉각적인 내비게이션이 가능하다. 성능 측정을 건너뛰면 체감 품질이 나빠져도 원인을 놓치기 쉽습니다.
읽는 순서
- 1이론
"한 번의 왕복 요청으로 이루어지는 내비게이션"의 멘탈 모델과 요약을 먼저 읽고, 웹 성능 최적화와 관련된 핵심 용어 3개를 적어보세요.
- 2구현
한 번의 왕복 요청으로 이루어지는 내비게이션에서 다룬 아이디어를 작은 예제로 직접 구현하거나 기존 코드에 대입해 보면서 적용 조건을 확인하세요.
- 3실무
현재 프로젝트에서 웹 성능 최적화와 연결되는 화면이나 코드 리뷰 사례를 찾아, 어디서 같은 판단이 필요한지 정리해보세요.
- 4설명
동료에게 "브라우저가 페이지를 내비게이션할 때 발생하는 네트워크 요청 흐름을 설명하고, 각 단계에서의 최적화 방법을 말해주세요."에 대한 답을 5분 안에 설명해보세요. 막히는 부분이 아직 이해가 얕은 구간입니다.
면접 연결 질문
[감점 답변] 용어 정의만 반복하거나 "한 번의 왕복 요청으로 이루어지는 내비게이션에서 그렇게 하더라" 수준으로 답하면 감점 포인트입니다. 면접관은 개념을 외운 사람보다 판단 근거를 말하는 사람을 찾습니다. [좋은 답변] DNS 조회, TCP 연결, HTML 파싱, 서브리소스 로딩, API 요청 각 단계와 preconnect, preload, prefetch 전략을 설명하세요. 가능하면 선택 이유, 트레이드오프, 실제로 문제가 되는 상황까지 함께 연결하세요.
[감점 답변] 용어 정의만 반복하거나 "한 번의 왕복 요청으로 이루어지는 내비게이션에서 그렇게 하더라" 수준으로 답하면 감점 포인트입니다. 면접관은 개념을 외운 사람보다 판단 근거를 말하는 사람을 찾습니다. [좋은 답변] 메인 응답 처리 전에 브라우저가 리소스 로딩을 시작할 수 있다는 점, 서버 처리 시간을 병렬화하는 효과를 설명하세요. 가능하면 선택 이유, 트레이드오프, 실제로 문제가 되는 상황까지 함께 연결하세요.
[감점 답변] 용어 정의만 반복하거나 "한 번의 왕복 요청으로 이루어지는 내비게이션에서 그렇게 하더라" 수준으로 답하면 감점 포인트입니다. 면접관은 개념을 외운 사람보다 판단 근거를 말하는 사람을 찾습니다. [좋은 답변] 프리렌더링은 JS 실행까지 완료된 상태, prefetch는 리소스만 다운로드, 메모리/CPU 트레이드오프를 언급하세요. 가능하면 선택 이유, 트레이드오프, 실제로 문제가 되는 상황까지 함께 연결하세요.
자기 점검
"전통적인 내비게이션은 HTML → CSS/JS → "를 기능 목록으로만 외우는 것. 실제로는 왜 이 접근이 필요한지와 적용 조건까지 설명해야 합니다.
좋은 사례만 기억하고 실패 조건을 빼먹는 것. 실제 면접에서는 언제 위험해지는지까지 함께 말해야 합니다.