Ⅲ. 사용자 인터페이스의 구현 1. 하이퍼링크 구현 1.1 같은 사이트 안의 페이지와 페이지간의 연결(Linear Link)은 현재 위치에서 이전페이지로 이동할 수 있는 링크와 다음 페이지로 이동 할 수 있는 링크를 제공한다. 1.2 URL를 이용한 다른 사이트와의 연결(Cross-Referenced Links)은 사용 자가 사고의 흐름이나 자신의 관심사에 따라 독특한 향해 패턴을 형 성할 수 있게 한다. 2. 글꼴의 표현과 크기 2.1 브라우저 상에서 지원되지 않는 포맷의 글자체를 만들거나 특정 시스 템이나 브라우저와 무관하게 동일하게 보여지길 원한 경우에는 그래픽 툴을 이용한다. 미적 효과를 위해서는 메뉴 바 등에 글자 대신 글자 이미지를 사용한다. 2.2 글꼴의 기본사이즈는 html 을 기준으로 font=2로 정하며 타이틀의 사이 즈는 font=3으로 정한다. 2.3 글꼴은 굴림체와 돋음체를 기본으로 한다. 2.4 Line Height는 16pt로 한다. 2.5 색은 배경색이 검정일 경우#FFFFFF, #CCCCCC 배경색이 흰색일 경 우 #000000, Hover : #339933를 사용한다. 2.6 문장의 길이는 단어 수 8 ~ 15단어로 제한하며, 단락은 4 ~ 8줄, 왼 쪽정렬을 원칙으로 한다. 3. 항해 요소의 구현 3.1 메 인메 뉴 3.1.1 메인 메뉴에서는 각 항목별 네비게이션과 전체적인 사이트 흐름을 알 수 있도록 구성한다.
3.1.2 상위 메뉴는 사이트의 큰 골격으로 학습장으로 들어갈 수 있는 메 뉴 와 사용자와 커뮤니케이션을 위한 메뉴 등을 반드시 포함한다. 3.1.3 하위 메뉴는 상위메뉴에 따른 종속적인 항목으로 각각의 메뉴별로 적절한 항해요소를 나타낸다. 여기에서 로그인 아이콘과 E-mail 아 이콘을 포함한다. 3.1.4 주요 컨텐트에는 전체적인 사이트의 성격과 이벤트나 뉴스 등을 나타낸다. 하위 메 뉴 요소 주 요컨 텐 트 [그림 Ⅲ-1] 메인메뉴 화면 예시 상 위 메 뉴 3.1.5 메인 메뉴 부분에 결합되는 아이콘의 형태는 <표 Ⅲ-1>과 같다.
<표 Ⅲ-1> 메인메뉴 아이콘 종 류 기능설명 화면위치 아이콘형태 파일명 안 내 이용안내 상단 infor.gif 강의실 학습을 위한 장 상단 report.gif 자료실 학습관련 자료교환 상단 bbs.gif 게시판 학습관련 정보교환 상단 service.gif 우편함 학습관련 자료/정보교환 상단 post.gif 만남의 장 사용자들간의 커뮤니티 형성 상단 meet.gif 관리자 모드 회원관리를 위한 장 상단 master.gif Q & A 사이트 전반적인 운영과 학습에 대한 내용 문답 상단 qna.gif 사이트맵 사이트 전체지도 상단 sitemap.gif
3.1.6 주요 컨텐트 내 메뉴아이콘 구성은 <표 Ⅲ-2>과 같다. <표 Ⅲ-2> 서브메뉴 아이콘 종 류 기능설명 화면위치 아이콘형태 파일명 스터디 서브메뉴 제목 좌상단 c_study.gif 과제 서브메뉴 제목 좌상단 c_report.gif 자료실 서브메뉴 제목 좌상단 c_bbs.gif 게시판 서브메뉴 제목 좌상단 c_board.gif 토론실 서브메뉴 제목 좌상단 c_plaza.gif 사이트맵 서브메뉴 제목 좌상단 c_map.gif 회원가입 서브메뉴 제목 좌상단 c_member.gif Q & A 서브메뉴 제목 좌상단 c_qna.gif 이용안내 서브메뉴 제목 좌상단 c_info.gif 로그인 서브메뉴 제목 좌상단 c_login.gif 3.2 자료 실 관리자에 의해 자료를 제공받는 경우가 있을 수 있지만, 사용자들간의 상호 자료 교환 형태도 가능하도록 구성한다. 3.2.1 기본 피드백을 위한 아이콘은 하단에 위치한다. 3.2.2 관리자 메뉴와 사용자 메뉴 구분을 관 리 자와 사용자간 의 별도로 권 한을 부여한다. [그림 Ⅲ-2] 참조
3.2.3 제목별, 내용별, 작성자 형태의 자료실 검색기능을 포함한다. 3.2.4 입력/출력화면은 동일하게 구성한다. 3.2.5 자료 다운로드는 목록에서나 내용보기에서 동일한 형식으로 다운 받 을 수 있도록 구성한다. 3.2.6 자료등록과정에서 원하는 자료를 업 로드 할 수 있는 기능이 반드시 포함한다. 3.2.7 자료 업 로드 기능, 글쓰기 기능, 관리자와의 피드백 기능(E-mail 등) 을 포함한다. [그림 Ⅲ-2] 자료실 글목록 3.2.8 입력폼과 자료 업로드 방식의 예시 화면은 다음과 같다. [그림 Ⅲ-3] 자료실 글올리기
3.2.9 자료보기형식과 파일다운로드링크를 위한 예시화면은 다음과 같다. 3.3 게 시 판 [그림 Ⅲ-4] 자료실 글읽기 게시판 구성시 필요한 요소는 [그림 Ⅲ-5]와 같다 3.3.1 기본 피드백을 위한 아이콘은 하단에 위치한다. 3.3.2 관 리 자 메 뉴 과 사용자 메뉴를 구분하고 관리자와 사용자간 의 별도로 권한을 부여한다. [그림 Ⅲ-5] 참조 3.3.3 제목별, 내용별, 작성자 형태의 검색기능을 포함한다. 3.3.4 입력/출력화면은 동일하게 구성한다. 3.3.5 웹사이트 운영자가 사이트의 게시 내용을 전달하는 기능을 제공한다. 3.3.6 사용자의 입력을 받아 웹 페이지로 구성하여 전달하는 기능을 제공 한다. 3.3.7 게시물을 삭제하거나 수정할 수 있는 기능은 사용자의 권한에 따라 차등 적용한다 [그림 Ⅲ-5] 게시판 글목록
3.3.8 게시판 글읽기 화면은 [그림 Ⅲ-6]을 기준으로 한다. [그림 Ⅲ-6] 게시판 글읽기 3.3.9 게시판 글올리기 화면은 [그림 Ⅲ-7]을 기준으로 한다. [그림 Ⅲ-7] 게시판 글올리기
3.3.10 자료실, 게시판 등 사용자 인터페이스 공통아이콘은 <표 Ⅲ-3>을 기준으로 한다. <표 Ⅲ-3> 게시판의 항해 아이콘 종 류 기능설명 화면위치 아이콘형태 파일명 홈으로 메인페이지로 이동 좌하단 home.gif 목록 자료실등에서 목록 출력 우하단 list.gif 다음 다음 목록으로 이동 우하단 next.gif 쓰기 내용작성(자료등록 등..) 우하단 write.gif 이전 이전 목록으로 이동 우하단 back.gif 수정 내용수정(자료 재등록 등..) 우하단 redraw.gif 검색 내용별,제목별 검색 중하단 search.gif 관리자 자료 관리를 위한 관리모드 좌하단 master.gif 인쇄 내용 인쇄 우하단 print.gif 답장 내용에 대한 답변 우하단 rewrite.gif 삭제 자료 삭제 우하단 del.gif
3.4 초등 학 생용 컨 텐 트 의 항해 아 이콘 3.4.1 버튼과 컨트롤은 인터페이스의 중요한 부분으로 위치의 일관성을 잃 지 않도록 주의해야 한다. 3.4.2 상위메뉴와 하위메뉴에 사용되는 아이콘의 기본구성과 형식은 <표 Ⅲ-4>와 <표 Ⅲ-5>를 기준으로 한다. <표 Ⅲ-4> 초등학생용 컨텐트의 상위메뉴 기본구성 사이즈 최소 100 80 (픽셀) 파일형식 GIF 포맷으로 최대 4KB가 넘지 않도록 한다. 글꼴 사이즈는 최소 14 point 이상 (폰트는 정하지 않음) <표 Ⅲ-5> 초등학생용 컨텐트의 하위메뉴 기본구성 이 미 지 사 이 즈 최소 150 35 (픽셀) 파 일 형 식 GIF 포맷으로 최대 3KB가 넘지 않도록 한다. 글 꼴 사이즈는 최소 12 point 이상 (폰트는 정하지 않음)
3.4.3 주 요 컨 텐 트 아 이콘 3.4.3.1 사이즈는 최소 가로 180픽셀, 세로 50픽셀로 한다. 3.4.3.2 파일형식은 GIF 포맷으로 한다. <표 Ⅲ-6> 초등 학생용 주요 컨텐트 아이콘 사이즈 최소 180 50 (픽셀) 파일형식 GIF 포맷으로 최대 3KB가 넘지 않도록 한다. 글꼴(제목) 사이즈는 최소 18 point 이상 (폰트는 정하지 않음) 기본은 좌상단으로 하되 특수한 경우 중앙 또는 우상단 제목바 위치 에 위치 할 수 있다. 사이즈는 최소 <font size=2 face=굴림체,돋움체, arial, 글꼴(내용) verdana color=#000000> 이상 (HTML 코드기준) 3.5 중 등 학 생용 컨 텐 트 의 항해 아 이콘 기본적인 항해메뉴나 형식 등은 공통사항 및 초등학생을 참조하고, 중/고 등학생 사용대상별로 달라져야 할 부분에 대한 내용만을 언급한다. 3.5.1 상위메뉴에 사용되는 아이콘이 기본구성은 GIF포맷으로 용량은 최대 1.5KB가 넘지 않도록 한다. 아이콘과 같이 출력되는 글꼴의 사이즈 는 최소 10 point 정도로 제작되어야 한다. <표 Ⅲ-7> 중등학생용 컨텐트의 상위메뉴 기본구성 사이즈 최소 60 50 (픽셀) 파일형식 GIF 포맷으로 최대 1.5KB가 넘지 않도록 한다. 글꼴 사이즈는 최소 10 point 이상 (폰트는 정하지 않음) 3.5.2 하위메뉴에 사용되는 아이콘의 사이즈는 최소 가로가 150픽셀, 세로
는 40픽셀로 하며, GIF 포맷으로 하여 최대 2KB가 넘지 않도록 한 다. 글꼴의 사이즈는 최소 10 p oin t 정도로 제작한다. <표 Ⅲ-8> 중등학생용 컨텐트의 하위메뉴 기본구성 이미지 사이즈 최소 150 40 (픽셀) 파일형식 GIF 포맷으로 최대 2KB가 넘지 않도록 한다. 글꼴 사이즈는 최소 10 point 이상 (폰트는 정하지 않음) 3.5.3 주요 컨텐트에 사용되는 아이콘은 제목바의 형태를 많이 쓰도록 한 다. 사이즈는 최소 가로가 625 픽셀, 세로는 50픽셀로 하며, 파일형식 은 GIF 포맷으로 최대 4KB가 넘지 않도록 한다. 글꼴의 사이즈 는 최소 18 point정도로 하며 위치는 좌상단으로 한다. <표 Ⅲ-9> 중등학생용 주요 컨텐트 아이콘 사이즈 최소 625 50 (픽셀) 파일형식 GIF 포맷으로 최대 4KB가 넘지 않도록 한다. 글꼴(제목) 사이즈는 최소 18 point 이상 (폰트는 정하지 않음) 기본은 좌상단으로 하는 것이 좋다. 좌우로 읽는데 가장 제목바 위치 편한 정렬이라고 할 수 있다. 3.5.4 자료실, 게시판 등 사용자 피드백을 위한 페이지 공통아이콘은 <표 Ⅲ-10>을 기준으로 한다.
<표 Ⅲ-10> 중등학생용 컨텐트의 공통 아이콘 종 류 기능설명 화면위치 아이콘형태 파일명 답변 질문에 대한 답변 좌하단 ans.gif 공지사항 초기화면에 공지사항 우하단 news.gif 다음 다음 목록으로 이동 우하단 next.gif 확인 작성된 내용을 제출 우하단 ok.gif 인쇄 컨텐트 출력 우하단 print.gif 수정 내용수정(자료 재등록 등..) 우하단 redraw.gif 저 장 내용저장 중하단 save.gif 검색 컨텐트 및 단어찾기 좌하단 search.gif 위로 상위 목록으로 이동 우하단 up.gif 쓰 기 내용입력 우하단 write.gif 관리자 관리자 모드 접속 좌하단 master.gif 메일 관리자/담당자에게 문의메일 좌하단 mail.gif 목록 컨텐트 목록으로 이동 우하단 list.gif 홈으로 사이트 홈으로 이동 좌하단 home.gif 취소 내용입력취소 우하단 cancel.gif 이전 이전목록으로 이동 우하단 back.gif
3.6 교 원 용 컨 텐 트 의 항해 아 이콘 기본적인 항해메뉴나 형식 등은 공통사항 및 초등학생을 참조하고, 교사 사용 대상별로 달라져야 할 부분에 대한 내용만을 언급한다. 3.6.1 상위메뉴에 사용되는 아이콘의 기본은 다음과 <표 Ⅲ-11>의 버튼과 컨트롤은 인터페이스의 실제적인 부분으로 적은 용량 및 심플한 것 을 기본으로 작업을 하며, 도안보다는 간결한 버튼으로 제작을 한다. <표 Ⅲ-11> 교원용 컨텐트의 상위메뉴 기본구성 사이즈 최소 70 30 (픽셀) 파일형식 GIF 포맷으로 최대 1KB가 넘지 않도록 한다. 글꼴 사이즈는 최소 9 point 이상 (폰트는 정하지 않음) 3.6.2 하위메뉴에 사용되는 아이콘은 최소 가로150픽셀, 세로 40픽셀로 제 작하도록 하고, GIF파일로 최대 2KB가 넘지 않도록 한다. <표 Ⅲ-12> 교원용 컨텐트의 하위메뉴 기본구성 이미지 사이즈 최소 150 40 (픽셀) 파일형식 GIF 포맷으로 최대 2KB가 넘지 않도록 한다. 글꼴 사이즈는 최소 9 point 이상 (폰트는 정하지 않음)
<표 Ⅲ-13> 교원용 주요 컨텐트 아이콘 이미지 사이즈 최소 240 30 (픽셀) 파일형식 GIF 포맷으로 최대 2KB가 넘지 않도록 한다. 글꼴(제목) 사이즈는 최소 18 point 이상 (폰트는 정하지 않음) 제목바 위치 기본은 좌상단으로 하는 것이 좋다. 좌우로 읽는데 가장 편한 정렬이라고 할 수 있다. 3.6.3 자료실, 게시판 등 사용자 피드백을 위한 페이지 공통아이콘은 <표 Ⅲ-14>를 기준으로 한다. <표 Ⅲ-14> 교원용 컨텐트의 공통 아이콘 종 류 기능설명 화면위치 아이콘형태 파일명 홈으로 초기화면으로 가기 좌하단 home.gif 뒤 로 전 목록으로 이동 우하단 back.gif 취 소 다음 목록으로 이동 우하단 cancle.gif 다운로드 원하는 파일을 받음 우하단 down.gif 목 록 등록된 자료 출력 우하단 list.gif 메 일 내용수정(자료 재등록 등..) 우하단 mail.gif Admin 관리자 모드 중하단 master.gif 공지사항 새로운 소식 알림 좌상단 news.gif 다 음 다음 목록으로 이동 우하단 next.gif
<표 Ⅲ-14> 교원용 컨텐트의 공통 아이콘(계속) 종 류 기능설명 화면위치 아이콘형태 파일명 확 인 자료등록 전송 우하단 ok.gif 쓰 기 글쓰기, 자료작성 우하단 write.gif 검 색 자료 검색 중하단 search.gif 저 장 내용입력 완료 우하단 save.gif 수 정 입력내용 수정 우하단 redraw.gif 프 린 트 내용출력 우하단 print.gif 답 변 내용 답변 우하단 ans.gif 3.7 아 이콘 수 정 방 법 앞에서 제시한 각종 아이콘은 수정이 가능한데, 모든 이미지 파일은 Adobe Photoshop에서 작업이 가능하다. 즉, 이미지 수정을 위한 자료는 포토샵 파일에서 레이어 형태로 작업되어 있고, 수정을 위해서 해당 레이 어를 적절한 형태로 바꾸어 줄 수 있다. [그림 Ⅲ-8] 레이어에서 텍스트 수정 방법
(이 면은 여백입니다.)