아이젝트 랩 # make yourself in a web

예전에 플렉스를 사용해서 작은 RIA Application을 개발한 적이 있다. 기존에 MS의 WPF를 통해 RIA에 대한 기본을 그릴 수 있었는데, 막상 플렉스를 접하고 나니 WPF처럼 화면을 추가하고 쉽게 객체로 생성할 수 있는 부분이 없었다.(MS의 Visual Studio는 그런 의미에서 참으로 뛰어나다.) 그래서 내가 가장 많이 고민한 것은 어떻게 하면 플렉스의 코드를 분할하고 화면을 분할할 수 있는가 였다. 하지만 내가 아는 것이라곤 팝업창을 띄울 때 MXML을 사용해서 include할 수 있다는 정도? 시간날 때 모듈화에 대해 한번쯤 공부해 보려고 했는데 이번 Flex 3 Training from the source를 통해 좀 더 자세히 알 수 있게 된 것 같다.

보다시피 플렉스에서 파일 하나를 생성할 때에도 이와 같이 수 많은 케이스가 있다. 물론, 이에 대한 설명은 우수한 국내 플렉스 개발자들의 플랙스 문서 한글화 프로젝트 를 참조하면 좋다. 아래쪽에 플렉스에서 사용할 수 있는 리소스에 대한 설명이 나와있는데, 처음 시작하는 입장에서는 다른 것보다 "MXML Component" 와 "ActionScript Class"에 대해서 이해할 수 있다면 모듈화에 대해 보다 더 쉽게 접근할 수 있을 것 같다. 나도 이 책에서 처음에 이 두가지에 대한 설명을 듣고 나서는 모듈화에 대해 보다 더 쉽게 생각할 수 있었으니깐 말이다.

MXML Component : 화면의 모듈화

MXML Component는 플렉스에서 사용하는 MXML(아마 macromedia extensible markup language겠지?)의 화면을 분할하는 역할을 한다. 일종의 화면 모듈화 인데, 물론 화면에 독립되게 액션스크립트 코드를 사용할 수 있다.
이 컴포넌트는 부모 MXML코드의 <mx:Application> 테그의 xmlns:v="views.*" 이런 식으로 선언되고 화면 내에서는 <v:Function_Name/> 형식으로 사용된다.
따라서 화면을 설계할 때에는 두 가지 방법이 있는데 하나는 전체 화면을 설계한 후, 컴포넌트 단위로 자르는 작업을 하던지 아니면 최초부터 자식들(컴포넌트)을 제작한 후 부모에게 덛붙히는 방법이 있는데, 둘 다 장단점이 있기 마련이다.
또한 컴포넌트를 만들었다고 해서 부모에서 꼭 그 객체를 당장 화면에 보여주라는 법은 없다. 때문에, 사용자에게 어떤 상황에 따라 미리 구성된 다양한 화면이 있다면 viewState에 따라 다양한 컴포넌트를 보여줄 수도 있고, 혹은 화면의 액션에 따라 다이나믹하게 컴포넌트를 통해 정보를 보여주고 감출 수 있다.

Action Script File/Class : 코드의 모듈화
Action Script 는 기존에 플래시에서 사용되던 일종의 언어이긴 한데, 2.0 까지는 사실 개발자인 내가 보면 "아니 이건 외계어구나." 라는 생각이 들었다. 뭐 따지고 보면 거의 문법이 아주 심하게 다르다고 할 수는 없지만, 보통 플래시 개발자들이 사용하는 것을 보면 콜백 함수를 많이 사용한다.(내가 아는 개발자는 뭐 그냥 도배를 해댄다.) 내가 RIA의 이벤트 개념을 잘 모르는 상태에서는 정말로 외계어처럼 보였는데, 어떻게 보면 플래시라는 것 특성상 프로그래밍을 입히기 위해서는 그럴 수도 있다고 생각했다.
여하튼 플렉스 3 은 액션스크립트 3.0 부터 사용 가능하다. 내가 아직 플렉스랑 액션스크립트의 버전의 의미의 상관관계는 잘 모르겠지만, 플렉스 3 버전 기준에서는 <mx:script> 안에서 함수와 변수를 사용하게 된다. 나 같은 경우 플렉스 초창기 시절에는 액션 스크립트 자체를 모르고 접근하였는데, 왠지 액션스크립트 3.0이 자바+자바스크립트 랑 비스무리해서 코딩은 쉽게 될 수 있었지만 모듈화 자체를 모르다 보니 한 개의 MXML파일이 무려 1000줄에 달하는 일 까지 발생하게 되었다. 그저 그냥 <mx:script><![CDATA[]]></mx:script> 안에 다 넣다 보니 프로그램이 느린 것은 물론, 함수 하나 수정하려고 찾아 들어가면 이건 뭔 갑작스러운 삽질이 시작되고, 가독성 자체가 떨어졌다. 한 개만 바꾸면 되는 것을 실수해서 한번 잘못 바꾸게 되면 계속 삽질을 하게 되는 것이다.
AS 파일은 이러한 스크립트 코드의 모듈화와 사용자 정의 클래스를 사용할 수 있도록 한다. 앞에서 MXML 컴포넌트에 대해 말했는데, 액션 스크립트는 상속 개념을 통해 거의 대부분의 플렉스 개체를 상속받아 재 정의할 수 있다. MXML자체에서 지원되지 않는 것도 정의할 수 있다.
액션 스크립트 클래스는 하나의 클래스 객체를 제작하는 것인데, package를 통해 클래스를 묶고, 이를 객체로써 혹은 데이터 형으로써, 사용하는 것은 아주 일반적인 OOP적 프로그래밍의 형태이다. AS를 통한 사용자 정의 클래스를 모를 떄는 바보같지만, 내가 만드는 프로그램에서 사용되는 아주 일반적인 객체를 선언해서 사용할 줄도 몰랐다.


결국 이 MXML 컴포넌트와 Action Script파일을 통해 우리가 생각할 수 있는 것은 아주 보편적인 RIA의 설계 방식인데, 화면을 분할하고 이에 따라 표출할 데이터를 설계하고 레이아웃을 구상하게 되면 => 이에 따라 프로그램에서 공용으로 사용될 객체들은 무엇인지, 또 이것들이 사용자 정의 객체라면 어떤 메소드와 변수들을 묶고 다녀야 할 것인지, 어떤 화면에서 어떤 컴포넌트와 사용자 정의 클래스를 물고 갈 것인지를 설계해야 한다. 이렇게 back단 설계가 끝나면 프로그램에서 사용되는 외부 웹 서비스와 내부 서버단(DB 등) 설계를 통해 하나의 프로그램을 제작할 준비를 마치는 것이다.


웹의 RIA는 대부분이 view와 logic으로 이루어져 있다. 그리고 view도 여러 개가 사용되고 로직도 여러 객체가 사용되거나 사용되지 않는다. 따라서 이러한 웹 서비스의 특성을 올바르게 이해하고 설계할 수 있다면, 플렉스 뿐만 아니라 앞으로 등장하게 되는 다양한 RIA서비스들에 대해 보다 빠르게 이해하고 설계해 나갈 수 있을 것이다.

크리에이티브 커먼즈 라이선스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-변경금지 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.

근래들어 참 바쁜 생활을 보냈다. 다름 아닌 FLEX와의 때아닌 자존심 대결 이라는 개발자로썬 기쁜(?) 대결을 하게 되었기 때문이다.

크리에이티브 커먼즈 라이선스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-변경금지 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.

무궁무진한 기술, 내가 이 웹과 프로그래밍 세계에서 잠시 나와서 수능과 벤처를 하는 동안 개발의 세상은 너무나도 앞서나가 있었다. 웹 2.0 까지야 너무 유명해서 듣긴 들었으나, 점차 웹이 사회성을 내포하면서 생긴 소셜이라는 개념은 점점 학문화(?) 되어가고 이제는 웹이라는 것이 종전과 달리 하나의 학문으로 인식해도 될 정도로 너무나도 진보하고 거대해졌고 무엇보다 사용자 중심적으로 돌아가기 시작했다.

웹에서 포털 및 사이트 들에서 서비스를 받기만 하던 사용자들은 일전과 달리 사용자가 컨텐츠를 생산하기 시작했다. 그러다 보니, 이런 컨텐츠 생산 도구들의 인기가 급상승 하기 시작했다. 단순 커뮤니티에서 블로그, 마이크로 블로그, 그리고 사진 저작도구에서 동영상 업로드기까지. 글, 그림, 동영상, 표, 차트 등의 웹 서비스를 제공하는 기업들의 주가가 치솟았다.

그리고 개발자에게도 또다른 변화가 찾아왔다. UI라는 개념은 디자이너에게만 있는 줄 알았더니 갑작스레 기획자 + 디자이너 + 개발자 가 모두 고려해야 할 UX(User eXperience, 사용자 경험)라는 개념이 다가왔다. 그리고, 이를 통해 사용자 중심적으로 접근한 아이폰 등의 기기는 급속도로 인기몰이를 하고 있다.

근래들어 소프트웨어 업계(웹 포함)의 동향은 "통합" 과 "화려한 그래픽" "사용자 중심적" "쉬운" 등의 용어로 정리된다. 소프트웨어는 무궁무진하게 발전해 가는데, 웹에서는 그러한 효과를 낼 수 없다. 웹은 인터넷 프로토콜이 정의되어 해석되는 수 많은 기기들과 운영체제에서 전부 보여야 하니깐. 안보이면 컨텐츠로선 무용지물일 뿐이니깐. 모바일, PMP, 게임기기,PC,네비게이션 등과 윈도우, 맥, 리눅스 그리고 IE, FireFox, Chrome, Opera, Safari 등 수 많은 플랫폼을 통합해야만 성공할 수 있는 기술이 된 것이다.

WPF/Silverlight, Flex, Java FX의 공통점은 무엇인가? 모두가 같은 혹은 비슷한 코드로 웹과 어플리케이션을 동시 제작할 수 있다는 것이다. 심지어 모바일 까지도 말이다.

기술은 점점 좋아져 가고 있다. 그리고, 쉬워지고 있다. ADO.NET에서는 자동으로 쿼리까지 만들어 DB와 연결하게 해주니 DBA가 필요없는 세상이다. 알고리즘? MVC패턴을 몰라도 ASP.NET MVC를 사용하면 쉬운 이해를 통해 MVC패턴에 맞는 웹페이지를 제작할 수 있다. Java FX? 스크립트 언어로(물론 조금 어렵지만) 한번 만든 코드는 컴파일 속성에 따라 웹/모바일/어플리케이션 으로 똑같은 결과가 도출된다.

결국 개발자에게 중요한 것이 무엇인가?

• 협업을 연구해야 한다. 디자이너와 기획자의 영역을 모두 이해하고 최소한의 의사소통으로 최대의 작업 결과를 도출해야 한다.
• UX와 디자인에 대해서도 접근해야 한다. 개발자니깐 디자인적 요소는 모두 버린다는 것은 구시대적 생각이다. 그리고 애니메이션과 액션에 대한 트랜드를 잡아야 한다.
• 최신 기술을 무조건 빨리 습득하는 것이 좋다. 어차피 이해하긴 쉬우므로.. 기술을 빨리 습득하고, 최적의 기술을 선택해서 요구사항에 맞는 최적의 개발 platform을 찾아야 한다.

나는 이정도로 개발자의 향후 발전방향을 정리하고 싶다. 물론, 내가 아직 충분한 경험이 없기 때문에 이러한 생각도 시행착오를 거치기 마련이겠지만, 분명 오랫동안 웹과 개발에 대해 연구해온 나의 생각은 크게 다르지 않을 것이라 예상한다.

어쨌든, 빠른 기술의 습득이 핵심 포인트인 것 같다. 고로... 정보를 빨리빨리 catch하고, 이를 나의 것으로 소화시키는 것이 또한 중요할 것 같다.... RSS등을 잘 활용하도록 해보자.... :)

크리에이티브 커먼즈 라이선스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-변경금지 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.