문서 설계

웹기반 수업을 위한 내용 설계에서는 다른 매체에 비하여 반드시 두 가지를 고 려하여야 한다.(Stansbery, 1998) 첫째, 정보가 제시되는 매체의 속성, 특히 종이 가 아닌 화면을 고려해야 한다는 것이다. 둘째 웹기반 수업은 웹에서 제시될 수 있는 정보의 종류를 다양하게 고려할 수 있다는 것이다. 초기의 웹은 단순히 문 자형태의 정보를 제시하는 것이 그쳤으나 최근에는 사운드나 동영상 등 멀티미디 어 형태의 정보를 제공하는 것이 가능하다.

1) 문서 배치(Layout) 설계

Morkes & Nielsen(1997)은 웹 문서의 가독성을 높이기 위해서 적독(摘讀, Scannable) 가능한 구조로 간결하고 객관적으로 진술되어야 한다는 원칙을 제시 하였다.

(1) 적독 가능한 문서

① 역피라미드 구조

웹 문서의 첫 번째 부분에는 결론이 제시되고, 그에 대한 자세한 설명은 연결 을 통해 배치하거나 페이지 하단에 배치하는 방식이다. 신문기사를 생각하면 이 해가 빠르다.

② 하위 제목 사용

제목과 더불어 2-3 단계의 하위 제목을 사용하여 내용을 구조화한다. 내용을 잘 구조화 할수록 하위 제목의 효과가 살아난다.

③ 머리말의 활용

화면상단에는 그림정보보다는 의미 있는 소제목을 달아 전체에 대한 개요을 미

리 접하게 한다.

(2) 정돈된 설계

① 문서의 길이

작성된 웹문서의 길이는 화면과 일치하지 않는다. 화면에 보여질 있는 분량보다 문서가 길 경우 브라우저 오른쪽에 말림막대(Scroll Bar)가 나타난다. 보통 인쇄하였을 때 A4용지 를 기준으로 한 페이지에 출력되도록 하는 것 이 좋다. 다음은 나모 웹에디터 4.0에서 ‘인쇄 미리보기’를 통하여 페이지 분량을 확인하는 모습이다.

② 줄의 길이

우리 눈은 특정 정보를 읽을 때, 몸을 움직이지 않고 약 8cm 정도를 좌우로 볼 수 있다. 이 이상의 길이로 정보를 제시하게 되면 우리는 좌우로 고개를 움직 여야 한다. 이 정도의 길이를 고려한다면 한 줄에 제시되는 글자의 길이는 약 20~30자이다.

③ 화면배치

화면을 스크롤하기 전에 제시되는 내용이 중요하다. 학습자에게 처음 보이는 화면에서 그 글의 내용이 무엇인지를 알 수 있도록 한다.

④ 로고, 아이콘, 배너, 심볼

아이콘이나 심볼 등을 이용하여 신속하게 의미를 전달함과 동시에 사용자의 행 위를 유도할 수 있다. 이러한 디자인 요소들을 설계할 때는 시각적으로 단순 명

그림 14 나모 웹에디터 4.0에서 ‘인 쇄 미리보기

료한 형태로 하며 실생활에서의 적절한 비유와 범 세계적인 호환성을 갖도록 한 다.

⑤ 색상

색상이 웹 페이지에서 차지하는 비중은 의외로 높다. 색상의 선택 여하에 따라 학습자에게 안정감이나 불안감을 줄 수 있으며 또는 학습의 능률에도 영향을 미 친다. 가급적 원색을 피하고 간색을 사용하되 일관성 있는 배색을 고려한다.

기타 웹 페이지 구성의 일반적인 원칙은 다음과 같다.

표 3 웹 페이지 구성의 일반적인 원칙

항 목 설 명

첫인상 매력적, 재미, 눈길을 끄는 헤드라인이나 그래픽, 관심을 끌게 하는 것

뷰어 뷰어가 잘 조정되어 자료를 보는 이로 하여금 적 절함을 느끼도록 해야 함

논리적이고

적합한 정보 혼란스럽게 보이지 않도록 페이지

일관성

인터페이스의 일관성, 항해와 버튼의 일관성, 이해 가능한 그래픽과 아이콘, 적절한 색상

판독이 용이한 서체

색이나 바탕 또는 다른 요인들로 인하여 지나치게 보이지 않아야 함

멀티미디어

요소 음질, 동영상, 그래픽이 적절하고 깔끔해야 함 쉬운 항해 막인 곳이 없어야 함

(3) 하이퍼텍스트 문서 작성

웹문서는 하이퍼텍스트 형태로 나누면 문서의 길이를 줄일 수 있다. 그렇지만 각 문서는 한 가지 아이디어에 대한 완벽한 설명이 되는 것이 좋다. 사용자 분석 을 근거로 하여 일반 문서를 하이퍼텍스트 문서로 전환할 때 참조할 사항은 다음

과 같다²³⁾

① 독립성

인쇄물에서의 페이지는 각각이 독립적이지 않다. 이에 비해 웹에서는 각각의 페이지를 독립적으로 제작할 수 있다. 웹기반 수업의 문서는 하나의 정보 또는 아이디어를 담고 있되, 가능하면 하나의 화면에 제시될 수 있을 정도로 짧게 분 할한다.

② 유의미한 하이퍼링크 작성

하이퍼링크의 작성은 무엇보다도 그것이 내용을 이해하는데 도움을 줄 수있는 가를 먼저 고려하여야 한다. 미주, 참고 문헌, 관련자료 등에 대한 하이퍼링크 처 리는 학습자가 내용을 이해하는데 도움을 주지만 꼭 읽을 필요가 없는 내용에 대 하여 단순히 관련이 있다는 이유만으로 하이퍼링크 처리를 해서는 안된다.

③ 이미지맵(Image Map) 사용

이미지맵은 하이퍼텍스트의 본래 이점인 문서들의 전체적인 구조를 이해하는 데 도움을 줄뿐만 아니라 문서들 간의 관련성을 할 수 있도록 함으로써 내용을 이해하는데 도움을 준다.

2) 멀티미디어 요소의 활용

웹 문서에서는 멀티미디어적 요소를 쉽게 포함시킬 수 있다. 따라서 문자 이외 에도 그래픽, 동영상, 소리, 애니메이션 등 다양한 자료 형태를 고려해야 한다.

(1) 이미지 그래픽 정보

웹브라우저가 기본적으로 처리할 수 있는 이미지 그래픽의 형태로는 GIF와 23) Gloor, 1997 / Bonime & Pohlman, 1997

JPG가 있다. GIF(Graphic Interchange Format)는 256가지의 색깔만을 사용하여 그래픽 정보를 압축한다. 따라서 색상 수가 적거나 투명한 이미지가 필요할 때 효과적이다. JPG(Joint Photographic Experts Group) 방식은 해상도를 떨어뜨리 는 방식으로 파일의 크기를 아주 작게 만들 수 있다. 색상 수가 많은 사진과 같 은 이미지에 효과적이나 압축률을 증가시킬 경우 이미지의 질이 현저하게 떨어진 다. 그림은 웹페이지의 로딩 속도를 저하시키기 때문에 꼭 필요한 그림이 아닌 경우에는 삽입하지 말아야 한다. 특히 의미 없는 그림을 수업 자료 속에 삽입하 는 것은 어떠한 경우에도 피해야 한다. 요즘 이미지 그래픽툴로 많이 쓰이는 것 은 포토샵 5.x 와 페인트샵프로6.x가 있다.

(2) 소리 정보

소리 정보를 적절하게 삽입하는 것 은 학습자의 주의를 환기시키는데 큰 도 움을 준다. 소리정보 형식으로 많이 쓰이 는 것은 MIDI, WAV, RA, MP3등이 있 다. 이 중 WAV 포맷은 뛰어난 음질을 자랑하지만 용량이 상당히 크기 때문에 인터넷으로 제공되기에는 한계가 있다.

이러한 WAV 포맷의 파일을 리얼오디오 형태로 압축해줄 수 있는데 이를 인코딩 이라 하며 Cool Edit2000이나 Real Producer G2 등이 널리 쓰인다. 음악교과에서 연주곡을 제공하는 경우에는 MIDI 포맷의 파일이 효과적이다. 아울러 Flash4에 서는 WAV 파일을 MP3 방식으로 압축하여 삽입하는 기능이 있어 유용하게 사 용할 수 있다. 이러한 소리 정보를 웹 페이지에서 듣기 위해서는 RealPlayer Plus나 Windows Media Player와 같은 프로그램을 사용한다.

(3) 동영상 정보

그림15 RealPlayer Plus를 이용하여 소리 정보를 듣고 있는 모습

동영상을 무절제하게 사용하면 다른 어느 멀티미디어 정보보다 전송속도의 영 향을 많이 받는다. 웹 문서에 동영상 정보를 효과적으로 제시하기 위해서는 내용 설계 단계부터 철저한 고려가 필요하다. 우선 압축률이 최대한 높아지도록 촬영 하여야 하며 시간을 최소한으로 하고, 제시방식을 적절히 선택한다. 제시방식으로 는 Streaming 방식과 downloading 방식이 있다. 음성 단독 정보나 슬라이드 쇼 등 동영상 이외의 대안을 모색하는 것도 좋은 방법이다.