HTML5, JavaScript, Canvas, 서버(호스팅): 물리 시뮬레이션을 제작하고 싶습니다.

[newc33]

고등학교 3학년 학생입니다.
기술적인 질문은 아니고, 모르는것이 너무 많아서 질문들이 막연합니다. 죄송합니다.

저는 처음에 하고싶은 프로젝트가 있어서 생활코딩을 접했는데요
제가 만들고싶은 프로그램의 형태는
https://phet.colorado.edu/sims/html/atomic-interactions/latest/atomic-interactions_en.html
http://javalab.org/magnetic_field_around_a_bar_magnet/
이런 사용자가 조작 가능한 물리 시뮬레이션이고,
저희학교 학생들이 접근할 수 있도록 하는 것이 목표입니다.

캔버스라는 태그를 이용해서 링크에 걸어둔 애플리케이션의 효과를 낼 수 있고
호스팅 업체를 통해 서버를 장만하는것이 필요할 것이라는 조언을 받았는데,

1. 저는 생활코딩 사이트에서 웹 애플리케이션 만들기 수업을 시청한 후에 자바스크립트 수업은 함수와 배열 부분까지 봤고 지금은 서버, nodejs수업을 보고 있습니다.
   그게 지금까지 제가 배운 것의 거의 전부인데 캔버스 태그를 이용해서 위와같은 물리 시뮬레이션을 만들 때 더 공부해야 하는 방향을 알려주실 수 있으신가요?

2. 제가 사용하는 컴퓨터가 맥 운영체제라는 사실을 감안할 때
   어떤 기준으로 서버 서비스를 선택해야하며, 또 어떤 프로그램들을 컴퓨터에 설치해야 서버에 작업하는 것을 시작할 수 있는지 알 수 있을까요? 저는 지금 atom 하나밖에 없는 상태입니다.

구글에 찾아보면 여러 업체에서 대부분 이런식으로 안내해주지만 그중에 어떤것이 필요한 것인지 잘 모르겠습니다.

[egoing]

서버 쪽에 어떤 정보를 저장하려고 하는 것이 아니라면 nodejs나 jsp 같은 기술은 필요하지 않습니다. html, javascript 정도의 기술을 이용하시면 됩니다.

JavaScript 수업은 새롭게 제작된 web2 javascript 수업을 한번 살펴봐주시면 좋을 것 같습니다.
https://opentutorials.org/course/3085

또 관련된 작업을 하기 위해서는 캔버스로 직접 구현하는 것도 좋겠지만, 우선 원하시는 형태의 라이브러리가 있는지 확인해보시면 좋을 것 같습니다.

제가 추천 드리고 싶은 검색어는 정도입니다.
javascript graph library

보여주신 자바실험실은 정말 멋진 시도들이 많네요. 관련해서 비교적 최근에 출간된 책 중에 주목을 많이 받았던 책이 있어서 소개해드립니다.

http://www.yes24.com/24/UsedShop/Goods/17638500?scode=048_002

한편 자바실험실의 선생님께 한번 직접 조언을 구해보셔도 좋을 것 같습니다. 조언을 구하실 때는 개인적인 메시지 보다는 공개적인 방법으로 질문을 하시는 것을 권해드려요. 그래야 다른 사람들도 도움 받을 수 있거든요.

비록 조력자는 아닙니다만 조심스레 답변 달아봅니다.

칸아카데미에서 원하시는 내용과 비슷한 내용의 강의를 운영하고 있습니다.
https://www.khanacademy.org/computing/computer-programming/programming-natural-simulations
심화JS: 네추럴 시뮬레이션이라는 강의인데요, 도움이 될 것 같습니다.
https://ko.khanacademy.org/computing/computer-programming/programming-natural-simulations
한국어 사이트도 운영하고 있으니 참고하시면 될 것 같아요.

http://processingjs.org/
칸 아카데미에서는 processingjs라고 하는 라이브러리를 사용합니다. canvas와 같이 라이브러리를 사용하지 않거나 다른 라이브러리를 적용하고 싶다면 상관없지만, processingjs를 사용하고 싶으시면 라이브러리를 다운받아서 적용하셔야 할 겁니다.

혹시 processingjs를 모르신다면 칸아카데미에서 기초부터 가르쳐줍니다.
https://www.khanacademy.org/computing/computer-programming/programming

그리고 하나 더, 만드시려는 웹사이트에는 별도의 서버 측 기술이 사용될 것 같지는 않습니다.
http://alignedleft.com/resources/cheap-web-hosting
정적 웹사이트 호스팅 사이트를 고려해 보세요. HTML,CSS,JAVASCRIPT로 만들어진 사이트를 실행할 수 있습니다.(코딩야학 과정 중에서도, github page라는 정적 웹사이트 호스팅 사이트를 하나 배웁니다)
물론 회원가입과 같이 서버에 데이터를 저장해야 하는 건 못하겠지만, 만드시려는 사이트에서 핵심기술은 JAVASCRIPT를 이용한 물리 시뮬레이션이니 나중에 추가하셔도 될 것 같아요.

고등학교 3학년이면 저랑 나이가 같네요.. 제 답변이 도움이 됬길 바라고... 즐거운 코딩 되시길 바랍니다.