본문으로 이동

프레임 (월드 와이드 웹)

위키백과, 우리 모두의 백과사전.

웹 브라우저의 문맥에서 프레임(frame)은 웹 페이지 또는 브라우저 창의 일부분으로, 컨테이너와 독립적으로 콘텐츠를 표시하며 독립적으로 콘텐츠를 로드할 수 있는 기능을 가진다. 프레임 내의 HTML 또는 미디어 요소는 외곽 콘텐츠를 제공하는 사이트와 별개의 웹사이트에서 가져올 수 있다. 프레이밍(framing)이라고 알려진 이 관행은[1] 오늘날 종종 동일-출처 정책 위반으로 간주된다.

HTML에서 프레임셋(frameset)은 웹 페이지와 미디어가 전송될 수 있는 명명된 프레임들의 그룹이며, iframe은 문서의 본문(body) 내에 프레임을 배치할 수 있도록 해준다.

2000년대 초반부터 사용성과 접근성에 대한 우려로 인해 프레임셋의 사용이 감소했으며, HTML5 표준은 이를 지원하지 않는다.

태그와 속성

[편집]

HTML의 프레임은 <frameset></frameset> 태그 쌍을 사용하여 생성된다. <frameset> 태그는 프레임을 생성하는 데 사용되는 다른 모든 태그를 담는 컨테이너 태그다. 프레임셋 문서에서 <frameset> 태그는 <body> 태그를 대체한다. <frameset> 태그는 창을 프레임으로 나누는 방법을 정의한다.

각 프레임셋은 행(rows) 또는 열(cols)의 집합을 정의한다. 사용자가 rows 속성을 사용하여 프레임을 정의하면 가로 프레임이 생성된다. cols를 사용하여 프레임을 정의하면 세로 프레임이 생성된다.

프레임 기능이 비활성화된 웹 브라우저(또는 프레임을 지원하지 않는 브라우저)가 사용자에게 무언가를 표시할 수 있도록 다음과 같이 <noframes> 요소를 포함할 수 있다.

<frameset cols="85%, 15%">
  <frame src="http://www.example.com/frame_1.html" name="frame_1">
  <frame src="http://alt.example.com/frame_2.html" name="frame_2">
  <noframes>
    브라우저가 프레임을 지원하지 않습니다.
    <a href="http://www.example.com/frame_1.html">여기</a>를 클릭하여 프레임 1을 확인하세요.
    <a href="http://alt.example.com/frame_2.html">여기</a>를 클릭하여 프레임 2를 확인하세요.
  </noframes>
</frameset>

프레임셋에는 border 속성이 있다. 0보다 큰 정수로 설정하면 사용자가 이 테두리를 드래그하여 프레임 크기를 조정할 수 있다(단, 프레임 요소에 noresize 속성이 없어야 함). 테두리를 0으로 설정하면 테두리가 표시되지 않으며 서로 다른 프레임의 콘텐츠가 구분선 없이 서로 맞닿게 된다.

iframe 요소는 일반 HTML 본문 내에서 인라인으로 사용되며, frame 요소와 유사하게 초기 콘텐츠와 이름을 정의한다. <iframe></iframe> 태그 쌍 내부의 모든 텍스트는 iframe 태그를 이해하지 못하는 브라우저에서 표시된다.

<iframe src="http://www.example.com/frame_1.html" height="480" width="640">
    브라우저가 iframe을 지원하지 않습니다. 콘텐츠를 보려면 <a href="http://www.example.com/frame_1.html">여기</a>를 클릭하세요.
</iframe>

역사

[편집]

넷스케이프 내비게이터 2.0은 1996년 3월에 프레임에 사용되는 요소들을 도입했다. 사이버도그를 개발한 애플과 같은 다른 브라우저 벤더들도 그해 말에 뒤를 이었다.[2] 당시 넷스케이프는 월드 와이드 웹 컨소시엄(W3C)에 HTML 3.0 표준에 프레임을 포함할 것을 제안했다.[3]

프레임은 초기 웹진과 웹 메일 서비스, 웹 채팅 사이트와 같은 웹 앱을 표시하고 탐색하는 데 사용되었다. 프레임은 서버 사이드 인클루드나 CGI 지원과 같은 서버 기능 없이도 사이트 전체에 요소를 표시할 수 있다는 장점이 있었다. 이러한 기능은 당시 대중이 접근할 수 있는 초기 웹 서버에서는 흔하지 않았다.

초기 웹사이트들은 종종 상단에 프레임을 사용하여 스크롤해도 사라지지 않는 배너를 표시했다. 이러한 배너 프레임에는 때때로 사이트의 로고와 온라인 광고가 포함되기도 했다.[4]

HTML 4의 후속작으로 의도되었던 XHTML 1.1은 모든 프레임을 제거했다. 최종적인 대체제로 의도되었던 XFrames는[5] 구성된 프레임셋을 주소 지정하기 위한 복합 URI를 제공했다.

이후 HTML5 표준은 XHTML과는 다른 방식으로 프레임셋을 제거했다.[6] iframe 요소는 사이트 간 콘텐츠 공유를 위해 고안된 여러 "샌드박스" 옵션과 함께 유지되었다.[7]

장점

[편집]

콘텐츠를 독립적으로 로드하고 탐색할 수 있게 함으로써, 프레임은 처음 개발되었을 당시 사용되던 일반 HTML에 비해 몇 가지 장점을 제공했다.

  • 탐색 데이터와 같이 모든 또는 대부분의 페이지에서 공유되는 콘텐츠의 유지관리를 단순화한다.[8] 사이드바 탐색 메뉴에 항목을 추가해야 할 경우, 웹 페이지 작성자는 단 하나의 웹 페이지 파일만 수정하면 된다. 반면 전통적인 비프레임셋 웹사이트에서는 사이드바 메뉴가 모든 페이지에 나타난다면 각 페이지를 개별적으로 편집해야 했다.
  • 변경되지 않은 페이지 부분은 다시 다운로드하지 않음으로써 필요한 대역폭의 양을 줄인다.
  • 여러 정보를 나란히 볼 수 있게 하며, 각 섹션을 독립적으로 스크롤할 수 있는 기능을 제공한다. 여기에는 두 이미지나 비디오의 나란히 비교, 또는 독립적으로 스크롤되는 텍스트 페이지 옆에 비디오, 이미지, 애니메이션, 3D 회전 객체 등을 배치하는 등 무언가를 이해하는 두 가지 다른 방식이 포함될 수 있다.
  • 각주나 보충 설명이 링크되었을 때 페이지의 전용 섹션에 나타나게 하여, 독자가 본문에서 읽던 위치를 잃어버리지 않게 한다.
  • 프레임의 주요 장점은 다른 부분이 스크롤되는 동안 페이지의 일부를 고정된 상태로 유지할 수 있다는 것이다. 이는 탐색 옵션이나 배너 광고와 같이 시야에서 사라지지 않기를 원하는 요소에 유용하다.
  • 프레임은 서로 다른 서버에 있는 리소스를 통합한다. 예를 들어, 프레임을 사용하여 자신의 자료(및 탐색 그래픽)와 생성된 스레드 토론 자료를 결합할 수 있다.

[9]

비판

[편집]

HTML 콘텐츠를 프레이밍하는 관행은 수많은 비판을 불러일으켰으며, 대부분 사용성 및 접근성 문제에 집중되었다. 여기에는 다음이 포함된다.

  • 프레이밍은 브라우저에 표시되는 URL과 콘텐츠 사이의 정체성을 깨뜨려, 프레임셋 내의 특정 콘텐츠 항목을 링크하거나 북마크하기 어렵게 만든다.[10]
  • 프레임의 구현이 브라우저마다 일관되지 않다.[10]
  • 자료를 선형적으로 렌더링하는 브라우저는 프레임을 잘 처리하지 못한다.[11]
  • 프레이밍은 웹 색인을 복잡하게 만들고 검색 엔진 최적화에 해로울 수 있다.[13]
  • 프레이밍은 서로 다른 서버에 있는 콘텐츠 간의 경계를 혼동시키며,[14] 이는 저작권 침해 문제를 야기한다.[15]
  • 검색 엔진을 통해 들어온 방문자가 프레임 안에 표시되도록 설계된 페이지에 도달할 수 있으며, 이 경우 방문자가 사이트의 나머지 부분으로 이동할 방법이 없게 된다.[16]
  • 프레임은 뒤로 가기 버튼의 동작을 변화시킨다.[16]
  • 사용자들은 대개 브라우저가 프레임을 출력하는 방식이 자신이 예상하는 방식과 다르다고 느낀다.[15]
  • 프레임을 사용하는 웹 페이지의 외부 링크는 다른 페이지가 프레임셋 내에 나타나게 할 수 있는데, 이는 작성자가 달리 지정하지 않는 한 링크의 기본 동작이 현재 프레임에 로드되는 것이기 때문이다. 이는 부도덕한 웹마스터가 다른 사이트의 콘텐츠를 마치 프레임셋을 호스팅하는 사이트의 일부인 것처럼 보이게 하는 데 사용될 수 있다.
  • 화면 해상도나 브라우저 창 크기가 너무 작으면 각 프레임에 스크롤 바가 생겨 지저분해 보이고 이미 제한된 공간을 차지하게 된다. 이러한 현상은 일반적으로 모든 프레임셋 기능을 제대로 활용하지 못한 잘못된 사이트 디자인(유동적 레이아웃 대신 고정 레이아웃 사용)에서 비롯된다.
    이러한 현상은 다음과 같이 완화될 수 있다.
    • 일반적으로 스크롤 바가 필요하지 않은 작은 프레임의 스크롤 기능을 비활성화한다.
    • 대상 페이지에 고정 디자인 대신 유동적 디자인 특성을 사용하여 콘텐츠가 가로 스크롤 바를 생성하지 않도록 한다.

보안

[편집]

프레임은 동일-출처 정책을 시행하는 데 있어 기술적 어려움과 사용자 인터페이스상의 어려움을 동시에 발생시킨다. 후자의 예로, 외부 페이지가 사용자를 속여 99% 투명하게 만들어진 내부 페이지(iframe 요소를 사용하여 로드됨)에서 특정 동작을 수행하도록 유도할 수 있다.

대안

[편집]

웹 기술이 발전함에 따라, 프레임이 사용되었던 많은 목적들이 프레임에서 발견된 문제들을 피하는 방식으로 가능해졌다.

  • CSS(Cascading Style Sheets)는 페이지의 요소를 독립적으로 스크롤하거나(overflow 속성 사용), 다른 콘텐츠가 스크롤되는 동안 화면에 고정할 수 있게(position:fixed 사용) 해준다.
  • 서버 사이드 인클루드는 공유 콘텐츠를 한 번 편집하면 완성된 페이지의 일부로서 클라이언트에게 자동으로 전달되게 한다. 서버 CPU와 연결 속도가 빨라지면서 이를 실시간으로 처리하는 데 드는 추가 작업은 고려 대상이 아니게 되었다.
  • CGI와 PHP, 액티브 서버 페이지와 같은 웹 지향 스크립트 언어 및 웹 개발 프레임워크, 그리고 워드프레스와 같은 데이터베이스 기반 콘텐츠 관리 시스템은 콘텐츠 유지관리 및 탐색 제공을 위한 훨씬 풍부한 옵션을 제공한다.
  • 클라이언트 사이드 스크립트 언어와 DHTML은 사용자의 행동에 따라 페이지의 일부를 시각적으로 교체할 수 있게 해준다. 이를 통해 각주나 안내와 같은 "사이드" 콘텐츠를 표시하는 데 훨씬 더 큰 유연성을 제공하며, 이제 이러한 콘텐츠는 미리 정의된 프레임이 아니라 페이지 어디에서나 표시하거나 숨길 수 있다.
  • AJAX는 로그인한 사용자나 다른 곳의 이벤트에 따라 서버에서 콘텐츠를 가져와야 하는 경우에도 페이지 내에서 동적 표시를 가능하게 한다.

같이 보기

[편집]

각주

[편집]
  1. ↑ “Connecting to Other Websites”. 2013년 4월 2일. What makes framing different is that instead of taking the user to the linked website, the information from that website is imported into the original page and displayed in a special "frame". Technically, when you’re viewing framed information, your computer is connected to the site doing the framing—not the site whose page appears in the frame.
  2. ↑ Garaffa, Dave (1996년 12월 23일). “A Present From Apple: Cyberdog 2.0a1” (보도 자료). Internet.com. 2000년 8월 17일에 원본 문서에서 보존된 문서. 2011년 4월 14일에 확인함.
  3. ↑ Ladd, Eric. “Using HTML 3.2, Java 1.1, and CGI; Ch. 13, Frames”. 2007년 10월 30일에 원본 문서에서 보존된 문서.
  4. ↑ Shafer, Dan (1996). 《JavaScript & Netscape wizardry》. Scottsdale, AZ: Coriolis Group Books. 31쪽. ISBN 978-1-883577-86-5.
  5. ↑ “XFrames working draft”. W3C.
  6. ↑ HTML5 differences from HTML4: "The following elements are not in HTML5 because using them damages usability: frame, frameset, noframes"
  7. ↑ HTML5 differences from HTML4: "The iframe element has new attributes called sandbox and srcdoc which allow for sandboxing content, e.g. blog comments."
  8. ↑ “Framesets”.
  9. ↑ Roberts, L, John. “CSS and SEO”. 2022년 1월 28일에 확인함.
  10. 1 2 Jakob Nielsen, Jakob (December 1996). “Frames Suck Most of the Time”.
  11. ↑ “Should You Use Frames?”. HTML Code Tutorial. 2016년 8월 6일에 원본 문서에서 보존된 문서. 2010년 4월 7일에 확인함.
  12. ↑ “G.E.Boyd's How To Do Just About Anything by email – Part 1”. 지오시티즈. 2000년 8월 11일. 2000년 8월 17일에 원본 문서에서 보존된 문서. 2010년 6월 24일에 확인함.
  13. ↑ Moore-Eded, Piers. “SEO fundamentals 1”. Lewes SEO. 2012년 2월 25일에 확인함.[깨진 링크(과거 내용 찾기)]
  14. ↑ “I Hate Frames Club”. 2002년 3월 28일에 원본 문서에서 보존된 문서.
  15. 1 2 “Why are frames so evil?”.
  16. 1 2 “The Pros and Cons of Frames in Web Pages”.

외부 링크

[편집]
원본 주소 "https://ko.wikipedia.org/w/index.php?title=프레임_(월드_와이드_웹)&oldid=41764316"