프레임과 프레임셋 (Frame And Framesets)

엔지니어 · 2021년 9월 17일 업데이트

프레임셋과 프레임은 웹사이트 디자인 초기부터 사용되었습니다. 1996년 Netscape에서 도입한 프레임 기능은 웹사이트를 여러 섹션으로 나누는 것을 가능하게 했습니다. 원래 프레임셋은 페이지의 헤더와 네비게이션 바를 컨텐츠에서 분리하는 데 사용되었습니다.

현재와는 달리 과거에는 인터넷의 속도가 제한적이고 느렸기 때문에 고정적으로 사용할 영역과 동적으로 변경되는 부분을 분리하는 것은 그 당시에 좋은 성능을 보여주었습니다. 이는 동적으로 변경되어야 하는 부분의 데이터만 로딩하여 데이터 양과 로딩 시간을 줄일 수 있었습니다.

프레임셋 (Framesets)

프레임셋은 웹 페이지의 레이아웃이고 자체 HTML 마크업을 가지고 있습니다. 여기에는 개별 섹션의 수와 행과 열의 수와 크기가 포함됩니다. 해당 HTML 요소를 frameset이라고 하며 cols 및 rows 속성을 포함할 수 있습니다. cols는 열 수를 정의하고 rows는 행 수를 정의합니다. 개별 열은 쉼표로 구분되고 하나 이상의 열 또는 행을 "동적으로" 나타낼 수 있습니다. 즉, 하나 이상의 행이 크기에 맞게 조정됩니다. 고정된 열 또는 행의 수입니다. col="400,*"을 사용하여 두 개의 열이 있는 프레임셋을 생성합니다. 여기서 첫 번째 열은 너비가 400px이고 두 번째 열은 프레임의 나머지 부분을 차지합니다. 행의 경우도 동일하게 적용됩니다.

프레임 (Frame)

프레임은 프레임셋 페이지의 핵심입니다. frame 요소는 닫는 요소(</frame>)에 의해 닫히지 않고 인라인(<frame ... />)으로만 닫힐 수 있습니다. 또한 프레임 요소는 프레임셋 내에서만 사용할 수 있습니다.

<frameset cols="20%,*,20%">
  <frame name="left" src="left.htm" />
  <frame name="center" src="center.htm" />
  <frame name="right" src="right.htm" />
  <noframes>
    <body>이 브라우저는 프레임을 지원하지 않습니다.</body>
  </noframes>
</frameset>

프레임의 두 가지 주요 속성은 src와 name입니다. src는 프레임에 로드할 컨텐츠 페이지를 정의합니다. 이것은 img와 같은 다른 태그와 동일하게 작동합니다. name 속성은 타겟으로 지정할 이름을 의미합니다. 이 두 가지 외에 다양한 HTML 속성이 프레임 요소에서 사용될 수 있습니다.

프레임의 단점

브라우저는 항상 전체 구성을 해석하여 웹페이지를 표시하게 됩니다. 하지만 프레임셋과 프레임을 사용하게 되면, URL은 변경되지 않으면서 여러 하위 프레임들이 표시되기 때문에 사용자가 하위 프레임에 표시된 내용을 북마킹을 할 수가 없습니다. 특히 프레임의 가장 큰 단점은 검색엔진을 통해 찾은 페이지에 실제로 들어가보면 정젹인 영역(헤더나 네비게이션 바) 없이 동적인 영역만 나오는 경우가 발생할 수 있습니다. 뿐만 아니라 프레임에는 CSS로 위치를 지정할 수 없기 때문에 스마트폰, 태블릿 등의 다양한 디바이스를 통해 웹 페이지를 사용할 수 없을 수 있습니다.

SEO를 위한 프레임의 중요성

Google을 포함한 대부분의 검색 엔진은 프레임셋이 있는 페이지의 noframes 영역에만 주의를 기울입니다. 즉, 클래식 프레임 페이지는 인덱싱할 수 없습니다. 적절한 탐색 없이 컨텐츠가 표시되지 않도록 JavaScript 스니펫을 사용할 수 있지만 기본적으로 프레임을 사용하지 않는 것이 좋습니다. 이 기술로 디자인된 웹사이트를 최적화하고자 한다면 모바일 기기의 활용도를 고려한 즉각적인 재디자인을 권장합니다.

프레임 SEO 진단하기

검색엔진 최적화를 방해하는 프레임 및 프레임 셋을 진단해보세요.

프레임의 현대적인 대체품

HTML5는 프레임을 지원하지 않으므로 사용해서는 안 됩니다. 일부 요소나 문서를 포함하는 것을 피할 수 없는 경우 HTML 코드에서 iframe 요소를 사용하는 것이 좋습니다. 이 요소는 비디오 통합에 자주 사용되는 프레임 요소의 후속 요소입니다.

요약: 프레임 및 프레임세트 FAQ

  • HTML에서 프레임과 프레임셋은 왜 사용하나요?
    • 프레임과 프레임셋은 페이지를 정적 요소와 동적 요소로 나눌 수 있는 기술입니다. 사용자가 페이지를 새로 고치면 브라우저는 동적 부분만 다시 로드합니다.
  • 프레임과 프레임셋의 차이점은 무엇인가요?
    • 프레임은 페이지를 구성하는 단일 요소입니다. 프레임셋은 개별 프레임들을 여러 개 포함할 수 있습니다.
  • 프레임의 단점은 무엇인가요?
    • 페이지를 여러 문서로 나누면 사용자가 개별 하위 페이지를 북마킹할 수 없습니다. 또 다른 단점은 CSS를 사용하여 프레임을 배치할 수 없다는 점입니다.
  • 여전히 프레임과 프레임셋이 필요한가요?
    • 아닙니다. HTML5는 프레임 및 프레임셋을 지원하지 않으며 더 이상 사용을 권장하지 않습니다.
  • 프레임의 대안은 무엇인가요?
    • 보다 현대적인 접근 방식은 iframe 요소입니다.
  • 프레임
  • 프레임셋
  • frame
  • framesets

0 댓글