글 초반부터 좀 많이 샜는데
이 포스팅에서 하고싶은 말은 이겁니다.
메리테크의 M35T 의 UI도 위의 경우에 예외가 아니라는 겁니다.
제가 M35T의 UI 프로토타입을 제작할 때 가장 신경이 많이 쓰였고, 가장 많은 시간이 들어간 부분은 다름아닌 아이콘의 디자인 스타일이었습니다. 모든 아이콘과 이미지들은 제작자 자체적으로 만들거나, 원본이 존재하는 경우 상당히 많은 수준의 합성이나 수정을 통하여 원본과는 전혀 다른 이미지가 되어야 합니다.
M35T 카페 유저들의 UI선호도를 가늠해보면, 약간 과장을 포함해서, 80%는 아이폰(팟)스타일 원츄, 나머지 20%는 상관없음 이지만, Flash UI 제작을 위한 공식적인 fla파일(일종의 템플릿)을 만드는데, 아이폰 아이콘을 가져다 쓸순 없는 노릇이죠. 게다가 이 fla 파일은 광범위하고 불특정하게 배포되는 성질의 것이라 표절 시비에 휘말린다던가 하는 일이 전혀 생기지 않는다는 보장이 없습니다. (오히려 의도적인 표절 시비를 내서 마케팅 수단으로 삼는 경우도 있긴 하지만..)

결론은 뭐냐…
M35T의 UI를 제작하는 분은 사용되는 이미지, 또는 디자인에 대한 사용 권한이 자신에게 있는지 확인해야 합니다.
UI의 디자인 중에서도 아이콘 스타일에 관해서만 이야기 했지만, 사진을 사용하여 UI를 제작하는 것에도 주의가 따릅니다.
연예인 사진으로 UI를 만들어 본인만 사용할 것이라면 별 관계 없겠지만, 이 UI 가 널리널리 배포된다면 전혀 다른 문제가 되는 것이죠.
초상권이나 저작권 시비에 휘말릴 수도 있는 잠재적 가능성이 생기는 것입니다.
이러한 점에 유의해서 UI를 제작해 주시기 바랍니다.

이 내용은 11월 20일자 V1.0.3.6 펌웨어에 이미 적용되었지만 외부로 공개되지 않은 API 입니다.
플래시 UI가 로드된 상황에서 함수를 호출하여 M35T의 내부의 다른 swf 파일을 로드하고 메인 플래시 UI는 언로드 되도록 하는 내용 입니다.

언뜻 보기에 최상단에 loadMovie() 하는게 더 낫지 않냐? 하시겠지만,
실제 휴대용 디바이스의 플래시를 제작하다보면 가장 먼저 느끼는 점이 “퍼포먼스가 정말 안나온다” 라는 점입니다.
약간만 복잡한 모션이거나 움직임이있는 무비클립의 면적이 약간만 넓어져도 속도저하가 확 느껴질 정도 입니다.
그래서 onEnterFrame 같은건 너무나 당연히 delete 시켜줘야 하고, 데스크탑(윈도우) 상에서는 전혀 신경쓰지 않아도 되는, 심지어는 사용하지 않는 변수를 삭제시키는 등의 메모리 확보에 신경을 써야 합니다.
이런 환경이니 swf를 하나이상 loadMovie 하는것은 굉장한 부담이 되는 일입니다.
혼자만 사용하는거라면 뭐 상관 없을수도 있지만, 공개되어 배포되는 애플리케이션인 경우에는 이야기가 달라지죠.

뭐 그렇다는 이야기고…

사용 방법은 다음과 같습니다.

1. 메인 UI에서 다른 플래시 파일 호출
ext_fscommand2(arg1, arg2, arg3)
arg1: API의 종류( 무조건 “PLATFORM”)
arg2: 함수명( “excuteFlash”)
arg3: 플래시의 경로

1
2

//메인 UI 상태에서 다른 swf을 호출하고 메인 UI는 메모리에서 삭제.
ext_fscommand2("PLATFORM", "excuteFlash", "C:\\Config\\test.swf");

위의 코드에서 주의할 점이 경로 인데,
M35T의 기본 메모리 영역은 C 드라이브이고, sd카드는 D 드라이브 입니다.
그리고 디렉토리 구분 표시는 이스케이프 문자를 “\\” 이렇게 두개 겹쳐 써야합니다.(한글폰트에서는 “\\” 가 되겠죠.)
M35T 운영체제의 특성인듯 한데, 이것을 메리테크 개발진에서는 버그로 인식하고 다음번 펌웨어 패치때 수정할 계획인 모양입니다.

2. 다른 플래시가 화면에 표시된 상태에서 메인 UI로 복귀
ext_fscommand2(arg1, arg2)
arg1: API의 종류( 무조건 “PLATFORM”)
arg2: 함수명(“runMainMenu”)

1
2

//다른 swf 가 불러와 있는 상태에서 메인 UI로 돌아간다
ext_fscommand2("PLATFORM", "runMainMenu");

그렇다면 이걸로 무엇을 할 수 있냐…

별도의 플래시 애플리케이션을 메인 UI에서 불러 사용할 수 있는 강력한 기능의 확장이라고 할 수 있습니다.
현재의 M35T의 메뉴는 setting 까지 포함해서 10가지 인데 이것이 무한대수로 증가할 수 있는 가능성이 열린 것이죠.
예컨대, 메모장 이라던가, 달력 이라던가(이건 메인 UI 위젯 형태로 개발되는것이 더 맞긴하겠지만), 플래시 갤러리 라던가, 간단한 그림판 같은 기능이 추가될 수 있다는 것입니다.

아래의 코드는 그중 펌웨어 통신 부분만을 나타낸 것입니다.

0
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84

/************************************************
//Meritech M35Touch Main UI Development & Design
//메리테크 M35Touch 메인 UI 개발, 디자인
//Slide type Flash User Interface
//슬라이드 타입 플래시 유저 인터페이스
//제작자 : 세계의끝(원종선)
//http://www.ufx.kr/blog
//cuebrick@naver.com (UI 수정에 대한 메일 문의는 답변해드리지 않습니다. 홈페이지의 블로그를 이용해주십시오.)
*************************************************/
 
//fscommand 의 _param 에 들어갈 각 기능 호출 String이 들어 있는 배열 (펌웨어에 지정되어 있는 명령어 이름)
//*****중요 : 이 배열의 순서(=명령어의 순서)를 바꾸려면 라이브러리에 있는 icon_mc 의 프레임 순서도 동일하게 변경해야 합니다. (그래야 명령어와 아이콘 그림이 일치)
var command_array:Array = [
			"dmb",
			"movie",
			"music",
			"radio",
			"game",
			"dic",
			"photo",
			"voicerec",
			"text",
			"setting"
			];
 
//핵심 함수 - fscommand 실행 함수 (M35T에게 명령을 내리는 부분)
function getExec (fid:Number){
	//배열의 명령어를 fid 의 파라미터를 이용해 로컬 변수에 저장
	var _param:String = command_array[fid];
 
	//M35T 에 명령을 내리는 부분
	ext_fscommand2("PLATFORM", "executeApp", _param);	
 
	//실제 명령어가 찍히는 모습을 확인
	//trace(fid +" : "+ _param)
}
 
//M35T 상태체크를 위한 setInterval 과 변수
var batteryCheckTime:Number = 1000;//배터리 체크 타임 1000 = 1초
var batteryID:Number = setInterval(getM35Tstat, batteryCheckTime)
var id_cnt:Number = 0;
var battery;
var lcdlocked;
var sdcard;
 
//M35T 상태체크
function getM35Tstat (){
	//배터리 상태수준을 가져와 battery 변수에 저장
	ext_fscommand2("PLATFORM","getBatteryLevel", "battery");
 
	//LCD상태가 잠겨 있는지 여부를 가져온 후 lcdlocked 변수에 저장, lcdlocked = 0 잠기지 않은 상태, lcdlocked = 1 잠긴상태
	ext_fscommand2("PLATFORM","isLCDLocked","lcdlocked");
 
	//micro SD 카드의 상태를 가져와 sdcard 변수에 저장
	ext_fscommand2("PLATFORM","isExistSDCard","sdcard");
 
	//sd카드의 상태 변수에 따라 아이콘 표시
	sdcard_mc.gotoAndStop(Number(sdcard) + 1);
 
	//기기 상태체크 초기 3번 이후에 메모리 확보를 위한 clearInterval
	if (id_cnt >= 3) {
		clearInterval(batteryID);
	}
	id_cnt++;
}
 
//M35T로부터 이벤트가 발생하면 해당 동작을 화면에 표시합니다
//화면에 표시하는 것만을 담당하는 부분입니다. 이것으로 기능을 제어할수는 없습니다
//이미 발생해 있는 상태는 체크되지 않습니다. (이미 발생해 있는 기기 상태는 getM35Tstat() 함수로 체크합니다)
messageEvent = new Object();
messageEvent.onEvent = function() {
	if (arguments[0] == "STAT_EVENT_BATTERY") {
		//배터리 레벨표시 아이콘 프레임 변경, arguments[1] = 0~4 까지
		battery_mc.gotoAndStop(arguments[1])
	} else if(arguments[0] == "STAT_EVENT_LCDLOCKED") {
		//화면 잠김 애니메이션 추가 arguments[1] = 0: 잠기지 않은 상태, 1: 잠긴 상태
		lock_mc.gotoAndStop(Number(arguments[1])+1)
	} else if(arguments[0] == "STAT_EVENT_SDCARD") {
		//sd card 있음 없음 표시 아이콘 추가, arguments[1] = 0: sd 없음, 1: sd 있음
		sdcard_mc.gotoAndStop(Number(arguments[1])+1)
	} else {
		outputDebugMsg("Unkown Event Error");
	}
}
ExtendedEvents.OnM35TPlatformEvent.addListener(messageEvent);

fla  파일 다운로드

이 fla 파일에 작성된 액션 스크립트는 일반 유저들에게 배포될 예정이었기 때문에, 주석에 상세한 설명을 넣어놓았습니다.
(메리테크를 통해 공식 배포된 파일과 약간 다릅니다. 이 글을 작성하면서 다시 코드를 보니 사용하지 않는 변수가 있어 수정하였습니다.)

이 펌웨어 통신부 코드는 다시 두가지 역할로 나뉘는데

1. 펌웨어에 명령을 내리는 함수
2. 이벤트를 받아 화면에 처리하는 함수

입니다.

1. 펌웨어에 명령을 내리는 함수

유저가 버튼을 클릭할때 (실제로는 화면을 터치)
getExec() 함수를 실행해서 해당 기능이 시작되도록 만드는 것입니다.
예컨대 스테이지에 무비클립을 하나 만들어 아래와 같이 속성 창의 인스턴스 이름 항목에 dmb_btn 이라고 입력하고,

프레임에 아래와 같이 스크립트를 작성하면

dmb_btn.onPress = function (){
  ext_fscommand2(“PLATFORM”, “executeApp”, 0);  
}

DMB 를 실행시킬 수 있는 버튼이 만들어진 것입니다.
위에서 가장 마지막에 있는 숫자 0 은 command_array 배열에 있는 index 로 배열은 0,1,2,3… 과 같이 0부터 시작하므로 0번째 인덱스인 dmb 를 의미하는 것입니다.
 

2. 이벤트를 받아 화면에 처리하는 함수

이벤트 리스너를 이용한 화면 처리 입니다.
리스너 객체를 만들고 이벤트 리스너를 등록하고…블라블라~
그러나 이 글은 액션스크립트를 다룰줄 아는 분들을 대상으로 하는 것이 아니기 때문에 기술적인 설명은 거의 의미가 없을것 같습니다.
게다가 그냥 저 상태로 놔두면 알아서 동작하니까, 굳이 이해하실 필요는 없겠죠.

아마 화면에서 배터리, lock, sd card 아이콘의 디자인을 바꾸는 방법을 궁금해하실 것 같습니다.

M35T에서 이벤트 발생하는 이벤트는 위의 아이콘에 의해 표시되는 3가지 라고 이해하시면 됩니다.
화면이 꺼졌을 경우 터치하면 화면이 나타나는 이벤트도 있지만 플래시와는 직접적인 관련이 없습니다.

이벤트에 의해 움직이는 아이콘의 위치는 아래 그림과 같은데…

이 무비클립을 더블클릭하고 들어가서 타임라인의 2프레임으로 재생 헤드를 옮겨보면

아래와 같이 lock 아이콘이 보입니다.

배터리 무비클립의 경우 그림이 4단계 이므로 프레임이 4까지 있다는것만 제외하면 모두 동일합니다.

일단 이정도가 펌웨어와 통신하고 화면에 표시하는 부분에 대한 내용 전부라 보시면 되겠습니다.
간단하죠?
펌웨어 통신 부분은 모든 UI에 공통으로 적용되는 사항이므로 이해할 필요 없이 가져다 쓰시면 되겠습니다.

파일>제작설정(Ctrl+Shift+F12) 에서 아래와 같이 세팅하시기 바랍니다.

swf 의 프레임 속도는 애니메이션 되는 무비클립의 면적에 다라 약간씩 차이가 있지만, 대체로 20프레임 이하라고 생각하시면 됩니다.
썩 만족스러운 프레임 속도는 아니지만.. 모바일 디바이스에서 돌아가는 플래시 치고는 느리지 않은 속도에 속합니다. (사이언 오즈폰의 최신 플래시 UI도 드래그 하면 터치펜 한참 후에 무비클립이 따라오더군요.)
제가 처음 작업을 시작할 무렵에는 10프레임을 간신히 넘기는 수준이었는데, 메리테크 개발진에서 펌웨어의 플래시 플레이어를 개선한 결과 속도 향상이 이뤄진 것입니다.

그리고 line 은 가능하면 사용하지 않는것이 좋습니다.
라인을 사용하면 당연히 윈도우 상에서는 아무 문제가 없지만, M35T 내부에서는 화면 렌더링 엔진이 라인을 제대로 표현하지 못합니다.
이걸 보여드리려면 M35T에 라인이 들어간 swf 넣고 사진을 찍어야 하는데…매우 번거로우므로 패스…
궁금하신분은 직접 해보시길 바랍니다.
그래서 라인을 사용해서 드로잉 한 경우에는 수정>모양>선을 채우기로 변환을 이용하여 라인을 면으로 바꿔주시기 바랍니다.

일단 이정도 사전 지식으로 시작해보기로 하죠.
포스팅 하다가 기억나는 것들은 그때그때 새 포스팅으로 올리겠습니다.

과연 사용자의 제작 참여가 얼마나 활발하게 이루어 질 것인가?

실제로 휴대용 디바이스의 펌웨어에 대한 해킹이나 디컴파일에 의해, 또는 아예 디바이스의 제작사에 의해 공개된 API를 이용한 사용자 제작 UI 는 간간히 있어왔습니다.
일단, 제작사에서 어느정도 위험을 무릎쓰고 API를 공개하려는 의지가 있어야 할 것이고, 유저수가 어느 수준 이상이어야 할 것이고, 그 유저들 중에 UI의 개발이 가능한 개발자가 있어야 할 것이며, 그 개발자 중에서도 UI를 제작하여 공개하려는 의지를 가진 사람이 있어야 하는데, 코원의 아이스테이션이나 레인콤의 아이리버같이 인지도를 가진 회사에서도 쉽게 활성화가 되지 않는 것을 보면 이러한 플래시 UI 의 공개는 메리테크와 같은 중소기업에 있어서는 획기적인 시도라고 평가하지 않을수 없습니다.

결과적으로 현재 네이버의 M35 사용자 카페에는 자신만의 UI를 가지고 싶거나, 봉사정신이 뛰어난 몇몇 사용자에 의하여 UI 제작이 이루어지고 있습니다.
아직 만족스러운 숫자의 사용자는 아니지만 M35T가 현재 1만대 판매된 것에 비한다면 앞으로의 발전 가능성은 열려 있다고 할 수 있습니다.

그래서,

M35T의 사용자이며, 펌웨어에 탑재된 플래시 UI를 제작한 본인이 메인 UI 제작 활성화에 약간이나마 기여를 하고자 본인의 블로그를 개설하고 정보를 교환하는 통로로 삼고자 합니다.

결국 이 UI 가 최종 채택된 디자인이 되었습니다.
내부 코드도 정리해 놓았고, 사용자의 조작이 15초 동안 없으면 등장하는 아날로그 시계 같은 약간의 장식도 해 놓았습니다.
이곳저곳 소소한곳의 개선의 여지가 있긴 한데 필수적인 것은 아니라 현재 상태로 완료하였습니다.

아래에서 현재 버전을 받을 수있습니다.

fla 다운로드

이 디자인의  UI 에 대해서는 이 글의 댓글에서 피드백을 받도록 하겠습니다.

물론 이 UI는 마야의 메뉴 같은 형태의 hierarchy(계층구조) 를 가지는 것은 아닌데,
그 외형과 스타일을 차용했다고 보면 적당할듯 합니다.

본 UI는 이런저런 내용으로 불완전 하기 때문에(실제로 제가 파악하고 있는 버그가 있습니다) 아직 배포하지 않습니다.
물론 메리테크 공식 웹사이트나  M35 네이버 카페 에서도 찾을 수 없죠.
차후에 작업을 완료하여 배포하도록 하겠습니다.
이 swf 파일을 저장하려고 마음먹으신다면, 뭐 못할것도 없지만, 가능하면 기다려 주셨으면 합니다.

이 디자인의  UI 에 대해서는 이 글의 댓글에서 피드백을 받도록 하겠습니다.

1. 첫번째는 기존의 디폴트 UI (비트맵 시퀀스로 움직이는 흉내릴 냄)를 대신할 수 있는 보편적인 UI
2. 두번째는 기존에는 볼 수 없었던 파격적인 인터페이스와 독창성이 있는 UI
3. 세번째는 첫번째와 두번째의 중간 선의 절충 UI 이다.  즉 어디선가 본듯하면서도 독창성도 있고 세련됨을 가지고 있는 UI 라고 할 수 있겠습니다.

디자이너의 입장에서 보자면 세번째가 가장 난해한 결과물이 나올 가능성이 높은데, 다행히도 이번에는 세번째의 UI가 정식 채택되어 다음번 펌웨어 릴리즈때 적용되게 되었습니다.

먼저 M35T의 기본 UI 부터 살펴보면

위의 swf 는 M35T의 공식 웹사이트에서 가져온 건데…
디컴파일한 후 기기 부분만 가져다 컴파일 했더니 비트맵이 죄다 100% 압축으로 변경되어 용량이 살인적입니다.(2.45MB) 하지만 원래 웹 상의 커다란 swf 도 오른쪽의 사람부분을 제외하고도 무려 1.4MB라는거…
저 웹사이트 플래시 비쥬얼을 만든 디자이너는 이거 하나만으로 무개념 당첨.
기기의 외형을 볼 수 있어서 처음보시는 분들이 참고하시라고 이 엄청난 파일을 업로드 하였습니다.

새로 제작된 첫번째 UI는 다음과 같습니다.

디폴트 UI 의 사용자 접근성을 최대한 변경하지 않은 상태의 디자인이 되고자 하였습니다.  단, Utility 안에 있는 메뉴는 2depth 구조를 가지고 있는 터라(매우 불편) 이 쓸모 없어보이는 2depth 구조를 밖으로 빼내어 단일 구조를 가지게 하였습니다.

아래의 링크에서 받을 수 있습니다.

fla 다운로드

이 디자인의  UI 에 대해서는 이 글의 댓글에서 피드백을 받도록 하겠습니다.

[Show as slideshow]

[View with PicLens]

디자인 컨셉.. 이라고 할것까진 없고 기존 디폴트 스킨에 비해서 개선한점은 다음과 같습니다.

1. 기존 디폴트 스킨이 black톤을 가지고 있어서 그와는 전혀 다른 느낌으로 깔끔한 white, blue 톤과 라인으로 디자인 하였습니다.
2. 현재 펌웨어 버전에서 utility 안에 놓여있는 5개의 메뉴를 모두 메인화면으로 빼내 원스톱 접근이 가능하도록하여 사용자의 접근성을 높였습니다.
3. 간단하고 빈번한 조작 (ex:볼륨조절, main으로이동) 의 경우 스타일러스 펜을 이용하지 않고 손가락(손톱) 으로 누를 수 있게끔 크게 디자인하여 사용자 편의를 도모하였습니다.
4. 디폴트 스킨을 사용하던 user 도 즉시 이용에 혼동이 없게끔 UI의 기본 위치는 변경하지 않았습니다.

기능 화면 부분은 화면의 종류도 굉장히 많고 기본 api가 제공되지 않은데다가 알 수 없는 부분이 많아서 (ex: 스타일러스펜으로 drag가 되는지 등) 모든 화면을 디자인 하다가는 며칠밤을 세워야 할것 같아 한 화면만 디자인 하였습니다.
입상을 하게 되면 PSD파일과 폰트 등 자료를 제공할 용의가 있으므로 여기까지만 작업해서 응모하게 되었습니다.

역시 문의를 통해 메인화면이 플래시가 아니고 이미지의 연속 시퀀스라는 정보도 얻을 수 있었는데..
차라리 M35T의 메인화면을 플래시로 제작하면 훨씬 멋진 디자인으로 작업할 수 있을텐데 하는 생각이 들었습니다. (나만의 플래시 UI를 가진 PMP… 생각만 해도 멋지다)

그럼 행운이 따르기를 기대하며…