My VFX Journey

1. Introduction 인간의 뇌는 움직이는 물체에 대해 집중을 하게 되는 것으로 집중을 하는 경향이 있다. 이러한 움직임을 감지하는 자연적인 경향 때문에 앱이나 웹사이트에 Animation을 추가하는 것은 제품의 중요한 부분들을 유저들에게 있어 눈길을 끄는 것과 더불어 웹사이트 인터페이스의 흥미를 추구하게 만드는 아주 강력한 무기가 될 수 있다. 만약 Animation이 원할하게 잘 적용되었다면 Animation은 값진 인터렉션과 피드백을 추가할 수 있다. 더불어 Animation은 감정적인 경험, 기뿜 그리고 인터페이스의 성격을 부여하고 향상시켜 웹사이트의 생명을 불어넣을 수 있다. "Emotional design's primary goal is to facilitate human-to-huma..

1. Introduction 지금까지 배워왔던 jQuery를 통해 웹사이트 안에서 여러 방면의 인터렉션과 미디어 재생같은 다채로운 기능들을 추가할 수 있다는 것을 알았다. 이번에 배워볼 내용은 이러한 jQuery의 영역을 Google Maps까지 확장시키는 것이다. 구글은 웹페이지 안에서 아주 쉽게 지도를 첨부하게끔 하는 서비스를 기능한다. 이때 구글은 또한 웹디자이너와 개발자들에게 API (Application Programming Interface)를 제공하여 지도에 더욱 새로운 기능들을 추가하게 만든다. 이번에 배울 내용 중 구글 지도를 웹페이지에 집어넣게 만들고 커스텀 마커와 레이블을 표시하여 더욱 자신만의 스타일이 추가된 지도를 꾸며보는 것들이 핵심이 될 것이다. 2. Setting Up 구글 ..

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..