자바스크립트로 만들 수 있는 프로젝트 모음

 

 프로그래밍 언어, Javascript. 특정한 소프트웨어를 만드는 데 있어 언어의 제약은 없지만, 개발 목적에 따라 특화된 언어는 존재한다. C#은 윈도우즈 개발, Java는 쉬운 코드와 안정성 범용성, Python은 ML. JavaScript는 웹이다.

 

 현대의 산업은 웹에서 시작해, 웹으로 끝난다. 그만큼 인터넷과 웹의 범위는 상당하고 또 중요하다. 대부분의 전자상거래가 인터넷으로 이루어진 만큼, 개발자는 사용자에게 필요한 기능을 빠르고 안정적으로 제공해야 한다. 개발자가 선택할 수 있는 플랫폼은 두 가지다. 웹이냐 앱이냐. 앱 개발은 개발 비용이나 복잡성만큼이나, 빠르게 개발하기는 어렵다. 배포도 웹만큼 간편하지 않다. 심지어 플랫폼 업자에게 심사까지 받아야 한다. 반면 웹 개발에는 제한요소가 없다. 그나마 서버를 만들어야 한다는 게 제한요소랄까. 그마저도 클라우드, 서버리스 시대가 열리며 웹 개발은 더 쉬워지는 추세다. 

 웹은 무조건 JavaScript를 사용해야 한다. 웹 브라우저는 오직 JS만 해석할 수 있다. 웹은 JS없이 무용지물이다. 한편으론 웹 프론트엔드 개발을 위해서 무조건 JS만 써야 한다는 게 제약사항일지 모르나, JS만 알아도 웹 개발의 대부분을 만들어낼 수 있다. 아니, 100%를 JS 언어 하나로 커버할 수 있다. 그만큼 웹에서의 JS의 입지는 단연 독보적이다.

 그러다보니 개발자들은 JS로 재미난 프로젝트들을 만들어낸다. 이 포스트에서는 JS로 할 수 있는 재미난 프로젝트, 신박한 프로젝트들을 소개해보려고 한다. 아, 참고로 웹사이트 개발은 제외했다.  (너무 뻔하잖아)

 

 

0. 대부분의 웹사이트

 상상하는건 대부분 가능하다. 이 포스트에서 다루지는 않겠지만, JS는 사용자가 웹사이트를 접속할 때 처음 마주하는 화면을 담당하고 있고, Node를 활용해서 서버 측 언어로도 활용할 수 있다.

 

 

1. 게임 개발

 JS에는 강력한 Canvas를 내장 라이브러리로 제공한다. Canvas는 픽셀 단위로 편집할 수 있고 다양한 그리기 도구를 제공한다. 별도의 외부 라이브러리 없이도 간단한 코딩 지식만 있다면 지렁이게임, 테트리스등을 쉽게 만들어낼 수 있다. 그렇다고 2D게임만 만들 수 있지는 않다. 3D게임 또한 지원한다. ThreeJS 라이브러리를 활용해서 간단한 FPS게임, 휭스크롤게임등을 만들어낼 수 있다. 화려한 그래픽도 물론 가능하다.

 

 아래 영상에 나오는 화면 또한 ThreeJS로 구현한 웹사이트다.

 

https://www.youtube.com/watch?v=F78qEg68Fzs&ab_channel=%EB%8B%AC%EA%B1%B0%EB%B6%81%EC%9D%B4 

https://www.anumberfromtheghost.com/

 

https://threejs.org/

Three.js – JavaScript 3D Library

 

 

 2. 크로스 플랫폼 데스크톱 개발

 

 Electron. 정말 쉽게 JS만으로도 데스크톱 개발이 가능하다. 윈도우, 맥, 리눅스까지 지원한다. 필자도 영상편집 프로그램을 만드는 데 사용하고 있고, 무엇보다 개발자 스스로 소프트웨어를 만드는 데 있어 부담이 덜하다. 기본적으로 네이티브에서 지원하는 기능은 대부분 사용할 수 있고, 자동 소프트웨어 업데이트, 인스톨러, 배포, 버그 리포트 등의 별동 기능을 제공한다. 

 일렉트론을 활용해서 개발한 소프트웨어는 디스코드, 피그마, Vscode 등이 있다. 

 

https://www.electronjs.org/

 

https://www.electronjs.org/

Build cross-platform desktop apps with JavaScript, HTML, and CSS | Electron

 

 

3. 머신러닝

  TensorflowJS, BrainJS 등의 라이브러리등을 활용하면 CNN예제와 같은 적은 파라미터로도 충분한 성능을 보여줄 수 있는 머신러닝 신경망을 학습하고 학습된 모델을 실행시켜 볼 수 있다. 아직 성능상의 제약이 있지만, NPU의 발전, 모바일 ML 성능의 향상등으로 인해 상당한 개선작업이 이루어지고 있다. 이 분야에서 필자가 디스콰이엇에 작성한 포스트가 있으니 한번 둘러보시길 권한다.

 

https://disquiet.io/@hhj/makerlog/6311

On Device ML이 바꿀 미래 | Disquiet*

 

 

 아래 그림은 구글 mediapipe팀에서 선보인 머신러닝 솔루션 예제이다. 

https://google.github.io/mediapipe/

 

 

4. 앱 개발

 순수 JS로 개발하기는 어렵지만 웹뷰나, RN 같은 외부 도구를 활용하면 얼마든지 개발할 수 있다. 그중에서도 리액트 네이티브가 가장 유명한데, 리액트의 문법을 그대로 따르되 많은 변형 없이 빠르게 개발할 수 있도록 도와주기 때문이다. 그러나 배포할 때쯤 되면 골머리 썩는다. 필자도 2~3번 RN으로 앱을 출시해 본 경험이 있는데 우선 안드로이드 앱으로 포팅하려면 안드로이드 SDK가 필수적이고 SDK를 사용하기 위해서는 무거운 안드로이드 스튜디오를 따로 설치해주어야 한다. 개발을 위한 환경설정… 지루하기 짝이 없다.

 이런 문제를 해결하기 위해 Flutter가 뜨고 있다지만, JS가 아니기에 pass.

 RN으로 만든 프로젝트가 궁금하다면 아래 사이트 참고. 디스코드(의 JS사랑), 페이스북, MS오피스등이 활용하고 있다.

 

https://reactnative.dev/showcase

Showcase · React Native

 

 

5. 크롬 익스텐션

 크롬의 브라우저 점유율은 64%(2020)다. 그야말로 독보적인 위치라 할 수 있는데, 그만큼 크롬 익스텐션의 활용도도 장난 아니다. DOM을 건드릴 수 있기 때문에 웹사이트 내의 무엇이든 바꾸거나 수정할 수 있다. 이를 활용한 대표적인 프로젝트가 애드블록.

브라우저 점유율 (파란색)크롬