웹은 이미 오래 전에 문서 위주의 서비스에서 탈피하였다. 이젠 윈도우(Windows)와 같은 운영체제가 없어도 브라우저와 같은 클라이언트 프로그램[42]만으로 온라인 상에서 다양한 컴퓨터 작업을 할 수 있게 되었다. 즉, 과거에는 프로그램이 실행되기 위해서는 운영체제(OS)를 필요로 했지만, 이제는 브라우저만 있어도 프로그램을 실행시킬 수 있다.[43] 브라우저가 곧 운영체제가 된 것이다.[44]
이처럼 브라우저에서 프로그램을 직접 실행할 수 있게 된 것은 자바스크립트(JavaScript), VB스크립트(VBScript), 펄 스크립트(Pearl Script)와 같이 클라이언트 사이드에서 실행되는 스크립트 언어[45]와 이 언어를 직접 해석할수 있는 인터프리터 기능(interpreter)이 브라우저에 탑재되어 있기 때문이다. 스크립트 언어는 HTML과 CSS와는 다른 문법 체계를 가지고 있지만, 브라우저에 의해 실행되어야 하므로 HTML 문서에 직접 기술된다.
이 책은 스크립트와 스타일시트에 대한 내용을 다루지 않았기 때문에 예제로 제시된 HTML 문서도 스크립트 없이 작성되었다. 따라서 이 장에서는 HTML 문서에 스크립트를 넣는 방법을 주로 다룰 것이다.
<스크립트 넣기>를 위한 표준 기술
SCRIPT 요소
카테고리 | Metadata content, Flow content, Phrasing content |
콘텐츠 속성 | 글로벌 속성, src, async, defer, type, charset |
지원 브라우저 |      |
SCRIPT 요소는 스크립트 언어(SCRIPT language, 이하 ‘스크립트’)를 표시한다. 스크립트는 소프트웨어를 실행시키기 위한 프로그래밍 코드(programming code)다. 브라우저마다 다르지만, 대부분의 브라우저는 자바스크립트와 같이 클라이언트 사이드 스크립트를 해석할 수 있는 능력을 가지고 있다. 이런 능력을 활용하면 문서도 소프트웨어가 될 수 있다. 클라이언트 사이드 스크립트는 브라우저가 스크립트를 해석할 수 있다는 전제에서 출발하는 것이므로 HTML 문서 내에 프로그래밍 코드를 직접 작성할 수 있으며, 이를 위해 SCRIPT 요소가 필요하다.
SCRIPT 요소는 HTML 문서 내 어디든 놓일 수 있으며, 그 횟수도 제한이 없다. 문서 머리에 SCRIPT 요소를 위치시키면, 로딩과 함께 스크립트가 실행된다. 문서 전체에 걸쳐 기능을 제어해야 하거나 문서 본문에 대한 제어가 필요한 경우라면, 브라우저가 문서 본문을 처리하기 전에 스크립트가 실행될 수 있도록 SCRIPT 요소를 문서 머리에 두어야 한다. 스크립트는 그 자체가 콘텐츠는 아니기 때문에 문서 위에 나타나지 않는다. 따라서 SCRIPT 요소를 어디에 두든 문서 구조는 달라지지 않는다. 다만, 그 위치에 따라 스크립트 실행 순서만 달라질 뿐이다.
<head><script type=”text/vbscript” src=”http://www.example.com/progs”></head><body><script type=”text/javascript”>document.write(“안녕하세요!”)
</script></body>type 속성
type 속성은 스크립트의 MIME[46] 타입(type)를 지정하는 속성이다. 프로그래밍 코드는 프로그램 언어에 따라 다르므로 브라우저에게 어떤 프로그램 언어를 사용했는지 미리 알려주기 위해 type 속성이 필요하다. type 속성값은 미디어 타입을 지정하는 Type과 프로그램 언어를 지정하는 Subtype으로 구성되며, Type과 Subtype은 슬래시(‘/’)에 의해 구분된다. HTML5에서는 text/javascript가 기본값이므로 스크립트 타입이 ‘text/javascript’인 경우에는 type 속성을 지정하지 않아도 된다. 단, 속성값이 text/javascript가 아닌 경우에는 반드시 type 속성을 지정하여 브라우저가 스크립트를 올바르게 해석할 수 있도록 해야 한다.
- type=”text/javascript”
- type=”text/ecmascript”
- type=”application/ecmascript”
- type=”application/javascript”
- type=”text/vbscript”
src 속성
src 속성은 외부 스크립트 파일의 주소(source)를 지정한다. 여러 문서에 걸쳐 사용할 스크립트는 파일로 만들어서 참조하는 것이 HTML 문서마다 반복하여 스크립트를 작성하는 것보다 낫다. 이 속성을 이용할 경우에는 브라우저가 외부 스크립트 파일에 있는 스크립트에만 집중할 수 있도록 SCRIPT 요소 내에는 직접 스크립트를 작성하지 않는다(스크립트 파일의 확장자는 ‘.js’로 저장한다).
<script type="text/javascript" src="demo\_time.js"></script>defer 속성
defer 속성은 스크립트 실행의 연기(defer)를 지정한다. 브라우저가 src 속성을 만나게 되면 외부 스크립트 파일에 집중하기 위해 HTML 문서의 파싱을 잠시 미룬다. 외부 스크립트 파일에 집중하는 시간이 길어질수록 문서 로딩은 늦어질 수 밖에 없다. 그래서 스크립트 실행보다 문서 로딩 속도가 더 중요한 경우, 저작자는 스크립트를 HTML 문서 하단에 작성하여 스크립트보다 문서의 구성 요소를 먼저 파싱하도록 마크업하기도 하는데, 이런 효과를 외부 스크립트 파일에도 적용하기 위해 defer 속성이 만들어졌다. 이 속성을 이용하면 브라우저가 HTML 문서를 전부 파싱한 다음에 스크립트를 실행할 수 있게 만들 수 있다. defer 속성은 외부 스크립트 파일만 한정되므로 반드시 src 속성이 함께 지정되어야 한다.[47]
<script type="text/javascript" src="demo\_defer.js" defer="defer"></script>async 속성
async 속성[48]은 스크립트의 비동기 실행(asynchronous execution)을 지정한다. 이 속성은 defer 속성과 비슷하다. 다만, defer 속성이 HTML 문서의 파싱이 완료된 이후에 스크립트가 실행되는 것인데 반해, async 속성은 HTML 문서의 파싱 완료와 상관 없이 스크립트 파일을 수신한 이후에 실행된다는 점이 다르다.
브라우저가 HTML 문서를 파싱하다가 SCRIPT 요소를 만나면 스크립트 파일을 수신하고, 수신이 완료되면 그 다음에 스크립트를 실행하게 된다. 스크립트를 실행하는 동안에는 HTML 문서에 있는 다른 요소를 파싱하지 못하기 때문에 전체적으로 HTML 문서의 파싱이 늦어지는 문제가 생긴다. 이 점을 보완하고자 async 속성이 제안되었다. 브라우저가 async 속성을 만나면, 스크립트 실행을 뒤로 미루고 우선 스크립트 파일의 수신과 HTML 문서의 파싱에 집중한다. 그런 다음, 외부 스크립트 파일의 수신이 완료되었다면, 그 때 스크립트를 실행시킨다. defer 속성과 마찬가지로 src 속성이 지정되어야만 async 속성이 유효하다.
웹이 점점 소프트웨어처럼 변해가면서 스크립트 비중이 높아졌고, 이것은 문서 로딩 속도를 더디게 만드는 요인으로 작용하고 있다. 브라우저의 성능이 많이 향상되었지만, 스크립트의 실행과 HTML 문서의 파싱을 동시에 잘 하기란 쉽지 않다. 저작자는 콘텐츠 특성이나 사용자 요구를 고려하여 스크립트 실행을 우선시해야 할지 아니면 콘텐츠를 먼저 보여주는 것이 중요한지 미리 판단해야 한다. 스크립트 비중이 높아진 만큼, 브라우저가 스크립트를 바로 실행하게 되면 HTML 문서의 렌더링에 큰 영향을 미칠 수 밖에 없다. 따라서 저작자는 defer 속성과 async 속성을 사용하여 스크립트의 실행 시기를 적절하게 조절할 필요가 있다.
<script type="text/javascript" src="demo\_async.js" async="async"></script>예제 |
자바스크립트를 외부 문서로 만들어 두었고 참조 방식으로 스크립트가 적용되도록 하였고, 이것을 SCRIPT 요소로 마크업하였다.
<!DOCTYPE html><html lang=”ko”><head>중략
<script type="text/javascript" src="demo\_time.js"></script></head>UX Design ~ (중략) ~ 사용자 경험의 순환구조
</html>NOSCRIPT 요소
카테고리 | Metadata content, Flow content, Phrasing content |
콘텐츠 속성 | 글로벌 속성 |
지원 브라우저 | |
NOSCRIPT 요소는 스크립트 미지원(NOn-SCRIPT)를 표시한다. 이 요소는 스크립트를 지원하는 경우에는 표시되지 않고, 스크립트를 지원하지 않는 경우에만 표시된다. 대부분의 브라우저는 스크립트를 지원하기 때문에 스크립트가 실행되지 상황은 드물다. 그러나 웹 콘텐츠는 브라우저 이외에도 다양한 브라우저에 의해 이용되는데, 성능 수준이 달라서 어떤 브라우저는 클라이언트 사이드에서 스크립트를 제대로 지원하지 못할 수도 있다. 또는 스크립트를 지원하더라도 여러 가지 이유로 사용자 스스로 스크립트 실행 기능을 꺼 두는 경우가 있고, 방화벽 등 보안 문제를 들어 스크립트가 허용되지 않는 경우도 있다.
이처럼 스크립트를 지원하지 않거나 사용하지 않는 경우가 얼마든지 있을 수 있으므로 스크립트 미지원 시 사용자에게 스크립트 문제라는 사실을 알리거나 원래 스크립트를 통해 전달하려고 했던 내용을 보여줄 필요가 있다.
NOSCRIPT 요소를 사용한다고 해서 스크립트를 지원하는 상황을 100% 대체할 수는 없다. 그래서 주사용자가 스크립트를 지원하지 않는 상황에 놓일 수 있다면, 스크립트에 의존하지 않도록 노력해야 한다. 이를 위해 대체 콘텐츠를 제공하는데, 대체 콘텐츠는 사용자가 볼 수 있도록 문서에 나타나야 한다. 따라서 NOSCRIPT 요소는 SCRIPT 요소[49]와 달리 반드시 문서 본문에 위치해야 하며, 브라우저가 SCRIPT 요소를 처리할 수 있는 경우에는 NOSCRIPT 요소를 처리하지 않고 건너뛴다.
<script type="text/javascript">document.write(“안녕하세요!”)
</script><noscript>안녕하세요!</noscript>예제 |
자바스크립트를 지원하지 않는 경우를 고려하여 대체 콘텐츠를 NOSCRIPT 요소로 마크업하였다.
<!DOCTYPE html><html lang=”ko”><head>중략
<script type="text/javascript" src="demo\_time.js"></script><nosript>자바스크립트을 실행할 수 없으므로 다른 버전의 프로그램을 다운로드 받으세요. <p><a href=”http://www.example.com/demo\_time/>프로그램 다운로드</a></p></noscript></head>UX Design ~ (중략) ~ 사용자 경험의 순환구조
</html>[지금까지의 소스와 결과물]
소스
<!DOCTYPE html><html lang=”ko”><head><title>UX DESIGN</title><base href=”http://www.example.com/info”><link rel=”stylesheet” type=”text/css” href=”desktop.css”><meta charset="utf-8"><meta name=”author” content=”홍길동”><meta name=”description” content=”신간 UX DESIGN에 관한 소개 웹 사이트”><meta name=”generator” content="Dreamweaver CS 5.0"><style>div.blue {color:#0000FF}
</style><script type="text/javascript" src="demo\_time.js"></script><nosript>자바스크립트을 실행할 수 없으므로 다른 버전의 프로그램을 다운로드 받으세요. <p><a href=”http://www.example.com/demo\_time/>프로그램 다운로드</a></p></noscript></head>UX Design, 1st Edition 사용자가 경험하는 모든 것을 디자인하라 위키피디어에 따르면, UX는 사용자가 제품, 시스템 또는 서비스를 이용하면서 얻게 되는 총체적 경험이다. 인터랙티브 제품은 상호작용이 이루어지는 제품을 일컫는다. 이러한 제품을 다루는 것이 이미 일상이 되었기 때문에 그 과정이 지루하거나 건조하다면 제품과 함께 하는 시간은 고통의 연속일 것이다. 한 동안 사용성(사용하기 쉽고 편리한 정도)이 중요하게 다뤄져 왔지만, 사용성은 제품을 구성하고 있는 부분적 속성일 뿐 이것만으로는 사용자 가치(사용자가 제품을 통해 얻을 수 있는 모든 것 )를 제대로 구현하기가 어렵다. 이 책은 UX 디자인이란 무엇인가, UX 디자인을 잘 하려면이라는 질문에 제대로 된 대답을 하기 위해 저자 스스로 사용자 경험 디자인을 이해하기 위해 노력했던 과정을 담았다. [위키피디어 원문] User experience is the way a person feels about using a product, system or service. User experience highlights the experiential, affective, meaningful and valuable aspects of human-computer interaction and product ownership, but it also includes a person’s perceptions of the practical aspects such as utility, ease of use and efficiency of the system. 사용자 경험 디자인이란 경험의 흐름 지식화에 의한 경험 형성 소비자-사용자 경험 사용자 경험의 순환구조
</html>**Ⅳ. 본문 영역 작성하기
**Creating Body Section
주석
[42] 네트워크를 통하여 다른 컴퓨터 시스템 상의 원격 서비스에 접속할 수 있는 응용 프로그램이나 서비스를 말한다(출처: 위키피디어)
[43] ‘Chrome 웹 스토어’(https://chrome.google.com/webstore )에 가보면 웹 상에서 이용할 수 있는 다양한 웹 애플리케이션을 만날 수 있다.
[44] 이러한 현상을 웹 2.0에서는 “플랫폼으로서의 웹”(Web as Platform)이라고 부른다.
[45] 스크립트 언어는 컴파일 과정 없이 바로 실행시킬 수 있는 언어를 말한다.
[46] MIME(Multipurpose Internet Mail Extensions): 인터넷 통신에서 텍스트, 이미지, 동영상, 사운드 등 여러 가지 형태의 데이터 송수신에 관한 규약이다(출처: 매경닷컴).
[47] (참고) http://hacks.mozilla.org/2009/06/defer/
[48] HTML5에 추가된 속성이다.
[49] SCRIPT 요소는 HEAD 영역에 위치한다.