1. HTM, PHP, Flash 그리고 Flex
Flex를 시작하기 전에 우리가 이미 알고 있는 HTML, PHP, Flash 등의 관계를 알아봄으로써 Flex의 발전을 살펴보도록 하겠습니다.
웹 미디어 제작기초 강의(한림대 인터넷미디어 전공)를 들으신 적이 있으십니까? 아니면 사이트제작 공부를 해보신 적이 있으십니까? 가장 먼저 무엇을 배우던가요? 혹시 HTML 아니던가요? 아마 대부분의 사람들이 웹과 관련된 제작을 공부할 때 가장 먼저 배우는 것이 HTML일 것입니다. 그 이유는 간단합니다. HTML이 웹과 관련된 제작에 있어서 모든 것의 기초가 되기 때문이죠. (컴퓨터공학부 학생들이 가장 먼저 접하는 Language가 C언어인 것처럼) 예를 들어, 우리들이 홈페이지에서 자주 보게 되는 링크, 이미지, 동영상 등 거의 대부분의 컨텐츠가 HTML을 통해서 표현되고 있습니다. 그 만큼 HTML은 웹 제작을 공부하는데 있어서 꼭 알아야 할 중요한 언어입니다.
그런데 HTML은 텍스트나 이미지, 동영상 등을 단순히 display 하거나 링크를 통해서 웹 페이지를 이어주는 역할밖에 하지 못하기 때문에 기능이 너무나 제한적입니다. 예를 들어, 사이트의 게시판이나 회원가입, 계산기 같은 기능은 HTML로 구현이 불가능 한 것이죠. 그래서 HTML의 이런 제한적인 기능을 보완하고자 개발된 것이 PHP나 ASP 같은 프로그래밍 언어입니다.
정보관리 수업(한림대 인터넷 미디어 전공)을 들어 본적이 있는 학생이나 지금 듣고 있는 학생들은 PHP의 놀라운 기능을 잘 알고 있을 겁니다. PHP 언어를 사용하면 몸무게와 키를 이용하여 비만도 측정을 할 수 있는 프로그램도 여러분들이 직접 만들 수가 있지요. 아래 그림은 제가 정보관리 수업 시간에 만들었던 비만측정 프로그램입니다.
위의 그림처럼 입력하고 전송하기를 클릭하면 다음과 같은 결과화면이 나옵니다.
이 처럼 PHP나 ASP같은 웹 프로그래밍 언어는 HTML로 표현되는 것들(이미지, 텍스트, 동영상 등)을 프로그래밍화(자동화) 시킬 수 있도록 합니다. 그리고 데이터베이스와의 연동을 통해 더욱 많은 기능을 웹에서 구현될 수 있도록 합니다. 그 기능 중에 대표적인 것 중 하나가 바로 게시판입니다. 사용자들이 게시판에 입력하는 글들은 PHP나 ASP 같은 웹 프로그램 언어를 통해 데이터베이스에 저장이 되고 저장된 내용을 다시 PHP나 ASP같은 프로그램 언어로 불러와서 HTML로 사용자의 화면에 보여주는 것이죠. 즉, 게시판의 내용이 사용자의 컴퓨터로 보여지기 까지 몇 가지 과정을 거치게 되는데 그 과정의 대부분이 PHP나 ASP같은 프로그램 언어를 통해 진행이 되는 것입니다. 실제로 사람들이 게시판 삽입 작업을 할 때 가장 많이 사용하고 있는 제로보드는 PHP로 만들어진 게시판 소프트웨어입니다.
하지만 PHP나 ASP 같은 프로그래밍 언어로도 해결할 수 없는 것이 2가지 있습니다. 첫째는 페이지를 이동할 때마다 서버는 클라이언트로부터 요청을 계속 받아들여야 때문에 서버에 과부화가 걸릴 확률이 높다는 것입니다. 예를 들어 위의 그림에서 ‘수치 입력’ 그림의 주소는
http://vonzone.hosting.paran.com/myphp/ai.html 이고 ‘비만도 측정결과’ 그림의 주소는
http://vonzone.hosting.paran.com/myphp/bi.html?name=%C0%CC%C1%D8%C8%A3&height=181&weight=75 입니다. 따라서 페이지의 주소가 계속 바뀌기 때문에 그 만큼 서버는 클라이언트로부터 페이지를 보여 달라는 요청을 많이 받는 것이지요.
둘째는 동적이고 화려한 그래픽 디자인을 구현할 수 없다는 것입니다.(물론 포토샵을 이용하여 화려한 디자인을 구현 할 수는 있지만 애니메이션 같은 동적인 그래픽 디자인은 구현 할 수 없습니다.) 그래서 이런 문제점을 해결하기 위해 사용되고 있는 것이 바로 Flash입니다.
C. Flash
멀티미디어 제작 수업(한림대학교 - 인터넷미디어 전공)을 들어본 적이 있거나 듣고 있는 학생들은 Flash 프로그램으로 애니메이션 같은 유동적인 그래픽 디자인 작업을 할 수 있다는 것은 물론, Flash 프로그램으로 작업한 fla 파일을 swf 파일로 변환했을 때 용량이 굉장히 작아진다는 것을 잘 알고 있을 겁니다. 장시간의 애니메이션이나 엄청난 용량의 이미지, 동영상 등을 사용하지 않는 이상 swf 파일은 보통 2MB를 넘지 않습니다. 그래서 우리들은 웹에서 아주 빠르고 간편하게 Flash(swf 파일)를 볼 수 있는 것이지요.(웹상에서 우리들에게 보여 지는 Flash 파일은 swf 파일입니다.) 그리고 Flash 프로그램 안에는 프레임으로 구성된 타임라인이 존재하기 때문에 프레임 간의 이동을 통해서 화면전환을 할 수 있습니다. 예를 들어 1프레임에 있는 A라는 버튼을 클릭하면 5프레임으로 가도록 ActionScript 언어를 입력해서 프레임간의 이동을 할 수 있도록 한다는 것이지요. 그래서 웹 페이지의 이동 없이도 Flash 파일 안에서 프레임간의 이동을 통해 화면전환을 할 수 있는 것입니다. 웹 페이지의 이동이 없기 때문에 당연히 클라이언트의 요청도 없어서 서버에 과부화를 주지 않겠죠?
다음 두 개의 그림은 한림대학교 홈페이지의 첫 페이지입니다. 보시면 아시겠지만 페이지의 주소는 같지만 마우스가 올라가는 위치에 따라 화면이 바뀝니다.
하지만 Flash에도 단점이 있습니다. 디자인 훈련을 제대로 하지 않은 개발자(프로그래머)들에겐 여러 가지로 작업이 불편하다는 것입니다. 왜냐하면 Flash는 화면을 그려내는 디자인 성향이 강한 프로그램이기 때문이지요. 그래서 보통 디자이너들이 그래픽 도구로 많이 사용하곤 합니다. 하지만 Flash에 내장된 스크립 언어인 ActionScript를 이용하여 프로그래밍을 추가하면 웹 애플리케이션(예를 들어 위젯 등)을 만들 수 있을 뿐만 아니라 데이터베이스와도 연동을 할 수 있기 때문에 더욱 다양한 서비스를 개발할 수 있습니다. 그래서 개발자들이 풍부한 인터넷 애플리케이션(Rich Internet Application)을 만들 수 있도록 개발된 것이 우리가 앞으로 배워 볼 Flex입니다. 즉, 개발자들이 Flash로 작업을 할 때 겪는 디자인 부분에서의 어려움을 개선해서 더욱 좋은 서비스를 만들 수 있도록 나온 프로그램인 것이지요.
D. Flex
Flex는 이름에서도 알 수 있듯이 Flash와 비슷한 면이 있습니다. 가장 큰 공통점은 결과물이 swf 파일로 생성된다는 것이지요. 따라서 아래 그림처럼 데이터베이스로부터 데이터를 불러올 때만 서버에 대한 요청이 생길 뿐 페이지의 이동 없이도(서버에 대한 요청 없이도) 화면전환이 되기 때문에 서버에 과부화가 안 걸립니다.
Flash와 차이점이 있다면 위에서도 언급을 했지만 Flash가 그래픽 디자인 중심적이라면 Flex는 개발자 중심적이라는 것입니다. 예를 들어, Flash에서 버튼을 만들기 위해서는 네모난 도형을 그리고 그 위에 텍스트를 입력한 다음 그 도형을 버튼 심벌로 만들어서 ActionScript를 입력해야 하지만 Flex에서는 에디터 창에 <mx:Button>이라는 태그(MXML)를 써서 버튼을 생성하고 여기에 버튼의 색상 속성이나 이벤트 속성 스크립트를 기술합니다. 그래서 도형 하나하나 그릴 필요 없이 에디터에 태그를 입력함으로써 작업을 할 수 있기 때문에 개발자 중심적이라는 것이죠.
그런데 어떻게 <mx:Button> 이라는 태그 하나만으로 버튼이 생성되는 것일까요? 이유는 간단합니다. Flex 프로그램 안에 이미 Button이 만들어져 있기 때문이죠. 우리들이 HTML 태그를 이용하여 이미지를 불러오듯이 Flex에서도 태그를 이용하여 버튼을 불러오는 것뿐입니다. 물론 버튼은 개발자가 직접 만들 수도 있습니다. 예를 들어서 버튼을 Flash에서 그린 다음 그것을 Flex로 가져와서 작업하는 경우도 많습니다. 그리고 ActionScript를 이용하여 프로그래밍을 할 수 있을 뿐만 아니라 데이터베이스와의 연동도 가능하기 때문에 개발자들이 좀 더 쉽게 애플리케이션을 개발 할 수 있는 것입니다.
물론 Flash보다 Flex가 더욱 뛰어난 프로그램이라는 것은 아닙니다. 그리고 Flash로는 Flex를 사용하는 것만큼 좋은 애플리케이션을 만들 수 없다는 것도 아닙니다. 다만 사용 용도에서 차이가 난다는 것입니다. 따라서 그래픽 디자이너는 Flash를 능숙하게 다를 줄 알아야 하고 개발자는 Flex를 능숙하게 다룰 줄 알아야 할 것입니다. 하지만 웹 서비스와 디자인, 마케팅을 기획해야 기획자는 두 가지 프로그램 모두를 조금씩은 알고 있어야 디자이너와 개발자 사이에서 좋은 기획을 할 수 있겠죠? 따라서 제작뿐만 아니라 웹 기획도 공부하는 우리 인터넷미디어 전공생들에게 Flex는 Flash만큼 중요한 프로그램이라 할 수 있겠습니다.
'웹제작 강의 > Flex 기본' 카테고리의 다른 글
| Flex 기본 7강 - Flex Source 이해하기 (ActionScript3.0) - (14) | 2009/05/28 |
|---|---|
| Flex 기본 6강 - Flex Source 이해하기 (MXML) - (0) | 2009/05/28 |
| Flex 기본 5강 - HelloFlex 프로젝트 - (1) | 2009/05/28 |
| Flex 기본 4강 - Flex와의 첫 만남(2) - 플렉스 빌더 화면구성 (0) | 2009/05/27 |
| Flex 기본 3강 - Flex와의 첫 만남(1) - (0) | 2009/05/27 |
| Flex 기본 2강 - 플렉스 설치하기 - (1) | 2009/05/27 |
| Flex 기본 1강 - HTML, PHP, Flash 그리고 Flex (2) | 2009/05/27 |
