id. Hermet

UIAnimation.update(current):
    /* progress 값을 구한다. begin은 play() 수행 시 기록한 시작 시각이며
       duration은 애니메이션 재생 시간이다. */
    progress = (current - .begin) / .duration

    /* 시간 초과에 주의 */
    if(progress > 1) progress = 1

    /* 콜백 함수를 호출한다. 마지막 인자로 progress를 전달하는 것에 주목 */
    .userFunc(self, .target, progress)

    /* 애니메이션 종료 */
    if(progress == 1) .finish()

• 이징 애니메이션 (Easing Animation)

3. 필터 효과

본 절에서는 앞 절에서 살펴본 애니메이션 기법 외 애니메이션 응용 사례를 추가로 확인한다. 그중 4.6.3절 이미지 필터는 비주얼 효과를 보여주는 대표 사례로서 여기에 애니메이션을 결합한다면 UI 심미성을 더욱 높일 수 있다. 본 절에서는 4장에서 다루지 않았던 이미지 필터를 구현하고 애니메이션을 적용하는 과정을 학습함으로써 애니메이션에 대한 이해와 응용력을 다진다.

3.1 블러 필터

필터 효과의 대표로 꼽을 수 있는 블러는 이미지를 흐리게 하는 효과를 제공한다. 이는 마치 카메라 초점을 조절하는 것과 유사한데 배경 이미지나 특정 뷰를 흐리게 함으로써 일부 UI나 콘텐츠를 강조한다. 실제 iOS의 팝업(Popup) UI는 사용자가 팝업 콘텐츠에 집중할 수 있도록 팝업 배경에 블러 효과를 적용한다.

그림 10: 표준 편차에 따른 가우시안 곡선

1. 가우시안 함수를 이용하여 개입할 픽셀의 가중치 값을 테이블(블러 필터 커널)에 기록한다. 
2. 원본 영상의 픽셀을 순회하며 픽셀마다 커널의 가중치 값을 곱한다.
3. 2번 단계에 개입하는 인접 픽셀에도 가중치 값을 곱한 후 현재 픽셀과 합산한다.

UIBlurFilter.power(Var val):
    kSize = (2 / 2)                                    //커널 테이블 크기 3x3 고정
    sigma = val                                        //표준 편차
    .kernel = Kernel[kSize * 2 + 1, kSize * 2 + 1]     //중앙 픽셀을 위해 kSize + 1

    /* 가우시안 함수를 이용한 가중치 계산 */
    s = 2.0 * sigma * sigma

    for(y = -kSize; y <= kSize; y++)
        for (x = -kSize; x <= kSize; x++)
           r = x * x + y * y
           weight = exp(-(r / s)) / (PI * s)
           .kernel[y + kSize][x + kSize] = weight

UIBlurFilter implements UIFilter:
   /* 
    * 블러 필터
    * @p in: Pixel
    * @p coord: Point
    */ 
    func(in, coord, ...):
        Pixel out                             //출력 픽셀 
        Pixel buffer[,] = .src.map()      //블러를 적용할 이미지
        Kernel kernel[,] = .kernel        //커널 테이블

        /* 가중치를 적용하여 인접한 픽셀과 합성 수행
           예제는 3x3 커널 크기인 경우로 국한 */ 
        if(.blurSize == 1)

            //메모리 범주를 벗어나지 않도록 예외처리 하는 코드는 생략
            Pixel lt = buffer[coord.y - 1][coord.x - 1]   //left top 
            Pixel t = buffer[coord.y - 1][coord.x]        //top 
            Pixel rt = buffer[coord.y - 1][coord.x + 1]   //right top 
            Pixel l = buffer[coord.y][coord.x - 1]        //left 
            Pixel r = buffer[coord.y][coord.x + 1]        //right 
            Pixel lb = buffer[coord.y + 1][coord.x - 1]   //left bottom 
            Pixel b = buffer[coord.y + 1][coord.x]        //bottom 
            Pixel rb = buffer[coord.y + 1][coord.x + 1]   //bottom right 

           //픽셀 합성, 가중치를 곱한 픽셀값 합산
           out = (lt * kernel[0][0] + t * kernel[0][1] + rt * kernel[0][2] +
                 l * kernel[1][0] + in * kernel[1][1] + r * kernel[1][2] +
                 lb * kernel[2][0] + b * kernel[2][1] + rb * kernel[2][2])

        return out

obj = UIObject():
...
filter = UIBlurFilter():
    .power = 1            //블러 단계를 1로 지정
obj.filters += filter     //어떤 UI 객체에 블러 필터 적용

그림 12: 필터 수행을 위한 2단계 렌더링

3.2 필터 애니메이션

일정 시간 동안 필터값을 조정하여 필터 애니메이션을 만들 수 있다. 대표로 블러 필터에 애니메이션 적용한다면 시간 경과에 따라 흐려지는 효과가 나타난다.

그림 13: 블러 애니메이션

UIObject content
...
//블러 필터 추가
filter = UIBlurFilter():
    .filters += filter

//1초 동안 애니메이션 가동
animation = UIAnimation(1.0)

f = closure(UIAnimation animation, UIObject obj, Var progress):
    filter = UIBlurFilter():
        .power = 1 + 4 * progress     //1초 동안 블러 단계는 1에서 5로 증가한다.
    obj.filters += filter

animation.EventUpdated += {f, obj}
animation.play()

그림 14: 유저 인터렉션 수행 단계

사용자 상호작용(User Interaction)은 입력, 조건 처리, 기능 수행, 상태 변경 네 단계를 포함한다. 본 절에서는 사용자 입력을 받는 입력 처리하는 단계에 초점을 둔다.

입력 신호는 여러 정보를 기록한다. 가령 어떤 장치에서 발생한 신호인지 구별하기 위한 ID, 신호가 발생한 시간 정보(Timestamp), 입력 신호의 화면 상 위치(Position), 키가 눌렸는지(Press/Release) 커서가 이동했는지(Move) 여부 등 정보가 이에 해당한다. 서버와 클라이언트 간 이벤트 전송은 비동기적이므로 클라이언트는 전달받은 신호를 입력 신호 큐(event queue)에 축적한다. 만약 UI 엔진이 입력 신호 송신을 전담하기 위한 스레드를 별도로 운용한다면 UI 앱의 메인루프는 입력 신호로 동작이 지연되는 것을 피할 수 있다. 이 경우 메인루프는 이벤트 대기 단계에서 입력 신호가 큐에 존재하는지 확인하고 있는 경우 이벤트 처리 과정으로 진입하면 된다. 그 후 입력 신호는 캔버스 또는 위젯 엔진, 필요에 따라 제스처 관리자(Gesture Manager) 등을 거친 후 최종적으로 대상 UI 객체까지 전달된다.

그림 16: UI 컨트롤로 입력 이벤트를 전달하는 과정

캔버스 엔진은 내부에서 관리하는 UIObject 객체 리스트로부터 이벤트를 받을 대상 객체를 찾아야 한다. (코드 21) 이는 객체 리스트를 순회하며 객체 영역(Bounding Box)과 이벤트 발생 위치를 비교하여 판단할 수 있다. 일반적으로 이벤트 발생 위치에 여러 객체가 중첩된 경우 최상단 객체가 이벤트 우선순위를 갖는다. 따라서 최상단 객체를 우선으로 이벤트를 호출한다. 만약 엔진에서 이벤트 전파(Propagation) 기능을 제공한다면 이벤트를 하단의 객체로 전달할지 말지 결정할 수 있다. (그림 17)

/*
 * 캔버스 엔진 수준에서 이벤트 처리 작업 수행
 * info는 UIEngine으로부터 전달받은 입력 이벤트 정보가 기록되어 있다.
*/
UICanvas.processEvent(info, ...):
   /* 이벤트를 전파할 대상 객체 탐색
      객체 목록은 레이어 순으로 정렬되어 있다고 가정 */
    foreach(.objs, obj)
        if(obj.processEvent(info, ...) == false) break

UIObject.processEvent(info, ...):

    //활성 객체인 경우에 이벤트 수행 (2.3절 참고)
    if(obj.activate == false) return true

    //이벤트 발생 위치가 오브젝트 영역 내에 위치하는가?
    if(intersects(obj.geometry, info.position) == false) return true

    /* 자식이 존재하는 경우 자식에게 먼저 이벤트 전달
       자식 목록은 레이어 순으로 정렬되어 있다고 가정 */
    foreach (obj.children, child)
        if(child.processEvent(info, ...) == false) break

   //해당 이벤트 타입으로 등록된 콜백 함수 목록
   List eventCbs = obj.eventTable[info.type]

   //콜백 함수 순차적 호출
   foreach(eventCbs, func) func(...)

   //true인 경우 다음 오브젝트로 입력 이벤트 전파
   return obj.propagation

//객체의 이벤트 전파 여부를 위해 다음 인터페이스 제공
obj.propagateEvent = true

특수 경우로 제스처 입력을 수행해야 한다면 윈도우 서버에서 제스처 이벤트를 정의하고 처리하는 것도 가능하다. 예를 들면 모바일의 퀵패널(QuickPanel)을 활성화하는 기능이 이에 해당한다. 사용자는 화면을 수직으로 드래그(Drag)함으로써 퀵패널을 활성화한다. 퀵패널 역시 윈도우 클라이언트에 해당할 수 있으나 윈도우 서버와 긴밀하게 이벤트를 주고받기 위해서 윈도우 관리자 모듈(그림 22)로 설계할 수 있다.

//다음 UIGesture 설정은 앱에서 사용하는 제스처 기능에 전역적으로 영향을 미친다.

//tabTimeOut을 0.5초로 지정
UIGesture.tabTimeout = 0.5

//zoom 인식을 위해 두 탭 간 최소 거리를 100픽셀로 지정
UIGesture.zoomDistanceTolerance = 100

//줌 제스처 발생 시 해당 줌 팩터만큼 뷰를 확대 또는 축소
f = closure(UIView obj, UIGestureZoomInfo info):
    obj.scale = info.zoom

view = UIView():
    .EventZoom += f
...

코드 24의 10번째 줄을 확인하면 줌 팩터 값을 사용자에게 제공하기 위해 UIGestureZoomInfo 파라미터를 콜백 함수에서 정의하는 것을 확인할 수 있다. 여기서 UIGestureZoomInfo는 UIGestureInfo의 확장 타입으로서 줌 정보를 추가로 가진 구조체 정보로 볼 수 있다. 실제 인터페이스 설계 방안은 각 디자인 방침에 따르면 된다.

제스처 커스터마이징 요소를 UI 시스템 환경 설정 데이터로 기술할 수 있다면 해당 UI 시스템을 이용하는 제품마다 그 특성을 쉽게 커스터마이징 할 수 있다. 이는 더욱 유연한 UI 프레임워크 시스템을 구축하는 데 도움을 준다. 

5. 스레딩

2.2절에서 언급했듯이 60fps 앱 성능을 보장하기 위해서는 UI 엔진의 메인루프가 한 사이클마다 처리해야 하는 작업은 0.0167초 안에 끝나야 한다. 이 시간 동안 앱은 비즈니스 로직부터 렌더링 엔진의 드로잉 작업을 완수해야 한다. 예로 그림 6.2의 사용자 애니메이션 수행 함수가 어떤 작업 부하로 시간을 지연시킨다면 메인루프는 0.0167초 내로 장면을 완성할 수 없을 것이다. 같은 맥락에서, 이벤트 처리 과정 중 많은 양의 데이터를 주고받거나 연산 처리를 수행한다면 동일 문제는 발생한다. 또한 앱에서 구현한 어떤 함수가 많은 시간을 소모한다면 UI 엔진의 메인루프는 그만큼 동작이 지연되며 화면 갱신 또한 느려질 것이다. 이러한 이유로 메인 루프의 동작 수행이 지체되어 장면을 제때 만들지 못한다면 프레임 손실이 발생한다. 프레임 손실은 특히 애니메이션 시 두드러지는데 매끄럽지 않은 애니메이션 효과로 인해 사용자 경험 만족도는 하락한다. 따라서 애니메이션 중 프레임 저하가 발생하는 시나리오는 최적화의 우선순위 대상이다.

이와 같은 이유에서 UI 앱에서 많은 연산 작업이 필요한 경우 작업을 병렬로 처리하는 방법을 고려할 수 있다. 병렬 처리를 적용함으로써 가용한 다수의 컴퓨팅 유닛(CPU)을 적절히 활용하여 성능을 향상한다. 그뿐만 아니라 부하를 유발하는 작업을 별도의 스레드로 분리함으로써 메인루프의 지연을 방지한다. 핵심은 UI 엔진의 메인루프가 원활히 구동될 수 있어야 한다는 점에 있다.

우리는 병렬 처리의 기본이 되는 메커니즘으로서 스레드(Thread)를 언급하지 않을 수 없다. 현대의 프로그래밍에서 스레드는 원시적인 방법에 해당하지만, 운영체제에서는 병렬 처리의 근간이 되는 개념에 해당한다. 스레드는 유닉스(Unix)를 기반으로 하는 임베디드 시스템과 여러 운영체제에서 지원하기 때문에 호환성이 뛰어나 소프트웨어 개발에서 응용할 수 있는 방법의 하나로 채택한다. 다만 예측 불가한 동작 순서는 비결정적(Non-deterministic) 동작 결과를 초래하고 이는 디버깅을 어렵게 하지만 섬세한 설계를 바탕으로 스레드 동기화(Synchronization)와 같은 도구를 잘 활용한다면 안정적이고 효율적인 결과를 만들 수 있다. 특히 UI 프레임워크는 사용자가 쉽고 안정적으로 병렬화를 적용할 수 있도록 UI 엔진과 상호작용하는 스레드 동작과 편의 인터페이스를 제공해야 한다.

5.1 멀티 스레딩 전략

시스템과 통합된 UI 엔진을 설계한다면 멀티 스레딩 환경에서 주 스레드는 메인루프에 우선 배정한다. 메인루프를 주 스레드에 배정하면 메인루프를 프로세스의 라이프사이클과 동일시 할 수 있으며 UI 앱의 라이프사이클을 관장하기 유리해진다. 이 경우 사용자는 작업 스레드(Worker Thread)를 추가하여 메인 루프 외 어떤 작업을 병렬화 할  수 있다. 여기서 만약 작업 스레드의 수행 결과물이 UI에 반영되어야 한다면 작업 스레드와 주 스레드 간 공유 자원을 안전하게 접근할 수 있는 동기화(Synchronization)를 수행해야 한다. 동기화 방안으로는 임계 영역(Critical Section)이 있으며 이 구간만큼은 메인루프도 지정된 사이클을 중단하고 작업 스레드와 데이터 공유 작업을 수행한다. 여기서 임계 영역이란 여러 스레드가 공유 자원에 동시에 접근하면 안 되는 코드 일부를 의미한다. 한편 작업 스레드의 결과물이 UI에 의존성을 갖지 않는다면 사용자는 작업 스레드를 독립 프로시저(Procedure)로써 비교적 쉽게 운용할 수 있다.

그림 23에서 임계 영역을 지정하기 위해 UITask(작업 스레드)에서 begin_critical_section()과 end_critical_section()을 호출한 것에 주목한다. 이때 UIEngine은 두 호출 구간에서 메인루프를 대기 상태로 만들고 작업 스레드가 UI 공유 자원에 안전하게 접근하는 것을 보장한다.

5.2 태스크

앞선 설명을 바탕으로 UIEngine은 고수준 병렬 작업을 제공하기 위해 UITask(태스크) 기능을 제공할 수 있다. UITask는 사용자가 스레드를 직접 사용하지 않고도 병렬 작업을 쉽게 구축할 수 있는 추상화한 개념을 제공한다. UITask 핵심 메서드를 살펴보면 다음과 같다.

/* UITask는 UIEngine과 동기화를 수행하는 병렬(또는 직렬) 작업을 구축한다. 사용자는 작업
   병렬화를 위해 UITask로부터 사용자 클래스를 확장한다.
   UITask는 run()을 통해 실행되고 작업 스레드에서 task()를 수행한다. task()가 종료되면
   동기화 작업을 위해 메인루프로부터 end() 메서드를 호출한다. 따라서 end()는 작업
   스레드가 아닌 주 스레드에 해당하므로 동기화 작업을 따로 수행할 필요가 없다. */
UITask:
    /* 실제 수행할 동기/비동기 작업을 구현한다. 비동기(async) 경우 task()는 작업 스레드에서
       호출되고 동기(sync)의 경우 메인루프를 구동하는 주 스레드에서 호출된다. */
    task():

    /* task()가 끝나면 호출된다. end()에서는 작업 결과물을 공유 자원(UI 객체)에
        반영한다. 또는 작업 후 리소스를 정리하는 작업을 수행할 수도 있다. */
    end():

    /* 스레드를 배정받고 task()르 실행한다. 필요하다면 메서드 인자나 컴파일러 내장
       옵션을 통해 동기/비동기 수행을 결정할 수 있을 것이다. */
    run():

/* 사용자는 비동기 작업을 수행하기 위해 UITask로부터 UserTask를 구현한다. */
UserTask extends UITask:

    /* UIImage는 캔버스 엔진에 종속된 공유 자원에 해당
       동기화를 무시한다면 작업 스레드에서 해당 객체에 접근 시 캔버스 엔진을 수행하는 주 스레드와
       불안정한 경합이 발생할 수 있다. */
    UIImage img    

    constructor():
        //img 초기 설정 수행
        ...

    /* 여기서 어떤 Heavy한 작업을 한다고 가정하자. */
    override task():
        /* 원격으로 어떤 대용량 이미지를 받아온다.
           내려받기(Download)를 완수하면 task()를 종료한다. */
            ...

    /* task() 완료 후 수행할 종료 작업 */
    override end():
        //내려받은 이미지를 이미지 객체로 출력
        .img.path = “/tmp/downloaded.png”

/* func()은 주 스레드에서 동작하는 어떤 함수다. */
func():
    task = UITask():
        .run()

그림 24: 작업 스레드 기반 UITask 수행 절차

그림 24에서 사용자 로직과 UI 엔진 즉, 메인루프는 주 스레드에서 절차적으로 수행되는 한편 태스크는 작업 스레드에서 수행된다. 그리고 UI 엔진은 두 스레드 간 작업 조율을 담당한다. 이를 위해  UI 엔진은 메인루프의 이벤트 처리 단계에 Task 요청 메시지를 해석하고(dispatch) 스레드 작업을 개시한다. (그림 25) UI 엔진은 사용자로부터 요청받은 작업을 수행할 스레드를 준비하고 작업을 실행하며 작업 스레드는 작업을 완수하면 UI 엔진으로 비동기 메시지를 보내어 작업 완료 사실을 알린다. 이후 메인루프 사이클을 수행하고 있던 UI 엔진은 다시 이벤트 처리 단계에서 해당 메시지를 확인하고 task.end()를 호출하여 사용자가 안전하게 작업을 완료할 수 있도록 한다.

그림 25에서 태스크 메시지(Task Msg)는 일반 이벤트로서 취급한다. 이는 그림 16의 사용자 입력 신호를 전달하는 방법과 동일하다. 하지만 실제 UI 엔진 운용 중 필요한 이벤트와 메시지는 복잡하고 다양하다. 따라서 이벤트를 더욱 정교하게 처리하기 위해서는 이벤트 형식마다 최적화된 이벤트 수행 루틴을 구축하는 것을 고려할 수 있다.


5.3 크리티컬 세션

앞서 살펴본 바에 의하면, UITask를 통해 어떤 작업이 완성하고 그 작업 결과물은 end() 메서드를 활용하면 단발성을 띈 작업을 병렬로 수행하는 것은 문제되지 않을 듯 하다. 하지만 비동기 작업을 진행하면서 작업 결과물을 주기적으로 반영해야 한다면 동기화 역시 주기적으로 요청해야 한다. 이를 위해 UIEngine에서 임계 영역을 지정할 수 있는 방법을 추가로 고려해 볼 수 있다.

override UserTask.task():
    /* 여기서 어떤 Heavy한 작업을 거쳐 임의 수의 이미지를 실시간으로 
       생성한다고 가정하자. 생성된 이미지는 즉시 이미지 객체를 통해 화면에
       출력해야 한다. */
    repeat (infinite)
        Pixel bitmap[] = generateImage(...)

        /* beginCriticalSection()을 호출하면 메인루프가 동작을 중단하여 
           작업 스레드에서 공유 자원에 안전하게 접근할 수 있도록 도와준다.
           동기화 작업이 끝나면 endCriticalSection()를 호출하여 메인루프가
           재개하도록 한다. */           
        UIEngine.beginCriticalSection()
        .img.load(bitmap)
        UIEngine.endCriticalSection()

• 스레드 풀 (Thread Pool)

6. 정리하기

애니메이션은 UI 앱을 보다 풍성하게 해주는 핵심 기능으로서 UI 엔진에서 반드시 다뤄야 하는 요소 중 하나이다. 이번 장에서 우리는 애니메이션 이해와 사용자가 애니메이션을 구현하는 데 있어서 필수 요건에 대해 살펴보았다.

기본적으로 애니메이션은 연속된 장면을 한 장씩 출력함으로써 표현한다. 이를 위한 메커니즘을 프레임 애니메이션을 통해 살펴보았다. 메인루프를 기반으로 애니메이션 프레임 번호를 결정하고 사용자가 애니메이션 장면을 결정하기 위한 사용자 인터페이스도 살펴보았다. 그뿐만 아니라 부드러운 애니메이션 표현하기 위한 프레임 시간 계산 및 제어 방법을 살펴보았고 애니메이션 가속 방식과 이를 커스텀 할 수 있는 메커니즘도 함께 살펴보았다. 

여러 애니메이션 기법 중 UI 객체의 속성에 변화를 둔 프로퍼티 애니메이션에 대해서 살펴보았다. 이러한 애니메이션 동작을 기반으로 필터 애니메이션을 적용해 봄으로써 애니메이션 적용 사례에 대한 이해도를 높였다. 추가로 사용자 상호 작용을 위해 사용자 입력 이벤트 처리 과정을 살펴보았고 나아가 제스처 인식의 고수준 이벤트 제공 방안도 살펴보았다.

마지막으로 스레드 풀을 적용한 고수준 태스크 스케줄링과 비동기 작업 수행 메커니즘을 살펴보았다. 이 과정에서 UI 엔진의 메인루프와 함께 여러 작업을 동시에 수행할 수 있는 고성능 UI 엔진을 구축 방안도 함께 이해할 수 있었으며 이러한 병렬 처리 기반으로 원활한 애니메이션 엔진을 구축할 수 있음을 배울 수 있었다.