Adobe AIR / www.AS3.kr / ActionScript 3.0

Documents about swf, AVM2 and bit controls

wooyaggo — Thu, 21 Aug 2008 13:50:05 +0900

AVM2 Overview Document (pdf)
http://www.adobe.com/devnet/actionscript/articles/avm2overview.pdf

SWF File Format Specification (pdf)
http://www.adobe.com/devnet/swf/pdf/swf_file_format_spec_v9.pdf

Variable-length quantity
http://en.wikipedia.org/wiki/Variable_length_unsigned_integer

needs to decompile as file from swf file.

needs to recreate swf file too.

[AS3] Flash에서 Javascript 변수 가져오기 (without Javascript)

wooyaggo — Tue, 19 Aug 2008 15:36:00 +0900

Flash에서 Javascript의 변수를 가져오기 위한 방법은 보통 아래와 같습니다.

// in Javascript
<script type="text/javascript">
var str = "string value";

function getStr()
{
return str;
}
</script>

// in Flash
var str: String = ExternalInterface.call( "getStr" );

함수 일일이 만들기 귀찮죠.

아래와 같이 써봅시다.

// in Javascript
<script type="text/javascript">
var str = "string value";
</script>

// in Flash
var str: String = ExternalInterface.call( "eval", "str" );

어때요?

참 쉽죠?

그리고 이거 아세요?

숫자나 변수, 배열뿐만 아니라 Object도 전달된다는 사실?

// in Javascript
<script type="text/javascript">
var flashObject = {};
flashObject.a = "property a";
flashObject.b = 100;
flashObject.c = [ "c1", "c2", "c3" ];
</script>

// in Flash
var obj: Object = ExternalInterface.call( "eval", "flashObject" );

var prop: String;
for( prop in obj )
trace( prop + " : " + obj[ prop ] );
/*
c : c1,c2,c3
b : 100
a : property a
*/

참 쉽죠?

뜻 깊은 이미지 한장.

wooyaggo — Fri, 1 Aug 2008 15:56:31 +0900

AS 3.0 을 공부하면서

파일포맷에 대해서 알게 됐고

MP3 도 한번 뜯어보고

FLV 도 한번 뜯어보고

바이너리 기술에 대해서 틈 날때마다 이것저것 해보고 있었습니다.

예전 DMI 시절에 송기훈 팀장님이

SWF 내의 변수만 바꿔서 이미지 하나당 하나의 SWF 파일을 제너레이팅하던

그 기술을 보고

너무나 감탄하고 대단해보였습니다.

정말 저사람은 못하는게 없구나...

아 Flash 가 따라가기엔 C 언어는 너무 막강하구나...

나도 하고 싶다...

나도 하고 싶다...

나도 하고 싶다......

그때 그 기술력이 디자이너 출신이던 저한테는 너무나 부러웠습니다.

그래서 SWF 파일 안을 훔쳐보고 싶은 욕망이 언젠가부터

숙제처럼 남아있었고

시간 날때마다 틈 날때마다 해봐야지~ 해봐야지~ 하고 있었습니다.

그러기를 거의 2년이 지났네요.

그동안 파일 포맷에 대해서 공부도 많이 했고

바이너리 데이타에 대해서 SWF Lab 에서 세미나도 하게 됐고

이제는 나름 압축에 대한 지식도 쌓아가고 있습니다.

지금 보이는 저 이미지 한장은

제가 오늘 처음으로 swf 를 읽어들여서

그안에 있는 이미지를 뽑아낸것입니다.

어쩌면 남이 보면 별것 아닐 수도 있는 이미지 한장이지만

저한테 오랜 숙제처럼 남아있었고

그때 송기훈 팀장님을 보면서 가졌던 환상에 대한

도전이 먹혀들었다라는 보람,

디자이너 출신이던 내가 이만큼 노력을 많이 했었구나 라는 성취감,

머릿속으로만 떠오르던 아련한 아이디어가 손 끝에서 구현되었다는 짜릿함,

여러가지 기분이 들었습니다.

저 이미지는 앞으로 두고두고 보면서

자극제가 될거 같다라는 생각이 듭니다.

p.s) SecretFile 다음 어플리케이션으로 SecretPhoto 를 개발중입니다.

중요하거나 숨기고 싶은 이미지를 나만 볼 수 있는 이미지로 바꿔줍니다.

누구나 실행 할 수 있지만 열람은 나만이 가능한 어플리케이션이죠.

커밍 수운~

IE 를 떠날 수 있게 만든 FireFox 플러그인 모음

wooyaggo — Thu, 31 Jul 2008 09:52:30 +0900

FireBug

https://addons.mozilla.org/ko/firefox/addon/1843

추천 : ★★★★☆

현재 웹페이지의 HTML, Javascript, CSS 를 DOM 형식으로 보여주고

디버깅은 물론이고 즉시 수정해서 반영할 수 있다.

IE 에 dev-toolbar 가 있다면 FF에서는 FireBug 를 들 수 있겠습니다.

Ctrl + Tab

https://addons.mozilla.org/ko/firefox/addon/5244

추천 : ★★☆☆☆

웹개발자분들은 브라우져 창을 엄청 많이 띄워놓는데

그럴때 유용한 툴이다.

F4 를 누르면 현재 브라우져의 모든 탭을 Gird 형식으로 보여주고

필터링해서 볼 수도 있다.

웹페이지를 여러개 띄워놓고 테스팅할때 정말 좋은 툴이 되겠다.

HTTPFox

https://addons.mozilla.org/ko/firefox/addon/6647

추천 : ★★★★★

웹페이지의 트래픽 정보, 컨텐츠 내용,

Http Status 등을 볼 수 있다.

IE 에서 HTTPWatcher 를 쓰고 있다면

FireFox 에서도 똑같이 사용할 수 있다.

장점이라면 무료라는거?

웹페이지에서 Flash 로 네트워크 통신을 디버깅할때 필수라 하겠다.

FoxMarks

https://addons.mozilla.org/ko/firefox/addon/2410

추천 : ★★★☆☆

여러 컴퓨터에서 FF 를 사용할때

북마크를 서로 Sync 시켜주는 유용한 유틸이다.

All-in-One Gesture

https://addons.mozilla.org/ko/firefox/addon/12

추천 : ★★★★★

IE 의 알툴바를 떠올리면 된다.

솔직히 우클릭 드래그 모션이 너무 편해서 IE 를 떠나지 못했었다.

근데 우연찮게 살펴보다가

이게 있는것을 보고 지화자를 불렀다~!!

(솔직히 알툴바보다 훨 좋다.)

IE View

https://addons.mozilla.org/ko/firefox/addon/35

추천 : ★★★☆☆

우리나라는 Active-X 때문에 IE 가 꼭 필요하다.

이 플러그인은 링크나 북마크를 우클릭으로 IE 로 페이지를 띄울 수 있게 한다.

브라우져 일일이 열기 귀찮을때 정말 유용하다.

웹서핑은 FireFox 로 하다가 IE 를 켜야할때

우클릭으로 띄우면 끗~

플러그인 검색 및 다운로드 사이트

https://addons.mozilla.org/ko/firefox

언젠가부터 IE 를 떠나고 싶었는데

알툴바, 알패스, HttpWatcher 때문에 어쩔수 없이 쓰고 있었는데

이번에 이 플러그인들을 알게 되고 나서

기본 브라우져도 바꾸고

바탕화면에서 IE 아이콘을 지웠습니다. 잇힝~

솔직히 요즘 Ajax 로 개발되는 사이트나 블로그가 정말 많은데

안정성은 말할것도 없고

구글이나 블로깅은 정말 IE와 비교해서 너무 빠릅니다.

보다 편안한 웹브라우징을 위하여~~

[AS3] Integer.reverseBytes() of Java.

wooyaggo — Wed, 30 Jul 2008 13:52:07 +0900

public function reverseBytes( value: int ): int
{
 var num: int = ( ( value >>> 24 ) ) | ( ( value >> 8 ) & 0xFF00 ) | ( ( value << 8 ) & 0xFF0000 ) | ( ( value << 24 ) );

 return num;
}

Java 의 Integer.reverseBytes() 기능을 하는

ActionScript 3.0 버젼의 reverseBytes 입니다.

[AIR] 완성도 높은 어플리케이션을 만들어 보자.

wooyaggo — Fri, 25 Jul 2008 11:26:37 +0900

AIR 는 설치형 어플리케이션입니다.

이제 AIR 개발도 소프트웨어 개발이라고 감히 불러도 될것 같다는 개인적인 생각이 드네요.

그래서 실제 서비스에 필요한 완성도 높은 어플리케이션을 만들려면

어떤 디테일이 필요한지 한번 예를 들어보겠습니다.

1. Install Path.

내 어플리케이션이 어디에 설치가 될 것인지

분명하게 지정을 해줘야합니다.

단일 소프트웨어면 C:\Program Files\ 로 잡아야겠지만

저 같은 경우는 제 어플리케이션은 실험적인 것들이 많기 때문에

C:\Program Files\Wooyaggo Applications\ 폴더에 몰아 넣습니다.

프로그램 폴더도 패키지 처럼 용도와 목적에 맞게 구분되는거 더 편의성있지 않을까 싶네요^^

그리고 현재 설치된 폴더의 한단계 위 폴더를 검색하면

현재 설치되어 있는 어플리케이션의 목록도 알아볼 수 있으니까 나름 장점도 있을거 같습니다.

2. Icon.

AIR 에는 총 3가지 아이콘 종류가 있습니다.

- Application Icon

Application Icon 은 실행파일의 아이콘, 단축아이콘, Task Bar 에서의 아이콘,

타이틀 창의 아이콘으로 사용됩니다.

- SystemTray Icon

시스템 트레이 아이콘은 단순히 보여주기 용이 아니라

클릭 이벤트나 마우스 이벤트를 받을 수 있습니다.

특히 우클릭 메뉴를 따로 지정할 수 있기 때문에

보다 편리한 LUI를 위해서 가능하다면 꼭 신경쓰는 것이 좋습니다.

- File Icon

AIR 는 특정 파일에 대해서

기본 실행 프로그램으로 지정할 수 있습니다.

그렇기 때문에 지원하는 파일의 경우 설정된 아이콘으로 보여질 수 있죠.

보이는 예는 SecretFile 의 파일 포맷인 *.secret 의 파일 아이콘입니다.

3. Window Drag, Resize, Close, Minimize.

네이트온 메신져를 보면 이해가 쉽습니다.

대화창을 드래그 하고 싶을땐 상단을 잡아 끄는 행동을 하게 되고

창의 크기를 늘리고 싶으면 자연스럽게 테두리에 마우스를 가져가죠.

창을 닫고 싶을땐 우측 상단에 X 표시를 찾게 되고

끄지는 않지만 숨겨놓고 싶을땐 마찬가지로 우측 상단에서 _ 표시를 찾게 됩니다.

이 모든게 대부분의 유저들이 자연스러운 멘탈 모델을 따르는 것이라고 볼 수 있습니다.

이러한 자연스러운 멘탈 모델은 거스르지 않는게 좋은 UX 가 되겠죠.

하지만 NativeWindow.startDrag() 나 NativeApplication.exit(), NativeWindow.minimize()

등은 이미 쉽게 제공이 되고 있지만

정작 까다로운 부분은 Resize 부분입니다.

물론 NativeWindow.startResize( edgeOrCornet ) 라고 제공을 하지만

문제는 잡고 드래그할 영역을 만들어주고

Resize 에 맞게 재위치 시켜주는것이 까다롭습니다.

그래서 시간날때 꼭 컴퍼넌트화 시켜놓는것이 좋을 것 같습니다.

앞으로는 기본적으로 마우스의 커서를 기본 커서들로 바꿀 수 있다고 하니 더 쉬워질듯 합니다.

4. 마지막 위치, 창 크기를 기억해놓자.

창을 리사이즈 시키거나 드래그를 할 경우

다시 어플리케이션을 띄우면 예상하지 못한 위치에서 뜨게 될 경우

유저는 불편함을 느낄지도 모릅니다.

왠지 손에 익은 툴이 아니라 매번 포장지를 새로 뜯어 사용하는 기분이 들지도 모르죠.

AIR 에서는 EncryptedLocalStore 라는 static 클래스를 제공합니다.

하나의 어플리케이션당 기본으로 제공하는 저장 공간인데요.

"AIR Cookie"라고 부를 수 있겠습니다.

하지만 용량이 매우 크고 저장포맷이 ByteArray 이기 때문에

다루기는 쉽지 않지만 그만큼 활용할 수 있는 방법도 많고

가능성 또한 매우 무궁무진합니다.

로직은 아래와 같이 되겠죠.

- 초기화

1. EncryptedLocalStore 뒤져서 저장되어 있는 값 있는지 확인.

2-1. 있으면 초기값 적용하고 EncrpytedLocalStore 제거.

2-2. 없으면 기본값 적용.

- 어플리케이션 닫을때( NativeWindow.addEventListener( Event.CLOSE, function ) )

1. ByteArray 생성.

2. 창위치 저장.

3. 창크기 저장.

4. EncryptedLocalStore 에 저장.

이런식으로 구현되면 되겠습니다.

5. 우클릭 메뉴를 적극적으로 활용하자.

이부분은 강조하기 조금 불안한 부분인데

그 이유는 곧 AIR 새 버젼이 나오면

ContextMenu 와 NativeMenu 가 대폭 향상된다고 합니다.

지금은 단순히 String 형만 되지만

다양한 표현방법을 제공하고 많이 개선될거라고 하더군요.

머 어쨌든 길을 가는 방법이야 어쨌든 어떤 길이 있는지는 살펴봐야겠죠.

- NativeWindow.menu

이 메뉴는 Chrome 창 하단에 나오는 기본 메뉴입니다.

Chromless 가 아니라면 꼭 신경써야할 부분임에 틀림 없습니다.

- Right Menu.

this.stage.addEventListener( MouseEvent.RIGHT_CLICK, rightClickListener );

이벤트를 받아서

NativeMenu.display( stage, x, y );

로 표시해줄 수 있다.

- SystemTray Menu

InteractiveIcon.menu 속성을 이용하면

쉽게 우클릭메뉴를 설정할 수 있습니다.

위 5가지 디테일만 우리가 잘 생각해주면

기본적으로 완성도가 높은 어플리케이션으로 포장할 수 있을 것이다.

개발자적 도전정신은 매우 중요한 요소지만

실제 사용할 유저에게 GUI 뿐만이 아니라 경험이나 편의에 따른 LUI(Logical User Interface) 를 제공하는것도 무시할 수 없는 점일 것이다.

p.s) AIR 한달 넘게 못하고 있는 야꼬였습니다. -_ㅜ

Flex Builder 3.0 정품을 샀어요!!

wooyaggo — Wed, 23 Jul 2008 16:50:28 +0900

보헤형님의 도움으로

Flex Builder 를 구입하게 됐습니다.

어도비 제품은 총알이 되는대로 정품을 구입하기로 마음먹었던 터라

똘똘한 동생 케이가 정품을 산다길래 알아보고 같이 질러버렸습니다. ㄷㄷ

물건너 온 놈인지라 간지가 좔좔 흘렀습니다.

우측에 간지나게 Professional Edition 이라고 박혀있습니다!

패키지가 정말 간지가 좔좔~ (간지가 흐르고 있는거 보이시죠?)

누가 보면 정품 처음 산줄로 알겠지만

두번째입니다 -_-a

(첫번째는 디아블로 2 확팩 ;;)

종이가 조금 구겨져 있어서 속상했다능 T^T

사실 좀 건더기들이 많이 있을거라고 내심 기대했는데

가이드 문서 하나랑 DVD 케이스 하나 있었습니다.

케이스 궁금하시죠?

사진 나갑니다.

패키지에 비해서 약간 허전..

사진보다 실물이 조금더 이쁘장합니다. ㅋ

뒷면에 CD-Key 가 붙어있습니다. (소심해서 아예 찍지도 않았다능 ㄷㄷㄷ)

그럼 안에 뭐가 있는지 볼까용?

DVD 가 맞군요.

머... DVD 케이스안에는 DVD가 들어있겠죠;;

DVD도 참하게 생긴것이 일관성있는 디자인으로 앉아있더군요.

DVD 넣어봤더니

플렉스만 있을줄 알았는데

설치는 안해봤지만

BlazeDS 랑 LCDS 가 있더군요 ㅇ_ㅇ!!

솔직히 컴파일을 Flash 로 하기 때문에

코딩용으로 구입한거라 (게다가 회사에서는 요놈을 못쓴다능;;)

언제가 될진 모르겠지만

함 설치해봐야겠네요. 키힛

Flash 도 지르려고 맘 먹었는데

보헤형이 CS4 가 9월에 나온다고 해서

그때까지 기다리기로 했습니다.

나는야 정품유저 ㅇ_ㅇ)/

보너스로 보헤형의 센스있는 메세지.

Window 에서 JAVA ClassPath 설정하기

wooyaggo — Mon, 14 Jul 2008 11:54:07 +0900

내 컴퓨터 > 속성
또는
제어판 시스템 등록 정보

> 고급 > 환경 변수 > 시스템 변수 >

아래 두 변수가 이미 있다면 [편집], 없다면 [새로 만들기]

- JAVA_HOME : C:\Program Files\Java\jdk1.6.0_06

자바, JDK 가 설치되어 있는 폴더로 설정해줍니다. (이 변수는 사용자에 따라 적당히 수정해주세요)

- CLASSPATH : .;%JAVA_HOME%\lib\tools.jar

앞에 .; <- 요고 오타아닙니당. 쩜콜론 일케 있습니다.

이렇게 설정해주면

어느 폴더에서건 작업하고 java 나 javac 를 돌릴 수 있습니다.

from 케이.

Google 과 Adobe 의 Flash 검색 기술

wooyaggo — Tue, 8 Jul 2008 09:30:00 +0900

어도비 플래시 파일 검색 쉬워진다

어도비 플래시파일 검색, 어떻게 이뤄지나

Adobe 가 Google 에게 SWF 파일 검색을 할 수 있도록

기술 지원을 하고 있다고 한다.

물론 이와같은 기술의 확장은 환영받을만 하나

개인적으로 약간 몇가지 의문이 든다.

1. SWF 자체내에 유익한 정보를 가지고 있는 경우가 많을까?

Flash 가 많은 방면에 활용되고 있는건 분명하지만

SWF 자체에 유용한 Text 나 Image 등을 포함하고 있는 경우가 과연 얼마나 될까?

내가 그동안 만들어온 Flash 들은 대부분

스스로 어떤 고정된 URL 도 가지지 않도록 최대한 외부 통신에 맡기는 경우가 대부분이다.

이는 유지보수때문일 수도 있겠지만

Client 시스템에 중요한 정보가 담긴 컨텐츠가 남는다는게 아무래도 꺼림직해서이다.

한번 SWF 를 다운받으면 off-line 이 되더라도 언제든지 맘만 먹으면 Decompile 될 수 있기 때문이다.

2. 웹상에 올라간 SWF 는 무방비로 그대로 노출 되는 것인가?

위 기사에서 설명한 대로라면

검색엔진에 걸리는 웹상의 모든 SWF 들은

샅샅히 파헤쳐진다라는 이야기다.

물론 검색 엔진을 무시하는 robot.txt 도 있겠지만

일반 포털이나 블로그등에 올라가있는 SWF 들은

검색엔진에 의해서 분석이 될 수 있다라는 이야기가 될 수 있다.

머 어차피 악용할 것도 아닌데 머가 대수냐 라고 할 수도 있겠지만

우리가 구글을 좋아하면서 두려워하는건

우리의 모든 정보가 구글에 의해 구글에 의한 구글을 위한 것이 될까 싶은 느낌과 같은 것이다.

과연 검색에서 보호할 수 있는 수단을 제공해 줄 것인지 궁금하다.

3. SWF 와 link 되어 있는 각종 URL 이 활용가치가 있는것일까?

Text 는 정보로써 가치가 충분하다고 할지라도

보통 SWF 하나에는 여러가지 URL 에서 값을 가져와 사용하게 되는데

여기서 사용되는 이 URL 이 과연 그 활용가치로써 취급할만할까 라는 생각이 든다.

하나의 SWF 가 A 라는 도메인에서 보여지고 있지만

보통 실제 컨텐츠는 B 라는 도메인에 저장해놓고 있어서 SWF 가 가지고 있는 URL 은 대부분

B 라는 도메인을 향해 있을것이다.

그러면 과연 이 SWF 에서 가치를 찾아내는것이 효율적인가?

라는 의문이 든다.

물론 Adobe 와 Google 의 이런 기술 협력은 쌍수를 들어 환영이다.

하지만 그 실효성이나 활용 방안이 과연 기대한 바를 만족시켜줄까하는 우려가 들기 때문이다.

보통 SWF 가 보안에서 자유롭지 못하다고 하는 인식 때문에

SWF 내에는 되도록이면 중요한 정보는 암호화나 아예 지니지 않게끔 하는것이 추세가 아닌가 싶기 때문이다.

[수정] Daum vs Naver

wooyaggo — Tue, 17 Jun 2008 17:33:45 +0900

* 본문에 앞서 본 포스트는 완전히 주관적이며 사실과 다를 수 있으며 특정 대상에게 손해를 입힐 목적으로 작성되지 않았습니다. 단지 현재 국내의 IT 의 현주소를 고찰하고자 비교, 분석한 것입니다. 간접광고가 될 소지가 있는 부분은 필터처리 하였습니다.

많은 분들이 댓글 달아주셨습니다.
제목도 지나친거 같아서 수정했습니다. 이해해주세요^^
저도 너무 섣부르게 다음을 비하한거 같긴 합니다.
그전의 다음을 알았어야 했는데 말이죠.
비슷하다고 무조건 다음이 네이버를 배꼈다는건 근거가 약하다고 시인합니다.
혼란을 일으킬만한 부분이 보이면 말씀주시기 바랍니다.

하지만 다음이 재개편을 하면서 광고나 전체적인 컨셉이나
네이버의 그간 모습과 비슷하다는것은 분명합니다.

저도 섣부르게 써서 혼란을 드릴까봐 걱정이 됩니다만
근거가 모아진다면 수정토록 하겠습니다.

이 글을 읽는 여러분도 잘 판단하시길 부탁드리겠습니다.

전 Flash 로 먹고 사는 개발자입니다.

하지만 Flash 개발자라는 직군이 생기기전에 웹디자이너로 약 4년정도

프리랜서도 하고 웹에이젼시에서도 활동했습니다.

디자인이라는게 참 힘든 직업이죠.

Creative 가 중요하다는것은 알고 있지만 쉽진 않고

다른 사이트들은 너무 이뻐보이는데 내가 만든건 그렇게 맘에 안들수가 없죠.

그래서 흉내도 많이 내고 색도 따라서 써보고

개발자로써 진입했을때도 크게 다르진 않았습니다.

와~ 저건 어떻게 했을까?

내가한건 왜 이렇지?

너무 맘에 안들고 다른 어플들은 너무 멋지고 화려한데

내가 만든건 초라하고 어설프기 그지 없었죠.

네이버에서 일하고 있는 분과 이야기를 하는데

다음이 시즌2 라는 타이틀을 걸고 새단장을 했는데

너무 똑같다라고 하더군요.

전 좀 반신반의했습니다.

전 反네이버라고 공공연히 주위에 이야기 합니다.

제 블로그의 포스트도 중요한 내용은 네이버 카페에 직접 올리지 않습니다.

링크만 걸 뿐이지요.

물론 다음도 안쓴지 오래됐습니다.

네이버에 없는 카페가 다음엔 있을까 찾아보는 정도?

사실 네이버에 있는 분께는 심한말은 할 수 없었지만

저 네이버 정말 싫어하거든요... 왜냐구요? 전 구글교거든요 ㅋㅋ

구글과 네이버는 꾸준히 비교되어왔고 그 차이가 많은 사람들의 입에 오르내렸죠.

근데 다음은 메일서비스로 성공한 좋은 케이스로 기억하고 있었고

또 아는분이 다음과 관련해서 열심히 일을 하고 있는지라

나름 이미지 꽤 좋았습니다.

네이버는 좀 적극적이고 똑똑한 느낌이라면

다음은 친근하고 약간은 부족하지만 편안한 느낌이었달까요?

그렇게 고개를 기우뚱하면

두 사이트를 모니터 하나씩 띄워놓고

한번 비교해보려는 찰나....

ㅇ_ㅇ!!!!!!!!!!!!!!!!!!!!!!!!!!

컥!!!!!!!!!!!!!!!!

ㅡ_-)a 머야 이거...

다음의 검색창이 어디서 많이 보던거네요 -_-??

응???

이거 네이버의 윈도우 컨셉 아니었나 -_-??

두꺼운 검색창 테두리랑 밝고 진한 천연색이 네이버의 이미지였다고 기억합니다.

근데 "진짜 비슷하데요?"

들어보니 다음이 2월2일 다음 "시즌2" 라는 타이틀로 개편했다고 하더라구요.

그 컨셉이 아예 대놓고 네이버를 그대로 배꼈다는 인상을 지울수가 없습니다.

아예 광고 컨셉도 네이버 검색창을 먼저 보여주고

다음이 더 좋다는 식의 광고 컨셉이더군요.

I've lost 어이.

그래서 저걸 서두로 작정하고 비교해봤습니다.

1. 메인

네이버

메인에서 유용한 정보를 보여주는 부분.

머 굳이 비교할 필요가 없을 정도다 -_-;;

라벨 > 정보1 | 정보2

두 형태가 아주 똑같습니다.

2. 메인 뉴스 미리보기

정확한 정보가 아니라 숨겨놓습니다.

3. 메인 실시간 검색어

네이버

답 안나온다...

똑같다.

숫자 아이콘도 비슷하고

하지만!!

다른게 있다!!

다음은 하나하나 모션을 주었다...

...
...
...

4. 메인 - 쇼핑

정확한 정보가 아니라 숨겨놓습니다.

5. 메인 - 위젯

네이버

제일 쇼킹했던 위젯...

네이버의 위젯이 처음 나왔을때 Flash 개발자들 사이에서는 꽤나 이슈였었다.

네이버에서 저런 과감한 Flash를 저 중요한 위치를 써가면서 배치했다는건

나름 충격이었다.

근데 다음은 그마저도 용서 없었던 같다.

이정도 스샷뜰때쯤 이미 심한정도를 넘어서 진짜 "배꼈다"라고 밖엔 할 수 없었다.

6. 블로그 1

네이버

로긴하고 블로그 들어가면 보이는 첫 페이지에서

내 정보가 있는 부분이다.

솔직히 디자이너로 활동할 때 중앙 메뉴가 제일 비중있는 부분이라

가장 신경을 많이 쓰고 가장 멋있게 만들려고 고심하는 부분이다.

사이트의 중심을 잡아주고 전체적인 컨셉을 표현해주는 부분이기 때문에

색상도 무게있고 눈에 잘띄는 색으로 배치해야 하는 부분이다.

근데 탭 디자인은 물론

모서리 라운딩 디자인

그라데이션 효과

외곽 1픽셀 라인 디자인도 똑같고

안쪽으로 InnerShadow 도 똑같다.

로그인 부분은 블로그 바로가기부분이 다르고

나머지는 유사하다.

7. 블로그 2

네이버

블로그의 중앙부분에

내 블로그 상황을 나타내주는 부분같은데

답안나온다...

똑같다. 말이 필요 없다.

8. 카페

정확한 정보가 아니라 숨겨놓습니다.

9. 지식인 & 신지식 1

네이버의 지식인을 따라한게 다음의 신지식이라는건가보다

이번에 알긴 했는데 어쨌거나 비교해봤다.

진짜 똑같다 -_-

네이버

신지식 검색창.

똑같다.

심했다...

왼쪽 타이틀 디자인도 똑같고

우측 submit 버튼도 똑같다.

인풋폼안에 글씨까지 똑같으면 너무 티날까봐 안썼나?

하지만

실제 글씨를 입력해보면 역시 한글 50자로 똑같다 -_-

뷁~

10. 지식인 & 신지식 2

네이버

아... 말이 필요없다....

똑같다.

탭, 테이블 외곽 디자인, 카피 문구까지...

11. 지식인 & 신지식 3

네이버

이것도 똑같아...

큰 이미지를 좌측에 두고,

3단으로 나눈 레이아웃,

컨셉 컬러로 아웃라인 효과준거.

12. 검색 결과

네이버

"영화"라는 키워드로 검색해보았다.

사실 이 검색결과는 좀 이해하고 싶었다.

영화라는게 관심 카테고리가 거기서 거기고

나타낼 정보가 뚜렷하기 때문에

레이아웃이 비슷하다고 해도 이상할게 없기 때문이다.

근데 이건 너무 똑같자나 -_-?

별점, 예고편아이콘, 상영/예정 탭 디자인,

좀 심하자나 -_-?

------------------------------------------------------------------------------------

전문가라고 하기엔 내 자신이 창피하지만

나름 8년을 이바닥에 있으면서

디자인도 해보고 지금은 개발을 하고 있고

기획도 해보고 PM도 해보고 마케팅도 좀 공부했었다.

하지만 Daum 의 네이버 모방은 도를 지나쳐도 너무 지나쳤다.

솔직히 Daum 의 디자이너, 기획자에게 물어보고 싶다.

창피하지 않냐고...

진정 자신들의 Creative 하고 Professinal 하다면 부끄럽지 않냐고.

네이버는 UI를 연구하는 팀이 따로 있다고 한다.

수많은 연구와 사용자 패턴을 연구하여 저런 레이아웃과

컬러와 버튼의 크기, 시선의 흐름, 커서의 동선등을 연구한 결과라고 알고 있고

나 역시도 깊이 공부한 결과 굉장히 잘 설계된 레이아웃이라고 평가한다.

그런데 다음도 과연 진지하게 연구하고 테스트해서 나온 결과일까?

다음은 다음만의 서비스의 특징이 있을텐데

과연 저렇게 똑같이 나올 수 있을까?

같은 IT 시장에 있는 개발자로써 창피하다.

다음의 개발자를 위한 노력이나 세미나 개최같은것을 꽤 훌륭히 생각하고 있었는데

그들의 결과물은 양심을 속이고 유저의 눈을 속이는 결과라고 생각된다.

양심을 속이는건 지나면 잊혀지지만

고객을 속이는건 역사가 기억할 것이다.

[AIR] 시스템 트레이에만 띄우는 AIR

wooyaggo — Thu, 12 Jun 2008 17:30:59 +0900

클릭하면 크게 보입니다.

알송이나 메신져들 보면

태스크바는 차지하지 않고 시스템트레이에만 위치해있습니다.

AIR 도 물론 이게 가능하고

약간의 트릭만 있으면 쉽게 가능합니다.

1. 기본 NativeWindow 는 활성화시키지 않는다.

- 테스크바를 차지하지 않습니다.

2. 새창을 만든다.

- type 을 "utility"로 만들면 부모창에 종속된 창으로 나타납니다.

3. 새창의 stage, stage.nativeWindow 의 기본 속성을 복사해준다.

4. 기본 트레이 아이콘을 생성해준다.

- 생성전에 설정해주면 커스터마이징 가능합니다.

5. 새창의 stage 에 Document Class 를 addChild 해준다.

- 부모창의 의미를 바꿔버리는거죠.

6. 기본적인 셋팅.

- 자동으로 Application 닫도록 설정.
- 아이콘 클릭시 맨 위로 나타나도록 설정.

TrayedNativeApplication 소스보기

package kr.as3.display
{

 /*****************************************************************
 * Description : System Trayed Application's base class.
 * Class Name : TrayedNativeWindow
 * Company : Belong to www.as3.kr.
 * Author : JINSANG YUN ( a.k.a. Wooyaggo victim4@gmail.com )
 * Last modified : 2008.06.02
 * Version : 1.0
 *
 * Copyright www.as3.kr. All Rights Reserved.
 ******************************************************************/

 /**
 * This source code follow LGPL (Lesser GPL)
 *
 * 본 제품(소프트웨어)는 GPL 라이센스 하에 배포되는 소프트웨어 TrayedNativeWindow 을 포함합니다
 *
 * 이 소스코드는 LGPL 을 따릅니다.
 * 사실 저도 LGPL 을 잘 모릅니다.
 *
 * 하지만 단순한 몇가지를 나열해봅니다.
 *
 * * 라이센시(Licensee)는 오픈소스 소프트웨어(이 컴퍼넌트 클래스)를 자유롭게 사용할 수 있다.
 * * 라이센시(Licensee)는 오픈소스 소프트웨어(이 컴퍼넌트 클래스)를 일정한 조건하에 자유롭게 복제할 수 있다.
 * * 라이센시(Licensee)는 오픈소스 소프트웨어(이 컴퍼넌트 클래스)를 일정한 조건하에 자유롭게 수정, 수정된 내용을 재배포할 수 있다.
 *
 * * 복제, 수정, 재배포에 대한 조건 *
 * * 저작권 관련 문구를 유지한다.
 * * 제품명 혹은 컴퍼넌트(클래스)명을 중복되지 않게 한다.
 * * 최종결과물에 사용 여부를 명시한다. (논문의 "인용" 과 비슷)
 * * 수정, 추가하였을때는 수정, 추가한 소스코드도 공개한다. (저작자에게 email 로 알리면 된다고 봄)
 * * 특허에 관련될 경우 복잡해지니 무시.
 *
 * 간단하게 이야기하면 이 소스는 LGPL 을 따르기 때문에 사용했다는 것을 반드시 밝혀야하고,
 * 원본 소스가 수정 또는 추가되면 그 소스도 자동으로 LGPL 을 따르게 된다는 이야기입니다.
 *
 * 더 쉽게 말해서 걍 쓰시고 썼다는 이야기만 해주시면 될거 같습니다. 대부분 수정은 잘 안하자나요 ㅋㅋ
 * 수정하면 수정했다고 공개하거나 메일로 소스랑 같이 알려주면되는거 같구요.
 * 생각보다 그렇게 어려운 건 아닌거 같습니다^^
 *
 * 오픈소스 소프트웨어 라이센스 가이드 : http://wiki.kldp.org/wiki.php/OpenSourceLicenseGuide?action=show&redirect=FindPage#s-3.2.2
 * KLDP 의 LGPL 관련 질문글 : http://search.empas.com/search/oea/kldp/oe.html?q=LGPL&sdsn=&en=utf8
 *
 * 우리 모두 같이 자유롭게 소스를 공개하고 떳떳하게 사용하는 분위기를 조성해봅시다.
 *
 */

 import flash.desktop.*;
 import flash.display.*;
 import flash.events.MouseEvent;

 /**
 * To make a application is nested within SystemTray, Instead extending Sprite or MovieClip, just extend TrayedNativeWindow.
 *
 * @author wooyaggo
 *
 */
 public class TrayedNativeWindow extends MovieClip
 {
 /**
 * if you want to set InitOption, After set this, then call super();
 *
 * @example
 * <listing version="3.0">
 package 
 { 
 import flash.display.NativeWindowInitOptions; 
 
 import kr.as3.display.TrayedNativeWindow; 
 
 public class SampleTrayApplication extends TrayedNativeWindow 
 { 
 public function SampleTrayApplication() 
 { 
 this.initOption = new NativeWindowInitOptions(); 
 this.initOption.resizable = false; 
 
 super(); 
 } 
 } 
 }
 * </listing>
 */
 public var initOption: NativeWindowInitOptions;
 /**
 * You can access SystemTrayIcon without type-casting NativeApplication.nativeApplication.icon.
 */
 public var icon: SystemTrayIcon;

 /**
 * Constructor, You can create nested-SystemTrayApplication nowhere at taskbar.
 *
 */
 public function TrayedNativeWindow()
 {
 var older: NativeWindow = this.stage.nativeWindow;
 var oldStage: Stage = this.stage;

 if( this.initOption == null )
 {
 this.initOption = new NativeWindowInitOptions();
 this.initOption.maximizable = older.maximizable;
 this.initOption.minimizable = older.minimizable;
 this.initOption.resizable = older.resizable;
 this.initOption.systemChrome = older.systemChrome;
 this.initOption.transparent = older.transparent;
 }

 this.initOption.type = NativeWindowType.UTILITY;

 var window: NativeWindow = new NativeWindow( this.initOption );
 window.width = older.width;
 window.height = older.height;
 window.x = older.x;
 window.y = older.y;
 window.title = older.title;

 window.stage.addChild( this );

 window.stage.align = StageAlign.TOP_LEFT;
 window.stage.displayState = oldStage.displayState;
 window.stage.focus = oldStage.focus;
 window.stage.frameRate = oldStage.frameRate;
 window.stage.fullScreenSourceRect = oldStage.fullScreenSourceRect;
 window.stage.mouseChildren = oldStage.mouseChildren;
 window.stage.quality = oldStage.quality;
 window.stage.scaleMode = StageScaleMode.NO_SCALE;
 window.stage.showDefaultContextMenu = oldStage.showDefaultContextMenu;
 window.stage.stageFocusRect = oldStage.stageFocusRect;
 window.stage.tabChildren = oldStage.tabChildren;

 var iconBitmap: BitmapData = new BitmapData( 16, 16, false, 0xFFCC00 );
 this.icon = NativeApplication.nativeApplication.icon as SystemTrayIcon;
 this.icon.bitmaps = [ iconBitmap, iconBitmap, iconBitmap, iconBitmap ];
 this.icon.addEventListener( MouseEvent.CLICK, showFrontListener );

 NativeApplication.nativeApplication.autoExit = true;

 older.close();
 window.activate();
 }

 /**
 * To click tray icon when the application was covered with other windows, show up to front.
 */
 private function showFrontListener( e: MouseEvent ): void
 {
 // keep a origin state.
 var isFronted: Boolean = this.stage.nativeWindow.alwaysInFront;

 this.stage.nativeWindow.alwaysInFront = false;
 this.stage.nativeWindow.alwaysInFront = true;

 if( isFronted == false )
 this.stage.nativeWindow.alwaysInFront = false;
 }
 }
}

이번에 올리는 소스는 아주 간단하게

Document 클래스를 Sprite 나 MovieClip 이 아니라

TrayedNativeWindow로 상속하게 되면

기본적으로 시스템트레이로 실행되는 어플리케이션을 만들 수 있습니다.

AIR 데모 : [ 설치하기 ] (AIR Installer 가 설치되어있지 않으면 zip 파일로 인식합니다.)

AIR 소스 : [ 다운받기 ]

[AIR] Secret File 파일 암호화 유틸

wooyaggo — Tue, 10 Jun 2008 17:50:32 +0900

파일을 나만의 비밀번호로 암호화한다!!

Secret File

간단하게 Drag & Drop 으로

암호화할 파일을 떨군 후 비밀번호만 입력하면 끝!!

1. 얼마나 안전한가?

MD5 라는 단방향 암호화 알고리즘을 통하여 비밀번호를 모르면 풀 수 없습니다.

2. 어떻게 암호화 하는가?

암호화된 키를 기준으로 원본 파일을 bit 단위로 암호화하기 때문에 용량이 늘지 않습니다.

원본파일 : 가나다라마바사
비밀번호 : 우야꼬

이 원본과 암호키를 기준으로 암호화한다.

MD5 로 암호화된 비밀키 : woo1234 (실제로는 더 복잡합니다.)

가나다라마바사
woo1234woo12
--------------
뷁다뎁뵹료미뷉

이때 사용된 암호키는 단방향 암호화이기 때문에

역으로 비밀번호를 알아낸다는것은 거의 불가능에 가깝다.

비밀번호를 기준으로 다시 복호하는 방법은

뷁다뎁뵹료미뷉
woo1234woo12
--------------
가나다라마바사

이렇게 복호화하게 된다.

3. 어떻게 사용하나?

암호화하고 싶은 파일(중요한 정보, 노출되선 안되는 이미지, 중요한 소스 파일등)

을 secret 파일로 암호화해놓은뒤

원본을 삭제하고

암호화된 파일을 관리, 전송한 후

허락된 이들에게만 비밀번호를 알려주어

파일을 풀 수 있도록 할 수 있다.

4. 정말 풀 수 없나?

MD5 라는 암호화 알고리즘은 단방향, 즉 복호가 거의 불가능한 암호화다.

비밀번호가 한글자 이건 많은 글자 이건간에

일정한 길이로 암호키가 생성되기 때문에

핸드폰 비밀번호 맞추듯이 0000 부터 9999 까지 대입해서 맞추는 방법밖에 존재하지 않는다.

Secret File 은 용량이 큰 파일도 가능하기 때문에

그 많은 bit 를 일일이 복호해서 맞을때 까지 대입해본다는것은

거의 불가능에 가깝다.

게다가 암호가 맞는지 틀린지를 체크하지 않기 때문에

비밀번호가 맞지 않으면 아예 잘못된 파일로 생성이 되어버린다.

많은 애용부탁드립니다^^

저도 개인적으로 소스나 이런 중요한 파일을 보관할때 사용하려고 합니다.

버그나 건의사항 있으시면 블로그나 메일로 연락주세요!!

노무현 전 대통령 출마연설...T-T

wooyaggo — Tue, 3 Jun 2008 20:51:24 +0900

노무현을 찍었던 사람으로써 진심으로 그가 그립습니다....

[AS3] int, uint, Number 표현의 한계

wooyaggo — Mon, 2 Jun 2008 11:58:00 +0900

int

10진수
최대 : 2147483647
최소 : -2147483648

지수표현
최대 : 2^31 - 1
최소 : -2^31

하드웨어 용량
최대 : 2 GB - 1 BYTE
최소 : -2 GB

시간 (sec)
최대 : 68년 35일 3시간 14분 7초
최소 : -( 68년 35일 3시간 14분 8초 )

시간 (ms)
최대 : 24일 20시간 31분 23초 647밀리세컨드
최소 : -24일 20시간 31분 23초 648밀리세컨드

uint

10진수
최대 : 4294967295 ( int.MAX_VALUE*2 + 1 )
최소 : 0.

지수표현
최대 : 2^32 - 1
최소 : 0

하드웨어 용량
최대 : 4 GB - 1 BYTE
최소 : 0 BYTE

시간 (second)
최대 : 136년 70일 6시간 28분 15초
최소 : 0초.

시간 (ms)
최대 : 49일 17시간 2분 47초 295밀리세컨드
최소 : 0밀리세컨드

Number

Number 는 지수 + 소수 로 이뤄진 표현법이기 때문에

어느 값 이상부터는 지수로 표현법이 넘어가서 주의해야 한다.

지수 표현법

이 이야기는 지수부분으로 표현이 되면

123 은 1.23e+2 으로 표현이 되어서 1을 더해도 1.24e+2 로 올바로 저장이 되지만

굉장히 큰 수 12345678901234567890 (0~9 두번 반복) 은

1.23e+19 로 표현이 되어서 1을 더한다고 하더라도

1.23e+19 로 인식이 된다.

테스트코드

가장 큰 값은 1.79e+308 (1.79 * 10^308) 이라는 어마어마한 값을 저장할 수 있다.

이는 용량으로 봤을때는 기가, 테라, 페타, 요타를 다 뛰어넘는 값까지 저장할 수 있다.

즉 굉장히 큰 수(innumerable)를 수를 다룰때는 적당하지만

디테일한 수를 비교하기에는 적합하지 않다.

Adobe AIR / www.AS3.kr / ActionScript 3.0

Documents about swf, AVM2 and bit controls

[AS3] Flash에서 Javascript 변수 가져오기 (without Javascript)

뜻 깊은 이미지 한장.

IE 를 떠날 수 있게 만든 FireFox 플러그인 모음

[AS3] Integer.reverseBytes() of Java.

[AIR] 완성도 높은 어플리케이션을 만들어 보자.

Flex Builder 3.0 정품을 샀어요!!

Window 에서 JAVA ClassPath 설정하기

Google 과 Adobe 의 Flash 검색 기술

TagCloud 를 만들어 봤습니다.

[수정] Daum vs Naver

[AIR] 시스템 트레이에만 띄우는 AIR

[AIR] Secret File 파일 암호화 유틸

노무현 전 대통령 출마연설...T-T

[AS3] int, uint, Number 표현의 한계