웹 게임 개발에 필요한 것들

웹게임은 웹브라우저에서 실행되는 게임을 의미한다.
웹게임 개발을 위해 필요한 것은 웹브라우저, html5, css3, javascript가 있다.
진보된 형태라면 Unity와 Unreal도 존재한다.
그 외 웹게임 개발을 위한 라이브러리들도 여럿 존재하며,
생각이 있다면 하루에 조금씩 공부해 나가면 된다.

웹 게임 개발 필요한 것들

What You Need To Develop Web Games
웹 게임 개발에 필요한 것들

게임 개발 자체는 어렵다.
그렇기에 AI를 이용한 바이브코딩을 하거나, 라이브러리 또는 코드를 구입하여 수정을 하기도 한다.
게임을 새로 개발하는 것보다는 참고하고 수정하는 것이 상대적으로 빠르고, 효율적일 수 있다.
하지만, 요구사항에 맞도록 코드를 수정할 수 없다면 아무 소용이 없다.
하나씩 진행해 보도록 하자.
웹 게임에 필요한 것은 여러가지가 있지만, 기본적으로 필요한 것은 몇 가지 없다.
`웹브라우저, html5, css3, javascript`를 사용할 수 있으면 된다.
다만, 이것을 학습하는 것이 어려울 뿐이다.
단순히 코드를 만들고 프로그램을 만드는 것이 아닌 
그래픽적인 요소부터 알고리즘과 데이터구조 등을 이해할 필요가 있는 것이 게임 분야이다.
간단한 게임도 여러가지 기술들이 사용된다.

준비물

html5를 사용한 웹게임을 개발하기 위해 필요한 것을 나열해 보면 다음과 같다.
코드를 익혀야 하고, 프로그래밍을 할 줄 알아야 하며, 알고리즘과 데이터 구조 등도 학습해야 된다.
점점 어려워진다.
하지만, 기본적인 코딩을 익히는 것이 순서이다.

• Modern Web Browsers
• html5
• css3
• canvas
• three.js
• unity
• unreal

웹 게임 제작을 하기 위해 필요한 것들은 이 정도로 정리할 수 있다.
상대적으로 익히기 쉽다고는 하지만, 어디까지나 상대적일 뿐, 
절대 쉽지 않기 때문에 빠르게 웹 게임 제작을 학습하려면 
위의 것들 중에서도 필요한 것만 학습하는 것이 좋을 것이다.
시작을 하면 끝도 없는 것이 공부해야 되는 분야가 게임이기도 하다.
학습하면 최소한 코드는 주석과 함께 기록해 두도록 하자.
시간이 지날 때마다 학습한 코드가 익숙해지면 
복사하기 붙여넣기 위한 재사용 코드가 될 것이다.
이제 위에서 나열한 웹 게임 제작에 필요한 것들을 하나씩 간단히 정리해 보자.

모던 웹 브라우저
/ Modern Web Browser

조금 생소하기도 익숙하기도 한 것이 `모던 웹 브라우저 ( Modern Web Browser)`이다.
지금의 모든 웹 브라우저는 모두 `모던 웹 브라우저`라 봐도 무방하다.
다만, 특징이 있다. `웹 표준( Web Standard )`에 만족하는지 여부이다.
여기서 언급한 웹 표준은 `html5, css3, javascript, es6+`의 지원여부지만,
크게 신경쓰지 않아도 되는 문제이다.
지금의 거의 모든 웹 브라우저는 모든 웹 브라우저이기 때문.
단지, 공신력과 공식적인 제품인지 확인이 필요하다.
대표적인 최신의 모던 웹 브라우저는 다음과 같다.

• 구글 크롬 / Google Chrome
• 마이크로소프트 엣지 / Microsoft Edge
• 모질라 파이어폭스 / Mozilla Firefox
• 애플 사파리 / Apple Safari
• 오페라 / Opera

html5
/ 구조화된 뭽 문서

컴퓨터를 켜면 웹브라우저를 실행하면 보통 네이버로 이동한다.
깔끔한 디자인에 뉴스와 소식, 다른 지식 등을 한눈에 볼 수 있다.
이런 화면에 보여지는 문서의 구조와 글자, 이미지 등을 웹브라우저에 표현하는 역할을 하는 것이 `html5`이다.
보통 html 이라고 하지만,
html5는 웹표준과 semantic, seo 등의 개념이 추가되며 버전업이 된 것을 뜻한다.
html5의 주목할 특징은 `시맨틱 태그 ( Semantic Tag )`로 문서구조를 명확히 하고 
검색엔진의 접근성을 높여 SEO를 향상시키는 역할을 한다.

canvas
/ 그래픽 사용이 가능한 Dom 요소

canvas 태그는 웹에서 2d, 3d 그래픽을 그릴 수 있는 DOM 요소이며,
자바스크립트를 이용해 동적 그래픽과 인터렉티브가 가능하도록 한다.
간단한 도형을 그리거나, 이미지 편집부터
데이터 시각화를 위한 차트와 그래프,
그리고, 게임까지 가능해 졌다.
웹이 발전하고 화려한 인터렉티브를 요구함에 따라 canvas 태그가 개발되었으며,
html의 버전이 html5로 업그레이드 되면서 canvas 태그가 추가되었다.

css3
/ 웹 문서 꾸미기

웹페이지의 문서의 구조를 만들고, 여러가지 콘텐츠가 작성되었다면 이제는 꾸미기가 필요하다.
모든 문서의 공통점은 깔끔함에 있다.
html5는 웹문서이며, css3를 이용하면 문서의 모양을 꾸밀 수 있다.
`css3`는 `Cascading Style Sheets Level 3`의 약자로 `html5`로 만들어진 웹문서의 스타일 즉, 문서 모양과 디자인을 설정할 수 있다.
`css3`에서 3이란 숫자는 현재 버전을 뜻한다.
그렇다면 css3를 사용하여 html5로 만들어진 문서의 무엇을 꾸밀 수 있을까?
문서의 기본인 글자체인 폰트를 설정하고,
비슷한 콘텐츠들을 그룹화한 박스를 부드러운 모양으로 표현할 수 있다.
그리고, 문서의 여백을 두고, 콘텐츠들의 간격을 지정할 수 있다.
필요하다면 애니메이션 또한 가능하다.

javascript
/ 웹페이지에 동적인 움직임 만들기

`자바스크립트( javascript )`은 정적인 웹 페이지를 동적으로 만들어 준다.
움직임이 없는 웹 페이지를 자바스크립트를 이용하면 움직임이 있고,
사용자에 흥미를 유발하는 애니메이션이나 이벤트를 추가할 수 있다.
정적 ?? 동적 ?? 무슨 뜻일까 ??
정적은 움직임이 없는 보이는 그대로의 모습을 의미한다.
동적은 움직임이 있는 어떤 행동이 있는 모습을 의미한다.
웹은 정적이고, 만들어진 그대로의 웹 문서를 표현하지만,
자바스크립트를 사용하면 이벤트가 추가되어 웹페이지에 움직임을 추가할 수 있다.
움직임이 있다는 것은 보는 사람으로 하여금 흥미를 유발하는 요소이기도 하다.

three.js
/ 3D를 표현한다.

`three.js`를 사용하면 웹에서 3D 그래픽을 사용할 수 있다.
html5의 canvas 요소를 사용하여 3D 그래픽을 표현하고,
자바스크립트를 사용하면 그래픽의 동작을 구현할 수 있다.
three.js 공식 홈페이지를 방문하면 이것을 이용해 구현된 3D 그래픽을 눈으로 확인할 수 있다.
어지간한 것들은 `three.js`를 사용해 웹에서 3D로 표현이 가능한 것을 볼 수 있다.
사용자를 위한 차트, 데이터 시각화부터 게임까지 다양하다.
한번쯤은 익혀보고, 구현해 보고 싶은 것은 당연하겠지만,
너무도 다양한 자바스크립트 라이브러리가 있기에 고민이 된다.
하지만, `three.js`는 여전히 인기가 있고,
웹에서 3D를 구현이 필요한 경우 충분히 고려할 만 하다.

Unity
/ 3D 플랫폼 제작 플랫폼

3D 게임 개발하면 떠오르는 것이 유니티( Unity )와 언리얼( Unreal )이며, 
유니티는 WebGL의 지원으로 웹에서 3D 콘텐츠 사용을 가능하게 한다.
유니티는 게임 뿐만 아니라 3D 콘텐츠 제작이 가능하다.
유니티에 익숙하고 웹에서 3D 콘텐츠의 개발이 필요하다면 고려할 만하다.
느낌적인 것이지만,
three.js 보다 유니티에 익숙한 개발자가 더 많을 것 같은 것이 본인 피셜이다.
유니티 공식 홈페이지을 살펴보자.
화려한 3D를 웹에서 경험할 수 있게 해 주는 것이 
개발자에 도전 의욕을 복돋아 준다.
시간이 문제다.

Unreal
/ 버전 선택 필요.

언리얼(Unreal)은 Unity와 더불어 3D 콘텐츠 제작의 양대산맥이다.
다만, 언리얼을 사용해 웹 게임을 개발하려면 버전을 고려해야 한다.
현재 공개된 언리얼5의 경우 공식적으로 웹 게임에 대한 지원을 하지 않기 때문.
하지만, 언리얼4의 경우 웹 게임을 지원하고 있다고 알려져 있다.
이런 언리얼의 정책이 난해할 수 있지만,
그들만의 고충이 있을 수도 있고, 필요성에 대한 내부적인 선택이 있을 수도 있다.
하지만, 배워두면 요긴하게 써먹을 수 있는 것이 언리얼일 수 있다.