1
임 순 범
숙명여대 정보과학부 멀티미디어학과
멀티미디어 디자인 이슈
멀티미디어 컨텐츠 입문 (2001 Fall)
2
목차
1. 디자인 이슈 2. 정보의 구조 3. GUI
4. 멀티미디어 GUI 구성요소
5. GUI 디자인 원칙
1. 디자인 이슈
• 멀티미디어 디자인
– 전통적인 매체 디자인 방법론의 연장선상
• 기존 매체
– 인쇄 , – 방송 ,
– Identity Design (BI, CIP)
• 뉴미디어 시대
– 정보 디자인 , – 인터랙션 디자인 – 매체 통합
4
인쇄
• 500 년 역사
– 정보전달의 대표적인 수단 , 다양한 정보 표현 – 체계화된 제작 프로세스와 방법론 정착
• 인쇄물의 특징 반영
– 출판물 발행 과정 : 수 차례 내용상 오류 점검 – 정보 조직론 , 출판 방법론
• 개별 단위 분할 및 조직 , 각주 , 목차 작성 등
– 편집 디자인 / 레이아웃 디자인 원칙 : 문자와 그림
• 멀티미디어 특징
– 인쇄물 그대로 변환은 곤란
방송
• 대중 문화에 대한 영향력
– 불특정 다수 (mass media) 에 짜여진 각본을 전달 – 일 방향 : 다른 매체 경로로 시청자 반응 취합
• 제작방법 , 구성원 조직 유사
– 일련의 제작 과정이 유사 :
• 브레인스토밍 회의 , 콘티 , 스크립트 , 촬영 , 편집 , 방송 등
– 제작책임자 (PD), 작가 , 조명 , 촬영 , 편집 등
• 외부전문가 , 다른 성격의 업무로 구성
• 치밀한 시나리오로 정보 전달
– 시나리오 전개 , 강조 , 연결 등 기법 활용
• 그러나 방송은 평면상의 디자인
=> MM 은 여러 평면 연결 , 다양한 구성요소 , 상호작용
6
Identity Design
• BI/CI (Brand Image, Corporate Image)
– 로고 , 상품 , 출판물 , 광고 , 언론발표 , 온라인 서비스 – 고객에 대한 기업 이미지 => 회사의 비전 / 목표의 표현 – 기업 이미지의 통일화 : Visual Corporate Identity
• 1950’s IBM CI 전략
• 멀티미디어 BI/CI
– 디자인에 멀티미디어 요소 포함 – 멀티미디어 제품 , 웹 사이트
멀티미디어 디자인 이슈
• 정보디자인
– 데이터 조각 => 의미가 있는 구조로 설계 , 강조 ,
• 사용자에 목표안내 : 정보 검색 , 정보 습득 효율
– 전체 구조 및 구성 요소간 관계를 결정 , 상호작용 고려
• Interactivity 디자인
– Human Computer Interaction
– 하드웨어 : 키보드 , 마우스 , 펜 , 데이터글러브
– 소프트웨어 : 메뉴 , 기능버튼 , 핫워드 , 가상공간 탐색
• 매체의 통합
– CD-ROM, 전자책 , 인터넷 방송 , 디지털방송 , PDA
8
2. 정보의 구조
• 멀티미디어 컨텐츠를 표현하는 정보의 구조
– 선형 구조 (Linear Structure)
– 계층 구조 (Hierarchical Structure) – 대화형 구조 (Interactive Structure)
– 데이터베이스 구조 (Database Structure) – 혼합구조
선형구조
• 대표적 단순 구조
– 일련 정보를 순차적으로 구성 – 미리 정해진 줄거리를 전달 – 사용자가 페이스만을 조절
• 적용
– 유아용 이야기 제품 , 광고 , 프리젠테이션 – 타임라인방식 저작도구
– 부가적으로 하이퍼 링크 기능 포함
시작 page1 page1 page1 종료
clip1 clip1 clip1
시작 종료
10
계층구조
• 가장 전형적인 방법
– 책의 메타포를 적용 : 장 / 절 / 항 /…
– 상위개념 - 하위개념 존재 시
– 내용간 순서 / 논리 등에 연계성 있는 경우
• 단점
– 길을 잃는 경우 발생 => 여러 경로 제공
– 컨텐츠 범위 정보 없음 ( 예 , 책의 두께 , 위치 ) => 맵 제 공
• 적용
– 교육용 타이틀 , 웹 페이지 등
– 부가적으로 하이퍼 링크 기능 포함
대화형 구조
• 여러 가지 경우의 수로 조합하여 제공
– 개별 정보 / 사건을 미리 정해진 조합의 경우를 탐험 – 미리 정해진 방향으로 전개
• 적용
– 게임 ( 어드벤처 ), 사용자 선택방식의 영화 – 매번 새로운 느낌 , 제작 어려움
시작
장면 1a
장면 1b
장면 2a
결론 2 결론 1 장면 2b
장면 3a
장면 2c
장면 3b 장면 3c
12
기타 구조
• 데이터베이스 구조
– 대규모 데이터
– 정보 검색 기능이 필요
– 백과사전 , 정보연감 , 검색 사이트 등
• 혼합 구조
– 여러가지 정보 구조 혼합 , 주된 구조 + 보조적 구조 포함 – 실제 대부분의 컨텐츠
• 특성이 다른 정보들로 구성된 경우
• 각 구조의 장점을 취합
– 저작도구 기능 부족 시 직접 프로그래밍
3. GUI
• Graphic User Interface
– 기본 요소 : 메타포 ( 책상 ), 윈도우 , 아이콘 , 메뉴 , 마우스 – AT&T 연구소 , Macintosh : 운영체제에서 제공
• HCI (Human Computer Interaction)
– CUI (Character UI)
• 명령어 방식 (command-driven), DOS, Unix
– GUI
• 널리 사용 , Mac, MS Windows, X-window, Web Browser
– VRUI (Virtual Reality UI), 3D UI
• 가상현실 분야 연구 중 , 3 차원 입력 및 표시
• 3 차원 물체 보기 , 선택 ( 평면상 선택 ), 이동
• 3 차원 탐색하기 (navigation), 시각표현 (visual feedback)
14
VRML 예
4. 멀티미디어 GUI 구성요소
• 데스크탑 메타포
– “WIMP 인터페이스” : Window, Icon, Menu, Pointer
• Window
– 일반적인 윈도우 구성 요소 :
• 타이틀 바 , 메뉴 , 아이콘 , 툴 바 , 작업화면 , 스크롤 , 상태 바
– 목적에 맞도록 구성 ( 예 , p.179)
• 초기화면 (initial screen) : 표지에 해당
• 메뉴화면 (menu screen) : 계층적 정보 구조 , 여러 단계 가능
• 실행화면 (working window) : 주된 화면 , 가변적 배치 , 분할
• 컨트롤 도구 (controls) : text input box, textarea, list box, radio bu tton, checkbox button, push button, label
• 대화상자 (dialog box) : alert, confirm, prompt, dialog box
“Visual Programming”
16
• 아이콘 (Icon)
– 정보의 기능 / 의미를 상징하는 단추모양의 그림 – 메뉴 , 도구 , 상징 표현 등
• 메뉴 (Menu)
– 명령어 목록 ( 그룹 ) : pull-down, pop-up, tear-off – 메뉴의 논리적 구성 , 위치 설계
• 포인터 (Pointer), Cursor
– Visual Feedback
– 위치정보 표시 , 작업모드 , 이동방향 , 시스템상태 (p.182)
– Hot spot, Balloon Text
5. GUI 디자인 원칙
• 조직성 (Organization)
– 명백하고 일관성 있는 개념적 구조 – 잘 정돈된 레이아웃 디자인 필요
• 그리드 시스템 , 타이포그라피
• 경제성 (Economy)
– 꼭 필요한 요소만 포함
– 의미를 명확하게 ( 혼란 방지 ) – 중요한 정보는 강조
• 의사소통성 (Communication)
– 정보의 모습에 대한 적합성 p.185 그림
– 사용자에게 적합하도록 : 연령 , 사용시간 , 성별 , 교육 등
18
• 일관성 (Consistency)
p.186 그림– 내부적인 일관성 :
• 하나의 제품 내 각 구성요소의 크기 , 위치 , 조작법 , 의미 등
– 외부적인 일관성 :
• 회사 내 제품 간 , 여러 회사의 같은 종류의 컨텐츠 사이
– 실세계와의 일관성 :
• 실세계에 근거한 메타포 적용
• 기타
– 예측성 (Predictability)
• 사용자가 직관과 예측으로 사용
• 제품의 모델 , 디자이너 모델 , 사용자 모델이 서로 근접해야
– 안정성 (Stability)
• 사용자가 실수를 않도록 : 실수에 대한 대책 , 초기값
– 심미성 (Aesthetic Integrity)
– 피드백 (Feedback) : 예 , 마우스 커서
– 장애자 배려
• 작은 글자 , 색상으로만 구분 ( 색약 ), 시각 / 청각 장애 고려
20
GUI 디자인 기법
• 정보의 양
– 한 화면에 보여 줄 정보의 양 ?
• 사용자에게 꼭 필요한 최소량 : 대상에 따라
– 화면 밀도를 낮추는 방법
• 생략 기법 , 친숙한 정보 표현 양식 사용 , 도표 활용
• 그룹핑
– 화면 내 조직성 구현
– 공간 분리 , 외곽선 , 색상에 의한 그룹핑
– 의미적인 연관성 , 그룹 제목 => 효과적인 전달 , 공간절 약
• 돋보임 : 주목 효과
– 깜박임 (Flashing) : 긴급상황 전달 시
– 애니메이션 (Animation) : 무의미한 반복 지양 – 반전 (Reverse) : 선택에 대한 표시
– 밑줄 (Underline) : hot word 에 사용 , 가독성 방해 않도록 – 색상 (Color) : 텍스트 강조 시
• 본문 / 핫워드 / 배경과 구분 , 가독성 방해 않도록
– 밝기 , 굵기 차이 (Brightness, Boldness) : 2 단계 정도만
• 위치와 순서
– 보는 순서 : 좌상 => 우하 ( 중요한 내용은 좌상에 배치 ) – 관습 : 예 ) 메뉴 배열 “파일 , 편집 , 주요 메뉴 , … , 도움말”
– 철자순 , 시간순 등
22
• 연관성 표현
– 조직성 구현 : 그룹핑 , 정렬 , 들여쓰기 등 – 들여쓰기 (Indentation) : 계층적 연관성
• 상징적 그래픽 사용
p.194– 실생활 이미지 사용 상징적 표현 – 색채나 패턴을 표현할 때
– 사용자 관심을 끌고자 할 때
