My VFX Journey

이는 누군가를 위한 학습 관련 블로그가 아닌 개인의 평범한 공부일지로써 틀리거나 애매모호한 부분이 있을 수 있습니다. 만약 틀린 부분을 발견시 댓글을 달아주신다면 감사하겠습니다. 1. Instantiating Prefabs Prefabs in Code Instantiation Spawner Objects Good Coding Practice Prefabs 우리는 게임 오브젝트를 코드상에서 동적으로 생성시키고 싶을때 Prefab을 이용해야 한다. Prefab (프리팹)은 우리가 게임 오브젝트를 복사하여 여러개 만들수 있는 포괄적인 오브젝트로써 오브젝트의 새로운 Instance를 생성시키면서 Prefab들을 Instantiate하여 (말 그대로 인스턴스화 하여 씬에서 특정 Game Object을 여러개로 복..

1. Introduction 지금까지 역사적으로 웹 디자이너들은 오디오와 비디오 플레이를 온라인에서 재생시키는 기능들을 추가하기 위해 Adobe Flash나 다른 플러그인들을 써왔다. HTML5는 이것을 와 태그들을 통해 혁명적으로 바꿔놓았다. 이 태그들을 허용하는 브라우저들은 Audiovisual (시각음향)이나 Audio-only (음향만 있는) 미디어 파일들을 모두 재생 가능하게 만들어준다. 만약 브라우저가 그 태그들을 허용하지 않는다면 유저들에게 이 브라우저에서 지원할 수 없다라는 메세지와 함께 재생하지 못할 것 이다. 우선 미디어 파일들을 지원하는 포맷들은 여러가지가 있는데 문제점은 서로 호환이 안되는 경우가 많다는 점이다. 특정 브라우저는 특정 포맷들만 지원하는 경우들이 있다. 그럼에도 불구하..

1. Introduction 이번 공부에서는 대표적으로 두 개의 대해서 배워볼 것이다. 첫번째로 구글 폰트를 웹사이트로 어떠한 방식을 사용하여 불러올지 그리고 두번째로 .scrollTop()이라는 jQuery function을 활용하여 특정 로케이션을 향해 어떻게 스무스하게 페이지를 스크롤 할 수 있는지에 대해 알아 볼 것이다. 2. Google Fonts 역사적으로 지금까지 웹디자인은 오적 몇개의 (Standard fonts) 스탠다드 폰트만 가능하게끔 설정해왔다. 여기서 Standard font란 다른 유저들의 컴퓨터에게도 당연시하게 깔려있다고 인식되는 폰트이다. (예를 들면 Helvetica, Arial, Times New Roman etc)를 예로 들 수 있다. 이때 만약 어떤 웹 디자이너나 개발..

1. Introduction 우선 지난 단원으로 부터 jQuery의 Syntax가 특정 Selector에 있는 요소로부터 어떻게 구축되어지는지에 대해 간략하게 알아보았다. 또한 fadeOut(), slideUp()과 같은 Built-in effects (내장 효과), animate(), 그리고 css()와 같은 function들을 사용하여 효과를 구현하는 방법과 click()이나 mouseenter()과 같은 event들을 jQuery에 알려 언제쯤 효과들을 웹페이지에서 나타낼지에 대해 알아보았다. 이번에는 Document Object Model (DOM)을 파악할 수 있게 해주는 jQuery의 명령어들을 알아보겠다. 하지만 이 jQuery 명령어들은 오직 디자이너나 개발자가 올바른 HTML구조를 가지고..

1. Introduction jQuery는 JavaScript 라이브러리이다. 이는 복잡한 기능들을 수행가능케 하며 jQuery의 syntax는 개발자가 아닌 디자이너가 상대적으로 어렵고 다루기 힘든 JavaScript를 조금 더 쉽게 다룰 수 있게끔 해준다. 2. How jQuery Works Including jQuery 말했듯이 jQuery는 JavaScript 외부 라이브러리로써 jQuery를 HTML 도큐멘트에서 쓰기 위해서는 페이지 안에다 library를 표기해야 한다. 이는 간단하게 태그 안에 있는 반드시 유의해야 할점은 jQuery파일이 작성하려는 HTML 도큐멘트와 같은 파일에 있어야 할 것과 jQuery 파일 네임을 함부로 바꾸지 않는 것이다. CDN을 사용한 경우의 코드 (이 경우 따..

1. Introduction CSS에서 float, margin 그리고 padding 같은 property를 통해 특정 요소의 공간적 배치를 조정할 수 있다. 이때 이 Properties들만으로도 해결할 수 없는 기능들이 있어 CSS에 있는 Position이라는 property를 사용해야 하는데 이는 4가지의 값을 가진다. 이 Position property안에 값으로 들어가는 것들은 총 네 개가 있는데 이들이 무엇을 각기 의미하는지 알아야 한다. static 이는 HTML 요소들의 기본 값으로써 이 값으로 할당된 요소들은 페이지의 흐름데로 위치하게 된다. fixed* 특정 요소가 브라우저 윈도우와 관련없이 위치하게 하는 값으로써 페이지를 스크롤한다고 해도 움직이지 않게끔 고정되게 만든다. 다른 요소들에..

1. Default HTML Styles 지난번에 배웠던 HTML이 특정 내용을 구조화하고 작성하는 것에 초점을 맞췄다면 CSS는 그것들을 어떻게 표현하는지 결정해주는 언어이다. CSS는 Cascading Style Sheets (스타일 시트)로써 브라우저에게 HTML 요소들이 어떻게 보여질지 결정해주는데 여러 방법들이 있다. 웹 개발자가 알 수 있는 사실은 만약 HTML 도큐멘트를 만들기 위해 코딩을 할때 각각의 HTML 요소들을 이루는 태그들이 각 뚜렷한 특징들을 담고 있다는 사실인데 이때의 HTML태그들을 간략히 설명하자면 다음과 같다. 크고 진한 텍스트를 만들어주며 텍스트 주위 어느정도의 여백을 생성하여 독립적인 텍스트를 생성하게 해준다. (제목같은 요소) 폰트 크기가 평범하며 (15px 정도) ..

이 카테고리에서는 웹 개발중 가장 기본이 되는 HTML, CSS 그리고 jQuery에 대해 다룰 것이다. 인터렉티브 디자인을 전공하는데 있어 가장 사람들이 떠올리는 가장 기본적인 개념은 누가 뭐니해도 웹사이트가 될 것이다. 아마 많은 사람들이 가장 많이 접하게 되는 인터렉티브 미디어로써 이 웹사이트가 어떠한 구조를 통해 이루어지며 그것들을 창조하고자 하는 입장에서는 무엇들을 공부하고 중요시 여겨야 하는지 이 블로그 카테고리에서 살펴보고자 한다. 이는 개인의 공부일지로써 틀린 내용이거나 애매모호하게 설명이 가 있는 부분이 있을것이므로 이 글을 읽는 누군가 만약 잘못된 점을 발견하신다면 댓글로 알려주시면 감사하겠다. 1. Introduction Tags HTML은 HyperText Markup Languag..

이는 누군가를 위한 학습 관련 블로그가 아닌 개인의 평범한 공부일지로써 틀리거나 애매모호한 부분이 있을 수 있습니다. 만약 틀린 부분을 발견시 댓글을 달아주신다면 감사하겠습니다. 1. 2D & 3D Geometry 2D & 3D Coordinates Vectors Quaternions - Coordinate Systems (3D) 유니티에서의 Coordinate System (좌표 시스템 구조)는 여타 다른 3D 프로그램과 다르다. 유니티에서 3D 방향을 쉽게 알 수 있는 점은 왼손을 활용하여 총 모양을 만들었을때 X-방향은 중지, Y-방향은 엄지 그리고 Z-방향을 검지라고 가정하면 쉽게 유니티에서의 Coordinate System을 유추할 수 있다. 이는 오른손 총 모양을 활용한 3D 방식의 Maya ..

Introduction to Max 우선 Max라는 프로그램은 지난 챕터에 간략하게 소개시켰지만 이번에 간략하게 설명하자면 뉴미디어 아티스트들에게 비주얼 프로그래밍 환경을 제공하는 프로그램이다. Max를 통해 Realtime Audiovisual works 리얼타임 시각/음향 작업물을 만드는 것에 초점을 둘 것이며 여러개의 Object들 (나중에 소개할 후디니에서 노드같은 것들)이 이어져서 어떻게 결과물을 나타내는 것인지 세부적으로 더욱 자세하게 알아보겠다. Things to learn in this class - Navigate your way around the Max patcher interface (Max 패쳐 인터페이스에 익숙해지기) - Lock and unlock your patch (Max ..