프레임셋 문서 구조 - by. UXKM

요약 설명

프레임셋(frameset)은 HTML4에서 사용되던 문서 분할 방식으로, 하나의 브라우저 창 안에 여러 개의 HTML 문서를 나누어 동시에 표시하기 위해 사용되었습니다.
<frameset> 요소는 <body>를 대체하며, <frame> 태그를 통해 각 영역에 다른 문서를 로드합니다.

하지만 프레임셋은 접근성 저하, 검색엔진 비호환, 모바일 미지원, 복잡한 유지보수 등의 이유로 HTML5에서 공식적으로 폐지(deprecated) 되었으며, 더 이상 사용이 권장되지 않습니다.
현대 웹 개발에서는 <iframe>이나 컴포넌트 기반 SPA 구조, CSS 레이아웃 기법(Flexbox, Grid) 등이 대체 기술로 사용됩니다.

주요 특징

  1. 문서 분할

    한 페이지를 여러 개의 영역(프레임)으로 분할하여 각각 다른 HTML 문서를 표시합니다.

  2. 독립적 로딩

    각 프레임은 개별 URL을 가지며, 독립적으로 로드되어 콘텐츠를 보여줍니다.

  3. <body> 대체

    <frameset> 요소는 <body> 요소를 대체하며 동시에 사용할 수 없습니다.

  4. 링크 타깃 지정

    프레임 간 상호작용을 위해 <a target="프레임이름"> 형식을 사용하여 특정 프레임에 링크를 열 수 있습니다.

기본 구조

cols 또는 rows 속성을 사용하여 프레임을 수직 또는 수평으로 분할할 수 있으며, 각 <frame> 요소에는 개별 HTML 파일을 지정하여 콘텐츠를 불러옵니다.

관련 요소

  • 요소
  • 설명

  • <frameset>

    프레임 분할을 정의하며, <body> 대신 사용

  • <frame>

    각 프레임에 표시할 개별 문서 정의

  • <noframes>

    프레임을 지원하지 않는 브라우저에 대체 콘텐츠 제공

HTML5 에서 프레임셋이 폐지된 이유

접근성 문제 (Accessibility Issues)

  1. 스크린 리더 지원 부족

    프레임은 서로 독립적인 문서로 구성되어 있기 때문에, 보조 기술(예: 스크린 리더)은 전체 페이지 구조를 인식하기 어렵습니다.

  2. 프레임 간 문맥 전달 실패

    사용자 입장에서는 프레임이 논리적으로 연결되어 있지만, 보조기기는 이를 별개의 페이지로 해석하여 내용 간 흐름을 이해하지 못합니다.

  3. 키보드 포커스 제어 어려움

    프레임 내부로 포커스를 이동시키는 것이 까다롭고 예측 불가능하여 키보드 사용자에 불리합니다.

사용자 경험 저하 (UX Issues)

  1. 뒤로 가기 버튼 오류

    프레임 내 링크 클릭 시 주소(URL)는 변하지 않아, 사용자가 브라우저의 ‘뒤로 가기’를 눌러도 원래 페이지로 돌아가지 않습니다.

  2. 스크롤 혼란

    프레임마다 스크롤이 생기면, 전체 페이지가 아닌 부분 스크롤로 인해 사용자가 혼란을 느끼기 쉽습니다.

  3. 모바일 대응 불가

    프레임셋은 고정형 레이아웃에 기반하기 때문에, 반응형 웹 디자인에 적합하지 않으며 모바일 브라우저와의 호환성도 매우 낮습니다.

검색 엔진 최적화(SEO)에 불리

  1. 프레임 내부 문서 별도 인식

    검색 엔진은 프레임 안의 콘텐츠를 별도의 문서로 인덱싱하거나 전혀 인식하지 못할 수 있습니다.

  2. 문서 구조 파악 실패

    메인 페이지 자체에는 내용이 없고 프레임만 존재하므로, 크롤러가 페이지의 실질적 주제나 콘텐츠를 파악하지 못합니다.

유지보수성과 개발 효율성 저하

  1. 복잡한 문서 구조

    단일 페이지 안에 여러 개의 HTML 파일을 로드하므로, 수정 시 여러 파일을 동시에 수정해야 하는 불편함이 있습니다.

  2. 프레임 간 상호작용 어려움

    JavaScript로 프레임 간 통신을 하려면 parent, top, frames[] 등의 접근 방식이 필요하여 코드가 복잡하고 취약해집니다.

  3. 페이지 단위 관리 어려움

    프레임 기반 문서는 페이지 단위로 분리되어 있어서, 라우팅·분석·로그 추적이 불편합니다.

대체 기술의 등장

  1. <iframe>

    인라인 프레임(<iframe>)으로 문서 내의 특정 영역에 외부 콘텐츠를 삽입할 수 있도록 해줍니다.
    보통 광고, 외부 위젯, 지도, 동영상 삽입 등 특정 목적에 국한되어 사용됩니다.

  2. SPA (Single Page Application)

    Vue, React, Angular와 같은 프레임워크는 DOM을 직접 조작하지 않고, 데이터 상태 변화에 따라 동적으로 콘텐츠를 렌더링하는 방식으로 동작합니다.

  3. CSS Flexbox, Grid

    프레임 분할을 사용하지 않더라도, 고정형 또는 반응형 레이아웃을 CSS를 활용하여 충분히 구현할 수 있습니다.