첫 아이가 태어나고 제로초라는 웹 개발자의 강의를 듣고 블로그를 보며 웹 개발을 배웠다. 그때 문뜩 HTML, CSS, Vanilla JavaScript로만 테트리스 게임을 만들 수 있다면 웹 개발자 주니어 직군에 지원할 자격이 된다고 말했었다. 아직 어린 아이들을 돌보고 있는 입장에서 회사에 지원할 상황이 안 되지만 그 정도의 실력을 체득하고 싶다.
하지만 이번에는 공부 방향을 바꿔보려 한다. 여태까지 주로 동영상 강의를 시청하며 웹 개발을 배웠다. 동영상 강의로도 많은 것을 배웠지만 수동적으로 배웠다는 느낌이 들었다. 이번에는 시간이 더 걸릴지 모르지만 능동적으로 배우려고 한다. 최대한 동영상은 배제하며 모든걸 알려고 하기보다는 하나씩 해나가면서 모르는 것을 찾아가고 기록하며 개발할 예정이다. 그리하여 브라우저에서 돌아갈 수 있는 테트리스 게임을 만들고 그 과정을 블로그에 기록할 예정이다.
우선 웹 브라우저에서 돌아갈 수 있는 테트리스 게임을 만들기 전 가장 기본인 HTML에 대해서 알아보자.
- HTML은 무엇인가?
HTML은 서버에서 받아온 데이터를 웹 브라우저에 보기 좋게 보여주기 위해 필요한 마크업 언어(mark up language)이다. 간단하게 사람의 몸을 예로 들겠다. 사람은 뼈대와 살로 구성되어 있다. 여기에서 필요한 데이터가 살이라면 HTML은 웹 브라우저에 보여줄 수 있게 도와주는 뼈대인 것이다. 브라우저야 내가 서버에서 받아온 데이터를 브라우저에 표현하라고 알리는 것이다. 웹 개발의 기초는 HTML로 데이터를 브라우저에 보여주는 걸로 시작한다.
웬만한 컴퓨터에 있는 메모장에서도 HTML을 타이핑해서 코드를 작성할 수 있다. 그렇지만 시간이 많이 걸린다. 개발자 혹은 프로그래머들은 단순하거나 반복되는 일을 프로그램으로 만들 수 있는 사람이다. 그리하여 만들어진 프로그램이 코드 편집기다. 코드 작성을 쉽게 도와주는 프로그램이다. 코드 편집기를 사용하여 웹 개발을 할 때 여러가지 확장 프로그램을 깔고 매크로를 설정하면 개발 시간을 줄일 수 있다. 여기에서 깨달은 인생의 중요한 교훈 하나가 있다. 시간은 돈이다. 그리고 다시 돌릴 수 없는 누구에게나 공평한 자원이다. 불필요한 일에 시간을 줄여야 한다.
다시 원점으로 돌아와서 코드 편집기는 종류가 많다. 나는 우선 무료인 Visual Studio Code로 웹 개발을 할 것이다. 구글에서 Visual Studio Code를 검색하고 다운로드 받으면 된다. 그럼 편집기를 열고 게임을 만들 코드가 들어갈 폴더를 만든다. 폴더 안에는 “index.html”, “style.css”, “script.js”를 만들어 저장한다.
그리고 index.html에서 브라우저가 html 파일을 인식할 수 있든 기초 틀인 코드를 작성한다. 간단하게 설명하면 웹 페이지의 메타 데이터는 주로 <head></head> 사이에 작성한다. 데이터는 <body>와 </body> 사이에서 표현된다.
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]> <html class="no-js"> <!--<![endif]-->
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Tetris</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="style.css">
</head>
<body>
<!--[if lt IE 7]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="#">upgrade your browser</a> to improve your experience.</p>
<![endif]-->
http://script.js
</body>
</html>
YLee's Personal Blog 
Leave a comment