* 이번에는 자바스크립트에서 중요한 개념인 closure가 끝났으니 잠깐 쉬어가는 글로 다양한 웹 개발 방법론들에 대해서 써보려고 한다. 어렸을 때 부터 html은 조금씩 만져왔었지만, 웹개발에 대하여 처음으로 제대로 경험하고 배운 2001년 이후부터, 그리고 이후에 2004년, 2007년, 2012년 그리고 현재 중간중간 잠깐잠깐 웹 개발을 해온 동안 바뀌어온 웹 개발의 방법론들에 대하여 정리를 할 것인데, 오래 웹 개발을 해온 사람들은 추억을 되새길 수 있을 것이고, 웹 개발을 최근에 시작한 사람들은 현재 자신의 웹 개발 방법이 어느 정도로 와있나 가늠할 수 있는 계기가 되면 좋을 것 같고, 이 글을 쓰는 진정한 목표이자 "속깊은 자바스크립트 강좌"의 한 편으로 쓰는 것은 바로 초기 웹부터 사용되었던 자바스크립트가 이제는 재발견되어야할 언어라는 점이다. 아무튼 이번에는 회사에서 세미나 발표도 한겸 같이 정리를 하는 것이니 부담 없이 재미로 한번 읽어보면 좋을 것 같다.
* 개인적인 경험에서 나온 의견들이 많이 있으므로 내용에 대한 지적을 많이 해주셔도 됩니다.
- 이전 글
* 웹 페이지의 변천사
: 일단 개발 방법론에 대하여 쓰기 전에 먼저 이번에는 웹 페이지의 변천사부터 한번 알아보고, 각 웹페이지에서 활용하던 언어라던가 개발 방법론에 대하여 언급을 해보자. 해외의 경향과 트렌드보다는 초기 웹에서부터 한국에서 진행되고 변화 되었던 웹 페이지의 트렌드와 각 상황에 다른 주요 이슈들에 대하여 먼저 알아보는 것이다.
- 이전의 웹의 모습을 살펴볼 때 www.archive.org 라는 사이트를 이용할 것이다. 여기서 과거 웹의 모습을 살펴보는 것도 추억을 떠올릴 수 있는 재미일 것이다.
위의 Web 섹션 아래에 주소를 치면 과거 수집되었던 기록들이 남아있다
* 초기 웹 (~2000년)
: 한국에 처음 웹이 소개된 것은 93년에 네트워크 컨퍼런스인 'KRnet 93' 중에 열린 '제1회 한국학술전산망워크숍'에서 포항공대의 이재용 교수에 의해서 소개되었다. 이때는 전세계적으로 웹에 대한 관심이 폭증하였지만 이 때 당시에는 아직 PC통신이 주류를 이루고 PPP(Point-to-Point Protocol)를 통해 사설 네트워크 업체에 연결하여 인터넷을 겨우 느린 속도로 접속을 하던 시대였다. 이때 당시만해도 웹에는 멀티미디어 같은건 전화비를 낭비하는, 야간 정액이 아니면 꿈도 못꾸는 그러한 시대였다. 이때에는 웹 개발자가 아니라 오로지 사용자로서 PC통신을 사용하던 때였는데, 36k 모뎀에서 54k 모뎀로 업그레이드 했을 때의 경이로움은 잊을 수가 없다. 각설하고, 이때에는 보시다시피 모뎀이 주류이고 전화선을 이용한 통신이 주류였기 때문에 다른 것보다도 정보를 보여주기 위한 최소의 텍스트를 포함하는 것이 미덕이었다. 초창기 웹 페이지들의 모습을 몇 군데 살펴보자.
Yahoo (1997) Altavista (2000)
hanmail.net (1999)
: 이미지는 정말로 필요한 로고 부분에만 사용하고 담백하게 전부다 텍스트로 이루어진 모습을 확인할 수 있다. 이러한 방법을 이용한 것은 트래픽의 감소도 있지만, 브라우져가 발전되어있지 않았기 때문에 아직 텍스트 위주의 인터넷 서핑이 많았기 때문이다. 당시에는 이미지를 랜더링 못해주는 텔넷 등과 같은 기능과 프로그램을 이용해서도 인터넷 서핑을 했기 때문에 텍스트가 중요하고 그것이 메인이 되었던 것이다. 따라서 HTML을 통해 순수한 텍스트(Document)를 보여주는 것이 목적이었다.
: 이 때 당시에는 사용자의 동적인 데이터를 받는 경우는 극히 드물었고, 정적인 정보를 제공해주는 웹 페이지가 주를 이루게 된다. 이렇게 정보를 제공하는 웹 페이지들이 많기 때문에 이러한 웹페이지들을 검색해주기 위한 사이트가 필요했고, 그것이 위의 Yahoo라던가 Altavista와 같은 정보 검색 사이트였다. 이러한 정보 검색 사이트는 초창기 포탈의 개념으로 당시에는 여러 정보를 제공해주기 보다는 검색해서 다른 사이트로 라우팅 시켜주는 개념이었다.
* 초기 웹 개발 방법론
: 초기 웹에서는 정적인 데이터가 주를 이뤘지만 동적인 페이지를 생성하는 서버 언어 또한 존재 했다. 당시 가장 많이 활용 되었던 언어는 Perl 그리고 C였고, 이들을 이용한 CGI (Common Gateway Interface)가 동적인 데이터 제공에 이용된다. 이전 웹페이지들 주소를 보면 중간이 /cgi-bin/ 이렇게 들어있는 웹페이지들은 어김없이 CGI를 사용하고 있는 것이다. C를 이용한 아주 간단한 소스의 예를 들어보면 다음과 같다.
C 언어 + CGI로 구현한 count 소스 초기 웹의 구성
: 인터넷에 실제로 올라와있는 예제를 가져왔는데, 이제부터 확인할 것은 붉은 색으로 해 놓은 태그들의 위치이다. 이 때에는 html도 C 언어 내부에서 생성되기 때문에 초기 정적인 html을 제외하고 모든 html 태그의 생성은 C나 Perl 안에서 이루어져 웹 서버를 통해 사용자에게 전해지게 된다. 이렇게 동적인 페이지의 html은 전부 C나 Perl에서 이루어지기 때문에 html과 cgi 파일은 위처럼 혼합되어 유지보수를 하려면 html과 C 또는 Perl을 반드시 같이 알아야만 했다. 이 때 당시에는 클라이언트측은 단순히 html 링크를 눌러서 페이지 요청을 하고 response 또한 html로 받아서 랜더링하는 것 밖에 하지 않아서 역할이 적었고, 정적인 정보를 제공하는 페이지가 많았으므로 위의 count.c의 예 처럼 파일을 이용하는 정도로 충분히 사이트의 정보들을 감당할 수 있었기 때문에 DB도 적극적으로 활용되지 않았다. 대신 웹서버에서 cgi까지 감당했기 때문에 모든 데이터 처리는 웹서버에 의존하기 때문에 웹서버의 역할이 아주 컸고, 클라이언트와 데이터베이스(파일시스템)의 역할은 아주 작았다.
* 웹 언어의 활성화 (~2001년)
: 고속 인터넷이 보급되기 시작하면서 웹은 정적인 데이터와 텍스트에서 벗어나 다양한 미디어들과 융합하고 사용자와의 상호작용도 하기 시작했다. 2000년에 마시마로(http://www.mashimaro.com/), 졸라맨(http://www.dkunny.com/) 등과 같은 플래시 애니메이션들도 나오기 시작하면서 플래시에 대한 집중이 시작되었고, 나중에는 거의 모든 사이트에 필수적인 요소로 들어가게 되기도 했다. 거기다 최근에는 플래시를 이용한 다양한 게임들까지 나오면서 플래시의 활용은 대단했다. 이 때부터는 이전의 투박했던 정적인 텍스트에서 벗어나 이쁜, 감성적인 그러한 홈페이지들이 각광을 받으면서 플래시의 사용과 함께 웹 디자이너 또한 새롭게 집중을 받게 된다.
이러한 플래시로 이루어진 서브 풀다운 메뉴는 기본이 되었다.
: 이렇게 플래시가 새롭게 주목을 받으면서 이 때부터는 더이상 홈페이지는 '웹마스터' 혼자서 만들고 관리하는 것이 아니라, 클라이언트 개발자, 서버 개발자, 그리고 웹디자이너 3박자가 이루어져야만 제대로된 홈페이지를 만들 수 있게 된 것이다. 그리고 이러한 플래시를 통한 rich media와 함께 사용자들 간의 커뮤니케이션이 집중이 되면서 프리첼 커뮤니티나 네이버의 지식인이 전성기를 맞이하게 된다.
2001년 네이버의 모습 2002년 프리첼의 모습
: 이후 프리첼은 전성기를 구가하다가 유료화라는 결단에 무너지게 되고 네이버는 지식인을 필두로 내세우고 개인 블로그로 싸이월드와 양강 체계가 구축된다. 사용자들은 플래시, ActiveX 등을 통해 배경음이 나오는 등 좀더 풍부한 인터랙티브한 웹페이지들을 접하고 개인 단위의 블로그/싸이월드가 유행을 하게 되고, 이 당시의 인터넷 격변을 일으켰고 현재는 대형 포털이 된 사이트들이 사용자들의 커뮤니케이션을 활성화 시키면서 수 많은 사용자들을 유입시켜 몸집을 부풀릴 수 있게 된 것이다.
* 웹 언어의 개발방법론 (~2001년)
: 이렇게 미디어 컨텐츠쪽은 플래시가 주목을 받았다면, 웹 페이지 자체는 웹 언어가 급격히 활발하게 활성화하기 시작한다. ASP, JSP, PHP가 대표적인 언어로 퍼져나갔고, 이제는 슈퍼보드(CGI 기반)라던가 제로보드(PHP 기반)와 같은 게시판 프레임워크도 나오면서 인터넷은 사용자들간의 커뮤니케이션의 장이 되었다. 많은 사용자들이 시도때도 없이 계속 글을 쓰고 그러다보니 사용자들의 다양한 입력들을 효율적으로 저장하고 관리해야 하는것이 중요한 위치를 차지하게 되고, 이제는 웹 언어와 묶어서 다양한 데이터베이스들이 활용되기 시작한다. 이때의 개발 방법은 php파일에다가 html과 php 소스를 묶어서 처리를 하는 방식이었다. 아래와 같이 간단한 예가 있다.
: 이렇게 페이지를 구성하게 되면 다른 것보다도 웹 프로그래밍을 처음 접하는 사람들은 웹언어가 실행되는 순간과 스크립트 언어가 실행되는 순간에 대하여 엄청 헷갈려하기도 하고 위의 빨간 네모 안에 있는 HTML과 PHP 소스가 뒤엉켜있는 경우 혼란스러움이 생기게 된다. 이런식으로 HTML 태그와 PHP소스가 섞여 있는 것은 그래도 양호한 편이다. 만약 자바스크립트와 PHP소스가 엉켜있다고 하면 그것을 개발한 개발자 본인 조차도 일주일이 지나면 그것을 한참 들여다보고 있어야할지도 모르는 상황이 되어버린다. 이러한 상황들로 인해 웹언어가 나오면서 가장 문제가 많았던 것은 바로 '유지보수'였다. 하지만 웹 프로그래밍이라하면 누구나 할 수 있는 쉬운 프로그래밍이 아닌가! 그러니 이 때 당시에 웹페이지에 대한 유지보수는 필요없고 그냥 새로 만들면 그만이었다. 때마침 웹언어가 유행을 하면서 누구나 쉽게 웹 개발을 할 수 있다는 것에 너도나도 전부다 뛰어들어 웹 프로그래밍을 공부하기 시작한것이고, 기존 웹페이지에 대한 유지보수가 안 되기 때문에 웹개발을 하게 되는 그 수요 또한 많아서 잘 돌아가는듯 했다. 하지만 이내 곧 구글에 의해 웹페이지의 대격변을 일으킨 개념이 '제대로' 소개된다.
- 덧: 웹언어들은 웹프로그래밍이 누구나 할 수 있는 쉬운 인식을 심어주기도 했지만, 그 무엇보다도 가장 큰 역할을 한 것은 바로 MVC 모델을 초보 프로그래머들도 쉽게 실용적으로 배울 수 있는 실제적인 환경이 되어 주었다는 것이 전체적인 프로그래밍 개발 방법론과 프로그래머들의 지식 향상에 엄청난 발전을 도와주기도 했다.
* AJAX: Asynchronous Javascript And XML (~2006년)
: AJAX는 지금도 흔히 쓰이고 있는 단어로 자바스크립트를 이용해서 비동기적으로 HTTP Request를 서버로 보내는 기술이다. AJAX라는 말을 많이 들어봤겠지만 실제로는 무엇이 좋은지는 모르는 경우가 많다. 다른것보다도 AJAX의 가장 눈에 띄는 장점은 바로 적절한 활용으로 UX를 향상시킬 수 있다는 점이다. 이제는 웹페이지 자체가 새로고침을 안해도 페이지의 일부가 변하는 것은 일상이 되었지만, 이것이 처음 나왔을 때에는 새로운 개발 패러다임을 만들어 버린 충격 그 자체였다. 구글은 AJAX를 2004년 Gmail에서 처음 사용하였지만, 사실을 말하자면 Gmail은 ajax의 사용으로 충격 받았다기 보다는 당시 제일 흥했던 한메일 등은 몇백메가 수준의 메일 용량을 줬을 때 구글은 과감하게 기가 단위의 무료 메일을 준다는 것이 너무나 충격이었다. 하지만 그 다음해 2005년에 나왔던 구글맵은 이야기가 달랐다.
현재 모습의 구글 맵, 2005년에 처음 공개했다.
: 이때까지만 해도사이트를 만든다고 하면 일단 페이지의 목록부터 쭉 나열하고 그 흐름을 잘 짜는 것이 중요했다. 게시판만해도 list.php, write.php, write_ok.php, comment_ok.php 등과 같이 여러개의 웹 페이지가 있는 것은 당연한 것이었는데 구글맵은 하나의 페이지를 통해서 무려 이미지가 동적으로 변하는 모습을 보여준 것이다. 이것은 소스보기를 해보면 플래시인 것도 아니고 순수한 html과 자바스크립트로 이루어졌지만 페이지의 refresh 없이 이미지가 확대도 되고 자유자재로 변한다는 것이 상상할 수 없는 일이었다. 기존에 맵 서비스를 한다고 하면 만약 확대 버튼을 누르면 페이지가 하얗게 없어졌다가 확대된 모습을 보이고 조금 더 발전한 경우는 iframe으로 나름 페이지의 일부만 깜빡이게 하는 것 정도는 생각해봤지만 구글은 구글맵을 통해 AJAX를 화려하게 데뷔(?)시키게 된다.
- 덧: 사실 AJAX에서 사용하는 XMLHttpRequest는 이전부터 있었다. 이미 1997년 IE5에서부터 소개 되어 ActiveX의 객체 중 하나인 XMLHttp로 나왔고, 당시의 XMLHttp로 현재의 AJAX 기능들을 어느정도 구현할 수도 있다. 하지만 구글맵이 한 것은 AJAX를 본격적인 상용의 무대로 불러와 어떻게 사용해야하는지 그 예를 보여주면서 콜롬버스의 달걀을 세운 것이다.
* AJAX를 활용한 개발방법론
: 이제는 비동기적으로 소스를 처리하는 것이 가능해졌기 때문에 웹언어로 HTML 페이지 전체를 생성하는 것이 아니라 웹언어는 웹페이지의 일부만을 생성하고 AJAX를 통해 그 생성된 페이지 일부를 불러와서 현재 페이지에 심어주는 DHTML이 매우 유용하게 활용된다.
: 위와 같이 이제 이제 커다란 HTML의 틀은 기본 HTML 파일에 들어있고, 데이터를 이용한 동적인 HTML은 웹언어를 통해서 생성하게 된다. 이때 넘겨받는 것은 일부 HTML인데 AJAX라 하면 X가 XML의 철자로 결과를 XML에 맞춰서 넘겨주는 것이 좋을 것이라 생각하고 진행했던 것이 바로 XML 규격에 맞게 HTML을 설정하도록 정한 XHTML 표준화 작업이었다. 이때부터 웹표준, 웹 2.0등과 같은 다양한 말들이 엄청 유행하면서 모두의 관심을 받기도 했다.
: 여튼 위의 예제 소스처럼 웹 언어의 역할이 전체 페이지를 랜더링하던 것에서 다소 역할이 작아져 일부 HTML을 그려주는 역할로 바뀌게 된 것이고, 일부 HTML을 페이지에 그려넣기 위해 DHTML이 활용하기 시작하면서 이제는 자바스크립트도 어느 정도 역할을 하게 되어 클라이언트에서 사용자의 입력에 따라 AJAX 요청을 보내고 결과를 받아서 반영시키는게 된다. 이렇게 AJAX로 UX는 놀랍도록 발전했지만 소스의 예에서 보시다시피 아직 HTML을 웹언어에서 생성하기 때문에 HTML 태그가 양쪽에서 보관되거나 생성되어 HTML 자체를 유지보수하려면 양쪽 페이지를 봐야하는 불편함이 있었고, 여전히 유지보수는 어려운 문제가 있었다.
* 다양한 API들의 등장 (~2008년)
: AJAX 이후에는 또다른 논라운 일들이 일어나는데 web service라고 집중 받았던 흔히들 말하는 API들이 대중적으로 활용되기 시작한다. 대표적인 API라하면 역시 구글 API가 맵, 광고 등과 같이 적용하기 쉬운 API들이 있고, API 뿐만 아니라 이제는 웹개발을 도와주는 프레임워크들도 많이 나오게 된다. 대표적인 자바스크립트 프레임워크라하면 jquery라던가 Prototype도 있는데, 이들이 자바스크립트에 대한 재발견을 도와주는 가장 큰 역할을 한 프레임워크들이 아닌가 생각한다.
: 이렇게 이제는 웹 개발자들이 다른 개발자들을 위한 API나 프레임워크를 만들고 제공하게 되는 새로운 에코시스템이 점차적으로 등장하게 되고, 이제는 유지보수가 중요한 한가지의 관점이 되면서 소스를 효율적으로 관리해야만 하기 시작했다.
* 웹 어플리케이션의 발달 (~현재)
: API들이 다양하게 나오면서 이들을 이용한 다양한 복잡한 기능들을 하는 웹들이 나오면서 기존의 정보 제공 위주의 앱에서 발달하게 된다. 이제는 웹페이지에서 '웹 어플리케이션'이라는 말로 실제로 업무 프로세스라던가 복잡한 일들을 데스크탑 스탠드얼른 어플리케이션이 아닌 웹으로도 할 수 있을 정도로 웹이 발달하게 된다. 가장 대표적인 것으로 빠르게 발달했던 것은 바로 구글 docs일 것이다.
Google docs (Drive), 웹으로 슬라이드쇼도 만들 수 있다
: 하나의 웹 페이지에서 여러 사람이 동시에 하나 문서를 수정하는 것은 기존의 워드 문서 작업기로도 힘들었던 일인데 이제는 웹으로 그러한 기능을 구현한 것이다. 그럼 이제 이러한 웹 어플리케이션들과 API들이 활용하는 개발 방법을 알아보자.
* API들과 웹 어플리케이션들의 개발방법론
: 이제는 유지보수를 하기 위해 클라이언트와 서버사이에 떠다니는 것은 HTML이 아니고, 이제는 정보를 주고받기 시작했다. 처음에는 XML로 했으나, XML에는 태그에 들어가는 스트링의 크기가 만만치 않았기 때문에 일반 텍스트, CVS로 많이 주고 받았지만, 이제는 자바스크립트에서 바로 객체로 활용가능한 JSON규격으로 많이 주고 받게 되었다. 간단한 예는 아래와 같다.
: 이제 HTTP Response로 오는 것은 JSON이고, 서버에서 웹언어가 생성하는 것은 데이터베이스로부터 받은 데이터를 JSON으로 포매팅한 것이다. JSON을 클라이언트에서 받으면 그 데이터를 기반으로 자바스크립트로 직접 HTML을 그려주게 된다. 이제 웹언어에서 HTML은 실종되었고 php 같은 경우는 json_encode와 같은 함수가 5.3버전부터 나와 JSON에 대한 호환성을 높여주고 있다. 다양한 API들도 RESTful로 요청하게 되는 경우 JSON으로 결과를 보내주는 등 API들도 이제는 JSON을 통한 통신 방식이 많이 활성화 되어있는 실정이다.
: 하지만 만능은 없는 법. 이렇게 개발을 하게 된다면 HTML의 구조를 파악하기가 약간 불편한 점이 있다. 그리고 자바스크립트를 기존의 form validation 정도로만 사용했던 사람들은 위의 자바스크립트를 보면 아마 현기증이 일어날 것이다.
- 덧: 이렇게 웹으로 구현하게 되면 쉬운 접근성, 쉬운 호환, 그리고 쉬운 개발을 뽑을 수 있다. 하지만 좋은 퍼포먼스를 낼 수 없다는 점, UI가 세련되지 못하다는 점, 그리고 대부분 온라인으로 진행해야한다는 점이 웹 어플리케이션의 대표적인 장단점이다. 현재도 모바일 앱을 개발하는 경우 웹 앱이냐 네이티브 앱이냐 또는 하이브리드 앱이냐에 대한 토론은 계속 분분히 나오고 있는데, 어느 개발 방법을 선택하느냐에 대한 정답은 자신의 상황과 목적에 맞는 개발 방법을 택하는 것이다.
* 정리
: 위의 단계별로 개발 방법론의 변화를 간단하게 살펴보면 아래와 같다.
: 이제는 웹서버에서 웹언어가 하는 역할이 점점 줄어들고 있고, 클라이언트에서 처리하는 데이터의 양이 점점 많아지고 있는 것을 볼 수 있다. 시대에 따른 이슈와 화제거리가 개발 방법론을 변화시키기도 했지만 클라이언트 단말의 성능의 향상이 이제는 이러한 그림을 가능하게 만들었고, 클라이언트 단말이 발전할수록 웹서버의 역할은 점점더 줄어들 수 밖에 없을 것이다. 그럼 이제는 자바스크립트와 CSS의 역할 변화에 대해서도 간단하게 살펴보면 아래와 같다.
: HTML5의 표준화를 위해서 빠질 수 없는 자바스크립트와 CSS의 역할의 변화도 재미있을 것이다. 점점 커지고 많아지는 그 역할들이 클라이언트의 역할이 커짐을 대변하고 있다.
* 앞으로는?
: 이제 앞으로는 어떠한 개발방법론이 나오게 될지는 모르지만 다른 것보다도 중요한 것은 이제는 웹 프로그래밍을 이전과 똑같이 해서는 안된다는 점이다. 이전에 웹언어로 유지보수가 없었던 시절처럼 웹을 만드는 것은 단순한 한번 만들고말 홈페이지에 해당하는 경우, 정말로 빠르고 쉽게 프로토타입을 만드는 경우가 아니라면 충분히 설계를 잘 해서 개발을 해야할 것이다. 이제는 이쁘고 독특한 것도 중요하지만 속도 빠르게 '잘' 만드는 것 또한 빠져서는 안되는 중요한 시대가 되었다. 그리고 그러한 품질을 결정하는 가장 중요한 요인은 바로 데이터 처리를 하는 자바스크립트이다. 사실 자바스크립트는 처음 LiveScript라는 이름이 나왔을 때부터 변한 것은 거의 없다. 그렇기 때문에 당시에 자바스크립트를 접했던 사람들은 여전히 '디버깅하기 어렵고' '요상하게 동작하고' '정말 쉽지만' (표현을 약화시켜보면) '개발하기에 더러운 언어'라는 인식이 많다. 하지만 변함없었던 자바스크립트와는 달리 개발 방법론은 현격하게 바뀌었기 때문에 이제는 그러한 인식들도 바꿔야하고 실제로 자바스크립트가 웹 앱에서 기여하는 것이 90%이기 때문에 이를 잘 공부하고 잘 이해해야만 한다. 사실 자바스크립트는 IE 말고는 아무것도 없던 시절 정말 다루기 힘든 언어였지만 이제는 제대로 다루기만 하면 이보다도 좋은 언어는 없고 '굳이 웹언어를 써야하나' 라는 생각에 이르게 될 것이고, 그러한 인식의 변화를 이끌기 위해 이 '속깊은 자바스크립트 강좌'를 시작하기도 했다. 이제 다시 강좌를 시작하고 조금 더 진행되면 다양한 디자인 패턴들과 실제로 활용하는 것을 공부하면서 자바스크립트에 대한 인식을 재발견하기를 바란다.
: 이제 다음편에는 오래도 미뤄왔던 prototype에 대하여 공부하도록 하자.
끝.
- 다음 편
