AIR가 정식적으로 출시된지 약 1년이 지났습니다. 그간 AIR는 이베이, 나스닥, 파인툰등 외국기업들을 비롯해 국내에서는 GS이숍, 엠비안, 아이에스비엔샵 등이 속속 도입하면서 그 입지를 굳혀가고 있습니다. 전세계적으로AIR로 개발된 애플리케이션이 약 천만개에 이를정도로 그 파급력은 대단한데요.
Adobe AIR는 Flash Player에서 더 나아가 웹킷 엔진을 채용함으로써, 실제적으로 액션스크립트를 모르는 자바스크립트 개발자도 애플리케이션을 쉽게 개발할 수 있고, 추후 Alchemy를 활용해 C/C++ 컴포넌트를 그대로 AIR개발에 활용할 수 있는 만큼, 개발 언어의 폭도 상당히 넓은 편입니다.
그만큼, 보안적인 이슈를 비롯해 주의해야할 많은 이슈들이 존재하고 있으며, 그 이슈들이 사용자에겐 치명적인 결함이 되기도 합니다. 그와 관련된 이슈는 아래의 문서를 살펴보세요.
AIR개발자들이 공통적으로 하는 10가지 실수 - David Tucker
저는 위의 이슈들에 덧 붙여서, AIR개발자들이 반복적으로 하기 쉬운 실수들에 대해 연속적으로 다루어 보고자 합니다. 실제로 그런 실수는 매우 간단하게 수정할 수 있고, 또 예방할 수 있습니다.
여러분들은 어떠한 운영체제를 사용하고 계신지요? 국내에선 90%이상이 윈도우라고 대답하겠지요 ㅎㅎ 운영체제의 종류는 크게 윈도우/리눅스/유닉스 등이 있으며, 현재 대표적으로 많이 쓰이고 있는것이 윈도우XP와 MAC OS입니다.
그래픽유저인터페이스(GUI)라는 개념이 도입된 이후로, 사용자의 입력을 담당하는 마우스포인터가 생겼고, 또 여러 애플리케이션이 멀티태스킹 할 수 있도록, 창(Window)이라는 개념도 새롭게 생겨나게 되었습니다.
하지만, 운영체제를 장기간 사용하다 보면 다소 단조로운 UI에 질려서, 사용자가 스스로 디자인을 커스트마이징 하는 사례들도 늘어나고 있습니다. 윈도우 제품군에서는 이를 '테마'라고 해서 지원하고 있습니다. 이런 '테마'를 손쉽게 만들어서 배포할 수도 있습니다.
AIR에서도 GUI환경에서 하나의 애플리케이션의 실행공간인 창(Window)을 꾸밀수 있도록 아래의 세가지 방법으로 제공하고 있습니다.
System Chrome
시스템크롬(System Chrome)는 AIR개발시 기본사항으로써, 사용자의 운영체제의 UI를 그대로 불러와서 사용합니다. 따라서, 윈도우나 리눅스, 맥OS등에서도 모두 기본 UI가 적용되게 됩니다.
위 System Chrome의 가장 큰 장점은 바로 사용자에게 가장 친숙한 인터페이스를 제공한다는 점입니다. 해당 애플리케이션을 제일 처음 실행하는 사람이더라도, 익숙하게 사용할 수 있습니다.
하지만 단점으로는, 애플리케이션이 실행중인 창 전체의 인터페이스는 개발자가 변경 할 수 없다는 점입니다. 즉, 해당 애플리케이션이 실행중인 창 안의 인터페이스만 개발 할 수 있습니다.
Flex Chrome
Flex Chrome는 플렉스에서 개발중일때, System Chrome를 해제하게 되면 활성화 되게 됩니다. 어도비에서 기본적으로 제공하는 윈도우 템플릿인 Flex Chrome은 위의 System Chrome와는 달리 모든 운영체제에서 같은 UI로 보이게 됩니다.
다만, Flex Chrome는 System Chrome와 마찬가지로 애픙리케이션이 실행중인 창의 UI는 변경할 수 없고, 디자인의 자율성이 낮기 때문에 추천해 드리고 싶진 않습니다.
Custom Chrome
Custom Chrome는 영문 뜻 그대로, 애플리케이션이 실행중인 창 전체의 인터페이스도 커스트마이징 하는것을 의미합니다. 일반적으로 Flex에서 개발할땐, System Chrome와, Flex Chrome의 속성을 모두 해제하게 될경우, Custom Chrome로 설정되게 됩니다.
Custom Chrome으로 개발하려면(Flex 기준), 우선 [project-name]-app.xml 파일에서 systemChrome의 주석을 해제한후 none를 입력하고, [project-name].mxml파일에서 WindowedApplication에 showFlexChrome프로퍼티를 추가해 false로 지정해두면 됩니다.
그렇게 제일 처음 실행하게 되면 청옥색의 배경 위에 애플리케이션이 떠있는것을 볼 수 있는데, Flex에서 기본적으로 배경 색상은 청옥생이기 때문에 배경의 투명도를 주지 않게 되면, 위의 화면처럼 출력되게 됩니다. 투명도는 [project-name]-app.xml파일에서, transparent 프로퍼티의 주석을 해제한후 true 지정할 수 있습니다.
이러한 Custom Chrome는 애플리케이션 내부 뿐만 아니라 창 전체의 인터페이스도 완전히 커스트마이징 할 수 있고, 또 각 OS마다 새롭게 커스트마이징한 인터페이스를 똑같이 구현할 수 있습니다.
Custom Chrome를 잘못 사용하면 어떤 문제점이 있을까?
하지만 Custom Chrome를 지나치게 활용하면 큰 문제점이 있습니다. 위에서 설명드린것과 같이 System Chrome와는 달리 Custom Chrome는 창의 유저인터페이스 까지 커스트마이징 해버리기 때문에, 각 운영체제별로 똑같은 유저인터페이스가 적용되게 됩니다.
위의 점이 장점으로 보일수 있겠지만, 아래를 살펴보게 되면 그 단점에 대해 이해할 수 있을것입니다.
바로, 각 운영체제별 기본적으로 제공하는 사용자 인터페이스가 다릅니다. 우선 MAC OS X는 각 기능버튼이 왼쪽에 있는 반면, Windows Platform은 각 기능버튼이 오른쪽에 위치해 있습니다.
각 기능버튼이 세개지만 기능버튼의 배열 순서도 다릅니다. 우선 MAC OS X 는 각 기능버튼을 색깔별로 배열했지만, Windows Platform은 아이콘으로 배열되어 있고, 또 각 위치별 기능도 다릅니다.
또한, 각 창을 더블클릭했을때에도 MAC OS X는 창이 담기는 반면, Windows Platform은 창이 최대화되게 됩니다.
이것이 뭐 그리 대수냐고 생각할 수 있지만, 개발자가 자신이 사용하고 있는 운영체제에만 맞춰서 인터페이스를 구상하게 되면, 명백히 말해서 타 운영체제를 사용하는 사용자의 경험(UX)에 반하는 유저인터페이스를 제공하게 되는것입니다.
일단 대부분의 GUI기반 운영체제는 기본적으로 창이라는 단위에서 해당 애플리케이션이 실행되게됩니다. 하지만 MAC OS X를 사용하는 사용자에게 Windows Platform을 기반으로 구현된 인터페이스를 제공하면 어떨까요? 반대의 경우도 어떨까요? 이 경우 해당 애플리케이션을 사용하는 사용자에겐 큰 혼란을 일으킬 수도 있습니다.
그 문제점을 해결하는 방법은?
위의 문제는 해당 애플리케이션에 기능상으론 큰 문제를 일으키진 않지만, 사용자의 경험 측면에선 상당히 커다란 문제를 일으키게 됩니다.
AIR는 현재 윈도우, 맥을 정식적으로 지원하고 있고 리눅스는 현재 베타버전이 배포되어 있습니다. 추후, AIR2.0과 Flash Lite와 AMC의 결합형인 AIR "Stratos"가 나오는 만큼 AIR는 이제 크로싱 운영체제가 아닌 크로싱 디바이스로 까지 변모를 추진하고 있습니다.
그렇기 때문에, 가급적이면 System Chrome를 사용하여, 해당 애플리케이션이 실행중인 창의 UI는 변경하지 않는것을 권고하고 있습니다.
하지만 불가피하게 Custom Chrome를 이용하여 개발하는 경우엔 아래의 방법으로 위의 문제점을 해결 할 수 있습니다.
1. 다양한 OS의 UI를 파악한후, 디자인할것
우선 AIR가 지원되는 OS의 UI의 특징점등을 파악하는것이 중요합니다. 윈도우와 맥, 그리고 리눅스는 큰 차이가 있습니다. 특히 리눅스는 OS가 많고, GUI환경을 지원하는 애플리케이션이 많기 때문에, 통상적으로 윈도우,맥을 기반으로 디자인하는것이 바람직 합니다.
이렇게 각 운영체제의 UI와 기능들을 파악한후, 본격적으로 Custom Chrome도 각 OS에 맞게 디자인 하면 됩니다.
2. 애플리케이션 초기화시 사용자의 OS를 파악하여 인터페이스를 꾸밀것
이렇게 디자인된 각 UI들을 Flex에서는 ViewStack로 잘 분류해서 배치한 다음, 애플리케이션이 초기화될때, 사용자의 OS를 파악하여 적절한 UI를 선택하면 됩니다.
아래는 그 예입니다.
위의 예시는 해당 애플리케이션이 모두 초기화 될때 detectOS()를 호출해 사용자의 os를 확인한후, ViewStack를 전환하여 운영체제별로 다른 사용자 인터페이스를 제공하고 있습니다.
무엇보다 위의 방법은 이후 AIR가 더 많은 플랫폼을 지원할 경우 애플리케이션의 코드량이 더 많이 증가할 수 있기 때문에, 가급적 사용을 권장하지 않으며, 가장 좋은 방법은 사용자에게 가장 친숙한 경험을 제공할 수 있는 System Chrome를 활용하여 개발하는것이 좋습니다.
Adobe AIR는 Flash Player에서 더 나아가 웹킷 엔진을 채용함으로써, 실제적으로 액션스크립트를 모르는 자바스크립트 개발자도 애플리케이션을 쉽게 개발할 수 있고, 추후 Alchemy를 활용해 C/C++ 컴포넌트를 그대로 AIR개발에 활용할 수 있는 만큼, 개발 언어의 폭도 상당히 넓은 편입니다.
그만큼, 보안적인 이슈를 비롯해 주의해야할 많은 이슈들이 존재하고 있으며, 그 이슈들이 사용자에겐 치명적인 결함이 되기도 합니다. 그와 관련된 이슈는 아래의 문서를 살펴보세요.
AIR개발자들이 공통적으로 하는 10가지 실수 - David Tucker
저는 위의 이슈들에 덧 붙여서, AIR개발자들이 반복적으로 하기 쉬운 실수들에 대해 연속적으로 다루어 보고자 합니다. 실제로 그런 실수는 매우 간단하게 수정할 수 있고, 또 예방할 수 있습니다.
여러분들은 어떠한 운영체제를 사용하고 계신지요? 국내에선 90%이상이 윈도우라고 대답하겠지요 ㅎㅎ 운영체제의 종류는 크게 윈도우/리눅스/유닉스 등이 있으며, 현재 대표적으로 많이 쓰이고 있는것이 윈도우XP와 MAC OS입니다.
그래픽유저인터페이스(GUI)라는 개념이 도입된 이후로, 사용자의 입력을 담당하는 마우스포인터가 생겼고, 또 여러 애플리케이션이 멀티태스킹 할 수 있도록, 창(Window)이라는 개념도 새롭게 생겨나게 되었습니다.
하지만, 운영체제를 장기간 사용하다 보면 다소 단조로운 UI에 질려서, 사용자가 스스로 디자인을 커스트마이징 하는 사례들도 늘어나고 있습니다. 윈도우 제품군에서는 이를 '테마'라고 해서 지원하고 있습니다. 이런 '테마'를 손쉽게 만들어서 배포할 수도 있습니다.
AIR에서도 GUI환경에서 하나의 애플리케이션의 실행공간인 창(Window)을 꾸밀수 있도록 아래의 세가지 방법으로 제공하고 있습니다.
System Chrome
시스템크롬(System Chrome)는 AIR개발시 기본사항으로써, 사용자의 운영체제의 UI를 그대로 불러와서 사용합니다. 따라서, 윈도우나 리눅스, 맥OS등에서도 모두 기본 UI가 적용되게 됩니다.
위 System Chrome의 가장 큰 장점은 바로 사용자에게 가장 친숙한 인터페이스를 제공한다는 점입니다. 해당 애플리케이션을 제일 처음 실행하는 사람이더라도, 익숙하게 사용할 수 있습니다.
하지만 단점으로는, 애플리케이션이 실행중인 창 전체의 인터페이스는 개발자가 변경 할 수 없다는 점입니다. 즉, 해당 애플리케이션이 실행중인 창 안의 인터페이스만 개발 할 수 있습니다.
Flex Chrome
Flex Chrome는 플렉스에서 개발중일때, System Chrome를 해제하게 되면 활성화 되게 됩니다. 어도비에서 기본적으로 제공하는 윈도우 템플릿인 Flex Chrome은 위의 System Chrome와는 달리 모든 운영체제에서 같은 UI로 보이게 됩니다.
다만, Flex Chrome는 System Chrome와 마찬가지로 애픙리케이션이 실행중인 창의 UI는 변경할 수 없고, 디자인의 자율성이 낮기 때문에 추천해 드리고 싶진 않습니다.
Custom Chrome
Custom Chrome는 영문 뜻 그대로, 애플리케이션이 실행중인 창 전체의 인터페이스도 커스트마이징 하는것을 의미합니다. 일반적으로 Flex에서 개발할땐, System Chrome와, Flex Chrome의 속성을 모두 해제하게 될경우, Custom Chrome로 설정되게 됩니다.
Custom Chrome으로 개발하려면(Flex 기준), 우선 [project-name]-app.xml 파일에서 systemChrome의 주석을 해제한후 none를 입력하고, [project-name].mxml파일에서 WindowedApplication에 showFlexChrome프로퍼티를 추가해 false로 지정해두면 됩니다.
그렇게 제일 처음 실행하게 되면 청옥색의 배경 위에 애플리케이션이 떠있는것을 볼 수 있는데, Flex에서 기본적으로 배경 색상은 청옥생이기 때문에 배경의 투명도를 주지 않게 되면, 위의 화면처럼 출력되게 됩니다. 투명도는 [project-name]-app.xml파일에서, transparent 프로퍼티의 주석을 해제한후 true 지정할 수 있습니다.
이러한 Custom Chrome는 애플리케이션 내부 뿐만 아니라 창 전체의 인터페이스도 완전히 커스트마이징 할 수 있고, 또 각 OS마다 새롭게 커스트마이징한 인터페이스를 똑같이 구현할 수 있습니다.
Custom Chrome를 잘못 사용하면 어떤 문제점이 있을까?
하지만 Custom Chrome를 지나치게 활용하면 큰 문제점이 있습니다. 위에서 설명드린것과 같이 System Chrome와는 달리 Custom Chrome는 창의 유저인터페이스 까지 커스트마이징 해버리기 때문에, 각 운영체제별로 똑같은 유저인터페이스가 적용되게 됩니다.
위의 점이 장점으로 보일수 있겠지만, 아래를 살펴보게 되면 그 단점에 대해 이해할 수 있을것입니다.
각 기능버튼이 세개지만 기능버튼의 배열 순서도 다릅니다. 우선 MAC OS X 는 각 기능버튼을 색깔별로 배열했지만, Windows Platform은 아이콘으로 배열되어 있고, 또 각 위치별 기능도 다릅니다.
또한, 각 창을 더블클릭했을때에도 MAC OS X는 창이 담기는 반면, Windows Platform은 창이 최대화되게 됩니다.
이것이 뭐 그리 대수냐고 생각할 수 있지만, 개발자가 자신이 사용하고 있는 운영체제에만 맞춰서 인터페이스를 구상하게 되면, 명백히 말해서 타 운영체제를 사용하는 사용자의 경험(UX)에 반하는 유저인터페이스를 제공하게 되는것입니다.
일단 대부분의 GUI기반 운영체제는 기본적으로 창이라는 단위에서 해당 애플리케이션이 실행되게됩니다. 하지만 MAC OS X를 사용하는 사용자에게 Windows Platform을 기반으로 구현된 인터페이스를 제공하면 어떨까요? 반대의 경우도 어떨까요? 이 경우 해당 애플리케이션을 사용하는 사용자에겐 큰 혼란을 일으킬 수도 있습니다.
그 문제점을 해결하는 방법은?
위의 문제는 해당 애플리케이션에 기능상으론 큰 문제를 일으키진 않지만, 사용자의 경험 측면에선 상당히 커다란 문제를 일으키게 됩니다.
AIR는 현재 윈도우, 맥을 정식적으로 지원하고 있고 리눅스는 현재 베타버전이 배포되어 있습니다. 추후, AIR2.0과 Flash Lite와 AMC의 결합형인 AIR "Stratos"가 나오는 만큼 AIR는 이제 크로싱 운영체제가 아닌 크로싱 디바이스로 까지 변모를 추진하고 있습니다.
그렇기 때문에, 가급적이면 System Chrome를 사용하여, 해당 애플리케이션이 실행중인 창의 UI는 변경하지 않는것을 권고하고 있습니다.
하지만 불가피하게 Custom Chrome를 이용하여 개발하는 경우엔 아래의 방법으로 위의 문제점을 해결 할 수 있습니다.
1. 다양한 OS의 UI를 파악한후, 디자인할것
우선 AIR가 지원되는 OS의 UI의 특징점등을 파악하는것이 중요합니다. 윈도우와 맥, 그리고 리눅스는 큰 차이가 있습니다. 특히 리눅스는 OS가 많고, GUI환경을 지원하는 애플리케이션이 많기 때문에, 통상적으로 윈도우,맥을 기반으로 디자인하는것이 바람직 합니다.
2. 애플리케이션 초기화시 사용자의 OS를 파악하여 인터페이스를 꾸밀것
이렇게 디자인된 각 UI들을 Flex에서는 ViewStack로 잘 분류해서 배치한 다음, 애플리케이션이 초기화될때, 사용자의 OS를 파악하여 적절한 UI를 선택하면 됩니다.
아래는 그 예입니다.
위의 예시는 해당 애플리케이션이 모두 초기화 될때 detectOS()를 호출해 사용자의 os를 확인한후, ViewStack를 전환하여 운영체제별로 다른 사용자 인터페이스를 제공하고 있습니다.
무엇보다 위의 방법은 이후 AIR가 더 많은 플랫폼을 지원할 경우 애플리케이션의 코드량이 더 많이 증가할 수 있기 때문에, 가급적 사용을 권장하지 않으며, 가장 좋은 방법은 사용자에게 가장 친숙한 경험을 제공할 수 있는 System Chrome를 활용하여 개발하는것이 좋습니다.
