프레임 (월드 와이드 웹)

"오늘의AI위키"는 AI 기술로 일관성 있고 체계적인 최신 지식을 제공하는 혁신 플랫폼입니다.
"오늘의AI위키"의 AI를 통해 더욱 풍부하고 폭넓은 지식 경험을 누리세요.

1. 개요

프레임(Frames)은 HTML에서 웹 페이지를 여러 개의 독립적인 영역으로 분할하여 각 영역에 다른 HTML 문서를 표시하는 데 사용되는 기술이다. 넷스케이프 네비게이터 2.0에서 처음 도입되었으며, <frameset>, <frame>, <noframes>, <iframe> 등의 태그를 사용하여 구현된다. 프레임은 콘텐츠 관리 단순화, 대역폭 절약, 정보 비교 용이성 등의 장점이 있지만, 사용성과 접근성 문제, 검색 엔진 최적화 문제, 저작권 문제, 보안 문제 등 다양한 비판을 받아왔다. CSS, 서버 측 포함, 웹 스크립팅 언어, 클라이언트 측 스크립팅, AJAX 등 다양한 대체 기술의 등장으로 프레임의 사용은 점차 감소했다.

프레임 (월드 와이드 웹)

개요

유형	웹 페이지 레이아웃 기술
목적	웹 페이지 내에 여러 개의 독립적인 영역 (프레임)을 생성 각 프레임은 별도의 HTML 문서를 표시

역사

도입 시기	1990년대 후반
주요 브라우저 지원	넷스케이프 내비게이터, 인터넷 익스플로러
사용 목적	웹 페이지 레이아웃 분할, 광고 삽입 등

기술적 특징

HTML 요소	``, ``, ``</td></tr><tr><th>frameset</th><td>웹 페이지를 프레임으로 분할하는 데 사용<br />HTML 문서 구조 정의</td></tr><tr><th>frame</th><td>frameset 내에서 개별 프레임을 정의<br />표시할 HTML 문서 지정</td></tr><tr><th>iframe</th><td>인라인 프레임<br />HTML 페이지 내에 다른 HTML 페이지를 포함하는 데 사용</td></tr></table><div class="infobox-sub-header">장점</div><table class="infobox-table"><tr><th>페이지 분할</th><td>웹 페이지 레이아웃을 논리적으로 분할 가능</td></tr><tr><th>독립적인 내용 표시</th><td>각 프레임은 독립적으로 내용을 표시하고 스크롤 가능</td></tr><tr><th>광고 삽입</th><td>특정 프레임에 광고를 삽입하여 수익 창출</td></tr></table><div class="infobox-sub-header">단점</div><table class="infobox-table"><tr><th>접근성 문제</th><td>시각 장애인 사용자의 접근성 문제 발생 가능<br />스크린 리더 호환성 문제</td></tr><tr><th>검색 엔진 최적화 (SEO) 문제</th><td>검색 엔진이 프레임 내부의 내용을 제대로 인식하지 못할 수 있음<br />웹 페이지 색인 생성의 어려움</td></tr><tr><th>북마크 및 링크 문제</th><td>특정 프레임의 내용을 직접 북마크하거나 링크하기 어려움<br />사용자 경험 저하</td></tr><tr><th>유지 보수</th><td>복잡한 프레임 구조는 유지 보수를 어렵게 할 수 있음</td></tr></table><div class="infobox-sub-header">대체 기술</div><table class="infobox-table"><tr><th>CSS 레이아웃</th><td>`<div>` 요소를 사용한 레이아웃, 플렉스박스, 그리드 레이아웃</td></tr><tr><th>서버 사이드 포함 (Server-Side Includes, SSI)</th><td>서버에서 HTML 페이지를 동적으로 조합</td></tr><tr><th>AJAX (Asynchronous JavaScript and XML)</th><td>웹 페이지의 일부분만 비동기적으로 업데이트</td></tr></table><div class="infobox-sub-header">보안 문제</div><table class="infobox-table"><tr><th>클릭재킹 (Clickjacking)</th><td>악의적인 웹 사이트가 iframe을 사용하여 사용자를 속이는 공격<br />사용자가 의도하지 않은 작업을 수행하도록 유도</td></tr><tr><th>교차 사이트 스크립팅 (Cross-Site Scripting, XSS)</th><td>iframe을 통해 악성 스크립트를 삽입하여 사용자 정보를 탈취하거나 웹 페이지를 변조하는 공격</td></tr></table><div class="infobox-sub-header">기타</div><table class="infobox-table"><tr><th>표준 준수</th><td>HTML5에서는 `<frame>` 및 `<frameset>` 요소가 더 이상 지원되지 않음<br />`<iframe>` 요소는 계속 사용 가능하지만, 사용에 주의가 필요</td></tr><tr><th>웹 표준</th><td>웹 표준을 준수하는 대체 기술 사용 권장 (CSS 레이아웃, SSI, AJAX)</td></tr></table> </div> </div> <!-- Read More Pages --> <!-- Read More Pages --> <section class="read-more-section"> <div class="read-more-title"><span style="font-size: 1.2rem">📚</span> 더 읽어볼만한 페이지</div> <ul class="read-more-list"> <li> <span class="read-more-category">웹 1.0 - </span> <a href="/w/%EC%A0%84%ED%99%94_%EC%A0%91%EC%86%8D"><strong>전화 접속</strong></a><br /> <span class="read-more-summary">전화 접속은 공중 교환 전화망을 통해 모뎀과 전화선으로 인터넷에 연결하는 방식으로, 1980년대부터 사용되었으나 광대역 인터넷의 등장으로 2000년대 이후 사용이 줄어 현재는 제한적으로 사용되며 사라지는 추세이다.</span> </li> <li> <span class="read-more-category">웹 1.0 - </span> <a href="/w/%EC%9E%90%EB%B0%94_%EC%95%A0%ED%94%8C%EB%A6%BF"><strong>자바 애플릿</strong></a><br /> </li> <li> <span class="read-more-category">월드 와이드 웹 - </span> <a href="/w/%EA%B5%AC%EA%B8%80"><strong>구글</strong></a><br /> </li> <li> <span class="read-more-category">월드 와이드 웹 - </span> <a href="/w/%EC%98%A8%EB%9D%BC%EC%9D%B8_%EC%96%B8%EB%A1%A0"><strong>온라인 언론</strong></a><br /> <span class="read-more-summary">온라인 언론은 인터넷을 통해 뉴스 및 정보를 제공하며, 디지털 기술 발달과 함께 성장하여 시민 저널리즘 부상, 정보 전달 속도 혁신 등의 특징을 보이지만 정보 신뢰성 문제, 전통 언론 쇠퇴 등의 과제를 안고 있다.</span> </li> <li> <span class="read-more-category">HTML - </span> <a href="/w/Alt_%EC%86%8D%EC%84%B1"><strong>Alt 속성</strong></a><br /> <span class="read-more-summary">`alt` 속성은 HTML의 `img` 및 `area` 태그에서 이미지를 로드할 수 없을 때 대체 텍스트를 지정하며, 스크린 리더 및 SEO에 영향을 미치고, W3C 지침에 따라 이미지의 의미를 전달하거나 장식용 이미지는 빈 문자열로 지정해야 한다.</span> </li> <li> <span class="read-more-category">HTML - </span> <a href="/w/%ED%8F%B0%ED%8A%B8_%ED%8C%A8%EB%B0%80%EB%A6%AC_(HTML)"><strong>폰트 패밀리 (HTML)</strong></a><br /> <span class="read-more-summary">폰트 패밀리(HTML)는 CSS 스타일 시트, 인라인 CSS, HTML `font` 태그를 통해 웹 페이지 글꼴을 지정하는 방법으로, 사용자 기기에 설치된 글꼴에 따라 표현이 달라지며, CSS의 `font-family` 속성은 글꼴 모양을 식별하고 제네릭 폰트와 글꼴 대체 메커니즘을 통해 일관된 글꼴 표현을 가능하게 한다.</span> </li> </ul> </section> <!-- Table of Contents --> <div class="wiki-toc"> <div class="wiki-toc-title">목차</div> <ul><li><a href="#sec-1">1. 개요</a></li><li><a href="#sec-2">2. 태그 및 속성</a><ul><li><a href="#sec-2-1">2.1. <frameset></a></li><li><a href="#sec-2-2">2.2. <frame></a></li><li><a href="#sec-2-3">2.3. <noframes></a></li><li><a href="#sec-2-4">2.4. <iframe></a></li></ul></li><li><a href="#sec-3">3. 역사</a><ul><li><a href="#sec-3-1">3.1. 넷스케이프 네비게이터와 프레임</a></li><li><a href="#sec-3-2">3.2. 초기 웹사이트에서의 활용</a></li><li><a href="#sec-3-3">3.3. XHTML과 XFrames</a></li><li><a href="#sec-3-4">3.4. HTML5와 iframe</a></li></ul></li><li><a href="#sec-4">4. 장점</a><ul><li><a href="#sec-4-1">4.1. 콘텐츠 관리 단순화</a></li><li><a href="#sec-4-2">4.2. 대역폭 절약</a></li><li><a href="#sec-4-3">4.3. 정보 비교 용이성</a></li><li><a href="#sec-4-4">4.4. 문맥 유지</a></li></ul></li><li><a href="#sec-5">5. 비판</a><ul><li><a href="#sec-5-1">5.1. 사용성 및 접근성 문제</a></li><li><a href="#sec-5-2">5.2. 검색 엔진 최적화 문제</a></li><li><a href="#sec-5-3">5.3. 저작권 문제</a></li><li><a href="#sec-5-4">5.4. 사용자 경험 저해</a></li></ul></li><li><a href="#sec-6">6. 보안</a><ul><li><a href="#sec-6-1">6.1. 동일 출처 정책 (Same-Origin Policy)</a></li></ul></li><li><a href="#sec-7">7. 대체 기술</a><ul><li><a href="#sec-7-1">7.1. CSS (Cascading Style Sheets)</a></li><li><a href="#sec-7-2">7.2. 서버 측 포함 (Server-Side Includes)</a></li><li><a href="#sec-7-3">7.3. 웹 스크립팅 언어 및 프레임워크</a></li><li><a href="#sec-7-4">7.4. 클라이언트 측 스크립팅 및 동적 HTML</a></li><li><a href="#sec-7-5">7.5. AJAX (Asynchronous JavaScript and XML)</a></li></ul></li></ul> </div> <!-- 본문 섹션 동적 렌더링 (tableOfContents[1] 이후) --> <div class="wiki-text"> <h2 id="sec-2" class=""> 2. 태그 및 속성 </h2> <p>HTML에서 프레임을 생성하고 관리하는 데 사용되는 주요 태그와 속성은 다음과 같다.<br /><br />* `<frameset>`: 프레임 생성에 사용되는 다른 모든 태그를 포함하는 컨테이너 태그이다. frameset 문서에서 `<body>` 태그를 대체하며, 창을 프레임으로 분할하는 방법을 정의한다. `rows` 속성을 사용하면 수평 프레임이, `cols` 속성을 사용하면 수직 프레임이 생성된다. `border` 속성을 통해 프레임 테두리 크기를 조정할 수 있다.<br />* `<frame>`: 각 프레임에 표시될 HTML 문서를 지정한다. `src` 속성으로 표시할 문서의 URL을, `name` 속성으로 프레임 이름을 지정하여 다른 프레임이나 <a href="/w/%EB%A7%81%ED%81%AC">링크</a>에서 대상으로 지정할 수 있다.<br />* `<noframes>`: 프레임을 지원하지 않거나 사용하지 않는 브라우저를 위한 대체 <a href="/w/%EC%BD%98%ED%85%90%EC%B8%A0">콘텐츠</a>를 제공한다.<br />* `<iframe>`: HTML 본문 내에 인라인으로 삽입되는 프레임을 정의한다. `<frame>` 요소와 유사하게 초기 콘텐츠와 이름을 정의할 수 있다.</p> </div> <div class="wiki-text"> <h3 id="sec-2-1" class=""> 2.1. &lt;frameset&gt; </h3> <p>HTML에서 프레임은 `<frameset></frameset>` 태그 쌍을 사용하여 생성된다. `<frameset>` 태그는 프레임을 생성하는 데 사용되는 다른 모든 태그의 컨테이너 태그이다. `<frameset>` 태그는 frameset 문서에서 `<body>` 태그를 대체한다. `<frameset>` 태그는 창을 프레임으로 분할하는 방법을 정의한다.<br /><br />각 프레임 세트는 일련의 행 또는 열을 정의한다. 사용자가 `rows` 속성을 사용하여 프레임을 정의하면 수평 프레임이 생성된다. 사용자가 `cols`를 사용하여 프레임을 정의하면 수직 프레임이 생성된다.<br /><br />`<noframes>` 요소를 포함하여 프레임을 사용하지 않거나 프레임을 지원하지 않는 웹 브라우저가 사용자에게 무언가를 표시할 수 있다. 예시는 다음과 같다.<br /><br />```html<br /><frameset cols="85%, 15%"><br /><frame src="http://www.example.com/frame_1.html" name="frame_1"><br /><frame src="http://alt.example.com/frame_2.html" name="frame_2"><br /><noframes><br />Your browser does not support frames.<br /><a target="_blank" href="http://www.example.com/frame_1.html">Click here</a> to view frame 1.<br /><a target="_blank" href="http://alt.example.com/frame_2.html">Click here</a> for frame 2.<br /></noframes><br /></frameset><br />```<br /><br />프레임 세트에는 `border` 속성이 있다. 0보다 큰 정수로 설정하면 frame 요소에 `noresize` 속성이 없는 한 사용자는 이 테두리를 드래그하여 프레임의 크기를 조정할 수 있다. border가 0으로 설정되면 테두리가 표시되지 않으며 서로 다른 프레임의 콘텐츠가 구분 없이 서로 맞닿게 된다.</p> </div> <div class="wiki-text"> <h3 id="sec-2-2" class=""> 2.2. &lt;frame&gt; </h3> <p>`<frame>` 태그는 각 프레임에 표시될 HTML 문서를 지정한다. `src` 속성을 사용하여 표시할 문서의 URL을 지정한다. `name` 속성을 사용하여 프레임에 이름을 지정하고, 다른 프레임이나 링크에서 대상으로 지정할 수 있다.<ref name="wiki-1"/> `<frame>` 요소는 `<frameset>` 태그 내에서 사용된다.<ref name="wiki-1"/><br /><br />```html<br /><frameset cols="85%, 15%"><br /> <frame src="http://www.example.com/frame_1.html" name="frame_1"><br /> <frame src="http://alt.example.com/frame_2.html" name="frame_2"><br /> <noframes><br /> 프레임을 지원하지 않는 브라우저에서 표시할 텍스트<br /> </noframes><br /></frameset></p> </div> <div class="wiki-text"> <h3 id="sec-2-3" class=""> 2.3. &lt;noframes&gt; </h3> <p>`<noframes>` 요소는 프레임을 지원하지 않거나, 프레임 사용을 하지 않도록 설정된 웹 브라우저에서 사용자에게 보여줄 내용을 정의한다.<br /><br />`<noframes>` 요소 사용 예시:<br /><br />```html<br /><frameset cols="85%, 15%"><br /> <frame src="http://www.example.com/frame_1.html" name="frame_1"><br /> <frame src="http://alt.example.com/frame_2.html" name="frame_2"><br /> <noframes><br /> 브라우저가 프레임을 지원하지 않습니다.<br /> <a target="_blank" href="https://www.example.com/frame_1.html">여기를 클릭</a>하면 frame 1을 볼 수 있습니다.<br /> <a target="_blank" href="https://alt.example.com/frame_2.html">여기를 클릭</a>하면 frame 2를 볼 수 있습니다.<br /> </noframes><br /></frameset><br />```<br />`<iframe>` 태그를 이해하지 못하는 브라우저는 `<iframe></iframe>` 태그 쌍 사이의 텍스트를 표시한다.<br /><br />```html<br /><iframe src="http://www.example.com/frame_1.html" height="480" width="640"><br /> 브라우저가 iframes을 지원하지 않습니다. <a target="_blank" href="https://www.example.com/frame_1.html">여기를 클릭</a>하면 내용을 볼 수 있습니다.<br /></iframe></p> </div> <div class="wiki-text"> <h3 id="sec-2-4" class=""> 2.4. &lt;iframe&gt; </h3> <p>`<iframe>` 요소는 일반 HTML 본문 내에서 인라인으로 사용되며 `<frame>` 요소와 유사하게 초기 콘텐츠 및 이름을 정의한다. `<iframe></iframe>` 태그 쌍 내부의 모든 텍스트는 iframe 태그를 이해하지 못하는 브라우저에 표시된다.<ref name="wiki-1"/><br /><br />iframe<sup>영어</sup>을 사용한 예시는 다음과 같다.<br /><br />```html<br /><iframe src="http://www.example.com/frame_1.html" height="480" width="640"><br />Your browser does not support iframes. <a target="_blank" href="http://www.example.com/frame_1.html">Click here</a> to view the content.<br /></iframe><br />```<br /><ref name="wiki-1"/></p> </div> <div class="wiki-text"> <h2 id="sec-3" class="has-divider"> 3. 역사 </h2> <p>넷스케이프 네비게이터 2.0이 1996년 3월 프레임 요소를 도입한 이후, 애플의 사이버독 출시와 함께 다른 브라우저 벤더들도 프레임 기술을 도입하기 시작했다.<ref name="wiki-2"/> 넷스케이프는 프레임을 HTML 3.0 표준에 포함시키기 위해 <a href="/w/%EC%9B%94%EB%93%9C_%EC%99%80%EC%9D%B4%EB%93%9C_%EC%9B%B9_%EC%BB%A8%EC%86%8C%EC%8B%9C%EC%97%84">월드 와이드 웹 컨소시엄</a>(W3C)에 제안했다.<ref name="wiki-3"/><br /><br />초기에는 온라인 잡지나 웹 앱, 웹메일, 웹 채팅 사이트 등에서 프레임을 활용했다. 프레임은 서버 측 인클루드나 CGI 지원과 같은 서버 기능 없이도 사이트 전체 요소를 표시할 수 있게 해 주었으며, 초기 웹 서버 환경에서는 이러한 기능이 일반적이지 않았기 때문에 프레임은 유용하게 사용되었다. 초기 웹사이트들은 상단 프레임에 스크롤이 불가능한 배너를 표시하여 사이트 로고나 온라인 광고를 노출하기도 했다.<ref name="wiki-4"/><br /><br />이후 HTML 4의 후속으로 의도된 <a href="/w/XHTML">XHTML</a> 1.1에서는 모든 프레임이 제거되었고, XFrames가 복합 URI를 통해 프레임 세트를 처리하는 대체 기술로 제안되었다.<ref name="wiki-5"/><br /><br /><a href="/w/HTML5">HTML5</a> 표준에서는 <a href="/w/XHTML">XHTML</a>과는 다른 방식으로 프레임 세트를 제거했지만, `iframe` 요소는 사이트 간 콘텐츠 공유를 위한 여러 <a href="/w/%EC%83%8C%EB%93%9C%EB%B0%95%EC%8A%A4_(%EC%BB%B4%ED%93%A8%ED%84%B0_%EB%B3%B4%EC%95%88)">샌드박싱</a> 옵션과 함께 여전히 남아있다.<ref name="wiki-7"/></p> </div> <div class="wiki-text"> <h3 id="sec-3-1" class=""> 3.1. 넷스케이프 네비게이터와 프레임 </h3> <p>넷스케이프 네비게이터 2.0은 1996년 3월에 프레임에 사용되는 요소를 도입했다.<ref name="wiki-2"/> 그해 넷스케이프는 HTML 3.0 표준에 프레임을 포함시킬 것을 <a href="/w/%EC%9B%94%EB%93%9C_%EC%99%80%EC%9D%B4%EB%93%9C_%EC%9B%B9_%EC%BB%A8%EC%86%8C%EC%8B%9C%EC%97%84">월드 와이드 웹 컨소시엄</a>(W3C)에 제안했다.<ref name="wiki-3"/></p> </div> <div class="wiki-text"> <h3 id="sec-3-2" class=""> 3.2. 초기 웹사이트에서의 활용 </h3> <p>넷스케이프 네비게이터 2.0은 1996년 3월에 프레임에 사용되는 요소를 도입했다. 그해 늦게 애플이 사이버독을 출시하며 다른 브라우저 벤더들이 뒤따랐다.<ref name="wiki-2"/> 당시 넷스케이프는 HTML 3.0 표준에 포함시키기 위해 프레임을 <a href="/w/%EC%9B%94%EB%93%9C_%EC%99%80%EC%9D%B4%EB%93%9C_%EC%9B%B9_%EC%BB%A8%EC%86%8C%EC%8B%9C%EC%97%84">월드 와이드 웹 컨소시엄</a>(W3C)에 제안했다.<ref name="wiki-3"/><br /><br />프레임은 초기 온라인 잡지 및 웹 앱, 예를 들어 웹메일 서비스 및 웹 채팅 사이트를 표시하고 탐색하는 데 사용되었다. 프레임은 서버 측 인클루드 또는 CGI 지원과 같은 서버 기능 없이 사이트 전체에 요소를 표시할 수 있다는 장점이 있었다. 이러한 기능은 초창기 웹 서버에서는 흔하지 않았고, 일반 대중이 접근할 수 있었다.<br /><br />초기 웹사이트는 스크롤할 수 없는 배너를 표시하기 위해 상단에 프레임을 사용하는 경우가 많았다. 이러한 배너 프레임에는 사이트의 로고와 온라인 광고가 포함되기도 했다.<ref name="wiki-4"/></p> </div> <div class="wiki-text"> <h3 id="sec-3-3" class=""> 3.3. XHTML과 XFrames </h3> <p><a href="/w/XHTML">XHTML</a> 1.1은 HTML 4의 후속 버전으로 의도되었으며, 모든 프레임을 제거했다. XFrames는 채워진 프레임 세트를 처리하기 위해 복합 URI를 제공하는 대체 기술로 제안되었다.<ref name="wiki-5"/></p> </div> <div class="wiki-text"> <h3 id="sec-3-4" class=""> 3.4. HTML5와 iframe </h3> <p>이후의 <a href="/w/HTML5">HTML5</a> 표준은 <a href="/w/XHTML">XHTML</a>과 다른 방식으로 프레임 세트를 제거했다.<ref name="wiki-6"/> `iframe` 요소는 사이트 간 콘텐츠 공유를 위한 여러 "<a href="/w/%EC%83%8C%EB%93%9C%EB%B0%95%EC%8A%A4_(%EC%BB%B4%ED%93%A8%ED%84%B0_%EB%B3%B4%EC%95%88)">샌드박싱</a>" 옵션과 함께 남아 있다.<ref name="wiki-7"/></p> </div> <div class="wiki-text"> <h2 id="sec-4" class="has-divider"> 4. 장점 </h2> <p>프레임은 처음 개발되었을 때 사용되던 일반 HTML보다 몇 가지 장점을 제공했다.<ref name="wiki-8"/> 그중에는 다음과 같은 장점들이 있다.<br /><br />* 페이지의 일부를 고정된 상태로 유지할 수 있다. 이는 탐색 메뉴나 배너 광고와 같이 스크롤하여 보이지 않게 하고 싶지 않은 요소에 유용하다.<ref name="wiki-8"/><br />* 별도의 서버에 있는 리소스를 통합할 수 있다. 예를 들어, 프레임을 사용하여 자신의 자료와 생성된 스레드 토론 자료를 결합할 수 있다.<ref name="wiki-9"/></p> </div> <div class="wiki-text"> <h3 id="sec-4-1" class=""> 4.1. 콘텐츠 관리 단순화 </h3> <p>프레임은 처음 개발되었을 때 사용되던 일반 HTML보다 몇 가지 장점을 제공했는데, 그중 하나는 콘텐츠 관리를 단순화한다는 것이다. 예를 들어, 탐색 메뉴와 같이 여러 페이지에서 공유되는 콘텐츠는 한 번만 수정하면 되므로 유지 관리가 용이하다.<ref name="wiki-8"/><br /><br />사이드바 탐색 메뉴에 항목을 추가해야 하는 경우, 웹 페이지 작성자는 <a href="/w/%ED%94%84%EB%A0%88%EC%9E%84%EC%85%8B">프레임셋</a>을 사용하면 하나의 웹 페이지 파일만 변경하면 된다. 하지만 프레임셋이 아닌 기존 웹사이트에서는 사이드바 메뉴가 모든 페이지에 나타나는 경우 각 페이지를 편집해야 했다.<ref name="wiki-8"/></p> </div> <div class="wiki-text"> <h3 id="sec-4-2" class=""> 4.2. 대역폭 절약 </h3> <p>프레임은 변경되지 않은 페이지 부분을 다시 다운로드하지 않음으로써 필요한 대역폭을 줄인다.<ref name="wiki-8"/></p> </div> <div class="wiki-text"> <h3 id="sec-4-3" class=""> 4.3. 정보 비교 용이성 </h3> <p>프레임은 여러 정보를 나란히 표시하고 각 섹션을 독립적으로 스크롤할 수 있게 해준다. 이는 두 개의 사진이나 비디오를 비교하거나, 비디오, 이미지, 애니메이션 등 옆에 독립적으로 스크롤되는 텍스트 페이지를 통해 내용을 이해하는 두 가지 방법을 제시하는 데 유용하다.<ref name="wiki-8"/></p> </div> <div class="wiki-text"> <h3 id="sec-4-4" class=""> 4.4. 문맥 유지 </h3> <p>프레임은 콘텐츠를 독립적으로 불러오고 탐색할 수 있게 함으로써 처음 개발되었을 때 사용되던 일반 HTML보다 몇 가지 장점을 제공했다.<ref name="wiki-8"/><br /><br />* 각주 또는 추가 내용을 연결했을 때 페이지의 전용 섹션에 나타나도록 하여 독자가 본문의 위치를 잃지 않도록 한다.<br />* 여러 정보를 나란히 볼 수 있게 하여 각 섹션을 독립적으로 스크롤할 수 있게 한다. 여기에는 두 개의 사진 또는 비디오를 나란히 비교하거나, 비디오, 이미지, 애니메이션, 3D 회전 객체 등 옆에 독립적으로 스크롤되는 텍스트 페이지와 같이 무언가를 이해하는 두 가지 다른 방법이 포함될 수 있다.<br />* 프레임의 주요 장점은 다른 부분이 스크롤되는 동안 페이지의 일부가 고정된 상태로 유지되도록 한다는 것이다. 이는 탐색 옵션이나 배너 광고와 같이 스크롤하여 보이지 않게 하고 싶지 않은 요소에 유용하다.<br />* 모든 페이지 또는 대부분의 페이지에서 공유되는 콘텐츠(예: 탐색 데이터)의 유지 관리를 단순화한다.<ref name="wiki-8"/> 사이드바 탐색 메뉴에 항목을 추가해야 하는 경우 웹 페이지 작성자는 하나의 웹 페이지 파일만 변경하면 되지만, 프레임셋이 아닌 기존 웹사이트의 개별 페이지는 사이드바 메뉴가 모든 페이지에 나타나는 경우 각 페이지를 편집해야 한다.<br />* 변경되지 않은 페이지 부분을 다시 다운로드하지 않음으로써 필요한 대역폭을 줄인다.<br />* 프레임은 별도의 서버에 있는 리소스를 통합한다. 예를 들어, 프레임을 사용하여 자신의 자료(및 탐색 그래픽)와 생성된 스레드 토론 자료를 결합할 수 있다.<ref name="wiki-9"/></p> </div> <div class="wiki-text"> <h2 id="sec-5" class="has-divider"> 5. 비판 </h2> <p>HTML 콘텐츠 프레이밍(framing)은 사용성과 <a href="/w/%EC%A0%91%EA%B7%BC%EC%84%B1">접근성</a> 문제를 야기하여 많은 비판을 받았다.<ref name="wiki-10"/> 프레임은 브라우저의 기본 기능을 방해하고, 웹 표준을 준수하지 않게 하며, 사용자 경험을 저해한다.</p> </div> <div class="wiki-text"> <h3 id="sec-5-1" class=""> 5.1. 사용성 및 접근성 문제 </h3> <p>HTML 콘텐츠 프레이밍(framing) 관행은 사용성과 <a href="/w/%EC%A0%91%EA%B7%BC%EC%84%B1">접근성</a>에 대한 우려로 인해 많은 비판을 받았다. 주요 문제점은 다음과 같다.<ref name="wiki-10"/><br /><br />* 프레이밍은 브라우저에 표시되는 콘텐츠와 <a href="/w/URL">URL</a> 간의 연결을 끊어, 프레임셋 내 특정 콘텐츠에 대한 링크나 북마크를 어렵게 만든다.<ref name="wiki-10"/><br />* 브라우저마다 프레임 구현 방식이 일관되지 않다.<ref name="wiki-10"/><br />* 자료를 선형으로 렌더링하는 브라우저는 프레임을 제대로 처리하지 못한다.<ref name="wiki-11"/><br /> * <a href="/w/%EC%8A%A4%ED%81%AC%EB%A6%B0_%EB%A6%AC%EB%8D%94">스크린 리더</a> 프로그램<br /> * 텍스트 또는 오디오 브라우저<br /> * Agora와 같은 이메일 브라우저<ref name="wiki-12"/><br /> * <a href="/w/%EB%AA%A8%EB%B0%94%EC%9D%BC_%EB%B8%8C%EB%9D%BC%EC%9A%B0%EC%A0%80">모바일 브라우저</a><br />* 프레이밍은 웹 인덱싱을 복잡하게 만들어 <a href="/w/%EA%B2%80%EC%83%89_%EC%97%94%EC%A7%84_%EC%B5%9C%EC%A0%81%ED%99%94">검색 엔진 최적화</a>에 부정적인 영향을 줄 수 있다.<ref name="wiki-13"/><br />* 프레이밍은 다른 서버의 콘텐츠 간 경계를 모호하게 하여<ref name="wiki-14"/> 저작권 침해 문제를 야기할 수 있다.<ref name="wiki-15"/><br />* 검색 엔진을 통해 방문한 사용자는 프레임에 표시될 의도로 만들어진 페이지에 도착할 수 있으며, 이 때문에 사이트의 다른 부분으로 이동하지 못할 수 있다.<ref name="wiki-16"/><br />* 프레임은 뒤로 가기 버튼의 동작을 변화시킨다.<ref name="wiki-16"/><br />* 사용자는 일반적으로 브라우저가 프레임을 인쇄하는 방식을 예상하기 어렵다.<ref name="wiki-15"/><br />* 프레임을 사용하는 웹 페이지의 외부 링크는 다른 페이지가 프레임셋에 나타나게 할 수 있다. 이는 링크의 기본 동작이 작성자가 별도로 지정하지 않는 한 현재 프레임에 로드되는 것이기 때문이다. 부도덕한 웹마스터는 이를 이용하여 다른 사이트의 콘텐츠가 마치 프레임셋을 호스팅하는 사이트의 일부인 것처럼 보이게 할 수 있다.<br />* 화면 해상도나 브라우저 창 크기가 너무 작으면 각 프레임에 스크롤 막대가 나타나서 보기 좋지 않고, 이미 제한된 공간을 차지한다. 이러한 동작은 일반적으로 모든 프레임셋 기능을 제대로 활용하지 않는, 잘못된 사이트 디자인(고정 레이아웃 대신 유동 레이아웃)에서 더 많이 발생했다. 이러한 동작은 다음 방법으로 완화할 수 있다.<br /> * 일반적으로 스크롤 막대가 필요하지 않은 작은 프레임의 스크롤을 비활성화한다.<br /> * 고정 디자인 대신 대상 페이지에서 유동 디자인 특성을 사용하여 콘텐츠가 처음부터 가로 스크롤 막대를 생성하지 않도록 한다.</p> </div> <div class="wiki-text"> <h3 id="sec-5-2" class=""> 5.2. 검색 엔진 최적화 문제 </h3> <p>프레임은 웹 인덱싱을 복잡하게 만들고 <a href="/w/%EA%B2%80%EC%83%89_%EC%97%94%EC%A7%84_%EC%B5%9C%EC%A0%81%ED%99%94">검색 엔진 최적화</a>에 부정적인 영향을 줄 수 있다.<ref name="wiki-13"/> 검색 엔진을 통해 사이트를 방문한 사용자는 프레임 안에 표시될 페이지로 바로 이동하게 되어, 사이트의 다른 부분을 탐색하기 어려워질 수 있다.<ref name="wiki-16"/></p> </div> <div class="wiki-text"> <h3 id="sec-5-3" class=""> 5.3. 저작권 문제 </h3> <p>프레이밍은 다른 서버의 콘텐츠 간의 경계를 모호하게 하여<ref name="wiki-14"/> 저작권 침해 문제를 일으킬 수 있다.<ref name="wiki-15"/></p> </div> <div class="wiki-text"> <h3 id="sec-5-4" class=""> 5.4. 사용자 경험 저해 </h3> <p>프레이밍은 브라우저에 표시되는 콘텐츠와 <a href="/w/URL">URL</a> 간의 식별을 깨뜨려 프레임셋 내에서 특정 콘텐츠 항목에 링크하거나 북마크하기 어렵게 만든다.<ref name="wiki-10"/> 프레임 구현은 브라우저마다 일관성이 없다.<ref name="wiki-10"/> 자료를 선형으로 렌더링하는 브라우저는 프레임을 제대로 처리하지 못한다.<ref name="wiki-11"/> 여기에는 다음이 포함된다.<br /><br />* <a href="/w/%EC%8A%A4%ED%81%AC%EB%A6%B0_%EB%A6%AC%EB%8D%94">스크린 리더</a> 프로그램<br />* 텍스트 또는 오디오 브라우저<br />* Agora와 같은 이메일 브라우저<ref name="wiki-12"/><br />* <a href="/w/%EB%AA%A8%EB%B0%94%EC%9D%BC_%EB%B8%8C%EB%9D%BC%EC%9A%B0%EC%A0%80">모바일 브라우저</a><br /><br />프레이밍은 웹 인덱싱을 복잡하게 만들고 <a href="/w/%EA%B2%80%EC%83%89_%EC%97%94%EC%A7%84_%EC%B5%9C%EC%A0%81%ED%99%94">검색 엔진 최적화</a>에 해로울 수 있다.<ref name="wiki-13"/> 프레이밍은 다른 서버의 콘텐츠 간의 경계를 혼란스럽게 하여<ref name="wiki-14"/> 저작권 침해 문제를 제기한다.<ref name="wiki-15"/> 검색 엔진에서 방문한 사용자는 프레임에 표시되도록 의도된 페이지에 도착할 수 있으며, 이로 인해 방문자는 사이트의 나머지 부분으로 이동할 수 없게 된다.<ref name="wiki-16"/> 프레임은 뒤로 가기 버튼의 동작을 변경한다.<ref name="wiki-16"/> 사용자는 일반적으로 브라우저가 프레임을 인쇄하는 방식을 예상하지 않는다.<ref name="wiki-15"/><br /><br />프레임을 사용하는 웹 페이지의 외부 링크는 다른 페이지가 프레임셋에 나타나게 할 수 있다. 이는 링크의 기본 동작이 작성자가 달리 지정하지 않는 한 현재 프레임에 로드되는 것이기 때문이다. 이는 부도덕한 웹마스터가 다른 사이트의 콘텐츠가 실제로 프레임셋을 호스팅하는 사이트의 일부인 것처럼 보이게 하는 데 사용될 수 있다.<br /><br />화면 해상도 또는 브라우저 창 크기가 너무 낮으면 각 프레임에 스크롤 막대가 나타나 지저분해 보일 수 있으며 이미 제한된 공간을 차지한다. 이러한 동작은 일반적으로 모든 프레임셋 기능을 제대로 사용하지 않는, 잘못된 사이트 디자인(고정 레이아웃 대신 유동 레이아웃)에서 더 많이 발생했다. 이러한 동작은 다음과 같은 방법으로 완화할 수 있다.<br /><br />* 일반적으로 스크롤 막대가 필요하지 않은 더 작은 프레임의 스크롤을 비활성화한다.<br />* 고정 디자인 대신 대상 페이지에서 유동 디자인 특성을 사용하여 콘텐츠가 처음부터 가로 스크롤 막대를 생성하지 않도록 한다.</p> </div> <div class="wiki-text"> <h2 id="sec-6" class="has-divider"> 6. 보안 </h2> <p>프레임은 동일 출처 정책 시행에 어려움을 야기하여 보안 문제를 일으킬 수 있다. 예를 들어, 외부 페이지가 투명하게 만들어진 내부 페이지(iframe 요소를 사용하여 로드됨)를 통해 사용자를 속여 특정 동작을 수행하게 만들 수 있다.<ref name="wiki-1"/></p> </div> <div class="wiki-text"> <h3 id="sec-6-1" class=""> 6.1. 동일 출처 정책 (Same-Origin Policy) </h3> <p>프레임은 동일 출처 정책 시행에 기술적 및 사용자 인터페이스 측면에서 어려움을 야기한다. 후자의 예시로, 외부 페이지는 99% 투명하게 만들어진 내부 페이지(iframe 요소를 사용하여 로드됨)에서 사용자가 어떤 동작을 수행하도록 속일 수 있다.<ref name="wiki-1"/></p> </div> <div class="wiki-text"> <h2 id="sec-7" class="has-divider"> 7. 대체 기술 </h2> <p>웹 기술이 발전하면서 프레임이 사용되던 많은 목적은 프레임 관련 문제를 피하는 방식으로 가능해졌다.<ref name="wiki-1"/><br /><br />* <a href="/w/CSS">CSS</a>: 페이지 요소를 독립적으로 스크롤하거나 화면에 고정할 수 있다.<br />* 서버 측 포함: 공유 콘텐츠를 한 번 편집하여 완성된 페이지의 일부로 클라이언트에 자동으로 제공할 수 있다.<br />* CGI, <a href="/w/PHP">PHP</a>, Active Server Pages 등의 웹 기반 스크립팅 언어 및 <a href="/w/%EC%9B%B9_%EA%B0%9C%EB%B0%9C">웹 개발</a> 프레임워크, WordPress 같은 데이터베이스 기반 콘텐츠 관리 시스템: 콘텐츠 유지 관리 및 탐색 기능을 제공한다.<br />* 클라이언트 측 스크립팅, 동적 HTML: 사용자의 행동에 따라 페이지의 일부를 시각적으로 바꿀 수 있다.<br />* AJAX: 페이지 내에서 콘텐츠를 동적으로 표시할 수 있다.</p> </div> <div class="wiki-text"> <h3 id="sec-7-1" class=""> 7.1. CSS (Cascading Style Sheets) </h3> <p>웹 기술이 발전하면서, <a href="/w/CSS">CSS</a>의 `overflow` 속성을 사용하여 페이지의 요소를 독립적으로 스크롤하거나, `position:fixed` 속성을 사용하여 다른 콘텐츠가 스크롤되는 동안에도 화면에 고정할 수 있게 되었다.<ref name="wiki-1"/></p> </div> <div class="wiki-text"> <h3 id="sec-7-2" class=""> 7.2. 서버 측 포함 (Server-Side Includes) </h3> <p>웹 기술이 발전하면서, 서버 측 포함을 사용하여 공유 콘텐츠를 한 번만 작성하고 서버에서 자동으로 완성된 페이지에 포함시킬 수 있게 되었다. 서버 CPU와 연결 속도가 빨라짐에 따라, 이러한 작업을 즉석에서 처리하는 데 필요한 추가적인 부담은 크게 줄어들었다.<ref name="wiki-1"/></p> </div> <div class="wiki-text"> <h3 id="sec-7-3" class=""> 7.3. 웹 스크립팅 언어 및 프레임워크 </h3> <p>웹 기술이 발전하면서, CGI, <a href="/w/PHP">PHP</a>, Active Server Pages와 같은 웹 기반 스크립팅 언어 및 <a href="/w/%EC%9B%B9_%EA%B0%9C%EB%B0%9C">웹 개발</a> 프레임워크, 그리고 WordPress와 같은 데이터베이스 기반 콘텐츠 관리 시스템은 콘텐츠를 관리하고 탐색 기능을 제공하는 데 훨씬 더 풍부한 옵션을 제공하게 되었다.<ref name="wiki-1"/> 클라이언트 측 스크립팅 및 동적 HTML을 사용하면 사용자의 행동에 따라 페이지의 일부를 시각적으로 바꿀 수 있게 되어 주석이나 지침과 같은 "사이드" 콘텐츠를 훨씬 더 유연하게 표시할 수 있는데, 이는 미리 정의된 프레임이 필요 없이 페이지 어디에서나 표시하고 숨길 수 있게 되었기 때문이다.<ref name="wiki-1"/> AJAX를 사용하면 로그인한 사용자 또는 다른 곳에서 발생한 이벤트에 따라 서버에서 가져와야 하는 경우에도 페이지 내에서 콘텐츠를 동적으로 표시할 수 있다.<ref name="wiki-1"/></p> </div> <div class="wiki-text"> <h3 id="sec-7-4" class=""> 7.4. 클라이언트 측 스크립팅 및 동적 HTML </h3> <p>클라이언트 측 스크립팅 및 동적 HTML을 사용하면 사용자의 행동에 따라 페이지의 일부를 시각적으로 바꿀 수 있다. 이를 통해 주석이나 지침과 같은 부가적인 콘텐츠를 훨씬 더 유연하게 표시할 수 있는데, 미리 정의된 프레임 없이도 페이지 어디에서나 표시하고 숨길 수 있기 때문이다.<ref name="wiki-1"/><br /><br />AJAX를 사용하면 로그인한 사용자나 다른 곳에서 발생한 이벤트에 따라 서버에서 가져와야 하는 경우에도 페이지 내에서 콘텐츠를 동적으로 표시할 수 있다.<ref name="wiki-1"/></p> </div> <div class="wiki-text"> <h3 id="sec-7-5" class=""> 7.5. AJAX (Asynchronous JavaScript and XML) </h3> <p>AJAX를 사용하면 페이지를 다시 로드하지 않고도 서버에서 데이터를 가져와 페이지 내에서 콘텐츠를 동적으로 표시할 수 있다.<ref name="wiki-1"/></p> </div> </article> <!-- Right Column: Sidebar / Infobox --> <aside class="wiki-sidebar"> <!-- Infobox --> <!-- Infobox Rendered from Server --> <div class="infobox"> <div class="infobox-header">프레임 (월드 와이드 웹)</div><div class="infobox-sub-header">개요</div><table class="infobox-table"><tr><th>유형</th><td>웹 페이지 레이아웃 기술</td></tr><tr><th>목적</th><td>웹 페이지 내에 여러 개의 독립적인 영역 (프레임)을 생성<br />각 프레임은 별도의 HTML 문서를 표시</td></tr></table><div class="infobox-sub-header">역사</div><table class="infobox-table"><tr><th>도입 시기</th><td>1990년대 후반</td></tr><tr><th>주요 브라우저 지원</th><td>넷스케이프 내비게이터, 인터넷 익스플로러</td></tr><tr><th>사용 목적</th><td>웹 페이지 레이아웃 분할, 광고 삽입 등</td></tr></table><div class="infobox-sub-header">기술적 특징</div><table class="infobox-table"><tr><th>HTML 요소</th><td>`<frame>`, `<frameset>`, `<iframe>`</td></tr><tr><th>frameset</th><td>웹 페이지를 프레임으로 분할하는 데 사용<br />HTML 문서 구조 정의</td></tr><tr><th>frame</th><td>frameset 내에서 개별 프레임을 정의<br />표시할 HTML 문서 지정</td></tr><tr><th>iframe</th><td>인라인 프레임<br />HTML 페이지 내에 다른 HTML 페이지를 포함하는 데 사용</td></tr></table><div class="infobox-sub-header">장점</div><table class="infobox-table"><tr><th>페이지 분할</th><td>웹 페이지 레이아웃을 논리적으로 분할 가능</td></tr><tr><th>독립적인 내용 표시</th><td>각 프레임은 독립적으로 내용을 표시하고 스크롤 가능</td></tr><tr><th>광고 삽입</th><td>특정 프레임에 광고를 삽입하여 수익 창출</td></tr></table><div class="infobox-sub-header">단점</div><table class="infobox-table"><tr><th>접근성 문제</th><td>시각 장애인 사용자의 접근성 문제 발생 가능<br />스크린 리더 호환성 문제</td></tr><tr><th>검색 엔진 최적화 (SEO) 문제</th><td>검색 엔진이 프레임 내부의 내용을 제대로 인식하지 못할 수 있음<br />웹 페이지 색인 생성의 어려움</td></tr><tr><th>북마크 및 링크 문제</th><td>특정 프레임의 내용을 직접 북마크하거나 링크하기 어려움<br />사용자 경험 저하</td></tr><tr><th>유지 보수</th><td>복잡한 프레임 구조는 유지 보수를 어렵게 할 수 있음</td></tr></table><div class="infobox-sub-header">대체 기술</div><table class="infobox-table"><tr><th>CSS 레이아웃</th><td>`<div>` 요소를 사용한 레이아웃, 플렉스박스, 그리드 레이아웃</td></tr><tr><th>서버 사이드 포함 (Server-Side Includes, SSI)</th><td>서버에서 HTML 페이지를 동적으로 조합</td></tr><tr><th>AJAX (Asynchronous JavaScript and XML)</th><td>웹 페이지의 일부분만 비동기적으로 업데이트</td></tr></table><div class="infobox-sub-header">보안 문제</div><table class="infobox-table"><tr><th>클릭재킹 (Clickjacking)</th><td>악의적인 웹 사이트가 iframe을 사용하여 사용자를 속이는 공격<br />사용자가 의도하지 않은 작업을 수행하도록 유도</td></tr><tr><th>교차 사이트 스크립팅 (Cross-Site Scripting, XSS)</th><td>iframe을 통해 악성 스크립트를 삽입하여 사용자 정보를 탈취하거나 웹 페이지를 변조하는 공격</td></tr></table><div class="infobox-sub-header">기타</div><table class="infobox-table"><tr><th>표준 준수</th><td>HTML5에서는 `<frame>` 및 `<frameset>` 요소가 더 이상 지원되지 않음<br />`<iframe>` 요소는 계속 사용 가능하지만, 사용에 주의가 필요</td></tr><tr><th>웹 표준</th><td>웹 표준을 준수하는 대체 기술 사용 권장 (CSS 레이아웃, SSI, AJAX)</td></tr></table> </div> <!-- Sidebar Sticky Container: 광고 --> <div class="sidebar-sticky-container"> <!-- Sidebar Ad --> <div class="wiki-ad-area vertical"> <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-5156317025981879" crossorigin="anonymous"></script> <!-- 위키-우측 수직형 --> <ins class="adsbygoogle" style="display:inline-block;width:300px;height:600px" data-ad-client="ca-pub-5156317025981879" data-ad-slot="8473148002"></ins> <script> (adsbygoogle = window.adsbygoogle \|\| []).push({}); </script> </div> </div> </aside> </div> <!-- 맨 위로 가기 버튼 (화면 하단 고정, PC에서만 표시) --> <button class="scroll-to-top-btn" id="scroll-to-top" title="맨 위로 가기"> <span class="icon">↑</span> <span class="text">맨 위로</span> </button> </main> <!-- Footer (Exact Match with Tools App) --> <footer> <div class="container"> <!-- License & Disclaimer Notice --> <div class="wiki-license-notice"> <p class="notice-main"> 본 사이트는 AI가 위키백과와 뉴스 기사, 정부 간행물, 학술 논문 등을 바탕으로 정보를 가공하여 제공하는 백과사전형 서비스입니다.<br/> 모든 문서는 AI에 의해 자동 생성되며, <a href="https://creativecommons.org/licenses/by-sa/4.0/deed.ko" target="_blank" rel="noopener noreferrer">CC BY-SA 4.0 라이선스</a>에 따라 이용할 수 있습니다. </p> <p class="notice-sub"> 하지만, 위키백과나 뉴스 기사 자체에 오류, 부정확한 정보, 또는 가짜 뉴스가 포함될 수 있으며, AI는 이러한 내용을 완벽하게 걸러내지 못할 수 있습니다.<br/> 따라서 제공되는 정보에 일부 오류나 편향이 있을 수 있으므로, 중요한 정보는 반드시 다른 출처를 통해 교차 검증하시기 바랍니다. </p> </div> <div class="footer-content"> <div class="footer-brand"> <div class="company-info"> <p>(주)두루미스</p> <p>서울특별시 강서구 마곡중앙6로 11, 706호 (마곡동)</p> <p>help@durumis.com</p> </div> </div> <div class="footer-links"> <a href="https://onul.works/privacy">개인정보처리방침</a> <a href="https://onul.works/terms">이용약관</a> </div> <div class="footer-family-site"> <span>패밀리 사이트</span> <a href="https://manyperson.com" target="_blank" rel="noopener noreferrer">매니퍼슨</a> </div> <div class="footer-partner-site"> <span>제휴 사이트</span> <a href="https://cloudturing.com" target="_blank" rel="noopener noreferrer">클라우드튜링</a> </div> </div> <div class="footer-bottom">© 2026 Durumis, Inc. All rights reserved.</div> </div> </footer> </body> </html>