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

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

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

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

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



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가 마의 산맥으로 여겨질 수도 있을텐데요. 어려움이 생기면 언제든지 주저말고 문의주세요. :) 그럼 즐거운 코딩하시길~!


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


지난 8월 29일에 열린 타이젠 DEVLAB @SEOUL 행사에서 발표한 자료를 공유합니다.

사내에서 만든 자료는 보안 등 여러가지가 신경 쓰여서,

발표한 내용을 토대로 집에서 재작업하였습니다.


행사에서 발표를 하며 발표자료를 바로 올려드리겠다고 약속 드렸었는데요,

많이 늦어진 점 무척이나 송구스럽습니다.


겨우 45분짜리 발표라서,

준비해갔던 내용 모두를 전달해드리지 못한 부분도 아쉽습니다.


하지만, DEVLAB 행사는 계속해서 열릴 예정입니다.

첫 DEVLAB의 아쉬움은 다음 DEVLAB에서 달랠 수 있겠지요.

다음 DEVLAB은 10월 말 SOSCON과 함께 열릴 예정인데요,

많은 관심 부탁드립니다.


제가 발표한 부분은 타이젠 Native 앱 최적화입니다.

Native 초/중급 개발자를 대상으로 발표를 진행하였습니다.


최적화를 논할때 반드시 필요한 AppFW과 UIFW 내용을 전반부에 다뤘고,

후반부에는 실제 코드를 예시로 들어가며 최적화 방법을 공유하였습니다.


아래 자료에 대해 궁금한 점이 생기시면 댓글 달아주세요.

다음 DEVLAB에서는 보다 다양하고 심도깊은 주제로 찾아뵙겠습니다.


ppt가 필요하신 분은 따로 말씀해주시면 보내드리겠습니다.

그럼 좋은 하루 보내세요~


추신 : '본인이 더 천재인' 천재태지 서주영님의 요청이 있어 slideshare에 업로드하였습니다.

http://www.slideshare.net/theojini/blogging-tizen-devlabseoul-ppt-optimization



































  1. 코코콩 2015.09.18 13:19 신고

    감사합니다. SOSCON이 평일에 열리는군요...
    하핫; 연차를 내고 가야겠네요

  2. 코코콩 2015.09.18 15:17 신고

    가고싶은데 어떤걸 신청하면 되는지 모르겠네요 ... ㅠㅠㅠㅋ

    • http://efl.or.kr/ 여기에 가시면 efl 트랙에 대한 정보를 차차 얻으실 수 있을거예요. 여러 유용한 팁들을 얻으실 수 있을거예요!

  3. 초보개발자 2015.09.25 17:42

    안녕하세요. 항상 매번 앞으로도 많은 도움을 받아가고 있습니다. 감사드리며, ppt 보내주신다하셔서..
    아무한테나 보내주실지 모르겠지만, 보내주실수 있으시다면
    seromicom@gmail.com
    위 주소로 보내주실수 있으신지요??
    저도 현직 몰라도 너무몰라 부끄럽지만 타이젠 개발자라고.. 자리 차지하고 있어서..
    SOSCON 을 가지 않을수가 없을 듯 하네요.. ^^

    • 안녕하세요! 집에 가서 바로 보내드리겠습니다. 근데 타이젠 개발을 하신다면 저랑 가까운 곳에 계시겠네요. 같이 차나 한잔 하시죠~!

  4. 천재태지서주영 2015.10.01 00:23

    slideshare에 올려주세요~

    • 주영이가 올리라면 올려야지.
      좀 늦었지만 slideshare에 올렸사옵니다. :)
      http://www.slideshare.net/theojini/blogging-tizen-devlabseoul-ppt-optimization

+ Recent posts