요즘 읽고 있는 책 중 재미있게 보고 있는 책인 [31가지 사용자 경험 시나리오로 배우는] 실전 UX 디자인 입니다. 구석구석 웹페이지의 디자인에서 '실전'적인 이야기들로 책을 꽉 채우고 있어서 재미있게 읽고 있습니다. 책 내용도 훌륭하고, 한국 실정에 맞게 예제들도 넣어 이해가 쉽게 해주는 번역또한 센스 굿!! +_+
대학교 재학 중 'HCI Lab'에 있으면서 인연이 되어 '사용성', 또는 '시나리오', '페르소나' 같은 단어들과 친숙해질 수 있었죠. 담당교수님께서 스웨덴에서 HCI 를 전공하신 분이라, 강의하시는 HCI 수업도 참 재미있게 듣게 되었고 랩원들과 함께 HCI 학회에 가서 다른 사람들과 이야기도 많이 해보고, 참 즐겁게 HCI 라는 학문과 만났던 것 같습니다. 덕분에, UX(User eXperience) 라는 것에도 관심이 많아진 것 같네요.
아무튼 책의 18장 '현명한 글쓰기창' 에 보면 사용자의 실수에 대한 이야기가 나옵니다. 사용자의 실수로 인한 오류메세지는 그 사용자를 자괴감에 빠지게 만들죠. 사용자를 좌절하지 않게 하기 위해서는 사용자의 실수를 미리 막아주라고 충고 하고 있습니다. 이러한 이야기를 하면서 포카요케 라는 단어를 언급하고 있습니다. (물론 9장 '자동완성의 위력과 함정'에서 먼저 언급하고 있습니다)
포카 요케라는 단어가 무엇일까요? 생소한 단어였습니다만, 책에서 포카 요케ポカヨケ, Poka-yoke는 원래 일본어로 '실수를 피하는'이란 뜻이다. 라고 설명을 하고 있어서 이해가 좀 더 쉬웠습니다. 아래는 위키피디아에서 찾은 포카 요케의 설명입니다.
포카 요케(ポカヨケ, Poka-yoke)는 원래 일본어로 '실수를 피하는'이란 뜻이다. 이 용어는 토요타의 시게오 신고에 의해 품질 관리의 측면에서 실수를 방지하도록 행동을 제한하거나 정확한 동작을 수행하게 끔하도록 강제하는 여러 가지 제한점을 만들어 실패를 방지하는 방법을 말하는 용어가 되었다.
예를 들어 자동차에서 기어를 주차 상태 위치인 “P”로 놓지 않으면 시동이 걸리지 않도록 만들어 운전자가 자동차를 안전하지않은 상태로 놔두고 나가는 것을 방지하도록 한다. 또한 컴퓨터에서는 USB 장치의 플러그를 꼽을 때 뒤집어진 상태로 꼽으려고하면 안돼도록 디자인 되어 있다. 인지 심리학 및 인간과 컴퓨터 상호작용 분야에서도 이를 이용하여 여러 가지 실수를 방지하는 디자인 원리의 하나로 받아들여져서 이용하고 있다.
만약 회원가입 화면에서 사용자의 이름을 입력 받는다고 할 때에 사용자의 이름을 넣는 TextInput에 숫자가 입력될 필요는 없겠죠? 한글과 영어만 입력되도록, 또는 한국인만을 대상으로 한다면 한글만 입력받아야 하겠습니다. 이러한 것을 실수방지장치라고 부를 수 있겠네요.
상기 사항에 대해서는 입력받는 글자들에 대해 제한을 걸 수 있는 restrict 라는 속성이 있습니다.
또한 TextInput 컴포넌트를 상속해서 만든 PromptingTextInput 같은 유용한 컴포넌트 있습니다. 오픈소스 컴포넌트들을 모아놓은 FlexLib 에 있는 컴포넌트 중에 하나 입니다. 사용자가 입력하기 전에 프롬프트를 통해 무엇을 입력해야 되는지 입력할 수 있습니다. 개인적으로 매우 좋아하는 컴포넌트 입니다.
그리고 오류탐색기로는 Validator 가 있습니다. 사용자의 잘못된 입력을 메세지로 알려주는 방식입니다. JavaScript 에 익숙한 분들은 각 컴포넌트에 값이 비어있는지 확인하여 Alert을 출력하는 식으로 작성하는 경우도 많은데, 보다 직관적으로 유효성을 컴포넌트에 표시해주는 Validator가 상당히 더 좋은 방법임에 틀림 없습니다.이러한 Validator를 상속받아 새로운 Validator 를 작성하는 것은 제가 이전에 쓴 포스트인 [Flex] 주민등록번호 Validator 를 참고하시면 되겠습니다.
책의 15장 '불량 제로 실수방지장치'에 나오는 스프링노트의 회원가입페이지의 예제를 보면 아래와 같은 이미지가 있습니다.
사용하고자 하는 아이디를 입력 시 아이디로 쓰이기에 적합한지 알려주고 있습니다. Flex에서는 Validator를 사용하면 비슷한 효과를 얻을 수 있습니다만, 사용자가 입력하는 도중에는 Validator가 작동하지 않습니다. 마우스를 오버해야지만 툴팁이 화면에 나타나게 되는데, 이를 제어할 방법은 없습니다.
이런 상황이 생기는 이유를 알기 위해 Validator 와 UIComponent 와의 동작방식에 대해 알아보도록 합시다.
Validator 에서 입력받은 데이터를 검증하여 ValidationResultEvent 를 발생시키게 되는데 이 때 Validator에 등록해 놓은 UIComponent의 validationResultHandler(event:ValidationResultEvent)로 리스너를 등록해놓아 결과를 전달해줍니다.
이 메소드가 받는 ValidationResultEvent에는 에러메세지가 들어있는데, 이를 UIComponent에서는 _errorString 이라는 변수에 담고 ToolTipManager의 mx_internal로 선언되어 있는 registerErrorString(target:DisplayObject, errorString:String) 메소드를 이용하여 에러메세지를 등록합니다. ToolTipManager에 에러메세지를 등록하게 되면 ToolTipManager에서 해당 컴포넌트에 MOUSE_OVER, MOUSE_OUT 이벤트 핸들러를 등록해놨다가, 해당 UIComponent에 마우스 오버시 에러메세지가 적힌 툴팁이 출력되게 됩니다.
이로인해 마우스를 해당 컴포넌트에 올려놓지 않으면 툴팁이 보이지 않는다는 문제가 생기게 됩니다. 해당 문제점은 어도비의 Bug and Issue Management System(이슈트래킹 시스템)에 이슈로 등록이 되어 있는 상태입니다. 꼭 해당 속성이 생겼으면 좋겠네요. (투표 많이 해주세요~)
해당 문제를 해결하기 위해 세계 각국의 Flex 개발자들이 내놓은 방안 중에는, CustomToolTipManagerImpl 를 작성하여 직접 속성을 추가한 분들도 계시고 간단하게 다음과 같이 해결한 분들도 계십니다.
하지만 저는 테스트 해보니 제가 원하는 동작은 되질 않네요 =ㅁ=;; 아마도 ToolTipManager 에서 해당 컴포넌트를 찾아 이전과 다른지 비교하는 구분에서 단순히 MOUSER_OVER 이벤트로는 정상적인 교체가 이루어 지지 않는 듯 합니다.
Validator 를 사용하지 않고, Flex 에서 유효성을 검사하는데 좋은 방법에 대해서는 Aral balkan의 블로그에 Better form validation in Flex 라는 포스트를 참고하시면 좋겠습니다. 글의 요지는 TextInput에 값이 비어있을때 경고메세지를 담은 ToolTip을 직접 화면에 생성해주는 식이네요. 참 좋은 아이디어 같습니다.
제가 Flex를 처음 접하고, '이거 정말 멋지다!' 라고 생각을 했습니다. 그 뒤로 이어지는 생각은 '이거 한글 입력은 왜 이리 느려?'. 몇 년이 지난 아직도 한글 입력은 느리기만 한데, 언제 수정될지는 아무도 모른다죠. 비 영어권의 설움이라고 할까요? 과학적이고 독창적인 자랑스런 한글을 쓰는게 죄(?)가 되는 이상한 상황.
이런 상황을 헤쳐나가고자 지난 1월 이희덕님의 제안으로 'Flash Platform 한글문제 공동대응팀'이 생겼습니다. (짝짝짝)
그간 오프모임을 진행하면서 팀원간 의견도 나누고, 최근 Flex SDK 3.2 + FP 10 에서의 한글 입력문제가 해결되는 기쁨을 맛보기도 하였습니다.
이제 다른 많은 Flash Platform 개발자 분들과 만나, 한글문제와 개발 노하우를 이야기해보고자 합니다.
＊행사 개요
날짜 : 2009년 4월 11일 (토)
장소 : 숭실대학교 벤처관 3층 대강의실
시간 : 오후 2시 ~ 6시
주최 : Flash Platform 한글문제 공동대응팀
주관 : 숭실대학교 글로벌미디어학부
후원
＊Agenda
14:00 ~ 14:10 : 학교 시설 사용과 관련된 안내 (이희덕)
14:10 ~ 14:30 : 한글 대응팀 소개 및 기조연설 (이희덕)
14:30 ~ 15:00 : Flash Platform 게임개발 노하우 (이정웅)
15:00 ~ 15:30 : FlarToolKit으로 구현하는 증강 현실 (옥상훈)
15:30 ~ 16:00 : Flash Platform 한글문제 (이희덕)
16:00 ~ 16:40 : 토론의 장 (대응팀 전원)
16:40 ~ 17:20 : 잡부 Flex 개발자를 위한 Flex 스킨 (김학영)
17:20 ~ 17:50 : Creating Visual Experiences with Flex (이준하)
17:50 ~ 18:00 : 정리 및 폐회
행사 참석 신청 및 자세한 소개는 온오프믹스를 통해 신청해주시면 감사하겠습니다. ;)
많은 참석 부탁드립니다 !!!
함께해요~ ㅎㅎ
안녕하세요? 검쉰입니다. 오랫만에 블로그 포스트로 인사드립니다.
그동안 티스토리에서 문제가 되었던 Flash Player 10에서 swf 로드가 안되던 문제가 해결이 되었네요. ;) 기존의 제 포스트들도 정상으로 보이고요. 이사하려다가 그 것또한 귀차니즘에 의해 좌절. ^ㅂ^; 아무튼 다시 오랫만에 글로 인사드려요. ;^)
흔히 자주 쓰시는 Flash로 만든 네비케이터 바 에서 메뉴정보를 외부의 XML 로 받아오는 경우와 같이 외부의 데이터를 읽어오는 과정에서 한글이 깨지는 경험을 한번쯤은 하셨을 겁니다. 이런 경우 커뮤니티에서 검색해보시면 System.useCodePage = true; 를 넣어라. 라는 답변을 많이 볼 수 있습니다. 심지여 이 것을 "한글 깨짐 방지 코드"라고 부르는 경우도 있더군요. 옛 속담에 '선무당이 사람잡는다'라는 이야기가 있습니다. 정확하게 이해하지 못하고 쓰게 되면 뒷일 감당하기 힘들게 되는 법!!. 왜 System.useCodePage = true; 를 넣으면 한글이 안꺠지는지 알아보도록 하겠습니다.
'EUC-KR' 이라고 많이 보셨을 겁니다. 한글을 정의한 캐릭터 셋(charset)입니다. 보통 한글 윈도우에서 제작한 파일은 'EUC-KR' 캐릭터 셋으로 저장되는 경우가 많습니다. 이 때 캐릭터 셋이란 글자들의 집합을 정의한 것이라고 생각하시면 됩니다. (보다 자세한 건 위키백과의 설명을 참조하시길 바랍니다.)
이러한 캐릭터 셋이 다르게 되어 있는 데이터를 읽어오게 되면 한글이 깨지게 되는데요, Flash 내부에서는 유니코드(UTF-8)를 기본으로 사용하기 때문입니다. 'EUC-KR'로 제작된 파일을 'UTF-8'로 읽었으니 당연히 서로 다른 캐릭터 셋을 사용하게 되므로 한글이 깨지게 되는 겁니다. 이러한 경우에 바로 System.useCodePage = true; 를 사용하면 한글이 깨어지지 않는데, 그 이유는 LiveDocs 에도 잘 나와있습니다.
useCodePage
속성
useCodePage:Boolean [읽기/쓰기]
언어 버전:
ActionScript 3.0
런타임 버전:
AIR 1.0, Flash Player 9
Flash Player에서 외부 텍스트 파일을 해석하는 데 사용할 코드 페이지를 지정하는 부울 값입니다. 이 속성을 false로 설정하면 외부 텍스트 파일이 유니코드로 해석됩니다. 이러한 파일은 저장할 때 유니코드로 인코딩되어야 합니다.이 속성을 true로 설정하면 외부 텍스트 파일이 Flash Player가 실행되는 운영 체제의 일반 코드 페이지로 해석됩니다.useCodePage의 기본값은 false입니다.
flash.display.Loader.load(),
flash.net.URLLoader, flash.net.URLStream 또는 XML 클래스를 사용하여 외부 파일로 로드하는
텍스트를 Flash Player에서 유니코드로 인식하려면 이러한 파일을 유니코드로 저장해야 합니다. 외부 파일을 유니코드로
인코딩하려면 Windows 2000의 메모장과 같이 유니코드를 지원하는 응용 프로그램에서 파일을 저장해야 합니다.
유니코드로 인코딩되지 않은 외부 텍스트 파일을 로드하려면 useCodePage를 true로 설정합니다. 이렇게 하려면 데이터를 로드하는 SWF 파일의 첫 번째 프레임에 다음 코드를 첫 코드 행으로 추가합니다.
System.useCodePage = true;
이 코드를 추가하면 외부 텍스트가 Flash Player가 실행되고 있는 운영 체제의 일반 코드 페이지로 해석됩니다. 영문 Windows 운영 체제의 경우 대개 CP1252이고 한국어 운영 체제의 경우 EUC-KR입니다. 만약 useCodePage를 true로
설정하면 Flash Player 6 이상 버전은 Flash Player 5와 같은 방법으로 텍스트를 처리합니다. Flash
Player 5에서는 모든 텍스트를 Flash Player 실행 운영 체제의 일반 코드 페이지를 사용하는 것으로 간주하고
처리했습니다.
useCodePage를 true로
설정하는 경우 플레이어가 실행되는 운영 체제의 일반 코드 페이지에 외부 텍스트 파일에 사용되는 문자가 포함되어 있어야 텍스트가
표시됩니다. 예를 들어 중국어 문자가 포함된 외부 텍스트 파일을 로드하는 경우 CP1252 코드 페이지에는 중국어 문자가
없으므로 이 코드 페이지를 사용하는 시스템에서 중국어 문자가 표시되지 않습니다.
모든 플랫폼에서 SWF 파일에 사용된 외부 텍스트 파일을 볼 수 있게 하려면 모든 외부 텍스트 파일을 유니코드로 인코딩하고 useCodePage를 false로 설정된 상태로 두어야 합니다. 이렇게 하면 Flash Player 6 이상에서 텍스트가 유니코드로 해석됩니다.
LiveDocs 에도 나와 있는 것 처럼 useCodePage 를 true로 설정하면 유니코드가 아닌 운영체제의 codepage로 해석이 되는 것이죠. 한글 윈도우의 기본 codePage는 'EUC-KR(51949)' 입니다. 그래서 외부의 'EUC-KR'로 되어있는 문서가 깨지지 않고 읽히게 되는 것입니다.
더 이상의 문제가 없어보입니다만, 실제 그렇지 않습니다. 해당 swf 를 로드하는 사용자가 외국어 OS를 사용하고 있다면 어떨까요? 열심히 만든 어플을 정식으로 런칭했는데, 그걸 외국의 한국인이 본다면???
이론적으로 보면 'EUC-KR'로 되어 있는 문서를 해당 OS의 codePage로 읽게 될텐데, 다른 언어의 OS는 codePage가 설마 'EUC-KR(51949)'일까요?? 위의 livedocs의 설명에도 나와 있듯, 다른 나라의 OS는 한국어 OS와 codePage가 다르다는 군요. (다른 나라 언어의 캐릭터 셋에 대해서 궁금하시다면 여기에서 확인해보시면 되겠습니다.)
실제로 그런지 확인을 위해서 아래와 같은 간단한 swf 파일을 만들어 봤습니다. 소스코드는 다음과 같습니다.
Flex 로 만든 App.
로드한 XML 파일
동일한 XML 파일을 'UTF-8', 'EUC-KR'로 각각 저장해서 useCodePage를 각각 false, true 로 설정해 영어, 일어 Windows 에서 IE로 읽어봤습니다.
클릭하셔서 확인해보세요.
Windows XP 영문판에서 swf 로드
Windows XP 일어판에서 swf 로드
UTF-8로 되어있는 파일은 어떤 OS든지 간에 잘 로드가 되고 있고, 'EUC-KR'로 되어있는 것을 System.useCodePage = true; 로 설정한 것은 한글이 여지없이 깨져보이는 것을 확인 할 수 있습니다. 외국에 서비스 할 생각이 없는 어플이라 하더라도, 기본적으로 'UTF-8'로 파일들을 저장해 놓으시면 한글문제를 잘 피해가실 수 있다고 생각합니다. 단순이 파일만이 아니라, HTTPService로 load 하는 데이터 또한 'UTF-8' 로 제작되어야 하겠죠?
하지만 할 수 없이 'EUC-KR'을 사용해야 할 때가 있습니다.네이버 카페의 경우 'EUC-KR'로 되어 있는데요, 이 것 때문에 useCodePage를 true로 설정할 수 는 없는 것 아니겠습니까? 이런 고민을 제가 존경하는 원강민님께서 블로그에 이미 포스팅 하신 적이 있습니다. System.useCodePage 대신 이렇게.. 이 포스트를 참고 하시면 좋겠습니다.
오늘도 어김없이 위자드닷컴에 등록해 놓은 RSS 들을 훓어보고 있던 참에 Flex 에 관심있으시면 다 아실법한 옥고수(옥상훈)님의 블로그 에 새로운 글이 있는 것을 발견했습니다. 포스트의 이름하야 천국과 지옥을 넘나드는 소프트웨어 개발 이야기 였습니다. 도대체 뭐가 천국과 지옥을 넘나든다는 거지? 라고 의문을 가진 저는 냉큼 클릭을 했더니
『드리밍 인 코드』 천국과 지옥을 넘나드는 소프트웨어 개발 이야기
스콧 로젠버그 지음 | 황대산 옮김 | acornLoft 시리즈
456쪽 | 25,000원 | 2009년 1월 2일 출간 예정 | 978960770706
위의 책을 소개하시더라고요. 오홋.. 습자지 처럼 얇은 지식과 경험을 자랑하는 저로써는 일명 '고수'님들의 개발철학이라던가 하는 실 생활이 항상 궁금할 수 밖에 없습니다. 마치 관음증(觀淫症)을 충족시키는 것 마냥 다른 개발자들을 탐닉하는 저의 행동강령(?)상 이와 같이 은밀한 유혹은 뿌리칠 수 없었다죠.
감사의 댓글을 달고 냉큼 yes24 로 달려갔더니(적립금이 많아서)예약판매중이더군요.. ;^(
마침 생일(지난 27일이 생일-_-v)이라고 회사에서 주신 3만원 문화상품권도 있던 차에 바로 질러주려 했으나 실패하고 아쉬운 마음만 가지고 있던 차에 옥상훈님만큼 흠모에 마다하지 않는 열이아빠님께서도 동일한 책을 소개하는 글(자고 일어나서 프로그램이 완성되어있다면)을 올리신 것을 발견했습니다. 이건 뭐임? 하고 봤더니 에이콘측에서 트랙백 이벤트를 걸고 있던 겁니다!!!!! +_+
자고로 저도 책 욕심은 무한하기에 저도 트랙백을 걸려고 유령처럼 관리안하는 블로그에 간만에 글을 쓰고 있습니다. ;) (살짝 민망- 글 쓸꺼리는 있는데, 티스토리는 언제 FP10 관련 버그 고쳐주나효?)
에이콘에서는 정말 좋은 책들이 많이 쏟아져나오는 듯합니다.
제가 가진 책중에도 에이콘출판사의 책도 많은데요, 에이콘 책들은 죄다 굿~ 잡~!!! ;)
일전에 옥상훈님이 쓰신 "예제로 배우는 플렉스"의 발간 2주년 기념 파티 참석해서 잠시 에이콘 관계자 분들도 뵈었는데, 그 때에 말씀해주신 예플이 나오기까지 비하인드 스토리가 참 재미있기도 하고 고맙기도 했습니다. 부사장님의 부인사칭 사건은 계속 기억에 남네요 ㅎㅎ (그 때 오창훈님이 집필중이라는 말씀도 살짝 들었는데 그 책은 언제 나올라나요?? 완전 궁금)
번역은 저도 한권 가지고 있는 "웹 개발 2.0 루비 온 레일스"를 쓰신 황대산님께서 번역을 해주셨네요. 저서보다 더 공을 들이셨다고 하는데, 대단히 기대중입니다. 저서도 상당히 좋았거든요 ;) 번역도 아주 깔끔할 것 같은 느낌입니다.
실제 책이 발간 전이니 책설명을 제가 하기는 상당히 힘들(?)고, 자세한 책 설명은 여기를 참고하시면 좋겠습니다. 저와 같이 고수들의 걸어간 발자욱을 쫓고 싶으신 분들이라면 기대하셔도 좋을 것 같습니다. +_+
ps. 열이아빠님 블로그에 덧글로 에이콘 측근은 안뽑힌다... 라는 말씀을 적어놓으셨으니 열이아빠님은 안 뽑히시겠군요 ;) 저는 꼭 뽑혔으면 하는 바램이... 뭐 안되면 예판해야죠 뭐 ;)
TextInput 으로 사용자에게 어떤 입력을 받게 되는 경우가 있습니다. 이때에 보다 많은 내용(예를 들어 사용자의 자기소개 같은 값)을 입력 받아야 하는 경우가 생기는데, 이때 사용하면 좋은 컴포넌트가 TextArea 입니다. TextArea 컴포넌트로 여러줄로 입력을 받게되면 사용자는 필연적으로 엔터키를 눌러 개행(줄바꿈)을 하게 되는데 오늘 이야기해보고자 하는 것은 이 개행에 대한 처리입니다.
문자열에 엔터를 처리하기 위해서 이스케이프 문자인 백슬래시(\)를 사용하여 처리를 하게 되는데, 보통 흔히 알고 있기로는 엔터를 처리하기 위해 \r\n 을 문자열에 포함시키면 된다고 아실 겁니다. 저도 학교에서 C수업을 들을때 그렇게 배웠습니다.
\r : 캐리지리턴(carriage return) - 커서를 해당 줄의 처음으로 옮김 \n : 라인피드(linefeed) - 커서를 해당 줄의 다음줄로 옮김
커서를 해당줄의 왼쪽으로 옮겨 다음줄로 내리면 엔터키를 친 것과 동일한 효과가 나오게 됩니다.
하지만 TextArea 에서는 \r 만으로 엔터키 처리를 하고 있습니다.
위와 같이 엔터키를 넣게 되면 실제로 TextArea의 text 속성에서 받는 문자열에는 "텍스트\r입력" 이라고 들어있게 되는 것이죠.
사용자에게 입력받은 해당 데이터를 서버에 저장하고 불러와 다시 TextArea 에 넣어줄때에 아무런 처리를 하지 않아도 상관없습니다. 어짜피 넣어진대로 다시 넣는 것이니까요. 하지만 서로 다른 언어에서 같은 데이터를 사용시에는 문제가 됩니다. 언어들마다 엔터의 처리가 다르기 때문이죠.
위에서 처럼 \r\n 으로 엔터키를 처리하는 경우도 있고, \r 만으로도, \n 만으로도 처리하는 경우가 있습니다. 만약 \r\n으로 엔터를 처리하는 시스템에서 만들어 놓은 문자열을 TextArea 에 대입하면 어떻게 될까요? "텍스트\r\n입력" 이라고 TextArea의 text 속성에 넣으면 아래와 같은 현상이 발생합니다.
위에서 보시는 것 처럼 \r 과 \n 둘다 엔터키로 인식되네요.
참고로 말씀드리자면 MXML 상에서 위의 이스케이스 문자를 인식시키실때는 아래와 같이 하시면 됩니다.
아무튼, 저는 이와 같은 문제를 자바로 구성된 서버를 이용하면서 겪게 되었습니다. 해당 서버를 이용하는 또다른 쪽이 델파이로 구성되어 있는데, 델파이에서는 \r\n 으로 엔터키를 표현하는데, 플렉스에서 받아오니 엔터가 2번 입력되는 것 처럼 보이는 것은 물론 Flex 쪽에서 생성한 문자열은 델파이에서 엔터키가 없는 상태로 출력되는 것이었습니다.
물론 더 좋은 방법들이 있을꺼라 생각되지만, 저는 플렉스쪽에서 변환해서 쓰고 저장시에도 변환해서 보내기로 결정을 했습니다.
그래서 아래와 같은 코드를 구현하였습니다.
네이밍이 좀 별로네요.. ;;
엔터키의 처리가 다르다는 것을 알아두시면 좋겠네요. ;)
ps. Flash Player 10 이 공개된 이후 FP10 이 설치된 브라우저에서 이전 포스트의 swf 파일을 로드하지 못하는 경우가 생기네요.
정확하게 이유는 모르겠습니다. 티스토리 포럼에 같은 내용의 버그신고가 이어지고 있는데, 자세히 알아봐야겠습니다.
Adobe AIR에 대해 자세히 다루고 있는 AIR in Action 의 한글 번역판이 우여곡절(원서 출간 전에 번역 작업이 시작되었는데, 중간에 책 내용이 죄 바뀌였다는 슬픈 이야기)을 겪고 드디어 예약판매에 들어갔습니다. 절찬리에 판매중입니다.
현재 예스24, 강남컴퓨터, 인터파크, 알라딘, 교보문고 에서 예약판매 중이라고 출판사인 위키북스의 블로그에서 공개하고 있네요. 글 쓰고 있는 현재는 24일부터 배송되도록 예약판매중인 곳은 강컴, 인터파크, 교보문고 입니다.
에이레네 라는 닉네임으로 친숙한 유윤선님께서 열심히 번역해주셨습니다. 우연찮게 베타리더로 활동하게 되어 원본과 번역본을 번갈아 보게 되었네요. 물론 번역의 피드백을 드린다는 명목이었습니다만, 오히려 제가 더 도움이 되었습니다.
책 내용은 아주 만족스럽습니다. 책을 관통하는 AirTube 라는 어플을 제작하면서 AIR에서 제공되는 중요 API를 빠짐없이 설명하고 있습니다. 기존에 원서라서 제대로 이해하지 못했던 기술적인 내용들도 이 책을 통해 알게된 것이 엄청납니다. 그만큼 내용 굿!!! AIR에 관심있으시다면 꼭 한번 읽어보길 권해드립니다.
이 책 한권을 쫙 읽으시면 AIR로 뭔가 만들고 싶어 손가락이 근질근질해질 것이 틀림없습니다. ;)
베타리더 서평을 책에 싣는다고 하셔서 서평을 보내드렸는데, 지면관계상 못 싣었다는 안타까운 이야기가 들리네요. ;^0 위키북스 블로그에는 서평을 적어주셨네요. 쪼금 아쉽지만 뭐....
제가 정식출간된 책을 받아보지는 못했기때문에, (그야말로 프리뷰) 라서 책의 상태는 알길이 없네요. 너무 무겁지만 않았으면 좋겠습니다. ;) (외쿡 책들은 가볍고 좋던데 말이죠.) 책을 받아서 전체적으로 훓어보았습니다만, 아주 만족스럽습니다. ;) 뒷표지에 너무 산소 드시는거 뺴고는.. ^^;
편집상태도 좋고, 제 원대로 무게도 적당합니다. ;) 위키북스 측에서 대단히 신경 많이 쓰신듯 하네요.
다만, 책 구매하신 분들이 의아하실 수도 있겠습니다. '책에 나오는 그 많은 소스들은 어떻게 하라고 부록 시디 한장 없냐'고 말이죠. 책에는 실리지 못했지만 역자이신 유윤선님께서 네이버에 AIR IN Action 카페를 운영하고 계십니다. 소스 및 관련 의문사항은 카페에서 해결하시면 되겠네요. 책 사신 분들께서는 가입하셔서 많은 정보 구하시면 좋겠습니다. ;)
현재 책 내용에 관련된 공지들이 올라오고 있으니 참고하시면 좋겠네요.
RIA Camp 2nd in Seoul(제 2회 Flex Camp) 에 참석하고 왔습니다. 이번 캠프부터 명칭이 RIA Camp로 변경되었어요. Flex에 국한되지 않고 Flex, Flash, AIR와 같은 RIA에 대한 열린 공유의 장이 되고자 하는 의지가 담겨있는 명칭이 아닌가 합니다. ;) 이번 행사는 강남 교보타워 23층에서 진행되었는데 준비된 좌석이 꽉 차서 뒤늦게 오신분들은 뒤에서 서서 들으셔야될 정도로 많은 분들이 오셨습니다.(공지사항의 참가신청 덧글은 400번대가 넘었네요!) 1회 캠프때 자리가 텅텅 빈 것 생각하면 평일인데도 불구하고 놀라운 참석률!!! 아마 라이언 스튜어트(Ryan Stewart)와 마이크 챔버스(Mike Chambers)가 방한하여 발표를 한 것 때문이 아닌가 합니다.
이번 행사에 사회는 1회때와 같이 ACC(Adobe Community Champion)이신 이정웅(블루메탈)님 께서 보셨습니다.
그 후에 본격적인 발표시간이었는데요, 라이언 스튜어트(Ryan Stewart)와 마이크 챔버스(Mike Chambers)가 교대로
Flash Player 10, AIR 1.5 , Flex 4(Gumbo), Thermo
에 대해서 이야기를 하였습니다. :) 우선 라이언 스튜어트(Ryan Stewart)가 먼저 올라와 RIA의 미래에 대해서 발표를 하고, 마이크 챔버스(Mike Chambers)가 각 기술들의 데모시연을 하였습니다. 그 후에 마지막으로 라이언 스튜어트(Ryan Stewart) Thermo 데모시연을 하였습니다. 데모시연을 한 것들은 마이크 챔버스(Mike Chambers)의 블로그에 있거나 올릴 예정이라 하니 참고하시면 되겠네요.
012345678910111213141516171819
위의 사진에도 있듯, 곧 Flash Player 10과 AIR 1.5, 그리고 Flex 3.2 업데이트가 있을 예정이고, Flex4는 내년 하반기쯤으로 계획되어있다고 하네요. 두근두근~ 합니다. ;) 이번 발표에서 특히나 강조되던 Pixel Bender는 CS4에 포함될 'Pixel Bender Toolkit'으로 필터를 제작할 수 있다고 하더군요. 이후 CS4의 제품군에서 동일하게 사용할 수 있데나~ 어쩐데나~ ㅎㅎ 참 재미있을 것 같더군요.
그리고 Flex4 에서 FXG와 데모를 보여준 MXML로 되어 있는 <SKIN> 의 구현은 참 흥미로웠습니다. 한번 다시 봐야될 것 같아요 ;) 맨 마지막으로 Thermo 데모를 시연했는데, (라이언의 말대로라면) 초창기버전이라 에러가 좀 나긴 했는데, 실제 데모는 처음 보는 것이라 재미있었습니다. 전체적인 생각은 실버라이트의 블렌드랑 비슷하네~ 랄까. 그런 생각이 들더군요. 사실 좀 드로잉 노드들이 늘어나면 가독성이 떨어질텐데, 그게 좀 걱정스럽더군요.(단지 오른쪽으로 좀 움직였는데 만들어진 엄청난 코드들... ㄷㄷ)
한가지 의문점은 MXML이 빌드가 되면 우선 AS 클래스로 변환이 된다음, SWF로 만들어지는데요, FXG로 만들어진 코드들은 AS 클래스가 되는건가요? 그렇다면 FXG 도 클래스로 불러드릴 수 있는건가.? (이건 오창훈님께 부탁드렸으니 잊지 않으셨다면 물어보시겠지요 ㅎㅎ)
마이크 챔버스(Mike Chambers) 가 마지막 쯤에 toString() 라는 프로젝트를 소개하였습니다. 현재 2권의 책이 올라와있는데요, 이 책들을 각국의 언어로 번역하는 프로젝트인데 아시아권 최초로 열이아빠님께서 'Adobe AIR for JavaScript Developers Pocketguide' 의 1, 2장을 한국어로 올려주셨다고 하더군요.(정작 열이아빠님은 일이 바쁘셔서 참석 못하셨...ㅡㅡ) 혹시 영어잘하시고 공헌을 해보시겠다는 분은 마이크에게 메일 보내셔서 동참해보시는 것도 좋겠어요~ ;)
발표가 끝나고 잠시 쉬는시간(던킨도넛과 커피를 제공해주셔서 맛있게 먹었습니다.) 후에 바로 다음섹션이 진행되었습니다. 오창훈님께서 'AIR로 만드는 매쉬업 애플리케이션 이야기' 라는 주제로 발표를 하셨습니다.
01234
매시업에 대한 정의를 내려주시고 AIR를 통한 매쉬업시 유용한 것들에 대해서 말씀하셨습니다. 맨 마지막에 말씀하신 VoIP를 사용한 AIR LG Phone 이라는 어플을 보여주셨는데요, 발표말씀처럼 부동산 정보가 출력되는 맵에 각 건물에 클릭하면 바로 전화를 걸어준다면 얼마나 유용할까? 하고 저도 동감했습니다. 매쉬업이란 정말 상상의 산물인 것 같아요 ;)
그 다음으로는 이희덕님의 '덕글 쿨럭'이라는 AIR로 만든 웹브라우저에 대한 발표가 있으셨습니다.
01
특유의 네이밍센스에 찬사를 보내면서, 이전과 마찬가지로 재미있게 발표를 해주셨습니다. AIR에서 제공되는 SQLite와 WebKit Browser를 이용하여 기본적인 웹브라우저를 만드셨더군요. 함께 같이 만들어나가면 재미있는 웹브라우져가 탄생할지도 모르겠습니다. ;)
다른 유용한 이야기들도 많이 하셨습니다. SVN을 이용하기 위한 Subclipse 와 trac 설치 및 ASDoc 생성시 주의사항 등..
마지막에 오픈소스 쿠디(Kudeeh) 홍보도 하셨는데, 국내 OPEN API서비스를 AS3 라이브러리 형태로 제공하는 프로젝트라고 하네요. 관심있으신 분들은 구경해보셔도 좋겠습니다. ;)
마지막으로 김춘경(딴동네)님께서 Flash Player 10에 포함된 Pixel Bender 에 대해서 말씀해주셨습니다.
01
제가 워낙 그래픽 관련 쪽은 잼병이라 이해는 많이 못했습니다만, 게임 관련 일하시는 분들께는 상당히 좋은 발표였던거 같습니다. 진행하신 이정웅(블루메탈)님께서도 게임쪽 일을 하시고 계셔서 상당히 흥미있어 하시는 듯 했습니다. Pixel Bender는 '하드웨어 독립 기반의 이미지 프로세싱에 사용되는 프로그래밍 언어' 라는거 하나 배웠네요! ;) 나중에 프리젠테이션 자료 공개되면 다시 한번 공부해봐야겠습니다. ;) 동영상 강좌도 올려주시고 좋은 것들 많이 공개해주셔서 도움이 많이 되었는데 실제 뵌건 처음이었네요. 워낙 사진 같은 것도 없어서 상당히 궁금했는데 말이죠. ;) 오늘은 경황이 없어서 인사도 못드렸는데, 다음에는 꼭 인사드려야겠습니다. ㅎ
오늘 그동안 뵙고 싶어도 못뵈었던 분들 많이 뵙고 인사 나누었습니다. 행사할때 이렇게 한분씩 알게된다는게 참 좋은 것 같습니다. ;) 저녁시간 괜찮으신 분들과 함께 저녁식사까지 하고 집에 들어왔네요. 저녁 함께 해주셔서 감사하고 다음에 시간내서 또 뵈어요~ ;)
01234
오늘 관계자여러분 정말 수고하셨고요! 발표하신 분들도 정말 수고하셨습니다. ;)
다음 캠프때는 발표 꼭 하고 싶네요 ㅎ (이번에는 시간이 짧아서 ㅎㅎ)
단도직입적으로 말씀드리자면,new 키워드는 비용이 비쌉니다. 많은 리소스를 사용하게 된다는 말이죠. 물론 안쓸 수야 없죠. 새로운 객체를 생성하려면, 당연히 써야됩니다. 하지만, 사용하게 되면 그만큼의 연산과 메모리의 차지는 어쩔 수가 없습니다. 이런 문제들로 인해 좀 더 효율적인 객체의 사용을 위해 객체 풀(Object Pool) 을 구성하여 사용한다던가 하는 방법을 고민하게 되죠.
본 포스트에서는 객체 풀에 대해서 설명하지는 않겠습니다. 위에 링크로 걸어놓은 영구기님의 포스트를 참고하시도록 하시고요, 이번 포스트에서 제가 설명하고자 하는 것은 new 키워드를 사용하지 않고서도 사용할 수 있는 타입들에 대한 사용방법입니다.
데이터형태는 아래와 같이 2가지의 데이터형이 존재합니다.
Primitive Data Type : Boolean, int, uint, Null, Number, String, void Complex Data Type : Object, Array, Date, Error, Function, RegExp, XML, XMLList
기본적인 데이터 형태(Primitive Date Type)의 변수선언시에는 물론 new 키워드는 사용하지 않습니다. 하지만 사용하지 못한다는 것은 아닙니다.
문자열을 저장할 때에 String 를 사용하게 됩니다. 이 String 형 변수는 다음과 같이 선언하게 됩니다.
하지만 아래와 같이 new String() 이라고 할 수도 있습니다.
int, uint, Number, Boolean 도 마찬가지로 new 키워드를 이용하여 변수에 할당해줄 수 있습니다. 허나 그렇게 사용하지는 마십시오. 기본적인 데이터 형태의 변수는 new 키워드를 사용하지 않아도 메모리가 할당되게 됩니다. 게다가 더 빠르고 간편합니다.
그래도 확인하고 넘어가는 차원에서 Number 형태의 변수의 할당에 대해 살짝 실험해보도록 하겠습니다. 아래의 코드를 보시면 Number 변수를 할당시에 new Number()를 사용하는 것과 직접 값을 입력하는 것에 대해서 속도를 비교해보고 있습니다. new 키워드를 사용하지 않는 것이 더 간편합니다. 그 아래에는 실제 결과물입니다. 테스트 버튼을 클릭하셔서 테스트 해보시기 바랍니다.
그렇다면 보다 복잡한 데이터 형태(Complex Data Type)의 변수를 선언시에는 new 키워드를 어떻게 쓰지 말라는 말일까요?
가장 먼저 많이 사용하는 Array에 대해서 말씀드려보겠습니다. 우선 Array를 선언시에 아래와 같이 선언할 수 있습니다.
이전 포스트에 살짝 언급하였습니다만, Array의 경우는 [] 를 이용하여 새로운 Array를 할당할 수 있습니다.
이와 비슷하게 Object를 할당할 때에도 new Object() 대신에 {} 를 이용하여 새로운 Object 할당이 가능합니다.
아래와 같은 선언을 다른 예제 소스코드에서 흔히 보셨을겁니다.
위에서 설명드린 것과 같이 Array 를 할당시에 [] 를 이용하고 Array 내부의 값을 {}를 이용하여 Object 형태로 정의하였습니다.
만약 [], {} 없이 선언하려고 한다면 아래와 같이 하여야할 것입니다. (물론 이렇게 사용할 일은 거의 없죠. 매우 극단적인 예랄까요? )
RegExp 같은 경우도 new 키워드를 사용하지 않고 선언 가능합니다.
XML 도 마찬가지입니다. 아래와 같이 흔히 사용하시고 있죠?
2번째 라인에 있는 것처럼 사용하실 일은 없을 듯합니다. 물론 String 형태의 XML 데이터라면 XML 로 변환하려면 2번째 라인처럼 해야겠죠.
마지막으로 위에서 말씀드린 Array와 Object 의 new 키워드 사용 유무에 대한 속도차 테스트를 해보고 마무리 짓겠습니다.
(RegExp 는 속도차가 거의 없어서 생략하였고, XML은 쓸일이 없을 것 같아 생략하였습니다. ㅎ)
아래는 Array를 테스트한 코드입니다.
아래는 Object를 테스트한 코드입니다.
뭐 결론은 new Array() 대신에 [], new Object() 대신에 {} 를 사용하자는 것입니다. ;)
긴 글 읽어주셔서 감사합니다. ;) 다 읽으신 후에는 덧글 하나 써주시는 센스!!
제가 리뷰하려고 하는 기술문서는 오창훈님께서 작성하신 'Flex와 Flash간의 파라미터 주고 받기' 라는 제목의 기술문서입니다. (이 글을 읽지 않으신 분께서는 링크를 클릭하셔서 우선 기술문서를 읽으신 후 제 포스트를 읽으시면 도움이 되실 것이라 생각됩니다. ) 위 기술문서에서는 swf 파일끼리의 파라미터의 전달에 대해서 다루고 있습니다. 크게 2가지 관점에서 이야기를 전개하고 있는데요, 해당 그림을 인용하자면 아래와 같습니다.
1. swf에서 다른 swf파일을 로드하는 경우
2. 서로 다른 영역에서 파라미터를 공유해야 하는 경우
위의 문서에는 '1. swf에서 다른 swf파일을 로드하는 경우' 에서
url 을 통한 데이터 전달 (파라미터)
ApplicationDomain
'2. 서로 다른 영역에서 파라미터를 공유해야 하는 경우' 에서는
ExternalInterface를 이용하는 방법
LocalConnection을 이용하는 방법
들을 알아보고 있습니다. 이미 완성된 기술문서인만큼 서로간의 파라미터 주고 받기에 대해서는 더할나위 없이 탄탄한 내용이라 할 수 있겠습니다. 처음의 예를 들어주신 URL 뒤에 파라미터를 넣는 방법은 아주 유용한 방법입니다. swf 의 상호간의 파라미터전달 뿐만이 아니라 저 같은 경우에는 WebService나 HTTPService를 사용하는 Flex 어플에서 접속해야 할 서버주소를 파라미터를 통해서 지정하는 방법을 주로 쓰고 있습니다. 이 때 장점은 코드 내에 서버접속 주소를 하드코딩하지 않아도 된다는 장점이 있죠.
이 리뷰를 쓰게된 이유는 기술문서에서 언급하고 있지는 않지만 Flex에서 swf 파일을 로드한 경우 간편하게 swf에 접근할 수 있는 방법이 있기에 그 것을 언급하기 위함입니다. (물론 물질에 눈이 멀어서라는 이유도...) Flex에서 swf 를 SWFLoader를 통해 로드시, 해당 swf 가 ActionScript 3.0 으로 제작된 것이면 간편하게 SWFLoader 객체의 content 속성을 통해서 Flash 의 경우 MovieClip, Flex 의 경우 SystemManager형태로 접근이 가능합니다.
Flash와 Flex 두 경우 모두 소개해보고자 합니다. 로드되는 swf 파일들은 동일하게 아래와 같이 간단하게 메소드를 제공하고 있습니다.
위의 코드에서 보이시는 myImage 라는 것은 Flex 의 경우 Image 객체, Flash 의 경우 MovieClip의 인스턴스명입니다. iconVisual 라는 속성을 통해 현재 myImage 가 visible 상태를 제어할 수 있게 됩니다. 위의 swf 를 로드하는 예제코드는 아래와 같습니다.
실제 결과물을 보시려면 이미지를 클릭하여주세요.
swf 경로명 관련, 티스토리에 직접 업로드가 힘들어 링크를 걸었습니다.
위의 코드에서 보실 수 있 듯, Flex 에서 만든 swf 는 SystemManager 로 접근하게 되어 SystemManager 의 application을 불러온 swf 명으로 캐스팅 하여 해당 메소드에 접근하시면 되겠습니다. Flash 의 경우는 MovieClip 형태로 들어오게 됩니다. 직접 메소드를 호출하셔도 됩니다.
물론 메소드를 호출하고 있는 예제입니다만, 각 객체들을 직접 접근하시는 것도 가능합니다. 다만, 다른 개발자와 협업이 이루어져야 된다면 특정 메소드를 구현하기로 사전에 정해놓고 그대로 사용하는게 더욱 좋겠죠? ;)
여기서 살짝 짚고 넘어가야 되는 부분은 swf가 SWFLoader에 embed 되어있는 경우는 위의 방법대로는 사용이 안된다는 것입니다. (코드를 확인해보세요. embed 안되어있죠?) embed 시에는 MovieClipLoaderAsset 형태로 들어있기때문에 위의 방법으로 접근이 불가합니다. embed시에는 어떻게 해야되는지는 잘 모르겠네요 ;^(
안타깝게도 AS2.0 으로 제작된 swf 또한 위와 같은 방법으로 접근이 불가합니다. AS 3.0 부터는 기존의 AS1.0 및 AS2.0에서 사용되던 AVM(Actionscript Virtual Machine) 과는 다른 AVM 을 사용하고 있습니다. 이전버전의 AVM을 AVM1, AS3.0 이 실행되는 AVM은 AVM2 이라고 명명합니다. (물론 Flash Player 9 버전 이후부터는 AVM1, AVM2 가 둘다 포함되어 있습니다.) AS 1.0 이나 AS 2.0으로 제작된 swf 파일의 경우 Flex(AS 3.0) 에서 로드될 경우 AVM1Movie이라는 이름의 객체로 할당이 되게 되는데요, AVM1Movie 객체와 AVM2 객체 간에 호환성(메서드 호출 또는 매개 변수 사용 등)이 없기때문에, 접근이 불가한 것이죠.
이럴때에 기술문서에서 설명하여주신 LocalConnection을 사용하시면 되겠습니다. LocalConnection에 대해서는 기술문서에 충분히 자세히 설명하고 있으니 더 이상 언급은 하지 않겠습니다. ;)
또 다른 방법도 있는데요, Flash Interface라는 것이 있습니다. 저도 검색하여 찾은 것이라 자세한 내용은 패스~^^;
ps. 코드가 필요하신 분은 위의 swf 에서 마우스 우클릭하셔서 View Source 하시면 다운로드 하실 수 있습니다 ;^)
RSS FEED![[31가지 사용자 경험 시나리오로 배우는] 실전 UX 디자인](https://t1.daumcdn.net/tistoryfile/fs14/31_tistory_2009_04_15_09_59_49e531858a1e9?original)
