17. HTML의 이미지

소개

이 글에서는 웹 디자인을 예쁘게 만드는 것 – 이미지 – 에 대해 이야기할 것입니다. 이 글의 마지막 쯤 가게 되면 웹 문서에 이미지들을 접근성있게 추가하는 방법, 그리고 정보를 전달하기 위해 인라인 이미지를 사용해야 하는 경우와 페이지 레이아웃을 위해 배경 이미지를 사용하는 방법 들에 대해 알게 될 것입니다. 이 글에서 사용한 파일들은 여기에서 다운로드 받을 수 있습니다. 튜터리얼에서 이러한 파일들을 언급할 것입니다. 내용은 다음과 같습니다.

  • 그림은 천마디 말보다 더 많은 것을 말합니다 – 정말?
  • 웹에 있는 이미지들의 종류 – 내용과 배경
  • img 요소와 그 속성들
    • alt 속성을 이용해 대체 텍스트를 제공하는 방법
    • 있으면 좋은 정보를 title 속성으로 추가하는 방법
    • longdesc 속성을 이용해서 복잡한 이미지에 대체텍스트를 제공하는 방법
    • width, height 속성을 사용해서 이미지를 더 빨리 그리게 하는 방법
  • 인라인 이미지는 여기까지
  • CSS를 통한 배경 이미지
    • CSS를 통해 배경을 설정하는 방법
  • 요약
  • 연습문제

그림은 천마디 말보다 더 많은 것을 말합니다 – 정말?

사이트에 많은 이미지를 사용하는 것은 대단히 유혹적인 일입니다. 이미지는 방문자에게 분위기를 전달하는 좋은 방법이며, 일러스트레이션은 복잡한 정보를 쉽게 전달하는 방법을 제공합니다.

웹에서 이미지의 단점은, 웹을 이용하는 사용자 모두가 그것을 볼 수는 없다는 것입니다. 브라우저가 처음으로 이미지를 지원하기 시작했었던 무렵, 많은 사용자들이 이미지를 꺼 두고 있었습니다. 트래픽을 감소시키고 더 빠르게 웹을 이용하기 위해서였습니다 – 웹 연결이 매우 느렸고, 온라인 요금이 종량제였기 때문입니다. 요즈음엔 상황이 많이 달라졌지만, 아직 완전히 벗어난 것은 아닙니다:

  • 모바일 장치에서 웹을 이용하는 사용자들은 아직 이미지를 끄고 있는 경우가 있습니다. 화면 크기가 작고, 다운로드 비용이 들기 때문입니다.
  • 사이트의 방문자가 맹인이거나 심각한 시력 저하로 이미지를 볼 수 없을 수 있습니다.
  • 방문자가 완전히 다른 문화권이어서 당신이 이미지로 표현하고자 했었던 것을 이해하지 못할 수 있습니다.
  • 검색엔진은 텍스트만을 색인합니다 – 이미지는 (아직) 알지 못합니다. 즉, 이미지로만 표현된 정보는 색인될 수 없고 검색될 수 없습니다.

따라서 이미지를 현명하게 선택하는 것이 중요하며, 적절한 경우에만 사용해야 합니다. 당신이 사용한 이미지를 볼 수 없는 사용자들을 위해 폴백을 제공하는 것은 더욱 중요합니다. 이 시리즈에 곧 출간될 “웹 내비게이션과 메뉴” 에서는 잘못 사용된 아이콘과 이미지에 대해 더 많은 것을 다룰 것입니다. 일단은, HTML 문서에 이미지를 더하는 방법에 대해 알아보기로 합시다.

웹에 있는 이미지들의 종류 – 내용과 배경

문서에 이미지를 추가하는 것에는 두가지 방법이 있습니다. 내용이 있는 이미지는 img 요소를 통해서 추가하며, 배경 이미지는 CSS를 통해서 추가합니다. 무엇을 사용할 지는, 무엇을 원하는지에 따라 다릅니다:

  • 이미지가 문서의 내용에서 중요한 경우 – 예를 들어 저자의 사진이라든가 어떤 데이터를 표현한 그래프 같은 경우라면 img 요소와 적합한 대체텍스트를 이용해서 추가해야 합니다.
  • 이미지가 장식적인 목적이라면 CSS 배경 이미지를 사용해야 합니다. 그러한 이미지는 대체 텍스트를 가지면 안되고(맹인에게 “녹색의 둥근 모서리” 따위가 무슨 의미가 있겠습니까?), CSS에는 HTML에 비해 이미지를 다룰 수 있는 방법이 훨씬 많이 있기 때문입니다.

img 요소와 그 속성들

HTML 문서에 이미지를 추가하는 것은 매우 쉽습니다. 다음의 HTML 문서(압축 파일 속의 inlineimageexample.html) 는 브라우저에 사진을 표시할 것입니다. (HTML 문서와 같은 폴더에 이미지가 있다면 말입니다)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <title>Example of an inline image</title>
</head>
<body>
<img src="balconyview.jpg">
</body>
</html>

이 코드를 브라우저에서 실행하면 그림 1과 같은 결과를 얻게 될 것입니다.

그림 1. 브라우저에 표시될 이미지

 

alt 속성으로 대체 텍스트를 제공하는 방법

이것은 이미지를 잘 보여줍니다만, 잘못된 HTML인데, img 요소는 alt 속성을 필요로 하기 때문입니다. 이 속성은 텍스트를 포함하며, 어떤 이유로 인해 이미지가 표시되지 않을 경우 그 텍스트를 대신 보여줍니다. 이미지를 찾을 수 없었거나, 로드할 수 없었거나, 브라우저에서 그 이미지를 지원하지 못했을 수 있습니다. 이에 더해, 시각 장애를 가진 사람들은 웹 페이지를 읽기 위해 보조 기술을 이용합니다. 이러한 기술들은 alt 속성의 내용을 사용자에게 읽어줍니다. 따라서 이미지의 내용을 설명하는 좋은 대체텍스트를 생각하고 그것을 alt 속성에 넣는 것이 중요합니다.

웹에서 “alt 태그” 에 대해 이야기하는 많은 텍스트들을 보았을 것입니다. 이건 엄밀히 말하면 틀린 이야기인데, 그러한 이름의 태그(또는 요소)는 없기 때문입니다. 그것은 img 요소의 속성이며, 접근성과 검색엔진 최적화 양쪽에 있어 믿을 수 없을 정도로 중요합니다.

모든 이들이 그 이미지를 이해할 수 있도록 하기 위해서, 적절한 대체 텍스트를 제공할 필요가 있습니다. 이 경우라면 텍스트는 다음과 같을 것입니다: “내 방의 발코니에서 바라본 사진. 집들이 일렬로 서 있으며, 나무와 성이 보입니다” (inlineimageexamplealt.html)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <title>Example of an inline image</title>
</head>
<body>
<img src="balconyview.jpg" alt="내 방의 발코니에서 바라본 사진. 집들이 일렬로 서 있으며, 나무와 성이 보입니다">
</body>
</html>

alt 속성은 이미지를 표시할 수 없을때 표시되어야 할 텍스트를 포함합니다. 이 속성에 들어 있는 정보는 이미지가 제대로 로드되고 표시되었을 때에는 드러나선 안됩니다만, IE에서는 이것을 잘못 적용하고 있으며 이미지에 마우스 포인터를 잠시 올려두고 있으면 그것을 표시합니다. 이러한 것은 잘못된 것인데, 많은 사람들이 이것 때문에 이미지에 관한 추가적인 정보를 표시하는 목적으로 alt 속성을 사용하고 있습니다. 그러한 추가적인 정보를 제공하려는 목적이라면 title 속성을 사용해야 하는데, 그것은 다음 절에서 살펴봅니다.

있으면 좋은 정보를 title 속성으로 추가하는 방법

대부분의 브라우저에서 img 요소의 title 속성의 내용을 툴팁으로 보여줍니다. (그림 2를 보십시오) 이렇게 하면 방문자가 이미지에 대해 더 많은 것을 알 수 있지만, 모든 방문자가 이미지 위에 마우스를 올릴 것이라고 기대해선 안됩니다. title 속성은 매우 유용한 것일 수 있지만, 중요한 정보를 전달하는 안전한 방법이 되지는 못합니다. 대신, 그것은 예를 들어서 이미지의 분위기에 관해 적어둔다거나, 문맥 속에서의 의미에 관해 첨언한다거나 하고 싶을 때 유용합니다. (inlineimagewithtitle.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <title>Example of an inline image with alternative text and title</title>
</head>
<body>
<img src="balconyview.jpg" alt="내 방의 발코니에서 바라본 사진. 집들이 일렬로 서 있으며, 나무와 성이 보입니다" title="내 방의 창문으로 바라본 풍경입니다. 성이 보이는데, 그것은 내가 여기로 이사 온 이유 중 하나입니다.">
</body>
</html>

브라우저에서는 그림 2와 같이 보일 것입니다.

그림 2. title 속성은 대부분의 브라우저에서 툴팁으로 보입니다.

 

longdesc 속성을 이용해서 복잡한 이미지에 대체텍스트를 제공하는 방법

이미지가 대단히 복잡한 것 – 예를 들어 차트 같은 것이라면, longdesc 속성을 이용해서 좀 더 긴 설명을 제공할 수 있습니다. 이렇게 하면 스크린 리더 사용자라든가, 브라우저에서 이미지를 꺼 둔 사용자들도 그 이미지에서 전달하는 정보에 접근할 수 있습니다.

이 속성은 동일한 정보를 포함하는 문서를 가리키는 URL을 포함합니다. 예를 들어, 데이터를 보여주는 차트라면, 동일한 정보를 데이터 테이블로 표현한 것에 링크할 수 있습니다. (inlineimagelongdesc.html)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <title>Example of an inline image with longdesc</title>
</head>
<body>
<img src="chart.png" width="450" height="150" alt="15세 미만의 어린이들이 어떤 과일을 주로 먹었는지 보여주는 차트입니다. 대부분의 어린이들은 파인애플을 먹었으며, 그 다음으로 많았던 것은 배 입니다." longdesc="fruitconsumption.html">
</body>
</html>

데이터 파일 fruitconsumption.html 은 동일한 데이터를 표현하는 매우 단순한 데이터 테이블을 포함하고 있습니다:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <title>Fruit consumption</title>
</head>
<body>
<table summary="15세 미만 어린이들의 과일 소비. 2007년 4월 작성">
  <caption>Fruit Consumption</caption>
  <thead>
    <tr><th scope="col">과일</th><th scope="col">수량</th></tr>
  </thead>
  <tbody>
    <tr><td>사과</td><td>10</td></tr>
    <tr><td>오렌지</td><td>58</td></tr>
    <tr><td>파인애플</td><td>95</td></tr>
    <tr><td>바나나</td><td>30</td></tr>
    <tr><td>건포도</td><td>8</td></tr>
    <tr><td>배</td><td>63</td></tr>
  </tbody>
</table>
<p><a href="inlineimagelongdesc.html">원문으로 돌아가기</a></p>
</body>
</html>

두가지 데이터 표현이 그림 3에 나란히 나타납니다.

그림 3. longdesc 속성을 사용해서 복잡한 데이터를 포함한 문서로 링크할 수 있습니다.

이 이미지에 긴 설명 파일이 연결되어 있다는 시각적인 단서가 없다는 점을 눈여겨 보십시오. 하지만 보조 기술들은 사용자에게 그러한 것이 있다는 것을 알려줄 것입니다.

너비와 높이를 명시하여 이미지를 빠르게 표시하는 방법

사용자 에이전트가 HTML에서 img 요소를 발견하면, src 속성이 가리키는 이미지를 로드하기 시작합니다. 기본적으로, 브라우저는 이미지의 크기에 대해 알지 못하기 때문에, 우선 그 주위의 텍스트들을 전부 표시한 후, 이미지가 완전히 로드되고 표시된 후에 그 뒤의 텍스트를 밀어내게 됩니다. 이러한 것은 페이지의 로딩 속도에 영향을 줄 수 있으며, 사용자에게는 약간 혼란스러울 수 있습니다. 이러한 일을 피하기 위해 브라우저에게 처음부터 정확한 공간을 확보하도록 지시할 수 있습니다. 이미지의 크기를 width, height 속성을 통해 명시하면 됩니다. (inlineimagewithdimensions.html)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <title>Example of an inline image with dimensions</title>
</head>
<body>
<img src="balconyview.jpg" alt="내 방의 발코니에서 바라본 사진. 집들이 일렬로 서 있으며, 나무와 성이 보입니다" width="400" height="186">
</body>
</html>

이렇게 하면 이미지가 완전히 로드되고 표시될 때 까지는 정의된 크기 만큼의 공간이 그 자리를 대신 차지하고 있을 것이며, 따라서 보기 좋지 않은 이동을 피할 수 있습니다. 이러한 것을 통해 이미지의 크기를 조절하는 것도 가능하지만, 모든 브라우저에서 말끔하게 크기 조절을 해 주는 것은 아니므로 추천할 수 있는 방법은 아닙니다. 특히, 썸네일을 보여줄 목적으로 이렇게 크기 조절을 하는 것은 매우 좋지 않은 방법인데, 썸네일을 보여주는 것은 보이는 크기만을 줄이려는 것이 아니라 파일 크기에도 목적이 있기 때문입니다. 5KB면 충분한 이미지를 보기 위해 30KB 크기의 사진을 로드하는 것을 환영할 사람은 아무도 없습니다.

인라인 이미지는 여기까지

이미지에 사용할 수 있는 속성들은 훨씬 많이 있지만, 그중 대부분은 이미지의 레이아웃과 정렬을 조절하는 것으로서 폐기되었습니다. 이러한 것은 HTML이 할 일이 아니라 CSS가 할 일입니다. 이미지라는 것은 기본적으로 인라인 요소라는 점을 기억하는 것이 중요합니다. 이 말의 의미는, 이미지가 줄바꿈을 하지 않고 단어들 사이에 나타날 수 있다는 뜻입니다. 텍스트 사이에 조그마한 아이콘을 끼워 넣고자 하는 경우에는 이것이 매우 좋지만, 이미지와 텍스트를 이용한 레이아웃을 만들려고 한다면 매우 불편할 수 있습니다. CSS를 이용하면 기본적인 속성을 덮어쓰고 블럭 레벨 요소처럼 행동하도록 할 수 있습니다.

CSS를 통한 배경 이미지

브라우저들이 CSS를 지원하기 시작하면서 웹 디자인이 훨씬 즐거운 일이 되었다고 할 수 있습니다. 페이지의 요소들을 배치하기 위해 사방팔방에 테이블 셀들을 늘어놓고, 공백을 유지하기 위해 고정폭 빈칸(&nbsp;)을 사용하고, 공백용 gif(마진을 표시하기 위해 1픽셀짜리 투명한 gif 이미지를 늘리는 것) 따위를 쓰는 대신, CSS의 패딩, 마진, 크기, 포지션을 사용하고 HTML에서는 내용과 구조만을 생각하면 됩니다.

CSS는 또한 배경 이미지를 매우 유연하게 표시할 수 있습니다. 텍스트 밑으로, 주위로, 무엇을 원하든 간에 그렇게 할 수 있고 이미지를 반복해서 배경 패턴을 만들 수도 있습니다. 여기에서는 CSS 이미지를 간단하게만 설명할 것이며, 이후의 글에서 훨씬 자세하게 다루어질 것입니다.

CSS를 이용해서 배경 이미지를 표시하는 방법

이미지를 배경으로 표시하는 CSS는 무척 쉽습니다. 아래의 CSS 코드를 살펴보기 전에, imagesandcss.html 예제 파일을 브라우저에서 보거나 또는 아래의 그림 4를 보고 CSS에서 배경 이미지로 어떤 것들을 할 수 있는지 간단히 보길 바랍니다.

그림 4. CSS로 표현한 배경

박스들은 사실 h2 제목 요소인데, 배경 이미지를 표시하기에 충분한 공간을 확보하기 위해 CSS를 이용해서 패딩과 테두리를 준 것입니다. HTML 파일을 살펴보면, 각각의 h2 요소들에 고유한 id가 있어서 서로 다른 CSS 규칙을 적용받고 있는 것을 알 수 있습니다. 첫번째 예제 적용된 CSS는 다음과 같습니다:

background-image:url (ball.gif);
background-color:#eee;

background-image 셀렉터를 이용해서 이미지를 추가하고, 괄호 안에 URL로 그 이미지를 명시합니다. 이미지가 없을 경우에 대비해서 폴백으로 배경 색상을 지정할 수 있는데, background-color 선택자와 (16진수, 이름, RGB) 색상 값을 쓰면 됩니다. (밝은 회색을 사용했습니다)

기본적으로, 배경 이미지는 가능한 공간 전부를 채우도록 가로 세로로 반복됩니다. 물론 background-repeat 셀렉터를 이용해서 반복 방식을 정의할 수 있습니다.

  • 전혀 반복하지 않는다: background-repeat:no-repeat;
  • 가로로만 반복한다: background-repeat:repeat-x;
  • 세로로만 반복한다: background-repeat:repeat-y;

기본적으로 이미지는(반복하지 않았다면) 요소의 왼쪽 위 코너에 위치할 것입니다. 물론 background-position 속성을 이용해서 위치를 이동할 수 있습니다. 가장 쉬운 방법은 세로 위치를 위해 top, center, bottom, 그리고 가로 위치를 위해 left, center, right 을 사용하는 것입니다. 예를 들어, 이미지를 오른쪽 아래에 놓으려면 background-position:bottom-right; 를 쓰면 되고, 오른쪽 가운데에 놓으려면 background-position:center-right; 를 쓰면 됩니다.

적절한 배경 이미지를 선택하고 반복과 위치를 지정함으로서, CSS가 없었던 때에는 전혀 불가능했던 놀라운 효과를 연출할 수 있습니다. 또한 그러한 정의를 외부 CSS 파일에 둠으로서, 코드 몇 줄 수정하는 것 만으로 사이트 전체의 형태와 느낌을 완전히 바꿀 수 있습니다. 이러한 것은 30번 글 이후에서 다루어질 것입니다.

요약

HTML에 이미지를 추가하는 방법에 대해서 알아보았습니다. 이미지와 CSS를 가지고 더 많은 일을 할 수 있지만, 일단 지금으로서는 여기서 배운 것들을 이해하고, 이미지를 사용하는 최상의 사례들에 집중하는 것이 좋습니다. 우리가 배운 것은:

  • img 요소와 그 기본적 속성:
    • src 속성으로 이미지의 위치 지정
  • alt 속성으로 이미지가 로드되지 않았거나 보이지 않았을 경우를 대비한 텍스트 지정
  • title 속성으로 흥미롭지만 필수적이진 않은 추가적인 정보 제공
  • longdesc 속성을 이용해 이미지가 매우 복잡한 경우 그것이 묘사하는 데이터를 대체적인 텍스트 표현으로 제공하는 외부 파일을 준비하고 그것과 연결하는 방법
  • width와 height를 사용해서 이미지의 크기를 브라우저에게 미리 알려주고 그에 맞는 공간을 미리 할당하게 하는 방법
  • CSS 배경 이미지의 기초
    • 배경을 사용해야 하는 경우 (기본적으로 이미지가 대체 텍스트를 필요로 하지 않으며 장식을 위해 사용한 경우)
  • CSS를 이용해서 배경 이미지를 위치시키고 반복을 조절하는 방법

연습문제

  • alt 속성을 이용해서 이미지에 텍스트를 추가하는 것이 왜 그리 중요하며, 정말로 그렇게 할 필요가 있습니까?
  • 1280×786 픽셀의 큰 이미지를 40×30 픽셀의 썸네일로 보여주어야 한다면, 그것을 HTML 만으로 할 수 있습니까? 그렇게 하는 것은 현명한 일일까요?
  • longdesc 속성은 무엇이고, 브라우저는 그것을 어떻게 보여줍니까?
  • valign, align 속성은 무엇이며 이 글에서 소개되지 않은 이유는 무엇입니까?
  • CSS 배경 이미지가 요소에서 기본적으로 표시되는 위치는 어디이며, 기본적인 반복 방식은 무엇입니까?
이 글과 비슷한 종류의 글은 'HTML' 카테고리에서 더 찾아볼 수 있습니다. 또한, , 태그로도 검색해 보실 수 있습니다. 북마크를 하시려면 퍼머 링크로 기억해 주세요.
이 글을 다 읽어주셨다면, 댓글을 남겨주세요. 좋았다라는 격려도 좋고, 잘못된 부분을 지적해 주시는 것도 좋습니다. 마음에 드셨다면 아래 Like 버튼을 눌러서 페이스북과 트위터로 소개해 주시면 더욱 좋겠습니다.