도제 시스템에 의한 학습의 기회라도 있었다면 그나마 운이 좋은 쪽이랄까요. 액션스크립트를 다루는 사람들의 출신성분중 대다수를 차지하는 디자이너 계통은 거의 대부분 독학으로 액션스크립트를 배우게 됩니다. 이래서야 제대로된 플래시 애플리케이션이 나올리가 없겠죠. 객체지향이라는 개념조차 피상적으로만 이해할 뿐, AS2.0이나 다를바 없이 메인타임라인에 코드 늘어놓기만 한참 하기 마련입니다. 도큐먼트 클래스를 사용할 수 있게 되고 자신이 직접 코딩한 클래스를 new 키워드로 객체 생성하여 사용할 수 있게 되기까지는 참으로 오랜 시간이 필요합니다.

특히, 다른 개발자와 협업을 해야 하거나, 유지보수를 위해 내가 개발한 코드를 다른 사람에게 넘겨 줘야 하는 경우라면 독학에 의한 프로그램적 구멍(?)이 더욱 눈에 띄게 됩니다.
이런 현상들은 여러가지 원인이 있겠지만, 결국 다른사람은 어떻게 코딩하는지 잘 모르기 때문에(나홀로 코딩) 생기는 것이라 할수 있습니다. 그렇다고 다짜고짜 플래시 동네의 유명한 누군가에게 가서 “공부 좀 하게 코드를 내놔라” 라고 할 수도 없는 노릇이고 말이죠.

이럴 때 좋은 참고자료가 되는 것이 구글코드검색 입니다.
구글코드검색으로 구글 코드의 프로젝트 호스팅을 통해 전세계 개발자들이 협업 또는 오픈소스 프로젝트를 진행하면서 공개한 코드를 검색해 볼 수 있습니다.

위의 이미지와 같이 검색창에 키워드와 한칸 띄고 lang:actionscript 를 추가해 넣으면 해당 키워드에 대한 액션스크립트 코드를 검색할 수 있습니다. 마우스 포인터가 가리키는 “고급코드검색“으로 들어가면, 위에서 한 것과 같은 프로그램 언어 설정이라던지, 라이센스, 패키지 등의 세부적인 설정과 함께 검색을 할 수 있습니다. 위의 스크린샷에 나온대로 검색하면 스트래티지 패턴(strategy pattern:전략패턴)에 관한 액션스크립트 클래스들이 검색되겠죠.

액션스크립트가 가장 위에 있죠? 알파벳 순서로 정렬되어 있기 때문인데, 스크롤을 하지 않아도 되서 편리합니다.

검색된 코드는 실무 프로젝트인 경우가 압도적으로 많으므로, 전체 프로젝트를 전반적으로 이해하지 않으면, 초보 개발자의 눈에는 이 클래스가 뭐하는 클래스인지 단번에 이해하기 어려운 점이 있기도 합니다만, 분명 다른 개발자의 코드를 참고할 수 있다는 것만으로 위안이 될 겁니다. ^^

또한 구글코드에서 검색되는 클래스들은 대부분 어느 수준 이상의 완성도가 보장되어 있습니다. 오픈소스로 공개되어 있는 코드들이기 때문에 공개하기 전 다른 개발자들이 제대로 사용할 수 있도록 자체 검증을 거치게 되기 때문입니다. 물론, 미완성이나 오작동하는 클래스도 간혹 존재합니다만, 이런 것을 가려서 참고를 하는 것은 역시나 사용자의 몫이 되겠죠.

* * *

보너스로 웹 브라우저의 검색도구에 구글코드검색을 추가하는 방법을 알아보겠습니다.

FireFox 의 검색 도구에 codesearch 추가하기

FireFox 에서는 간단히 애드온을 설치하기만 하면 됩니다.
https://addons.mozilla.org/ko/firefox/addon/46201

Internet Explorer 의 검색 공급자에 codesearch 추가하기

IE의 경우 검색 공급자 풀다운 메뉴를 눌러 “추가 검색 공급자 찾기…” 를 선택합니다.

이 페이지의 가장 아랫 부분에 있는 “나만의 검색 공급자 만들기“를 클릭합니다.

그런 후 나온 페이지에서 URL 입력에 액션스크립트 검색 설정을 포함한 검색 결과인 http://www.google.com/codesearch?hl=en&lr=&q=TEST+lang%3Aactionscript&sbtn=Search 를 입력하고, Name 에는 표시될 적당한 이름을 입력해 준 후, 검색 공급자 설치 버튼, 추가 버튼 클릭 하면 IE의 오른쪽 위의 검색공급자에 Google CodeSearch 가 추가됩니다.

ExternalInterface 를 이용해 JavaScript 를 호출할때 생긴 스크립트 에러

EditPlus 의 내장 브라우저는 IE 엔진을 사용해서 렌더링을 하죠. 현재 EditPlus 의 최신 버전인 3.11의 내장 브라우저는 IE8과는 매우 다르고 IE6은 아닌것 같으면서 IE7과도 약간 다른, 어느쪽에 가장 가깝느냐 하면 버전 7에 가깝고, 숫자로 표현하면 체감상 6.7정도 되는 렌더링 엔진입니다.^[01]

EditPlus 에서는 Ctrl + B 를 이용해서 브라우저 미리보기를 하면 위의 스크립트 에러창이 모달(modal)창으로 자동으로 뜨고, 실제 데스크탑에 설치된 IE8로 보면 왼쪽 아래에 노란색 삼각형 스크립트 에러 표시가 나는 상황입니다. 에러 메세지로 보아 ActionScript 에서도 흔하게 보는 null 객체 에러네요.

그럼 FF나 GC 에서는? 괜찮습니다. 이 에러는 IE 에서만 나오는 문제였고, IETester 로 확인한 결과 IE6, 7, 8 모두에서 동일하게 발견되었습니다.

한참동안 원인을 찾을 수가 없어 꽤 오랜 시간을 헤메다가^[02] , 다시 처음부터 되짚어가보자는 생각에 Flash IDE의 퍼블리싱 세팅(Ctrl + Shift + F12)에서 html 을 포함하여 퍼블리싱을 한 후, 새로 만든 html로 swf 을 보니 이번에는 ExternalInterface가 정상적으로 동작하는 겁니다.

기존 html 에 사용한 object , embed 코드와, 새로 만든 코드의 다른점을 살펴본 결과, 기존 html 코드에는 object 태그의 id 값을 주지 않은 것을 발견했습니다.

<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0" width="100%" height="100%" id="" align="middle">
	<param name="allowScriptAccess" value="sameDomain" />
	<param name="allowFullScreen" value="false" />
	<param name="movie" value="swf_app.swf" />
	<param name="quality" value="high" />
	<embed src="swf_app.swf" quality="high" width="100%" height="100%" name="" align="middle" allowScriptAccess="sameDomain" allowFullScreen="false" type="application/x-shockwave-flash" pluginspage="http://www.adobe.com/go/getflashplayer_kr" />
</object>

object 태그 속성중 height="100%" 다음에 보이는 id="" 의 공백문자가 보이시나요?
한편, 비 IE 계열 브라우저들이 사용하는 embed 태그에는 id 속성이 있어야 할 자리에 name 속성이 있는데요, FF나 GC 는 이렇게 name="" 속성이 공백이라도 ExternalInterface 가 동작하는데에는 전혀 문제가 없습니다. 실제로 object 의 id 속성과 embed 의 name 속성은 Flash IDE에서 퍼블리싱 했을 때, 그다지 의미 없어 보였던 swf 의 파일명이 기본값으로 입력되는것에 이런 이유도 포함되어 있었던 겁니다.

‘설마…’ 하면서 임의의 값을 넣었더니 허무하게도 정상적으로 동작합니다. 임의 값이란 정말 임의의 값입니다. 공백문자만 아니라면 아무 문자나 상관이 없습니다.

ExternalInterface 를 사용하지 않는다면 id 속성이 공백문자라도 swf 의 동작 자체는 문제가 생기지 않습니다. 결국 JavaScript 함수 호출을 하기 위해, swf 무비와 html 컨테이너 사이에서 함수 호출이 발생한 객체(swf)를 IE가 찾지 못해서 생기는 에러인 것이죠.

1. 실제로 이런 버전의 IE는 없지만, html의 표준화 표현 정도와, 여러 가지 렌더링 표현등을 고려해 봤을때 그정도 될것 같다는 의미 입니다.
2. 지금 기억을 더듬어 보면 몇시간 동안 원인을 못찾았던것 같습니다

워드프레스 사용자라면 누구나 다 아는 바로 왼쪽에서 마우스 포인터가 가리키는 저 이미지 버튼들이죠.

누르면 로딩바를 잠깐 보여주다가 아래와 같은 메세지를 보이며 파이어폭스가 죽어버립니다.

한글 환경에서 워드프레스를 사용하는 유저의 숫자도 적은데, 거기에 파이어폭스 에서만 생기는 문제를 한글 검색으로는 찾을수가 없어서 구글서치로 외국쪽을 찾아본 결과, 구글 기어스(Google Gears) 문제라는 정보를 얻게 되었습니다.

이 문제는 구글 기어스의 해당 사이트를 해제하는 것 만으로는 안되고, 플러그인을 비활성화 해야 해결 됩니다.

도구 –> 부가기능 –> 확장기능 에서 구글 기어스를 찾고 사용안함을 클릭 해준 후

파이어폭스를 다시 시작 하면 문제가 해결 됩니다.

구글 기어스 설치하고 워드프레스 대시보드 속도가 약간 빨라진 것 같아 괜찮다고 생각하고 있었는데, 사용하지 못하게 되서 아쉽게 됐군요.

이 문제는 워드프레스쪽과 구글에 노티스가 된것 같으니 기다려 보면 패치가 나올것 같습니다.