'Adobe'에 해당되는 글 40건
2008. 9. 11. 18:27
점심먹고 앉아 있는데, 뭔가 왔다고 가져다 주시더라고요.
올꺼 없는데~? 하면서 봤더니 우왕ㅋ굳ㅋ

ACE 자격증

구겨지지 말라고 빳빳한 마분지 봉투에 담겨왔네요 ;)



ACE 자격증2

드디어 3주만에 왔습니다!



8월 23일날 시험쳤으니 3주만에 도착했네요 ;) 액자에라도 넣어서 둬야될까요? ㅎㅎ
다들 어서 시험보러 ㄱㄱㅆ!!!


2008. 9. 1. 01:07
사용자 삽입 이미지
일전에 소개해드렸던 'Adobe FLEX 3 실전 트레이닝 북' 의 뒤늦은 리뷰입니다. 예약판매 중이었던 것을 발견하고 예약을 하려고 했으니 여차저차한 사정에 의해서 예약을 하지 못해, 마냥 궁금해 하고만 있었습니다.
이 책의 원서인 'Adobe Flex 3 Training from the Source'의 flex 2 시절 책인 'Adobe Flex 2 Training from the Source'를 PDF로 사다가 Flex 공부를 시작했던게 제 첫 Flex 입문이었죠. 그 후로 옥상훈님의 '예제로 배우는 Adobe 플렉스'가 나와서 '한글이라서 좋구나~' 신나하며 읽었던 기억이 나네요. 한글로 된 서적이 없어서 안되는 영어로 구글님께 비나이다~ 비나이다~ 하며 찾아보곤 했었는데 말이죠.
그래서 이번 'Adobe FLEX 3 실전 트레이닝 북'에 대해서 상당히 기대가 컸습니다. (예약안한건 뭥미..-_-)  월급받으면 10% 넘는 돈이 책값으로 지불되는 상황이어서 그 당시 돈이 없었습니다; 사야지~ 하고 생각만 하고 있다가 한 몇주 까먹고 지내는 상황이...

하지만 또 지성이면 감천(그게 무슨 상관)이라고 책을 퍼낸 위키북스에서 선물로 책을 보내주셨습니다. ;) 정말 감사드립니다. (덕분에 돈을 아꼈습니다. ㅜㅜ 개발서 너무 비싸요.. 먹고 살기 힘들 지경-_-)

제가 책을 받기 전에 강컴에 강력한 서평이 올라왔었습니다. 한마디로 '번역이 형편없다' 라는 거죠. 저도 ㅎㄷㄷ 하고 있던 참에 책을 받았는데 '-keep-generated-액션스크립트'는 스티커로 수정되어 있더군요. 아마도 'ActionScript' 라고 적힌 것을 기계적으로 일괄 수정하다가 나타난 문제였던 것 같습니다.
실제 악플에 가까운 서평이 올라왔던 것과는 달리 제가 읽기에는 번역 자체의 퀄리티는 대부분 무리없이 읽을 수 있는 평이한 수준이었습니다. 책의 앞과 뒤쪽의 용어들의 번역들이 좀 일치하지 않는 느낌이더군요. 역자가 한분이 아니여서 그런 듯. (조금은 아쉬운 생각이 들긴 합니다만, 번역서 출간에 대해서 제가 알고 있는 바로는 번역에 대한 비난에 씁쓸한 웃음만 나오더군요. 번역비가 많이 나와서 부자가 되는 것도 아니고, 그렇다고 번역의 질이 어떻니 하며 신경만 곤두서고 말이죠. 참... 안타까웠습니다. 거의 자원봉사의 수준이라고 하던데 말이죠.번역하실 분들이면 원서 읽기도 무리가 없으실 분들이 자원봉사정신이 없으시다면 번역서가 나올리가..아쉬울 것 없으실 분들일텐데. 영어 한줄도 더듬거리며 해석 겨우 해내는 제가 이런말 하는게 좀 우습네요 ^^)
부분적으로 애매한 설명 같은 것은 수정을 좀 하셔서 차후에 다시 책을 찍을 때 반영이 되었으면 좋겠네요. 베타리더도 적극 도입하시면 좋겠습니다.

아무튼, 책 내용은 많은 분들이 말씀하신대로 참 좋습니다. Flex의 전체적인 것(레이아웃부터 FDS까지)을 설명하고 있기 때문에, 입문자에게 개념정리로써 상당히 도움이 될 듯합니다. 예전 Flex2 버전은 영어버전으로 공부했더니 이해를 잘못하고 있던 부분이 많았는데, 한글서적이라 참 좋네요 ㅎ Flex 3용으로 나오면서 추가된 여러가지 내용들도 참 쉽게 이해할 수 있었습니다.
좀 더 이미지가 많았으면 하는 생각도 했습니다. 텍스트로 서술되어 있는 경우가 많아 열심히 읽어야됩니다. ;)  조금 답답하다 할까요. 크게 문제될 부분은 아닙니다.
각각 실습시간이 나와있어서 또한 재미있습니다. 추후에 사내 Flex 관련 스터디가 진행된다면 이 책으로 하면 참 좋을듯.

제가 일전에 Flex ACE를 취득했는데, 이때도 참 달게 잘 보았습니다. 예를 들면 시험에 CSS부분에서 Type selector와 Class selector 에 대해서 나오는데, 처음보고는 이게 뭐지.. 하는 생각만 들더라고요. 용어가 너무 생소한 느낌이랄까요. 분명 개발할때 쓰고 있는데 말이죠. 그래서 저처럼 ACE를 취득하려고 준비하시는 분들께도 추천해드립니다. 꼭 한번 정독하시면 좋습니다. ;)


AIR in Action번역서가 나올 예정이라고 합니다. 9월 안(아마도 추석 전후..)에 나온다고 하는데요. 기대 완전 하고 있습니다. ;)
사용자 삽입 이미지

표지가 나왔네요 ;)


저도 책 한권 써볼까 싶은 생각이 절로 납니다 ;)
2008. 8. 23. 18:00
Flex ACE 를 보려고 마음먹은지는 이미 올해 초 였습니다. 올해 목표중에 하나였거든요. 미루고 미루고 미루다 드디어 시험을 치뤘습니다. 요전에 이벤트로 시험 50% 할인 바우쳐도 받기도 해서 시험치기는 최상의 조건이었습니다만, 이놈의 귀차니즘이 가장 문제. ㅡㅡ;

차일피일 미루다가 유주상님께서 올리신 글 'Adobe Certified Expert 헤트트릭(hat trick) 달성' 에 완전 자극받고 있던 참에, 열이아빠님께서 '자격증만으로 몸값이 올라갈까요' 라는 글로 제대로 다시 뽐뿌를 주시는 바람에 뭔가에 홀린듯 접수를 하고 말았습니다.
Pearson VUE 에서 접수해서
결국 오늘(2008년 8월 23일) 강남에 있는 중앙컴퓨터학원에서 시험을 쳤습니다. (기계철인은 안해주시더군요 ㅜㅜ) 요즘 Pearson 에서 접수하면 $80에 접수 되어서 50% 할인받아 $40에 쳤습니다. (거저네요 거저 원래 $150인데 ㄷㄷ)

공부안하고 셤 쳤더니 점수가 ㄷㄷ

공부안하고 셤 쳤더니 점수가 ㄷㄷ


열이아빠님이 말씀하신대로 한글로 쳤더니 이해가 안되는 부분이..; 하지만 전 영어가 쥐약이므로 걍 한글로 쳤습니다. ㅡㅡ;  시험도중에 살짝 당황했던 부분도 있었는데요, UML 관련 문제에서 UML이 안보이는 겁니다. 그림같은 것은 시험 프로그램 하단의 '게시' 버튼을 눌러야 출력이 되더군요. 상당히 당황했었습니다;
시험시간은 모자라지는 않았고요, 시험 종료 40분 전쯤에 나온듯 하네요. 묘한 문제들이 몇 개 있어서 당황스럽기도 했고, 모르는 문제도 있더군요; 반성중입니다.;

아직 어도비쪽으로 데이터가 가지 않았는지 ID는 나왔는데 인증 커뮤니티에 인증이 안되네요. 월요일쯤 다시 해봐야겠습니다.  근데 이제 ACE 로고 블로그에 박아도 되는지 모르겠네요 ㅎㅎ
방금 인증을 했습니다.(2008. 8. 25.) 그간 사이트가 문제가 있었는지 에러메세지만 출력해대더라고요. 인증페이지에서 살짝 의아했던 것이 History 에서 엄청난 리스트가 쌓여있더군요. 뭔가 했더니 (9A0-310) Flex 2.0 Developer Exam에 합격하였더니 그와 관련된 여러 자격들에 등록되어 있다는 메세지가 주루룩~


 
ACI(Adobe Certified Instructor)가 엄청 관련되어 있더군요. ACI는 엄청 세분화 되어있는 모양입니다. Adobe의 공식교제의 각 권에 대한 강의 자격을 따로 부여하는 것 같네요. 뭐 강의를 할 능력은 안됩니다만 ;^(
위에서 링크걸었던 유주상님의 글과 열이아빠님의
Flex 3 ACE 살짝 정보 에서도 언급되어 있습니다만, ACE(Adobe Certified Expert) 중에 전문가(Specialist)라고 지칭되는 인증이 있는데요, Flex 2 시험과 연관되는 전문가(Specialist) 등급이 2가지가 있네요.

하나는 이미 링크를 보셨으면 아실듯한 Rich Internet Application Specialist 고요,
Rich Internet Application Specialist

하나는 Web
Specialist 입니다.
Web Specialist



이미 Flex ACE 를 취득하신 분들이 많이 있습니다만, 시험정보를 찾기가 힘들더군요. 시험 힌트를 주신 에이레네님 감사드립니다. ;) 
Flash도 공부를 열심히 해서 Rich Internet Application Specialist 도 노려볼 생각입니다. ;) (시간이 허락된다면 CF도 ~ 이건 장창학님 괴롭혀야되는건가요...) 거기다 Dreamweaver 까지 취득하면 Web Specialist 는 덤으로~ㅎㅎ

악재중에 겨우 찾아온 호재군요. ㅜㅜ

'주절주절' 카테고리의 다른 글

동원훈련 다녀오겠습니다아-  (22) 2008.09.22
Flex ACE 자격증 도착!  (28) 2008.09.11
대참사!!! 큰일입니다!!!  (20) 2008.08.18
egg 님께서 선물을 보내주셨어요~ 잇힝~(+_+)/  (2) 2008.07.31
Adobe Flex 개발자 인터뷰  (15) 2008.06.08
2008. 8. 7. 14:21
Flex에는 크게 MXML과 ActionScript 로 구현되고 있는데, 내부적으로 MXML이 ActionScript 로 변환되어 SWF로 빌드 됩니다. MXML이 ActionScript 로 변환되는 것을 볼 수도 있는데요, keep-generated-actionscript 속성을 바꿔주면 됩니다. 속성 지정 방법은 시난님의 블로그에서 잘 정리해놓으셨습니다. (SliverLight의 경우는 Flex와 다르게 CS 코드가 XAML을 변환시키는 구조라고 하더군요)

실제로 간단하게 속성을 지정하여 변환을 하여 보면 참 새로운(이해 잘 안되는) 코드들이 마구 쏟아져나옵니다. 특정 MXML Application을 생성하면 관련된 파일 4개가 생성이 됩니다. (다른 것들은 보통 특정 스타일 지정 ActionScript 클래스이거나 속성 관련)

예를 들어 test.mxml 파일이 있다면 아래와 같이 생성이 되게 됩니다.
  • test-generated.as
  • test-interface.as
  • _test_FlexInit-generated.as
  • _test_mx_managers_System.as
본 포스트에서 살펴볼 것은 처음에 있는 xxx-generated.as 입니다. 이해를 쉽게 돕기 위해서 간단하게 MXML Application을 만들어보겠습니다. MXML.mxml 이라고 이름 붙혀보았습니다. (조악한 네이밍. ㅜㅜ)


위와 같이 MXML이 생성이 되었다면 아래와 같이 MXML-generated.as 가 생성이 됩니다.
(설명할 부분만 수록하도록 하겠습니다. - 길이가 길어서...)



MXML Application 이기 때문에 클래스는 Application 을 상속받고 있습니다. 그 바로 밑에 보면 흔히 쓰이지 않는 UIComponentDescriptor 타입의 변수가 보입니다.

UIComponentDescriptor 인스턴스는, 비주얼 컴퍼넌트의 인스턴스의 MXML 태그로 지정된 정보를 캡슐화합니다.

MXML 파일내의 대부분의 태그는, UIComponent object의 트리를 설명하는 것입니다. 예를 들어,<mx:Application> 태그는 UIComponent object를 나타내, 그 child containers와 컨트롤도 모두 UIComponent object입니다.

MXML 컴파일러는, 각각의 MXML 태그를 UIComponentDescriptor 인스턴스에 컴파일 합니다. 엄밀하게는, MXML 컴파일러는 ActionScript 데이터 구조를 자동 생성합니다. 이것은, UIComponentDescriptor object의 트리가 됩니다.

실행시에, Container 클래스의 createComponentsFromDescriptors() Methods는, 컨테이너의 childDescriptors 배열의 UIComponentDescriptor object내의 정보를 사용해, 컨테이너의 아이인 실제의 UIComponent object, 및 한층 더 깊은 자손을 작성합니다. 컨테이너의 property creationPolicy 의 값에 따라서는, 어플리케이션의 기동시에 컴퍼넌트의 일부가 표시될 때, 또는 어플리케이션의 개발자가 수동으로 createComponentsFromDescriptors() Methods를 호출했을 때에, 자손이 작성되는 일이 있습니다.

통상, UIComponentDescriptor 인스턴스를 스스로 작성할 것은 없습니다. Container 클래스의 childDescriptors 배열을 경유해, MXML 컴파일러가 자동 생성한 인스턴스에 액세스 할 수 있습니다.

출처 : flexdocs.kr


설 명이 좀 어려운데요, 다시 말해서 MXML로 정의된 정보를 모두 가지고 있게 된다는 것입니다. 내부적으로 트리형태로 자식 컴포넌트들도 다 가지고 있게 되는데, 실제로 UIComponentDescriptor 타입의 _documentDescriptor_ 변수가 Application 이고, 그 자식으로 추가된 Button 컴포넌트는 childDescriptors로 추가되어 있습니다. 물론 Button 컴포넌트도 UIComponentDescriptor 타입이 되죠. 만약 버튼에 자식 컴포넌트가 존재했다면 childDescriptors 에 정의되어 있을겁니다.

여기서 잠시 Application에 childDescriptors로 정의된 Button 을 다시 한번 보겠습니다.

여기서 잠시 보실 것은 Button에 설정해놓은 click 이벤트입니다. 클릭시에 "___MXML_Button1_click" 를 호출하도록 되어 있는데요, 해당 메소드로 가보면 제가 정의한 clickEventHandler 를 호출하도록 하고 있습니다.


특정 이벤트에 대해서 이벤트 핸들러(event handler)를 설정하게 되면 1. 해당 이벤트에 대해서 호출된 메소드를 생성하고 2. 그 메소드가 이벤트 핸들러를 호출하게 하는 방식입니다.

저는 이 구조를 처음 봤을 때 전부터 궁금했던 의문점이 하나 풀렸습니다.

위와 같은 코드가 있다고 할때에 이 것을 ActionScript 로는 어떻게 할까 하는 것이었습니다. ActionScript 로는 addEventListener 메소드를 이용해야 되는데, 핸들러 메소드에게 따로 파라미터를 던질 방법이 없었던 거죠. 커뮤니티에도 이와 같은 질문들이 가끔씩 올라왔기도 했고, 저도 상당히 궁금했었습니다.

살짝 감이 잡히시나요?

각 버튼의 이벤트 핸들러가 생성되고 그 이벤트 핸들러에서 위에서 지정한 clickEventHandler를 호출하게 됩니다. 참 난감하더군요 ;)

아무튼 뭐 살짝 MXML이 ActionScript 로 변환되는 과정에 대해 살짝 알아보았습니다. ;)
PopupManager 관련 글은 아직 준비중입니다.. ㅜㅜ



2008-08-20 본문 복구 완료
2008. 7. 30. 16:10
플렉스 내에서 팝업(Popup)으로 창을 띄우려면 PopupManager 를 사용하게 됩니다. 이 때 팝업의 대상은 제한이 없습니다만(심지어 버튼이라도 팝업가능) TitleWindow 컴포넌트를 이용하는 편이 간편하게 처리가 가능합니다. 레퍼런스에서도 팝업관련 예제는 TitleWindow 컴포넌트를 이용하여 보여주고 있습니다. 이는 TitleWindow 컴포넌트가 레퍼런스에 소개된 것과 같이 팝업용으로 사용하기 위해서 Panel 컴포넌트를 확장하여 만들었기때문입니다. 간단하게 TitleWindow에 대한 활용예제는 여기를 참고하시기 바랍니다.

직접 팝업용 컴포넌트를 구현하여 사용하시는 분들도 있으시겠지만, 저 같은 경우는 TitleWindow 컴포넌트를 상속하여 팝업용 컴포넌트를 만들어 사용하고 있습니다. TitleWindow를 상속받으면 상단 좌측에 Close 버튼을 지원하고 Close버튼 클릭시에 CloseEvent가 발생하므로 보다 간편하게 사용할 수 있는 이점이 있습니다. 또한 상단 타이틀바를 클릭하여 드래그(Drag)해서 팝업 윈도우의 위치를 조정할 수 있기도 합니다.

내부 구현상 TitleWindow의 기능은 부모클래스인 Panel에서 거의 다 구현이 되어있고 Close 버튼을 보이게만 하는 정도입니다. 이러한 내용은 이전에 올린 포스트 :  2008/06/20 - [Dev/Flex] - [Flex] mx_internal 로 선언된 변수나 메소드에 접근하기 (namespace 의 사용) 에서 간단하게 언급하였으므로 참고하시면 되겠습니다.

위에서 TitleWindow를 이용하여 팝업시 이점으로 들었던 것 중에 타이틀바를 클릭하여 드래그(Drag)하면 팝업창의 위치를 조정할 수 있다고 한 것이 있었는데, 그렇다면 다른 컴포넌트의 경우에도 똑같이 드래그(Drag)시에 위치가 조정될까요? 대답부터 해보자면, Flex에서 지원하는 기본 컨테이너 컴포넌트 중에서는 TitleWindow와 Panel 만이 가능합니다. 왜냐하면 팝업창을 드래그(Drag)하여 위치 조정하는 기능은 Popupmanager 에서 부여된 것이 아니라, 해당 컴포넌트 자체에서 지원하는 것이 기 때문입니다. TitleWindow에는 팝업창으로 사용시에 드래그(Drag) 하여 위치를 조정할 수 있도록 기능이 구현되어 있으므로 가능한 것입니다.(Panel 같은 경우는 TitleWindow 의 모든 기능이 이미 구현되어 있으므로 팝업시에 드래그(Drag)도 가능합니다.)

여기서 한가지 의문점이 생깁니다. 팝업이 아니라 직접 addChild 하는 경우에 TitleWindow나 Panel은 드래그(Drag)가 되지 않습니다. 그럼 어째서 팝업시에는 드래그(Drag)가 가능한 것일까요? 위에서 분명히 PopupManager가 해당 컴포넌트들이 위치 조정 가능하도록 지원해주지는 않는다고 말씀드렸는데요, 사실 살짝 관여하기는 합니다. ;) 바로 팝업시에 팝업되는 컴포넌트의 isPopup 속성의 값을 true 로 변경해주는데, 이때문에 TitleWindow나 Panel 가 드래그(Drag) 하여 위치조정이 가능하게 된 것입니다.  아래의 코드가 Panel 에서 타이틀바를 클릭시에 호출되는 메소드인 titleBar_mouseDownHandler() 입니다. 코드를 보시면 isPopup 속성이 true 로 되어 있을시에 startDragging() 메소드를 호출하여 위치조정이 가능하게 되는 것을 아실 수 있습니다.



그렇다면 역으로 TitleWindow로 팝업을 띄웠을때 드래그(Drag)를 못하게 하려면 팝업 후에 isPopup 속성을 false로 바꾸면 되겠죠? 아래의 코드와 결과물은 isPopup 속성을 변경하여 팝업 윈도우가 움직이지 못하도록 하는 예제입니다. ;)

이번에는 반대로 isPopup 속성을 true로 변경하여 팝업이 아닌대도 바로 움직일 수 있게 해보도록 하겠습니다. MXML로 정의해 놓은  Panel 의 isPopup 속성을 true로만 변경하였습니다.


이상으로 간단하게 TitleWindow에 대해 다루어 봤습니다. 차후 포스팅에는  PopupManager에 대해서 한번 다뤄볼 생각입니다. ;)

참고문서 : 2009/05/20 - [Dev/Flex] - [Flex] 팝업매니저를 이용한 사용자 정의 컴포넌트의 제작


2008. 7. 25. 10:41
Flex/AIR Bible

Flex/AIR Bible

Flex / AIR Bible 이라는 책이 새로 나왔습니다. (7월 10일)
윤훈남씨가 저자이시고요, 도서출판 대림에서 나왔네요. 저자이신 윤훈남씨에 대해서 잠시 검색해보니 내공이 엄청난 고수이신 것 같습니다. ;)

저는 제 1회 Flex Camp에 서 이벤트로 이 책을 받았습니다. 잠깐 책 내용에 대해서 소개를 하자면, 플렉스 개발 2년차에 접어드는 저로써도 잊고 있었거나, 몰랐던 보다 심층적인 이야기가 많이 다루고 있어서 참 좋았습니다. 내용의 수준은 완전 초보개발자를 위한 것이라기 보다는, 타 언어 개발자분들이 Flex에 입문하실때 보시면 참 괜찮겠다는 생각이 들었습니다.

내용의 수준은 전반적으로 다 좋습니다만, 편집이 너무 아쉽습니다. 인덱스도 없거니와, 수 많은 오타... 내용상의 오류는 무시하고서라도 편집하시는 분들이 충분히 잡아내실 수 있었을 듯한 오타들이 너무 많이 눈에 보입니다.

인덱스가 없어서 차후에 다시 참고할 부분이 있어서 보려면 너무 찾기 힘들 것 같네요. 편집이 너무 아쉬운 책이네요. 내용은 더할나위 없이 좋은데 말이죠.  900페이지가 넘는데.. ㅜㅜ 표지 디자인은 깔끔하니 참 좋습니다.



Adobe FLEX 3 실전 트레이닝 북

Adobe FLEX 3 실전 트레이닝 북

Adobe의 공식 트레이닝 커리큘럼 교재인 『Adobe Flex 3 Training from the Source』의 한국어 판인 Adobe FLEX 3 실전 트레이닝 북의 출간 소식입니다.  지금 예약중이고요 7월 31일까지 예약가능하고, 8월 1일에 배송된다고 하네요.

제 가 처음 Flex를 공부하기 시작했을떄 'Adobe Flex 2 Training from the source' 라는 PDF 책을 가지고 공부를 했었습니다.  당시에 너무나도 생소했던 Flex에 대해서 이해를 하는데 큰 도움이 되었던 기억이 납니다. Flex 3용으로 나온 교재이니 더할나위 없이 좋은건 당연한 것이겠지만, 다만 난감한건 영어라는거!! 영어가 문제가 되더군요. 짧은 영어실력으로 허우적허우적..;  그러나 이번에 한국어판이 출간 되니 너무 기쁜 마음 감출 수가 없네요. 저도 한권 예약해야겠습니다. ;)

역자로 참여하신 분은 신호승씨, 정선우, 이원영 씨라고 소개되어 있네요. 자세한 소개는 위의 링크에서 역자소개를 보시면 되겠어요. 신호승씨 같은 경우는 워낙 유명하신 분이라 ;)

2008. 7. 13. 17:36

제 1회 Flex Camp에 다녀왔습니다. 아차하면 순번에 밀려 참가 못할뻔 했는데, 운 좋게도 순위 안에 들어서 참석할 수 있었네요. (엄청난 참여 열기! 120명 선착순이었는데, 250분이 신청하시는 엄청난...) 이번에 발표자분들께서 참 좋은 내용 발표해주셨습니다. 감사합니다. ;) (아쉽게도 현장사진은 없네요ㅡㅡ; 카메라를 깜빡하고 안가져가서..흠;) 윤미경님게 사진 받아서 게재합니다.)

발표는 아래와 같이 진행되었어요. 사회는 이정웅(블루메탈)님께서 보셨고요.

  1. 이만영님 - Flex 다국어버젼 개발
  2. 이윤정님 - 핸디 BAM 대시보드 개발 사례
  3. 지용호님 - Flex 기반 위젯개발 및 천문지도서비스 사례
  4. 최권택님 - Web 2.0에서의 얼굴 인식 서비스
  5. 이희덕님 - 음악플레이어 희희덕덕(AIR기반) 제작사례
  6. 심경현님 - Flex, AIR로 구현한 (네이트온) 메신저 개발 사례
  7. 허성회님 - Flash를 이용한 Flex 스킨 디자인

참 좋은 발표였습니다. 다들 포스가 장난 이니시더라구요.!!

살짝 발표에 대해서 언급해보자면,

  • 으쌰(이만영)님은 기존 Resource관리가 상당히 불편(매번 재 컴파일 등)했었는데, XML로 간편하게 런타임시에 변경할 수 있도록 하신 것 상당히 인상깊었습니다. 발표하시는 것 보고 요즘 관심있던 flash_proxy가 눈에 확들어오더군요. 공부 더 해봐야겠습니다. 발표 내내 무명소녀님께서 굿굿! 연발하셨어요 ;-) (사실 전 Application을 상속받는 다는 것은 꿈에도 생각못해봤습니다. ) 하지만 Resource가 수백개가 넘어가면 엄청 짜증나기 시작할텐데, 이걸 편하게 할 방법은 뭔지도 궁금해졌습니다. 곧 소스 공개하신다니까 찾아보실 수 있으실 겁니다.
  • 이윤정님이 발표하신 핸디 BAM 대시보드는 집에 돌아와서 핸디소프트 홈페이지에서 다시 찾아봤는데, 실제 샘플페이지는 안보이더군요. 다시 한번 보고싶은데, 좀 아쉽습니다. ;)
  • 지돌스타(지용호)님의 발표는 저도 스타플 유저로써 '스타플 런칭하면서 참 고생 많이 하셨겠다' 라는 생각이 들었습니다.(중간에 PT에 깜짝 출현한 미라클님 쵝오!) 스타플 가입초대권도 나눠주셨는데, 많이 가입하셔서 재미있는 서비스 경험해보시기 바랍니다.
  • 최권택님의 얼굴인식 같은 경우는 과동기가 이미지프로세싱 쪽 대학원에 다니고 있어서 좀 접할 일이 어서 약간의 지식이 있던 터라 처음에는 어떻게 Flex로 속도가 문제가 될텐데? 하고 긴가민가 하고 있었습니다. 역시나 서버에서 작업하고 Flex에서 클라이언트를 담당하더군요. MFC로 항상 작업한다고 고생이 많던데, 친구한테도 Flex를 좀 가르켜줘야겠어요. 얼굴인식API에 대한 좋은 결과 기대하겠습니다.
  • 이희덕님의 희희덕덕 발표는 너무 웃겨서(!) 껄껄 웃으며 들었네요. 특히 기억나는건 이희덕님이 wii 컨트롤러를 쥐고 열심히 춤을 추시던 것이.. +_+ 곧 동영상이 올라온다니까 구경 꼭 해보세요! (이희덕님 화이팅입니다! 몸 건강하세요!)
  • 심경현님의 메신저는 Apollo 때에 설치해봤는데, 그후로 꾸준히 기능이 업데이트 되고 있다는 것은 몰랐습니다. 이번 발표를 대비해서 mobsword lite 버전까지 만드시는 등의 많은 준비를 하셨어요. natelib 라는 Nateon API for Actionscript 3.0 를 구글코드에 오픈소스로 업로드해놓으셨는데 원하시는 분들은 연락하시면 커미터로 등록해서 같이 개발하자고 제안하셨습니다. 저도 살짝 구미가 땡기네요. 다운받아서 한번 구경해봐야겠습니다.
  • 허성회님은 처음부터 끝까지 아무 간단하게 설명해주셔서 저 같은 개발자들도 알기 쉬운 발표였습니다. 체크박스 하나가 위력이 참 크다는 것을 실감했습니다.;) 제가 좀 엉뚱한 질문을 했는데, SWF폰트에 크기에 영향을 주는 다른 것은 없나 해서 드린 질문이었습니다. 테스트해서 결과를 좀 봐야겠습니다.
0123456789
제 1회 Flex Camp 현장 사진입니다. 사진은 윤미경(mkyoon)님께서 제공해주셨습니다. ;)

발표는 참 좋았는데 안타까운 면이 있었습니다. 신청자에 비해서 참석률이 저조했습니다. 수 많은 신청자들이 있었음에도 불구하고 일부로 제한까지 둬가면서 신청을 받았는데, 안오신 분들이 너무 많더군요. 물론 사정이 있으셨겠지만, '이건 아니다.' 라는 생각이 들었습니다. 향후 조금의 참가비 정도는 받는게 좋겠다는 생각이 드네요. 환불안해주면 돈이 아까워라서도 오실 것 같은데 말이죠.

이번에 행사장 좌석이 좀 특히 했는데요, 원형테이블에 10명씩 앉도록 배치하셨더군요. 왜 이렇게 앉게하나 했더니 이벤트가 있었습니다. 보통 발표한뒤 10분정도 Q&A시간을 갖는데, 이번에는 좀 색다르게 질문을 포스트잇에 적어서 무대 뒤에 있던 조별 Q&A게시판에 붙히도록 하더군요. 질문을 가장 많이 붙힌 조에게 뒷풀이 지원금(무려 10만원)을 드리고 2등 조에게는 Adobe 티셔츠을 주신다고 하시더군요. 게다가 붙혀놓은 질문중에 질문 몇 개를 뽑아서 답변해드리고 뽑힌 질문자에게는 책 선물이 있었습니다.(Flex/AIR Bible, 소프트웨어, 누가 이렇게 개떡같이 만든거야 )

 이걸로 끝이냐! 아닙니다. ;)

중간에 소통의 시간이라는 진행했는데, 조별로 AIR어플에 대한 아이디어를 토론해 발표하는 것이었습니다. 브레인스토밍이랄까요? 각 조별로 채점을 하여서 1등한 조에도 뒷풀이지원금이 지급된다고!!!(웃음) 다들 열심히 하셨습니다. 저희조도 발표는 했는데, 그닥 반응이 좋지는.. ㅋ

발표1등은 7조, 2등은 4조, AIR어플 아이디어는 1조였습니다. 모두들 축하드려요 ;)

01234567
뒷풀이하러 갔던 조개구이 집에서 찍은 사진입니다. 사진은 윤미경(mkyoon)님께서 제공해주셨습니다. ;)

저도 완전 득템했습니다. ;) 질문이 뽑혀서 도 받고, 제가 4조였던터라 티셔츠까지! 아하하.

엄청 많이 받았습니다!!

엄청 많이 받았습니다!!

먼저, Flex 2로고가 박힌 핸드폰줄!! (이거 오나전 레어급)

먼저, Flex 2로고가 박힌 핸드폰줄!! (이거 오나전 레어급)

Flex, AIR 로고 스티커입니다. ㅎ (크기가 좀 다른게 좀 아쉽.. ㅋ) 핸드폰줄과 스티커는 오신 분들께 모두 드린거예요 ㅎㅎ

Flex, AIR 로고 스티커입니다. ㅎ (크기가 좀 다른게 좀 아쉽.. ㅋ) 핸드폰줄과 스티커는 오신 분들께 모두 드린거예요 ㅎㅎ

 
요건 다롱이 라는 닉네임 쓰는 개발자분이 주셨어요. 상단 사진에 보이는 대시보드가 다롱이님이 작업하신거랍니다.

요건 다롱이 라는 닉네임 쓰는 개발자분이 주셨어요. 상단 사진에 보이는 대시보드가 다롱이님이 작업하신거랍니다.

안에는 포스트잇이 그득~ (완전 맘에 듭니다. ㅋ) 잘 쓸께요!

안에는 포스트잇이 그득~ (완전 맘에 듭니다. ㅋ) 잘 쓸께요!

요건 제가 질문한 포스트잇이 뽑혀서 받은 Flex 신간인 Flex/AIR Bible입니다.열이아빠님 블로그갔다가 신간나온걸 알게되어서 사야지! 하고 생각하고 있었는데, 잘 되었어요 ㅋ

요건 제가 질문한 포스트잇이 뽑혀서 받은 Flex 신간인 Flex/AIR Bible입니다.열이아빠님 블로그갔다가 신간나온걸 알게되어서 사야지! 하고 생각하고 있었는데, 잘 되었어요 ㅋ

2 등해서 받은 티셔츠입니다. XL가 젤 크길레 그걸 가져왔는데, 생각보다 넉넉(제가 좀 한덩치를 합니다.;;) 여자분들 M 사이즈 드렸는데, 안 크실런지.. ㅋ

2 등해서 받은 티셔츠입니다. XL가 젤 크길레 그걸 가져왔는데, 생각보다 넉넉(제가 좀 한덩치를 합니다.;;) 여자분들 M 사이즈 드렸는데, 안 크실런지.. ㅋ




유명하신 Flex 개발자 분들이 많이 있으셨는데, 인사드리고 싶었지만 왠지 모를 뻘쭘함에.. ㅡㅡ; (제가 좀 소심) 사회 보신 이정웅님이나, 마지막에 다국어 지원관련 답변해주신 신호승님(몸 완전 좋으심 굿!), 발표해주신 이만용(으쌰)님 등등등..(사실 알아본 분들이 이 분들밖에.. ^^;) 담에 보면 꼭 인사드리고 싶어요 ㅎㅎ

뒤늦게 알았는데, 오창훈님도 오셨다던데, 못뵈었습니다. 너무 아쉬워요. ㅜㅜ
잔업으로 출근하신 열이아빠(이준하)님도 이번에도 못 뵈었 ㅡㅡ

그 날 처음 인사드렸던 (헤메시던)아델님, 태일러(베이비로션 지못미)님, 최졍(차트의 여왕)님, (몸좋다)아롱이, 힘톤(회사 놀러가도 됩니까?ㅋ)님, 무명소녀(아이스크림은요?)님과 무명소녀님 회사분들(임대리님 일산 안습), 또 뒤풀이때 같이 계셨던 여러분들 참 반가웠습니다. 특히 좋은 말씀 많이 해주신 송성일 책임님 감사합니다. 열심히 살겠습니다.ㅎ

미라씨(미라클), 미경(mkyoon)씨도 반가웠어요 ;) 지돌스타님은 일찍가셔서 아쉽습니다. 담에 또 뵈요 ㅎ

다들 2회 캠프때 또 뵈었으면 좋겠습니다. 다른 분들도 함께하면 더욱 좋겠네요. ;) 행사진행 관계자 여러분들도 참 고생 많으셨습니다. (먹을꺼리 사러 코스트코까지 다녀오신 듯.. ^^; 각종 음료수 머핀 잘 먹었습니다.)
2008. 7. 10. 01:44
제가 Flex를 처음 접했을 때 이해가 안되던 부분은 Array와 ArrayCollection 에 대한 것이었습니다. Array를 이용해서 ArrayCollection을 만들긴 했었는데, 왜 그렇게 만들어야 하는지 조차 이해를 못했었죠. ;)

우선 Array 에 대해서 알아봐야겠습니다.
Flex 에 Array 는 자바의  Array와는 달리 동적이어서 크기를 지정하지 않고 임의대로 push, pop 메소드를 이용하여 아이템을 추가 및 삭제할 수 있습니다. 다만, 특정 인덱스 위치에 아이템을 추가한다 던가, 삭제한다던가 하는 것은 불가능 합니다. splice 메소드를 이용하여 특정 위치의 값에 대해 컨트롤 할 수 있습니다만, 상당히 번거롭습니다. 그리고 Array의 특정 아이템이 변경될 경우에 그 변경여부를 즉각 알 수가 없습니다. (var array:Array = new Array() 하는 것 보다 var array:Array = [] 이렇게 하시는 것을 추천합니다. 전자는 느립니다. 왜그런지는 자세히는 모르겠습니다. 에이레네님의 글을 보고 알았거든요 ㅎ)


이를 가능하도록 하여주는 것이 ArrayCollection 입니다.
다 시 말해서 ArrayCollection은 Array의 wrapper 클래스로 Array의 데이터를 핸들링해주는 역할을 합니다. 엄밀히 말해서는 ArrayCollection이 상속받은 ListCollectionView 클래스에서 지원해주죠. ArrayCollection은 단지 Array를 받을 source 라는 속성과 클래스 직렬화를 위한 readExternal, writeExternal 메소드(IExternalizable 인터페이스를 구현)만이 작성되어 있습니다.


그렇다면 ListCollectionView에 대해서 알아봐야겠습니다. 
ListCollectionView ICollectionView, IList, IMXMLObject 이렇게 3가지의 인터페이스를 구현하고 있습니다.(ListCollectionView 는 ArrayCollection과 XMLListCollection이 상속받고 있습니다. ArrayCollection은 Array에 대해서 컨트롤 하지만, XMLListCollection은 XML의 List 형태인 XMLList에 대해 컨트롤 합니다.) 여기서 중요하게 보아야 할 것은 처음 2개인 ICollectionView, IList 인터페이스입니다.

ICollectionView 인터페이스는 해당 Collection에서 데이터를 변경하지 않고, 데이터의 정렬 또는 필터링을 가능하게 해줍니다. 또한 해당 Collection에서 IViewCursor를 제공하여서 데이터에 대한 접근 및 변경을 지원합니다.


IList 인터페이스는 ICollectionView에서 IViewCursor를 이용한 순차적인 데이터접근과 달리 인덱스를 기반으로 하여 데이터에 대한 접근 및 변경을 지원합니다.


여기서 한가지 재미있는 것은 ListCollectionView는 내부적으로 IList 인터페이스를 이용하여 원본 데이터를 관리하고 있습니다. 위의 ArrayCollection에서 source에 Array를 반영해줄때 list 라는 변수에 넣어주는데 이 list 변수가 ListCollectionView에 보면
private var _list:IList;
와 같이 선언되어 있음을 알 수 있습니다.
ArrayCollecton 의 경우 Array, XMLListCollection의 경우 XMLList가 그 원본 데이터가 됩니다. 하지만 Array 와 XMLList 는 IList 인터페이스를 구현하고 있지 않습니다. 그렇기때문에 ArrayCollection에서는 IList를 구현하는 ArrayList, XMLListCollection에서는 XMLListAdapter 클 래스를 이용합니다. 이 2개의 클래스는 레퍼런스에서도 설명되어있지 않고, 빌더에서 Content Assist로도 나타나지 않습니다. 사용하기 원치 않았던 듯 합니다. ;) 하지만 ArrayCollection을 사용하기는 싫고 간편하게 데이터 접근이 필요한 경우에는 ArrayList를 사용해보는 것도 괜찮을 것 같습니다. (자바의 ArrayList 랑 똑같다고 생각이 듭니다.)


그럼 이상으로 간단하게 ArrayCollection에 대해 정리해보았습니다. 저도 이만 자야겠습니다. ;)
2008. 7. 8. 15:27
사용자 정의 컴포넌트(custom component)를 만들었을때, 특정 이벤트를 발생시켜야하는 경우가 종종 있습니다. 마치 Button 을 사용자가 Click 하였을 때, Click Event가 발생하는 것 처럼 말이죠.  아래의 예제는 TextInput을 상속한 MyTextInput이라는 사용자 정의 컴포넌트입니다. 이 컴포넌트의 추가적인 기능으로는 키 입력시 'backspace' 를 입력하면, backspace 이벤트를 발생시키는 것입니다. (MXML로 만든 코드만 올려놓았는데, AS로 만든 버전도 같이 올렸습니다. 둘다 할 줄 알아야 좋죠 ㅋ)

MXML 로 만든 MyTextInput 컴포넌트 (MyTextInput.mxml)

AS로 만든 MyTextInput 컴포넌트 (MyTextInput.as)


keyDown 이벤트가 발생할때에 입력한 값이 backspace에 해당하는 '8' 이면  backspace 이벤트를 발생하도록 하였습니다. 여기서 눈여겨 보셔야 할 것은 Event 메타태그인데요. 위의 코드에서 아래와 같이 선언하였습니다.
<mx:Metadata>
  [Event(name="backspace",type="flash.events.Event")]
</mx:Metadata>
'선언해 놓은 컴포넌트에서 발생되는 이벤트가 이런 것이 있다~' 라고 선언해준다고 생각하시면 되겠습니다. 2가지를 적어야 하는데요, name과 type 입니다. name에는 해당 이벤트 이름, type 에는 해당 이벤트 클래스를 적어주시면 됩니다. 위와 같이 선언해놓으면 아래와 같이 name이 MXML 상에서 아래의 이미지와 같이 이벤트로 표시됩니다.



이 backspace 이벤트를 이용하여 아래와 같이 예제를 한번 만들어보았습니다. 사용자가 backspace 키를 누르면 아래의 TextArea 에 backspace를 눌렀다는 메세지가 나오게 됩니다.







그 렇다면 상단의 코드에서 보시면 MyTextInput 컴포넌트에서  keyDown 이벤트 핸들러를 지정한 2행을 보시면 TextInput 에도 keyDown 이벤트에 대해서 메타태그가 선언되어 있다 라고 유추해볼 수 있습니다. 실제로 TextInput 에는 레퍼런스에서 볼 수 있듯이 TextInput에서 정의된 4개의 이벤트가 아래와 같이 메타태그로 선언되어 있습니다.



keyDown 이벤트는 InteractiveObject 에서 정의되어 있어서 소스를 직접 확인할 수는 없네요. 안타깝습니다. ;)

이와 같은 자료는 지용호님의 블로그에 [Flex 2.0.1]커스텀 컴포넌트에 사용하는 Metadata 태그 소개 라는 포스트가 존재합니다만, 아직 어려워하시는 분들이 있는 것 같아 다시한번 설명해보았습니다.

이상으로 Event 메타태그에 대해서 알아보았습니다. ;)
2008. 7. 2. 18:11
회원가입 같은 페이지를 만들다보면 입력받을 값들이 상당히 많습니다.
이러한 값들이 실제 유효한 값인지 아닌지 판별하기가 좀 짜증나는 면이 있죠. 예전에 PHP로 회원가입 폼을 만들다보면 유효성 체크를 하기 위해서 JavaScript 로 각 필드의 값들을 체크하곤 했었습니다. (JavaScript 의 도움 없이 하려면 이 값들을 서버로 넘겨서(회원가입처리하는 php페이지) 서버에서 검증을 한 뒤에 하나라도 문제가 있으면 다시 그 화면을 표시해야되는 상당히 짜증나는 문제가 발생합니다. 그래서 클라이언트에서 해당 값들의 유효성을 체크하기 위해 JavaScript 를 이용했죠.)

물론 Flex에서도 비슷하게 해당 값(TextInput의 text 값)을 <mx:Script/> 안에서 체크하면 됩니다만, 코드를 매번 만들어야(복사해야)되니 짜증도 나고요.. ㅎ 상당히 귀찮은 면이 있었습니다. 그러나 다행이도 Flex 에서는 Validator 라는 것을 지원합니다.

유저가 유저 인터페이스에 입력하는 데이터는, 어플리케이션에 있어 적절한 내용의 경우도 있으나, 그렇지 않은 것도 있습니다. Flex 에서는, 오브젝트의 필드값이 특정의 조건에 적합하는 것을 감지하기 위해서 validator를 사용합니다. 예를 들어, 유저가 유효한 전화번호를 입력한 것을 확인하거나 string이 설정된 최소치 이상인 것이나, 우편 번호 필드에 올바른 자리수의 숫자가 포함되어 있는 것을 확인하거나 하기 위해서, validator 를 사용할 수 있습니다.

출처 : flexdocs.kr


이 Validator 는 아래와 같이 하위 Validator가 존재합니다. :
 
총 10개의 하위 Validator 가 존재하는데, Flex를 한국에서 만들지는 않아서 주민등록번호 Validator 는 존재하지 않습니다. ;) 없으면 어떻게 할까요? 그냥 체크안할 수도 없고 말이죠. 뭐 별수 있습니까? 그래서 만들었습니다!. 요즘은 회원가입시에 주민등록번호를 받지 않는 곳이 늘고 있습니다만, custom Validator를 어떻게 만들어야되는지 알아보기 위해, 흔히 만들어 보셨을 주민등록번호 Validator를 만들어 보았습니다. 주민등록번호의 유효성 체크 부분은 Flex Component 카페마요네즈라는 분이 올려주신 주민등록번호 체크 function이라는 글의 코드를 가져다가 썼습니다. (주민등록번호가 영어로는 RRN 이라더군요. RRNValidatort 라고 하면 어려울 것 같아 JuminBunhoValidator 이라고 이름지었습니다. (웃음) )

 

위의 주민등록번호 Validator를 이용하여 예제를 만들어보았습니다. 예제코드는  Flex  Reference에 Validator의 예제를 빌려왔습니다. ;)


한번 자신의 주민등록번호를 넣고 테스트해보세요. (저장되지 않으니 안심하시고... )