안녕하세요, 윤진입니다.


EFL 포럼이 지난 10월 28일(수)에 SOSCON과 함께 열렸습니다.

오전 10시부터 오후 6시까지 총 10개의 세션이 빽빽하게 준비되어있었는데요,

10개 세션 모두 EFL 종사자들에게는 피가 되고 살이 될만한 내용이었습니다.

사실, 타이젠 네이티브앱 개발자들의 참여를 열심히 독려했습니다만,

격변하는 현실 속에 업무의 파도에 휩쓸려 대부분 참가하지 못해 개인적으로는 아쉽더군요. :)


EFL Agenda


10:00 ~ 10:30 "Tizen 2.4 EFL 소개", 박춘언

10:30 ~ 11:10 "EFL을 이용한 타이젠 게임 개발", 박진솔

11:10 ~ 11:40 "Tizen UI Builder", 서현수

11:50 ~ 12:20 "EFL circular UI-components in GearS2", 이우찬

12:20 ~ 14:00 점심식사

14:00 ~ 14:30 "EFL 앱 개발을 위한 팁 소개", 윤진

14:40 ~ 15:10 "이미지 마스킹 & 필터", Jean-Philippe ANDRE

15:20 ~ 15:50 "EFL 오브젝트 모델", 엄지용

16:00 ~ 16:30 "EFL 벡터 그래픽", Subhransu Sekhar Mohanty

16:40 ~ 17:10 "16살 된 EFL은 어떻게 관리하고 배포할까?", 서주영

17:20 ~ 17:50 "EFL 신규 디버깅 프로파일러", Carstein Heitzler


작년에는 EFL의 기본적인 기능에 대한 안내가 포럼의 큰 틀이었는데요,

올해는 EFL에 새로 탑재된 기능들 위주로 주제를 잡았습니다.

점심시간 전에 이뤄진 4개 세션은 타이젠 플랫폼과 연계하여 세션주제를 잡았네요.

제가 맡은 5번째 세션도 타이젠 앱개발을 통해 얻은 삽질의 결과물이니,

처음 5개 세션 모두가 타이젠 플랫폼과 긴밀한 관계가 있다고 볼 수 있습니다.


첫번째 세션 "Tizen 2.4 EFL 소개", 박춘언님


"EFL, 삼성이 주도하는 오픈소스 프로젝트"

"Tizen UIFW은 EFL입니다."


"Enlightenment 철학"

"저성능 디바이스를 위한 최적화"


"EFL 관련 정보"


최신 타이젠 2.4에 탑재된 EFL를 전체적으로 훑어보는 시간이었습니다.

Eo/Eolian
Evas Async Rendering
Vsync/Animator forced render slots
Evas Masking
Elm ATK Accessibility Support
Eldbus
Wayland
LazyEDC
SystemD Support
Eina Thread Queue
Elocation API

타이젠 2.3 이후 무려 2년간의 업데이트 항목이 타이젠 2.4에 올라갔습니다.

2.3에 비해 여러가지 면에서 진보했습니다.



두번째 세션 "EFL을 이용한 타이젠 게임 개발", 박진솔


박진솔님은 edc와 c로 만든 간단한 게임을 시연해주었습니다.

슈퍼마리오 캐릭터가 등장하는 캐쥬얼 게임이었는데요,

- between 기능을 사용하여 캐릭터의 움직임을 표현하였고,

- 키핸들링으로 캐릭터 오브젝트의 위치를 통제하였습니다.

- 애니메이터로 매프레임마다 적/보너스의 위치를 감지했네요.

최신의 enventor를 사용하여 어렵지 않게 구현할 수 있는 노하우를 공유해주었습니다.


세번째 세션은 사정상 듣지를 못했습니다.

다섯번째 발표준비를 위해 남들보다 한템포 먼저 점심식사를 먹으러 가서요.

서현수님이 Tizen 2.4 SDK UI Builder를 소개해주신 모양입니다.

UI Builder는 타이젠에서 뷰를 구성할때 사용하는 툴인데요,

상당히 공을 들여서 발표자료를 준비해주신 것으로 기억합니다.

발표자료는 다음 주에 소스콘 사이트를 통해 공유가 될 예정입니다.

네이티브 앱 뷰 구성에 어려움을 느끼는 분들께서 참고하시면 좋겠네요.


왼편부터 이우찬님, 박진솔님, 박춘언님


네번째 세션은 이우찬님의 "EFL circular UI-components in GearS2"였습니다.

이른 점심을 먹고 와서 이우찬 님의 발표 중간부분부터 들었습니다.

- 기어S2에 추가된 rotary 관련 API가 소개되었고,

- Circle Surface를 이용하여 다수의 오브젝트를 관리하는 기법이 언급되었으며,

- progressbar, slider, spinner, datetime, scroller 등의 예시를 보여주었습니다.

기어S2에서는 윈셋만 사용해도 흥미로운 User interaction 구성이 가능하겠네요.


 다섯번째 세션 "EFL 앱 개발을 위한 팁 소개", 윤진


EFL 앱을 짜며 재미난 팁들을 60~70개 정도 모아두었는데요,

그 중에서 10개를 추려서 발표준비를 했습니다.

준비를 하고 보니 60분 정도 분량이더군요.

하지만, 주어진 시간은 30분!

그래서 전반부 5개만 발표하겠다고 말씀드리고 딱 5개만 발표했습니다.

뒤의 5개는 내년 포럼에서 그대로 다시 써먹겠습니다...는 아니고,

조만간 블로그에서 다뤄볼 생각입니다.


이번에 다룬 내용은 아래와 같습니다.

- Manage Data with evas_object_data_set()

- Manage Memory with elm_object_content_set()

- Manage Performance with mainloop

- Manage Object Size with min & relative

- Manage Events between C & EDC


여섯번째 세션 "이미지 마스킹 & 필터", Jean-Philippe ANDRE


"GL Engine, Simple image object, Image size, No border, Only one mask"


Text Effects


"Text Effects"


"Grow > Blur > Blur > Blend"


"Blend, Blur, Color curves, Grow, Mask, Bump map, Displacement"


"Only Text & Image"


Sources


https://www.enlightenment.org/docs/efl/advanced/eflgfxfilters


장필립님이 발표하신 마스킹과 필터링은 앱단에서도 굉장히 유용하게 사용되겠네요.

안정화된 버전이 나오려면 내년까지 기다려야할지도 모르겠지만,

EFL만으로 포토샵에서나 사용하던 효과를 쓴다는 것이 흥미롭습니다.

점차적으로 재미난 필터들이 추가되리라 기대해봅니다.


일곱번째 세션 "EFL 오브젝트 모델", 엄지용님


"How to use Eo"


"To create Eo class manually, too Hard! Use Eolian!"


class sample


모든 EFL 라이브러리(Eina 제외)의 조상으로 Eo가 등장하였습니다.

C++에서 상속과 같이 필수적인 기능만을 추려서 별도의 syntax를 Eo로 만들었습니다.

EFL의 컴포넌트들은 Eo를 상속하여 기능을 정의하도록 변경되었습니다.

Eolian을 통해서 나오는 구현부를 C 외의 언어로도 짤 수 있습니다.

차후 다른 언어로 EFL을 확장하기 용이하게 기반을 닦아놓은 셈입니다.

다만, Eo로 한꺼풀 감싸므로 성능이 7% 정도 떨어진다고 합니다.

하지만, 최적화가 진행 중에 있으니 점차 나아지겠지요.


여덟번째 세션 "EFL 벡터 그래픽", Subhransu Sekhar Mohanty


Evas 블록 하단에 자리한 Ector


Vector 그래픽을 위한 캔버스와 Evas_Object_VG


Evas_VG 관련 함수


벡터그래픽은 그 동안 줄기차게 요구했던 기능이기도 한데요,

이번에 탑재가 되었으니 여러가지 실험을 해보고 싶단 생각이 듭니다.

evas_object_vg_add()로 객체를 하나 생성한 후,

Efl_VG를 사용하여 shape, fill, stroke, transformantion을 지정하면 됩니다.

API set만 봐서는 간단하게 사용할 수 있어보입니다.


아홉번째 세션 "16살 된 EFL은 어떻게 관리하고 배포할까?", 서주영


역시 발표의 달인, 천재태지 서주영님.

발표하는 내내 재미난 퀴즈도 내주시고 여러차례 빅재미를 안겨주었습니다.

릴리즈를 하며 겪은 살아있는 체험담을 들려주었는데요,

오픈소스 릴리즈에 대해 살짝이나마 엿볼 수 있는 시간이었습니다.


마지막 세션 "EFL 신규 디버깅 프로파일러", Carstein Heitzler


짜잔, Eina DebugD가 나왔어요~


그 동안 제대로된 EFL 프로파일링 툴이 없었는데요,

드디어 쓸만한 프로파일링 툴이 나왔습니다.

아직은 초기 버전이라 실제 개발단에서 유용하게 쓰려면 좀 더 시간이 걸릴테지만,

하이츨러 마스터의 원대한 계획이 모두 달성되면,

gdb나 여타의 프로파일링 툴을 사용하지 않고도 대부분의 상황에서 유용하게 사용될 겁니다.


이번 EFL 포럼에서는 참가자들의 날카로운 질문도 많이 있었습니다.

날선 비판이나 애정어린 조언도 있었는데요,

모두 EFL이 무럭무럭 자라는데 도움이 될 거라 확신합니다.


오전에 커스터마이징된 edc를 사고 팔 수 있는 장터가 필요하단 참가자분의 아이디어에,

하이츨러가 바로 장터를 만들어 보여주기도 하였습니다.

EFL은 매일매일 발전하며 부족한 부분을 메꾸고 있습니다.

많은 질책과 격려 부탁드립니다.


끝_


지난 주 모처에서 타이젠 앱개발을 주제로 발표를 하였습니다.

발표에 참여하는 분들이 여러가지 면에서 흥미로운 요소를 지니고 있어서,

그 동안 한 번도 보여준 적이 없는 형태로 발표를 준비하였습니다.

발표물은 한 번 쓰고 폐기처분해야하는 상황이라 아쉽긴 하지만,

 발표문에서 타이젠 네이티브앱 초보 개발자에게 흥미로운 내용만을 추려서 포스팅 합니다.



1. 앱라이프사이클


타이젠 앱라이프사이클은 앱의 동작방식을 확정지을 수 있다는 것만으로도 의미가 있지만,

라이프사이클을 활용하여 런칭속도를 최적화할 수 있는 포인트가 있기에 매우 중요합니다.


지난 데브랩때도 이 부분을 강조하여 설명을 드렸었죠.

(관련 포스팅 : http://storycompiler.tistory.com/138)


우선 최적화 포인트는 잠시 접어두고 앱사이클을 따져봐야겠지요.

타이젠의 앱 라이프사이클은 아래 5가지 콜백으로 관리됩니다.


- app_create

- app_terminate

위의 두가지는 앱이 각각 생성될때와 종료될때 불립니다.

가장 기본적인 라이프사이클을 관리하는 함수입니다.


- app_resume

- app_pause

위의 두가지는 앱윈도우의 속성과 관련이 있습니다.

윈도우가 1px이라도 화면에 보여지는 순간 resume이 되고,

1px 조차도 보이지 않게 되면 pause가 됩니다.


네이티브앱에서는 ui가 없는 service 앱도 개발할 수 있는데요,

service 앱의 경우는 resume / pause 콜백이 불리지 않습니다.

왜냐하면 위에서 언급했듯,

resume / pause는 윈도우와 함께 동작하는 피쳐이기 때문이지요.


- app_control

control은 앱을 런칭할 때 부가적인 정보를 전달하는 수단으로 사용됩니다.

caller 앱에서 callee 앱에게 정보를 전달할 수도 있고,

service 앱이 ui 앱에게 정보를 전달할 수도 있겠지요.


타이젠 네이티브앱은 최초 런칭시,

앱이 사전에 콜백으로 등록한,

app_create_cb(), app_control_cb(), app_resume_cb()이 순서대로 불립니다.

최초로 불리는 app_create_cb() 함수는,

앱이 mainloop에 진입하기 직전에 수행하는 함수입니다.

앱이 app_create_cb()에서 리턴되면,

바로 mainloop에 진입하여 app_create_cb()에서 요청한 대상에 대해 렌더링을 실시합니다.

이 때 벌어지는 렌더링이 앱 라이프사이클 중에 최초의 렌더링입니다.


그리고 두번째 렌더링은 통상 app_control_cb()을 실행하고 이뤄집니다.

그렇기 때문에 첫번째 렌더링이 빠르게 이뤄질 수 있도록,

app_create_cb()을 간소하게 짤 필요가 있습니다.

바로 이 부분이 최적화 포인트인 셈입니다.


간단하게 라이프사이클을 등록하는 코드를 보면 아래와 같습니다.


int main(int argc, char *argv[])
{
    struct appdata ad;
    ui_app_lifecycle_callback_s event_callback;

    event_callback.create = app_create;
    event_callback.terminate = app_terminate;
    event_callback.pause = app_pause;
    event_callback.resume = app_resume;
    event_callback.app_control = app_control;
    return ui_app_main(argc, argv, &event_callback, &ad);
}



2. 레이아웃

UI를 가진 앱이라면 앱과 사용자와 교감하는 인터페이스를 우선적으로 고려해야합니다.

네이티브 앱의 경우 레이아웃은 edc를 빼놓고 이야기할 수 없겠지요.


edc로 화면의 레이아웃을 구성하고 C로 edc로 짠 레이아웃에 위젯들을 탑재합니다.

C코드에서 edc를 로딩할 때 사용하는 함수가,

elm_layout_add()입니다.

그리고 로딩된 edc 레이아웃에 C에서 작성한 오브젝트를 탑재할 수 있습니다.

elm_object_part_content_set()

위의 함수를 사용하면 간단하게 탑재가능하지요.


탑재를 했으면 반대로 해제를 하는 함수도 있겠지요.

elm_object_part_content_unset()


위의 함수와 함께 메모리 관리에 대해 고민하는 것도 흥미로울 것 같네요.

이 부분은 SOSCON에서 진행할 Devlab이나 EFL 트랙 발표에서 좀 더 다룰 예정입니다.


edc에서 이뤄지는 레이아웃은 아래와 같은 형태가 되겠네요.

edc에서는 rel1 / rel2를 사용하여 각각의 파트마다 위치와 크기를 지정할 수 있습니다.

이미 사용하고 계시다면 굉장히 간단하게 코딩 가능한 스크립트라는 것을 아시겠죠?



3. 뷰플로우

앱은 다수의 뷰로 구성이 됩니다.

하나의 뷰로만 구성된 간단한 앱도 있습니다만,

보통은 몇 단계의 depth로 앱의 세부항목에 다다르는 구조로 되어 있지요.


각각의 뷰는 기본적으로 stack에 넣어 관리를 하는데요,

그 stacking을 도와주는 객체가 elm_naviframe_xxxx() 함수입니다.


naviframe의 stack에 뷰를 push / pop하며 화면 전환을 할 수 있습니다.

화면 전환간에 default로 동작하는 이펙트는 오른쪽에서 왼쪽으로 기존 뷰를 덮으며 나타나는 이펙트입니다.

이펙트는 customize를 통해 신규로 적용이 가능합니다.



naviframe에서 default로 보여지는 타이틀 영역은,

elm_naviframe_item_title_enabled_set() 함수를 사용하여 없앨 수 있습니다.


그리고 elm_naviframe_items_get() 함수로,

naviframe에 들어간 아이템의 리스트를 얻어올 수 있습니다.


stack은 top에만 넣고 뺄 수 있는 구조기에,

중간에도 넣을 수 있도록 insert 관련 함수도 사용할 수 있습니다.

elm_naviframe_item_insert_before()

elm_naviframe_item_insert_after()



4.  비주얼 인터액션

화면을 구성하고 있는 개별 컴포넌트에 각종 효과를 적용할 수도 있습니다.

C에서는 elm_transit 계열의 함수를 사용하여 효과를 줄 수 있고,

edc에서는 program을 활용하여 효과를 줄 수 있습니다.


여기서는 비교적 직관적으로 사용 가능한 edc를 살펴 보겠습니다.

edc는 화면의 구성요소를 의미하는 part와 part 간의 동작을 정의하는 program으로 나뉩니다.


			part {
				name: "popup";
				type: RECT;
				description {
					state: "default" 0.0;
					rel1 { relative: 1.0 0.0; }
					rel2 { relative: 2.0 1.0; }
					color: 154 187 211 255;
					visible: 1;
				}
				description {
					state: "show" 0.0;
					inherit: "default" 0.0;
					rel1 { relative: 0.0 0.0; }
					rel2 { relative: 1.0 1.0; }
				}


위의 파트는 2가지 description을 가지고 있습니다.

각각의 description은 컴포넌트의 위치를 확정하는 rel1 / rel2 값을 달리 가져가고 있습니다.

위처럼 앱의 각각의 상태에 대한 확정은 part에서 진행합니다.


			program {
				name: "popup_show";
				signal: "popup_show";
				action: STATE_SET "show" 0.0;
				target: "popup";
				transition: DECELERATE 0.3;
			}
			program {
				name: "popup_hide";
				signal: "popup_hide";
				action: STATE_SET "default" 0.0;
				target: "popup";
				transition: DECELERATE 0.3;
			}


그리고 part에 위처럼 program이 붙어서 동작제어를 가능하게 합니다.

위의 program은 popup_show라는 시그널이 C파일로부터 날라오면,

popup 파트의 description을 "show"로 변경해줍니다.

만약 transition이 설정이 되어 있다면,

transition의 값을 참고하여 timer를 돌려 부드러운 이펙트로 보여줍니다.



5. 최적화

앱을 위한 화면구성을 완료했다면, 이제는 최적화에 손을 쓸 차례입니다.

Native 앱에는 최적화를 다양한 방법이 있습니다.


앱단에서 가장 손쉽게 관리할 수 잇는 방법은,

elm_gengrid와 elm_genlist 윈셋을 적극적으로 사용하는 것이겠지요.


elm_gen 시리즈는 화면에 보여지고 있는 영역 위주로 메모리에 로딩하고,

보이지 않는 영역은 메모리에서 언로딩하는 방법을 사용하여 메모리를 절약합니다.



genlist에 아이템을 삽입할때는,

아이템의 레이아웃을 edc로 정의해줄 수 있습니다.

위의 Class의 .item_style 필드가 커스터마이즈한 edc입니다.



위의 edc에서는 레이아웃에 필요한,

icon과 name part를 정의하고 있습니다.



그리고 레이아웃에 채워넣을 icon과 텍스트는,

content_get 필드에 대입되어 있는 함수와 text_get 필드에 정의한 _text_cb의 리턴값으로 결정됩니다.



6. 언어변경

언어는 오픈소스인 gettext를 사용하고 있습니다.

gettext 함수를 사용하려면 국가마다 po 파일이 있어야 하지요.

앱에서 지원하고자 하는 나라수만큼 po 파일을 준비해두어야 합니다.


po 파일을 구성하는 msgid에 모든 언어에서 공통적으로 지칭할 고유아이디를 적어둡니다.

C파일에서 텍스트를 노출해야하면,

msgid에 있는 값을 노출해야하는 곳에 적어두어야 합니다.

msgstr에는 고유아이디와 설정언어의 조합을 통해 gettext()로 번역되어 나옵니다.


시스템 상에서 언어가 바뀌면,

앱라이프사이클과 함께 등록한 language_changed_cb()이 불립니다.

그 함수 안에서 변경된 언어를 설정해두고,

다시 gettext()가 불리도록 update만 시켜주면 됩니다.



이상이 초보개발자들이 궁금해할만한 내용이었습니다.

각각의 내용은 하나의 포스팅으로 완결될 수 있는바,

시간을 마련하여 언젠가 포스팅을 하도록 하겠습니다.


그럼 좋은 하루 보내세요~

끝_

  1. 전광하 2015.11.26 20:53

    " naviframe의 stack에 뷰를 push / pop하며 화면 전환을 할 수 있습니다.
    화면 전환간에 default로 동작하는 이펙트는 오른쪽에서 왼쪽으로 기존 뷰를 덮으며 나타나는 이펙트입니다.
    이펙트는 customize를 통해 신규로 적용이 가능합니다 " 라고 하셨는데.. 어떻게 customize를 하는지 알 수 있을까요? 아무리 검색해도 안나오네요.

    • 안녕하세요, 전광하님.
      커스터마이징을 하기 위해서는 edc 파일을 수정해야하는데요,
      답글로는 그 내용을 담을 수 없고(너무 이야기할게 많습니다),
      빠른 시일내로 전체적으로 정리하는 시간을 마련해보도록 하겠습니다.
      언젠가 문의가 들어올 것으로 예상은 했었는데요,
      문의가 들어오기 전에 준비를 했었어야 했는데...
      아무튼 11월은 벌써 끝나가니 12월 중엔... 기필코 정리하도록 하겠습니다.
      그 전까지는 현재 naviframe을 사용하시고,
      아니면 edc에서 naviframe 역할을 하는 그룹을 만드시면 됩니다(edc를 어느정도 아시는지요?).

      곧, 커밍순 하겠습니다. :)

      감사합니다!

  2. 전광하 2015.12.01 00:48

    답변감사합니다. 열정적으로 글들을 읽고있고, 모든 edc 글들을 읽고 연습중입니다. 네비프레임은 포스팅되면 해볼게요 감사합니다~

    • 안녕하세요, 전광하님. edc가 마의 산맥으로 여겨질 수도 있을텐데요. 어려움이 생기면 언제든지 주저말고 문의주세요. :) 그럼 즐거운 코딩하시길~!

+ Recent posts