테트리스 게임 블록의 가장자리를 곡선으로 만드는 경험을 설명한다. 자바스크립트 코드를 수정하지는 않지만 CSS 파일을 수정해서 게임 화면이 변하는 것을 확인할 수 있다.
테트리스 코드
내가 만든 테트리스 게임이 특별하다는 의미에서 설명하는 것은 아니고 코드를 조금 수정하여 그 결과를 확인하는 경험을 알려주고 싶어서 이 게임을 선택했다. 이 테트리스는 GitHub에 올라가 있다. 개인이 코드를 남에게 주는 가장 간편한 방법은 이 메일이지만 여러 사람이 동시에 공유하려면 GitHub 같은 사이트에 올리는 것이 좋아서다. GitHub은 코드를 같이 보고 같이 수정하기 쉽도록 도와주는 사이트라고 생각하면 좋겠다. 누구나 브라우저만 있으면 아래 주소에 접속해서 코드를 다운로드할 수 있다.
https://github.com/afrontend/fp-tetris-game
위 링크를 따라가면 설치 방법과 실행 방법이 나와 있다. 코딩한다는 의미는 이런 작업들도 모두 한다는 의미다. 검은 화면에 커서가 껌뻑이는 터미널에서 다운로드하자. 다운로드 하는 명령어들은 모두 README.md 파일에 적혀있다. 브라우저로 다운로드할 수 있지만 실행하려면 터미널에서 명령을 내려야 하므로 처음부터 터미널에서 작업하겠다. 윈도에서 터미널을 연다.
테트리스 코드 다운로드
테트리스 코드는 다음 명령을 수행하면 다운로드할 수 있다. README.md 파일에 적혀있는 그대로다.
git clone https://github.com/afrontend/fp-tetris-game
cd fp-tetris-game
npm install
npm start
이 암호 같은 명령어는 외워야 하나? 그럴 필요 없다. 다만 그 의미만 이해하면 된다. 어디에다가 이 명령어들을 입력해야 할까? 당신이 사용하는 컴퓨터의 운영체제에 따라서 달라진다. 여기서 잠깐 운영체제가 뭘까? 컴퓨터에 전기를 공급하고 전원 버튼을 누르면 수행되어 모니터에 웰컴이라고 표시하는 프로그램이라고 간단하게 설명할 수 있다. 한마디 더 덧 붙이자면 컴퓨터 용어는 영어로 이해하는 것이 더 적당한 경우가 많다. 운영체제는 Operating System이라고 하고 줄여서 OS라고도 한다. 영어 우선이다. OS는 윈도즈, 리눅스, 맥 오에스 등등의 종류가 있다. 윈도즈를 사용한다고 가정하겠다. 보통 키보드로 명령을 입력하고 그 결과를 보는 프로그램을 터미널이라고 한다. 터미널 뒤에는 쉘이라는 프로그램이 동작하면서 사용자의 명령을 처리한다. 위의 명령어 입력은 잠시 미루길 바란다. 아래에서 설명할 예정이다.
첫 줄
Git 명령어는 github에서 소스 코드를 가져오는 프로그램이다. GitHub에서 제공하는 툴은 아니고 GitHub이 이 툴과 잘 동작하도록 지원한다는 말이 맞다. 이 툴은 소스 코드를 관리하는 중요한 목적으로 사용되지만 여기서는 코드를 가져오는 용도로만 사용한다. GitHub는 git 명령어로 소소 코드를 관리하는 기능을 제공하는 웹 서비스다.
git clone 명령을 사용하면 뒤에 입력한 주소의 소스 코드를 현재 폴더에 복사한다. 영어 단어 뜻 그대로다 clone 한다는 말이다. 여기서 잠깐 코드는 뭐고 소스 코드는 뭔가? 코드 네임 007이란 말은 들어 보았을 것이다. 특정 문자에 다른 의미를 두어 부르는 것을 코드라고 한다. 이런 상징은 사용하는 사람들의 암묵적인 합의다. 소스 코드는 코드라는 말 보다 조금 더 구체적인 의미를 가지고 있다. 소스 코드는 프로그래밍 언어의 규칙으로 만든 텍스트 파일을 말한다. 사람이 읽기에 수월하도록 발전했지만 아직 자연어 수준은 아니다. 이 소스 코드는 컴퓨터에게 어떤 일을 시키기 위해 만들며 당연 컴퓨터가 이 소스 코드를 읽고 일을 처리한다. 친구끼리 암호를 만들어서 001, 002 이렇게 서로 말하기로 약속했다면 이것도 코드다. 그렇지만 이것을 소스 코드라고 하지 않는다. 코드를 짠다 코딩한다 코드를 만든다 뭐 이렇게 말하면 대부분 소스 코드를 만드는 것을 의미하고 그 결과물은 대부분 텍스트 문서다. 소스 코드를 코드라고 불러도 되지만 컴퓨터를 처음 접하는 사람에게 차이점을 설명할 필요가 있다.
두 번째 줄
이 명령어는 무엇일까? 현재 폴더를 옮기는 명령이다. 그렇다면 현재 폴더는 무엇일까? 명령행 창이 내부적으로 동작할 수 있는 위치를 말한다. 현재 위치는 뭘까? 명령을 내리면 명령의 대상이 되는 곳을 말한다. 그러면 명령행 창은 무인가? 윈도즈 운영체제에서 Win+R 키를 입력하고 그다음 “cmd” 문자열 명령을 입력했을 때 나타나는 보통 검은 바탕의 프로그램을 말한다. 커서가 깜빡이면서 키보드 입력을 기다린다. 이 프로그램에
cd
라고 입력해 보자. 그러면 현재 폴더를 알려준다. 모든 명령행 창에 입력하는 명령어는 현재 폴더 기준으로 동작한다. 그래서 현재 폴더를 아는 것이 중요하다. 명령행 창은 커서를 보여주는데 커서 왼쪽에 아래와 같은 문자열이 있는 것을 확인할 수 있다.
c:\>
이런 문자열을 프롬프트라고 한다. 사용하는 명령행 프로그램에 따라서 다르게 보일 수도 있다. 보통 현재 폴더를 알려주는 역할을 겸한다. 여기서 잠깐 문자열은 무엇일까? 문자들을 나열한 것을 문자열이라고 한다. 영어로 string이라고도 한다. 문장이라고 이해해도 된다. 공백을 포함할 수도 있다.
세 번째 줄
npm은 자바스크립트를 사용한다면 꼭 알아야 하는 툴 3위에 든다. 여기서는 자바스크립트 게임을 가능하게 만드는 전 단계 처리기라고 이해하면 편하다. 이 명령어를 수행하면 많은 자바스크립트 파일들이 설치된다. npm 프로그램은 package.json 파일의 정보를 읽어서 node_modules 폴더에 많은 자바스크립트 파일을 다운로드한다. 어떤 파일들이 설치되는지 그 과정을 지켜보면 된다. 여기서 잠깐 왜 다른 자바스크립트 파일들을 다운로드하는 것일까? 물론 내가 만든 자바스크립트만으로 코드를 작성할 수도 있다. 그렇지만 이미 다른 사람들이 잘 만들어 놓은 것을 가져다 사용하는 것도 좋은 방법이다. 다른 사람들과 같이 일할 때도 필요하고 회사에 들어갔더니 이미 있는 코드를 볼 때도 필요하고 인기 있는 자바스크립트 라이브러리를 사용해서 빠르고 안정적으로 개발할 때도 필요하고 고객이 꼭 이 라이브러리를 사용해서 만들어 주세요라고 할 때도 필요하고 내 코드가 너무 커져서 나누어야 할 때도 필요하다. 오로지 내 코드만으로 개발할 경우도 있지만 대부분 다른 사람의 코드를 같이 사용하게 된다. 놀라지 말자.
네 번째 줄
이제 단 하나의 명령어만 남아 있다.
npm start
이 명령어를 수행하면 로컬에 웹 서버가 동작하게 되고 브라우저에서 이 웹 서버에 접근하여 게임을 할 수 있다. 여기서 잠깐 웹 서버는 무엇인가? 우리가 브라우저를 사용할 때 주소를 직접 입력하는 경우가 있다. 이때 입력하는 주소가 웹 서버 주소다. 브라우저는 이 주소가 가리키는 인터넷 저 멀리 끝에 웹 서버가 있다고 생각하고 정보를 요청한다. 웹 서버가 정보를 주면 브라우저는 화면의 내용을 변경한다. 보통 웹 서버는 커다란 프로그램이다. 커다랗다는 것은 일을 많이 한다는 의미도 되고 그것을 만들고 유지하는데 에너지가 많이 든다는 말도 된다. 그렇다면 로컬 웹 서버는 무엇인가? 지금 사용하는 컴퓨터에 웹 서버 프로그램을 동작시킨 것을 말한다. 왜 로컬이라고 말하는가? 주소가 없기 때문이다. 멀리 미국에 있는 사용자가 나의 컴퓨터에 방금 동작시킨 웝 서버에게 뭔가 요청할 수 없다는 뜻이다. 인터넷에 있는 웹 서버에게 뭔가 요청하려면 그 서버의 주소가 필요한데 그 주소가 없다는 말이다. 그렇다면 주소가 없는 웹 서버에는 어떻게 접속하는가? 아래와 같은 미리 지정된 주소를 사용하여 접속한다. 특별한 경우라고 우선 생각하자. 접속한다는 말은 브라우저에서 아래 주소를 입력하고 검색 버튼을 누른다는 의미다.
위의 주소를 브라우저에 입력하여 잠시 게임을 해 보자. 방향키만 사용하면 된다. 사용법은 눌러서 확인할 수 있다. 여기서 당신은 불편한 점을 발견한다. 테트리스 블록의 네모가 너무 각지다고 생각한다. 그래서 조금 더 동그랗게 바꾸고 싶어 졌다. 자 그럼 어디를 고쳐야 할까? 고칠 부분이 브라우저에서 보이는 부분인가? 그렇다면 브라우저의 특수한 기능을 사용하여 코드를 고치지 않고도 모양 정도는 바꿀 수 있다.
잠깐, 위의 명령을 수행하려면 아래 두 개의 프로그램이 미리 설치되어 있어야 하지만
생각보다 번거로울 수 있다. 위의 명령을 직접 사용하는 것은 이후로 미루고 우선 아래 주소를 사용하여 테트리스 게임을 브라우저에서 확인하자.
https://afrontend.github.io/game/fp-tetris-game/
브라우저 개발자 도구
웹 서비스를 이용하는 일반적인 방법은 브라우저를 수행해서 인터넷 사이트 주소를 입력하는 것이다. 이때 브라우저를 웹 서비스 클라이언트라고 말할 수 있다. 서버는 인터넷 저편에 있고 그 정보를 읽기 위해서 여기 내 컴퓨터에 설치된 브라우저를 사용하는 것이다. 브라우저는 자바스크립트를 수행하는 프로그램이자 자바스크립트를 프로그램을 만드는 용도로 사용할 수 있는 개발자 툴이다. 브라우저를 만드는 사람이 개발자가 사용하도록 추가 기능을 넣어 놓았다. 브라우저 개발자 도구 혹은 F12 도구라고 한다. 브라우저에서 키보드의 F12키를 누르면 개발자 도구가 나타남으로 이렇게 부르기도 한다. 이 시점에서 브라우저 개발자 도구를 왜 설명하는가? 소스 코드를 직접 수정하기 않고도 화면에 보이는 테트리스 블록의 각을 부드럽게 할 수 있기 때문이다. 이런 경험이 개발이 도움이 된다. 조금 더 상세하게 말해서 파일로 존재하는 소스 코드를 수정하지는 않지만 브라우저 개발자 도구로 볼 수 있는 소스 코드를 수정한다는 말이다.
화면의 모양을 변경한다.
브라우저가 읽고 동작하는 파일은 대표적으로 세 가지다. 이미지 파일도 있고 동영상 파일 등등도 있지만 우선 우리가 사용하는 텍스트 파일만 생각하자.
- HTML
- CSS
- JavaScript
그렇다면 이런 파일들은 어디에 있을까? 내 하드디스크에 있을 수도 있고 멀리 외국의 서버에 있을 수도 있다. 브라우저 개발자 도구를 통하여 브라우저가 현재 읽고 해석하는 이 파일들을 확인할 수 있다. 단, 도구를 통하여 보는 소스 코드는 브라우저 메모리에 있는 내용이다. 물론 현재는 하드디스크에 있는 소스 코드와 내용이 동일하지만 다르게 변경할 수도 있다. 세 가지의 텍스트 파일 중에 CSS파일은 쉽게 변경하고 그 결과를 바로 확인할 수 있는 장점이 있다. 디버깅 용으로도 사용한다. 이 값을 변경해서 블록의 네모를 동그랗게 들어보자. 설명을 쉽게 하기 위해 당신은 크롬 브라우저를 사용한다고 가정하다. 변경하고 싶은 모양을 개발자 도구를 사용하여 지정하겠다. 아래 키를 입력한다.
Ctrl+Shift+c
위의 세 키를 동시에 누르면 개발자 도구 창이 나타난다. 보통 브라우저 아래에 나타나지만 오른쪽에 나타날 수도 있다. 이 상태에서 마우스를 움직여 보자 테트리스 게임의 블록 위로 이동하면 마우스 포인트 주변에 하이라이트가 나타나면서 개발자 툴의 일정 부분이 빠르게 변하는 것을 볼 수 있다. 내가 원하는 것은 블록의 모양임으로 변경하고 싶은 블록 위에 마우스를 두자. 그리고 클릭한다. 이제 개발자 도구 화면을 주목하자 여러 탭 중에 “스타일”이라고 표시된 창에서 방금 선택한 블록에 대한 여러 속성들을 볼 수 있다. 여기서 “border-radius” 속성을 변경하면 블록의 각이 부드러워진다. 이 속성 글자에 마우스를 위치하고 클릭한다. 직접 숫자를 입력해도 되고 위아래 방향키를 사용하여 값을 변경해도 된다. 변경 즉시 테트리스 블록의 모양이 변경되는 것을 확인할 수 있다. 문제는 하나의 블록만 변경되는 것이 아니고 모든 블록이 변경된다는 것이다. 우선 이 부분은 넘어가자. 이런 방법으로 개발자 툴을 사용하는 것은 대부분의 브라우저에서 가능하다. 이렇게 변경한 내용은 브라우저 다시 읽기를 하면 사라지는데 저장하고 싶다면 소스 코드 파일을 에디터로 열어서 수정하고 저장하면 된다. 그렇다면 어떤 파일을 수정해야 할까? 위에서 살펴봤던 개발자 도구 창에서 “스타일” 알려주는 창의 오른쪽 구석에서 파일 이름을 확인할 수 있다. 이 파일을 하드디스크에서 찾으면 된다. 우리가 내려받은 코드 중에 아래 파일이다.
App.css
자바스크립트로 만들어진 게임을 수정하는데 왜 css로 끝나는 파일을 수정해야 할까? 답은 간단하다 자바스크립트는 또 다른 두 언어와 함께 일을 하기 때문이다. HTML 언어, CSS 언어라고 부르고 각각 html, css 문자열로 끝나는 파일 이름을 가지고 있다. 함께 일한다는 말은 브라우저에서 자바스크립트, HTML, CSS 파일을 모두 읽어서 해석한다는 뜻이다. 한 번에 세 가지 언어를 동시에 사용한다고 봐도 된다. 이미 테트리스 게임을 하고 있는 상황에서 하드디스크에 저장된 App.css 파일을 수정하면 바로 브라우저가 변경된 파일을 알고 다시 읽을까? 그렇지 않다. 브라우저는 자신이 해석할 App.css 파일이 변경되었는지 모른다. 다시 읽을 계획도 없다. 개발자가 코드를 사용하여 알려주지 않았기 때문이다. 브라우저 다시 읽기를 시도해야 한다. 파일을 수정하고 브라우저 다시 읽고 확인하는 과정이 불편함으로 개발 환경을 만들어 이런 불편함을 개선할 수 있지만 당장은 조금 불편하게 개발하자. 블록을 각지지 않게 만든 것을 코딩했다고 말할 수 있을까? 그렇다. 코딩 맛을 본 것이다. 아무것도 없는 코드에서 시작하는 경우도 있지만 이미 코드가 있는 상황에서 수정하는 경우도 많다.
흥미로운 코드 찾기
이 게임이 흥미롭지 않다면 다른 코드를 찾으면 된다. 세상에는 무료로 볼 수 있는 코드가 넘쳐난다. 이제 할일은 너무나 재미있어 보이는 코드를 찾는 것이다. 이만한 취미생활이 없다.
참고
에디터
텍스트 파일을 읽어서 수정하는 툴을 에디터라고 한다. 어떤 에디터를 사용할 것인지 결정해야 한다. 백만 가지 에디터가 있지만 인기 있는 것을 추리면 몇 안됨으로 결정하는 것이 어렵지는 않다. Visual Studio Code를 선택해도 된다. 익숙해지는데 시간이 걸린다.
프로그래머
코드를 만드는 사람을 누구라고 부를까? 많이 쓰이는 용어에 익숙해지면 다른 사람에게 내 의견을 이야기하고 다른 사람의 이야기를 들을 때 편하다. 개발자, 프로그래머, 코더, 엔지니어라고 부른다. 개인의 취향을 말한다면 나는 스스로를 자바스크립트 개발자라고 한다.
- Developer: 여러 회사에서 무슨 무슨 개발자 뽑아요 라고 말한다. 서비스를 만드는 사람이라고 생각한다.
- Programmer: 프로그래밍 언어를 사용하여 코딩하여 문제를 해결하는 사람
- Coder: 코딩만 하는 사람이라고 한다던데 동의할 수 없다. 프로그래머랑 같은 말이다.
- Engineer: 기술적인 부분이 강조된 용어 소포트웨어 엔지니어, 하드웨어 엔지니어라고도 한다. 누군가는 좀 더 고급 기술을 다루거나 서비스 전체를 바라본다거나 오랜 기술이 집약되었다거나 라고 말하는데 물론 나는 동의하지 않는다.
보통 회사에서 사람을 뽑을 때 “코더 찾아요”라고 하지는 않는다. 어색하지만 “엔지니어 찾아요”하는 회사는 간혹 있다. 다 같은 말이다. 용어보다는 구체적으로 무엇을 하는지가 중요하다. 굳이 하나만 쓰라면 개발자라고 하겠다.
