Flex 기본 3강 - Flex와의 첫 만남(1) -

 Flex 첫 만남 

 앞에서 Flex에 대해서 간단하게 알아보았습니다. 그렇다면 구체적으로 Flex로 어떤 작업을 하는 것일까요? 우리들이 홈페이지를 만들 때 주로 사용하는 포토샵과 드림위버의 사용용도를 생각하시면 보다 쉽게 이해할 수 있을 것입니다. 보통 포토샵으로 홈페이지를 디자인 한 다음에 HTML파일로 저장을 시켜서 그 파일을 드림위버로 가져온 다음 테이블을 만들어서 이미지들을 배열합니다. Flex는 드림위버와 비슷한 기능을 한다고 보시면 됩니다. Flash에서 만든 무비클립을 Flex에서 사용이 가능한 그래픽 요소(component)로 저장시킨 다음 Flex로 그것을 배열하는 작업을 합니다. 그런데 Flex프로그램 안에는 이미 여러 가지의 그래픽 요소(component)들이 만들어져 있기 때문에 Flash에서 디자인 작업을 할 필요가 없이 Flex 안에 만들어져 있는 그래픽 요소(component)들을 배열하여 사용해도 됩니다. (이 책에서는 Flex의 기본적인 사항들을 다루기 때문에 Flex 안에 이미 만들어져 있는 그래픽요소(component)를 사용하도록 하겠습니다.) 이 처럼 Flex는 레이어를 이용하여 디자인을 하는 그래픽 도구가 아니라 드림위버처럼 디자인 한 것을 적절하게 배열하는 ‘배열의 도구’라고 생각하시면 되겠습니다. 

1. 포토샵과 드림위버의 관계

 포토샵 프로그램은 보통 홈페이지를 디자인 할 때 사용하고 드림위버는 포토샵으로 디자인한 이미지 파일을 테이블을 만들어 배열 할 때 주로 사용합니다. 아래의 작업순서를 보시면 쉽게 이해하실 수 있을 겁니다. 

1) 포토샵으로 홈페이지 디자인하기

 

2) 슬라이스 툴로 이미지 분할하기 

 3) 웹 장치용으로 저장해서 HTML 파일 생성하기 

 4) 포토샵으로 분할한 이미지를 드림위버로 배열 및 속성 입력하기

 

위의 과정을 보시면 아시겠지만 홈페이지를 만들 때 드림위버의 핵심 기능은 포토샵으로 만든 이미지를 테이블을 이용하여 적절하게 배치하고 속성을 입력하는 것입니다. Flex도 마찬가지입니다. Flash가 포토샵처럼 그래픽 디자인 도구라면 Flex는 Flash에서 만든 그래픽을 Flex프로그램의 component로 저장해서 그것을 배열하는 도구인 것이죠. 여기에서 말하는 component란 Flash에서 라이브러리 안에 있는 심볼같이 이미 만들어져 있는 그래픽요소라고 보시면 되겠습니다.

 

즉, Flash에서 디자인 한 것을 Flex에서 컴포넌트로 저장한 다음 그것을 작업스테이지로 가져와서 적절하게 배열하고 속성을 입력하는 것입니다. 물론 앞에서 언급했듯이 Flex에는 이미 여러 가지의 component들이 만들어져 있습니다. 그래서 우리는 Flash에서 컴포넌트를 따로 만들 필요 없이 Flex에 만들어져 있는 컴포넌트들을 사용하면 됩니다. 또한 Flex에서 사용되는 component들은 오픈소스이기 때문에 무료로 배포되고 있습니다. 따라서 디자인 실력이 뛰어나지 않은 개발자들은 오픈소스로 제공되고 있는 Flex 컴포넌트들을 다운 받아서 사용하거나 Flex에 이미 만들어져 있는 component를 이용하여 서비스나 애플리케이션 개발을 하곤 합니다. Flex의 화면구성을 보시면 더욱 쉽게 이해하실 수 있습니다.