한빛출판네트워크

저자: 클라우스 아우구스티(Claus Augusti), 역 전순재

어쩌면 이미 테마에 대해서 들어보았을 수도 있겠지만 어떻게 테마를 사이트에 구현해 넣는지에 대해서는 자세하게 알고 있지 않으리라 생각한다.

흔히, 테마(theme)란 일련의 그래픽과 색상, 레이아웃 등과 같은 것들이 사용자 인터페이스에 적용되어 특정한 시각느낌(look and feel)을 주는 것을 지칭한다.

대표적으로 잘 알려진 것으로는 Winamp나 Netscape 6이 있다. 테마라는 개념은 현대 구이(GUI) 애플리케이션 진화에 있어서 꽤 새로우면서도 중대한 발전이라고 할 수 있다. 테마를 이용해 사용자들은 재컴파일할 필요 없이 사용하고 있는 애플리케이션에 대해 개별적으로 인터페이스를 용이하게 선택하거나 만들 수 있다. 뿐만 아니라 이것을 최종 사용자에 대한 측면과 연관지어 현재 성장중인 오픈 소스 개념에 적용해도 좋을 것이다.

웹 애플리케이션 개발과 자바스크립트의 핵심으로 돌아가보자. 깔끔한 마크업(markup), 한 세트의 스타일 시트, 약간의 쿠기 처리기술과 자바스크립트만 있으면 사이트 방문객들은 자신에게 적합한 사이트 모양을 선택할 수 있을 뿐만 아니라 자신이 선호하는 사항으로 저장해 둘 수도 있을 것이다. 이렇게까지 하는데 관심이 없다고 하더라도 본 기사를 계속 읽으면서 "훌륭한 스타일"에 대해 배워두는 것도 좋을 것이다.

시스템 요구사항

기본적으로, 해결책에 대한 아주 기본적인 테크놀로지 한 세트만 있으면 된다. 약간의 CSS 지원과 잘 작동하는 JavaScript 엔진이 필요하다. 이것은 곧 우리가 만들 스크립트가 넷스케이프 네비게이터와 마이크로소프트 인터넷 익스플로러 버전 4 이상, 모질라, 오페라 4이상, Konqueror에서 모두 실행될 수 있다는 의미이다.

약점이라면 구형 4.x플랫폼에서는 CSS 지원이 엉터리에다가 불완전하기 때문에 CSS를 완벽하게 사용하지 못할 수도 있다는 것이다. 일반적으로 신형 브라우저를 사용하여 시험해 보면 되리라 생각한다 (IE 5.5, Netscape 6, Opera 5, Konqueror). RichInStyle 사이트에는 CSS 버그와 지원에 대한 훌륭한 리스트가 있다.

배경지식

기본적으로 모든 애플리케이션은 서로 다른 두 개의 테마 사이를 전환해야 한다는 중요한 선결조건 하나를 만족해야 한다 이 조건은 애플리케이션의 데이터(model)을 그 데이터의 보기(view)로부터 분리시켜야 한다는 것을 말한다. 두 컴포넌트는 제어자(controller)에 의해 연결되고 통제된다.

OOP의 관점에서 이것은 model-view-controller (MVC) 개념이라고 불리는데, Java의 구이(GUI) 도구모음인 Swing이 아마도 가장 대표적인 예일 것이다.

웹 개발에 대해 완전히 문외한이 아닌 한, 여러분은 이 개념을 익숙하게 알고 있으리라고 생각한다. HTML과 XML-기반 언어는 정보에 구조를 부여하도록 디자인되었기 때문에, 여러분은 데이터 모델을 형성할 수 있다. 게다가 CSS를 사용하면 어떤 요소라도 그 표현 양식(그 모양)을 정의할 수 있다. 그리고 자바스크립트는 그 두 정적인 컴포넌트 사이를 붙여주는 강력 접착제이다. 자바스크립트가 브라우저에 연결되어 통제자(controller) 컴포넌트를 형성한다.

모델-보기-통제자 (Model-view-controller)

컴포넌트들을 구별했으면, 이제 우리의 과업에 맞추어 각 컴포넌트에 각각 역할을 지정하자.

• Model -- HTML/XML: 데이터 모델을 HTML 문서 안에 만들자. 여러분은 HTML에서 텍스트형 데이터를 다루고 있으므로, 실제로 이것은 텍스트를 논리적으로 구조화한다는 뜻(문단(paragraphs), 표(tables), 또는 목록(lists)을 사용해 각 요소들 사이의 관계를 표현)이다. 그래픽적인 표현은 실제로는 조판을 구조적으로 하고 기본 스타일을 사용하게 되면 얻게되는 그저 과외 효과에 불과하다는 사실을 기억하자. XML을 사용하여 시각적 표현을 정의해야 하는데, 이유는 XML-기반 언어의 요소들은 브라우저에 기본 렌더링이 없기 때문이다(유일한 예외는 Internet Explorer 5.x로서, 이 브라우저는 여러분에게 기본적으로 XML 문서의 트리 보기를 제공함). 명료한 데이터 모델을 위해서라면, 문서를 와 같은 시각적 조판 요소들로 더럽혀서는 안된다. 과 같은 요소들을 고수해야 한다. 문서의 표현을 통제하는 잘 알려진 요소들과 속성들을 사용하지 마라. 이러한 것들은 HTML 4.01에서 비권장 사항으로 표기되었다. (이것은 곧 그것들이 바람직하지 못하며 다음 규격에서는 제거될 것이라는 의미이다.) 그리고 그와 동등한 CSS 정의로 대치되어야 한다.
• View -- CSS: CSS를 사용하면 지원되는 언어 요소의 완벽한 시각적 모습을 지정할 수 있다. HTML과 연계하면 모든 요소들에 대해서 다양한 그래픽 표현을 정의할 수 있는데, 대신에 기본적으로 모든 요소들은 (청색 밑줄 링크처럼) 기본으로 설정된 보기(view)를 사용할 것이다. 모델(model)과 보기(view)를 분리하려면 두 컴포넌트 사이를 연결해주는 메커니즘이 필요하다. 이 메커니즘은 HTML의 요소를 통해서 제공된다 (아래 참조). 그래픽 표현의 완전한 정의를 보유한 스타일 시트는 다름아닌 theme 파일이다. 작동시키기 위해서는 모든 것을 통제하는 하나 이상의 컴포넌트만 있으면 된다.
• Controller -- JavaScript: 이전에 언급했던 바와 같이 자바스크립트는 그 두 부분사이에 내장된 활성 컴포넌트이다. 우리가 하는 작업에서 제어자가 할 일은 원하는 테마를 구별하고 동적으로 그것을 전환하는 것이다. 선택된 테마를 저장하고 싶을 수도 있는데, 쿠키를 쓰고 읽기 위해 자바스크립트가 필요할 것이다.

구현

1. 문서를 준비하라

위 설명처럼 첫 번째 단계가 끝나면 HTML 파일은 오직 구조적 마크업(markup)만을 담고 있어야 한다. 모델과 표현을 분리하는 것을 잘 다룬 곳을 추천한다면 야곱 닐슨(Jakob Nielsen)의 UseIt 사이트를 들 수 있다. 그리고 시작하기에 좋은 곳을 또 추천한다면 예를 들어 접근가능성 디자인에 관한 사이트로 웹 컨텐트 접근가능성 가이드라인(Web Content Accessibility Guidelines)과 웹 컨텐트 접근가능성 가이드라인을 위한 테크닉(Techniques for Web Content Accessibility Guidelines)이 있다.

2. 테마를 만들어라

이 단계는 CSS에서 지원되는 속성들에 대하여 적어도 조금은 기본적으로 알고 있다는 가정 한에 진행한다. CSS 초보라면 먼저 개론서부터 반드시 읽어 보는 것이 좋을 것이다.

정보를 조직화하고 나면 이제는 거기에다 시각적 표현을 부여할 차례이다. 특정 요소 형, 요소들의 클래스, 그리고 각 요소들에 대하여 스타일을 정의할 수 있다. 그리고 CSS 선택자를 사용하여 그것들을 적용할 수 있다. CSS를 활용하면 요소들을 보이지 않도록 정의할 수도 있기 때문에 훨씬 더 레이아웃을 잘 통제할 수 있게 된다. 특히 중요한 것은 모든 부분을 구별하여 서로 다른 테마에 독특한 보기를 부여하는 것이며 명석한 이름짓기 시스템을 사용하는 것이다.

기본 스타일시트를 만들고 나면, 그것을 템플릿(template)으로 복사하고 사용해서 추가적인 스타일 시트나 테마를 만들어라. 그리고 모든 스타일 시트 파일들을 한 폴더에 함께 저장하라. 스타일 시트를 만든 후, HTML 문서 안으로 삽입하려면 다음과 같이 작성하면 된다.

3. 자바스크립트로 구현

이제 정적인 부분은 완성되었으므로 자바스크립트가 이것을 동적으로 만드는 작업을 할 차례이다. 무엇을 해야 하는가?

우리가 필요한 해결책은 동적으로 스타일시트를 임포트하는 것이다. 이것은 자바스크립트만으로는 불가능하기 때문에 오랜 친구인 document.writeln()의 도움이 필요하다. 이 트릭은 HTML 파일이 적재되는 동안에 그저 문서 안으로 CSS 파일을 써 넣는 것이다. 브라우저는 이것을 다른 컨텐츠처럼 똑같이 해석(parse)할 것이며 정의된 스타일 시트를 적재하여 그 문서에 적용할 것이다.

document.writeln("");

이것을 재사용하려면, 유의할 사항이 두 가지가 있다. 물론, 먼저 그것을 함수 안에 싸 넣어야 한다(insertStyleSheet() 참조).

절대 경로를 사용하는 것이 대단히 중요한데, 이 경로는 문서가 있는 폴더에서부터 시작하여 평가된다. 이것이 필수적인 이유는 스크립트를 새로운 문서에 삽입할 때마다 그 경로가 조정될 것이기 때문이다. 새 문서는 여러분의 사용자 스타일 시트 파일에 대해 상대적으로 다양한 위치에 있다(이것은 실제로 재사용가능한 스크립트 해결책은 아니다). 위에 있는 코드를 살펴 보면 테마의 이름을 보유하고 있는 변수 s를 볼 수 있으며 파일 접미사 .css가 정적으로 추가된다. 실제로 s는 공통 폴더 안에 저장해 놓은 테마의 이름 중에 하나를 반드시 가져야 한다(그 폴더의 이름은 THEMES_FOLDER_PATH에 지정되어 있다).

다음으로 필요한 방법은 사용자들이 서로 다른 스타일 중에서 선택할 수 있도록 하는 것이다. 그래서 setTheme()이라고 부르는 재사용 가능한 함수 하나를 만들었다. 이 함수는 테마의 이름을 인수로 받는다. 다음은 이 함수를 호출하는 방법이다.

Default Theme

테마를 설정한 후에 그것을 저장하기 위해 쿠키(cookies)를 사용하는데 이것을 사용하면 데이터를 세션을 가로질러 저장할 수 있다. 이것이 필요한 이유는 기본으로 깔린 웹 프로토콜인 HTTP가 정보를 유지하지 않는(stateless) 프로토콜이기 때문(다음 번에 서버로부터 리소스를 요구할 때 HTTP 프로토콜은 여러분에 대하여 알지 못함)이다. 자바스크립트 프로그래머의 관점에서 쿠키는 세미콜론으로 구분된 문자열의 키/값 쌍이다. 귀찮고 머리쓰기가 싫은 고로 기존의 쿠키 라이브러리를 사용하겠다. 제리 브라든보프(Jerry Bradenbaugh)가 쓴 『자바스크립트 애플리케이션 쿡북』에서 발췌를 하여 보았다. 이 작은 라이브러리에는 쿠키를 다루는데 필요한 기본적인 메소드가 들어있다.

setTheme() 함수 안에서 DeleteCookie()를 사용하여 옛날 값을 지운 후, 특정 키를 가진 테마의 이름을 SetCookie()를 사용하여 쿠키에 저장한다. 새로운 스타일 시트를 적용하기 위한 마지막 단계는 현재 문서를 재적재하는 것이다. 이것은 현재 위치를 재설정해줌으로써 쉽게 할 수 있다. 이 작업은 대부분 메모리 캐시에서 이루어지므로 네트워크 노이즈를 유발하지 않을 것이다.

문서가 재적재 되는 동안에 insertStyleSheet() 함수가 다시 호출된다. 만약 GetCookie()를 사용하여 지정되었다면 테마의 이름에 접근을 시도해 본다. 아무것도 발견할 수 없으면 스크립트는 기본 스타일을 사용하고 요소를 문서 안으로 써넣는다.

4. 단계: 스크립트를 추가하고 설정사항들을 교정한다

마지막 단계는 자바스크립트 라이브러리를 문서 안으로 삽입해 넣는 것이다. 지금까지는 클라이언트에서 자바스크립트를 사용할 수 없는 경우 발생할 일에 대해서는 크게 고려하지 않았다. 문서가 부서지는 것을 방지하기 위해