최근 사용자 UI의 중심에는 다양한 종류의 모바일 기기가 존재한다. 과거의 데스크탑 환경처럼 단순히 여러 해상도를 고려하는 앱을 개발하는 시대는 이미 오래 전의 이야기이다. 앱 개발자는 더 많은 사용자 확보를 위해 다양한 기기와의 호환성을 갖춘 앱을 제작하길 희망한다. 이를 위해 해상도는 물론 dpi(dots per Inch) 그리고 터치 스크린과 같은 입력 장치 등을 고려하여 앱을 설계, 제작해야 한다.

호환성을 갖춘 앱 제작에 있어서 비교적 어려운 문제 중 하나는 다양한 스크린 환경과 입력 장치에 대응하는 스케일러블한 UI를 구현하는데 있다. 스케일러블 UI(Scalable UI)란 다양한 해상도 및 크기의 화면에 대응하는 UI를 의미한다. 모바일 기기부터 데스크탑, TV까지 다양한 크기의 화면에서 모두 동작하는 호환성을 갖춘 UI를 표현하기 위해 앱 개발자는 스케일러블 UI를 구성하길 원한다. 하지만 앱 개발자는 전혀 예상치 못한 환경의 디바이스 장치에서 무참히 무너지는 앱의 UI를 보고 좌절하기 쉽상이다. 더 많은 환경의 기기에서 테스트를 해야 하며 문제를 발견할 때마다 이에 대응하는 코드를 추가해야만 한다.

UI 프레임워크는 앱 개발자들이 이러한 문제를 보다 쉽고 단순하게 대응하기 위한 발판을 마련해 줘야한다. 스케일러블 UI의 원칙을 정의하고 이를 위한 견고한 인터페이스와 가이드를 제공하여 앱 디자이너는 물론 개발자들이 보다 직관적이고 단순한 설계로 호환성을 갖춘 UI를 구현할 수 있도록 도와줘야 한다.

이번 장에서는 스케일러블 UI를 구현하기 위한 개념과 메커니즘에 대해 이해하고 UI 프레임워크에서 갖춰야할 기능들이 무엇인지 살펴보도록 하자.


1. 이번 장 목표

이번 장을 통해 다음 사항을 학습해 보자.

  • 스케일러블 UI을 위한 UI의 핵심 원칙에 대해 이해한다.
  • 스케일러블 UI를 위한 절대 좌표계, 정규 좌표계, 상대 좌표계, 크기 제약에 대해 이해한다.
  • 컨테이너의 기본 개념을 이해하고 정렬과 가중치 그리고 사용 방식을 살펴본다.
  • 더 높은 호환성 UI를 위한 고급 기법들을 이해한다.


  • 2. 좌표계 이해

    스케일러블 UI를 위한 가장 기본적인 방법으로는 종횡비(Aspect Ratio)를 유지하는 UI가 있으며 상황에 따라서는 레이아웃을 재배치하는 방법까지 스케일러블 UI을 위해 동원할 수 있는 방법은 여러가지가 존재한다. 스케일러블 UI을 지원하기 위해서 우리는 먼저 UI의 좌표계 및 좌표 단위를 이해할 필요가 있다.


    2.1 절대 좌표계

    절대 좌표계(Absolute Coordinates)는 원점(origin)으로부터 지정한 거리만큼 떨어진 위치를 가리키는 방식이다. 일반적으로 앱에서 원점은 앱 화면의 좌측 상단에 해당되며 UI 시스템 특성에 따라 화면의 좌측 하단 또는 화면 중심이 원점이 될 수도 있다. 이 때 거리의 단위는 일반적으로 픽셀에 해당되며 서브픽셀 정밀도(sub-pixel precision) 가 가능한 UI 시스템인 경우 소수점 이하로도 좌표 지정이 가능하다.

    다음 예제는 UI 앱 개발의 기본 이해에서 보았던 버튼을 구현하는 코드이며 절대 좌표(픽셀 단위)를 이용한 방식을 보여주었다.

    UIButton myBtn = new UIButton();    //버튼 생성
    …
    myBtn.move(50, 50);                 //버튼 위치 (단위는 픽셀이다.)
    myBtn.resize(100, 100);             //버튼 크기 (단위는 픽셀이다.)
    코드 1: 버튼의 위치 및 크기 설정

    버튼의 위치와 크기를 지정하는 위 구현은 매우 자연스러워 보인다. 코드 1로부터 앱 개발자는 x, y 좌표 50, 50 픽셀 위치로부터 가로, 세로 크기가 100x100 픽셀인 버튼이 화면 상에 나타나길 기대한다. 당장의 동작에는 큰 문제는 없어 보이지만 호환성 측면에서는 어떠할까? 데스크탑에서는 하나의 앱이 사용자에 의해 다양한 크기의 윈도우로 구동될 수 있으며 스마트폰의 경우에는 기기마다 해상도가 제각기 다르다. 단위가 픽셀인 까닭에 버튼은 앱 화면의 원점을 기준으로 부터 (50, 50) 떨어진 픽셀 위치에서 100x100 픽셀 크기만큼 배치된다. 하지만, 앱이 보여지는 화면의 크기(해상도)는 가변적이기 때문에 이러한 픽셀 단위의 좌표와 크기는 일부 상황에서는 유용하지 않을 수도 있다.

    그림 1: 화면 크기별 절대 좌표의 출력 결과

    그림 1를 확인해 보면, 300x300 화면 크기는 그래도 봐줄만 하지만 100x100의 경우에는 용납할 수 없는 출력 결과이다. 원점이 화면의 중심이면 더 나을뻔도 했지만 결과적으로 다른 문제는 발생할 것이다. 변화가 없는 매우 특수한 환경의 전용 앱을 개발하는 것이 아니라면, 앱의 호환성을 위해 앱 개발자는 보다 나은 방법을 이용하여 UI 객체를 배치해야 한다.


    2.2 정규 좌표계

    UI 객체를 배치할 때 사용할 수 있는 다른 방법으로는 정규 좌표계(Normalized Coordinates)를 이용하는 방법이 있다. 정규 좌표계는 좌표 단위가 픽셀이 아닌, 정규화된 범위의 공간 내에 UI 객체를 배치하는 방식이다. 예를 들면, 화면 크기 가로, 세로의 범위가 각각 0 ~ 1 사이의 범위로 정규화되었다고 가정하자. 이 때 좌표 (0, 0)은 화면의 맨끝 좌측 상단에 해당되며 (0.5, 0.5)는 화면의 중앙, (1, 1)은 화면의 맨끝 우측 하단에 해당된다. 정규 좌표를 이용하면 앱 개발자는 임의의 화면 크기에 대응하는 UI 객체를 배치할 수 있으며 앞선 절대 좌표계의 픽셀 단위로 UI 객체를 배치할 때의 문제점을 피할 수가 있다. 정규 좌표계를 사용하면 가변적인 앱의 화면 크기에 대응하는 UI를 구성할 수 있다는 측면에서 절대 좌표계보다 조금 더 유리하다.

    정규 좌표값을 구하는 식은 매우 단순하다. 배치하고자 하는 UI 객체의 가로, 세로 픽셀 위치를 앱의 화면 크기로 나눠주면 정규화된 좌표값을 구할 수 있다.

    그림 2: 정규 좌표계식. (nx: 화면 가로 크기,ny: 화면 세로 크기)

    다음 예제는 정규 좌표를 이용한 버튼의 위치 및 크기를 지정하는 예이다.

    myBtn.relative1(0.25, 0.25);           //버튼의 좌측 상단 위치 (50/200, 50/200)
    myBtn.relative2(0.75, 0.75);           //버튼의 우측 하단 위치 (150/200, 150/200)
    
    코드 2: 정규 좌표를 이용한 버튼 배치

    그림 3: 정규 좌표를 이용한 버튼 배치

    정규 좌표를 이용하면 최종 화면 크기에 비례하여 버튼의 크기 역시 조정이 된다. 화면이 큰 환경에서는 상대적으로 버튼 크기가 커질 것이고 작은 환경에서는 버튼 크기도 작아질 것이다. 만약 앱의 화면 크기가 200x200인 경우, 버튼의 위치는 (50,50), 크기는 100x100이 되며 앱의 화면 크기가 300x300인 경우, 버튼의 위치는 (75, 75), 크기는 150x150이 된다. 화면의 크기가 어떻든 간에 버튼은 그 화면 영역 (0.25, 0.25) 위치로부터 (0.75, 0.75) 위치의 영역 내에 배치될 것이다.

    그림 4: 화면 크기에 따른 정규 좌표계 버튼 출력 결과

    확장성을 갖춘 UI를 구현하기 위해서 정규 좌표계를 무조건 사용하는 것이 만사는 아니다. 대체로 위치나 레이아웃의 영역을 지정하는 방면으로 정규 좌표계가 유용하며 콘텐츠의 크기의 경우는 픽셀 단위의 크기가 더 많이 요구된다. 예로, 다음 그림과 같이 정규 좌표계를 이용하여 콘텐츠 크기를 지정한 경우 콘텐츠가 훼손되는 경우가 발생할 수도 있다

    그림 5: 정규 좌표계 오용 예

    그림 5와 같이 UI 컨트롤의 종횡비가 유지되거나 크기가 고정되어야 하는 경우가 있다. 앱 개발자가 가이드를 완전히 무시한 경우가 아니라면, UI 컨트롤은 어떠한 경우라도 외양이 훼손되지 않도록 동작 컨셉을 갖추고 있어야 하며 앱 개발자는 이러한 문제로부터 자유롭게 사용할 수 있어야 한다. UI 컨트롤을 직접 디자인하고 구현하는 측면에서는 이러한 부분을 염두해야 한다.

    정규 좌표계를 이용하는 경우, UI 엔진이 해야할 일은 물론 조금 더 많아진다. 렌더링을 수행하기 전, UI 엔진은 사용자가 지정한 UI 컨트롤의 정규 좌표를 최신 앱 화면 크기를 기준으로 픽셀 단위의 좌표로 역산해야 한다. 하지만, 일반적으로 앱의 화면 크기는 빈번히 바뀌지 않기 때문에 한번 계산한 픽셀 좌표는 캐싱하여 재사용하는 것도 좋은 방법이다.

    /*
     * UIObject는 모든 UI 컨트롤의 기저(base) 클래스에 해당된다.
     * UI 컨트롤의 기본 동작 및 속성을 구현한다.
    */
    UIObject
    {
        Geometry geom = {0, 0, 0, 0};      //오브젝트의 지오메트리(위치 및 크기)
        Point relative1 = {0, 0};          //relative1 속성
        Point relative2 = {0, 0};          //relative2 속성
        Bool updateGeom = false;           //true인 경우 지오메트리를 새로 갱신한다.
        ...
    
        /*
         * relative1의 좌표 지정.
         * x, y의 타입은 float/double 모두 가능하다.
        */
        relative1(x, y)
        {
            //이전 값과 동일한 좌표가 넘어오면 바로 종료한다.
            if (x == relative1.x && y == relative1.y) return;
    
            //새로운 좌표를 저장한다.
            relative1.x = x;
            relative1.y = y;
    
            //지오메트리가 새로 갱신되어야 함을 기록한다.
            updateGeom = true;
            ...   
        }
    
        /*
         * relative2의 좌표 지정.
         * 핵심은 relative1()과 완전히 동일하다.
        */
        relative2(x, y)
        {
            if (x == relative2.x && y == relative2.y) return;
            relative2.x = x;
            relative2.y = y;
            updateGeom = true;
            ...    
        }
    
        /*
         * 오브젝트를 새로 갱신한다.
         * 매 프레임마다 UI 엔진에 의해 호출된다.
        */
        update(...)
        {
            //지오메트리가 새로 갱신되어야 할 경우,
            if (updateGeom == true || output.changed)
            {
                /* output은 오브젝트가 출력되는 영역이다. update()의 인자로 전달되었거나,
                   메서드 자체적으로 얻어왔다고 가정하자. 정규 좌표계식을 역으로 계산하여
                   지오메트리 픽셀 값을 구한다. 만약 output 크기 자체가 변경되어도
                   지오메트리는 새로 갱신되어야 한다. */
                geom.x = output.w * relative1.x;
                geom.y = output.h * relative1.y;
                geom.w = (output.w * relative2.x) - geom.x;
                geom.h = (output.h * relative2.y) - geom.y;
    
                //더 이상 지오메트리가 갱신될 필요가 없다.
                updateGeom = false;
            }        
            ...
        }
    }
    
    코드 3: 정규 좌표로부터 픽셀 좌표값 구하기


    2.3 상대 좌표계

    상대 좌표계(Relative Coordinates)는 원점이 기준이 아닌 다른 UI 객체를 기준으로 좌표를 지정하는 방식이다. 특정 객체의 위치와 크기에 의존하는 경우, 상대 좌표계를 이용하면 매우 편리하다. 상대 좌표를 지정하기 위해서는 상대 좌표의 대상 객체를 지정하는 인터페이스도 같이 제공되어야 한다.

    //이미지 생성. 여기서 좌표는 화면을 기준으로 한다.
    UIImage myImg = new UIImage();         
    myImg.open(“./res/star.png”);
    myImg.relative1(0.0, 0.0);
    myImg.relative2(0.25, 0.25);
    myImg.show();
    
    //이미지 생성. myImg2의 좌표 공간은 myImg을 기준으로 한다.
    UIImage myImg2 = new UIImage();         
    myImg2.open(“./res/star.png”);
    myImg2.relativeTo(myImg);           //상대 좌표 대상 지정
    myImg2.relative1(1.0, 0.0);
    myImg2.relative2(2.0, 1.0);
    myImg2.show();
    
    코드 4: 상대 좌표 지정

    그림 6: 코드 4 출력 결과 도식화

    다양한 유스케이스를 만족하기 위해 relativeTo()를 좀 더 세분화하여 relative1과 relative2에 대해 각각 상대 좌표 대상을 지정할 수 있는 인터페이스를 제공하는 것도 고려해볼만 하다.

    myObj.relative1To(target1);           //좌측 상단 위치의 상대 좌표 대상 지정.
    myObj.relative1(1.0, 1.0);            //target1의 우측 하단 꼭지점을 가리킨다.
    myObj.relative2To(target2);           //좌측 상단 위치의 상대 좌표 대상 지정.
    myObj.relative2(0.0, 0.0);            //target2의 좌측 상단 꼭지점을 가리킨다.
    
    코드 5: 특정 대상을 기준으로 하는 상대 좌표

    그림 7: 코드 5 출력 결과 도식화

    특히나 구현 시점에 대상 컨트롤의 크기 및 위치가 결정되지 않는 경우에 상대 좌표는 더욱 필수적이다. 예를 들면, 길이가 가변적인 텍스트의 우측에 어떤 아이콘을 배치한다고 가정해 보자. 구현 시점에 텍스트의 길이를 알 수 없으므로 아이콘의 위치 또한 결정하기 어렵다. 이 경우, 상대 좌표는 반드시 필요하다.

    그림 8: 상대 좌표 필요 예


    3. 크기 제약

    2.2 정규 좌표계 절에서 UI 컨트롤은 어떠한 경우라도 외양이 훼손되지 않도록 동작 컨셉을 갖추고 있어야 한다고 언급했었다. 이 문제를 좀 더 자세히 짚어보기 위해 코드 2의 정규좌표계를 이용한 버튼 예제를 다시 한번 살펴보고자 한다. 다만 이번엔 화면 크기를 100x100으로 축소해서 그 결과물을 확인해 보자.

    그림 9: 100x100 화면 크기에서의 상대 좌표를 이용한 버튼 출력 결과

    그림 9에서 확인할 수 있듯이, 100x100 크기의 화면에서 또 다른 문제점이 드러났다. 상대 좌표를 이용하여 버튼의 크기는 줄어들었지만 버튼 안의 텍스트는 줄어들지 않아서 텍스트가 버튼 영역을 벗어나 버렸기 때문이다. 사실 위의 문제는 버튼의 텍스트를 … 과 같이 생략하여 글자의 길이를 줄임으로써 이 문제를 회피할 수도 있다. 일반적으로 UI 프레임워크에서는 텍스트 일립시스(ellipsis) 기능을 제공하여 출력 영역이 부족할 경우 텍스트를 자동으로 생략하는 기능을 수행할 수 있게끔 도와준다.

    myBtn.setTextEllipsis(true);       //텍스트 일립시스 기능 사용
    
    코드 6: 텍스트 일립시스 사용

    그림 10: 텍스트 일립시스 적용 결과

    텍스트 일립시스는 이 문제를 해결할 수 있는 가장 쉽고 단순한 방식처럼 보이지만 더 깊이 생각해 보면, UI 컨트롤 안의 내용물이 텍스트만 존재한다고 가정할 수도 없을 뿐더러, 글자 길이를 줄이는 방식이 항상 옳은 것도 아니다. 사실 그림 10의 버튼만 보더라도 버튼의 텍스트가 무얼 전달하고자 하는지 사용자는 이해하기 어렵다.

    그림 11: 텍스트 일립시스의 문제점

    많이 엉성하지만, 그림 11은 온라인상에서 물건 구매를 위한 결제 승인을 요청하는 화면이라고 가정한다. 금액이 지불될 수 있다는 점에서 사용자는 다소 신중한 선택이 필요할 수도 있다. 하지만 오른쪽 이미지의 경우 화면 영역의 부족으로 화면 하단의 세 버튼의 텍스트가 일립시스 처리되었다. 사용자는 어떤 버튼을 눌러야 구매 취소가 되는지 사전에 눌러보지 않고서는 알기가 애매해다. 이 시나리오는 조금 극단적이지만 유사한 시나리오는 충분히 있을 수 있다.

    우리는 이 문제를 보다 근본적으로 해결하기 위해 UI 컨트롤의 크기 제약에 대해 이해해 보고자 한다. 이해를 돕기 위해 이번엔 다른 테마의 버튼을 도입했다.

    그림 12: 버튼 UI

    앞서 보았던 버튼과 비교하면 그림 12 버튼의 경우 아이콘과 텍스트 두 보조 콘텐츠를 제공할 뿐만 아니라 버튼의 모서리가 라운드 처리되어서 보다 부드러운 느낌을 제공한다. 버튼 내부의 아이콘 및 길이가 가변적인 텍스트는 일단 제외하더라도, 만약 화면 영역의 변화에 따라 버튼의 크기도 비례하여 변한다면 어떨까?

    그림 13: 크기 변화로 인해 훼손된 외양

    그림 13과 같이 크기가 가변적이라고 해서 무조건 크기를 상대적으로 변경했더니 버튼 외곽 라운드 외양에 문제가 생겼다. 우리는 위 예제를 통해 변경이 가능한 가변 영역(Resizable Area)과 변경이 되면 안되는 고정 영역(Fixed Area)이 필요함을 알 수 있다.

    그림 14: 버튼의 가변 영역과 고정 영역

    고정 영역은 크기 조정이 불가능한 영역이다. 고정 영역에 변화가 발생하면 UI 컨트롤의 외양이 훼손되거나 사용에 문제가 발생하기 때문에 절대적 크기를 보장해야만 한다. 다시 말하면, 컨트롤의 크기에 상관없이 항상 일정한 크기를 보장해야 한다.

    이미지 보더(Image Border)는 그림 13과 같은 문제를 회피하기 위해서 한 장의 이미지에서 테두리 영역을 구분하는 개념이다. 이미지 보더를 이용하면 이미지를 스케일링(Scaling)하는 과정에서 보더 영역을 제외한 가변 영역만 스케일링 작업을 수행하여 이미지가 훼손되는 것을 방지할 수 있다. 그림 14의 고정 영역이 바로 보더 영역과 일치한다. 이미지 보더 대신 나인패치(9-patch) 방식을 이용하는 방식도 존재하지만 나인패치는 하나의 완성된 이미지를 위해 9장의 이미지 리소스를 따로 준비한 후, 구현 단계에서 이들을 조합해서 사용해야 한다는 측면에서 다소 작업량도 많고 구현도 복잡하다.

    그림 15: 나인패치 이미지

    그에 비해 이미지 보더는 한 장의 이미지에 보더 영역을 지정해 주면 UI 엔진에서 이미지를 스케일링하는 과정에서 보더 영역은 제외하고 스케일링을 수행하여 이미지 훼손을 방지한다. 이미지 보더를 지정하기 위해서는 한 장의 이미지에 좌, 우, 상, 하 영역에 대한 보더 크기를 지정할 수 있다.

    UIImage myImg = new UIImage();
    myImg.path(“./res/button.png”);
    myImg.setBorderArea(w1, w2, h1, h2);    //이미지 보더 영역 지정(좌, 우, 상, 하)
    myImg.resize(100, 100);                 //보더 영역은 영향을 받지 않는다.
    myImg.show();  
    
    코드 7: 이미지 보더 지정

    안드로이드 시스템의 경우 이미지 자체의 좌측과 상단에 가변 영역(Stretchable area)을 블랙 라인으로 표시함으로써 보더 영역을 구분한다. 별도의 코드 작성없이 이미지 보더를 적용할 수 있다는 점에서 개발과 디자인 작업의 의존성을 제거할 수 있다. 하지만, 이미지를 불러오는 과정에서 블랙 라인의 길이를 통해 보더 영역을 구분하고 이미지 스케일링 과정에서 엔진이 별도로 처리한다는 사실은 동일하다.

    그림 16: 안드로이드 이미지 보더

    UI 컨트롤을 디자인할 시, 컨트롤 특성에 맞게 크기가 고정인 영역을 정의해야 하며 하나의 컨트롤에 존재하는 고정 영역의 합은 결과적으로 해당 컨트롤의 최소 크기라고 정의할 수 있다.

    그림 17: 버튼의 최소 크기

    버튼에 포함된 아이콘의 경우 종횡비를 유지하는 선에서 버튼 크기에 따라 크기 조절이 가능하지만 디자인 컨셉에 따라 크기를 고정시킬 수도 있다. 텍스트 출력 영역의 경우 기본적으로 가변적이지만 이 역시 컨트롤의 최소 크기에 영향을 미친다. 만약 사용자가 그림 11과 같은 문제로 인해 텍스트 일립시스 기능을 사용하고 싶지 않은 경우에는 텍스트 출력 길이가 컨트롤의 최소 크기에 포함되어야 한다. 그렇지 않으면, 그림 9처럼 텍스트가 버튼 외곽 테두리를 벗어날 것이다. 설사, 텍스트 일립시스가 동작하더라도 최소한 … 의 출력은 컨트롤의 최소 영역에 포함시켜야 한다.

    그림 18: 아이콘, 텍스트가 포함된 버튼의 최소 크기

    기본적으로 UI 컨트롤은 각 컨트롤마다의 기본 동작 컨셉을 기반으로 가변 영역과 고정 영역을 잘 정의하고 구현해야 한다. 앱 개발자는 이들에 대한 자세한 사항을 모를지라도 UI 컨트롤은 최종 환경에서 사용자로 하여금 사용에 문제가 없도록 자체적으로 스마트한 동작을 보장해야 한다. UI 컨트롤을 직접 구현하는 관점에서 우리는 버튼의 UI를 다음과 같은 방식으로 구현해 볼 수 있다.

    /*
     * 그림 18의 버튼의 UI를 구성하는 함수(혹은 메서드)
     * w1 = 10, w2 = 25, w3 = 가변, w4 = 10, h1 = 10, h2 = 10, h3 = 25, h4 = 가변
     * 다소 코드가 복잡하게 느껴진다면, 그림을 그려가면서 이해해 보자.
    */
    composeButtonUI()
    {
       //버튼 배경 이미지
       UIImage bg = new UIImage();
       bg.path(“./res/button.png”);
       bg.setBorderArea(10, 10, 10, 10);   //이미지 보더 영역 지정 (좌, 우, 상, 하)
       bg.show(); 
    
       //버튼 아이콘
       UIImage icon = new UIImage();
       icon.margin(10, 0, 0, 0);    //좌, 우, 상, 하 마진 설정 (w1, 0, 0, 0)
       icon.relativeTo(bg);
       icon.align(0, 0.5);   //아이콘 원점을 bg의 좌측 중심으로 변경한다.
       icon.resize(25, 25);                  
       icon.path(“...”);     //실제로는 앱 개발자가 요청한 이미지 리소스를 명시해야 한다.
       icon.show();
    
       //버튼 텍스트 (크기는 텍스트 출력 결과에 의존한다.)
       UIText text = new UIText();
       text.margin(35, 10, 0, 0);  //좌, 우, 상, 하 마진 설정 (w1+w2, w4, 0, 0)
       text.relativeTo(bg);
       text.align(0, 0.5);         //텍스트 원점을 bg의 좌측 중심으로 변경한다.
       text.fontName(“Sans”);      //폰트 이름
       text.fontSize(20);          //폰트 크기
       text.text(“...”);           //실제로는 앱 개발자가 요청한 문자열을 명시해야 한다.
       text.show();
    
       //주의! 버튼 배경 이미지의 크기는 버튼 구성 요소에 상대적으로 변화한다.
       bg.relative1To(icon);
       bg.relative1(0, 0);
       bg.relative2To(text);
       bg.relative2(1, 1);
    
       ...
    }
    
    코드 8: 버튼 컨트롤 UI 구현

    버튼과 마찬가지로 대부분의 UI 컨트롤이 크기 제약을 가지고 있다면, 앱 개발자는 그 크기를 벗어난 크기를 지정할 수가 없을 것이다. 하지만, 이러한 사실을 앱 개발자는 앱 구현 시점에 어떻게 알 수 있을까? 물론 UI 프레임워크에서는 UI 컨트롤의 최소/최대 크기를 앱 개발자가 알 수 있도록 인터페이스를 제공할 수 있겠지만, 사실 앱 개발자는 그러한 정보까지 고려하면서 UI를 구현하고 싶지 않을 것이다. 그렇다면, 앱 개발자는 UI 컨트롤의 크기를 어떻게 결정해야 할지 조금은 난해할 것이다. UI 컨트롤의 크기 제약을 모르기 때문에 뭔가 더 좋은 방법이 필요하다.


    4. 컨테이너

    컨테이너(Container)는 앱 화면을 구성하기 위한 레이아웃의 틀을 제공한다. 일반적으로 UI 프레임워크는 다양한 컨테이너를 제공하며 컨테이너마다 서로 다른 레이아웃 구성 특성을 가지고 있다. 사용자는 컨테이너의 특성을 이해하고 다양한 컨테이너를 조합하여 앱 화면을 적절히 구성할 수가 있다. 특히, 앱이 스케일러블 UI를 지원하기 위해서는 UI 컨트롤을 직접 화면에 배치하는 것보다 컨테이너를 활용하는 것이 보다 쉽고 안전하다. 최종 사용자의 디바이스의 스크린 환경은 물론, 각 컨트롤마다 그 특성이 다르므로 상황에 따라 컨트롤이 어떻게 화면에 나타날지 앱 개발자가 모두 이해하기 어렵기 때문이다. 게다가 2.4절에서 살펴본 컨트롤의 크기 제약을 앱 개발자가 알기 어렵기 때문에 호환성 높은 앱을 개발하기 위해서는 컨테이너를 활용하는 것은 필수에 가깝다. 컨테이너는 이러한 UI 컨트롤의 특성을 이해하고 최적의 화면 구성을 보장해 준다.

    기본적으로 UI 프레임워크는 비컨테이너(Non-container)와 컨테이너(Container) 두 부류의 UI 컨트롤을 제공한다.

  • 비컨테이너: 앞서 살펴본 버튼처럼, 앱의 UI를 구성하는데 있어서 시각적 외양을 통해 사용자와 상호작용을 수행하는 UI 컨트롤
  • 컨테이너: 비컨테이너 컨트롤을 효율적으로 화면에 배치하기 위한 레이아웃 정보를 제공한다. 일반적으로 컨테이너 컨트롤은 시각적 외양이 없으며 스케일러블 UI에 대응하기 위한 레이아웃 특성을 제공한다.
  • 그림 19: 컨테이너 종류 예시

    앱 개발자의 개발 편의를 위해 제공되는 컨테이너의 종류도 다양하다. 그 종류 및 기능은 UI 프레임워크마다 다르지만, 핵심 기능상 리니어 레이아웃(그림 19의 좌측 상단)과 유사한 기능을 수행하는 컨테이너는 대부분 존재한다.

    리니어 레이아웃의 동작 방식을 한번 살펴보자. 리니어 레이아웃의 사용 예를 통해 우리는 컨테이너의 사용 및 동작 방식의 핵심을 이해할 수 있을 것이다. 다음은 우리가 구현하고자 하는 화면 구성이다.

    그림 20: 리니어 컨테이너 사용 예

    /* 수직 리니어 레이아웃 생성. 레이아웃은 화면에 가득 출력된다고 가정한다. 
       myWnd는 윈도우 객체이다. */
    UIVerticalLinearLayout myLayout = new UIVerticalLinearLayout(myWnd);
    myLayout.show();
    
    //버튼1 생성
    UIButton myBtn1 = new UIButton();
    myBtn1.text(“Button 1”);
    myBtn1.show();
    myLayout.push(myBtn1);       //레이아웃에 버튼1 추가
    
    //버튼2 생성
    UIButton myBtn2 = new UIButton();
    myBtn2.text(“Button 2”);
    myBtn2.show();
    myLayout.push(myBtn2);       //레이아웃에 버튼2 추가
    
    //버튼3 생성
    UIButton myBtn3 = new UIButton();
    myBtn3.text(“Button 3”);
    myBtn3.show();
    myLayout.push(myBtn3);       //레이아웃에 버튼3 추가
    
    코드 9: 리니어 레이아웃 사용 예

    코드 9은 수직 리니어 레이아웃을 하나 생성한 후, 세 개의 버튼을 순차적으로 레이아웃에 추가한다. 이 코드에서는 레이아웃 자체에 대한 영역 정의는 정확하게 보여주지 않는다. 다만 레이아웃 객체를 생성시 윈도우 객체를 전달하면서 레이아웃은 윈도우와 사이즈가 동일시된다고 가정하자.

    수직 리니어 레이아웃은 윈도우 크기에 맞춰 공간을 확보하며 레이아웃에 추가된 세 개의 버튼에 대해서 동일한 공간을 균등히 분할해서 버튼을 배치하는 작업을 수행한다. 버튼은 할당받은 공간에 대해 크기를 조정하여 최종적으로 화면에 출력된다. 결국, 위 코드의 세 버튼은 레이아웃 영역을 삼등분하여 동일한 크기로 출력될 수 있다. 수평 리니어 레이아웃이라면, 추가한 버튼은 수평 방향으로 추가될 수 있다.

    하지만, 여기서 우리는 다음과 같은 질문을 던져볼 수 있는데, 만약 앱 개발자가 버튼의 크기를 다르게 조정하고 싶다면 어떻게 해야할까? 이에 대한 해답으로 UI 프레임워크는 가중치(weight)와 정렬(align)이라는 개념을 추가로 제공할 수 있다.

    가중치는 UI 객체가 할당받을 수 있는 공간에 대한 가중치로서 동작한다. 만약 세로 공간의 크기가 200인 수직 리니어 레이아웃에 두 개의 버튼을 추가한다고 가정하자. 여기서 추가하는 두 버튼의 가중치가 모두 1.0이라면 두 버튼이 할당받는 공간의 높이는 각각 100이 된다. 하지만 이 중 하나는 0.5, 다른 하나는 1.0이라면 50과 150의 공간으로 재조정될 수 있다. 만약 세 버튼이 공존하며 하나는 0.5 다른 두 버튼은 1.0이라면 50, 125, 125의 크기로 분할될 수 있다.

    그림 21: 가중치 0.5, 1.0로 배치된 두 버튼의 예

    리니어 레이아웃에 있어서 가중치 설정의 핵심은 컨테이너의 공간을 차지하는 UI 컨트롤 간의 영역 싸움이라고도 볼 수 있다. UI 프레임워크는 가중치 설정을 위한 방법으로 다음과 같은 인터페이스를 제공할 것이다.
    /* 넓이(1.0), 높이(0.5)에 대한 가중치를 설정한다. 가중치의 값이 0.0의 경우 버튼의 최소 크기를 보장해야 한다. */
    myBtn.weight(1.0, 0.5);
    
    코드 10: 가중치 설정 예

    반면, 리니어 레이아웃은 자신의 영역에 추가된 컨트롤의 크기를 결정하기 위해 다음과 같은 핵심 로직을 구현한다.

    /*
     * 수직으로 UI 오브젝트를 담는 컨테이너 기능을 수행한다.
     * UIVerticalLayout는 UILayout을 상속받는다.
    */
    UIVerticalLayout extends UILayout
    {
        //사실 아래 두 멤버 변수는 부모 클래스에 정의되어 있을 것이다.
    
        List contents;          //레이아웃에 추가된 콘텐츠 리스트
        Geometry geom;          //레이아웃의 지오메트리 정보
    
        /*
         * 오브젝트를 새로 갱신한다.
         * 레이아웃이 보유한 콘텐츠의 크기 및 위치를 결정한다.
         * 여기서는 쉬운 이해를 위해서 크기를 구하는 기본 로직만 구현하며 그 외 
         * 여러 경우의 로직은 모두 무시한다.
        */
        updateContentSize()
        {
            ...
    
            Size totalSize;                       //Layout의 최종 크기
            Size totalWeight;                     //콘텐츠가 요구하는 가중치 축적치
            Size contentSize[contents.count];     //Layout에 추가된 콘텐츠의 크기
            Bool calcSize = true;                 //콘텐츠 계산 완료 여부
     
            while (calcSize)
            {
                totalSize = {0, 0};
                totalWeight = {0, 0};
                foreach(contents, content, idx)
                {
                    Size weight = content.weight;         //콘텐츠 가중치
    
                    /* 가중치는 0 ~ 1 사이의 값만 허용한다.
                       이해를 돕기 위해 추가한 예외 코드. */
                    if (weight.w < 0) weight.w = 0;
                    if (weight.w > 1) weight.w = 1;
                    if (weight.h < 0) weight.h = 0;
                    if (weight.h > 1) weight.h = 1;
    
                    //콘텐츠 가중치를 기반으로 크기를 결정한다.
                    contentSize[idx].w = (geom.w / contents.count) * weight.w;
                    contentSize[idx].h = (geom.h / contents.count) * weight.h;
    
                    //콘텐츠 크기를 최신으로 갱신한다.
                    content.updateContentSize();
    
                    //콘텐츠의 최소 크기를 보장한다.
                    if (content.minW > contentSize[idx].w)
                    {
                       contentSize[idx].w = content.minW;
                    }
                    if (content.minH > contentSize[idx].h)
                    {
                       contentSize[idx].h = content.minH;
                    }
    
                    //Layout의 최종 크기를 구한다.
                    totalSize.w += contentSize[idx].w;
                    totalSize.h += contentSize[idx].h;
    
                    totalWeight.w += weight.w;
                    totalWeight.h += weight.h;
    
                    ++idx;
                }
    
                 /* Layout의 최종 크기가 현재 크기보다 더 크면 최종 크기를 기준으로 다시 
                    계산을 시도한다. */
                 if (totalSize.w > geom.w)
                 {
                     geom.w = totalSize.w;
                     calcSize = false;
                 }
                 if (totalSize.h > geom.h)
                 {
                     geom.h = totalSize.h;
                     calcSize = false;
                 }
             }
             
            /* 실제 레이아웃 크기 대비 콘텐츠가 요구하는 크기의 차를 구한다. 만약 
               레이아웃의 공간에 여분이 존재하면 남은 공간에 대해서 재분배를 시행한다. */
            Size diff = {geom.w - totalSize.w, geom.h - totalSize.h};
    
            foreach(contents, content, idx)
            {
                if (diff.w > 0)
                {          
                    contentSize[idx].w += diff.w * (totalWeight.w/content.weight.w);
                }
    
                if (diff.h > 0)
                {
                    contentSize[idx].h += diff.h * (totalWeight.h/content.weight.h);
                }
    
                //계산한 크기를 콘텐츠의 크기로 지정한다.
                content.resize(contentSize[idx].w, contentSize[idx].h);
    
                ++idx;
            }
            ...    
        }
    }
    
    코드 11: 가중치를 기반으로 콘텐츠 크기 계산 로직

    정렬은 컨테이너로부터 할당받은 공간에 대해 UI 객체가 어떤 방향에 위치할 것인지를 결정한다. 좌우, 상하, 가운데 중 어느 방향으로 정렬될 것인지, 또는 그림 20처럼 할당받은 공간을 가득 채우는 동작을 수행할 수 있다.

    그림 22: 컨테이너 공간 내에 UI 컨트롤 정렬 예

    myBtn.align(0, 0);                              //좌측, 상단
    myBtn.align(1, 1);                              //우측, 하단
    myBtn.align(0.5, 0.5);                          //가운데 정렬
    myBtn.align(UIObject.FILL, UIObject.FILL);      //할당받은 공간을 가득 채운다.
    
    코드 12: 정렬 설정 예

    /*
     * 수평으로 UI 오브젝트를 담는 컨테이너 기능을 수행한다.
     * UIHorizontalLayout는 UILayout을 상속받는다.
     * 코드 11의 UIVerticalLayout와 동일하며 정렬 구현을 추가로 보여준다.
    */
    UIHorizontalLayout extends UILayout
    {
        //사실 아래 두 멤버 변수는 부모 클래스에 정의되어 있을 것이다.
    
        List contents;          //레이아웃에 추가된 콘텐츠 리스트
        Geometry geom;          //레이아웃의 지오메트리 정보
    
        /*
         * 오브젝트를 새로 갱신한다.
         * 레이아웃이 보유한 콘텐츠의 크기 및 위치를 결정한다.
         * 여기서는 쉬운 이해를 위해서 크기를 구하는 기본 로직만 구현하며 그 외 
         * 여러 경우의 로직은 모두 무시한다.
        */
        updateContentSize()
        {
            ...
    
            Size totalSize;                       //Layout의 최종 크기
            Size totalWeight;                     //콘텐츠가 요구하는 가중치 축적치
            Size contentSize[contents.count];     //Layout에 추가된 콘텐츠의 크기
            Bool calcSize = true;                 //콘텐츠 계산 완료 여부
     
            while (calcSize)
            {
               //코드 11과 동일
               ...
            }
             
            /* 실제 레이아웃 크기 대비 콘텐츠가 요구하는 크기의 차를 구한다. 만약 
               레이아웃의 공간에 여분이 존재하면 남은 공간에 대해서 재분배를 시행한다. */
            Size diff = {geom.w - totalSize.w, geom.h - totalSize.h};
    
            /* 레이아웃에 추가될 콘텐츠의 가로 위치 값. 레이아웃 위치가 기준이다. 
               VerticalLinearLayout의 경우 세로 위치 값이 필요하다. */
            var contentPosDiff = geom.x;
    
            foreach(contents, content, idx)
            {
                if (diff.w > 0)
                {          
                    contentSize[idx].w += diff.w * (totalWeight.w/content.weight.w);
                }
    
                if (diff.h > 0)
                {
                    contentSize[idx].h += diff.h * (totalWeight.h/content.weight.h);
                }
    
                //콘텐츠의 정렬이 Fill인 경우 계산한 크기를 콘텐츠의 크기로 지정한다.
                if (content.align.w == UIObject.Fill)
                {
                    content.resizeW(contentSize[idx].w);
                    content.moveX(contentPosDiff);
                }
                //콘텐츠의 가로 위치를 결정한다.
                else
                {
                     var x = (contentSize[idx].w - content.size.w) * content.align.w;
                     content.moveX(x + contentPosDiff);
                }
    
                if (content.align.h == UIObject.Fill)
                {
                    content.resizeH(contentSize[idx].h);
                    content.moveY(geom.y);
                }
                //콘텐츠의 세로 위치를 결정한다.
                else
                {
                    var h = (contentSize[idx].h - content.size.h) * content.align.h;
                    content.moveY(h + geom.y);
                }
    
                 //다음 콘텐츠의 시작 가로 위치를 결정한다.
                 contentPosDiff += contentSize[idx].w;
    
                ++idx;
            }
            ...    
        }
    }
    
    코드 13: 가중치과 정렬 계산 로직

    다음은 코드 9을 수정하여 정렬 기능을 활용한다.

    /* 수평 리니어 레이아웃 생성. 레이아웃은 화면에 가득 출력된다고 가정한다.
       myWnd는 윈도우 객체이다. */
    UIHorizontalLinearLayout myLayout = new UIHorizontalLinearLayout(myWnd);
    myLayout.show();
    
    //버튼1 생성
    UIButton myBtn1 = new UIButton();
    myBtn1.text(“Button 1”);
    myBtn1.show();
    myLayout.push(myBtn1);
    
    //버튼2 생성
    UIButton myBtn2 = new UIButton();
    myBtn2.text(“Button 2”);
    myBtn2.align(0.5, 0.5);            //중앙 정렬한다.
    myBtn2.relative1(0.25, 0.25);      //상대 좌표를 이용하여 위치를 지정한다.
    myBtn2.relative2(0.75, 0.75);      //상대 좌표를 이용하여 크기를 지정한다.
    myBtn2.show();
    myLayout.push(myBtn2);
    
    //버튼3 생성
    UIButton myBtn3 = new UIButton();
    myBtn3.text(“Button 3”);
    myBtn3.align(1, 0.5);        //우측 정렬한다.
    myBtn3.show();
    myLayout.push(myBtn3);
    
    코드 14: 정렬을 이용한 리니어 레이아웃 배치

    정렬을 지정하지 않으면 기본적으로 할당받은 레이아웃 영역에 UI 컨트롤이 가득 채우는 동작을 수행할 수 있다. 코드 14의 버튼1은 정렬을 지정하지 않았으므로 할당받은 공간을 가득 채우고 버튼2와 버튼3은 요청받은 대로 정렬을 수행한다. 이 때 크기를 지정하지 않은 버튼의 크기는 기본 크기(최소 크기)로 출력된다.

    그림 23: 정렬을 이용한 리니어 레이아웃 배치

    가중치와 정렬을 이용하면 앱 개발자는 컨테이너 정책의 범위 내에서 UI 컨트롤을 원하는대로 배치할 수 있다. 물론 가중치와 정렬은 하나의 컨셉일 뿐 UI 프레임워크마다 가중치와 정렬의 개념과 동작 방식이 다를 수는 있으며 아예 다른 방식으로 그 기능이 제공될 수도 있다. 하지만, 앞서 살펴 본 예제처럼 컨테이너에 UI 컨트롤을 배정할 때 위치 및 크기를 결정할 수 있는 메커니즘은 반드시 필요하며 컨테이너는 사용자가 고려하지 못한 경우에 대해서도 스케일러블한 UI를 보장하고 UI 컨트롤이 최소 크기 이하로 작아지는 등의 훼손 문제를 방지해야 한다.

    리니어 레이아웃 외로 테이블(Table) 컨테이너는 임의의 행과 열을 예약한 후, 각 행과 열이 가리키는 셀(Cell)마다 UI 컨트롤을 배치할 수 있는 컨테이너이다. 일반적으로 엑셀(Excel) 또는 스프레드 시트(SpreadSheet)와 같은 레이아웃을 앱이 구성할 수 있도록 UI 프레임워크는 테이블 컨테이너를 제공할 수 있다.

    앱 개발자는 UI 프레임워크에서 제공하는 다양한 컨테이너를 적재적소에 사용할 수 있어야 하며 컨테이너 안에 컨테이너를 배치하는 식으로 컨테이너를 조합하면 보다 효율적인 화면 구성도 가능하다.

    그림 24: 컨테이너를 조합한 화면 구성


    5. 더 높은 완성도를 위해

    앱의 뷰를 구성하는 콘텐츠의 최소 크기의 합이 앱 출력 화면 크기보다 더 큰 경우도 있지 않을까? 일반적인 경우는 아니지만 다양한 크기의 디바이스를 고려해 본다면 충분히 발생할 수 있는 문제이기도 하다. 극단적이긴 하지만 데스크탑에서 앱의 윈도우의 크기를 매우 작게 줄여보면 짐작할 수 있는 문제이기도 하다. 사실 이 경우 콘텐츠의 최소 크기보다 윈도우 크기가 줄어드는 것을 방지하는 정책이 필요할 수도 있다. 하지만 미처 고려하지 못한 소형의 모바일 기기에 앱을 구동하는 경우라면 디스플레이 크기의 제약으로 부득이하게 이 문제를 피할 수 없을 것이다. 호환성이 높은 앱이라면 다양한 화면 크기를 고려하여 각 해상도에 최적화된 뷰를 따로 디자인하여 해상도별 뷰를 출력하는 것도 가능하다. 하지만 이 경우 앱의 개발 비용과 난이도도 그만큼 상승할 것이며 모든 앱이 모두 대응한다고 보장할 수도 없다. 실용성은 떨어지지만 최소한 사용이 불가능한 앱은 되지 않도록 UI 프레임워크에서 도움을 주면 더 좋다.


    5.1 디바이스 독립적인 픽셀

    dpi(dots per inch)란 1인치의 범위 내에 존재하는 물리적 점의 개수를 의미하는데 원래는 프린터 출력 성능을 가리키는 용어 중 하나이다. dpi가 높을수록 1인치의 범위 내에 더 많은 점을 찍을 수 있으며 정교한 출력이 가능하다. 비슷한 용어 중 ppi(pixels per inch)는 디스플레이 장치에서 1인치 범위 내에 출력하는 픽셀의 수를 의미하며 PPI 역시 수치가 높을수록 더 정교한 출력이 가능해진다. 일반적으로 디스플레이 장치에서는 ppi 뿐만 아니라 dpi 개념 역시 통용된다.

    일반적으로 dpi/ppi가 높다는 것은 그만큼 고해상도 출력이 가능하다는 것을 의미하는데 예를 들면 물리적으로 동일한 크기의 출력 장치이지만 dpi/ppi 수치가 다르다면 두 출력 장치간의 해상도의 차이가 존재한다고도 볼 수 있다.

    그림 25: dpi에 따른 물리적 출력 크기 차이


    상대 좌표를 사용하는 경우는 해당되지 않지만, 절대 좌표를 이용한 위치 또는 UI 객체의 크기를 지정하기 위해서 사용하는 픽셀 단위의 수치는 그림 25과 같은 실제 출력의 차이를 발생시키며 이는 사용성에도 영향을 미칠 수 있다. dpi와 상관없이 사용자는 물리적으로 동일한 크기의 UI를 사용할 수 있어야 한다.

    이 문제를 해결하기 위해서는 앱 개발자가 지정한 UI 객체의 위치 및 크기의 단위는 디바이스에 독립적으로 동작하여야 한다. 이러한 개념을 디바이스 독립적인 픽셀(Device-Independent-Pixel) 또는 밀도 독립적인 픽셀(Density-Independent-Pixel) 이라고도 하는데 UI 프레임워크에서는 이러한 기능을 제공하여 앱 개발자로 하여금 보다 호환성이 높은 UI를 구성할 수 있도록 도움을 줄 수 있다. 실제로 안드로이드에서도 이러한 개념을 기본 구현 사항으로서 제공하고 있다.

    //디바이스 독립적인 픽셀을 최종 픽셀로 변환해주는 함수
    public static int dpToPx(int dp) {
        /* 안드로이드 시스템에서 정한 기준 dpi는 160이므로 160dpi에서 반환되는 density의 
           값은 1이다. */
        float density = Context.getResource().getDisplayMetrics().density;
        return Math.round((float) dp * density);
    }
    
    ...
    
    //dpToPx()을 이용한 크기 지정 예
    LinearLayout layout = new LinearLayout(this);
    LinearLayout.LayoutParams layoutParams = (LinearLayout.LayoutParams) layout.getLayoutParams();
    layoutParams.height = dpToPx(400);
    layoutParams.width = dptoPx(400);
    layout.setLayoutParams(layoutParams);
    
    코드 15: 안드로이드의 디바이스 독립적인 픽셀 지정 방법 예

    안드로이드 시스템은 160으로 기준 dpi로 지정하였기 1dip는 160dpi에서 1픽셀과 매칭되며 이때 반환되는 디스플레이 density의 값은 1이 된다. 160보다 높은 dpi에서는 반환되는 density의 값도 높아진다.

    그림 26: dpi별 크기 차이

    그림 27: dip에 따른 물리적 출력 크기 차이


    5.2 스케일 팩터

    스케일 팩터(Scale Factor)는 앱 화면의 해상도를 변경하는 앱 단위 해상도 조정 변수 정도로 해석해 볼 수 있다. UI 프레임워크는 앱 화면을 구성하는 UI 콘텐츠의 최소 합이 윈도우 크기보다 큰 경우 스케일 팩터를 조정하여 앱 화면을 구성하는 UI 콘텐츠의 크기를 재조정할 수 있다.

    그림 28: 스케일 팩터를 이용한 콘텐츠 크기 변경

    얼핏 보기엔 상대좌표를 이용한 구현 결과물과 크게 다를바 없어 보일 수도 있지만, 스케일 팩터는 상대좌표에 영향을 받지 않는 폰트 크기에 영향을 주는 것은 물론, 콘텐츠의 고정 영역 및 최소 크기에도 똑같이 크기 영향을 줘야 한다. 그렇기 때문에 출력 영역의 크기에 상관없이 앱의 뷰 구성은 완전히 동일하게 출력될 수 있다.

    UI 엔진은 각 앱마다 다른 스케일 팩터값을 이용하여 앱의 UI 크기의 단위를 조정할 수 있다. 스케일 팩터는 앱의 UI 화면 구성을 보존할 수 있기 때문에 본래의 디자인을 보장한다는 장점이 있다. 하지만 터치스크린 환경에서 무작정 스케일을 낮추다 보면 사용자가 선택하기 어려울 정도로 UI 컨트롤이 작아질 수도 있다. 그림 28의 스케일 팩터가 3.3인 경우가 그러하다. 사용자의 입력을 받는 UI 컨트롤의 경우 사용자가 입력이 가능한 수준의 크기는 최소한으로 보장해야 한다. 이를 위해 핑거 사이즈(Finger Size)의 개념을 도입할 수 있으며 터치스크린 환경에서 사용자 입력을 받는 UI 컨트롤은 핑거 사이즈 이상의 크기를 절대적으로 보장해야만 한다. 핑거 사이즈는 UI 엔진 내에서 시스템 환경 변수를 통해 얻어올 수 있으며 UI 컨트롤의 크기를 계산할 때 핑거 사이즈보다 작은지만 추가로 고려해주면 된다. 실제로 Enlightenment Foundation Libraries UI 프레임워크는 이러한 기능을 구현하고 있다.

    /*
     * UIObject는 모든 UI 컨트롤의 기저(base) 클래스에 해당된다.
     * UI 컨트롤의 기본 동작 및 속성을 구현한다.
     * 코드 3을 기반으로 추가 작성한다. 핵심은 31라인을 확인하면 된다.
    */
    UIObject
    {
        Geometry geom = {0, 0, 0, 0};      //오브젝트의 지오메트리(위치 및 크기)
        Point relative1 = {0, 0};          //relative1 속성
        Point relative2 = {0, 0};          //relative2 속성
        Bool updateGeom = false;           //true인 경우 지오메트리를 새로 갱신한다.
        ...
    
        /*
         * 오브젝트를 새로 갱신한다.
         * 매 프레임마다 UI 엔진에 의해 호출된다.
        */
        update(...)
        {
            //지오메트리가 새로 갱신되어야 할 경우,
            if (updateGeom == true || output.changed) {
                /* output은 오브젝트가 출력되는 영역이다. update의 인자로 전달되었거나,
                   메서드 자체적으로 얻어왔다고 가정하자. 정규 좌표계식을 역으로 계산하여
                   지오메트리 픽셀 값을 구한다. 만약 output 크기 자체가 변경되어도
                   지오메트리는 새로 갱신되어야 한다. 최종적으로 스케일 팩터를 통해 크기를       
                   재조정 한다. */
                geom.x = (output.w * relative1.x) * UIConfig.scaleFactor;
                geom.y = (output.h * relative1.y) * UIConfig.scaleFactor;
                geom.w = (output.w * relative2.x) * UIConfig.scaleFactor - geom.x;
                geom.h = (output.h * relative2.y) * UIConfig.scaleFactor - geom.y;
    
                //핑거 사이즈보다 작으면 크기를 강제로 키운다.
                if (geom.w < UIConfig.fingerSize) {
                   geom.w = UIConfig.fingerSize;
                }
                if (geom.h < UIConfig.fingerSize) {
                   geom.h = UIConfig.fingerSize;
                }
    
                //더 이상 지오메트리가 갱신될 필요가 없다.
                updateGeom = false;
            }
            
            ...
        }
    }
    
    코드 16: 핑거 사이즈를 고려한 UI 컨트롤 크기 결정

    사실, dpi에 대응하여 스케일 팩터를 조정한다면 앞서 살펴본 디바이스 독립적인 픽셀과 동일한 해결책을 제공할 수도 있다. 실제로 Enlightenment Foundation Libraries에서는 동일한 물리적 크기를 보장하기 위해 스케일 팩터를 사용하기도 한다. 조금 더 고민해 본다면 UI 프레임워크 내부적으로 시스템 구동 환경(dpi)에 따라 scaleFactor를 조정한다면 앱 개발자에게 보다 편리한 개발 환경을 제공할 수도 있을 것이다.


    5.3 자동 스크롤

    앱 화면 출력 영역이 콘텐츠의 최소 크기보다 작은 경우 스케일 팩터를 이용하여 크기를 조정할 수도 있지만 앱 화면에 스크롤 기능을 활성화하면 이러한 문제를 피할 수도 있다. 실제로 앱 개발시 비교적 출력 내용이 많은 주 콘텐츠 영역에는 스크롤 기능이 활용되지만, 앱 개발자가 이를 미처 고려하지 못한 경우를 대비하여 UI 프레임워크가 자동으로 스크롤 기능을 추가해 줄 수도 있다. 스케일 팩터로 앱의 UI 스케일을 조정할지라도 최소한 핑거 사이즈는 보장은 되어야 하므로 자동 스크롤은 최악의 경우에도 대안책으로 사용될 수 있다.

    그림 29: 스크롤 기능 활성

    UI 엔진에서는 현재 앱 화면을 구성하는 컨텐츠의 최종 크기를 계산한 후, 컨텐츠의 크기가 윈도우 출력 영역보다 큰 경우 스크롤 기능을 앱 화면 전체 또는 주 컨텐츠를 대상으로 추가해 주면 된다. 사용자 관점에서 사용성이 좋지는 않겠지만 최소한 사용자는 앱 화면을 스크롤하면서 콘텐츠를 이용할 수 있다.


    5.4 어댑티브 UI

    스케일러블 UI는 다양한 화면 크기의 디바이스에서 앱의 동일한 경험을 사용자에게 제공하기 위한 현실적인 방법 중 하나이지만 사용자에게 최고의 경험을 제공할 수 있는 방법은 결코 아니다. 예를 들어, 휴대폰을 위해 디자인한 앱 UI는 디바이스의 특성상 컴팩트한 UI를 고려해야 하는 반면, 데스크탑과 같은 비교적 화면 공간의 여유가 있는 앱은 좀 더 다양한 기능을 사용자들이 동시에 사용할 수 있도록 UI를 구성할 수 있다. 달리 말하면, 휴대폰을 위한 UI는 데스크탑에서는 최선의 디자인이라고 하긴 어렵다. 이를 위해 앱은 어댑티브 UI 방식을 적용하여 해상도 또는 디바이스마다 다른 UI를 구성할 수 있다. 앱은 해상도에 특정 구간을 지정하고 해당 구간의 해상도에서 출력할 UI 레이아웃을 미리 구현할 수 있다. 또는 디바이스 종류에 따라 출력할 UI를 따로 구현할 수 있다. 모바일 기기에서는 단순히 세로 모드(Portrait), 가로 모드(Landscape)에 따라 다른 UI를 구현하기도 한다. 이러한 어댑티브 UI를 이용하는 방식은 사용자에게 화면에 최적화된 UI를 제공하는 것은 물론, 최소한 디바이스 종류마다 프로젝트를 다르게 구성하고 패키지를 제공하는 것보다는 관리 차원에서도 더 효율적이다.

    그림 30: 자마린(Xamarin Forms)의 어댑티브 UI 예

    //디바이스 타입에 따라 앱 요구사항에 맞는 레이아웃을 구성한다.
    switch (UIConfig.deviceProfile)
    {
       //데스크탑 환경의 UI를 구현한다.
        case DeviceProfile.DESKTOP:
            ... 
            break;
        //모바일 환경의 UI를 구현한다.
        case DeviceProfile.MOBILE:
            ...
            break;
        //태블릿 환경의 UI를 구현한다.
        case DeviceProfile.TABLET:
            ...
            break;    
    }
    
    코드 17: 프로파일별 어댑티브 UI 구현 예

    //해상도에 따라 앱 요구사항에 맞는 레이아웃을 구성한다.
    switch (UIConfig.screenResolution)
    {
       case ScreenResolution.WVGA:
       case ScreenResolution.WSVGA:
       case ScreenResolution.HD:
            ... 
            break;
       case ScreenResolution.1080P:
       case ScreenResolution.WUXGA:
            ...
            break;
       case ScreenResolution.2K:
       case ScreenResolution.UWHD:
       case ScreenResolution.WQHD:
            ...
            break;
       default:
            ...
            break;    
    }
    
    코드 18: 해상도별 어댑티브 UI 구현 예

    코드 17, 18처럼 실제로 코드 상에서 디바이스, 해상도별 경우를 따지며 UI 레이아웃을 구성하는 방법도 존재하지만 앱이 해상도 또는 디바이스별로 UI 리소스를 보유하되 이를 폴더별 또는 파일명으로 구분하는 방식도 가능하다. 이 경우 프레임워크에서는 현재 구동 중인 디바이스의 환경에 가장 근접한 리소스를 불러와 화면에 출력할 수 있다. 이 경우 시스템이 컴파일된 앱 바이너리를 실행하여 앱 UI를 구성하는 방식이 아닌 런타임시에 앱 UI를 구성하는 텍스트 정보를 실시간으로 해석하여 구성하는 별도의 리소스(XML, XMAL, JavaScript, JSON과 같은 스크립트 기반의 UI 구성 정보)를 앱이 작성할 수 있도록 UI 프레임워크에서는 기반을 제공해 주어야 한다. 이러한 구현 방식에 대해선 앱과 UI 프레임워크간의 사전 약속이 필요하지만 앱 개발자는 디바이스, 해상도별 경우의 수를 고려한 코드를 직접 작성하지 않아도 되므로 어댑티브 UI 구현이 비교적 안정적일 수 있다. 보다 구체적인 스크립트 기반의 UI 구성 방안은 이후에 따로 언급하도록 한다.


    6. 정리하기

    이상으로 우리는 앱 호환성을 위한 스케일러블 UI의 개념과 구현 방식에 대해서 살펴보았다. 기본적으로 앱 UI를 구성하기 위해서는 절대 좌표계를 이용할 수 있으며 보다 높은 호환성을 위해 정규 좌표계와 상대 좌표계를 사용할 수 있었다. 정규 좌표계는 UI의 위치와 크기를 디바이스 출력 장치에 비례하여 출력할 수 있는 기본적인 방법이며 상대 좌표계는 다른 UI 컨트롤의 크기와 위치에 비례하여 출력할 수 있는 방법이다. 정규, 상대 좌표계의 제약 사항을 보완하기 위해 UI의 크기 제약의 개념도 살펴보았다. UI의 크기 제약을 이용하면 UI의 최소/최대 크기를 보장할 수 있으며 UI가 외양 측면에서 손상되는 상황을 방지할 수 있었다.

    다소 복잡한 UI 레이아웃을 보다 쉽고 안전하게 구성하기 위해 UI 프레임워크에서 제공하는 컨테이너의 개념과 이들의 특성을 살펴보았다. 컨테이너는 다양한 컨셉과 특성을 제공하며 여러 컨테이너를 조합하면 다양한 형태의 레이아웃을 구성할 수 있음을 알 수 있었다. 뿐만 아니라, 컨테이너는 앱 개발자가 실수할 수 있는 여지를 프레임워크 단에서 방지해 주는 장점을 가지고 있었다. 컨테이너에 배치하는 UI 컨트롤의 크기와 위치를 지정하기 위해 가중치와 정렬 개념도 함께 살펴보았다.

    추가로 보다 완성도 높은 앱을 개발하기 위한 고급 기법들을 살펴보았으며 여기에는 디바이스 독립적인 픽셀을 이용하여 dpi에 영향을 받지 않고 동일한 물리적 크기를 출력하는 방식부터 UI의 크기를 동적으로 조정할 수 있는 스케일팩터와 핑거 사이즈 그리고 화면 공간의 부족으로 사용이 불가능한 문제를 해결하기 위한 자동 스크롤과 같은 기능이 있음을 알 수 있었다. 마지막으로 어댑티브 UI를 통해 디바이스에 최적화된 UI 레이아웃을 동적으로 구성할 수 있음을 알 수 있었다.


    저작자 표시 비영리 변경 금지
    신고