요즘은 모바일이 대세죠? 모바일에서 더욱 주목 받는 환경이 바로 웹인데요. 웹 애플리케이션은 별도 설치할 필요 없이 브라우저만 있다면 OS나 디바이스에 상관없이 실행됩니다. 또한 수립된 표준을 브라우저 제조사들이 준수하는 추세이기 때문에 개발자들에게 좋은 환경을 제공해 줍니다. 결국 웹 애플리케이션은 사용자와 개발자 모두에게 이득이 되는 환경이라고 할 수 있죠.
제가 처음 웹 개발 환경을 접했을 때는 기본 개념이 부족했기에 ‘맨땅에 헤딩’을 많이 했습니다. 기본적인 개념에 익숙하지 않은 상황에서 외부 컨퍼런스나 강의도 잘 이해되지 않았죠. 이번 시간에는 기본적인 웹 개발 지식 습득에 기준점이 되는 기술들을 살펴보겠습니다.
Java Script
처음 웹 개발 시 가장 혼란스러웠던 것이 JavaScript 였습니다. Java와 무슨 관계인지, 표준이 따로 있는데 왜 브라우저들마다 작동 방식이 다른지, JavaScript로 HTML을 다루는데 왜 각각 표준 협회가 다른지 등 궁금한 점이 많았고, 어디부터 공부해야 할 지도 몰랐습니다.
제 경험을 바탕으로 정리해보면, 크게 세가지 개념에 대해 먼저 공부하는 것이 JavaScript를 이해하기 쉬울 것 같습니다. JavaScript 이해의 기본이 되는 ECMAScript(European Computer Manufacturers Association), DOM (Document Object Model), BOM(Browser Object Model) 세 가지 내용을 자세히 알아보겠습니다.
1. ECMAScript
기존 클라이언트(브라우저)는 Script들이 각각 다른 방식으로 동작했습니다. 이에 ECMA에서는 이러한 Script들을 일치시키기 위해 1997년 ECMAScript를 제정했는데요. 이후 ISO와 IEC에서도 표준으로 받아들여져 전세계 표준으로 자리잡게 되었습니다. 이러한 ECMAScript의 명세1 를 구현한 Script 중 하나가 바로 JavaScript 입니다.
브라우저는 JavaScript가 실행되는 하나의 호스트 환경일 뿐입니다. ECMAScript 명세에서도 general purpose라는 표현을 쓰고 있는데, 실행되는 환경이나 개발 언어에 제한을 두지 않는다는 의미입니다. 문법, 타입, 키워드, 예약어, 연산자, 객체 등과 같은 언어 공통의 속성 명세를 하기 때문에 실행 환경에는 영향이 없는 것이죠.
JavaScript 프로그래밍을 할 때는 Java와의 차이점을 인식하는 것이 중요합니다. JavaScript에 ‘Java’가 쓰인 이유는 당시 JavaScript 개발을 맡았던 브렌던 아이크(Brendan Eich)가 개발 일정을 앞당기기 위해 Java 개발사인 Sun microsystems와 공동으로 개발했기 때문입니다. Java는 타입 검사가 엄격한 언어인 반면, JavaScript는 굉장히 유연합니다. 또한 코드를 재사용하기 위한 방법도 각각 다릅니다.
이와 같은 차이에 대해 전문가들 사이에서도 조금씩 이견이 있는데요. 가령 객체를 생성할 때 new를 사용하는 것은 JavaScript스럽지 않다는 의견이 있는 반면, JavaScript에서 제공하는 코드 재사용 방식 중 하나인 prototype과 new를 함께 사용하면 좋다는 의견도 있습니다.
이러한 관점의 차이는 초기에 표준이 정교하지 않아 나온 현상일 수도 있습니다. 원래 JavaScript에서는 class라는 용어가 없었지만 올해 명세가 나온 ECMAScript 6판에 class와 관련된 문법이 나왔죠. 이런 변화를 봤을 때, ECMAScript는 기술 발전에 따라 유연하게 발전하고 있는 것을 알 수 있습니다.
JavaScript는 유연한 언어입니다. 따라서 코드를 아름답고 읽기 쉽게 작성하기 위해서는 많은 모범 기법 사례를 학습하는 것이 중요합니다. 모법 기법 사례대로 잘 작성하면 매우 강력한 언어가 될 테지만, 그렇지 않으면 코드가 복잡하고 읽기 어렵게 되기 때문입니다.
참고로 Java를 사용하던 개발자들에게는 JavaScript로 상속을 구현하는 것이 낯설 수 있습니다. 그런 경우, GoF(Gangs of Four)2로 유명한 『Design Patterns: Elements of Reusable Object-Oriented Software』이라는 책의 “클래스 상속보다 객체 합성을 우선시 하라”는 내용을 참고하면 좋습니다. 복잡한 계층 타입을 생성하는 것 보다는 캡슐화와 줄어드는 종속성, 그리고 동적 변경이 가능한 방법을 먼저 고려해보시기 바랍니다.
2. DOM
한글로는 ‘문서 객체 모델’로 주로 번역되고 있습니다. DOM(Document Object Model)은 노드의 계층구조로 표현되는 XML, HTML이 브라우저 혹은 기타 환경에 객체로 만들어졌을 때 특정 노드(태그)에 대해 여러 작업을 수행하기 위한 API입니다.
이 DOM 또한 웹에만 국한된 것이 아닙니다. 어느 언어로든지 이 문서 객체들을 표현한 환경에서 문서 객체들을 다룰 수 있도록 메서드들을 만들어 놓았다면 DOM이라고 할 수 있습니다. 참고로 Android에서도 org.w3c.dom이라는 패키지에 Java로 문서 객체들을 조작할 수 있도록 DOM을 구현해 놓았습니다.
3. BOM
한글로는 ‘브라우저 객체 모델’ 정도로 번역될 수 있으나 원어 그대로 BOM(Browser Object Model)으로 많이 쓰입니다. 한동안 BOM은 표준이 없어서 브라우저 마다 동작이 달랐습니다. 하지만 HTML5 명세에서 일부 BOM 내용을 다루기 시작했고 표준을 마련하기 위한 준비도 하고 있습니다. BOM은 창과 프레임에 대한 인터페이스를 주로 다루고 있습니다.
최근에 Android chrome에서 브라우저의 상태바 색을 변경할 수 있는 meta 태그 속성을 제공하고 있습니다. 이런 기능이 공식적으로 BOM에 추가된다면 브라우저의 웹 애플리케이션이 더욱 네이티브 애플리케이션에 가까워질 것입니다. 그렇게 된다면 사용자 경험이 보다 개선될 수 있겠죠?
HTML5
본래의 HTML(Hyper Text Markup Language)은 주로 논문과 같이 과학과 관련된 문서를 편리하게 볼 수 있는 언어였습니다. 문서 간의 이동과 텍스트를 강조할 수 있는 기능을 담고 있죠. 하지만 최근 많은 발전을 걸쳐 웹 애플리케이션을 위한 HTML5 표준 명세로 발전하게 되었습니다.
HTML5는 웹 애플리케이션의 화면 구조를 잡는데 주로 쓰입니다. 웹 애플리케이션을 만들 때 HTML5는 화면의 텍스트와 이미지들을 화면에 보이는 그대로가 아닌 주로 논리 단위로 나누기 위해 쓰입니다. 물론 HTML5 자체만으로도 눈에 보이는 변화를 줄 수 있지만 현재는 CSS로 대부분의 UI 작업을 하고 있습니다.
가령 HTML5 is not difficult라는 태그에서 ‘not difficult’를 강조하고 싶다면 HTML5 is not difficult처럼 중요 부분을 span태그로 감싼 뒤, CSS를 이용해 효과를 주면 됩니다. 여기서 span태그는 화면에 보이는 대로가 아닌 not difficult라는 문구를 추후에 강조하기 위해 의미 있는 논리 단위로 나누어 놓았습니다. 이와 같이 HTML5는 크게 어려운 점이 없어 초보자들도 배우기 쉽습니다. 여러 태그의 기능들을 숙지하고 목적에 맡게 사용하면 되는 것이죠.
CSS
UI 작업을 하기 위해서는 CSS(Cascading Style Sheets)를 잘 알아야 합니다. HTML5는 웹 애플리케이션 영역 또는 논리 단위를 구성하는데 사용되고, CSS를 통해서는 실제로 사용자에게 어떻게 보일지 제어 할 수 있습니다. 물론 알아야 할 규칙들이 많고 이해하기 어려운 속성도 있지만요.
Android 프로그래밍을 하다가 처음 CSS를 접한다면 속성들이 어렵고 직관적이지 않다라는 느낌을 받을 수도 있습니다. 또한 Android가 훨씬 늦게 나온 기술이기 때문에 하위 호환성을 위해 CSS의 기능을 함부로 변경하기도 힘들 것입니다. 하지만 새로운 기능과 속성을 추가하여 발전해 나가고 있기 때문에 웹 개발자라면 CSS에 반드시 익숙해져야 합니다.
AJAX
웹 페이지가 웹 애플리케이션으로 바뀌는데 가장 큰 역할은 한 기술이 바로 AJAX (Asynchronous JavaScript And Xml)입니다. 기존의 웹 페이지는 작은 작업도 서버에서 새로운 웹 페이지를 가져와야 하므로 이미 다운 받은 정보들도 다시 받아와야 하는 단점이 있었습니다.
도서 구매 웹 페이지에서 도서들의 이미지가 가로로 배열되어 있고 좌우 양 끝에 화살표가 있다고 가정해 보겠습니다. 화면에 있는 도서 목록을 다 본 후 새로운 도서를 보기 위해 오른쪽 끝의 화살표를 클릭하면 어떻게 될까요? 추가되는 도서 목록 외에 이미 로컬 컴퓨터에 다운받았던 기존 정보들까지 전부 다시 다운 받게 됩니다. 갱신되는 부분은 화면의 도서 목록 뿐인데 말이죠.
이런 UX 측의 불편함은 데스크탑 애플리케이션과 비교해보면 더 쉽게 두드러집니다. 데스크탑 애플리케이션은 네트워크가 끊겨 있어도 사용자의 액션, 마우스 움직임, 키보드 입력 등의 행위에 응답이 바로 바로 나타나게 됩니다. 하지만 AJAX가 적용되지 않은 웹 페이지는 네트워크가 느리거나 불량일 때는 응답을 받기 까지 시간이 걸리게 됩니다. 버튼을 클릭하고 1초만 반응이 없어도 사용자는 답답함을 느끼게 되겠죠?
이런 불편함을 해결하기 위해 사용되는 기술이 AJAX입니다. 현재 웹 페이지를 떠나지 않은 채 서버의 새 데이터를 요청하여 사용자 경험을 개선하는 방법인데요. 초기에는 iframe으로 이런 시도를 많이 하였지만 로컬에서 frame간 데이터 전달이나 소스의 유지 보수 측면에서 좋은 사례는 아니었습니다.
그래서 Microsoft사에서 처음으로 XMLHttpRequest 객체를 만들어 인터넷 익스플로러5에 도입했고, 이어서 파이어폭스, 사파리, 크롬, 오페라에서도 도입했죠. 웹 표준을 주관하는 World Wide Web Consortium에서도 이를 표준화하여 명세를 만들었습니다.
JavaScript만을 이용하여도 AJAX를 복잡하고 어렵지 않게 할 수 있지만, 요새는 이런 AJAX 기능들을 내포하고 있는 JavaScript 라이브러리나 프레임워크가 많습니다. 이런 라이브러리나 프레임워크의 힘을 빌려 애플리케이션 개발자는 비즈니스 로직에만 집중하면 더 좋아 질 것입니다.
지금까지 5편의 ‘초급 프로그래머를 위한 꿀팁’을 읽어주셔서 감사 드립니다. 이번 연재를 진행하면서 저에게도 기존의 내용들을 정리할 수 있는 좋은 기회가 되었던 것 같습니다. 제 글을 읽어주신 분들 모두에게 큰 도움이 되었기를 바랍니다.
연재 초반에 언급했던 것처럼, 저는 정말 뛰어난 선배를 만난 후 많이 성장하게 되었는데, 그 선배가 저에게 항상 해주었던 말이 있습니다. 10,000시간의 법칙에 따라 꾸준히 노력하되, 좋은 습관과 좋은 방법으로 10,000시간을 채워야 한다는 것입니다. 프로그래머라면 좋은 코드를 짜도록 노력해야 하고, 다시 말하면 사람이 읽기 쉽고 수정하기에 유연한 코드를 작성해야 하는 것이죠. 모두가 이 사항을 유념하여 좋은 프로그래머가 되기를 바라고 세상에 기여할 수 있는 그런 프로그래머들이 되기를 바랍니다.
감사합니다.
LG CNS 페이스북 바로가기 : http://on.fb.me/1NfaYgx
글 ㅣ LG CNS 의료솔루션2팀
<초보 프로그래머를 위한 코딩 꿀팁’ 연재 현황 및 향후 계획>
● 사람이 읽기 쉬운 코드 : http://blog.lgcns.com/841
● 어려운 코딩, 생각하고 관찰하고 쪼개라! : http://blog.lgcns.com/872
● 인터넷 보다 책! : http://blog.lgcns.com/899
● 안드로이드 제대로 알고 코딩 하기 : http://blog.lgcns.com/931
● 웹 맨땅에 헤딩하지 않기 : http://blog.lgcns.com/959
