 |
|
|
난이도 : 초급
Jack D Herrington, Senior Software Engineer, Leverage Software Inc.
2007 년 11 월 06 일
모든 것이 놀랍고 매력적인 요즘, 사용자들의 관심을 끌기란 어려운 일입니다. Ajax 툴과 Lightbox, 팝업, 윈도우, 페이딩(fading) 메시지 같은 새로운 기술을 사용하여 사용자의 관심을 끌어봅시다.
여러분도 한번쯤은 들어봤을 수도 있는 이야기인데, USD100 (100 U.S. 달러)가 의자 밑에 붙어있고, 그 사람은 데스크탑 애플리케이션을 사용하고 있었다. 애플리케이션의 상태 바에서는, "당신의 의자 밑에 100달러가 붙어있다."라고 쓰여있었다. 그 돈은 어떤 누구도 찾지 못했으며, 이것은 상태 바가 사람들의 관심을 끌기에 얼마나 빈약한지, 그리고 요즘 사람들의 관심을 끄는 것이 얼마나 어려운지를 증명하고 있다.
이 글에서는 PHP , Dynamic HTML (DHTML), Asynchronous JavaScript™ + XML (Ajax) 같은 기술들을 사용하여 사용자의 관심을 끌 수 있는 콘텐트를 만드는 방법을 설명한다.
툴팁(Tooltip)
브 라우저에 상태 바를 설정하는 것은 쉬운 일이지만, 툴팁이 나타나게 하는 것은 조금 더 어려운 일이다. 이를 쉽게 하기 위해 웹에서 사용할 수 있는 툴팁 라이브러리를 적용하여 Prototype.js JavaScript 라이브러리를 기반으로 구현했다. Listing 1은 이러한 툴팁용 코드 모습이다.
Listing 1. index.html
<html>
<head>
<script src="prototype.js" type="text/javascript"></script>
<script src="tooltip.js" type="text/javascript"></script>
<style>
body { font-family: arial,verdana; }
.popup { padding:10px; border:1px solid #ccc;
background:#eee; width:250px; font-size: small; }
</style>
</head>
<body>
<div id="book1">Code Generation In Action</div>
<div id="popup1" class="popup">
</div>
</body>
<script type="text/javascript">
new Ajax.Updater( 'popup1', 'text.php' );
new Tooltip('book1', 'popup1')
</script>
</html>
|
이 페이지는 Ajax 호출을 사용하여 Prototype.js 라이브러리에서 Ajax.Updater 클래스를 사용함으로써, 툴팁의 콘텐트를 업데이트 한다. 그리고 나서, 툴팁 라이브러리가 제공하는 Tooltip 클래스를 사용하여 툴팁을 book1 <div>에 할당한다.
Listing 2는 툴팁의 콘텐트용 코드를 보여준다.
Listing 2. text.php
An excellent book on code generation and generative programming
by Jack Herrington.
|
이제, 필자의 브라우저에 페이지를 가져오면, 그림 1과 같은 모습이 된다.
그림 1. 마우스를 작동하기 전의 텍스트
마우스를 움직이면, 그림 2에서처럼, 작은 팝업 창이 생긴다.
그림 2. 팝업 창
툴 팁은 페이지를 어지럽히지 않고 사용자에게 콘텐트를 온 디맨드 방식으로 제공할 수 있는 쉬운 방법이다. 사용자가 더 많은 것을 알고자 할 때, 마우스를 대면 상세한 내용을 보여준다. 상세한 내용에는 이미지, 테이블, 포맷팅 등 약간 복잡해 질 수 있다.
Lightboxes
라 이트박스는 페이지 상의 특정 엘리먼트로 독자들의 관심을 끌 수 있는 가장 참신하고 효과적인 방법이다. 아래 예제의 경우, 페이지에 이미지 썸네일(thumbnail)이 있고, 사용자가 이것을 클릭하면, "라이트박스"에서 더 큰 그림이 보여진다.
이러한 효과를 나타내기 위해, Lightbox JS 2.0 라이브러리를 사용한다. 이것 역시 Prototype.js 프레임웍을 기반으로 한다. Listing 3은 예제 코드이다.
Listing 3. index.html
<html>
<head>
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
<script src="js/prototype.js" type="text/javascript"></script>
<script src="js/scriptaculous.js?load=effects" type="text/javascript"></script>
<script src="js/lightbox.js" type="text/javascript"></script>
</head>
<body>
<a href="images/megan1_400_320.jpg" rel="lightbox">
<img src="images/megan1_400_320.jpg" width="100" height="80"
alt="Megan" border="0" /></a>
</body>
</html>
|
페이지를 검색할 때, 그림 3과 같이 단순한 썸네일만 보인다.
그림 3. 클릭하기 전의 이미지
하지만, 이 그림을 클릭하면, 온전한 크기의 이미지가 창 중앙에 디스플레이 된다. (그림 4)
그림 4. 원래 크기의 이미지의 라이트박스
더욱이, 백그라운드의 모든 머터리얼이 흐려지기 때문에, 필자는 디스플레이 중앙에 있는 콘텐트에 더욱 집중할 수 있다.
라이트박스라는 용어에 익숙하지 않아도 문제 없다. 이것은 사진 계통에 사용되는 용어이기 때문이다. 필름 사진 시절로 거슬러 올라가면, 라이트박스라 고 하는 장치는 문자 그대로 6인치 깊이의 박스였고, 양 옆에 두 개의 발이 있고, 위에는 투명한 흰색 플라스틱이 있었다. 박스 중앙에 빛은 표면에 빛을 공급했다. 따라서, 라이트박스에 슬라이드나 네거티브를 주고, 돋보기 안경 같은 루페(loupe)를 사용하여 각 이미지를 관찰했다. 그림 4의 라이트박스를 라이트박스에서 루페를 통해 보는 사진으로 생각해도 된다.
하지만 이미지가 아닌 텍스트를 강조하고 싶을 때는 어떻게 하겠는가?
텍스트 라이트박스
라이트박스 개념에 대한 변형은 Particle Tree라고 하는 사이트에서 이루어졌다. 서버에서, Ajax를 사용하여 파견된 임의의 HTML 코드를 디스플레이 할 수 있다는 장점이 있다. 필자는 이것을 사용하여 추가 텍스트를 사용자에게 디스플레이 한다.
Listing 4는 메인 페이지 코드 모습이다.
Listing 4. index.html
<html>
<head>
<title>
Lightbox Text Test
</title>
<link rel="stylesheet" href="css/default.css" media="screen,projection" type="text/css" />
<link rel="stylesheet" href="css/lightbox.css" media="screen,projection"
type="text/css" />
<script type="text/javascript" src="scripts/prototype.js"></script>
<script type="text/javascript" src="scripts/lightbox.js"></script>
</head>
<body>
<a href="text.php" class="lbOn">More About This Article</a>
</body>
</html>
|
Listing 5에서, Ajax가 보내서 디스플레이 하는 HTML 코드를 볼 수 있다.
Listing 5. text.php
<p>This article covers the basics of AJAX Lightbox that
shows text blocks instead of images</p>
<p><a href="#" class="lbAction" rel="deactivate">
Return to article list</a></p>
|
브라우저에 코드를 가져오면 그림 5와 같은 모습이 된다.
그림 5. 자세한 정보를 보기 위해 클릭할 수 있는 텍스트
텍스트를 클릭하면, 라이트박스에 페이지 콘텐트가 보인다. (그림 6)
그림 6. 텍스트 라이트박스 실행 모습
이 것은 사용자가 페이지를 이동하지 않고 페이지에 리스팅 된 제품이나 아티클에 대한 추가 자료들을 제공할 수 있는 좋은 방법이다. 대신, 여러분이 간접적으로 사용자들의 주의를 제공하고자 하는 콘텐트로 이끌어야 한다. 여느 HTML 코드와 마찬가지로, 이것은 텍스트 콘텐트, 이미지, 심지어는 등록, 코멘트, 로그인 폼 같은 폼도 될 수 있다.
윈도우(Window)
이 전 예제에서 폼에 라이트박스를 사용하는 것에 대해 언급했지만, 이것은 사용자가 진정 폼에서 기대하는 것은 아니다. 사용자가 기대하는 것은 윈도우(window)이다. 감사하게도, Prototype 라이브러리에서, 다양한 스킨들을 갖춘 탁월한 윈도우 구현을 제공하기 때문에 여러분이 원하는 룩앤필을 선택할 수 있다.
다음 창 코드는 Prototype을 통해 Ajax를 사용하여 윈도우 프레임에 콘텐트를 나타낸다. Listing 6으로 시작하는데, 이것은 윈도우를 호스팅 하고 있는 페이지이다.
Listing 6. index.html
<html>
<head>
<script type="text/javascript" src="javascripts/prototype.js"></script>
<script type="text/javascript" src="javascripts/effects.js"></script>
<script type="text/javascript" src="javascripts/window.js"></script>
<script type="text/javascript" src="javascripts/window_effects.js"></script>
<link href="themes/default.css" rel="stylesheet" type="text/css" ></link>
<link href="themes/spread.css" rel="stylesheet" type="text/css" ></link>
</head>
<body>
<a href="javascript:void showWindow();">Show Window</a>
<script>
function showWindow()
{
win = new Window( { className: 'spread', url: 'test.html',
title: 'Simple Window', width:400,
height:300, destroyOnClose: true, recenterAuto:false } );
win.showCenter();
}
</script>
</body>
</html>
|
JavaScript 코드는 주어진 URL에 의해 지정된 넓이, 높이, 타이틀, 콘텐트를 가진 새로운 윈도우를 만듦으로써, Show window 버튼의 클릭에 반응한다. 그리고 나서, showCenter() 메소드를 사용하는 윈도우를 보여주는데, 이것은 브라우저 윈도우의 중앙에 나타난다.
Listing 7은 윈도우의 콘텐트를 보여준다.
Listing 7. test.html
<h1>Registration</h1>
<p>You need to first register the product before...</p>
|
첫 번째 페이지를 검색하면 그림 7과 같은 모습을 볼 수 있다.
그림 7. 윈도우 링크
볼 것이 별로 없지만, 이것을 클릭하면 다른 세계가 펼쳐진다. (그림 8)
그림 8. 팝업 윈도우
조금 조악하지만, 확실히 여러분의 관심을 끈다. 꼭 라임 색일 필요가 없다. 여러 가지 다른 스킨들을 선택할 수 있다.
그런데, 지금 하고자 하는 것은 폼이다. 특히, 메인 페이지에 로그인 폼을 만들어서, Login 버튼을 클릭하면, 로그인 폼이 나타나도록 하고 싶다. Listing 8은 메인 페이지용 코드이다.
Listing 8. form.php
<html>
<head>
<script type="text/javascript" src="javascripts/prototype.js"></script>
<script type="text/javascript" src="javascripts/effects.js"></script>
<script type="text/javascript" src="javascripts/window.js"></script>
<script type="text/javascript" src="javascripts/window_effects.js"></script>
<link href="themes/default.css" rel="stylesheet" type="text/css" ></link>
<link href="themes/spread.css" rel="stylesheet" type="text/css" ></link>
</head>
<body>
<div id="myloginform" style="display:none;overflow:clip;padding:10px;">
<form id="loginfrm">
<table>
<tr><td>Login</td><td><input type="text" name="name" /></td></tr>
<tr><td>Password</td><td><input type="password" name="password" /></td></tr>
</table>
</form>
<button onclick="login()">Login</button>
</div>
<a href="javascript:void showWindow();">Login</a>
<script>
var g_loginWindow = null;
function login()
{
new Ajax.Request( 'login.php', {
parameters: $('loginfrm').serialize(),
method: 'post',
onSuccess: function( transport ) {
g_loginWindow.close();
}
} );
}
function showWindow()
{
g_loginWindow = new Window( { className: 'spread', title: "Login",
destroyOnClose: true,
onClose:function() { $('myloginform').style.display = 'none'; } } );
g_loginWindow.setContent( 'myloginform', true, true );
g_loginWindow.showCenter();
}
</script>
</body>
</html>
|
페이지 자체에 윈도우용 콘텐트를 갖고 있다. 하지만, 사용자가 폼에서 Login 버튼을 클릭하면, Ajax.Request 객체를 사용하여 서버에서 로그인을 요청한다. Listing 9는 간단한 로그인 스크립트인데, 실제로는 훨씬 더 복잡하다.
Listing 9. login.php
이제, 이 페이지를 가져오면 로그인 링크가 생긴다. (그림 9)
그림 9. 로그인 링크
링크를 클릭하면, 매우 참신한 Web 2.0 스타일의 로그인 윈도우를 볼 수 있다. (그림 10)
그림 10. 로그인 윈도우
Login을 클릭하면, 이것은 사용자 이름과 패스워드를 서버로 보내는데, 크리덴셜을 확인하고, 섹션 쿠키를 설정하며, 홈 페이지로 이동하라는 것을 알리는 응답을 한다.
이것은 애플리케이션에 팝업을 가져올 수 있고 사용자들에게 웹 보다는 데스크탑 애플리케이션과 비슷한 것을 사용하고 있다는 인식을 주는 기능 유형이다.
페이더(fader) 메시지
사용자와 통신할 수 있는 또 다른 방법은 페이더 메시지(fader message이 다.—이것은 스크린의 중요한 부분에 나타나는 메시지로서 사용자에게 중요한 무엇인가가 일어났다는 것을 알려준다. 이 경우, Scriptaculous 효과 라이브러리를 사용하는데, 이것 역시 Prototype.js를 기반으로 페이더 메시지를 구현한다.
Listing 10의 코드로 시작한다.
Listing 10. index.html
<html><head>
<style>
.alert {
opacity: 0.0;
border:2px dashed black;
padding:5px;
background:#eee;
font-family: arial, verdana;
font-weight: bold; }
</style>
<script src="lib/prototype.js"></script>
<script src="src/effects.js"></script>
<script>
function submit()
{
new Ajax.Updater( 'result', 'alert.html', {
method: 'get',
onSuccess: function() {
new Effect.Opacity('result',
{ duration: 2.0, from: 0.0, to: 1.0 } );
new Effect.Opacity('result',
{ delay: 10.0, duration: 2.0, from: 1.0, to: 0.0 } );
} }
);
}
</script>
</head><body>
<div id="result" class="alert"></div><br/><br/>
<button onclick="submit()">Submit</button>
</body></html>
|
이상적으로는, 이 페이지는 Submit 버튼을 가진 일종의 폼이다. 사용자가 Submit을 클릭하면, 서버에는 폼 데이터와 메시지가 있는 응답이 보내진다. 이 메시지는 서서히 나타나서 메시지를 디스플레이 하고, 서서히 희미해진다. 이 경우, 폼 엘리먼트를 없앴기 때문에, Submit 버튼만 있다.
Submit 버튼은 Ajax 요청을 alert.html 페이지로 보낸다. 그 페이지의 결과를 result <div> 태그에 두는데, 이는 Scriptaculous 효과 클래스를 사용하여 서서히 나타났다가 사라진다.
Listing 11은 경고 페이지용 코드이다.
Listing 11. alert.html
A new record has been added.
|
브라우저에 페이지를 가져오면, 그림 11과 같은 모습이 된다.
그림 11. 폼을 위한 Submit 버튼
이것 역시 볼 것이 별로 없다. Submit 버튼에 앞서 몇 개의 데이터를 가진 폼 필드를 상상해 보라.
Submit을 클릭하면, 경고가 나타난다. (그림 12)
그림 12. 메시지의 추가를 알리는 페이드 메시지
몇 초 후에, 메시지는 사라진다.
이 것은 간단하지만, 매우 효과적으로 사용자와 소통할 수 있는 수단이 된다. 남용하지만 않는다면, 객체의 출현과 사라짐을 민감하게 인식할 수 있다. 이것은 인간의 생존 본능과도 같은 것이기 때문에 주의를 기울이게 된다. 잘만 사용된다면, 사용자의 관심을 빠르게 끌 수 있는 강력한 방법이다.
결론
이 글에서 사용자와 교류 할 수 있는 완전히 새로운 툴 세트를 설명했다. 시간이 흐르면서, 이것 역시도 남용되고, 상태 바(status bar)가 그랬던 것처럼 효율성도 떨어지게 될 것이라는 것을 알고 있다. 하지만, 당분간은 이러한 툴들은 재미있고 효과적인 Web 2.0 방식으로 사용자들의 관심을 끌게 될 것이다.
다운로드 하십시오
| 설명 |
이름 |
크기 |
다운로드 방식 |
| 샘플 코드 |
x-ajaxxml6-lightbox.zip |
1573KB |
HTTP |
참고자료 교육
토론
|
