웹 브라우저에서 실행되는 구구단을 만들어보자. -1-

다양한 언어만큼 컴퓨터 언어도 다양하다.

지구상에는 인류의 의사소통을 위한 다양한 언어들이 존재한다. 현재 주류 언어의 위치를 확고히 하고 있는 영어부터 중국어, 스페인어, 독일어, 일본어, 이제는 사장되다시피한 히브리어, 라틴어까지 그야말로 각양각색의 언어들이 의사소통이라는 하나의 기능을 위해 존재한다. 컴퓨터 세계에도 마찬가지로 컴퓨터와 의사소통을 하기 위한 다양한 프로그래밍 언어(Programming language)가 각각의 목적과 기능을 위해 존재한다. 컴퓨터 세계에서 현재 가장 인기가 많은 언어는 JavaScript이다. 과거에 비해 우리가 컴퓨터에서 웹 브라우저를 사용하는 비중이 절대적으로 높아졌기 때문인데 웹 브라우저에서 실행될 목적으로 만들어진 언어가 바로 JavaScript이기에 자연히 JavaScript의 활용도와 중요성이 높아지고 있다.(JavaScript는 최근 웹 브라우저에 국한하지 않고 다양한 영역으로 사용 범위가 확대되고 있지만 여기서는 가볍게 웹 브라우저에 한정해서 다루기로 한다.)

웹 브라우저에서 실행되는 구구단을 만들어보자.

과거에는 프로그래밍 언어를 처음 공부할 때 BASIC 또는 C 언어로 많이 시작했다. C 언어는 하드웨어와 밀접한 임베디드 분야 등에서 여전히 광범위하게 사용되고 있어 현재도 프로그래밍 입문의 시작점으로 손색없는 언어이지만 웹 브라우저에서 보여지는 비주얼한 화면에 익숙한 일반 사용자들에게는 C 언어가 실행되는 검은 색 화면(Console이라고 부른다.)은 딱딱한 느낌이 들 수 있다. 따라서 이번 글에서는 컴퓨터 언어 자체에 생소한 일반인을 대상으로 JavaScript를 이용한 구구단(Times table) 소스 코드(Source code)를 작성해보고자 한다.

구구단 코딩 시작!

구구단을 선택한 이유는 구구단의 비즈니스 로직을 모르는 사람은 없기 때문이다. 프로그래밍을 업으로 하는 프로그래머들은 항상 어떤 프로그램을 작성하기 전에 그 프로그램의 비즈니스 로직을 완벽히 정립하고 이해한 후 코딩을 시작한다. 설계가 완벽히 끝난 후에 집을 짓기 시작하는 것에 비유하면 이해하기 쉬울 것이다.(이러한 지극히 상식적인 개념이 한국 IT 환경에서는 빈번히 무시되고 있는데 한국 IT의 살인적인 야근 문화는 사실 이러한 기본이 무시되는데서 시작한다. 현실적인 상황은 이렇지만 공부할 때는 기본에 충실하도록 하자.)




메모장을 실행하고 위 소스 코드를 그대로 따라서 작성한다. 작성이 끝나면 timetables.html이라는 파일 이름으로 적당한 위치에 저장한다. 한 글자라도 틀리면 정상적으로 실행되지 않는다. 단어의 철자와 문법이 틀려도 의사소통이 가능한 인간의 언어와 다르게 컴퓨터 언어는 한 글자만 틀려도 오류로 인식하고 프로그램의 실행을 중단한다. 사람의 입장에서는 컴퓨터란 것이 융통성이 없다고 생각되겠지만 이러한 엄격함이 오늘날의 IT 산업의 눈부신 발전을 가져왔다고 할 수 있다.

  • 철자를 빠짐없이 똑같이 작성하여 저장하였다면 해당 파일을 더블 클릭해보자. 웹 브라우저가 실행되면서 아래와 같이 구구단이 실행될 것이다. 같은 결과가 나오지 않았다면 다시 한번 철자가 틀렸는지 확인해보자.


  • 이미 용어에 익숙한 사람이 있겠지만 이 소스 코드는 HTML5로 작성되어 있다. HTML(HyperText Markup Language)은 일종의 문서 작성을 위한 언어이다. 프로그래머가 미리 정해진 HTML의 규칙대로 문서를 작성하면 웹 브라우저는 이 문서를 해석하여 사용자에게 올바르게 출력하는 역할을 수행한다. 따라서 HTML 언어를 알아야 HTML 문서를 작성할 수 있다. 우리가 편리하게 이용하는 대형 포탈 및 SNS 서비스의 화면들은 모두 HTML로 작성되어 있다. 해당 사이트에 방문한 상태에서 웹 브라우저 상에서 오른쪽 버튼을 클릭하고 HTML 소스 보기 기능을 실행하면 눈에 보이는 화려한 화면이 어떻게 HTML 소스 코드로 작성되어 있는지를 볼 수 있다. 문서의 어느 부분이 제목이고 어느 부분이 단락인지 또는 꼬리말인지 등의 문서의 구조를 정의하는 것이 HTML 언어의 가장 중요한 기능이라고 보면 된다. HTML5 이전의 구버전의 HTML은 글자색이나 크기같은 문서의 꾸밈새까지 다루었지만 HTML5에 이르러서는 HTML은 문서의 구조를 정의하는데 집중하고 꾸밈의 역할은 CSS(Cascading Style Sheets)가 수행할 것을 권장하고 있다. 지금 시점에서 당장 자세히 이해할 필요는 없다.

  • 위 HTML 소스 코드를 간단히 설명하겠다. 5행의 <title></title> 사이에는 문서의 제목이 들어간다. 바로 웹 브라우저에 표시되는 제목이다. 7~19행의 <body></body> 사이에는 문서의 실제 내용이 들어간다. 현재 위 문서의 내용은 아무 내용없이 비어있다. 추후 구구단 소스를 업그레이드하면서 내용을 채워나갈 것이다. 지금 시점에서 HTML은 이 정도로 이해하자. 컴퓨터 언어를 공부할 때는 처음부터 모든 것을 이해하려면 힘들다. 당장 중요한 부분부터 차근차근 작은 그림에서 큰 그림으로 이동하면 훨씬 이해가 수월하다.

  • 앞에서 분명히 <body></body> 사이에 아무 내용도 없다고 했다. 하지만 보다시피 8~18행이 로 둘러쌓인 소스 코드가 존재한다. 과연 무엇일까? 바로 JavaScript 언어로 작성된 소스 코드이다. JavaScript는 이렇게HTML 문서 안에 작성하여 웹 브라우저를 통해 실행한다.(실제로 JavaScript는 별도의 파일로 작성하는 것이 일반적이지만 여기서는 혼란을 줄 수 있기 때문에 설명하지 않는다.)

  • 그렇다면 HTMLJavaScript의 차이는 무엇일까? 둘 다 컴퓨터 언어인데 말이다. HTML은 앞서 설명했듯이 화면에 출력될, 즉, 사용자에게 출력될 문서의 구조와 내용을 정의하는데 사용한다. 그렇다면 JavaScript는? 이러한 정적인 문서에 동적인 행위를 작성하는데 사용한다. 초창기 인터넷을 경험해본 사람은 기억하겠지만 대부분의 웹 사이트가 사용자에게 일방적인 정적인 화면을 보여주는 수준에 불과했다. 하지만 현재는 사용자와의 커뮤니케이션을 통해 하나의 프로그램을 사용하는 느낌으로 사이트를 이용하고 있다. 프로그래머는 이런 동적인 행위를 JavaScript로 작성하게 된다. 웹의 세계는 HTMLJavaScript의 조합이라고 이해하면 되겠다.(물론 제대로 설명하자면 훨씬 복잡하다. 지금은 이 정도로만 이해하자.)

  • JavaScript로 작성된 부분, 즉 위 소스 코드의 9~17행을 보면 document.write();라는 문장이 반복되어 쓰이고 있다. 무슨 의미일까? 바로 문서, 즉, 화면 상에 특정 문자열을 출력하라는 명령어이다. document.write()JavaScript가 미리 내장하여 제공하는 명령어이다. 대부분의 프로그래밍 언어는 이렇게 미리 정의되어 내장된 여러 명령어를 제공한다. 만약 내가 원하는 명령어가 없다면 만들면 된다. 이 부분은 다음 글에서 설명할 예정이다.

  • 눈치가 빠르다면 document.write()는 구구단을 출력하기 위해 사용했다는 것을 알 수 있을 것이다. 그렇다면 문장마다 뒤에 붙은 ;(세미콜론) 기호는 무엇일까? 바로 문장의 끝을 의미한다. JavaScript에서는 한 명령어, 즉, 한 문장이 끝날 때마다 ; 기호를 붙여야 한다.

  • document.write('지단로보트');를 실행하면 화면에 지단로보트라는 문자열이 출력된다. 아래 문자열 출력의 다양한 예를 꼼꼼히 살펴보자. 위 9~17행의 의미를 자연스럽게 이해할 수 있을 것이다.

    • document.write('지단' + '로보트'); 지단로보트
    • document.write('지단' + ' 로보트'); 지단 로보트
    • document.write('지단' + ' 로보트' + 2); 지단 로보트2
    • document.write('지단' + ' 로보트 ' + (2+3)); 지단 로보트 5, 덧셈이 실행된다.
    • document.write('지단' + ' 로보트' + (2*3)); 지단 로보트6, 곱셈이 실행된다.
    • document.write('지단' + '<br>로보트' + (6/3)); 지단<줄바꿈>로보트2, <br>은 줄바꿈을 의미하는 HTML 명령어로 화면 상에서는 다음 행으로의 줄바꿈이 발생한다.

여기까지 가장 원시적인 형태의 구구단 소스 코드에 대한 기본적인 설명이 끝났다. 다음 글에서는 구구단 소스 코드를 효율적으로 개선하는 방법을 소개할 것이다. 최종적으로는 화려한 UI를 가진 세련된 구구단 소스 코드로 탈바꿈할 것이다. 단계별 개선 과정을 통해 자연스럽게 프로그래밍 언어의 개념을 이해할 수 있을 것이다.


궁금한 점은 댓글 또는 이메일 주소 jsonobject@gmail.com으로 문의하여 주시면 답변드리도록 하겠습니다.^^

저작자 표시 비영리 동일 조건 변경 허락
신고