Page Outliner는 웹 페이지의 전체 DOM 구조를 시각적인 트리 오버레이로 페이지 위에 직접 렌더링합니다. 모든 HTML 요소에 태그 이름을 표시하는 색상 라벨이 붙고, 들여쓰기와 연결선으로 중첩 깊이가 드러납니다. DevTools의 Elements 패널을 보는 것처럼 느껴지지만, 실제 라이브 페이지 위에 투영된 형태입니다.
브라우저 DevTools는 DOM을 사이드 패널의 텍스트 트리로 보여주며 시각적 레이아웃과 분리되어 있습니다. Page Outliner는 이 간격을 메워 DOM 구조를 페이지 위에 직접 투영합니다. 각 요소의 좌상단에 작은 색상 배지가 태그 이름(div, section, nav, h1, p, button 등)을 표시합니다. 중첩된 요소는 왼쪽으로 더 들여쓰기되어 트리 구조가 한눈에 파악됩니다. 헤더 안에 5개의 앵커 태그가 있는 nav가 있고, 메인 콘텐츠에 3개의 section이 있으며 각 section 안에 article이 있다는 것을 바로 알 수 있습니다. DevTools를 열거나 raw HTML 소스 코드를 읽지 않고도 페이지가 어떻게 구성되었는지 쉽게 이해할 수 있습니다.
페이지의 모든 가시 요소에 색상 태그 배지가 표시되어 HTML 태그 이름을 보여줍니다. 가장 바깥의 html과 body부터 개별 span, 링크, 버튼까지 모두 표시됩니다. 전체 요소 계층 구조가 시각적 지도로 렌더링됩니다.
각 요소 유형마다 배경 색상이 다릅니다. 구조적 요소(header, main, footer)는 파랑, 내비게이션은 호박색, 제목은 보라, 문단은 회색, 링크는 노랑, 버튼은 시안, 이미지는 핑크입니다. 텍스트를 읽지 않고도 색상만으로 요소 유형을 구분할 수 있습니다.
태그 배지 위에 마우스를 올리면 해당 요소가 반투명 오버레이로 강조되며 정확한 크기(너비 × 높이 픽셀)가 표시됩니다. 요소 경계에 아웃라인이 생기고 배지가 더 두드러지게 표시되어 어떤 배지가 어떤 요소에 속하는지 쉽게 확인할 수 있습니다.
깊게 중첩된 요소는 왼쪽 가장자리에서 더 멀리 들여쓰기되어 중첩 관계가 즉시 드러납니다. 페이지에 불필요하게 많은 wrapper div(5단계 이상)가 있는지, 아니면 깔끔하고 얕은 구조인지 한눈에 파악할 수 있습니다. 연결선이 부모-자식 관계를 보여줍니다.
오버레이는 절대 위치로 배치되어 페이지 레이아웃, 스크롤, JavaScript 동작에 영향을 주지 않습니다. 배지 라벨은 작고 반투명하여 아래 페이지 콘텐츠를 그대로 볼 수 있습니다. 언제든지 토글로 바로 제거할 수 있습니다.
컨테이너 요소의 배지를 클릭하면 자식 배지를 접을 수 있습니다. 전체 페이지 DOM 트리에 압도당하지 않고 특정 섹션에 집중할 때 유용합니다. 다시 클릭하면 확장됩니다.
복잡한 웹 페이지에 들어와서 어떻게 만들어졌는지 이해하고 싶을 때? Page Outliner가 전체 DOM 계층 구조를 한눈에 보여줍니다. 어떤 섹션이 어떤 콘텐츠를 포함하는지, 내비게이션이 어떻게 구성되었는지, 메인 콘텐츠 영역이 어디서 시작하고 끝나는지 바로 알 수 있습니다.
너무 많은 div 중첩은 CSS 작성을 어렵게 하고 페이지 렌더링을 느리게 만듭니다. 단순한 텍스트 블록 주위에 6단계 이상의 색상 배지가 쌓여 있다면 마크업을 단순화해야 한다는 신호입니다. Page Outliner는 이를 즉시 명확하게 보여줍니다.
페이지가 제대로 된 시맨틱 요소를 사용하고 있는가? header, nav, main, article, section, footer 배지를 찾아보세요. 모든 것이 div 요소라면 페이지가 시맨틱 구조가 부족하다는 뜻으로, 접근성, SEO, 유지보수성에 좋지 않습니다.
잘 만들어진 웹사이트(Stripe, Linear, Vercel 등)를 방문해 Page Outliner를 활성화하면 프론트엔드 팀이 HTML을 어떻게 구조화했는지 볼 수 있습니다. 실제 프로덕션 페이지의 DOM 구조를 통해 레이아웃 패턴을 배울 수 있습니다.
먼저 Page Outliner로 어떤 요소가 어디에 있는지 파악한 후, CSS Inspector나 Measure Distance 도구로 특정 요소를 더 깊이 파고들 수 있습니다.
DevSuite Pro 플로팅 독을 열고 Page Outliner 아이콘을 클릭하세요. 도구가 페이지 DOM을 즉시 스캔하여 모든 가시 요소에 태그 배지를 렌더링합니다.
각 요소의 좌상단에 색상 배지가 태그 이름(div, section, h1, p 등)을 표시합니다. 들여쓰기와 배지 위치를 통해 중첩 구조가 명확하게 보입니다.
배지 위에 마우스를 움직이면 해당 요소가 강조됩니다. 반투명 오버레이가 요소의 경계와 크기를 보여줍니다. 추상적인 태그 이름을 페이지상의 실제 시각적 위치와 연결해줍니다.
컨테이너 배지를 클릭하면 자식 배지가 접혀서 깊게 중첩된 요소로 인한 시각적 혼란을 줄일 수 있습니다.
독에서 Page Outliner 아이콘을 다시 클릭하면 모든 오버레이가 제거되고 정상 페이지 뷰로 돌아갑니다. 흔적이 남지 않습니다.
DevSuite Pro를 무료로 설치하고 브라우저용 39개 이상의 개발자 도구를 사용해보세요.
