이 질문 뒤에 면접관이 확인하려는 것은 따로 있습니다.
브라우저가 화면을 그리는 과정을 저는 읽고, 합치고, 배치하고, 칠한다로 이해합니다. HTML을 읽어 구조를 만들고, CSS를 읽어 스타일을 만든 뒤, 둘을 합쳐 무엇을 어디에 어떻게 보일지 정하고, 마지막에 화면에 칠합니다. 중요한 건 왜 이 순서로 막히느냐입니다. 핵심 병목은 CSS와 JS가 이 흐름을 멈춰 세우는 자리입니다. 스타일이 정해지기 전엔 배치를 못 하고, JS가 중간에 끼면 그 위 과정이 멈춥니다. 그래서 화면이 늦게 뜨는 건 보통 처음 화면에 필요 없는 것까지 앞에서 다 기다리기 때문입니다. 학부 프로젝트에서 첫 화면이 느렸을 때, 당장 안 보이는 스크립트를 뒤로 미루고 핵심 스타일만 먼저 주자 체감이 크게 빨라졌습니다. 그래서 저는 이 과정을 외울 단계가 아니라, 무엇을 앞에서 안 기다리게 할지 정하는 지도로 씁니다.
이 과정을 저는 브라우저가 화면을 그리기 전에 무엇을 기다리느냐로 봅니다. 구조(HTML)와 스타일(CSS)이 둘 다 준비돼야 어디에 무엇을 둘지 계산할 수 있고, 그 뒤에야 칠합니다. 그래서 첫 화면 속도는 이 계산 전에 꼭 기다려야 하는 게 얼마나 많은가로 거의 결정됩니다. JS가 특히 문제인데, 중간에 끼면 그 위 과정을 멈추고 자기부터 처리하기 때문입니다. 과제에서 이걸 모르고 큰 스크립트를 문서 위쪽에 둬서 화면이 한참 비어 있던 적이 있습니다. 그 스크립트를 나중에 실행되게 옮기자 같은 코드인데 화면이 먼저 떴습니다. 그때 이 과정의 핵심은 단계가 아니라 의존 관계라는 걸 알았습니다. 그래서 저는 화면 성능을 볼 때 무엇이 무엇을 기다리게 만드는지부터 봅니다.
이 과정을 외워서 말하기보다 무엇을 빠르게 만드는 데 쓰는지로 말씀드리겠습니다. 큰 흐름은 구조와 스타일을 만들어 합치고, 배치하고, 칠하는 것입니다. 여기서 첫 화면을 좌우하는 건 칠하기 전에 꼭 끝나야 하는 일의 양입니다. 그래서 빠르게 만드는 방향은 셋입니다.
그 일의 양을 줄이거나(필요한 스타일만 먼저), 멈춰 세우는 걸 미루거나(당장 필요 없는 JS 지연), 처음 화면에 안 보이는 것을 나중에 가져오는 것입니다. 학부 때 이 셋 중 멈춰 세우는 JS를 미루는 것만으로 첫 화면이 눈에 띄게 빨라진 적이 있습니다. 그래서 저는 이 과정을 지식이 아니라 우선순위 도구로 봅니다. 단계를 아는 게 목적이 아니라, 무엇을 안 기다리게 할지를 정하는 게 목적이라고 생각합니다.
답변에서 흔히 빠지는 것들 — 빠져 있으면 꼬리질문이 깊어집니다.
이 질문에 이어 네이버 프론트엔드 면접관이 던질 가능성이 높은 후속 질문.
이 페이지의 질문·답변·꼬리질문은 유사 직군 채용 시장의 공개된 면접 후기·커뮤니티 게시물을 분석해 구성한 학습 자료입니다. 특정 회사가 실제로 이 질문을 출제했다는 것을 보장하지 않으며, 모든 예시는 우문현답이 직접 작성한 창작물입니다. 해당 회사의 공식 입장과는 무관합니다. 회사 측의 정정 요청이 있을 경우 24시간 이내에 응답·수정합니다.