웹은 멀티미디어 콘텐츠를 효과적으로 제공할 수 있는 매체다. 엄청난 양의 멀티미디어 콘텐츠가 웹을 통해 소비되고 있고, 유투브[67]와 같은 멀티미디어 전용 서비스가 보편화되었다. 웹에서 멀티미디어를 제공하려면 반드시 플러그인이 필요했다. 브라우저가 자체적으로 멀티미디어 콘텐츠를 작동시킬 수 없었기 때문에 플러그인과 같이 브라우저의 기능을 추가 또는 확장시켜줄 수 있는 프로그램이 필요했던 것이다. 플러그인은 외부 프로그램이므로 이를 통해 콘텐츠를 구현한다는 것은 브라우저가 콘텐츠를 직접적으로 구현할 수 없다는 것을 의미한다. 그런데 기술이 발전하면서 브라우저가 멀티미디어 콘텐츠를 직접 구현할 수 있게 되었고, 이에 따라 HTML에도 멀티미디어 콘텐츠를 구현할 수 있는 다양한 표준 기술들이 생기게 되었다. 이 규격들을 이용하여 저작자는 이미지, 비디오, 오디오, 플러그인 등 다양한 형식의 외부 콘텐츠를 HTML 문서에 손쉽게 넣을 수 있다.
이미지나 비디오와 같은 외부 콘텐츠는 그래픽 소프트웨어나 영상 소프트웨어와 같은 전용 소프트웨어에 의해 만들어지며, 이렇게 만들어진 외부 콘텐츠를 웹으로 제공하기 위해서는 우선 서버에 저장해 두어야 한다. HTML 문서에는 외부 콘텐츠가 저장되어 있는 위치 정보(URL)가 작성되어 있으며, 이 HTML 문서를 브라우저가 해석하여 외부 콘텐츠를 문서에서 보여준다. 따라서 “외부 콘텐츠를 넣는다”라는 것은 브라우저가 외부 콘텐츠의 저장 위치를 정확하게 찾을 수 있게 하는 작업으로 볼 수 있다.
이미지이든 플러그인이든 외부 콘텐츠는 형식에 관계 없이 OBJECT 요소로 표시할 수 있다. 그런데 이미지, 비디오, 오디오, 플러그인 등 외부 콘텐츠를 각각 비교해 보면 성격이 크게 다르다는 것을 알 수 있으며, 이로 인해 렌더링하는 방법도 달라질 수 밖에 없다. 브라우저는 이미지, 비디오, 오디오, 플러그인을 각각 다른 방법으로 렌더링한다. HTML에는 이러한 렌더링 작업을 브라우저가 좀 더 신속하게 준비할 수 있도록 세분화된 표준 기술을 마련해 두고 있으므로 이에 맞게 외부 콘텐츠를 넣는다.
예제의 경우,
-
본문 영역의 하단에 있는 3개의 이미지와 사이드바 영역의 하단에 있는 인터넷서점 이미지는 IMG 요소를 사용하여 넣는다. 인터넷서점 이미지의 경우, 하나의 이미지에 여러 곳의 링크를 포함할 수 있도록 MAP 요소와 AREA 요소를 함께 사용한다.
-
사이드바 영역에 있는 광고 중 위쪽에 있는 광고는 내부 서버에 있는 플래시 광고이며, OBJECT 요소로 사용하여 넣는다. 이 때 실행 방법을 별도로 지정할 수 있도록 PARAM 요소를 함께 사용한다.
-
팟캐스트의 비디오는 VIDEO 요소, 팟캐스트의 오디오는 AUDIO 요소를 사용하여 넣는다. 이 때 AUDIO 요소는 다양한 형식의 오디오 파일을 제공할 수 있도록 SOURCE 요소를 함께 사용한다.
-
사이드바 영역에 있는 광고 중 아래에 있는 광고는 외부 업체에 의해 공급 및 관리되는 광고이므로 IFRAME 요소를 사용한다.
<외부 콘텐츠 넣기>를 위한 표준 기술
IMG 요소
카테고리 | Flow content, Phrasing content, Embedded content, Interactive content |
콘텐츠 속성 | 글로벌 속성, alt, src, usemap, ismap, width, height |
지원 브라우저 |      |
IMG 요소는 이미지(IMaGe)를 표시한다. 이미지는 텍스트 형식의 인라인 데이터(inline data)가 아니라 멀티미디어 형식의 콘텐츠이다. 이런 콘텐츠를 미디어 객체(media object)로 간주하기 때문에 OBJECT 요소로도 표시될 수 있다(오히려 OBJECT 요소를 더 권장하고 있다).
src 속성
src 속성은 이미지 소스(source)를 지정한다. 소스는 파일이 있는 위치이며, URL 형식으로 표현된다. 브라우저가 직접 이미지를 만들어내는 것은 아니다. 이미지가 있는 주소(URL)를 서버로 보내고, 서버에서 보내온 이미지 파일을 문서 상에 보여줄 뿐이다. 따라서 IMG 요소는 반드시 src 속성을 필요로 한다.
<img src="bird.gif">alt 속성
alt 속성은 대체 텍스트(alternative text)를 지정한다. 기본적으로 모든 콘텐츠는 기술 중립적이어야 한다. 이 말은 장치(device 또는 application)의 특성에 따라 콘텐츠의 전달 여부가 결정되어서는 안 된다는 의미다. 가령, 플래시 형식의 콘텐츠는 어떤 장치에서는 잘 작동하지만, 어떤 장치에서는 아예 허용되지 않는 경우도 있다. 이처럼 장치 특성과 콘텐츠 형식이 절묘하게 잘 들어맞아야만 콘텐츠를 전달할 수 있다면, 사용 상의 어려움과 불편함을 겪는 사용자 계층이 있을 수 밖에 없다. 이 때문에 콘텐츠를 기술 중립적으로 만드는 것이 중요하며, 이를 위해서는 모든 콘텐츠는 일반 텍스트(plain text)로 대체될 수 있어야 한다.
이미지에 대한 표준 기술이 제시되어 있지만, 이미지를 처리할 수 없는 장치가 있기 때문에 이미지 자체가 기술 중립적인 콘텐츠라고 볼 수 없다. 사무실이나 산업현장에서 사용하고 있는 시스템들은 여전히 텍스트 기반의 환경을 중시하고 있고, 여러 가지 이유로 텍스트 전용 브라우저를 고집하고 있는 사용자가 분명 존재한다. 그리고 이미지를 처리할 수 있는 브라우저를 사용하는 경우에도 사용자가 이미지의 자동 로딩(auto-loading) 기능을 꺼 둘 수도 있다. 여기에 시각 장애가 있는 사용자, 네트워크와 데이터 과금 문제로 이미지를 원하지 않는 사용자도 고려한다면, 이미지와 같은 멀티미디어 콘텐츠는 ‘콘텐츠의 기본 형식’이 아니라 ‘콘텐츠의 부가 형식’이라는 관점을 가져야 한다.
브라우저가 이미지를 처리할 수 없을 때 해당 이미지를 대신할 수 있는 콘텐츠를 제공해야 하며, 이를 위해 alt 속성이 필요하다. alt 속성을 사용하면 이미지가 로딩되지 않았을 때, 이미지가 있는 자리에 이미지 대신 alt 속성값이 나타난다. 그리고 이미지를 시각적으로 처리할 수 없는 사용자는 스크린 리더와 같은 사용자 도구가 읽어주는 alt 속성값을 통해 해당 이미지 파일이 어떤 내용을 담고 있는지 알 수 있게 된다. 멀티미디어 콘텐츠를 많이 사용하다 보니, 텍스트 형식의 대체 콘텐츠에 대한 필요성이 강조되고 있다. 시각 장애가 있는 사용자는 대체 텍스트를 제공하지 않으면 웹을 아예 이용할 수 없다. alt 속성은 한낱 속성에 지나지 않지만, 이 속성을 소홀이 여기면 수 많은 사용자가 큰 어려움이나 불편함을 겪게 된다.[68] 대체 텍스트를 제공하지 않을 경우, 스크린 리더는 이미지 파일명을 읽게 되고, 스크린 리더 사용자는 더 이상 이미지가 어떤 내용을 담고 있는지 알 수 없기 때문에 혼란에 빠질 수 있다. 따라서 이미지를 제공할 때는 반드시 alt 속성을 지정해야 하며, alt 속성을 이용하여 대체 텍스트를 제공할 때는 다음과 같은 사항을 고려해야 한다.
-
이미지 제공과 대체 텍스트 제공 사이의 효과 차이를 고려해야 한다. 이미지 제공을 통해 얻고자 했던 효과가 있었을 것이다. 이 효과가 대체 텍스트 제공으로 인해 줄어들지 않도록 유의해야 한다. 특히, 내용을 담고 있는 이미지는 그 내용을 대체할 수 있도록 대체 텍스트를 작성해야 한다. 가령, 약도 이미지에 대한 대체 텍스트는 alt=”약도”가 아니라 alt=”2호선 역삼역 5번 출구 방향 500m 전방 00빌딩 10층”이라고 작성되어야 한다.
-
이미지 제공의 목적을 고려해야 한다. 이미지가 링크되어 있는 경우, 이미지가 담고 있는 내용을 설명하는 것이 아니라 링크의 목적지를 알리는 것이 중요하다. 가령, 상품설명으로 링크된 상품 이미지에 대한 대체 텍스트는 alt=”노트북”이 아니라 alt=”노트북 상세설명”이라고 작성하는 것이 좋다.
-
시각적 처리가 필요 없는 경우를 고려해야 한다. 오로지 시각적 목적만으로 제공되었거나 단순히 정보 식별을 위해 제공된 이미지는 상황에 따라 대체 텍스트를 제공하지 않는 것이 더 나을 수 있다. 가령, 시각적 흥미를 끌기 위해 별 의미 없이 제공되는 이미지를 간혹 볼 수 있는데, 이런 이미지를 문자로 표현하게 되면 어색하거나 오해를 불러일으킬 수 있다. 이런 이미지에 대한 대체 텍스트는 alt=””로 작성하는 것이 좋다. 즉, 빈 문자(blank)로 처리하여 스크린 리더가 아예 읽지 않도록 만드는 것이다.
<img src="bird.gif" alt=”빨강 깃털, 노랑 주둥이, 짧은 다리를 가진 앵무새”>usemap 속성
usemap 속성은 클라이언트 사이드 맵(use a client-side map)을 지정한다. 이 속성은 이미지에 사용된 맵이 클라이언트 사이드 방식이라는 사실과 참조해야 하는 해당 맵의 이름을 브라우저에게 알려준다. 클라이언트 사이드 맵은 클라이언트 프로그램인 브라우저가 맵에 있는 링크 영역의 모양, 좌표, 참조 URL[69]를 직접 처리할 수 있다.
<img src="이미지 주소" alt="이미지의 대체텍스트" usemap="#맵 이름"><map name="맵 이름"><area shape="링크된 영역 형태" coords="좌표값" alt="링크된 영역의 대체텍스트" href="참조할 문서"></map>ismap 속성
ismap 속성은 서버 사이드 맵(the image of server-side map)을 지정한다. 이 속성은 이미지에 사용된 맵이 서버 사이드 방식이라는 사실과 참조해야 하는 해당 맵의 이름을 브라우저에게 알려준다. 서버 사이드 맵은 A 요소와 함께 이미지 위에 있는 링크 영역을 클릭하면 브라우저가 해당 좌표를 서버에게 알려주며, 그런 다음 서버는 해당 좌표에 해당하는 URL을 브라우저에게 알려준다.
- 브라우저 요청(request): 브라우저가 좌표값을 서버로 전송
- 서버 응답(response): 서버가 좌표값에 해당하는 URL을 브라우저에게 전송
이런 일은 클라이언트(브라우저)만으로 충분히 처리될 수 있으므로 대부분의 이미지 맵은 클라이언트 사이드로 제작된다. 다만, 오래된 브라우저가 이미지 맵을 처리하지 못하는 경우가 있고 영역 형태가 AREA 요소의 shape 속성으로 표현할 수 없는 경우에도 서버 사이드 맵을 사용하기도 한다. 그런데 이 방식은 마우스로 클릭해야만 해당 URL을 참조하기 때문에 키보드만으로는 이미지 맵에 있는 링크가 어디를 참조하는지 알 수 없다. 이것은 스크린 리더 사용자를 힘들게 만드는 일이다.
그래서 이미지 맵은 클라이언트 사이드 맵 방식으로 구현해야 하며, 이렇게 해야만 스크린 리더 사용자는 키보드의 Tap 키를 이용하여 AREA 요소로 마크업된 영역으로 접근할 수 있다.
<a href= "worldmap.html"><img src="map.gif" alt=”세계지도” ismap="ismap"></a>예제 |
헤더 영역의 로고, 본문의 그림 영역, 사이드바의 “인터넷서점” 영역에 이미지를 넣었고, 이것을 IMG 요소로 마크업하였다.
<!DOCTYPE html><html lang=”ko”><head>중략
</head><body><header><div id=”logo”><img src=”http://www.example.com/img.gif.gif” alt=”ux design 홈” width=”120” height=”50”></div>중략
<section id=”sub\_picture”><figure><figcaption>본문 내용은 아래와 같이 구성되어 있습니다. 더보기</figcaption><figure><img src="/UX\_UPA.jpg” alt="UX 프로세스 썸네일" width="200" height="180"><figcaption>UX 프로세스 by UPA</figcaption></figure><figure><img src=”/UX\_Jess.jpg” alt=”경험의주기 썸네일” width="200" height="180"><figcaption>경험의 주기 by Jess</figcaption></figure><figure><img src=”/UX\_Peter.jpg” alt=”UX의 중요성 썸네일” width="200" height="180"><figcaption>UX의 중요성 by Peter</figcaption></figure></figure></section>중략
<aside id=”sidebar”><section id=”bookstore”><hn>인터넷서점</hn><img src=”bookstore.gif” width=”200” height=”100” alt=”” usemap=”#bookstoremap”></section></aside>중략
</body></html>
MAP 요소
카테고리 | Flow content, Phrasing content |
콘텐츠 속성 | 글로벌 속성, name |
지원 브라우저 | |
MAP 요소는 이미지 맵(image MAP)을 표시한다. 이미지 맵은 이미지 위에 클릭할 수 있는 영역(clickable area)을 그려 놓은 도면(map)이며, 각 영역마다 서로 다른 링크를 제공할 경우 하나의 이미지가 여러 곳의 목적지를 참조할 수 있게 된다. 이미지 맵을 만들려면 IMG 요소(또는 OBJECT 요소), MAP 요소, 그리고 AREA 요소가 필요한데, 이 중에서 MAP 요소의 역할은 이미지 맵이 있다는 사실을 알리는 동시에 IMG 요소와 AREA 요소 사이를 연결시키는 것이다.
이미지 맵의 구조
- IMG 요소: 이미지를 표시한다.
- MAP 요소: 이미지 위에 그려진 도면을 표시한다.
- AREA 요소: 도면을 구성하는 링크 영역과 URL을 표시한다.
name 속성
name 속성은 이미지 맵 이름(name)을 지정한다. IMG 요소가 이미지를 표시하는 것이라면, MAP 요소는 이미지 위에 그려진 도면을 표시하는 것이다. 이 두 요소 사이의 관계가 성립되려면 별도의 연결점이 있어야 하므로 MAP 요소는 반드시 name 속성을 가져야 한다. 즉, name 속성이 있어야만 IMG 요소가 MAP 요소를 참조할 수 있다.
<img src=”bookstore.gif” width=”200” height=”100” alt=”” usemap=”#bookstoremap”><map name=”bookstroremap”>…
</map>예제 |
사이드바의 “인터넷서점” 영역에 있는 이미지에 이미지 맵 기법을 적용하였고, 이것을 MAP 요소로 마크업하였다.
<!DOCTYPE html><html lang=”ko”><head>중략
</head><body>중략
<aside id=”sidebar”><section id=”bookstore”><hn>인터넷서점</hn><img src=”bookstore.gif” width=”200” height=”100” alt=”” usemap=”#bookstoremap”><map name=”bookstroremap”></map></section></aside>중략
</body></html>AREA 요소
카테고리 | Flow content, Phrasing content |
콘텐츠 속성 | 글로벌 속성, alt, coords, shape, href, target, rel, media, hreflang, type |
지원 브라우저 | |
AREA 요소는 이미지 맵(image map) 내부에 링크 영역(clickable AREA)을 지정하는 요소다. 이미지 전체가 아니라 이미지 일부에만 링크를 제공해야 하거나 이미지를 부분적으로 설명해야 하는 경우, 전체 이미지를 부분적으로 나누고 AREA 요소를 사용하여 각각의 영역을 표시한다. AREA 요소는 단독적으로 사용할 수 없으며, 반드시 MAP 요소와 함께 사용해야 한다(MAP 요소가 AREA 요소를 포함한다).
<area shape=”rect” coords=”3, 43, 89, 137” href=”http://www.yes24.co.kr” alt=”예스24”>shape 속성
shape 속성은 링크 영역의 형태(shape)를 지정하는 속성이다. 이미지 위에 ‘영역’을 표시하려면 범위와 테두리, 즉 형태가 필요한데 이러한 역할을 shape과 coords 속성이 맡고 있다. shape 속성을 사용하면 AREA 요소의 영향력이 미치는 범위를 원형, 사각형, 다각형으로 표시할 수 있다. 만약 shape 속성에 속성값을 지정하지 않으면 영역은 사각형으로 표시된다.
<area shape=”rect”>- shape=”rect”: 링크 영역을 사각형(rectangle state)으로 지정한다.
- shape=”circle”: 링크 영역을 원형(circle state)으로 지정한다.
- shape=”poly”: 링크 영역을 다각형(polygon state)으로 지정한다.
- shape=”default”: 링크 영역을 기본 상태(default state)으로 지정한다. 이 속성값은 coords 속성을 가질 수 없으므로 이미지 전체를 링크 영역으로 지정한다.
<좌표값의 원리>
coords 속성
coords 속성은 AREA 요소의 영역 좌표(coordinates)를 지정한다. 좌표는 x축과 y축으로 나뉘는데, x축은 왼쪽에서 오른쪽으로 y축은 위쪽에서 아래쪽으로 진행된다. coords 속성값은 shape 속성값에 따라 달라진다. 즉, coords 속성값이 ‘사각형(rect)’일 때는 네 개의 좌표값을 지정하지만, ‘원형(circle)’일 때는 원 중심의 좌표와 반지름 값을 지정한다. 형태(shape)을 표현하기 위해 최소한의 정보만 지정하면, 나머지는 브라우저가 알아서 계산해 준다. HTML 문서의 렌더링 과정을 통해 브라우저는 AREA 요소들의 위치를 속속들이 알 수 있기 때문에 해당 영역에 마우스가 오거나 포커스[70]를 받게 되면 브라우저가 즉각적으로 반응할 수 있다.
<area shape=”rect” coords=”3, 43, 89, 137”>-
shape=”rect” coords=”x1, y1, x2, y2”: 영역을 사각형으로 표현하기 위해서는 반드시 네 개의 좌표값을 지정해야 한다. 각각의 좌표값은 사각형을 만들 수 있는 수치 정보로 지정되어야 한다. 따라서 x1의 좌표값은 반드시 x2보다 작아야 하고, y1의 좌표값은 반드시 y2보다 작아야 한다. 이러한 규칙에 어긋나면 브라우저가 사각형을 제대로 만들 수 없게 된다.
- x1: 좌상단의 x 좌표값 (이미지의 왼쪽 가장자리로부터 사각형의 왼쪽 가장자리까지의 거리)
- y1: 좌상단의 y 좌표값 (이미지의 위쪽 가장자리로부터 사각형의 위쪽 가장자리까지의 거리)
- x2: 우하단의 x 좌표값 (이미지의 왼쪽 가장자리로부터 사각형의 오른쪽 가장자리까지의 거리)
- y2: 우하단의 y 좌표값 (이미지의 위쪽 가장자리로부터 사각형의 아래쪽 가장자리까지의 거리) -
shape=”circle” coords=”x, y, r”: 영역을 원형으로 표현하기 위해서는 원 중심의 좌표와 반지름 값을 지정해야 한다. x축 좌표값은 이미지의 왼쪽 가장자리에서부터 원 중심까지의 길이며(x), y축 좌표값은 이미지의 윗쪽 가장자리부터 원 중심까지의 거리다(y). 여기에 반지름 값®이 주어지면 이미지 위에 놓일 원형의 위치와 크기를 정확하게 표현할 수 있다.
- x: 중심점의 x 좌표값
- y: 중심점의 y 좌표값
- r: 중심점부터 테두리까지의 길이 -
shape=”poly” coords=”x1, y1, x2, y2,…, xN, yN”: 영역을 다각형으로 표현하기 위해서는 각 꼭지점의 좌표값을 지정해야 한다. 사각형을 만들기 위해 4개의 좌표값이 필요하므로 다각형은 5개 이상의 좌표값이 필요하다. 여기에 좌표값은 x, y 축으로 표현되므로 coords 속성값의 개수는 반드시 짝수로 구성되어야 한다. 5개 이상이면서 짝수인 개수는 6개이므로 다각형을 만들려면 최소 6개 이상의 좌표값이 필요하다.
- x1: 첫 번째 꼭지점의 x 좌표값
- y1: 첫 번째 꼭지점의 y 좌표값
- x2: 두 번째 꼭지점의 x 좌표값
- y2: 두 번째 꼭지점의 y 좌표값
- xN: N 번째 꼭지점의 x 좌표값
- yN: N 번째 꼭지점의 y 좌표값
href 속성
href 속성은 문서(hypertext)를 참조(reference)하기 위한 속성이다. AREA 요소를 사용하는 주된 목적은 지정된 이미지 영역이 다른 문서와 연결되도록 만드는 것이므로 href 속성이 필요하다.
<area shape=”rect” coords=”3, 43, 89, 137” href=”http://www.yes24.co.kr”>alt 속성
alt 속성은 이미지를 대체(alternative)하기 위한 텍스트를 지정한다. 이 속성은 브라우저가 이미지를 렌더링할 수 없거나 또는 정보를 시각적으로 처리할 수 없는 상황을 대비하기 위해 만들어졌다. AREA 요소 자체가 이미지는 아니지만 이미지 위에 표시되는 요소이므로 이미지와 마찬가지로 취급된다. 따라서 AREA 요소에 href 속성이 있는 경우에는 반드시 alt 속성도 있어야 한다. 이와 반대로 AREA 요소에 href 속성이 없는 경우에는 alt 속성도 없어야 한다.
<area shape=”rect” coords=”3, 43, 89, 137” href=”http://www.yes24.co.kr” alt=”예스24”>예제 |
이미지 맵에 3개의 링크를 제공하였고, 이것을 AREA 요소로 마크업하였다.
<!DOCTYPE html><html lang=”ko”><head>중략
</head><body>중략
<aside id=”sidebar”><section id=”bookstore”><hn>인터넷서점</hn><img src=”bookstore.gif” width=”200” height=”100” alt=”” usemap=”#bookstoremap”><map name=”bookstroremap”><area shape=”rect” coords=”3, 43, 89, 137” href=”http://www.yes24.co.kr” alt=”예스24”><area shape=”rect” coords=”7, 38, 84, 237” href=”http://www.kyobobook.co.kr” alt=”교보문고”><area shape=”rect” coords=”9, 27, 79, 269” href=”http://www.aladdin.co.kr” alt=”알라딘서점”></map></section></aside>중략
</body></html>OBJECT 요소
카테고리 | Flow content, Phrasing content, Embedded content, Interative content |
콘텐츠 속성 | 글로벌 속성, data, type, name, usemap, form, width, height |
지원 브라우저 | |
OBJECT 요소는 미디어 객체(media OBJECT)를 표시한다. ‘객체’(客體, object)의 사전적 의미는 눈으로 보거나 손으로 만질 수 있는 대상(anything that is visible or tangible)[71]이며, 주체(主體)와는 반대되는 개념이다. 그리고 ‘객’(客)은 말 그대로 손님을 의미하므로 객체는 ‘내’가 아닌 ‘어떤 대상’이라는 성격을 지닌다. 이렇게 해석해 보면, 객체(objects)는 브라우저가 직접 실행할 수 있는 HTML이나 텍스트 형식의 인라인 데이터(inline data)가 아니라 별도의 프로그램(help application)으로부터 도움을 받아야만 실행할 수 있는 외부 데이터(external data)[72]로 볼 수 있다.
인쇄물과 달리 웹 문서는 텍스트뿐만 아니라 이미지, 오디오, 비디오, 플래시(Flash), 애플릿(Applet), 액티브엑스(ActiveX), PDF 등과 같은 멀티미디어 데이터까지 넣을 수 있도록 고안되었다. HTML로 직접 표시할 수 있는 대상은 텍스트뿐이므로 브라우저가 직접 처리할 수 있는 것도 텍스트뿐이다. 그 밖에 정보는 외부 데이터로 취급된다.
특히, 멀티미디어 데이터는 그 종류가 너무 다양하기 때문에 일일이 표준 기술로 지정하기 어렵다. 그래서 마크업 언어는 브라우저가 멀티미디어 데이터를 직접 실행하는 것이 아니라 브라우저가 멀티미디어 데이터를 실행할 수 있도록 돕는 역할에 초점을 둔다. 브라우저는 직접 그림을 그리거나 영상을 실행할 수 있는 능력을 갖고 있지 않다. 단지 그림이 어디에 있는지, 영상을 실행할 수 있는 프로그램이 어느 것인지 알 수 있을 뿐이다. 실행은 운영체제의 애플리케이션이나 플러그인의 지원을 받아야만 처리할 수 있다. 이런 점에서 브라우저의 능력은 분명 보잘것없다. 그러나 브라우저가 할 수 있는 일은 많다.
이처럼 브라우저가 많은 일을 할 수 있는 것은 유연함 때문이다. 브라우저는 멀티미디어 데이터가 표준인지 표준이 아닌지 따지지 않는다. 기술이 워낙 빠르고 다양하게 발전하기 때문에 표준이라는 기준으로 처리 여부를 따질 수는 없는 노릇이다. 따라서 브라우저는 표준이 아니더라도 실행할 수 있는 방법을 제공할 수 있어야 하며, 이를 위해 EMBED, APPLET, OBJECT 요소 등과 같은 규격이 차례로 만들어졌다.
EMBED 요소는 네스케이프(Netscape)가 IMG 요소로 표현할 수 없는 리치 미디어(rich media)를 위해 제안한 규격이었고, APPLET 요소는 자바의 등장으로 만들어진 규격이다. 그리고 OBJECT 요소는 마이크로소프트(Microsoft)의 ActiveX 기술을 위해 마련된 규격이다. 이렇듯 과거에는 외부 데이터를 표시하기 위해 OBJECT 요소, EMBED 요소, APPLET 요소 중 어떤 것을 사용해야 할지 고민해야 했지만, 지금은 OBJECT 요소로 통일되고 있다.
OBJECT 요소는 다양한 형식의 멀티미디어 데이터를 처리할 수 있도록 여러 가지 속성이 마련되어 있지만, 항상 성공적으로 실행되는 것은 아니다. 실행할 수 없는 경우를 대비하여 대체 콘텐츠나 폴백 콘텐츠(fallback content, 예비 콘텐츠)를 작성하기도 한다.
아래와 같이 플래시 플러그인이 없는 경우에는 플래시 무비 대신 PNG 형식의 그림을 보여주고, PNG 형식을 지원하지 못하는 경우에는 GIF 형식의 그림을 보여줄 수 있다. 만약 텍스트 전용 브라우저라면 이미지 대신 텍스트를 보여주게 되는데, IMG 요소의 alt 속성과 달리 글자 수 제한이 없고 시각적 표현을 줄 수 있다는 장점이 있다. OBJECT 요소에는 다양한 속성을 가질 수 있는데, data와 type 속성 중에서 반드시 하나는 지정되어야 한다.
<OBJECT data=”campus.swf”><OBJECT type=”image/png” data=”campus.png” width=”100” height=”100”><OBJECT type=”image/gif” data=”campus.gif” width=”100” height=”100”><P>이 곳은 <span class=”strong”>서울캠퍼스</span>입니다</p></OBJECT></OBJECT></OBJECT>type 속성
type 속성은 data 속성에 의해 지정된 데이터의 MIME 타입(MIME type)을 지정한다. 브라우저가 OBJECT 요소를 처리한 다음 가장 먼저 알고 싶어하는 것은 직접 처리할 수 있는 데이터인지 아닌지 여부다. 직접 처리할 수 있다면 곧바로 실행할 준비를 갖추고, 직접 처리할 수 없다면 적절한 처리 방안을 찾으려고 할 것이다. 따라서 이 속성은 필수 사항이 아니라 불필요한 다운로드를 예방하기 위한 권장 사항인 셈이다.
MIME(Multipurpose Internet Mail Extensions)은 브라우저와 서버 사이에서 데이터를 주고 받기 위한 통신 규약이다. 데이터를 주고 받으려면, 무엇을 어떻게 주고 받을 것인지에 대한 약속이 필요하다. 이를 위해 파일의 종류(type)와 형식(format)을 만들어 두었는데, 이것을 MIME 타입(MIME type)이라고 부른다. 브라우저가 MIME 타입을 알려주면, 웹 서버는 신속하고 정확하게 해당 파일을 찾을 수 있다. 그리고 웹 서버가 해당 파일에 대한 요약 정보를 알려주면, 브라우저는 해당 파일을 직접 실행할 것인지 아니면 다른 프로그램(애플리케이션이나 플러그인)으로 연결시킬 것인지 결정한다.
MIME 타입은 파일 종류를 지정하는 Type과 파일 형식을 지정하는 Subtype으로 구성되며, Type과 Subtype은 슬래시(‘/’)에 의해 구분된다.
<object data=”intro.swf” type=”application/x-shockwave-flash”></object>웹에서 자주 사용되는 MIME 타입
MIME Type | File Extensions |
application/excel | CSV, XLS, XLT |
application/x-shockwave-flash | SWF |
image/jpeg | JPEG, JPG |
image/png | PNG |
image/tiff | TIFF, TIF |
data 속성
data 속성은 데이터가 있는 위치(data address)를 지정한다. 이 속성은 src 속성과 같이 객체를 구성하는 필수 데이터나 파일이 어디에 있는지 브라우저에게 알려준다. 가령, 애플릿처럼 실행이 수반되는 객체는 일련의 데이터(예, 이미지)로 구성되며, 각각의 데이터는 data 속성에 의해 지정될 수 있다. IMG 요소의 src 속성과 같은 역할로 보면 이해가 쉽다.
<object data=”campus\_map.swf”></object>예제 |
사이드바 맨 위에 플래시 형식의 배너 광고를 넣었고 플래시가 실행될 수 없는 환경을 고려하여 배너 광고와 연결되어 있는 웹 문서의 주소를 대체 콘텐츠로 제공하였는데, 이것을 OBJECT 요소로 마크업하였다.
<!DOCTYPE html><html lang=”ko”><head>중략
</head><body>중략
<aside id=”sidebar”><section id=”flash\_ad”><object data=”brazil.swf” type=”application/x-shockwave-flash” width=”250” height=”250”><p>Brazil Eucalyptus Plantations</p></object></section>중략
</body></html>
EMBED 요소
카테고리 | Flow content, Phrasing content, Embedded content, Interative content |
콘텐츠 속성 | 글로벌 속성, src, type, width, height |
지원 브라우저 | |
EMBED 요소는 외부 애플리케이션이나 인터랙티브 콘텐츠(interactive content)의 끼워넣기(EMBedding)를 표시한다. “끼워넣기”는 현재 작업 중인 내용에 다른 곳에 있는 내용을 넣는 것을 의미한다. 즉, ‘현재 작업 중인 내용’은 표준 기술의 콘텐츠이고 ‘다른 곳에 있는 내용’은 표준 기술이 아닌 콘텐츠인 셈이다. 세상에는 다양한 규격의 콘텐츠가 존재하므로 표준 기술만을 고집할 수는 없다. 저작자와 사용자가 원한다면 표준 기술이 아닌 콘텐츠라도 웹 문서에 넣을 수 있는 방법을 제공해야 했고, 이를 위해 제안된 것이 바로 EMBED 요소와 OBJECT 요소다.
OBJECT 요소와 달리, EMBED 요소는 종료 태그가 없기 때문에 자식 요소를 둘 수 없다. 이 점을 제외하면 두 요소는 다를 게 없다. 사실 외부 콘텐츠를 표시하기 위한 표준 기술은 한 가지만으로 충분하지만, 아직까지 OBJECT 요소를 지원하지 않는 브라우저가 있기 때문에 호환성(compatibility)을 높이기 위한 차원에서 또 다른 규격인 EMBED 요소가 제안되었다고 볼 수 있다.[73]
<embed src="helloworld.swf">PARAM 요소
카테고리 | 해당 사항 없음 |
콘텐츠 속성 | 글로벌 속성, name, value |
지원 브라우저 | |
PARAM 요소는 파라미터(PARAMeter, 매개변수)를 표시한다. 이 요소는 단독으로 사용되는 것이 아니라 OBJECT, AUDIO, VIDEO 요소 내에서 추가적인 정보나 매개변수를 표시하기 위한 용도로 쓰인다. 즉, ‘프로그램’(program)이 실행하기 위해서는 일종의 부품 역할을 하는 ‘함수’(function)와 원료로 쓰이는 ‘변수’(variables)가 있어야 하는데, 이 때 PARAM 요소가 변수를 제공하거나 프로그램에 대한 추가 정보를 제공하는 것이다.
자바 애플릿, 플래시 플러그인, 동영상 플러그인 등과 같은 프로그램은 자체적인 코드로 만들어졌고 그 코드는 프로그램에 내장되어 있다. 이러한 프로그램의 실행 방법을 브라우저에게 알려주는 것이 PARAM 요소이며, 실행 방법이 다양할 경우 파라미터도 다양하게 정의될 수 있다. 따라서 하나의 OBJECT 요소에 복수의 PARAM 요소가 올 수 있다. PARAM 요소는 반드시 name 속성과 value 속성을 가져야 하며, 이 속성들은 OBJECT 요소로 표시된 프로그램으로 공급된다.
<object data=”intro.swf” type=”application/x-shockwave-flash”><param name=”loop” value=”false”><param name=”quality” value=”high”></object>name 속성
name 속성은 파라미터 이름(name)을 지정한다.
value 속성
value 속성은 name 속성에 의해 정의된 파라미터 값(value)을 지정한다.
예제 |
플래시 형식의 배너 광고가 연속적으로 재생되도록 설정하고 플래시 파일에 내장되어 있는 프로그램 코드를 호출할 수 있도록 하였는데 이것을 PARAM 요소를 마크업하였다.
<!DOCTYPE html><html lang=”ko”><head>중략
</head><body>중략
<aside id=”sidebar”><section id=”flash\_ad”><object data=”brazil.swf” type=”application/x-shockwave-flash” width=”250” height=”250”><p>Brazil Eucalyptus Plantations</p><param name=”autoplay” value=”true”></object></section>중략
</body></html>CANVAS 요소
카테고리 | Flow content, Phrasing content, Embedded content |
콘텐츠 속성 | 글로벌 속성, width, height |
지원 브라우저 | |
CANVAS 요소[74]는 캔버스(CANVAS)를 표시한다. 원래 ‘캔버스’(canvas)는 유화를 그릴 때 쓰는 천을 의미하는데, 디지털 그래픽에서도 이 의미를 은유적으로 사용하고 있다. 그래서 일러스트레이터(Illustrator)[75], 그림판(Paint)[76]과 같은 그래픽 소프트웨어(graphic software)에서는 그림을 그리는 영역을 캔버스(canvas)라고 부르고 있다. 이 캔버스에 그래픽 콘텐츠를 표현할 때 CANVAS 요소를 사용하는데, IMG, OBJECT 요소와 달리 스크립트에 의해 동적으로 구현되는 그래픽 콘텐츠를 다루는데 더 적합하다.
멀티미디어 콘텐츠가 많아지고 기술이 발달하면서 웹에서도 그래픽 소프트웨어 기능을 부분적으로 구현할 수 있게 되었다. 단순히 이미지만 보여줄 수 있었던 것에 비하면 비약적으로 발전한 셈이다. CANVAS 요소도 IMG 요소처럼 이미지를 표시한다. 그런데 IMG 요소가 이미지가 있는 곳을 표시한다면, CANVAS 요소는 이미지를 편집하거나 그림을 그리기 위한 곳을 표시한다. 즉, 용도 측면의 차이가 있는 셈이다. 물론 CANVAS 요소는 단순히 이미지를 위한 작업 영역일 뿐, 실제 이미지 편집이나 그림 그리기는 자바스크립트와 API가 있어야 한다. 그래서 CANVAS 요소의 속성은 작업 영역의 크기를 지정하기 위한 width 속성과 height 속성이 전부이다. 어떤 그래픽 콘텐츠가 올지 알 수 없으니 IMG 요소처럼 src 속성이나 alt 속성도 필요 없다.
CANVAS 요소는 새로운 표준 기술이므로 일부 브라우저에서는 CANVAS 요소를 지원하지 못한다. 그리고 이미지 편집이나 그림 그리기는 본질적으로 시각 중심의 작업이어서 웹 접근성 문제가 생길 수 있다. 따라서 CANVAS 요소를 사용할 때는 대체 콘텐츠나 대체 방법도 함께 고려되어야 한다. 우선 CANVAS 요소 안에 대체 콘텐츠를 포함시키는 것이 중요하다. 브라우저가 CANVAS 요소를 지원할 경우에는 대체 콘텐츠를 무시하고 원래의 그래픽 콘텐츠를 제공하고, 브라우저가 CANVAS 요소를 지원하지 못할 경우에는 대체 콘텐츠를 제공하게 만드는 것이다(fallback content).[77] 물론 대체 콘텐츠를 제공하는 것이 능사는 아니다. 왜냐하면 CANVAS 요소는 정해진 콘텐츠만을 제공하는 것이 아니기 때문이다. 캔버스 영역에서는 그림 위에 텍스트를 입력하거나 도형을 그리는 기능이 구현될 수 있다. 이런 기능은 대체 콘텐츠가 아니라 대체 방법이 필요하다. 대상을 키보드로 조작할 수 있어야 하고, 텍스트 입력으로 그래픽 콘텐츠를 만들 수 있어야 하며, 현재 상태나 결과물을 비시각적으로도 확인할 수 있어야 한다. 이러한 방법은 결코 쉬운 일이 아니기 때문에 복잡한 기능의 콘텐츠는 전용 그래픽 소프트웨어를 이용하게 만드는 것도 좋은 방법이다.
CANVAS 요소에 어떤 콘텐츠가 올지 예상하기 어렵지만, 다양한 그래픽 콘텐츠가 다양한 방법으로 구현될 것이라는 점은 분명하다. 콘텐츠의 시각화 수준이 높아질수록 스크린 리더 사용자의 정보 처리 난이도도 높아질 수 밖에 없다. 쉽지 않겠지만, 시각적 처리에 의해서만 이해될 수 있는 상황을 사려 깊게 설명할 필요가 있다. 따라서 캔버스 영역에서 어떤 시각적 상황과 결과가 이루어지고 있는지 충분히 설명해야 하며, 더불어 대체 콘텐츠를 제공하는 방안도 고려할 필요가 있다.
<canvas id=”myprofile” width=”300” height=”300”><p>캔버스 기능이 지원하지 않을 경우, 편집하지 않은 프로필 사진을 보여줍니다.<img src=”mypicture” alt=”프로필사진”></canvas><script type=”text/javascript”>var canvas=document.getElementById(‘myprofile’);
var context=canvas.getContetx(‘2d’);
context.fillRect(0,0,50,50);
canvas.setAttribute(‘width’, ‘300’);
context.fillRect(0,100,50,50);
canvas.width = canvas.width;
context.fillRect(100,0,50,50);
</script>VIDEO 요소
카테고리 | Flow content, Phrasing content, Embedded content, Interative content |
콘텐츠 속성 | 글로벌 속성, src, poster, preload, autoplay, loop, muted, controls, width, height |
지원 브라우저 | |
VIDEO 요소는 비디오 파일(VIDEO file)을 표시한다. 비디오 파일은 동영상이나 영화처럼 영상 정보로 이루어져 있는데, 다양한 저작 도구에 의해 만들어지므로 그 형식도 다양하다. 브라우저가 모든 파일 형식을 지원하는 것은 아니기 때문에 표준 형식의 비디오 파일을 사용해야 한다.
<video src=”movie.mp4”></video>VIDEO 요소에 사용되는 속성은 AUDIO 요소와 거의 같다. 따라서 여기서는 다른 점이 있는 속성만 살펴보기로 한다.
height 속성 / width 속성
height 속성과 width 속성은 비디오 플레이어의 높이(height)와 넓이(width)를 지정한다. 이 속성을 지정하지 않으면 브라우저는 비디오 파일을 어디에 배치할지, 어떻게 표시해야 할지 난감해 할 것이다. 물론 높이와 넓이를 지정하지 않더라도 브라우저가 알아서 배치하고 표시해 주겠지만, 로딩 속도를 향상시키거나 레이아웃이 정확하게 이루어지길 바란다면 height 속성과 width 속성을 반드시 지정할 필요가 있다.
<video src=”movie.mp4” controls=”controls” width=”480” height=”320”></video>poster 속성
poster 속성은 비디오 콘텐츠의 포스터(poster)[78]를 지정한다. 이 속성은 비디오를 다운로드하는 동안 사용자에게 지정된 이미지를 미리 보여준다. poster 속성을 지정하지 않으면 브라우저는 비디오 파일의 첫 번째 프레임을 이미지 형식으로 보여준다. 그런데 첫 번째 프레임의 이미지가 곧 비디오 콘텐츠를 대표하는 이미지라고는 볼 수 없다. 따라서 poster 속성의 의미는 단순히 이미지를 보여주는 것이 아니라 ‘지정된 이미지’를 보여주는 것에서 찾을 수 있다. 이것은 비디오를 재생할 수 없는 상황이나 비디오 콘텐츠가 어떤 내용인지 미리 알려주고자 할 때 쓸모 있다.
<video src=”movie.mp4” controls=”controls” width=”480” height=”320” poster=”movie\_img.jpg”></video>muted 속성
muted 속성은 비디오 콘텐츠의 오디오 부분을 묵음 상태(muted state)로 지정한다. 문서가 로딩되면서 비디오 파일을 함께 로딩하거나 비디오 파일이 자동 재생되는 경우, 사용 상황을 고려하여 비디오 콘텐츠를 소리 없이 재생시킬 때 쓸모 있다. 비디오 형식의 광고가 그 좋은 예일 것이다.
<video src=”ad\_movie.mp4” controls=”controls” autoplay=”autoplay” loop=”loop” muted=”muted” width=”480” height=”320” poster=”admovie\_img.jpg”></video>예제 |
사이드바에 비디오 콘텐츠를 제공하고 있는데, 제어 컨트롤을 제공하고 묵음 상태로 로딩하며 준비해 둔 이미지를 보여주도록 구성하였다. 그리고 비디오 콘텐츠를 재생할 수 없는 경우를 고려하여 원문 주소로 이동할 수 있는 링크를 제공하였다(링크 제공은 A 요소에서 작성할 예정이다). 이것을 VIDEO 요소로 마크업하였다.
<!DOCTYPE html><html lang=”ko”><head>중략
</head><body>중략
<section id=”video”><video src=”mappingexperience.mp4” controls=”controls” muted=”muted” width=”250”, height=”350” poster=”slide\_title.jpg”><p>Mapping the Experience Lisbon</p></video><p>\[비디오\] Mapping the Experience 42분</p></section>중략
</body></html>
AUDIO 요소
카테고리 | Flow content, Phrasing content, Embedded content, Interative content |
콘텐츠 속성 | 글로벌 속성, src, preload, autoplay, loop, muted, controls |
지원 브라우저 | |
AUDIO 요소는 오디오 파일(AUDIO file)을 표시한다. 음악이나 라디오처럼 음성 정보(sound)로 이루어져 있는 오디오 파일은 다양한 저작 도구에 의해 만들어지기 때문에 그 형식도 다양하다. 브라우저가 모든 파일 형식을 지원하는 것은 아니므로 표준 형식의 오디오 파일을 사용해야 한다.
<audio src=”snowbell.mp3”></audio>autoplay 속성
autoplay 속성은 오디오 파일의 자동 재생(auto play)을 지정한다. 이 속성을 지정하면 웹 문서가 로딩되었을 때 오디오 파일이 자동으로 재생된다. 사용자 조작 없이 오디오 파일을 재생시킬 수 있다는 점은 얼핏 매력적으로 보일 수 있다. 그러나 상황에 따라서는 자동 재생이 오히려 불편을 줄 수 있다는 점에 유의해야 한다. 작동 기반의 요소는 반드시 사용자 제어(user control)에 의해 작동되어야 하므로 autoplay 속성은 신중하게 사용해야 하거나 아예 사용하지 않는 것이 좋다. autoplay 속성 대신 스크립트를 이용하는 방법이 있는데 이 방법은 스크린 리더처럼 일부 사용자 도구를 지원하지 못할 수 있으므로 autoplay 속성을 이용하는 것이 바람직하다.
<audio src=”snowbell.mp3” autoplay=”autoplay”></audio>loop 속성
loop 속성은 오디오 파일의 반복 재생(loop play)을 지정한다.
<audio src=”snowbell.mp3” autoplay=”autoplay” loop=”loop”></audio>controls 속성
control 속성은 제어 컨트롤(controls)을 지정한다. 사용자가 오디오 파일을 직접 조작하려면 제어 컨트롤이 웹 문서에 나타나야 한다. 이 때 control 속성을 이용하면 제어 컨트롤을 별도로 프로그래밍하지 않아도 브라우저가 다음과 같은 기본적인 제어 컨트롤을 제공한다.
- play: 오디오 파일을 재생할 수 있는 기능
- pause: 오디오 파일의 재생을 임시적으로 멈추게 하는 기능
- seeking: 오디오 파일의 특정 위치를 찾는 기능
- volume: 소리 크기를 조절하는 기능
- fullscreen toggle: 전체 화면으로 전환시키는 기능
- caption: 자막을 보이게 하거나 또는 수화 정보를 선택하는 기능
- audio track: 다른 오디오 트랙을 선택하는 기능
<audio src=”snowbell.mp3” controls=”controls”></audio>preload 속성
preload 속성은 오디오 파일의 사전 로딩(preloading)을 지정한다. 이 속성은 문서 로딩과 동시에 오디오 파일을 로딩시킬 때 사용한다. 만약 autoplay 속성이 함께 지정되었다면, 자동 재생이 기본 설정이므로 preload 속성은 무시된다.
<audio src=”snowbell.mp3” controls=”controls” preload=”auto”></audio>-
preload=”auto”: 문서 로딩 시 자동적으로 오디오 파일도 로딩된다. 사용자가 오디오 파일을 반드시 재생한다면 빠른 재생을 위해 오디오 파일을 미리 로딩시켜 둘 필요가 있다. 예컨대, ‘Last.fm’과 같은 음악 전문 서비스는 음악을 듣기 위한 곳이므로 오디오 파일을 미리 로딩시키고 있다.
-
preload=”metadata”: 문서 로딩 시 메타데이터만 로딩된다. 오디오 파일을 자동으로 로딩시키지 않고 싶다면 preload 속성을 none으로 설정하며 되지만, 이 경우 오디오 파일에 대한 정보를 제대로 알 수 없으므로 사용자 선택에 잘 이루어지지 않을 수 있다. 이 때 preload 속성을 metadata로 설정하면, 재생시간, 트랙 리스트, 첫 번째 프레임에 있는 오디오 파일 등 오디오 파일에 대한 정보만 미리 로딩시킬 수 있다. 오디오 파일이 텍스트 파일에 비해 상대적으로 크기 때문에 모바일 웹처럼 불필요한 트래픽을 최소화할 때 쓸모 있는 방법이다.
-
preload=”none”: 문서가 로딩되더라도 오디오 파일을 미리 로딩시키지 않는다. 사용자가 오디오 콘텐츠를 반드시 이용한다는 가정이라면, auto 속성을 이용하여 문서가 로딩될 때 자동적으로 오디오 파일을 로딩시켜도 된다. 그러나 사용자 선택에 의해 오디오 콘텐츠가 이용된다면, 굳이 오디오 파일을 미리 로딩시킬 필요가 없다. 즉, 이용 여부와 상관 없이 파일을 로딩시키는 것은 불필요한 트래픽을 유발시키는 것이다. 특히, 모바일 웹처럼 트래픽을 아껴야 하는 경우라면 preload 속성을 none으로 설정하는 것이 바람직하다.
예제 |
사이드바에 오디오 콘텐츠를 제공하고 있는데, 제어 컨트롤을 제공하고 문서가 로딩되더라도 오디오 파일을 미리 로딩시키지 않았다. 그리고 오디오 콘텐츠를 재생할 수 없는 경우를 고려하여 원문 주소로 이동할 수 있는 링크를 제공하였다(링크 제공은 A 요소에서 작업할 예정이다). 이것을 AUDIO 요소로 마크업하였다.
<!DOCTYPE html><html lang=”ko”><head>중략
</head><body>중략
<section id=”audio”><audio src=”human.mp3” controls=”controls” preload=”none” width=”250”, height=”80”><p>Maual for Human Experience</p></audio><p>\[오디오\] Manual for Human Experience 3분</p></section>중략
</body></html>
SOURCE 요소
카테고리 | 해당 사항 없음 |
콘텐츠 속성 | 글로벌 속성, src, type, media |
지원 브라우저 | |
SOURCE 요소는 미디어 소스(media SOURCEs)를 표시한다. src 속성을 이용하면 하나의 요소에 한 개의 미디어 소스만 표시할 수 있지만, SOURCE 요소를 이용하면 하나의 요소에 여러 개의 미디어 소스를 표시할 수 있다. 다양한 형식의 미디어 파일이 존재하고 있고, 브라우저가 모든 형식의 미디어 파일을 처리할 수 있는 것은 아니다. 따라서 저작자는 여러 가지 형식의 미디어 파일(multiple media file format)을 제공하여 이용 가능성을 높일 필요가 있을 때 SOURCE 요소를 이용하여 미디어 소스를 표시한다. SOURCE는 VIDEO 또는 AUDIO 요소와 함께 사용한다.
<audio controls><source src=”snowbell.ogg” type=”audio/ogg”><source src=”snowbell.mp3” type=”audio/mp3”></audio>위 소스 코드를 보면 두 가지 종류의 미디어 파일을 표시하고 있다. 이것은 브라우저가 오그보비스(Ogg Vorbis)[79] 파일을 처리할 수 없다면, 다른 미디어 형식인 MP3 파일을 이용하여 오디오 파일을 재생하도록 만들었다. 즉, 브라우저에 대체할 수 있는 미디어 파일을 알려주는 것이다.
type 속성
type 속성은 미디어 파일의 MIME[80] 종류(MIME type)를 지정한다. 브라우저가 웹 서버에 특정 미디어 파일을 요청하면 웹 서버는 미디어 파일에 대한 정보를 먼저 전송하며, 브라우저는 이 정보를 미리 확인하여 미디어 파일을 재생하기 위한 적절한 애플리케이션을 선택할 수 있게 된다. MIME 타입은 아주 다양한데[81], 일반적으로 다음과 같은 MIME 타입이 자주 사용된다.
비디오 파일
- type=”video/ogg”
- type=”video/mp4”
- type=”video/webm”
오디오 파일
- type=”audio/ogg”
- type=”audio/mp3”
예제 |
사이드바에 오디오 콘텐츠를 제공하고 있는데, 다양한 환경을 지원하기 위해 다른 형식의 오디오 콘텐츠를 추가로 제공하였다. 이것을 SOURCE 요소로 마크업하였다.
<!DOCTYPE html><html lang=”ko”><head>중략
</head><body>중략
<section id=”audio”><audio src=”human.mp3” controls=”controls” preload=”none” width=”250”, height=”80”><source src=”human.ogg” type=”audio/ogg”><source src=”human.mp3” type=”audio/mp3”><p>Maual for Human Experience</p></audio><p>\[오디오\] Manual for Human Experience 3분</p></section>중략
</body></html>TRACK 요소[82]
카테고리 | 해당 사항 없음 |
콘텐츠 속성 | 글로벌 속성, kind, src, srclang, label, default |
지원 브라우저 | 없음 |
TRACK 요소는 VIDEO와 AUDIO 요소의 텍스트 트랙(text TRACKs)를 표시한다. ‘트랙’은 영화나 음악처럼 연속적인 콘텐츠에 포함되는 데이터 기록의 경로 또는 부분을 말한다. 여기에서는 콘텐츠의 자막(subtitle), 제목, 부제목, 설명, 메타데이터 등 텍스트 형식의 정보를 의미하며, 이 정보는 재생 시 나타날 수 있게 된다.
<video src=”test.mp4”><track></track></video>kind 속성[83]
kind 속성은 텍스트 트랙의 종류(kind)를 지정한다.
-
kind =”subtitles” : 자막(subtitles)을 제공한다. 이해하기 어려운 오디오 부분을 자막과 함께 보여주려고 할 때 사용한다.
-
kind=”captions” : 캡션(captions)을 제공한다. 공공장소처럼 소리를 키울 수 없거나 청각 장애를 갖고 있는 경우를 고려하여 오디오 콘텐츠의 핵심 키워드를 캡션 형태로 보여주려고 할 때 사용한다.
-
kind=”descriptions” : 텍스트 설명(textual descriptions)을 제공한다. 시각적 처리만으로는 이해하기 어렵거나 시각 장애를 갖고 있는 경우를 고려하여 비디오 콘텐츠에 별도의 설명을 제공하려고 할 때 사용한다.
-
kind=”chapters” : 챕터 제목(chapter titles)을 제공한다. 챕터 단위로 이동할 수 있는 방법을 제공할 때 사용한다.
-
kind=”metadata” : 메타데이터(metadata)를 제공한다. 스크립트를 위한 정보이므로 사용자는 볼 수 없다.
srclang 속성[84]
srclang 속성은 소스 데이터의 언어(the language of the source data)를 지정한다. “소스 데이터”는 텍스트 트랙에 있는 데이터를 의미하며, kind=”subtitles”가 지정되었을 때만 사용할 수 있다.
label 속성[85]
label 속성은 텍스트 트랙 이름(label)을 지정한다. 이 이름은 문서 제목처럼 사용자 이해를 돕기 위한 정보이며, 브라우저가 텍스트 트랙을 보여줄 때 목록 제목으로 사용한다.
default 속성[86]
default 속성은 텍스트 트랙 제공의 기본 설정(default) 여부를 지정한다. 사용자가 별도로 설정하지 않는 한, default 속성으로 지정된 텍스트 트랙이 기본적으로 제공된다.
<video src="brave.webm"><track kind=”subtitles” src=”brave.en.vtt” srclang=”en” label="English"><track kind=”captions” src=”brave.en.hoh.vtt” srclang=”en” label="English for the Hard of Hearing"><track kind=”subtitles” src=”brave.fr.vtt” srclang=”fr” lang=”fr” label="Français"><track kind=”subtitles” src=”brave.de.vtt” srclang=”de” lang=”de” label="Deutsch"></video>IFRAME 요소
카테고리 | Flow content, Phrasing content, Embedded content, Interative content |
콘텐츠 속성 | 글로벌 속성, src, srcdoc, name, sandbox, seamless, width, height |
지원 브라우저 | |
IFRAME 요소는 인라인 프레임(Inline FRAME)을 표시한다. 인라인 프레임은 문서 내에 다른 문서를 넣기 위한 기술이다. HTML5로 바뀌면서 FRAME 요소는 사라졌지만 IFRAME 요소는 남았다. 과거에는 IFRAME 요소를 비표준 기술로 간주하기도 했지만, API를 이용하여 외부 서비스와의 연결해야 하는 필요성이 증가하면서 오히려 IFRAME 요소의 존재 가치가 더 중요해졌다.
src 속성
src 속성은 인라인 프레임으로 제공할 소스(source)를 지정한다.
<iframe src=”http://www.example.com/test.html”>sandbox 속성[87]
sandbox 속성은 보호 구역(sandbox) [88] 을 지정한다. 이 속성은 보호 구역의 지정 여부를 통해 인라인 프레임 내의 콘텐츠에 대한 제약사항을 설정할 수 있도록 만든다. 트위터, 페이스북 등 SNS에서 제공하는 소셜 컴포넌트(social component)를 인라인 프레임을 통해 제공할 때, 외부 문서를 아무 조건 없이 개방한다면 크고 작은 문제가 생길 수 있다. 따라서 브라우저가 외부 문서에 대한 최소한의 방어 수단을 갖고 있어야 하며, 이를 위해 sandbox 속성을 사용한다. 즉, 브라우저가 인라인 프레임 내의 콘텐츠를 직접 제어할 수는 없지만, 제약사항을 통해 방어할 수 있도록 만드는 것이다. 기본적으로 인라인 프레임의 sandbox 속성에 의해 제공되는 콘텐츠는 플러그인(예, ActiveX, 플래시 등), 폼, 스크립트를 실행할 수 없으며, 부모 문서를 대체하는 브라우징이 불가능하다. 이러한 제약사항들은 아래와 같은 속성값을 통해 일부 또는 전부 해제될 수 있다.
- allow-same-origin : 원칙적으로 다른 도메인의 문서가 인라인 프레임을 통해 제공될 때, 부모 문서(parent document)에 접근할 수 없다. 이런 경우, allow-same-origin 속성값을 이용하면 다른 도메인의 문서를 같은 도메인의 문서로 간주하여 부모 문서에 접근할 수 있게 된다.
<iframe src=”http://www.example.com/test.html” sandbox=”allow-same-origin”>
- allow-top-navigation : 원칙적으로 다른 도메인의 문서가 인라인 프레임을 통해 제공될 때, 부모 문서를 대체하는 브라우징은 불가능하다. 이런 경우, allow-top-navigation 속성값을 이용하면 인라인 프레임에 있는 링크를 클릭했을 때 부모 문서가 사라지고 외부 문서가 나타나게 하거나 새 창을 열어 새로운 브라우징할 수 있도록 처리할 수 있다.
<iframe src=”http://www.example.com/test.html” sandbox=”allow-top-navigation”>
- allow-forms : 원칙적으로 다른 도메인의 문서가 인라인 프레임을 통해 제공될 때, 폼 데이터를 다른 곳으로 보낼 수 없다. 이런 경우, allow-forms 속성값을 이용하면 인라인 프레임에서 폼 데이터를 다른 곳으로 보낼 수 있다.
<iframe src=”http://www.example.com/test.html” sandbox=”allow-forms”>- allow-scripts : 원칙적으로 다른 도메인의 문서가 인라인 프레임을 통해 제공될 때, 스크립트 실행은 허용되지 않는다. 이런 경우, allow-scripts 속성값을 이용하면 인라인 프레임에서 스크립트를 실행시킬 수 있다. 단, 팝업 창은 허용되지 않는다. 스크립트는 여러 가지 보안 상의 문제를 야기시킬 수 있기 때문에 신뢰할 수 있는 문서일 경우에만 허용해야 한다.
<iframe src=”http://www.example.com/test.html” sandbox=”allow-scripts”>seamless 속성[89]
seamless 속성은 인라인 프레임 내의 콘텐츠를 구분 없이(seamless) 나타나도록 지정한다. 이 속성을 사용하면 테두리선이나 스크롤바가 나타나지 않게 하여 인라인 프레임 영역이 부모 문서의 일부분처럼 보이게 되며, 부모 문서에 적용된 스타일 시트를 인라인 프레임에도 적용되도록 만든다.[90]
<iframe src=”http://www.example.com/test.html” seamless=”seamless”>srcdoc 속성
srcdoc 속성[91]은 소스 문서(source document)를 지정한다. 이 속성은 인라인 프레임에 직접 HTML 문서를 작성할 수 있게 만든다.[92] 소스 문서는 반드시 HTML 문법에 맞게 작성되어야 한다. srcdoc 속성과 src 속성을 모두 작성할 경우 srcdoc를 우선 적용하는데, 브라우저가 srcdoc 속성을 지원하지 못할 경우에는 src 속성을 참조하여 대체 콘텐츠를 보여준다.
<iframe srcdoc=”<p>안녕하세요!</p>” src=”http://www.example.com/test.html”></iframe>예제 |
사이드바 맨 아래에 있는 배너 광고 영역은 외부 서버에 저장되어 있는 외부 문서를 링크하였고, 이것을 IFRAME 요소로 마크업하였다.
<!DOCTYPE html><html lang=”ko”><head>중략
</head><body>중략
<section id=”external\_ad”><iframe src=”http://www.ancestry.com/advertisement.html” title=”Ancestry.com 광고 배너”></iframe></section>중략
</body></html>
주석
[67] www.youtube.com
[68] 보건복지부 통계자료를 살펴보면, 2009년 기준 등록 장애인은 약 240만명이고, 이 중에서 시각 장애를 가진 사람은 전체 등록 장애인의 10% 수준인 약 24만명이다. 등록하지 않는 경우도 있기 때문에 실제 장애인 수는 더 많을 것이다.
[69] AREA 요소의 shape 속성, coords, href 속성에 의해 지정된다.
[70] 포커스(focus) : 입력을 받기 위해 선택된 상태로 있는 것. (그림 설명) 키보드 탭 키를 누르면 입력을 받을 요소가 선택된 상태가 된다.
[71] (출처) www.dictionary.com
[72] 이것을 W3C의 HTML5에서는 ‘external resource’라고 표현하였다.
[73] EMBED 요소는 HTML 4와 xHTML 1.0에서는 표준 규격으로 인정되지 않았지만, HTML5에서는 표준 기술로 인정되었다.
[74] 자세한 내용은 https://developer.mozilla.org/en/Canvas\_tutorial에서 확인할 수 있다.
[75] Adobe사의 드로잉 소프트웨어(drawing software)
[76] 윈도우즈(Windows)에서 제공하는 그래픽 소프트웨어
[77] (참고) http://dev.w3.org/html5/spec/Overview.html#fallback-content
[78] 비디오 콘텐츠를 대표하는 이미지를 의미한다.
[79] 디지털 음악 파일 형식의 일종(.ogg)이다. 자유롭게 저작 및 유통할 수 있는 파일 형식이며 MP3 파일보다 음질과 압축률이 더 뛰어난 것으로 알려져 있다.
[80] MIME(Multipurpose Internet Mail Extensions): 인터넷 통신에서 텍스트, 이미지, 동영상, 사운드 등 여러 가지 형태의 데이터 송수신에 관한 규약이다(출처: 매경닷컴).
[81] MIME 타입에 대한 자세한 내용은 http://www.iana.org/assignments/media-types/index.html에서 확인할 수 있다.
[82] HTML5에 새로 추가된 요소다.
[83] HTML5에 새로 추가된 속성이다.
[84] HTML5에 새로 추가된 속성이다.
[85] HTML5에 새로 추가된 속성이다.
[86] HTML5에 새로 추가된 속성이다.
[87] HTML5에 추가된 속성이다.
[88] ‘샌드박스’(sandbox)는 보호된 영역 내에서 프로그램을 동작시키는 것으로, 외부 요인에 의해 악영향이 미치는 것을 방지하는 보안 모델을 말한다. ‘아이를 모래밭(샌드박스)의 밖에서 놀리지 않는다’라고 하는 말이 어원이라고 알려져 있다. 이 모델에서는 외부로부터 받은 프로그램을 보호된 영역, 즉 ‘상자’ 안에 가두고 나서 동작시킨다. ‘상자’는 다른 파일이나 프로세스로부터는 격리되어 내부에서 외부를 조작하는 것은 금지되고 있다. (출처: 두산동아, 한국정보통신기술협회)
[89] HTML5에 추가된 속성이다.
[90] 이 속성에 대한 규격은 제안되어 있는 상태이지만, 2011년 4월 현재까지 주요 브라우저에서 이 속성을 지원하지 않고 있다.
[91] HTML5에 추가된 속성이다.
[92] 이 속성에 대한 규격은 제안되어 있는 상태이지만, 2011년 4월 현재까지 주요 브라우저에서 이 속성을 지원하지 않고 있다.