|
|
|
|
|
|
|
|
|
 |
|
|
 |
|
|
 |
|
|
 |
|
|
|
6만원 이상 무료배송
|
|
|
주문하시는
총상품금액의 합계가
6만원 이상일 경우
택배비가 무료입니다.
|
|
|
|
 |
|
|
|
|
|
|
Lightbox 2와 자바스크립트로 멋진 이미지 갤러리 만들기
|
|
|
|
작성자:
마스타
작성일: 2009-01-19 16:56
조회: 26087
댓글: 1
|
|
|
난이도 : 초급
Brett McLaughlin, 필자 겸 편집자, O'Reilly Media Inc.
옮긴이 : 박재호 이해영 dwkorea@kr.ibm.com
원문 게재일 : 2008 년 10 월 28 일
번역 게재일 : 2008 년 12 월 23 일
이제 웹은 자신의 작품을 자랑하는 무대로 자리잡았습니다. 아마추어 사진사가 찍은 솔직한 사진에서 전문 사진작가가 올리는 예술 사진까지, 웹 페이지는 다양한 이미지를 보여주는 수단이 되었습니다. 하지만 아무리 아름다운 이미지라도 배치와 구성이 중요합니다. 이 기사에서는 간단한 자바스크립트 라이브러리를 사용하여 온라인 이미지를 멋지게 배치하고 사용자 인터페이스를 직관적으로 구성하는 방법을 소개합니다.
자바스크립트는 필경 웹에서 가장 흔히 사용하는 프로그래밍 언어 중 하나다. 거의 HTML, XTML, CSS만큼이나 널리 사용된다. 유용한 자바스크립트 라이브러리도 많으며, 대다수 라이브러리는 다양한 브라우저와 다양한 사용자 환경에서 문제 없이 돌아간다. 가장 유용하고 인기 있는 라이브러리 중 하나가 Lightbox 2다. Lightbox 2는 온라인 이미지 갤러리, 이미지 오버레이, 이미지 그룹 탐색 같은 기능을 제공한다. 이 기사에서는 Lightbox 2를 상세히 소개한다. 잘 알려지지 않은 (때로 잘 드러나지 않는) 기능을 사용하는 방법도 익힌다. 이 기사를 충실히 따른다면, 인터페이스가 편리하고 멋진 자신만의 이미지 갤러리를 마련할 것이다.
요즘은 모두가 사진작가
5년 전만 해도 모두가 블로거였다. 어머니, 할머니, 삼촌, 군인, 운동선수 등 너도나도 블로그를 만들어 자신의 삶을 공유했다. 요즘은 경향이 바뀌어 온라인 사진이 유행이다.
몇백 달러면 고등학생조차도 멋진 디지털 사진기를 구입하여 사진 실력을 연마할 수 있다. 하지만 사진은 혼자 감상할 때보다 공유할 때 의미가 있다. 그래서 웹이 주목을 받는다. 웹은 어떤 사진 갤러리보다 커다란 무대를 제공한다. 작품성이 떨어지는 사진도 포용한다. 하지만 아무리 아름다운 사진이라도 HTML 페이지에 대충 올리고 설명 몇 구절을 성의 없이 붙인다면 금방 매력이 떨어진다. 초보 사진작가의 가능성과 재능도 끔찍한 웹 디자인에 가려져 빛을 잃기 쉽다.
하지만 우리에게는 Lightbox가 있다. (그리고 후속 버전인 Lightbox 2도 있다.) Lightbox는 이미지 뷰어에 필요한 전기능을 제공하는 자바스크립트 라이브러리다. 이미지는 웹 페이지 위에 깔끔한 "오버레이(overlay)"로 표시된다. 탐색, 이미지 제목과 설명, 직접 정의하는 버튼까지도 가능하다. 가장 간단한 형태의 Lightbox는 그림 1과 같다.
그림 1. 기본 Lightbox 뷰어
앞으로 보겠지만, Lightbox가 제공하는 기능과 설정은 그 범위가 훨씬 넓다.
Lightbox를 상세히 분석하기 전에 Lightbox가 제공하는 장점부터 살펴보자. 개인적으로 Lightbox가 좋다고 확신해도 동료나 상사나 친구를 설득하려면 조목조목 알아두는 편이 좋다. 게다가 특정한 도구나 기술을 선택하는 이유를 납득한 후 도구나 기술을 사용하는 태도가 도구 자체만 이해하려는 태도보다 더욱 중요하다.
Lightbox는 자바스크립트다
첫째, Lightbox는 자바스크립트다. 요즘 브라우저는 모두가 자바스크립트를 기본적으로 지원한다(예전 브라우저 몇몇도 자바스크립트를 지원한다). 즉, 대다수 사용자 브라우저가 갤러리 페이지를 문제 없이 표시한다는 뜻이다. 물론, 플래시(Flash)처럼 우수한 플러그인 도구도 있다. 하지만 자바스크립트는 모든 브라우저가 지원하므로 사용자가 (정상적인 상황에서) 특수한 컴포넌트를 내려받거나 브라우저를 건드릴 필요가 없다. 거의 모든 컴퓨터 사용자가 브라우저만 있으면 Lightbox 페이지를 원래 디자인 그대로 볼 수 있다.
Lightbox는 브라우저에 중립적이다
Lightbox는 그냥 자바스크립트가 아니라 교차 브라우저 자바스크립트다. 다시 말해 Lightbox는 요즘 나온 브라우저라면 어디서나 똑같이 돌아간다. IE, 사파리, 파이어폭스, 오페라 등 모두가 Lightbox 코드를 동일한 방식으로 처리한다. 즉, Lightbox로 만든 코드와 페이지는 특정한 브라우저나 운영체제를 요구하지 않는다. 따라서 더욱 많은 사용자가 문제 없이 사진을 볼 수 있다. 손자 손녀 사진을 보려던 할머니가 사진이 안 보인다고 전화해서 괴롭히지 않다. 멋지지 않은가?
Lightbox는 기존 라이브러리에 기반을 둔다
마지막으로, Lightbox는 두 가지 안정된 자바스크립트 라이브러리에 기반한다. 바로 Prototype과 Scriptaculous다. Prototype 라이브러리는 페이지와 객체를 조작하는 유틸리티 함수를 제공한다. Scriptaculous 라이브러리는 화면과 관련한 유틸리티 함수를 아주 많이 제공한다. 두 라이브러리 모두 충분한 테스트를 거쳤으며, 여러 해 동안 사용되었으며, (최근 브라우저에서 모두 돌아가는) 표준 자바스크립트를 사용한다. 즉, Lightbox는 똑같은 기능을 다시 개발하는 대신 (즉, 새로운 버그를 만드는 대신) 이미 검증된 탄탄한 코드에 기반을 둔다.
Lightbox 내려받고 "설치"하기
여느 자바스크립트 라이브러리와 마찬가지로, Lightbox 역시 설치는 간단하고 쉽다. 정확하게 다음 단계를 따르면 끝난다.
Lightbox 내려받기
아래 참고자료 절에서 "Lightbox 2 웹 사이트" 링크를 클릭하여 Lightbox 2 웹 사이트로 이동한다. 왼쪽 메뉴에서 "Download" 링크를 찾아 클릭한다. 그림 2는 Lightbox 다운로드 페이지다.
그림 2. Lightbox 다운로드 페이지
커다란 Lightbox 상자를 클릭하면 ZIP 파일을 내려받을 수 있다. ZIP 파일은 lightbox2.04.zip 또는 비슷한 이름이다(내려받는 버전에 따라 달라진다). 압축을 풀면 lightbox2/라는 폴더가 생긴다. 그림 3은 lightbox2/ 폴더 내용이다. 아주 간단하다.
그림 3. 내려받은 Lightbox 내용
Lightbox 파일을 웹 사이트로 올린다
 |
스크립트를 어느 디렉터리에 넣을까?
전통적으로는 모든 스크립트를 scripts/라는 디렉터리에 넣는다. 즉, Prototype 스크립트 경로는 scripts/prototype.js가 된다. 하지만 최근에는 스크립트 디렉터리 이름을 좀 더 구체적으로 명시하는 추세다. 즉, 자바스크립트는 js/ 디렉터리에 넣고, ASP.NET 스크립트는 asp/ 디렉터리에 넣는다. Lightbox는 후자를 따른다. 현재 사이트에서 모든 스크립트를 scripts/ 디렉터리에 넣었다면 코드를 손봐야 할지도 모른다.
| |
(사용할 이미지와 CSS를 포함하여) 모든 Lightbox 파일을 웹 사이트로 올린다. 다행스럽게도 Lightbox 원시 코드는 이미 웹 사이트 구조를 고려하여 디렉터리 구조를 정했다. images/, css/, js/ 같은 표준 디렉터리 이름을 사용하므로, 세 디렉터리와 내용물을 웹 사이트 루트로 올리면 모든 준비가 끝난다.
여기서 한 가지 주의할 사항이 있다. Lightbox ZIP 파일은 기본적으로 index.html 파일을 포함하는데, 이 index.html 파일을 사이트로 복사하지 않도록 조심한다. 자칫하면 원래 index.html 파일을 덮어쓴다. Lightbox에서 제공하는 index.html은 설치 단계를 설명하므로, 이 기사를 참조한다면 lightbox2/ 디렉터리에서 index.html을 지워버려도 좋다.
Lightbox 관련 파일 세 개를 참조한다
Lightbox 파일을 웹 사이트로 모두 올렸다면 이제 사용해도 좋다. 웹 페이지에서 Lightbox를 사용하려면 다음 자바스크립트 코드 세 줄을 추가한다.
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="js/lightbox.js"></script> |
Lightbox CSS 스타일시트를 포함하려면 또한 다음 코드를 추가한다.
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" /> |
각 스크립트와 시트를 좀 더 상세히 살펴보기 전에 간단한 작업 페이지부터 만들어보자.
간단한 예제 페이지 만들기
우선, 페이지 하나와 이미지 몇 개가 필요하다. Listing 1은 갤러리 페이지 HTML이다. 편집기에 HTML 코드를 직접 입력하거나, 복사해 붙여넣거나, (다운로드 절에서 제공하는) 예제 코드를 내려받는다(참고자료 참조).
Listing 1. 예제 이미지 갤러리 HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Image Gallery</title>
<link rel="stylesheet" href='css/gallery.css' type="text/css"
media="screen, projection" />
</head>
<body>
<h1>Image Gallery</h1>
<div id="page">
<div id="images">
<ul class="gallery">
<li><img src="img/photo01.jpg" alt="description" /></li>
<li><img src="img/photo02.jpg" alt="description" /></li>
<li><img src="img/photo03.jpg" alt="description" /></li>
<li><img src="img/photo04.jpg" alt="description" /></li>
<li><img src="img/photo05.jpg" alt="description" /></li>
<li><img src="img/photo06.jpg" alt="description" /></li>
<li><img src="img/photo07.jpg" alt="description" /></li>
<li><img src="img/photo08.jpg" alt="description" /></li>
<li><img src="img/photo09.jpg" alt="description" /></li>
<li><img src="img/photo10.jpg" alt="description" /></li>
<li><img src="img/photo11.jpg" alt="description" /></li>
<li><img src="img/photo12.jpg" alt="description" /></li>
<li><img src="img/photo13.jpg" alt="description" /></li>
<li><img src="img/photo14.jpg" alt="description" /></li>
<li><img src="img/photo15.jpg" alt="description" /></li>
<li><img src="img/photo16.jpg" alt="description" /></li>
<li><img src="img/photo17.jpg" alt="description" /></li>
<li><img src="img/photo18.jpg" alt="description" /></li>
<li><img src="img/photo19.jpg" alt="description" /></li>
<li><img src="img/photo20.jpg" alt="description" /></li>
</ul>
</div>
</div>
</body>
</html> |
Listing 2는 예제 페이지가 사용하는 CSS 스타일시트다.
Listing 2. 예제 이미지 갤러리용 CSS
*
{
border: 0;
margin: 0;
padding: 0;
}
body
{
background: #fff;
color: #777;
padding: 50px;
}
#page {
position: relative;
}
#images {
float: left;
width: 600px;
}
#details {
color: #000;
}
h1
{
background: inherit;
border-bottom: 1px dashed #ccc;
color: #933;
font: 32px Georgia, serif;
font-weight: bold;
margin: 0 0 20px;
padding: 0 0 15px;
text-align: center;
}
.gallery
{
width: 700px;
cursor: default;
list-style: none;
}
.gallery img
{
background: #fff;
border-color: #aaa #ccc #ddd #bbb;
border-style: solid;
border-width: 1px;
color: inherit;
padding: 2px;
vertical-align: top;
width: 100px;
height: 75px;
}
.gallery li
{
background: #eee;
border-color: #ddd #bbb #aaa #ccc;
border-style: solid;
border-width: 1px;
color: inherit;
display: inline;
float: left;
margin: 3px;
padding: 5px;
position: relative;
} |
HTML과 CSS 파일을 생성한 후 참고자료 절에서 이미지를 내려받는다. 그런 다음, 모든 파일을 웹 사이트로 올린다. 브라우저에서 웹 페이지를 보면 그림 4와 같다.
그림 4. Lightbox가 필요한 이미지 갤러리
Lightbox를 사용하기에 딱 좋은 페이지다. 이미지가 많고, 모든 이미지가 고화질이다. 모든 이미지를 크게 보여주면 좋겠지만, 페이지 공간이 충분하지 못하다.
갤러리 페이지에 Lightbox 추가하기
연습용 페이지를 준비했으니, 이제 앞서 언급한 스크립트 코드를 추가하자. 그런 다음, 몇 가지 간단한 단계만 따르면 실제 사이트에서 Lightbox 기능을 사용할 수 있다.
올바른 스크립트 참조하기
먼저, (예제 갤러리 페이지 등으로 이름 붙인) 연습용 페이지를 연다. Listing 3에서 보듯이, 페이지 상단 head 엘리먼트 내에 앞서 언급했던 세 줄을 추가한다.
Listing 3. 연습용 페이지에 Lightbox 스크립트 참조
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Image Gallery</title>
<link rel="stylesheet" href='css/gallery.css' type="text/css"
media="screen, projection" />
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="js/lightbox.js"></script>
</head>
<-- Rest of HTML ... --> |
위 세 줄(script)은 순서를 그대로 따라야 한다. 각 스크립트가 이전 스크립트 기능을 사용하므로 순서가 절대적으로 중요하다. 순서를 바꾸면 페이지에 오류가 뜬다. 따라서 Prototype, Scriptaculous, Lightbox 순서를 반드시 지킨다.
올바른 CSS 참조하기
이제 CSS 참조를 추가하자. 코드는 Listing 4를 참조한다.
Listing 4. 연습용 페이지에 Lightbox CSS 참조 추가하기
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Image Gallery</title>
<link rel="stylesheet" href='css/gallery.css' type="text/css"
media="screen, projection" />
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="js/lightbox.js"></script>
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
</head>
<-- Rest of HTML ... --> |
Lightbox가 스크립트라는 이유로 CSS가 필요하다는 사실을 간과하기 쉽다. 하지만 Lightbox CSS는 Lightbox에 표시되는 이미지 스타일을 제어한다. 그러므로 이 단계는 (간과하기 쉽지만) 매우 중요하다.
독자적인 시각 효과를 원한다면 Lightbox CSS를 마음대로 수정해도 좋다. 나중에도 언급하겠지만, 심지어 Lightbox와 같은 툴킷도 내용(XHTML)과 표현(CSS)과 동작(자바스크립트)을 분리함으로써 상당한 유연성을 제공한다는 사실에 주목한다.
|
MVC(Model-View-Controller)
내용, 표현, 동작을 분리하는 구현 방식으로 MVC(Model-View-Controller) 아키텍처라고 부른다. 웹 페이지와 기업 응용 프로그램에 가장 적합한 프로그래밍 아키텍처다. MVC 아키텍처는 각 부분을 독립적으로 관리하고 조정한다는 장점이 있다. 자료는 형식과 독립적이다. 기능은 자료와 독립적이다. 기사 후반에서 페이지 모양을 손쉽게 조정하는 이유가 바로 MVC 아키텍처 덕분이다. | |
예제 디렉터리에 Lightbox 파일 복사하기
이 단계 역시 간과하기 쉽다. Lightbox 스크립트와 CSS를 예제 이미지 갤러리와 같은 디렉터리에 넣는다. 갤러리를 내려받아 기존 사이트에 올렸다면, Lightbox 파일도 같은 위치에 올린다. 개인 컴퓨터에서 작업한다면 Lightbox scripts/, css/, images/ 디렉터리를 이미지 갤러리 파일과 같은 디렉터리로 복사한다.
갤러리 이미지에 링크 추가하기
Lightbox는 a 엘리먼트를 사용한다. 따라서 Lightbox 기능을 사용하기 전에 페이지 내 각 이미지를 a 태그로 감싼다. 일반적으로 href 속성 값은 이미지 이름을 지정한다. 그러면 a 링크를 클릭했을 때 이미지가 원래 크기로 표시된다.
Listing 5는 a 태그를 추가한 HTML 코드다.
Listing 5. 각 이미지에 링크 추가하기
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Image Gallery</title>
<link rel="stylesheet" href='css/gallery.css' type="text/css"
media="screen, projection" />
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="js/lightbox.js"></script>
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
</head>
<body>
<h1>Image Gallery</h1>
<div id="page">
<div id="images">
<ul class="gallery">
<a href="img/photo01.jpg">
<li><img src="img/photo01.jpg" alt="description" /></li>
</a>
<a href="img/photo02.jpg">
<li><img src="img/photo02.jpg" alt="description" /></li>
</a>
<a href="img/photo03.jpg">
<li><img src="img/photo03.jpg" alt="description" /></li>
</a>
<a href="img/photo04.jpg">
<li><img src="img/photo04.jpg" alt="description" /></li>
</a>
<a href="img/photo05.jpg">
<li><img src="img/photo05.jpg" alt="description" /></li>
</a>
<a href="img/photo06.jpg">
<li><img src="img/photo06.jpg" alt="description" /></li>
</a>
<a href="img/photo07.jpg">
<li><img src="img/photo07.jpg" alt="description" /></li>
</a>
<a href="img/photo08.jpg">
<li><img src="img/photo08.jpg" alt="description" /></li>
</a>
<a href="img/photo09.jpg">
<li><img src="img/photo09.jpg" alt="description" /></li>
</a>
<a href="img/photo10.jpg">
<li><img src="img/photo10.jpg" alt="description" /></li>
</a>
<a href="img/photo11.jpg">
<li><img src="img/photo11.jpg" alt="description" /></li>
</a>
<a href="img/photo12.jpg">
<li><img src="img/photo12.jpg" alt="description" /></li>
</a>
<a href="img/photo13.jpg">
<li><img src="img/photo13.jpg" alt="description" /></li>
</a>
<a href="img/photo14.jpg">
<li><img src="img/photo14.jpg" alt="description" /></li>
</a>
<a href="img/photo15.jpg">
<li><img src="img/photo15.jpg" alt="description" /></li>
</a>
<a href="img/photo16.jpg">
<li><img src="img/photo16.jpg" alt="description" /></li>
</a>
<a href="img/photo17.jpg">
<li><img src="img/photo17.jpg" alt="description" /></li>
</a>
<a href="img/photo18.jpg">
<li><img src="img/photo18.jpg" alt="description" /></li>
</a>
<a href="img/photo19.jpg">
<li><img src="img/photo19.jpg" alt="description" /></li>
</a>
<a href="img/photo20.jpg">
<li><img src="img/photo20.jpg" alt="description" /></li>
</a>
</ul>
</div>
</div>
</body>
</html> |
각 이미지에 Lightbox 연결하기
마지막 단계는 간단하다. 각 a 엘리먼트에 새로운 속성 rel을 추가한다. 값은 lightbox로 지정한다. 즉, Lightbox에 표시하려는 이미지 링크에 rel="lightbox" 속성만 추가하면 그만이다. Listing 6은 새로운 속성을 추가한 HTML 페이지다.
Listing 6. 각 이미지에 링크 추가하기
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Image Gallery</title>
<link rel="stylesheet" href='css/gallery.css' type="text/css"
media="screen, projection" />
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="js/lightbox.js"></script>
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
</head>
<body>
<h1>Image Gallery</h1>
<div id="page">
<div id="images">
<ul class="gallery">
<a href="img/photo01.jpg" rel="lightbox">
<li><img src="img/photo01.jpg" alt="description" /></li>
</a>
<a href="img/photo02.jpg" rel="lightbox">
<li><img src="img/photo02.jpg" alt="description" /></li>
</a>
<a href="img/photo03.jpg" rel="lightbox">
<li><img src="img/photo03.jpg" alt="description" /></li>
</a>
<a href="img/photo04.jpg" rel="lightbox">
<li><img src="img/photo04.jpg" alt="description" /></li>
</a>
<a href="img/photo05.jpg" rel="lightbox">
<li><img src="img/photo05.jpg" alt="description" /></li>
</a>
<a href="img/photo06.jpg" rel="lightbox">
<li><img src="img/photo06.jpg" alt="description" /></li>
</a>
<a href="img/photo07.jpg" rel="lightbox">
<li><img src="img/photo07.jpg" alt="description" /></li>
</a>
<a href="img/photo08.jpg" rel="lightbox">
<li><img src="img/photo08.jpg" alt="description" /></li>
</a>
<a href="img/photo09.jpg" rel="lightbox">
<li><img src="img/photo09.jpg" alt="description" /></li>
</a>
<a href="img/photo10.jpg" rel="lightbox">
<li><img src="img/photo10.jpg" alt="description" /></li>
</a>
<a href="img/photo11.jpg" rel="lightbox">
<li><img src="img/photo11.jpg" alt="description" /></li>
</a>
<a href="img/photo12.jpg" rel="lightbox">
<li><img src="img/photo12.jpg" alt="description" /></li>
</a>
<a href="img/photo13.jpg" rel="lightbox">
<li><img src="img/photo13.jpg" alt="description" /></li>
</a>
<a href="img/photo14.jpg" rel="lightbox">
<li><img src="img/photo14.jpg" alt="description" /></li>
</a>
<a href="img/photo15.jpg" rel="lightbox">
<li><img src="img/photo15.jpg" alt="description" /></li>
</a>
<a href="img/photo16.jpg" rel="lightbox">
<li><img src="img/photo16.jpg" alt="description" /></li>
</a>
<a href="img/photo17.jpg" rel="lightbox">
<li><img src="img/photo17.jpg" alt="description" /></li>
</a>
<a href="img/photo18.jpg" rel="lightbox">
<li><img src="img/photo18.jpg" alt="description" /></li>
</a>
<a href="img/photo19.jpg" rel="lightbox">
<li><img src="img/photo19.jpg" alt="description" /></li>
</a>
<a href="img/photo20.jpg" rel="lightbox">
<li><img src="img/photo20.jpg" alt="description" /></li>
</a>
</ul>
</div>
</div>
</body>
</html> |
Lightbox 동작 확인하기
마지막으로, HTML 페이지를 저장한 후 이미지 갤러리를 다시 로드한다. 갤러리에서 이미지를 클릭하면 Lightbox에 이미지가 원래 크기로 멋지게 열린다. 그림 5는 파이어폭스에서 이미지를 클릭한 모습이다.
그림 5. Lightbox를 사용하는 이미지 갤러리
클릭한 이미지가 멋진 상자로 명확하게 표시된다. 나머지 페이지는 어두운 색으로 변하면서 이미지 상자를 부각시킨다. 또한 여기서 "Close" 버튼을 클릭하면 전체 갤러리로 돌아간다.
이미지를 그룹으로 묶기
"기본" Lightbox도 멋지지만, Lightbox가 제공하는 기능은 이외에도 많다. 가장 유용한 기능이 사진을 그룹으로 묶는 기능이다. 예를 들어, 예제 갤러리에서 다음 사진을 보려면, 현재 사진을 닫고 다음 사진을 클릭해야 한다. 하지만 이 방식은 별로 갤러리답지 못하다. 진짜 갤러리라면 다음 사진으로 바로 이동할 수 있다. 다행스럽게도 Lightbox 역시 비슷한 기능을 제공한다.
사진을 그룹으로 묶기
사진을 그룹으로 묶으려면 rel="lightbox"에 그룹 이름을 추가한다. 사각 괄호([ ])에 그룹 이름을 넣은 후 lightbox 바로 뒤에 첨부한다. 우리 예제에서 모든 이미지를 "gallery"라는 그룹으로 묶어보자. Listing 7은 필요한 부분을 변경한 HTML 코드다.
Listing 7. 페이지 내 모든 사진을 그룹으로 묶기
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Image Gallery</title>
<link rel="stylesheet" href='css/gallery.css' type="text/css"
media="screen, projection" />
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="js/lightbox.js"></script>
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
</head>
<body>
<h1>Image Gallery</h1>
<div id="page">
<div id="images">
<ul class="gallery">
<a href="img/photo01.jpg" rel="lightbox[gallery]">
<li><img src="img/photo01.jpg" alt="description" /></li>
</a>
<a href="img/photo02.jpg" rel="lightbox[gallery]">
<li><img src="img/photo02.jpg" alt="description" /></li>
</a>
<a href="img/photo03.jpg" rel="lightbox[gallery]">
<li><img src="img/photo03.jpg" alt="description" /></li>
</a>
<a href="img/photo04.jpg" rel="lightbox[gallery]">
<li><img src="img/photo04.jpg" alt="description" /></li>
</a>
<a href="img/photo05.jpg" rel="lightbox[gallery]">
<li><img src="img/photo05.jpg" alt="description" /></li>
</a>
<a href="img/photo06.jpg" rel="lightbox[gallery]">
<li><img src="img/photo06.jpg" alt="description" /></li>
</a>
<a href="img/photo07.jpg" rel="lightbox[gallery]">
<li><img src="img/photo07.jpg" alt="description" /></li>
</a>
<a href="img/photo08.jpg" rel="lightbox[gallery]">
<li><img src="img/photo08.jpg" alt="description" /></li>
</a>
<a href="img/photo09.jpg" rel="lightbox[gallery]">
<li><img src="img/photo09.jpg" alt="description" /></li>
</a>
<a href="img/photo10.jpg" rel="lightbox[gallery]">
<li><img src="img/photo10.jpg" alt="description" /></li>
</a>
<a href="img/photo11.jpg" rel="lightbox[gallery]">
<li><img src="img/photo11.jpg" alt="description" /></li>
</a>
<a href="img/photo12.jpg" rel="lightbox[gallery]">
<li><img src="img/photo12.jpg" alt="description" /></li>
</a>
<a href="img/photo13.jpg" rel="lightbox[gallery]">
<li><img src="img/photo13.jpg" alt="description" /></li>
</a>
<a href="img/photo14.jpg" rel="lightbox[gallery]">
<li><img src="img/photo14.jpg" alt="description" /></li>
</a>
<a href="img/photo15.jpg" rel="lightbox[gallery]">
<li><img src="img/photo15.jpg" alt="description" /></li>
</a>
<a href="img/photo16.jpg" rel="lightbox[gallery]">
<li><img src="img/photo16.jpg" alt="description" /></li>
</a>
<a href="img/photo17.jpg" rel="lightbox[gallery]">
<li><img src="img/photo17.jpg" alt="description" /></li>
</a>
<a href="img/photo18.jpg" rel="lightbox[gallery]">
<li><img src="img/photo18.jpg" alt="description" /></li>
</a>
<a href="img/photo19.jpg" rel="lightbox[gallery]">
<li><img src="img/photo19.jpg" alt="description" /></li>
</a>
<a href="img/photo20.jpg" rel="lightbox[gallery]">
<li><img src="img/photo20.jpg" alt="description" /></li>
</a>
</ul>
</div>
</div>
</body>
</html> |
Lightbox 갤러리 보기
Listing 7을 저장한 후 갤러리 페이지를 다시 로드한다. 그림 6은 사진을 클릭한 모습이다.
그림 6. 사진 20개를 그룹으로 묶은 후 첫 번째 사진을 선택한 모습
언뜻 보기에는 별다른 차이가 없다. 하지만 자세히 살펴보면 차이가 보인다. 첫째, 이미지에 번호가 매겨져 이미지 바로 아래 "Image 1 of 20"라는 문구가 표시된다.
이제 현재 사진 위로 마우스를 옮겨보자. 그러면 "NEXT" 버튼이 표시된다. 그룹에서 첫 번째 사진이 아니라면 "PREV" 버튼도 표시된다. "PREV" 버튼이나 "NEXT" 버튼을 클릭하면 그룹 내에서 이전 사진과 다음 사진으로 이동한다. 그림 7은 NEXT 버튼이 표시된 모습이다.
그림 7. 그룹 내에서 이전 사진과 다음 사진으로 이동하기 쉽다.
한 페이지에서 여러 갤러리 만들기
한 페이지 안에 원하는 수만큼 그룹을 다양하게 만들어도 괜찮다. rel="lightbox" 속성에 그룹 이름을 다르게 지정하면 그만이다. 물과 관련한 사진을 한 그룹으로, 사람과 관련한 사진을 다른 그룹으로 묶어도 좋다.
하지만 그룹을 남용하지 않도록 주의한다. 사진사나 사이트 디자이너 입장에서는 그룹이 분명하게 나뉠지 모르지만, 그래서 차이가 드러나도록 페이지를 디자인할지도 모르지만, 일반 사용자가 보기에는 별다른 차이가 없을지도 모른다. 자칫하면 사용자에게 혼란만 일으킨다. 왜 사진이 모두 표시되지 않지? 어째서 이 사진은 NEXT 버튼이 있고 저 사진은 NEXT 버튼이 없지? 할 수 있다.
사용자에게 혼란을 일으킬지도 모른다는 의심이 든다면 페이지 내 모든 이미지를 한 그룹으로 묶는 편이 가장 좋다.
사진에 설명 추가하기(중요하다!)
Lightbox가 제공하는 또 다른 멋진 기능이라면, 이미지에 정보를 추가하고 표시하는 기능이다. 갤러리에서 사진 아래 설명문을 추가하듯이, 온라인 이미지에도 제목을 추가할 수 있다.
"a" 엘리먼트에 제목 속성 추가하기
앞서 각 이미지를 a 엘리먼트로 감쌌다. 바로 이 a 엘리먼트가 Lightbox로 정보를 제공하는 기본 수단이다. 이미지를 lightbox로 표시하겠다는 사실과 그룹으로 묶겠다는 사실을 모두 a 엘리먼트 속성으로 전달한다. 비슷한 방식으로 이미지에 추가할 제목도 전달한다.
a 엘리먼트에 title 속성을 추가한 후 이미지 제목을 지정한다. Listing 8은 몇몇 이미지에 제목을 지정한 HTML 코드다.
Listing 8. 이미지에 제목 추가하기(a 엘리먼트 사용)
<div id="page">
<div id="images">
<ul class="gallery">
<a href="img/photo01.jpg" rel="lightbox[gallery]" title="Sunrise over the bay">
<li><img src="img/photo01.jpg" alt="description" /></li>
</a>
<a href="img/photo02.jpg" rel="lightbox[gallery]" title="Birds scattering at dusk">
<li><img src="img/photo02.jpg" alt="description" /></li>
</a>
<a href="img/photo03.jpg" rel="lightbox[gallery]"
title="Rock balanced precariously on rock">
<li><img src="img/photo03.jpg" alt="description" /></li>
</a>
<a href="img/photo04.jpg" rel="lightbox[gallery]"
title="I saw men as trees walking...">
<li><img src="img/photo04.jpg" alt="description" /></li>
</a>
<-- etc... -->
</ul>
</div>
</div> |
이미지 제목 보기
이제 페이지를 다시 로드한다. 이미지를 클릭하면 이미지 제목이 그룹 정보 바로 위에 굵은 글씨로 표시된다. 그림 8은 갤러리에서 네 번째 이미지를 클릭한 모습이다.
그림 8. Lightbox에서 제목을 표시한 모습
Lightbox 제목은 추가 이미지 정보다
이미지의 Lightbox에 추가하는 제목은 Lightbox에만 해당한다는 사실에 주의한다. 갤러리 페이지의 이미지에는 전혀 영향을 미치지 않는다. 갤러리 페이지의 이미지에 제목을 추가하려면 img 엘리먼트를 수정한다. 흔히 저지르는 실수 하나가 여기서 기인한다. img 엘리먼트 내 alt 속성은 Lightbox에 표시되는 이미지와 전혀 상관이 없다. 올바른 방식인지 아닌지 논란의 여지는 있지만, 현재 동작하는 방식이 이렇다.
이런 방식을 취하는 이유는 Lightbox를 가능한 독립적으로 유지하기 위해서다. 그래서 이미지에 alt 속성으로 간단한 설명을 추가하거나 longdesc 속성으로 긴 설명을 추가해도 Lightbox가 사용하는 제목에는 영향을 미치지 않는다. 사실 모든 이미지에 alt 속성을 추가하는 편이 좋다. XHTML은 페이지 내 모든 이미지에 alt 속성을 요구하기 때문이다.
기본 Lightbox UI 속성 변경하기
지금까지는 "표준" Lightbox를 살펴보았다. 하지만 Lightbox CSS와 이미지를 조작할 의향만 있다면 아주 다양한 UI가 가능하다.
Lightbox CSS 변경하기
Lightbox 출력 모양은 전적으로 lightbox.css라는 CSS 파일에서 제어한다는 사실을 명심한다. CSS는 일반 텍스트 파일이므로 아무 편집기에서나 파일을 열어 수정할 수 있다. Listing 9에서 보듯이, 별로 복잡하지도 않다.
Listing 9. Lightbox CSS
#lightbox{ position: absolute; left: 0; width: 100%; z-index: 100;
text-align: center; line-height: 0;}
#lightbox img{ width: auto; height: auto;}
#lightbox a img{ border: none; }
#outerImageContainer{ position: relative; background-color: #fff;
width: 250px; height: 250px; margin: 0 auto; }
#imageContainer{ padding: 10px; }
#loading{ position: absolute; top: 40%; left: 0%; height: 25%; width: 100%;
text-align: center; line-height: 0; }
#hoverNav{ position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 10; }
#imageContainer>#hoverNav{ left: 0;}
#hoverNav a{ outline: none;}
#prevLink, #nextLink{ width: 49%; height: 100%;
background-image: url(data:image/gif;base64,AAAA);
/* Trick IE into showing hover */ display: block; }
#prevLink { left: 0; float: left;}
#nextLink { right: 0; float: right;}
#prevLink:hover, #prevLink:visited:hover {
background: url(../images/prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover {
background: url(../images/nextlabel.gif) right 15% no-repeat; }
#imageDataContainer{ font: 10px Verdana, Helvetica, sans-serif; background-color: #fff;
margin: 0 auto; line-height: 1.4em; overflow: auto; width: 100%; }
#imageData{ padding:0 10px; color: #666; }
#imageData #imageDetails{ width: 70%; float: left; text-align: left; }
#imageData #caption{ font-weight: bold; }
#imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em; }
#imageData #bottomNavClose{ width: 66px; float: right;
padding-bottom: 0.7em; outline: none;}
#overlay{ position: absolute; top: 0; left: 0; z-index: 90; width: 100%;
height: 500px; background-color: #000; } |
CSS 파일에 정의된 속성은 어느 값이든 변경해도 좋다. 예를 들어, 다음과 같은 갤러리를 원한다고 가정하자.
- 사진은 검은색 배경으로 표시한다.
- 사진 설명도 검은색 배경으로 표시한다. 글자는 흰색으로 표시한다.
- 이미지 설명은 Times New Roman 12pt를 사용한다.
- 나머지 페이지는 기본 설정보다 좀 더 밝은 회색으로 어둡게 만든다.
위와 같은 변경이 모두 가능하다. Listing 10은 상기 규칙에 맞춰 lightbox.css를 수정한 모습이다.
Listing 10. 수정한 Lightbox CSS
#lightbox{ position: absolute; left: 0; width: 100%; z-index: 100;
text-align: center; line-height: 0;}
#lightbox img{ width: auto; height: auto;}
#lightbox a img{ border: none; }
#outerImageContainer{ position: relative; background-color: #000;
width: 250px; height: 250px; margin: 0 auto; }
#imageContainer{ padding: 10px; }
#loading{ position: absolute; top: 40%; left: 0%; height: 25%; width: 100%;
text-align: center; line-height: 0; }
#hoverNav{ position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 10; }
#imageContainer>#hoverNav{ left: 0;}
#hoverNav a{ outline: none;}
#prevLink, #nextLink{ width: 49%; height: 100%;
background-image: url(data:image/gif;base64,AAAA);
/* Trick IE into showing hover */ display: block; }
#prevLink { left: 0; float: left;}
#nextLink { right: 0; float: right;}
#prevLink:hover, #prevLink:visited:hover {
background: url(../images/prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover {
background: url(../images/nextlabel.gif) right 15% no-repeat; }
#imageDataContainer{ font: 12px Times New Roman; background-color: #000;
margin: 0 auto; line-height: 1.4em; overflow: auto; width: 100%; }
#imageData{ padding:0 10px; color: #fff; }
#imageData #imageDetails{ width: 70%; float: left; text-align: left; }
#imageData #caption{ font-weight: bold; }
#imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em; }
#imageData #bottomNavClose{ width: 66px; float: right;
padding-bottom: 0.7em; outline: none;}
#overlay{ position: absolute; top: 0; left: 0; z-index: 90; width: 100%;
height: 500px; background-color: #666; } |
lightbox.css를 Listing 10과 같이 수정한 후 저장한다(원본을 따로 복사해두어도 좋겠다). 그런 다음, 페이지를 다시 로드한 후 이미지를 클릭한다. 그림 9는 이미지를 클릭한 모습이다.
그림 9. 수정한 Lightbox -- 배경이 검다.
Lightbox 이미지 변경하기
위 Lightbox는 눈에 거슬리는 부분이 하나 있다. 바로 CLOSE 버튼이다. 검은색 바탕에 흰색 버튼이 어색하다. NEXT 버튼과 PREV 버튼도 마찬가지다. 검은색 바탕에 흰색 글씨라는 전반적인 색상 체계와 어울리지 않는다. 다행스럽게도 Lightbox 이미지를 변경하는 방법이 있다. 먼저, 포토샵 엘리먼트(Photoshop Element)나 오픈 소스 GIMP 같은 도구로 원하는 버튼을 생성한다.
그림 10은 아주 간단하게 수정한 CLOSE 버튼이다. 그림 11은 PREV 버튼, 그림 12는 NEXT 버튼이다.
그림 10. 수정한 CLOSE 버튼
그림 11. 수정한 PREV 버튼
그림 12. 수정한 NEXT 버튼
아래 다운로드 절에서 예제 갤러리를 내려받으면 위 이미지도 들어있다. CLOSE 버튼은 closelabel.gif, PREV 버튼은 prelabel.gif, NEXT 버튼은 nextlabel.gif다. Lightbox와 자바스크립트와 CSS에서 이 이름을 참조하므로 이름을 변경하지 않도록 주의한다.
위에서 소개한 버튼은 아주 간단하다. 원한다면 멋진 버튼을 직접 만들어도 좋다(단 번쩍거리는 버튼은 피하자. 끔찍한 <BLINK /> 태그와 너무 비슷한 방식이기 때문이다). 어쨌거나 새 이미지를 만들었다면 Lightbox 이미지 디렉터리로 복사하여 기존 버튼 이미지를 덮어쓴다.
그런 다음, 갤러리를 다시 로드한 후 이미지를 클릭한다. 그림 13은 수정한 Lightbox 모습이다.
그림 13. 사용자 정의 버튼을 사용하는 Lightbox
이미지 외에도 색상, 크기, 이미지 주위에 텍스트를 배치하는 방식, Lightbox 위치 등 무엇이나 마음먹은 대로 바꿀 수 있다. 표현 계층이 CSS로 깔끔하게 분리되어 있으므로 HTML 코드를 전혀 변경하지 않고도 인터페이스를 쉽게 변경할 수 있다.
결론
자칫하면 Lightbox를 정말 간단한 작업에 사용되는 단순한 웹 위젯이나 자바스크립트 라이브러리로 취급하기 십상이다. 하지만 모든 웹 디자인은 사용자에게 초점을 맞추어야 마땅하다. 사용자 입장에서 Lightbox는 혁신적이고, 단순하고, 손쉽게 사진을 보여준다. 애니매이션이 열리면서 사진을 표시하는 방식도 멋지다. 이미지를 로드하면서 진행 상태도 표시한다. 이미지를 탐색하는 방식이 직관적이고 (원래 HTML에) 독립적이다. 이 모두가 사용자에게 멋진 경험을 선사한다. 그래서 사용자가 웹에서 사진을 보면서 오랜 시간을 보낸다.
게다가 Lightbox는 모든 브라우저에서 돌아간다. 이는 사이트 개발자나 디자이너에게 특히 중요한 사실이다. 사용자에게 플래시 플러그인을 내려받으라고 요청할 필요가 없다. IE에서 안쪽 여백(padding)이 문제를 일으키는지 바깥쪽 여백(margin)이 문제를 일으키는지 밝혀내느라 시간을 소모할 필요도 없다. 이 모두가 더 나은 웹 사이트, 더 나은 화면, 행복한 사용자로 이어진다.
마지막으로, Lightbox를 개발자 나름대로 변경하는 정도에는 한계가 없다. 색상 체계, 이미지 배치 방식, 이미지 위치 등을 마음대로 바꿔도 좋다. 버튼을 직접 만들거나 기존 버튼을 변경해도 좋다. Lightbox의 배경 화면 색깔을 변경해도 괜찮다. 여기에 이미지를 그룹으로 묶는 기능, 이미지에 제목을 추가하는 기능까지 더하면 아주 강력한 웹 개발 도구가 갖춰진다.
다운로드 하십시오
| 설명 |
이름 |
크기 |
다운로드 방식 |
| 이미지 갤러리의 초기 버전 |
examples-initial.zip |
284KB |
HTTP |
| 이미지 갤러리의 완성판 |
examples-final.zip |
391KB |
HTTP |
참고자료
교육
- Ajax로 이미지 뷰어를 만드는 developerWorks 기사 연재물 Part 1과 Part 2를 읽어본다. 개발자나 디자이너가 인터페이스를 변경할 여지가 많으며 Lightbox와 비슷한 경험을 선사하는 이미지 뷰어다.
- Prototype은 Lightbox에 핵심적인 기반 API다. Prototype으로 "스무고개" 응용 프로그램을 만드는 developerWorks 기사 연재 Part 1과 Part 2를 읽어본다.
제품 및 기술 얻기
- Lightbox 2 웹 사이트: Lightbox 2를 내려받는다.
- Lightbox 2 내려받기: 위 사이트에 문제가 있다면 여기서 Lightbox 2를 내려받는다.
- Head First Ajax(Rebecca Riordan, O'Reilly Media, Inc.): Ajax를 심도 있게 다룬다. 화면 효과와 사용자 휴지 상태를 다루는 다양한 클라이언트/서버 기술도 소개한다.
- Java and XML, Third Edition(Brett McLaughlin, Justin Edelson, O'Reilly Media, Inc.): XML, XSL, XML 명세 등 XML을 처음부터 끝까지 종합적으로 다룬다.
토론
필자소개
|
|
|
Brett McLaughlin은 베스트셀러 논픽션 작가다. 컴퓨터 프로그래밍, 가정 극장 시스템, 분석과 설계에 관한 책을 여러 권 집필했으며, 그의 책은 10만 부 이상이나 팔렸다. 거의 10년 넘게 기술 서적을 집필하고 편집하고 출판했다. 그래서 기타 치기, 두 아들 쫓아다니기, 아내와 못말리는 패밀리(Arrested Development) 재방송을 보며 웃기 만큼이나 문서 편집기에도 능숙하다. 가장 최근에 출간한 책 Head First Object Oriented Analysis and Design은 2007년 Jolt Technical Book 상을 받았다. 고전인 Java and XML은 자바 언어에서 XML 기술을 사용하는 방법을 소개하는 가장 권위 있는 책 중 하나로 인정받는다.
|
|
|
|
|
|
|
|
|
|
* 관련 댓글 한말씀 부탁합니다.
|
|
|
|
