AIR 에서 이 속성을 사용하게 되면 그냥 무시되어버린다.

For content running in Adobe AIR, quality can be set to StageQuality.BEST or StageQuality.HIGH (and the default value is StageQuality.HIGH). Attempting to set it to another value has no effect (and the property remains unchanged).

For content running in Adobe AIR, setting the quality property of one Stage object changes the rendering quality for all Stage objects (used by different NativeWindow objects).

- from  Flash CS4 Professional ActionScript 3.0 Language Reference

물론 AIR 사용 목적이 과도한 비트뱁 연산을 주로 사용한 비쥬얼적인 요소의 표현이 아닌 desktop application 의 목적이 강한지라 원래의 의도(?) 대로 사용한다면 별다른 아쉬움이 없을 것이다.

하지만, 나와 같이 actionscript 를 visualization 도구로 사용하는 개발자는 아쉬움이 상당히 클것이다.  플래시 컨텐츠를  desktop application 범위로서 좀더 다듬고 싶은 생각이 들어 AIR 로 접근했지만 위 문제로 접어야만 했다.

AIR 가 기본적으로 다중 window 를 지원하여 일괄적인 stage.quality 를 조정할려고 강제로 위 기능을 막아놓은것 같은 생각이 들지만 굳이 위 기능을 지원 안했어야만 했는지는 의문이 풀리진 않는다.

AIR 2.0 beta 도 지원하지 않는다..아쉽다.

작업 환경 조합으로는  Flash IDE + Eclipse(FDT) , Flash IDE  + Flashdevelop 과 같은 경우의 조합으로 많이 사용하는데 이런 외부 에디터를 사용할 경우 자동으로 syntax 를 사전에 체크해줘 compile 타임에 발생할 수 있는 코드의 문제점을 알아차릴 수 있다. 하지만 compile 을 위해 Flash IDE 와 외부에디터의 창을 이러저리 왔다갔다 하거나 compile 을 기다리는 시간 등,  compile 전체에 소모되는 시간이 생각보다 길다라고 느껴질 때가 있을것이다. 특히 수많은 클래스의 사용으로 더욱 그 시간이 길어질 때 더할 것이다. 그래서 이럴경우 compile 시간을 대폭(?) 줄일 수 있는 간단한 tip 하나를 소개할까 한다.

Flash IDE 에서 File -ublish Settings… – Flash Tab – Settings…  를 실행하면 위와 같은 화면을 볼 수 있을것이다. 위 radio button 중 Warnings Mode 가 기본적으로는 체크되어있는데 이를 해제하자. Warnings Mode 는 As2.0 코드에서 As3.0 코드로 업데이트할때 발생할 수도 있는 Migration issue 를 리포팅해주는 기능이다.

따라서 체크를 해제하더라도 특별히 문제될건 없다. 이 기능을 해제하게 되면 컴파일 시간이 몰라볼 정도로 빨라지게 된다. 물론 영상이나 폰트를 임베드해서 컴파일이 오래걸리는 경우는 해당사항이 없다.  많은  클래스 파일을 사용하는 컨텐츠일 수록 효과가 크다.

quad core  , ram 4 GB , AS file 60개 정도의 환경으로 테스트 해본 결과 Warnings  Mode 를 체크를 했을 경우 16 sec 정도 걸리던 시간이 해제했을 경우에는 4 sec 정도로 4배이상 시간이 빨라졌다. 특별히 compile 안정성에 문제가 되는것이 아닌것 같으니 Flash IDE 를 사용하면서 class 를 많이 구성하여 사용하는 사람이라면 compile 에 걸리는 시간을 많이 줄일 수 있을 것이다.

스킨을 나름대로 편집하여 사용하는 바람에 이전에는 버전업이 될때 적절하게 이전할 수 없어 도저히 기존상태에서는 업그레이드를 할 수 없었다.  기존 호스팅 서비스도 불안하여 이번기회에 도메인 기관이전 하였고, 호스팅업체도 wordpress 를 지원하는 곳으로 옮겼다.

전세계 설치형 블로그의 90% 이상을 점유한 블로그답게 수많은 플러그인과 스킨들이 참 맘에 들었다.

자료는 대부분 기존 블로그 내용을 살려 옮겨왔고 기존 링크는 아마 상당히 바뀌었을 것이다.

새롭게 블로그를 구성한 만큼 알찬내용으로 채워나갈 생각이다.

다시말해 진행하려는 프로젝트 저장소를 생성하고 그 저장소에 Papervision 이라든지 Away3D 와 같은 외부 저장소의 소스를 연결할 수 있다는 의미이다. 이렇게 되면 현재 저장소에 외부 오픈소스가 귀속되어 실제 버전관리가 이루어지지 않는 맹점을 해결할 수 있다.

서브버전 디렉토리 속성중에 svn:externals 이라는 것이 있는데 이것을 이용하면 현재 저장소에 다른 저장소의 내용을 포함시킬 수가 있다.

위와 같이 외부저장소에서 가져온 라이브러리는 독립적인 버전관리가 이루어지며 한 저장소 안에서 여러개의 서로다른 저장소의 라이브러리를 가져와 연결할 수 있다.

아래 설명은 eclipse 기반의 서브버전 플러그인인 Subclipse 를 작업기준으로 한다.
우선 SVN 프로젝트를 생성하고 속성을 설정하고자 하는 폴더에서 마우스 우클릭을 하여
아래와 같이 Team –> Set Property… 메뉴를 클릭한다.

그러면 다음과 같은 svn 속성 설정창이 뜨는데  Property name 으로 svn:externals 을 선택하고  Property content (value)값을 다음과 같은 정의로 입력해준다.

svn:externals [저장할 디렉토리](-r 리비전번호)[외부저장소의 URL]

lib/pv -r 873 http://papervision3d.googlecode.com/svn/trunk/as3/turnk/src

Property content (value) 정의는 크게 두부분으로 구성되는데 처음부분은 외부저장소 파일이 저장될 프로젝트의 디렉토리 이름이고 두번째는 외부저장소의 URL 로 이루어진다. 그리고 외부저장소에서 원하는 리비전번호의 파일을 제한적으로 연결할 수 있는데 이는 외부저장소의 뜻하지 않은 변경사항에 현재 적용하고 있는 프로젝트와의 충돌이나 오류를 막아준다. 이는 옵션사항이니 항상 최신버전을 가져오려면 생략하면 된다. 또한 여러개의 저장소를 가져올 경우 위와 같은 형식으로 각각의 다른 라인으로 작성하면 현재 프로젝트에서 여러개의 서로다른 외부저장소를 연결하여 사용할 수 있다.

입력이 끝났으면 업데이트를 실행해보자. 그러면 외부저장소의 파일들을 프로젝트내로 가져올것이다. 그리고 변경사항에 대해 커밋을 한다.
여기서 중요한 사실은, 커밋한다고 해서 현재 프로젝트에서 업데이트 되었던 외부저장소의 파일들이 저장소에 모두 커밋되는것이 아니다. 저장소를 확인해보면 알 수 있듯이 서버상에는 svn 속성값만 변경되었을 뿐 어떠한 외부저장소의 폴더가 반영된 것을 볼 수 없을 것이다.

또한, 현재 프로젝트에서 외부저장소를 포함한 모든 작업파일에 대한 변경사항을 커밋할 때 만약 외부 저장소의 파일을 직접 변경했다고 하더라도 자동으로 외부저장소의 파일을 커밋하지 않는다는 것이다. 외부저장소의 변경을 커밋하고 싶으면 해당 외부디렉토리로 직접가서 커밋을 직접해줘야한다.

기존 Samsung Mobile Ultra 시리즈의 통합 플랫폼사이트로 여러개의 사이트를 통합할 수 있는 사이트의 구조가 필요했다. 각기 다른 나라 다른회사에서 제작한 사이트를 통합한다는 것이 여간 힘든게 아니였다. 또한 플랫폼인 만큼 모든 이미지나 텍스트 정보를 모듈화 시켜야하는 것도 상당한 부담이였다. 각 오브젝트간의 연관성있는 움직임, 그리고 유기체적인 움직임을 표현하고자 최대한 공을 들였다. 개인적으로 가장 애착이 가는 프로젝트 중 하나이다.

2007.6

Samsung Mobile – Ultra Platform

Project manager : 김희선
Planning : 김희선,김상미
Visual / UI Design : 박미연,이정인
Interaction Design : 김기정, 김대우,김정빈

http://samsungmobile.dstrict.com/test_site/platform/en/platform/

AS3.0 부터는 AVM2 라고 하는 성능이 대폭개선된 가상머신을 도입했다. 이전의 가상머신은 AVM1 이라고 하여 AS1.0 또는 AS2.0 이 실행될 수 있는 환경을 말한다.
이런 기본적인 환경의 차이로 인해 기본적으로 AVM1 과 AVM2 무비사이간의 어떠한 커뮤니케이션이 가능하지 않다. 물론 LocalConnection 을 사용하면 가능하다.

단지, AVM2 에서 AVM1 을 로드하여 어떠한 cross-scripting 없이 사용한다면 로드한다는 것 자체에 별다는 이슈가 없어야 할텐데 실제적으로는 몇가지 문제가 발행한다.

만약에 AVM2 기반에서 AVM1 의 파일을 로드해서 사용했을 경우 일반적으로는 별 이상없이 작동한다. 하지만 AVM1 파일의 depth 가 커지면 커질수록 다시말해 AVM1 파일의 구조가 서로다른 로더에 의해 여러개의 구조로 이루어졌을경우  이상하게도 이 AVM1 파일들간의 인스턴스 구조가 변경되는 문제가 발생한다. 이는 여러 다른 플래시 개발자에게도 발생한 현상이다.

이러한 결과로  로드한 무비가 제대로 제어가 되지않거나 unload 가 되지 않는 현상이 발생한다.

아직까지 원인이 무엇인지는 찾지는 못했지만 약간의 팁으로 이런 위기상황를 극복할 수 있다.

첫째로, AVM1 컨텐츠들 간에서 다른 AVM1 컨텐츠를 로드해서 제어할때는 반드시 새로운 무비클립을 동적으로 생성하여 로드를 하고 언로드할 경우에는 remove 를 한다.

둘째로, 로드를 하는 AVM2 에서는 로더를 DisplayContainer 에 직접 붙이지 말고 로더의 컨텐츠(loader.content)를 사용하여 추가한다.

상대적으로 대역폭이 좋지않은 해외런칭을 기준으로 작업하다보니 어쩔수 없는  비디오압축으로 인해 영상의 화질이 저하되는 것이 상당히 아쉬운 부분이였다.

시간이 지날수록 점점 더 웹 시장이 변화하는 것 같다.
대부분의 글로벌 기업들이 단발성 온라인 프로모션이 아닌 전체적인 큰 틀을 가지고 온라인 마케팅을 진행하는 방향으로 움직여가고 있다.

온라인이 이젠 단지 웹사이트 제작에서 그치는 것이 아니라 앞으로는 디지털 브랜딩 컨텐츠로서 보다 적극적으로 온라인을 활용할 것 같다.
적어도 오프라인 컨텐츠와  온라인 컨텐츠를 같은 맥락으로 이해해야 하는데……
세상이 너무 빨리 변한다.
과연 내가 제대로 따라가고 있는건지 모르겠다.

Samsung Mobile – Your music

Project manager : 김희선
Planning : 김희선,김상미
Visual / UI Design : 박미연,변수웅, 김기한,이정인,이지혜
Interaction Design : 김기정, 김대우,김정빈
Movie : 박상화, 이동진, 곽재도,백수진
Illustration : 김요한, 문도영

http://www.samsungmobile.com/promotion/yourmusic/

*Award

FWA site of the day (2008.1.16)

CYON idea house ……… 벌써 3년전의 프로젝트다. 당시에 팝업창을 이용한 사이트가 눈에 많이 띄었지만 아마 그 당시에 가장 많은 팝업창을 띄운걸로 기억난다.
웹환경에 바뀌었는지 지금 다시 보니깐 제대로 작동이 안되는 부분이 보인다.
멋도 모르는 신입시절에 되는지 안되는지도 모르고 시작했던 프로젝트였는데….지금와서 생각해보면 모르면 겁이 없다는 말이 새삼 떠오른다… 물론 지금의 내 모습을 있게한 소중한 프로젝트라고 생각한다. 그때는 몰랐는데 지금보니 이런저런 수상을 많이 한것 같다. ^^

2005.6

http://www.cyon.co.kr/good/popup/cyonidea/index.jsp (korean)
http://www.cyon.co.kr/good/popup/cyonidea/en/index.jsp (english)

*Award

FWA site of the day (2005.8.3)

2005 New York festivals : Interactive & Alternative Media Portable Electronics
뉴욕광고제 인터랙티브 어워드 휴대용전자기기부분 동상
http://www.newyorkfestivals.com/main.taf?erube_fh=nyf&nyf.submit.WinnerDetail=true&nyf.WinnerItemID=264031

2005 London International Awards : Interactive Media Electronics Finalists
런던 국제광고제 인터랙티브부분 입선
http://www.liaawards.com/2005liaa/finalists/finalists/interactive/i10.html

*Articles
http://www.breaknews.com/new/sub_read.html?uid=28487&section=section5

위 문제의 대한 완벽한 해결방안은 현재로서는 없다. 하지만 html 페이지와 같은 텍스트 기반의 인덱싱 수준을 기대하기는 어렵지만 어느 정도 대체할 만한 방법론적 접근이 이루어지고 있다.
그 중에 가장 주목할 만한 방법은 바로 flash 페이지와 함께 메인 html 컨텐츠(primary HTML)를 사용하는 방법이다. 이것은 flash를 알지 못하는 검색엔진이나 올바른 환경을 가지지 못한 사용자의 접근성에 있어서도 효율적인 방법이다.

이를 위해서는  Flash embed source 로 많이 사용하고 있는 SWFObject 와 SWFAddress가 사용될 수 있다. SWFObject 는 Javascript 를 사용하여 적절한 flash player를 확인하고  DIV tag 의 내용을 flash content로 교체하여 임베드 할 수 있게 도와주는 오픈소스 코드로써 간단한 방법으로 flash 를 임베드할 수 있도록 많은 기능들을 제공하고 있어 플래시 개발자들에게 널리 알려져있다.
그리고 SWFAddress는 flash 사이트 상에서 deep linking 을 제공하는 스크립트로 각 링크마다 고유의 페이지 url을 가질수 있으며 따라서, 웹브라우저에서 Back,Forward 기능을 사용하여 플래시사이트를 제작할 수 있다.

아래코드는 프레임기반의 간단한 네비게이션 메뉴를 SEO를 고려하여 제작한 샘플이다.

<HTML sample code>

<script type=”text/javascript” src=”./js/swfobject.js”></script>
<script type=”text/javascript” src=”./js/swfaddress.js”></script>
</head>
<body>

<!–primary content, for non Flash visitors–>
<div id=”flashcontent”>
<p><a href=”index.html#/menuBtn1″>menu1 content</a></p>
<p><a href=”index.html#/menuBtn2″>menu2 content</a></p>
<p><a href=”index.html#/menuBtn3″>menu3 content</a></p>
<p><a href=”index.html#/menuBtn4″>menu4 content</a></p>
<p><a href=”index.html#/menuBtn5″>menu5 content</a></p>
</div>

<script type=”text/javascript”>
var so= new SWFObject(“seo_flash.swf”,”flash”, “300″, “50″, “9″, “#ffffff”);
so.write(“flashcontent”);
</script>
<noscript>
This content requires  a browser with JavaScript enabled.
</noscript>

위코드에서 div 태그부분을 보자.
swfobject 에서 div 태그는 해당 flash player 가 존재하지 않거나  ActiveX 가 활성화되지 않을경우 화면에 보여지는 내용이다. 알맞는 환경이 갖춰졌을 경우 div 태그안의 내용은 flash 파일로 대체되는 것이다. 플래시 컨텐츠가 보인다면 이 정보는 사용자에게 보여지지 않는다. 하지만 검색엔진에는 이 정보가 노출되는 것이다.
div 태그 안에는 flash 네비게이션 각 메뉴의 링크와 텍스트 정보가 포함되어있다. 그리고 앵커를 이용한 swfaddress 코드의 사용으로 flash 내부의 각각의 메뉴에 독립적인 url 을 생성해 주었다.
따라서, div 태그를 통한 외부링크도 실제적으로 사용가능하다. 다시말해, 검색엔진의 인뎅싱 결과로 생성된 링크가 실제 swf 파일 각각의 메뉴에 일대일대응으로 링크가 가능하다는 의미이다.

[LEMBEDC|http://kimkijeung.com/upload/seo/sample.swf|300|50|N]

<flash sample code>

function handleChange(event:SWFAddressEvent) :void{
var path:String = event.path;
gotoAndStop(‘$’ + path);
SWFAddress.setTitle(path);
}

function onClick(event:MouseEvent):void{
var target:MovieClip=event.currentTarget as MovieClip;
SWFAddress.setValue(“/”+target.name+”/”);
}

for(var i:int=1 ; i<=5 ; i++){
var buttonClip:MovieClip=this.getChildByName(“menuBtn”+i) as MovieClip;
buttonClip.buttonMode=true;
buttonClip.addEventListener(MouseEvent.CLICK,onClick);
}

SWFAddress.addEventListener(SWFAddressEvent.CHANGE, handleChange);

위와 같은 방법으로 컨텐츠를 구성한다면 플래시 안의 컨텐츠 내용을 검색엔진에 노출할 수 있을 것이다. 하지만 위 예제는 플래시로 구현할 수 있는 가장 간단한 형태로 실제 사이트 제작시 위와같이 단일한 링크 구성으로 이루어지는 경우는 거의 없을 것이다. 대부분 사용자의 메뉴클릭사이 마다 무수히 많은 인터랙션이 존재하고 시간의 흐름에 의한 에니메이션이 존재한다.
따라서,독립적인 메뉴의 링크를 통해 접속하는 경우 기존의 해당사이트와 단절된 느낌을 지울수는 없을 것이다. 이는 플래시 개발자가 좀더 고민해 보아야 할 문제이다.

download sample files…

reference from article below
-How to SEO Flash
(http://www.jehochman.com/articles/seo-friendly-flash.shtml)
-How Google crawls my site
(http://www.google.com/support/webmasters/bin/topic.py?topic=8843&hl=en)
-A modern approach to Flash SEO
(http://blog.deconcept.com/2006/03/13/modern-approach-flash-seo/)
-SWFObject
(http://blog.deconcept.com/category/swfobject/)
-SWFAddress
(http://www.asual.com/swfaddress/)

물론 SEO 의 본래 목적은 마케팅 목적이다. 우리나라 포털들의 검색엔진은 대부분이 영리를 목적으로 서비스를 하기 때문에 아무리 사이트 개발자들이 SEO 를 충실히 따른다 해도 검색엔진 상위에 랭크될 수 없다. 여기서 다루는 것은 비영리를 목적으로 하는 검색엔진 , 다시말해 특별한 광고료를 지불하지 않아도 검색엔진에 노출되는 google 을 대표적인 모델로 삼고 글을 쓸 것이다.
물론 구글도 sponsored link 라고 하여 유료광고가 최상단에 등장하긴하지만 그것은 논외로 하겠다.
전세계 검색엔진의 거의 60%를 점유하고 있는 구글에서만 제대로 검색된다면 다른 검색엔진에서도 같은 결과를 얻을 수 있을 것이다.

How Search Engines work
검색엔진은 스파이더(spider)라고 하는 로봇들로 하여금 전세계 웹페이지를 돌아다니게 하면서 페이지의 컨텐츠를 읽고 분석하여 데이터베이스에 저장한다. 이를 인덱싱(indexing) 라고 하는데, 스파이더가 페이지의 데이타를 제대로 읽지 못하면 그 페이지는 검색엔진 색인에서 제외되는 것이다.

스파이더가 페이지의 데이타를 분석하는 기준은 크게 다음과 같이 정리할 수 있다.
– 해당페이지가 무엇에 관한 내용인가? (키워드의 반복횟수)
- 페이지에서 키워드 위치 (페이지 상단에 있는것이 더 좋은 랭킹포인트를 얻을 수 있음)
- 키워드가 어떻게 표현되어있는가? (대소문자,볼드체와 같은 스타일)
- 해당페이지와 연결된 링크는 어떤것이며 그 링크들의 중요도는 어떠한가?

위의 사항들이 가장 기본적인 것이지만 검색엔진이 제대로 크롤링을 할 수 없는 수많은 문제점들이 웹상에는 존재한다.
그 문제점들의 대표적인 것이 안타깝게도 flash 컨텐츠 이다. flash 컨텐츠에 대한 구글의 인덱싱 수준은 상당히 실망스런 수준이다. 전세계 수많은 웹사이트를이 flash로 제작되고 있고 그에 대한 데이타의 양도 상대적으로 어머어마하게 많아지고 있다. 하지만 검색엔진은 flash 컨텐츠 내부에 있는 텍스트나 링크정보를 가져오지 못한다. 할 수 있더라도 아주 미미한 수준이다. 아마도 가까운 미래에 해결 될 사항은 아닌것 같다. flash 컨텐츠의 SEO 대해서는 다음 포스트에서 더 자세히 살펴볼 것이다.

- 구글에서는 사이트 URL 파라미터로 session ID 를 사용하는것이 스파이더가 인덱싱을 할 수 없게 만드는 것이라고  경고하고 있다.

- 그리고 너무 복잡한 사이트 구조도 문제가 있다. 단방향 사이트 폴더 구조일 수록 스파이더에게  좀더 많은 페이지를 인덱싱할 수 있는 기회를 제공하게 되는데 되도록이면 폴더깊이는 3~5정도를 유지하는것이 가장 좋다. 구글스파이더는 6개의 폴더를 넘에가게 되면 잘못된 링크를 가져오게 되거나 아예 인덱싱을 안하는 경우가 있다.

- Redirect 는 되로록이면 피하는 것이 좋은데 불가피하게 사용할 경우 반드시 301 redirect 만을 사용해야한다. 302 redirect 를 사용할 경우 페널티를 받게 되어 랭킹포인트가 떨어지게 된다.

이외에도 robot.txt 파일의 설정으로 스파이더를 아예차단하는 경우, 자바스크립트나 복잡한 테이블그리고 그래픽이미지나 이미지 맵의 경우 페이지 자체를 인덱싱하지 못하는 경우가 있다.
상당수의 html 페이지는 주요컨텐츠 정보가 나오기 전에 자바스크립트코드나 css코드들로 꽉채워져 있는 경우가 있다. 150~200 라인 안쪽으로 해당페이지의 메인 키워드정보가 나와야지만 검색엔진의 랭킹포인트를 얻을 수가 있다. 따라서 자바스크립트코드나 css코드는 되도록이면 외부파일로 만들어 연결하고 그래픽이미지는 반드시 alt 속성을 제공하여 검색엔진에게 정보를 제공해야 할 것이다.

정리하면, SEO 를 위한 컨텐츠 작성방법은
1. 반드시 title 태그와 meta태그를 작성한다. 이것이 검색엔진의 랭킹포인트를 얻는 가장 중요한 방법중의 하나이다.
2. 적절한 키워드를 작성한다. H1 태그, 링크텍스트틀 포함하여 작성한다. 해당페이지의 링크가 많으면  많을수록 좋다. 단 링크는 정확한 정보를 제공해야할 것이다. 허위링크나 불필요한 키워드의 반복으로 인해 페널티를 부여받을경우 인덱싱에서 제외될 것이다.
3. 대체페이지의 작성. 플래시사이트의 경우 대체페이지로서 primary HTML 을 제작한다.

개인적으로 SEO 측면을 간과해서는 안된다는 점을 인지하고 있다. 하지만 이것이 주가 되어 혹시나 SEO 면에서 문제라고 할 수 있는 flash 컨텐츠를 사용하지 말자고 하는것은  주객전도라고 말하고 싶다. 사용자에게 보다 풍부한 UX 를 느끼게하는  이점이 SEO에 묻혀버리기에는 그 경험이 너무 큰 가치가 있다고 생각한다. 물론 너무 과도한 flash 컨텐츠의 사용은 지양해야겠지만 말이다.

다음 포스트에서는 flash 컨텐츠에서의  SEO 측면에 대해  자세히 살펴볼 것이다. 텍스트기반의 페이지의 인덱싱 수준은 아니지만 flash 를 사용하면서도 충분히 SEO 를 고려할 수 있는 방법론적 접근을 제시할 수 있을 것이다.

reference from article below
-How Google crawls my site
(http://www.google.com/support/webmasters/bin/topic.py?topic=8843&hl=en)
-A modern approach to Flash SEO
(http://blog.deconcept.com/2006/03/13/modern-approach-flash-seo/)