자바실험실과 같은 웹시뮬레이션을 만드려면?

최근, 여러 SNS 채널을 통하여 자바실험실과 같은 인터넷 기반의 웹시물레이션을 만들고 싶다는 문의가 자주 오고 있습니다.

우리가 어떤 웹페이지를 접속하여 화면을 보게 될 때, 서버와 각자의 단말기가 상호 유기적으로 작동하게 됩니다.
이 과정에서 서버가 처리해주는 작업들을 ‘백 엔드’라고 부르며, 각자의 단말기에서 작동하는 프로그램들을 ‘프런트 엔드’라고 합니다.
자바실험실의 경우, 서버에서 무엇인가를 처리하는 과정은 거의 없으며 단순히 블로그 서비스를 제공하는 역할 정도에 그칩니다. 그래서 ‘백 엔드’ 프로그램은 워드프레스를 설치해서 단순하게 운영하고 있습니다.

제가 하는 거의 대부분의 작업은 클라이언트 쪽(쉽게 말하자면 여러분들의 PC 또는 모바일 기기)의 자원을 사용합니다.
현재로서는 마땅한 ‘프런트 엔드’ 개발 언어가 Javascript(자바스크립트) 밖에 없습니다. 예전에는 플래시 같은 것도 있었습니다만… 지금은 Javascript로 통일되어 있어요.
그런데, 순수한 Javascript 언어만 가지고 코딩을 하기에는 Javascript가 호락호락 하지 않았습니다. 저에게는 개념 조차도 어렵더라구요…

저는 과거에 C와 Java를 다루어 본 적이 있었기 때문에,
Javascript를 그대로 코딩하지 않고 C 또는 Java와 비슷한 환경에서 코딩할 수 있는 방법을 찾았습니다.
어떤 프로그래밍 작업을 수월하게 해 줄 수 있는 도구들의 모임과 같은 것인데요… 이것을 ‘라이브러리’라고 부릅니다.
제가 찾아낸 라이브러리는 ‘p5.js’입니다. ( https://p5js.org/ko/ )
지금 프로그래밍을 할 때 대부분의 명령어는 p5.js의 것을 이용하고 있으며, 순수한 Javascript 코드는 아주 조금만 사용합니다.
물론 이것 말고도 더 좋은 라이브러리는 있을 수 있습니다.
지금처럼 수 많은 라이브러리들이 쏟아져 나오는 상황에서는 더 그렇습니다.

p5.js 코딩 방법에 대한 안내인데요…
죄송하다는 말씀 밖에는 드릴 말이 없습니다.
제가 가장 잘 할 수 있는 분야는 과학 현상을 웹시뮬레이션으로 표현하는 것입니다.
코딩 강좌까지 하기는 정말 힘들고, 실제로 코딩 강좌를 잘 하시는 분은 따로 있습니다.
구글 서치를 해보시면 수 많은 p5.js 관련 강좌가 있고요, 해외의 좋은 유튜브 강좌들도 엄청 많이 있습니다.
대표적으로 권하는 강좌는 ‘The Coding Train'( https://www.youtube.com/user/shiffman )입니다.

p5.js는 매력적인 도구입니다.
특히 과거에 C 또는 Java 언어를 하셨던 분들은 금방 적응할 수 있습니다. (일주일 안에 마스터가 되실 수 있습니다.)
특별한 개발 도구는 따로 없으며, 메모장이나 웹에디터( https://editor.p5js.org/ )에서 바로 개발을 할 수 있습니다.
디버깅(프로그램의 버그나 작동과정을 살펴보는 작업) 조차도 웹브라우저에 내장된 콘솔 기능을 이용합니다. (F12 키를 눌러서…)

이외에도 JQuery, node.js, react, vue 같이 개발을 위한 도구들은 많이 있습니다.
개인적으로는 여러분들이 다양한 경험을 많이 하시고, 개발도 왕성하게 하셨으면 좋겠습니다.
그럼, 여러분들의 건승을 기원합니다.

* 추가적으로 수학도 하셔야 합니다. 미분과 적분, 삼각함수, 수열, 행렬변환, 급수, 극한 개념을 원할 때 바로 바로 적용할 수 있으면 아주 좋습니다.
* 아, 그리고 영어도 하셔야 합니다. 한글로 검색하면 쓸만한 것들은 잘 안나옵니다. 코딩할때 참고하는 레퍼런스는 영어로 되어 있습니다. 번역기 돌리면 되지 않냐고 물어 보시는데, 명령어 코드를 영어로 입력해야 하는 상황에서 한글만으로 무엇인가를 할 수는 없습니다.

Comments ▼