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

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

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

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

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



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

어느 플랫폼에서건 앱을 작성하게 되면,

앱의 라이프사이클에 대해 고민을 하게 됩니다.


앱 프로세스가 생성(fork & exec)된 직후에 수행해야하는 루틴,

종료 직전에 처리해야하는 루틴,

앱이 일시정지할 때 혹은 다시 시작할 때 필요한 루틴 등은,

앱 라이프 사이클을 구상할때 필히 고려해야하는 요소입니다.


안녕하세요, Tizen 개발자 윤진입니다.


타이젠 2.3 버전 기준으로 앱  라이프사이클은 "application"이라는 framework에서 관리합니다.

"application"의 소스를 살펴보려면,

아래처럼 command를 입력하여 소스를 clone 받을 수 있습니다.

간단하게 웹으로 보고 싶다면 여기를 누르면 됩니다.



앱은 main()에서 앱 라이프사이클을 관리해주는 ui_app_main()을 불러줘야 합니다.

ui_app_main()은 아래와 같이 선언되어있습니다.


/**
 * @brief Runs the application's main loop until ui_app_exit() is called.
 *
 * @details This function is the main entry point of the Tizen application.
 *          The app_create_cb() callback function is called to initialize the application before the main loop of application starts up.
 *          After the app_create_cb() callback function returns true, the main loop starts up and the app_control_cb() callback function is subsequently called.
 *          If the app_create_cb() callback function returns false, the main loop doesn't start up and app_terminate_cb() callback function is called.
 *          This main loop supports event handling for the Ecore Main Loop.
 *
 * @since_tizen 2.3
 * @param[in] argc The argument count
 * @param[in] argv The argument vector
 * @param[in] callback The set of callback functions to handle application lifecycle events
 * @param[in] user_data The user data to be passed to the callback functions
 *
 * @return 0 on success, otherwise a negative error value
 * @retval #APP_ERROR_NONE Successful
 * @retval #APP_ERROR_INVALID_PARAMETER Invalid parameter
 * @retval #APP_ERROR_INVALID_CONTEXT The application is illegally launched, not launched by the launch system
 * @retval #APP_ERROR_ALREADY_RUNNING The main loop already starts
 *
 * @see app_create_cb()
 * @see app_terminate_cb()
 * @see app_pause_cb()
 * @see app_resume_cb()
 * @see app_control_cb()
 * @see ui_app_exit()
 * @see #ui_app_lifecycle_callback_s
 */
int ui_app_main(int argc, char **argv, ui_app_lifecycle_callback_s *callback, void *user_data);

ui_app_main()에 들어가는 세 번째 인자 ui_app_lifecycle_callback_s는 라이프사이클을 위한 콜백을 등록해주는 부분입니다.

ui_app_lifecycle_callback_s는 아래와 같은 구조체입니다.


typedef struct
{
    app_create_cb create; /**< This callback function is called at the start of the application. */
    app_terminate_cb terminate; /**< This callback function is called once after the main loop of the application exits. */
    app_pause_cb pause; /**< This callback function is called each time the application is completely obscured by another application and becomes invisible to the user. */
    app_resume_cb resume; /**< This callback function is called each time the application becomes visible to the user. */
    app_control_cb app_control; /**< This callback function is called when another application sends the launch request to the application. */
} ui_app_lifecycle_callback_s;


위의 구조체를 하나 만들어준 후,

create와 terminate,

pause와 resume,

그리고 app_control 콜백을 만들어 구조체에 채워넣어주어야 합니다.


typedef bool (*app_create_cb) (void *user_data);
typedef void (*app_terminate_cb) (void *user_data);
typedef void (*app_pause_cb) (void *user_data);
typedef void (*app_resume_cb) (void *user_data);
typedef void (*app_control_cb) (app_control_h app_control, void *user_data);

app_create_cb은 앱이 fork-exec된 이후 mainloop에 진입하기 직전에 불립니다.

이후 앱이 terminate되어 메모리에서 제거된 후 다시 런칭되기 전까지 불리지 않습니다.

앱이 런칭된 직후 프로세스를 초기화하는 루틴은 이곳에서 수행됩니다.


static int __before_loop(struct ui_priv *ui, int *argc, char ***argv)
{
    int r;

    if (argc == NULL || argv == NULL) {
        _ERR("argc/argv is NULL");
        errno = EINVAL;
        return -1;
    }

    g_type_init();
    elm_init(*argc, *argv);

    r = appcore_init(ui->name, &efl_ops, *argc, *argv);
    _retv_if(r == -1, -1);

    LOG(LOG_DEBUG, "LAUNCH", "[%s:Platform:appcore_init:done]", ui->name);
    if (ui->ops && ui->ops->create) {
        r = ui->ops->create(ui->ops->data);
        if (r == -1) {
            _ERR("create() return error");
            appcore_exit();
            errno = ECANCELED;
            return -1; 
        }
        LOG(LOG_DEBUG, "LAUNCH", "[%s:Application:create:done]",
            ui->name);
    }   
    ui->state = AS_CREATED;

    __add_climsg_cb(ui);

    return 0;
}


위의 코드는 __before_loop() 함수에서 사용자가 등록한 create()를 불러주는 부분입니다.

(git://review.tizen.org/framework/appfw/app-core)

함수명에서 알 수 있듯,

mainloop에 진입하기 전에 create()을 불러주는 것을 확인할 수 있습니다.

create()를 실행한 직후 바로 mainloop에 진입합니다.

mainloop에서는 앱이 create()에서 수행한 루틴을 해석하여 첫번째 프레임을 렌더링하겠죠.


app_terminate_cb은 app_create_cb의 반대개념으로,

앱이 종료될 때 한 번 불립니다.

이 콜백에서 메모리를 정리하고,

현 프로세스에서 설정한 값들이나 사용자 데이터를 저장합니다.


app_pause_cb은 앱이 더 이상 화면에서 보이지 않게 된 순간 호출됩니다.

pause에서는 앱이 점유하고 있던 메모리를 내려놓거나,

pause되기 전까지 사용자가 수행한 결과물을 정리할 수 있습니다.


app_resume_cb은 화면에서 사라진 앱이 다시 화면에 보이게 되면 불립니다.

홈/메뉴를 통해 앱 A를 런칭했다가,

홈키나 파워키로 앱 B가 앱 A 위로 올라간 후,

다시 앱 A에 진입하게 되면 앱 A의 resume 콜백이 불리게 됩니다.

resume에서는 앱이 pause때 일시정지해두었던 기능을 다시 수행할 수 있도록 설정하면 됩니다.


app_control_cb은 위에서 설명한 create/terminate/pause/resume과는 달리 app_control_h을 인자로 받습니다.

app_control_cb은 create나 resume와는 다르게,

앱을 런칭하는 쪽에서 특정 정보를 app_control_h에 채워서 줄 수 있습니다.

때때로 앱은 런칭상황에 따라 다른 뷰를 보여주거나 다른 동작을 해야할 필요가 있겠죠.

예를 들어, 홈/메뉴를 통해 앱을 실행할 때와 스토어에서 앱을 실행할 때 서로 다른 뷰를 보여줄 필요가 있을 수도 있습니다.

이때 홈/메뉴는 홈/메뉴에서 앱을 런칭한다는 정보를 실어보내고,

스토어는 스토어에서 앱을 런칭한다는 정보를 실어보낸다면,

앱은 각각의 상황에 맞춰 뷰를 구성할 수 있습니다.


샘플앱을 런칭시켜 어떤 콜백이 불리는지 살펴보면 흥미로운 사실을 알 수 있습니다.

홈/메뉴를 통해 앱을 런칭시키면,

단지 app_create_cb만 불리지 않습니다.

총 3개의 콜백이 차례대로 불립니다.



app_create_cb은 애초에 설명한대로 앱을 런칭하여 mainloop에 진입하기 전에 불리게 됩니다.

하지만, app_control_cb은 왜 불리는 것일까요?

app_control은 런칭을 요청한 caller 앱에서 callee 앱으로 요청합니다.

callee 앱은 mainloop에 진입한 직후에 app_control_cb()을 처리하게 되죠.


static int __app_launch_local(bundle *b) 
{
    if (!aul_is_initialized())
        return AUL_R_ENOINIT;

    if (b == NULL) {
        _E("bundle for APP_START is NULL");
    }   
    if (g_idle_add(__app_start_internal, b) > 0)
        return AUL_R_OK;
    else
        return AUL_R_ERROR;
}

위의 코드는 caller 앱에서 g_idle_add()를 등록하여 callee 앱에서 등록한 app_control_cb을 불러주도록 설정하는 부분입니다.

저 코드로 앱이 idle 상태에 진입한 직후에 app_control_cb의 루틴을 타게 되는 것입니다.

(git://review.tizen.org/framework/appfw/aul-1)


app_control_cb 내에서 윈도우를 elm_win_activate()를 이용하여 최상단으로 올리면,

드디어 앱이 사용자에게 노출이 됩니다.


앱이 일부의 영역이라도 보이게 되면, app_resume_cb()이 불리게 됩니다.

resume()은 앱이 보이게 되면 불리는 콜백이기 때문에,

초기런칭루틴에서도 예외없이 불릴 수밖에 없습니다.

따라서 앱 런칭 시점에는 세 개의 콜백이 약간의 시간차를 두고 연달아 불리게 되죠.


Application Life Cycle Management


이상 타이젠의 앱 라이프사이클을 간단하게 설명하였습니다.

앱 라이프사이클을 잘 이용하면,

런칭속도 개선에 힘을 보탤 수 있습니다.


오늘은 여기서 마무리할까 합니다.

30분이면 포스팅할 수 있을거란 애초의 기대에서 벗어나

3시간째 글을 쓰고 있네요...

아무래도 내일 제 시간이 일어날 수 있을지 걱정이 됩니다.


끝_

+ Recent posts