12. 웹 디자인(Web Design) 웹 페이지를 만든다는 것은 인터넷 이라는 가상 세계 즉, 웹에 자신이 만 든 문서를 공개한다는 의미이다. 물론 웹 컨텐츠를 기술하는 언어인 HTML 을 자유롭게 구사할 줄 알아야 하겠지 만, 손쉽게 웹 페이지를 작성할 수 있 는웹에디터(web editor)를 이용하여 홈페이지를 구축할 수 있기 때문에 큰 문제는 없다고 할 수 있다. 또한 인터넷에서 3차원 가상현실 기 술을 구현하는 것을 웹 3D(Web3D)라 고한다. 웹 3D 구현 기술은 기존의 3 차원 입체 영상을 웹 상에 구현한 것 으로, 앞으로 웹 3D가 적절히 응용된 다면 인터넷을 컴퓨터로부터 벗어나 는 데에도 큰 역할을 담당할 것으로 기대된다. 137
웹디자인의고려사항 로딩 시간을 단축하기 위한 웹 디자인의 기본 원칙 (1) 웹 화면의 크기 - 웹 페이지 화면의 크기: 사용자 시스템 사양을 추측하여 결정 - 실제 화면의 크기: 웹 브라우저가 차지하는 공간을 제외시키는 것이 졸다. 예) 모니터 디스플레이 해상도가 640 480 픽셀의 경우에 웹에서 사용하는 485 350 픽셀 정도밖에 되지 않으므로, 제한된 공간을 효율적으로 분할하여 사용하는 기법이 필요 (2) 파일의 크기 - 파일의 크기는 가능한한 작을수록 좋다. (로딩 시간이 10초 이하로 짧아야 한다.) - 큰 파일을 사용하여야 하는 경우: 인터레이스 기법이나 여러 작은 조각으로 나눈다. 예) GIF 파일 등은 한 번에 4개씩 전송되므로 빠른 시간에 로딩(loading)이 가능하다. (3) 파일의 형식 - 이미지 파일의 형식: GIF 파일, JPEG 파일 -문자, 버튼및도표등: GIF 형식 이용 - 사진, 색 변이가 큰 경우: JPEG 형식 유리 (4) 색상 팔레트 -색상수: 256 칼라 이하로 제한 138
웹 디자인 작성 지침 간단 명료하게 작성한다. 빠른 검색을 할 수 있도록 구성한다. 독립적인 형태로 구성될 수 있도록 한다. 단어 강조를 너무 남발하지 않는다. 그래픽 이미지를 과용하지 않는다. 첫 화면부터 플러그인을 적용하지 않는다. 서로 연관된 정보는 손쉽게 파악할 수 있도록 묶는다. 색체, 공간, 외곽선 모두를 사용하여 정보를 그룹핑 그룹핑(grouping) 하이퍼스페이스에서 길을 잃지 않도록 한다. Home Page 길잃음 (disorientation) Home Page 문서 A 문서 B 문서 A 문서 B 139
웹 디자인 기본 사항 이미지 사용 텍스트의 문단 정렬 - 부드러운 느낌을 주는 이미지로 사용자에게 친근감 부여 - 웹 사이트 전체를 둘러볼 수 있는 메뉴는 간단하고 화려한 이미지 처리 - 직접 이미지에 하이퍼링크를 설정 - 전체 웹 사이트의 있는 웹 페이지들의 일관된 문단 정렬 형식 - 단조로운 하나의 문단 정렬 형식만은 피할 것 - 사용자가 내용 파악에 집중력을 갖도록 구성 크기와칼라선택 전체적인 구성 배치 - 텍스트나 배경에 칼라 배색이 중요 - 칼라는 웹 페이지 내용에 맞는 느낌으로 구성 - 텍스트와 이미지 크기에 대한 고려(전송시 시간 낭비) - 너무 시각적으로 눈을 자극하는 칼라는 피할 것 - 여러 개의 구성 요소를 적소에 배치 - 웹 페이지에 리듬감을 부여 - 사용자가 쉽고 정확하게 내용을 검색토록 구성 140
웹페이지설계 웹사이트용도및목적설정 웹 사이트 주제 설정 구성 설계와 항목별 내용 설정 도식화 작업 스토리 보드 작성 및 제작 링크 설정 작성한 웹 페이지의 검토 - 용도에 따라 디자인 방향이 달라진다. - 어떠한 부류의 참조물을 검토해야 할지 파악 - 사용자에게 최대한 효율적인 정보를 제공할 수 있도록 구성 - 어떠한 내용과 주제를 가지고 작성할 지를 검토 - 주제 설정 후 웹 사이트의 성격을 규정 - 목차와 웹 페이지 내에 들어 갈 내용들에 대한 검토 - 구성이 중복 또는 빈약하거나 방대하지 않게 전체적인 구조 검토 - 어떠한 계층 구조를 갖는지 일목 요연하게 보여 주는 설계도 도식 - 유지보수를 위한 한 방편 - 웹 페이지는 비선형 구조이므로 구현 방법을 작성 - 작업 표준화로 웹 페이지 디자인에서의 통일성과 조화를 이룰 것 - 외부 문서 선정 및 문서간 링크를 설정 - 설계도와 스토리 보드에 의한 웹 페이지와 항목에 대한 연결 - 항해중길을잃게(lost in HyperSpace) 되는 경우가 없도록 구성 - 작성된 웹 사이트의 평가는 사용자가 판단하므로 철저히 사용자 입장 에서 검토하는 단계가 필요 (제3자에게 모니터링하는 방안이 바람직) 141
웹3D 디자인 웹 3D(Web3D) 인터넷에서 3차원 가상현실을 구현하는 것 웹3D의필요성 - 사용자가 네비게이션(navigation)을 통해흥미를느끼고있다. - 정보 인지도를 급격히 높일 수 있다. - 높은 신뢰도와 관심을 유발하는데 효과적이다. - 인터넷을 통한 홍보와 전시 등의 효과를 극대화할 수 있다. 웹 3D 이미지를 디자인하는 방법 이미지 기반으로 3차원 이미지를 만든다.(시각적으로 우수) 물체를 3차원 프로그램으로 모델링 한다.(표현에 유리, 접근 불리) 142
가상현실의 정의 가상현실(Virtual Reality; VR) - 어떤 단일화된 학문이 아니며, 최신의 기술들이 집약된 경험화된 기술의 축적 - 컴퓨터로 창조된 가상 공간에서 인간 감각계(sensory system)와의 상호작용을 통해 공간적, 물리적 제약에 의해 현실세계에서는 직접 경험하지 못하는 상황을 간접 체험할 수 있도록 만든 정보활동 분야의 새로운 패러다임 중 하나. - 컴퓨터와 기계 및 전자 장치로 구성된 하드웨어와 컴퓨터 소프트웨어의 도움을 받아 현실 세계와 같은 느낌이 나도록 조성한 가상의 환경(VE: Virtual Environment) 또는 가상 공간 (cyberspace) - 시간과 공간의 제약없이 컴퓨터로 창조된 가상의 장소를 실제처럼 느끼면서 자신의 의도 대로 탐색 및 상호작용 할 수 있도록 하는 기술 143
가상현실 기술의 분류 시스템 환경에 따른 분류 몰입형 가상현실 제삼자 가상현실 탁상용 가상현실 컴퓨터에서 만들어진 3차원 환경에 특수 장비를 이용해 감각을 느끼게 한다. 비디오 카메라로 촬영된 자 신과 컴퓨터상의 모델링 기 법을 응용한다. 마우스, 키보드, 조이스틱등 일상적인 컴퓨터 장비를 이 용해 가상현실을 체험한다. 보여지는방식에따른분류 파노라마 가상현실(Panorama VR) 오브젝트 가상현실(Object VR) 주위 배경을 둘러 보는 효과 - 좌우 360º - 상하 180º 예) 모델하우스, 공항, 호텔 하나의 사물을 실제 처럼 돌려가면서 볼 수있는효과 예) 박물관의 유물, 전자제품, 조각, 자동차 144
가상현실을 위한 고려 사항 전통적인 시뮬레이션과 구별하기 위한 고려 사항 1 사용자가 3차원 공간에 직접 있는 것과 같은 임장감(presence)을 주어야 한다. 2 실감나는 정보 제시를 통하여 몰입감(immersion)을 높여야 한다. 3 사용자는 가상 환경을 능동적으로 조작할 수 있고, 적절하고 자유롭게 원하는 곳으로 다닐 수 있게 네비게이션과 가상 환경을 조작(manipulation)할 수있게 한다. 4 가상환경 내에서는 실세계와 같은 자연법칙이 적용되거나 자율적(automatic)인 행동을 수행할 수 있는 물체가 존재 가능해야 한다. 아바타(avatar)의 의미 본래 산스크리트어로 신이 인간이나 동물의 몸을 빌려 나타난 것을 말한다. 우리말로는 화신( 化 身 )이라고 할 수 있으며, 에서는 가상의 공간을 움직이는 자기 자신의 분신 아바타(avatar) - 실시간으로 의사 소통이 가능 - 다양한 장소를 체험할 수 있는 공간 구축 - 상대방 객체를 받아들일 수 있다. 145
가상현실을 위한 소프트웨어 Cult 3D GIBLE 3D 멀티 플랫폼 3차원 오브젝터 렌더링 엔진 전자상거래 기반의 통합 솔루션 Photo 3D Octree Shout 3D 사진 이미지로부터 3차원 모델, 텍스쳐 등을 생성 복셀 기반의 차세대 3차원 그래픽 기술 온라인상에서 시각화와 몰입을 시도 Atomic3D Blaxxun3D Pulse 3D 웹 3D 컨텐츠 제작용 플러그인 없이 웹상에서 형식을 재생 반사 매핑을 통해 완벽한 반사 효과를 구현 146
웹3D 구축을위한 가장 경제적인 - 다른 3차원 디자인을 위한 프로그램 구입 비용이 크고, 접근이 어렵다. - 은 완전히 개방되어 있다. - 특별한 프로그램 없이도 구현할 수 있다. 의 특징 - 원격지 사용자와 함께 가상 공간을 공유할 수 있다. - 멀티미디어 데이터를 가상 공간에 통합하여 상호작용 할수있다. - 텍스트를 기반으로 3차원 공간을 표현할 수 있다. - 앵커(anchor)를 통해HTML과 문서를 불러들일 수 있다. - 웹관련표준언어를모두수용할수있다. 상호작용성 네비게이션 장면 구성 가상성 파일 형식 파일 크기 애니메이션 비디오 그래픽 퀵타임 VR 유 무 유 무 유 가능 실시간 생성 사물 모델링 텍스트 작다 불가능 녹화 장면 인공적 그림 바이너리 크다 불가능 이전녹화장면 실제장면녹화 바이너리 크다 불가능 그려진 그림 그림및사진 바이너리 작다 제한 녹화및실시간 사진 바이너리 크다 147
의 표준화 과정 CERN(European CERN(European Laboratory Laboratory for for Particle Particle Physics) Physics) Request Mailing List 1차 WWW 학술대회 1994.3 3차원 web방식 제안 1997.4.4 ISO/IEC DIS 14772-1 1997.5.12 ISO/IEC Initial 14772-2 1997.12 ISO/IEC 14772-1 Network Hypermedia 1989~1993 Silicon Graphics의 Open Inventor의 필요없는 많은 기능을 제거, 기본적인 3차원 모델 표현 1994. 11.2 #1 #1 Wired- Released Released Specification Specification CD CD 14772 14772 1996.8.4 1996.8.4 at at Siggraph Siggraph 96 96 interaction interaction animation animation scripting scripting prototyping prototyping 1993 WWW WWW Browser Browser NASA NASA mosaic mosaic 2차 WWW 학술대회 1994.11 URL기능 추가 1996.7.15 #3 #3 1996.6.4 #2b #2b URL parser: QvLib 개발 (C++로 작성한 고속 해석기) WebSpace WebSpace (최초의 브라우저) (최초의 브라우저) 1996.5.30 #2 #2 HTML HTML Silicon Graphics W/S 에서만 사용가능 1996.4.18 #1 #1 1995. 5.8 #2 #2 Web Web Browser Browser 1995.5.26 #3 #3 Released Released Specification Specification 1995.5.26 1995.5.26 object object 정의 정의 scene scene 정의 정의 WWW: WWW: URL URL VAG( Architecture Group) Moving World vs. Active 2 제안 1995.8 1996.1.29 C C 물체의 물체의 재질, 재질, 표현 표현 카메라 카메라 위치, 위치, 이동 이동 148
용 브라우저 Webspace Navigator SiliconGraphics CosmoPlayer Cosmo Software - 실리콘 그래픽스/템플릿 소프트웨어(TGS) 공동 개발 - 최초의 VPML 브라우저(현재 사용하지 않음) -만 지원하기 위한 도구 - 풍부하고 역동적인 웹 브라우징으로 컨텐츠도 재생 가능 WotldView Viscape Platunum Superscape - 익스플로러와 넷스케이프를 위한 가장 빠른 3차원 플러그인 -MS의 액티브 엑스와 디렉트 3D를 지원 - 뷰거리, 해상도 및 세부 텍스쳐의 독립적 제어가 가능 Cortona ParallelGraphics - Windows, OpenGL, Direct 3D 및 Java 언어를 지원 - 컨텐츠를볼수있는대표적인 플러그인 - 부드러운 화질을 제공, 완전화면에서 스트레오 영상 지원 - 조이스틱을 이용한 네비게이션 및 조작이 가능 149
저작 도구 Cosmo World Cosmo Software VRCreater Platinum Tech. TrueSpace Caligari 3D Webmaster Superscape Rhino 3D Rhinoceros 3D Studio MAX Catalyst Kinetix NewPioneer -만 지원하기 위한 도구 - 폭넓은대화형3차원웹저작및출판시스템 - 사용자가 원하는 방식대로 작업할 수 있다. - 확장 플러그인 구조를 가진 유일한 제작 시스템 -에 대한 지식이 필요하지 않다. - 창으로부터 3차원 오브젝트 등을 볼수있다. - 에서 애니메이션과 모델 작성 기능 - 브라우징 속도 빠름(Polygon Reduction 기법 이용) - 데이터를 만드나 불러 들일 수 없다. - 대화형 3차원 웹사이트를 빠르고 손쉽게 구현 - 편집 용이, 사용 용이, 통합된 편집 환경 제공 - 가상세계를 제어하는 SCL 프로그램 제공 - 산업용 디자이너를 위한 시제품 모델링 도구 - 부드러운 넙스(NURBS) 곡선과 표면 사용 - 3D Studio MAX, Softimage 등에서사용가능 - 플러그인 형태로 데이터를 지원 - 오류는 제작자가 직접 텍스터를 통해 수정이 바람직 - 게임 엔진을 이용한 과 자바로 온라인 게임 제작 - 기존 데이터를 응용, 데이터로 활용 가능 150