JavaScript를 이용해
웹페이지를 실용적이고 근사하게 만들어 봅시다!

JavaScript를 이용해 더 웹페이지를 좀 더 실용적이고 근사하게 만들 수 없을까요? Ajax와 p5.js를 활용해봅시다.

필요한 정보만
부분적으로 낚아채는 Ajax !

자바스크립트가 도입되면서 웹은 빠른 속도로 정적인 것에서 동적인 것으로 문서에서 애플리케이션으로 발전하기 시작했습니다.
처음에는 페이지 내에서 사용자의 행동에 따라 웹페이지가 변화무쌍하게 변경되는 것만으로도 행복했습니다.
하지만 사람의 욕심은 끝이 없죠. 곧 여러 가지 불만족이 쏟아져 나옵니다.
수많은 불만족 중에 우리의 관심사는 웹페이지의 정보를 부분적으로 변경하는 것입니다.

예를 들어볼까요?
오늘날 많은 검색엔진이 추천 검색어를 제공하고 있습니다.
예를 들어서 제가 여기다가 a라고 입력하면 a로 사용할 만한 추천 검색어, j를 입력하면 aj로 시작하는 추천 검색어를 추천해 주고 있어요.
한번 생각해 볼까요? 어떻게 이런 것이 가능한 것일까요?

이것이 가능한 이유는 웹 브라우저가 ajax를 통해서 웹 서버와 통신을 하고 있기 때문입니다.
글자를 칠 때마다 서버 통신이 이루어지는데, 이것이 가능한 것이 바로 ajax입니다.
페이지 전체를 로딩하면 사용자의 관심이 분산될 수밖에 없습니다. 서버 입장에서도 모든 페이지를 다시 전송했기 때문에 손실이 컸어요.
이런 불만족 속에서 피어난 꽃이 ajax입니다.

지금부터 우리는 불필요한 정보까지 끄집어내는 무거운 그물은 던져버리고
ajax라는 낚싯대를 이용해서 필요한 정보를 부분적으로 정교하게 낚아채는 낚시꾼이 되어봅시다.
클라이언트를 사용하는 사용자에게는 좋은 경험을, 서버를 운영하는 생산자에게는 지출을 줄여줄 것입니다.

학습의 동기를
자극해 줄 p5.js !

P5.js라는 도구로 이런저런 것을 하다 보면 학교에서 배우는 과학, 수학과 같은 개념들이 자연스럽게 소환됩니다.
이것들을 흡수해서 자신의 고유한 성향에 합성하면 그것들을 표현하고 싶은 욕구가 또 생겨납니다.
그렇게 표현된 것 중에 어떤 것은 예술적 가치를 지니게 되고 또 어떤 것은 공학적인 쓸모를 갖게 됩니다.
그런 점에서 저는 p5.js가 다양한 식에 대한 학습의 동기를 자극해 줄 매우 탁월한 도구라는 생각이 들었습니다.

한편 이런 도구를 이용하면 또 좋은 점이 있습니다.
핸드폰에 사용법을 알기 위해서 핸드폰에 제조 방법을 배우는 사람은 없을 겁니다.
근데 우리가 경험했던 공부들은 대체로 이와 반대였어요 어떤 개념이 왜 필요한지를 경험하기 전에 그 개념의 원리를 파악하는 공부에 익숙해져 있습니다.
지식에 대한 사용자가 우선 되어보고 원리가 꼭 필요할 때 원리를 공부해도 늦지 않습니다.
그때 하는 공부는 추상적이지도 않고 어렵지도 않을 것입니다.
P5.js와 컴퓨터를 이용해서 지식의 학습자가 되기 전에 사용자가 되어 보셨으면 좋겠습니다.

우리 수업은 p5.js 로 할 수 있는 본질적인 작업 세 가지를 살펴볼 것입니다.

1. 우선 정지된 그림을 그리는 법을 익힙니다.
2. 그 다음에는 그림을 움직이는 법을 공부할 것입니다.
3. 마지막으로 사용자와 상호작용하는 법을 터득할 것입니다.

이 과정이 끝나고 나면 이런 생각이 들겁니다.
“나 p5.js 뭔지 알아. 나 p5.js 할 줄 알아.”

어떤 내용을 배우는지
살펴볼까요?

[강의 미리보기] 

• Ajax

• p5.js