셋째마당 가상현실프로그래밍 학습목표 - World Toolkit 에대하여배운다. VRML 을이용하여가상현실프로그래밍을배운다. - 가상현실저작도구를이용하여가상박물관을제작해본다. - 47 -
1. 가상현실프로그래밍 가상세계를구축하기위한방법은저작도구를이용하여모델링을하는방법이있고, JAVA 3D, OpenGL, DirectX 등과같은프로그래밍언어를이용하는가상현실프로그래밍을하는방법이있다. 가상현실프로그래밍에대해알아보기에앞서장면그래프 (Scene Graph) 에대해공부하고, 가상세계구축을위한프로그래밍인터페이스 : API (Application programming interface) 인 Sense8 TM 의 WorldToolKit과가상현실언어인 VRML 에대해살펴보도록한다. 장면그래프 (Scene graph) 트리구조란? - 트리 : 선형구조가아닌나무나족보에서처럼노드사이의연결 - 노드 : 기억단위 관계가계급적인구조를가진다. - 루트노드 : 꼭지점에있는노드 - 말단노드 : 루트노드의다른쪽끝에있는노드 - 자식노드 : 한노드의한단계아래에있는노드 - 부모노드 : 한노드의한단계위에있는노드 - 형제노드 = 트리의깊이 = 레벨의수 = 계층값 - 48 -
계층 1 가 루트노드 계층 2 나 다 말단노드 라마바사 아 형제 ( 같은계층 ) 의노드 그림 60. 트리구조 장면그래프의구조 장면그래프도노드와노드가가지로연결이되어있는기본적으로트리구조의형태로이루어져있다. 장면그래프에서노드를구분하면루트노드중간노드그리고실제눈에보이는객체를표현하는말단노드로구성되어있다. 장면그래프의예 ( 그림 62) 에서공을쥐기전의장면그래프( 왼쪽) 에서는공노드와손 의노드가형제노드로구분되어있어서그둘이독립적으로되어있 다. 공을쥔후의장면그래프는공노드와손바닥노드가중간의부모 노드에묶여있어서손과공이같이움직이게되어있다. - 49 -
그림 61. 공을쥐기전, 공을쥔후의장면 루트노드 뷰포인트노드 중간노드 손바닥노드 공노드 엄지손가락노드 새끼손가락노드 중간노드 말단노드 루트노드 뷰포인트노드 중간노드 손바닥노드 공노드 엄지손가락노드 새끼손가락노드 중간노드 말단노드 그림 62. 공을쥐기전과, 쥔후의장면그래프의표현 - 50 -
Sense8 TM WorldToolKit 특징 - C 라이브러리형태( 프로그래밍언어의일종) 로제공되어어플리 케이션에관계없이완벽한호환성을유지한다. - 과학용, 상업용 3D 어플리케이션을개발하는데있어서강력한 기능을제공한다. - 네트워크분산시뮬레이션, CAVE와같은방형태의몰입형가상 현실시스템을제공한다. - 전세계의각종상용장치(HMD, 위치추적기, 네비게이션컨트롤 러) 들을가장많이지원한다. - 속도향상을위한설계가되어있다. - 공간상의사용자와각각의물체와의거리에맞추어렌더링의유 무를선택하는기법( 상세화수준 : Level-of-Detail Switching) 등을통해수행속도와제어능력을향상시킨다. 상세화수준이란? 3차원모델링오브젝트를생성해내어그것을실시간으로렌더링하기위해서는오브젝트가최적화되어야한다. 오브젝트들을표현할때카메라에근접할수록상세화시키고, 반대로카메라에서멀리떨어지거나아주작아질때에는간단화시킨다면실시간렌더링을하는데있어서시스템의부하를줄일수있다. - 51 -
그림 63. WorldToolKit을사용한어플리케이션 ( 그림 63) 은 WorldToolKit을사용하여개발한어플레케이션으로가상공 간에움직이지않는테이블이있고, 그위에농구공과축구공이움직일 수있도록놓여있다. 펜모양의물체에는가상현실장비인 Fastrak의 스타일러스펜(Stylus Pen) 센서를연결하여움직일수있게해놓았고, 그것이농구공이나축구공과닿았을때스타일러스펜의버튼을누르면 펜이움직이는데로물체들이움직이게하였다. table = WTmovnode_load(root, "table2.3ds", 1.5); basketball = WTmovnode_load(root, "basketball.3ds", 3.2f); football = WTmovnode_load(root, "football.3ds", 0.072f); baseball = WTmovnode_load(root, "baseball.3ds", 0.2f); 그림 64. 객체를생성하는데사용한 WTK 프로그램소스 - 52 -
( 그림 64) 에서볼수있듯이객체를생성하는데에아주간단한소스만 으로 3 차원의객체를생성할수있다. // fastrak과 cyberglove의모션링크설정 sensorlink = WTmotionlink_new(stylus, pen, WTSOURCE_SENSOR, WTTARGET_MOVABLE); bballlink =WTmotionlink_new(stylus,basketball,WTSOURCE_SENSOR, WTTARGET_MOVABLE); fballlink =WTmotionlink_new(stylus, football, WTSOURCE_SENSOR, WTTARGET_MOVABLE); WTmotionlink_setreferenceframe(sensorlink,WTFRAME_VPOINT, WTuniverse_getviewpoints()); WTmotionlink_setreferenceframe(bballlink, WTFRAME_VPOINT, WTuniverse_getviewpoints()); WTmotionlink_setreferenceframe(fballlink, WTFRAME_VPOINT, WTuniverse_getviewpoints()); WTmotionlink_enable(bballlink, FALSE); WTmotionlink_enable(fballlink, FALSE); WTsensor_setsensitivity (stylus, 0.08f*radius); 그림 65. 객체에센서를연결하는데사용한 WTK 프로그램소스 - 53 -
VRML (Virtual Reality Modeling Language) VRML은인터넷상에서상호작용하는 3차원멀티미디어를기술하기위 한언어로 ISO/IEC 14772-1 의국제표준파일형식이다. 특징 - 인터넷상에서 3차원그래픽을표현하는국제표준으로원하는사 람누구나가자유롭게 VRML 기술을사용할수있으며, 이를응용 한프로그램을개발, 판매할수있음 - 소스가공개되어있어누구나 VRML을만드는기술을참고할수 있고, 메모장으로 3D 컨텐츠를제작할수있다. - 높은수준의프로그래밍기술을필요로하지않는다. - 그래픽스라이브러리 (OpenGL, Direct3D) 를이용한복잡한프로 그래밍대신아주간단한텍스트입력만으로가능 VRML 의역사 - VRML 1.0 1994년제1회 WWW 컨퍼런스에서처음 VRML 기술을언급, 실리 콘그래픽스(SGI) 의오픈인벤터(Open Inventor) 파일포맷을기초 로 VRML 1.0 규약을제정 - VRML 2.0 1996년 8월 VRML2.0 규약을발표 기존 VRML 1.0 의단점인사용자와의상호작용관련기능과키프 레임애니메이션등의기능을강화, 네비게이션인포노드 (Naviga tioninfo node) 를추가하여아바타표현을가능하게함 - VRML 97-54 -
VRML2.0 의사소한기능등의수정을통해그래픽언어의표준을 제안, 1997 년 6 월국제표준기구(ISO) 로부터표준번호를부여 받으며인터넷가상현실표준으로인정받음 - X3D (Extensible 3D) VRML97 을대체할차세대표준안의명칭으로오디오/ 비디오스트 리밍기술및확장된기술을적용하여기존인터넷은물론디지털방 송과같은다양한분야에적용시킬수있는기술을목표로함 VRML 뷰어(Viewer) 플러그인형태로설치하며, VRML을웹상에서보기위해서반드시필요한프로그램이다. - 코스모소프트 (CosmoSoft) 의코스모플레이어 - 인터비스타(Intervista) 의월드뷰(WorldView) - 블락선(Blaxxun) 의컨택트(Contact) - 패라렐그래픽스(Parallel Graphics) 의코토나(Cortona) 다운로드주소 http://www.parallelgraphics.com/products/cortona/download/iexplore/ - 55 -
2. VRML 프로그래밍 본장에서는앞에서설명한 VRML을이용하여가상현실프로그래밍을 단계별로실습해본다. 이를통하여간단한 3차원오브젝트를만들어 본다. ( 그림 66) 은 VRML을이용하여 3 차원의치약모델을만든결과이다. 그림 66. VRML 로만든치약모델 - 56 -
VRML 의실행단계 VRML 뷰어설치 http://www.parallelgraphics.com/products/cortona/download/iexplore/ - 익스플로러창위의주소를복사하여웹싸이트를연다. - ( 그림 67) 에서버튼을클릭한다. 그림 67. VRML 뷰어설치화면 - 57 -
VRML 프로그래밍준비 - 메모장 (Notepad) 프로그램 ( 혹은텍스트편집프로그램) 실행 그림 68. 메모장화면 - 메모장에디터를이용하여 VRML 로프로그래밍 - 프로그래밍후확장자를 (.wrl) 로저장 그림 69. 메모장의내용을저장하는화면 - 58 -
- VRML 뷰어로저장한파일을불러온다. 그림 70. VRML 뷰어를설치한후 3차원모델을 익스플로러에띄운화면 - 59 -
VRML 로간단한형상만들기 크기가 3인상자만들기 ( 그림 71) 에서 "size 3 3 3" 은박스의가로, 세로, 깊이의길이를나타 낸다. geometry Box { size 3 3 3 에서 geometry 라는예약어는 형상을만드는부분으로써 들이있다. Box, Cylinder, Sphere 등여러가지예약어 #VRML V2.0 utf8 Shape { geometry Box { size 3 3 3 그림 71. 상자만들기예 그림 72. 웹페이지에저장한파일을불러온화면 - 60 -
크기가 3인빨간색상자만들기 material 은현재나타내고자하는물체의재질을나타내는데, 이예제 에서는 diffusecolor 라는예약어를이용하여물체의색을변경한다. #VRML V2.0 utf8 Shape { geometry Box { size 3 3 3 appearance Appearance { material Material { diffusecolor 1 0 0 그림 73. 빨간상자만들기예 그림 74. 웹페이지에저장한파일을불러온화면 - 61 -
VRML의 RGB 색상체계 RGB (Red Green Blue) - 빨간색 Red : 0~ 1 숫자로표현 - 녹색 Green : 0~ 1 숫자로표현 - 파란색 Blue : 0~ 1 숫자로표현 RGB 조합의여러색상들 - 빨간색 : diffusecolor 1 0 0 - 녹색 : diffusecolor 0 1 0 - 파란색 : diffusecolor 0 0 1 - 노란색 : diffusecolor 1 1 0 - 하늘색 : diffusecolor 0 1 1 - 자주색 : diffusecolor 1 0 1 - 검정색 : diffusecolor 0 0 0 - 흰색 : diffusecolor 1 1 1-62 -
VRML 로여러다른색상의형상만들기 크기가 2인노란색구만들기 ( 그림 75) 에서 Sphere는구를만드는데필요한예약어이고 radius는 반지름을나타내며, 뒤에오는숫자크기를갖는구를생성한다. #VRML V2.0 utf8 Shape { geometry Sphere { radius 2 appearance Appearance { material Material { diffusecolor 1 1 0 그림 75. 반지름이 2, 노란색의구를만드는예 - 63 -
높이가 4, 반지름이 2인파란색원기둥만들기 ( 그림 76) 에서 Cylinder는원기둥을만드는데필요한예약어이고 radius는원기둥의윗면아랫면의반지름을나타내고 의높이를나타낸다. height은원기둥 #VRML V2.0 V2.0 utf8 utf8 Shape { geometry Cylinder { radius 2 height 4 appearance Appearance { material Material { diffusecolor 0 0 1 그림 76. 윗면아랫면반지름 2, 높이가 4인원기둥만들기 - 64 -
글자보여주기 "Sejong" 이라는글자보여주기 ( 그림 77) 에서 Text는글자를보여주겠다는예약어이고 string 뒤에는 [] 안에보여줄글자를써넣으면된다. 그리고반드시 으로묶어주 어야한다. #VRML V2.0 utf8 Shape { geometry Text { string [ Sejong ] appearance Appearance { material Material { diffusecolor 1 0 1 그림 77. 자주색으로 "Sejong" 글자예제와그림 - 65 -
"Sejong" 텍스트이탤릭체보여주기 ( 그림 78) 에서 fontstyle FontStyle {style "ITALIC" 은글자체를이탤 릭체로보인다는뜻이고, 아쉽게도아직한글은지원되지않는다. #VRML V2.0 utf8 utf8 Shape { geometry Text Text { fontstyle FontStyle { style style ITALIC string [ Sejong ] appearance Appearance { material Material { diffusecolor 0 1 1 그림 78. 하늘색, 이탤릭체 Sejong 글자예 - 66 -
변환 (Transformation) 좌표축 - 오른손좌표계 ( 그림 79) 와같이 3차원좌표계에서왼쪽과오른쪽은 X로표시를하고 있고위아래는 Y로표시를하고깊이는 Z 로표시한다. +Y -Z -X (0, 0, 0) +X +Z -Y 그림 79. 3차원좌표계의표현 - 67 -
이동 Translation "Transform" 은변환( 이동, 회전, 크기변환등) 을하고싶을때사용한 다. "translation" 은이동을나타내고세숫자는이동하고싶은 x 좌표, y 좌표, z 좌표의크기를나타낸다. #VRML #VRML V2.0 V2.0 utf8 utf8 Transform { translation 2 2 0 children [[ Shape Shape { geometry Sphere Sphere {{ radius radius 1 appearance Appearance { material material Material Material {{ diffusecolor 1 0 1 ]] 그림 80. x 좌표로 +2, y 좌표로 +2 이동한구의예 - 68 -
구와상자 2개를동시에만들기 - 만약이동을하지않고만든다면? 그림 81. 변환하지않는구와박스가겹쳐져있는모습 - x 좌표를이동하고만든다면? 그림 82. x좌표이동후의구와박스 - 69 -
그림 83. y 좌표이동한모습( 왼쪽), x, y 좌표이동한모습( 오른쪽) - 70 -
조명 Light 조명의종류 - 확산광 (Diffuse light) - 반사광 (Specular light) - 발산광 (Emissive light) 확산광 (Diffuse light) - 방향성을지닌빛으로, 빛의입사각도에따라서빛의강도가변경된다. - 빛을받는면은밝고, 그렇지못한면은어둡게나타난다. material Material {{ diffusecolor 1 0 1 그림 84. 자주색확산광을적용한구 - 71 -
반사광 (Specular light) - 빛을수직으로받는면에서반사가되어물체표면에밝은점을생성한다. 이것을하이라이트라고표현한다. 예) 스포트라이트 material Material {{ specularcolor 1 1 1 diffusecolor 1 0 1 그림 85. 자주색확산광, 흰색반사광을적용한구 발산광 (Emissive light) - 물체자체에서스스로발산하는빛 예) 전구, 야광물체, 태양 material material Material {{ specularcolor 1 1 1 diffusecolor 1 0 1 emissivecolor 0 0 1 그림 86. ( 그림 85) 에파란색발산광을적용한구 - 72 -
투명도 (Transparency) - 물체의투명도를설정 - 0 은불투명, 1은완전투명 material Material {{ specularcolor 1 1 1 diffusecolor 1 0 1 transparency 0.5 0.5 그림 87. ( 그림 85) 에투명도 0.5를적용한구 - 73 -
이미지맵핑 Image Mapping 3D 의모델에이미지를입혀서실제감있게보이게함 url : 텍스처로사용될이미지의경로를나타내줌 repeats / repeatt - 특정면에이미지가한컷이상반복해서적용될경우, 반복적으로적용할지여부를설정하는필드 - S 는수평방향, T 는수직방향 - TRUE, FALSE로나타내줌 이미지를 #VRML V2.0 utf8 utf8 Shape {{ geometry Box Box {{ size size 8 2 2 appearance Appearance {{ texture ImageTexture {{ url url "t001.jpg" 그림 88. 직육면체에치약그림을맵핑한모델 - 74 -
동영상맵핑 #VRML V2.0 V2.0 utf8 utf8 Shape Shape {{ geometry Box Box {{ size size 8 2 2 appearance Appearance {{ texture texture MovieTexture {{ url url "su.mpg" loop loop TRUE TRUE 그림 89. 직육면체에동영상을맵핑한예 - 75 -
3. 가상현실저작도구를이용한 VR 콘텐츠제작 앞단원에서는 VRML 프로그램을텍스트편집기( 메모장등) 를이용하여 직접프로그래밍을해보았다. 쉬운언어로되어있긴하지만, 정밀하고 그럴듯한가상세계를구축하기는힘들기때문에본단원에서는 VRML 저작도구인패러렐그래픽스 (Parallel Graphics) TM ISB (Internet Space Builder) 3.0 을이용하여가상세계를보다쉽게구축해보도록한다. 제로는 3 차원집을만들어보자. 예 - 76 -
ISB (Internet Space Builder) 회사 : 패라렐그래픽스(Parallel Graphics) TM 소개 - PC 환경에서인터넷을통하여 3차원멀티미디어공간을쉽게생성 하도록해주는 VRML 2.0 저작도구이다. - 자신만의그림이나사진들을추가하여수정, 변경하며가상의공간 을구축할수있다. 특징 - 구, 피라미드, 원뿔, 원통등의 3D 기본도형을지원한다. - VRML 2.0 포맷에서장면(scene), 물체(object) 등의 import 및 export 를할수있는호환기능이있다. - VRML 파일의압축기능을가지고있다. 다운로드 - 아래싸이트에서 Internet Space Builder 3.0 트라이얼(Trial) 버전을 다운로드받을수있다. http://www.parallelgraphics.com/products/downloads Internet Space Builder 트라이얼버전제한사항 - 1400 개의면, 7 개의텍스쳐, 2 개의그림컨트롤, 2 개의영화파일, - 2 URL 이넘는장면생성이불가하다. 제공하는갤러리용패키지제한 - 기본적으로 ISB 에서제공하는모든것을사용할수없고, 62개의 텍스쳐, 3 개의그림컨트롤, 2 개의영화파일, 16 개의오브젝트, 13 형상모델(Shape model), 1 장면(Scene) 그리고한개의배경 이미지만이제공된다. - 77 -
ISB 의메뉴설명및소개 ISB 각윈도우의설명 Perspective view window 오브젝트갤러리 Object gallery 탑뷰윈도우 Top view window 프런트뷰윈도우 Front view window 형상갤러리 Shape gallery 그림 90. ISB 실행화면 빌드모드와가이드라인 (Build mode and Guide lines) - Plane 툴바에서 Build Mode 버튼을클릭한다. : 형상(Shape) 을추가하거나잘라내는작업을할수있다. - Plan window Guide 아이템을설정한다. 를마우스오른쪽버튼을클릭하고팝업메뉴에서 - Front View window 안의두개의라인은 shpae 의기본높이를 설정해준다. 마우스오른쪽버튼을클릭하여나온팝업메뉴에서 Properties 를선택한후가이드라인(Guide Line) 의위, 아래높이 를설정한다. 단위는미터(meter) 단위로측정된다. - 78 -
가이드라인 그림 91. 가이드라인화면 형상그리기와조작 (Shape drawing and manipulator) - Shape gallery 안의 Cube 를클릭하여선택한다. - Top view window 에서마우스왼쪽버튼을클릭한상태에서원하 는크기만큼의사각박스모양으로드래그한다 - Grid 간격은마우스오른쪽버튼 Properties - 사각박스는 Front view window의가이드라인에맞게생성됨 - Plan 툴바에서 Fit to Scene 클릭, 박스전체모양을봄 형상조작기 (Shape Manipulator) - 형상을이동, 회전, 크기조절, 비틀기등을할수있다 - 79 -
형상조작기 ( 위모습 ) 형상조작기 ( 앞모습 ) 그림 92. 형상조작기화면 원근뷰윈도우에서의형상조작 - 이동 : 중앙에있는박스에커서를댄후, 십자표시가생기면이 동한다. - 회전 : x, y, z 축에커서를댄후, 회전표시가생기면회전한다. - 크기변환 : x, y, z축의끝에달려있는박스에커서를댄후화살 표시가생기면크기가변한다. 그림 93. 원근뷰윈도우 - 80 -
예제 - ISB 를이용한간단한집만들기 단계별과정 1. 2. 3. 4. 5. 새로운장면생성 카메라이동 장면안에포함된형상변경하기 장면에형상추가하기 박스로형태만들기 6. 창문, 문, 지붕만들기 7. 장면저장하기 새로운장면생성 - File 메뉴에서 New 를선택한다. - Layout 메뉴에서 Basic을선택한후 List를선택한다 - Layout 다이얼로그박스에서 Reset 버튼을클릭한다 카메라이동 기본카메라로 Free camera 라이름지어진카메라가설정된다. 이것은지우거나이름을바꿀수없으며장면안에서저장되지 않는다. - Plan window에서카메라아이콘을클릭하거나, Perspective view window 선택한다. 밑부분의 카메라탭을 - 81 -
장면안에포함된형상변경하기 - 장면에포함된박스는회색반투명상태로보여지고, 적용되지않 은상태로변형, 대체하거나삭제가능하다 - Shape gallery 에서다른형상으로대체하기위해서는박스가있는 상태에서다른형상을더블클릭한다. 그러면, 같은조건 ( 크기, 회 전등) 으로대체된다. - Shape 삭제 : 키보드의 Esc 키를누른다. 장면에형상추가하기 - Edit 툴바에서 Add 버튼을클릭하거나, Enter 키를누른다. 박스로형태로만들기 - 큰박스를만들고안에작은박스를만들어 Extract 한다. 이것은 마치벽면을만드는것과같다. 그림 94. 박스로벽면형태를구성한모습 - 82 -
- 다른형태만들기 : 형상을더하거나빼서만든다. 그림 95. 여러가지형태을구성한모습 장면저장하기 - File 메뉴에서 Save 를선택하거나, 키보드 Ctrl+S 를누른다. 그림 96. wrl (VRML 문서) 로저장하는화면 - 83 -
위와같은내용을단계별로적용하여다음과같은형태를만들수있 다. ( 그림 97) 은아직집이라부를수있을정도는아니지만, 창문, 문, 지붕은갖춘모습을갖게되었다. 그림 97. 집과같은형태의 3D 모델 - 84 -
예제 - ISB 를이용한좀더복잡한형상만들기 ISB 에서다음기능을이용하여집을좀더멋지게꾸밀수있다. - 다른오브젝트삽입하고, 배치하기 - - 텍스쳐맵핑 폴리곤모드로만들기 - 오브젝트배치시키기 - 창문만들기 - 그림창 (Picture window) - 그림창에서 URL 입력하고, 링크걸기 - 사운드추가하기 다른오브젝트삽입하고, 배치하기 - 오브젝트갤러리(Object gallery) 에서원하는오브젝트를클릭한다. - 적절한크기조정을한후, 탑뷰윈도우와프런트뷰윈도우를보면서적절한장소에위치시킨다 오브젝트갤러리 그림 98. 오브젝트갤러리에서괘종시계를추가한화면 - 85 -
텍스쳐맵핑 (Texture mapping) - 그림을클릭하여원하는부분에드래그앤드롭을한다. 그림 99. 벽돌모양의텍스쳐를적용한화면 - 그로우(Grow) 와쉬링크(Shrink) Texture Mapper 탭을선택한다. 편집하고자하는부분을더블클릭한다. 마우스오른쪽클릭을하여 Grow 또는 Shrink 를선택한다. - 핀셋팅 (Set Pin) 마우스오른쪽클릭을하여 Set Pin 을선택한다. 마우스를클릭한상태에서드래그한다. 키보드 Shift 키를클릭한상태에서드래그한다. - 86 -
Pin 을하나더생성한다 텍스쳐를없애기 : 텍스쳐지우기(Clear Texture) 를선택 그림 100. 텍스쳐를여러가지형태로변환한모습 폴리곤모드로만들기 - Plan 툴바에서폴리곤모드버튼을클릭한다. - 탑뷰윈도우에서네개점을클릭하여직사각형형태로방의모서 리를설정한다. 점을지울때는마우스오른쪽을클릭하여점지우 기(Delete Vertex) 를선택한다. - 에디트 (Edit) 툴바에서 Room 버튼을클릭한다. - 사각형의방법과마찬가지로내부를빼낸다(Extract). - 87 -
그림 101. 폴리곤모드로벽면을구성한모습 오브젝트배치시키기 - 창문만들기 - 창문모양으로구멍을낸다음오브젝트갤러리에서창문모양의오 브젝트를드래그앤드롭해서적절한위치에놓고회전한다. 그림 102. 창문을삽입한모습 - 88 -
그림창 (Picture window) - View 에서 Pictures 를선택또는 Alt+5 를누른후, 원하는그림을 드래그앤드롭한다. - 녹색의작은박스를이용해크기를늘리거나줄인다. - 손모양의그림이나오면원하는곳에이동한다. 그림 102. 벽면에액자를추가한모습 그림창에서 URL 입력하고, 링크걸기 - 원하는 URL 주소를드래그한후 Ctrl+c 또는복사를선택한후왼 쪽창에서액자에마우스오른쪽버튼을클릭한다. - Link URL 을선택하면 URL 주소를넣을수있게되는데여기에 - 89 -
원하는주소를써넣는다. - Description 부분에는 URL 에관한설명을입력한다. 이것은마우 스를올려놓았을때, 화면에작게표시된다. 그림 103. 액자에링크및타겟팅을설정하는화면 - Link target 설정하는방법 More 버튼을클릭하여 Keyword 를클 릭한후 Keyword 에 target=_blank 라고써넣는다. - 액자를클릭하게되면 URL에쓴주소로웹페이지가이동하여뜨게 된다. 사운드추가하기 - Picture 윈도우에서액자를삽입한상태에서왼쪽창에서액자에 마우스오른쪽버튼을클릭한후 Attach Sound 를선택한다. - Browse 버튼을클릭하여 wav 파일을추가한다. - OK 버튼을클릭한다. - 저장한후그림을클릭해본다. 사운드는확장자가 wav 인파일만가능하다. - 90 -
그림 104. 가상 집만들기 실습 - 91 -