영감 (아이디어)

스페이스 그래비티의 영감이 된 영상
각별(마인크래프트 유튜버 + 개발자)

예전에 위 영상으로 보고, 언젠가는 이런 우주 중력 시뮬레이터를 직접 만들어보고자 했습니다. 무작위로 흩어져 있는 객체들이, 만유인력이라는 한가지 법칙에 의해 뭉쳐지고, 결국은 지금의 태양계와 비슷한 형태가 나온다는 점이 너무나 신기했습니다.

솔직히 놀랍지 않나요? 단순하게 각 사물간에 "중력" 하나만 추가를 했는데 태양계와 비슷한 형태가 됬다는 것을요! (심지어 영상 보면 항성과 행성과, 그 행성을 도는 위성까지 있습니다 ㄷㄷ...

영상 자체는 2019년 2월에 올라온 영상이고, 처음 본 것도 꽤 전이었지만, 아쉽게도 기술력과 지능(?)의 한계로 시작조차 하지 못했습니다.

하지만 지금은 다릅니다! 고등학교 2년간 다양한 생기부 작성용 프로젝트와 React 실력의 떡상으로 드디어 이 아이디어를 실현시킬만한 실력을 갖추었습니다. 심지어 기하+물리학2+지구과학2+정보(솔직히 이건 딱히 상관 없음) 콤보로 지능까지 업그레이드를 하고 있습니다.

마침 고3 생기부의 종지부를 찍을 대형 프로젝트도 필요하겠다. 고등학교 인생의 숙명이었던 이 프로젝트를 진행하게 되었습니다.

여담) 생기부 작성용 프로젝트**

혹시 제 생기부 작성용 프로젝트가 궁금하실 분이 있을 것 같아서 몇 가지 올리겠습니다. (제 깃허브에 다른 것들도 있으니 관심있으시면 구경해주세요!) 내가 이렇게 많이 했을 줄이야...

• 닮은꼴 선생님 찾기 (웹사이트, 인공지능) - 깃허브
• 미적분 - 정적분, 리만합 (파이썬)
• 몬티홀 시뮬레이터(웹사이트, p5.js) - 깃허브
• 물리학 빛의 굴절과 반사 시뮬레이터(웹사이트, p5.js) - 깃허브
• 미적분 펭귄 스케이팅 게임(웹사이트, p5.js) - 깃허브
• 반응속도 게임(웹사이트, 리액트) - 깃허브
• 터치 스피드 대결(웹사이트, 리액트) - 깃허브
• 인공지능 쓰레기통(장치, 프로그램, Node.js, 일렉트론, 라즈베리파이 등등)
• 서산 Start - 위치기반 지역홍보 웹사이트 - 깃허브
• 아두라이트 - 프로그래밍 가능한 아두이노 조명

이름 짓기

제가 프로젝트를 만들게 되면 제일 먼저 하는게 이름 짓기 입니다. 프로그래머가 이름 짓는 걸 힘들어 한다고는 그건 기획자도 마찬가지입니다. 서비스명 짓느라 너무 힘들었어요.

그리하야 "스페이스 그래비티" (두둥)

이름은 스페이스 그래비티 줄여서 우주-중력으로 결정을 했습니다. 딱히 별다른 이유는 없고, 직관적인 이름을 짓고 싶었어요. 처음에는 만유인력 을 이름으로 할까 진지하게 생각했는데, 이건 너무 길어서 탈락을 시켰습니다.

대신 뭔가 우주처럼 보이니깐 우주 + 중력(만유인력)을 이용한 시뮬레이터니깐 중력 해가지고 우주 중력이 되었습니다. 한글로 스면 뭔가 허전한데, 영어로 쓰면 Space Gravity(스페이스 그래비티). 멋지지 않나요? 멋지다고 해주세요

로고 만들기

이름이 정해진 이상, 로고를 만드는 건 그리 어렵지 않았어요. 우주-중력 이라는 이름에 걸맞게 검청색의 배경을 깔고, 그 위에 노랑생과 주황색 사이 어중간한 색을 메인 색으로, 글자 위주의 로고를 만들었습니다.

중간에 ㅇ 을 별 모양의 아이콘으로 바꿔서 "별"을 강조를 시켜줬어요. (참고로 저 별 모양은 스페이스 그래비티의 파비콘에도 사용됩니다!)

(혹시라도 색을 찍어보실 분들을 위해, 배경색: #020511 강조색: #f9951c 서브강조(?)색: #c17111 이고, 글꼴은 Sandoll 호요요(유로 폰트)입니다 :)

기획안 작성하기

이름과 로고를 만들었으니, 그 다음을 본격적으로 기획을 할 차례입니다.

뜬금없지만, 고백할 것이 하나 있습니다. 저는 기획을 대충하는 편입니다. 슬프게도 저는 주변에 개발을 같이 해줄 수 있는 친구가 없어서(일반계 고등학교의 서러움) 주로 프로젝트를 혼자 진행합니다. 혼자서 기획 - 디자인 - 개발 - 배포 까지 다 하다보니깐, 한 단계에서 다 끝내고 나아가기 보다는, 여러단계를 유동적으로 돌아다니면서 그때그때 수정하는 편입니다. 그렇다보니 첫 기획은 반드시 구현해야 하는 것들만 적어두고, 이후에 디자인과 개발을 하면서 수정합니다.

그래서, 첫 기획안은 다음과 같이 작성되었습니다. 3D였던 것을 2D로 옮기는 것이다보니 여러가지 신경도 써야 되고, 학교 대회에도 제출할려다보니 교육적인 면도 부각을 시키고자 여러 기능을 포함시켰습니다.

따로 프로그램에서 작동시킬 건 아니고, 웹사이트로 만들 예정이고, 아쉽지만 스마트폰은 지원하지 않을 생각입니다.

기술 스택 정하기

이제 기획안까지 얼추 작성을 했으니, 본격적인 개발에 앞서 기술 스택을 정해야 합니다.

먼저 시뮬레이션을 컨트롤할 컨트롤 UI는 React 통해 제작하기로 했습니다. 이미 여러 프로젝트를 통해 React를 사용해서 스킬 스택도 있는지라, 굳이 리액트를 선택하지 않을 이유는 없었습니다.

문제는 실제 시뮬레이션이 그려질 방법입니다. 영상을 보면 알겠지만, 객체가 수십에서 수백개 정도 생성될 것이고, 각 객체마다 엄청난 양의 연산을 해야되다보니 이를 버터줄 구현 방법이 필요했습니다. 최적화와 제 개발 능력 사이에서 저울질 해본 결과 다음과 같이 3가지로 정리할 수 있었습니다.

DOM vs P5.js vs Canvas

DOM

DOM은 말 그대로 HTML을 이용해서 그리는 것을 말합니다. 각 행성마다 div 태그를 만들어서 시뮬레이션 결과에 따라 top과 left값을 변경해서 처리하고자 했습니다.

장점으로, 가장 익숙한 기술이다보니 개발 속도가 빠르며, css를 통해 스타일을 편리하게 변경할 수 있고, onClick등의 이벤트를 통해 상호작용 시키기가 편리합니다.

단점으로, 성능이 좋지 않습니다. 리액트를 사용하는 특성상 오버헤드가 많이 발생할 것으로 추측되고, 간단하게 스트레스 테스트(위 사진)를 해본 결과, 몇 백개만 생성했음에도 노트북 팬에서 비행기 이륙하는 소리가 날 정도로 성능이 좋지 못합니다. 성능이라는 큰 문제 때문에 아쉽게도 DOM은 스킵되었습니다.

P5.js

(예전에 올렸던 p5.js 강의 포스트 썸네일)

P5.js 는 Processing 라는 언어의 자바스크립트 버전입니다. 교육용 미디어아트 프로그래밍 언어라는 이름답게 난이도가 쉽습니다.

장점으로, 문법 자체가 쉬운 편이고, 이전에 사용한 경험이 많아 익숙합니다. 또한 canvas를 직접 사용하는 것에 비하면 부족하지만, 내부적으로 canvas를 사용하기 때문에 그럭저럭 성능도 괜찮은 편입니다.

단점으로, 리액트와의 호환이 그럭저럭입니다. 이전까지는 리액트와 p5.js를 함께 사용하지 않는 방향으로 해결을 하였지만 이번 프로젝트는 리액트를 사용하므로 충돌을 피하기가 어려워보입니다. 관련 라이브러리가 있긴 하지만, 아쉬운 부분이 많긴 합니다.

Canvas (최종 선택)

(사실 전 WebGL이 뭔지 모릅니다. 관련있다고 해서 가져왔어요.)

결국 최종 기술 스택은 Canvas 로 결정되었습니다.

Canvas에 간단하게 설명을 드리면 <canvas></canvas> 형태로 사용을 해서, HTML안에서 그림을 그리거나 3D를 표시할 수 있습니다. (p5.js, flutter, three.js, Unity 웹 같은 것들이 canvas를 통해 작동됩니다)

아무튼 사실상 처음 마주하는 태그이긴 하지만, 성능과 여러 요소들로 인해 Canvas를 최종 선택하게 되었습니다. 나머지 2개와 다르게 처음 만난 태그이다보니깐 시행착오가 예상되긴 하지만, 그래도 구글신과의 접신을 통해 열심히 개발해보겠습니다.

마무리 하면서

이번 포스트가 스페이스 그래비피의 첫 포스트다보니깐 기획과 디자인 같은 개발 이외의 이야기들이 많이 들어간 것 같습니다. 다음 포스트부터는 본격적인 개발이 시작되면서, 포스트 내내 코드만 존재할 것으로 예상됩니다.

참고로 스페이스 그래비티 포스팅은 Opize 개발일지 처럼 매일 진행하기보다는, 어느정도 작성한 내용이 쌓이면 하나씩 만들어서 업로드할 생각입니다. Opize 개발일지를 쓸 때에는 학교가 방학이라서 공부 안 한 시간이 남아돌았기 때문에 매일 쓸 여유가 있었지만, 개학 이후에는 작성하기가 힘들 것 같습니다 ㅠㅠ 그래도 최대한 자주 쓰도록 노력해보겠습니다.

아직 포스트에는 쓰지 못한 내용이지만, 벌써 UI 쪽은 개발은 어느정도 진행이 된 상태입니다. (물론 로직 말고 디자인 구현만)

혹시 개발중인 사이트가 궁금하시다면 https://space-gravity.hyuns.dev/ 를 방문해주세요!

끝!