애드온 ui 에 대한 고찰 - 2

2013/01/02 - [Scaleform Etc] - 스케일폼을 위한 작은 변명

2013/01/14 - [Scaleform Etc] - 애드온 ui 에 대한 고찰 - 0

2013/01/14 - [Scaleform Etc] - 애드온 ui 에 대한 고찰 - 1

1. 커스터마이징 UI

바인딩 방식을 사용하면, 다양한 UI 개발이 쉬워집니다.

정확히는 클라이언트와 독립된 개발이 가능해지게 됩니다.

예를 들어 기본적인 미니맵을 바인딩 기법으로 만든다면 다음과 같은 키값을 바인딩 할 것입니다.

"minimap.src" : 미니맵의 텍스처 경로

"minimap.x" : 미니맵의 캐릭터 x 위치

"minimap.y" : 미니맵의 캐릭터 y 위치

이렇게 세가지 정도를 바인딩하면 되겠죠.

("minimap.x", "minimap.y" 이렇게 두번의 바인딩이 부담스럽다면 minimap.position 정도로만 하고선 값을 "35,76" 이렇게 구분자를 넣어서 문자열로 넣어줘도 되겠죠...UI 개발자는 Spring.split 으로 나눠서 쓰고요)

기존의 방식으로는 Minimap.swf 객체에

setSrc($src:String) : 경로 설정 인보크 함수

setPosition($x:Number, $y:Number) : 위치 설정 인보크 함수

이런 식의 인보크 함수를 클라이언트와 UI 개발자가 약속하고 실행시켰을 겁니다.

그리고 캐릭터의 체력을 나타내는 MCStat 이라는 위젯이 있다면

"mc.hp" 같은 키값을 바인딩 시키게 됩니다.

기존의 방식으로는 MCStat 객체에 setHP($hp:Number) 같은 인보크 함수를 약속하고 실행시켰을 겁니다

그런데 만약 미니맵과 체력을 동시에 표시하는 좀 뜬금없는 위젯을 만든다고 치죠

기존의 방법으로는 어떻겠습니까?

1. 클라이언트에게 "Custom.swf" 라는 위젯을 만들거라고 말한다

2. setSrc($src:String), setPosition($x:Number, $y:Number), setHP($hp:Number) 이렇게 세가지 인보크 함수를 약속하고 정의한다

3. 클라이언트는 "Custom.swf" 라는 위젯 객체의 위의 세가지 인보크 함수를 실행시키는 코드를 개발한다

4. 클라이언트와 UI 개발자가 같이 세가지 인보크 함수 테스트

이런 식으로 이루어질 겁니다.

하지만 바인딩 방식은 이렇습니다.

1. Binding.addBind("minimap.src, setSrc), Binding.addBind("minimap.x, setX), Binding.addBind("minimap.y, setY), Binding.addBind("mc.hp, setHP) 함수를 정의한다

2. UI 개발자가 혼자 정상 동작하는지 테스트

왜 UI 개발자가 혼자 테스트 하냐고요?

이미 Minimap 위젯과 MCStat 위젯으로 클라이언트가 값을 제대로 보내주는 지에 대해서는 테스트가 완료되었기 때문입니다.

2. 클라이언트는 데이터만 전해줄 뿐

이렇듯 UI 개발이 클라이언트 개발자를 벗어나 UI 개발자 혼자만으로도 개발이 가능해지게 됩니다

바인딩 방식에서 클라이언트는 서버상의 데이터만을 전해줄 뿐입니다.

인보크 함수를 실행하고 어쩌고하는 단계가 아예 필요 없는 것이죠...

UI 개발은 각종 데이터를 가지고 어떻게 보여주느냐를 혼자서 고민하면 됩니다.

클라이언트는 UI 를 어떻게 개발하느냐에 아무런 신경을 쓰지 않아도 됩니다

이런 식으로 클라이언트와 UI 개발자는 완전히 독립적으로 개발이 가능해지게 되는 것이죠.

애드온 UI 는 이런 겁니다.

1. 클라이언트는 UI 에게 알려줘도 괜찮은 데이터만을 공개해줍니다.

2. UI 개발자는 각종 데이터를 가지고 마음껏 창작해낸다.

음... 지금까지는 클라이언트의 데이터를 전달하는 방법과 그것을 가지고 표현하는 것에 대해서 설명을 했네요...

아마도 그 다음에는 UI 에서 클라이언트로 이벤트를 보내는 것도 간단하게 가능할까 생각하실 겁니다.

그것이 맞는 순서이겠으나 아직 데이터 전달의 한가지가 더 남았습니다.

다음 글에서는 리스트(배열)/슬롯 데이터 바인딩에 대해서 써보도록 하죠....