홈시리즈멘토링

© 2026 정기창. All rights reserved.

본 블로그의 콘텐츠는 CC BY-NC-SA 4.0 라이선스를 따릅니다.

☕후원하기소개JSON Formatter러닝 대기질개인정보처리방침이용약관

© 2026 정기창. All rights reserved.

콘텐츠: CC BY-NC-SA 4.0

☕후원하기
소개|JSON Formatter|러닝 대기질|개인정보처리방침|이용약관

웹 기초로 웹게임 만들기 — HTML·JavaScript·CSS로 돌아간 이유

정기창·2026년 6월 13일

데이터베이스를 다루지 않고 웹 브라우저에서만 동작한다고 가정하면, 필요한 것은 HTML, JavaScript, CSS 세 가지뿐입니다. 이 세 가지 요소만으로도 충분히 웹게임을 만들 수 있습니다. 제가 웹게임을 만들려는 이유는, 이를 토대로 교육에 쓰기 위해서입니다.

화면으로 바로 확인하는 개념 학습

JavaScript로는 변수, 상수, 조건문, 함수, 클래스 같은 개념을 익힐 수 있습니다. 그리고 이 개념들은 HTML, CSS와 결합되어 웹 브라우저에서 곧바로 결과물로 확인됩니다. 단순히 콘솔 로그를 찍어 논리가 맞는지 확인하는 데 그치지 않고, 화면에 구현된 내용과 연관 지어 거기에 어떤 개념이 담겨 있는지를 설명하는 방식입니다. 그렇게 하면 집중도 더 잘되고 이해도 더 잘 되는 수업이 될 수 있을 것이라 생각합니다.

물론 이런 방식의 수업은 준비가 많이 필요하고, 막상 해보면 잘 되지 않을 수도 있으며, 어려울 가능성이 높습니다.

다시 기본으로 돌아가기

초심으로 다시 돌아가는 기분입니다. 새로운 기술 트렌드를 좇는 것도, 대규모 시스템 구축에 필요한 개념을 익히는 것도 아니라, 조금 더 단순하게 접근해 볼 필요가 있다는 생각이 들었습니다. 어차피 웹은 HTML, JavaScript, CSS만 있으면 필요한 웹페이지를 구성할 수 있습니다.

웹게임HTMLJavaScriptCSS프로그래밍 교육프론트엔드

관련 글

개발도 결국은 상품을 만드는 일 — 기술 스택 선택이 납품과 유지보수를 결정한다

사이드 프로젝트의 모던 스택을 클라이언트에게 납품하려 하니, 기술 선택이 곧 유지보수 비용과 클라이언트 경험을 좌우한다는 걸 깨달았습니다. 개발자가 시장과 목적에 맞는 기술 스택을 선택해야 하는 이유를 정리했습니다.

관련도 86%

유효한 HTML 문서의 최소 조건, validator로 직접 확인했습니다

HTML은 doctype·head·body 세 개가 필수일까요. WHATWG 스펙 원문을 펼치고 W3C validator에 직접 돌려본 결과, 가장 엄밀한 최소 유효 문서는 세 줄이었습니다. DOCTYPE이 요소가 아닌 이유와 charset이 조건부인 이유까지 실측으로 확인합니다.

관련도 86%

소규모 서비스 개발: MSA 대신 모놀리식 아키텍처를 선택하는 것이 합리적일 수 있다는 생각

소규모 서비스 개발 시 MSA 대신 모놀리식 아키텍처가 합리적일 수 있습니다. 낮은 트래픽과 간단한 기능, 효율적인 비용 관리를 위한 현명한 선택 이유를 알아봅니다.

관련도 85%