프레임(HTML 태그)

이 문서의 내용 중 전체 또는 일부는 프레임문서에서 가져왔습니다.</div></div>

1 개요

<html>  
Frameset Example








<p>이 페이지를 보려면, 프레임을 볼 수 있는 브라우저가 필요합니다.</p>

</html>
Frameset Example
top.html
left.htmlmain.html

이런 식으로 복수의 웹 페이지가 구획별로 나뉘어서 동시에 표시되게 하는 태그이다. 물론 위의 그림은 진짜 프레임이 아니라 대충 테이블로 모양만 구현해 놓은 것이다.

w3schools.com의 프레임 태그 관련 설명

1900년대에서 2000년대 사이 인터넷에서 개인 홈페이지 열풍이 불어 우후죽순처럼 수많은 개인 홈페이지가 쏟아져 나오던 시절이 있었는데 당시 많은 홈페이지가 이런 형태로 되어 있었다. 이를테면 위쪽이나 왼쪽을 조금 잘라내 메뉴 부분으로 쓰고 나머지 부분에 내용이 나오게 하는 식이었는데 이를 위해 메뉴 부분용 HTML 문서를 따로 만들어 놓고 그 메뉴용 문서에 사이트맵을 링크해서 썼다.

2 장점

이 방식은 다음과 같은 장점이 있어 그 당시 많이 쓰였다.

  • 메뉴 구성을 만들기 좋다.
  • 메뉴용 페이지만 만들어 놓고 프레임에 박아 놓으면 되기 때문에 각 콘텐츠 페이지마다 일일이 사이트맵을 붙일 필요가 없어진다. 메뉴 구성에 뭔가를 추가하거나 삭제하려면 모든 콘텐츠 페이지를 번거롭게 손봐줘야 하는 수고로움이 생기게 되는데 프레임을 사용하면 이러한 수고를 덜 수 있다.
  • 콘텐츠 페이지를 스크롤하더라도 메뉴 페이지는 고정되기 때문에 스크롤압박이 심한 페이지를 읽어도 다른 메뉴 항목으로 들어가려고 다시 스크롤을 올려야 할 필요가 없어진다. 그냥 키보드의 홈 키 누르면 되지 않나?
  • 메뉴 페이지를 통해 콘텐츠 페이지를 이리저리 옮겨다녀도 메뉴 페이지를 고정시켜 놓을 수 있기에, 홈페이지에 <bgsound>[1]나 <embed> 태그 등을 써서 넣은 배경음악이나 플래시 같은 멀티미디어를 끊김없이 재생할 수 있다.[2] 또한, 프레임 태그를 이용해 일종의 편법을 쓰면 노프레임 구조에서도 끊김없는 배경음악을 구현할 수 있다.

3 단점

그러나 단점도 있었는데, 프레임이 지원되지 않는 브라우저에서는 당연히 표시할 수 없었다. 이런 경우를 대비해 <noframes> 태그가 있다고는 하나 프레임 미지원시 나오는 메시지를 표시하기 위한 태그일 뿐이다. 즉, 프레임이 지원되지 않는 브라우저를 배려하려면 아예 노프레임 페이지를 따로 만들어야 하지만, 그렇게 하느니 아예 처음부터 노프레임으로 만드는 게 낫다.

당시는 프레임이 지원되는 브라우저가 많이 보급된 상황이니 이 문제는 차치하고 넘어가더라도, 또 다른 문제로 이 구조가 접근성과 사용성에 부정적인 영향을 미친다는 지적이 있었다. 프레임 구조로 복수의 페이지를 한 화면에 나타낸다는 것은 곧 한 화면에 표시될 페이지가 둘로 쪼개진다는 것을 의미하기에, 그로 인해 따라오는 다음과 같은 문제들이 있다.

  • 웹 브라우저의 소스 보기 기능을 써 보면 나오는 건 프레임 뼈대 소스 뿐이고 각 페이지의 소스를 보려면 그 프레임으로 가서 마우스 오른쪽 버튼 누르고 소스 보기 하는 방법을 써야 한다.[3]
  • 웹 브라우저의 제목 표시줄이나 탭에 나오는 제목(<title> 태그를 써서 지정해 줄 수 있는 그 것)이 고정되어 버린다. 이는 프레임 구조의 문서는 제목을 프레임셋 본체의 제목으로 보여주기 때문이다. 그래서 각 문서로 갈 때마다 제목이 바끠게 하고 싶어도 불가능해진다. 거기에 한 술 더 떠서 아예 제목이 '이 페이지를 보려면, 프레임을 볼 수 있는 브라우저가 필요합니다.'로 되어 있어서[4] 검색 엔진에서 그렇게 잡힌다면 들어가 보기 전에는 도대체 뭐 하는 페이지인지 직관적으로 알 수 없게 된다.
  • 파밍[5]에 취약해진다. 각 프레임이 보여 주는 페이지가 어디인지 쉽게 알지 못하기 때문에 공격자의 페이지 변조 한 방에 눈 뜨고 코 베이는 상황이 일어날 수 있다. 이것은 <iframe>에서도 갖고 있는 문제.
  • 검색 엔진에 등록시 프레임셋 뿐만 아니라 메뉴용 페이지와 콘텐츠용 페이지들까지 함께 크롤링한다. 즉, 프레임에 들어가야 할 개별 페이지까지 검색에 잡히는데 그 경로로 들어가면 당연히 프레임에 들어가지 않은 형태로 그 페이지만 한 화면을 떡하니 차지한다. 대개 이런 경우는 메뉴용 페이지에 오고 가는 링크를 거는 경우가 일반적인데 프레임에 넣어서 표시하도록 만든 페이지를 외롭게(?) 보여주니 당연히 접근성 저하가 올 수밖에 없다.

그 외에도 프레임 구조가 갖는 비효율성은 많다. 결정적으로 프레임 구조가 가지고 있던 장점도 CSS와 jQuery 등의 등장으로 인해 거의 묻혀버렸다.

4 HTML5 규격에서 제외되다

이러한 이유로 W3C에서는 프레임 구조의 사용을 지양할 것을 권고하면서 프레임 구조로 된 웹 사이트는 점점 줄어드는 추세로 돌아섰고 HTML5 규격에는 아예 빠져버렸다. 다만 아직 프레임 구조로 된 웹 사이트들이 남아있기 때문에[6] 브라우저에는 여전히 지원하고 있다. 하지만 이런 사이트들을 들어가 보면 높은 확률로 오래 전에 만든 사이트들이고 오늘날에는 프레임 구조가 거의 사장된 상태라 장래에는 웹 브라우저에서도 프레임셋 태그(<frame>, <frameset>, <noframes>)를 아예 지원하지 않게 될 가능성이 높다. 그리고 그 사이트들에서 단체로 '이 페이지를 보려면 프레임을 볼 수 있는 브라우저가 필요합니다' 메시지를 뿜어내며 헬게이트가 열리겠지...[7]

5 iframe

<iframe>은 문서 전체가 프레임인 게 아니라 문서 안에 박스형으로 프레임을 넣을 때 쓴다. 이 태그는 HTML5에서도 계속 지원된다. 물론 iframe도 남용하면 웹 접근성 저하되는 건 똑같다.
  1. ↑ 말 그대로 배경음악을 넣기 위한 태그였는데 인터넷 익스플로러 전용 비표준 태그라 다른 웹 브라우저에선 작동하지 않았다. 그래서 다른 웹 브라우저에서도 배경음악을 재생할 수 있도록 하기 위해 <embed> 태그로 대체하는 경우가 있었다.
  2. ↑ 배경음악 태그를 콘텐츠 페이지마다 일일이 넣으면 옮겨다닐 때마다 음악이 끊어지고 처음부터 다시 재생되지만 항상 고정되는 메뉴 페이지에 넣으면 끊김없이 재생된다.
  3. ↑ 구글 크롬의 경우 프레임 구조로 된 페이지에서 마우스 오른쪽 버튼을 눌러 보면 '페이지 소스 보기'와 '프레임 소스 보기'가 따로 나오는데 페이지 소스 보기를 하면 프레임 구조의 소스가 나오고 프레임 소스 보기를 하면 그 프레임 안에 있는 페이지의 소스가 나온다.
  4. ↑ 나모 웹에디터로 만든 페이지에서 발견되는 현상이다. 물론 소스 코드를 고쳐서 바꿀 수 있다.
  5. ↑ 악성코드나 통신 도중의 HTTP 요청 변조로 인해 본래 페이지와 유사하게 만든 가짜 페이지로 끌여들여 개인정보를 빼내는 수법
  6. ↑ 구글에 '이 페이지를 보려면 프레임을 볼 수 있는 브라우저가 필요합니다'라고 검색해 봐도 꽤 나온다(...).
  7. ↑ 이미 폐기된 태그를 브라우저에서 지원 중단시킨 선례가 존재한다. <basefont> 태그가 그 예. 말 그대로 페이지에서 기본으로 표시될 글꼴을 지정하는 태그였는데 사용 빈도가 그다지 높지 않았고 CSS가 보급된 이후로는 점점 사장되어 갔다. 인터넷 익스플로러에서는 9을 끝으로 지원이 중단되어 버렸고 다른 웹 브라우저도 마찬가지로 지원을 중단하면서 현재 어느 브라우저에서도 <basefont> 태그를 지원하지 않는다.