태터데스크 관리자

도움말
닫기
적용하기   첫페이지 만들기

태터데스크 메시지

저장하였습니다.

Search

'어도비AIR'에 해당되는 글 2건

  1. 2009/02/16 유세윤 1.0 (18)
  2. 2009/01/11 AIR개발자라면 피해야할 실수 - Custom Chrome의 잘못된 활용 (7)

유세윤 1.0

RIA/AIR 2009/02/16 04:12 Posted by 희희덕
안녕하세요.
희희덕덕입니다 : )

간만에 AIR로 개발한 애플리케이션을 공개합니다.
(사실 음흉하고 거시기한 목적으로 여러 애플리케이션을 개발해서 사용중이기도한...)

그럼, 프로그램 이름은

"유세윤"~

ㄷㄷㄷㄷㄷ..
이..이프로그램 이름이 왜 유세윤이냐고 하면 ㅠㅠ
아무것도 묻지도 따지지 말아주십쇼 ㅠㅠ

유세윤은 숭실대학교 학생분들을 위해 개발된 프로그램으로, 숭실대학교의 수강편람을 참고해 간단히 시간표를 만들수 있는 프로그램입니다.

사용자 삽입 이미지

것..것보기에도 뭔가 깔쌈하고,
간단해보이죠? ㄷㄷ

그럼 간단하게 유세윤을 사용하는 방법에 대해 알려드릴게요~

사용자 삽입 이미지

유세윤에서는 앞서 설명한것 처럼 숭실대 학사편람을 기반으로 시간표를 작성하게 되어있는데, 이 학사편람은 유세윤 서버로부터 내려받을수 있어요! 이후에 2학기, 계절학기에도 설정란에서 간단히 변경만 해주면, 계속해서 사용할수 있습니다.

제일 처음 유세윤을 실행하게 되면, 학사편람을 불러오게됩니다. 지금은 2009학년도 1학기이니, 확인버튼을 눌러주면, 다운로드가 진행됩니다.

사용자 삽입 이미지
유세윤은 크게 두가지 영역으로 나뉘어져있는데, 왼쪽 영역에서는 시간표를 검색하실수 있습니다. 시간표는 전공/교양필수(교필)/교양선택(교선)/기타 그리고 교수님 성함이나, 강의명, 과목번호로 검색할 수 있는 검색탭이 있습니다. 각 탭에서, 검색하고자 하는 구분을 선택하시고 검색버튼을 클릭하시면,

사용자 삽입 이미지
아래화면에 검색된 시간표가 나오게됩니다.
그리고, 각 과목에 마우스를 올려놓으면
사용자 삽입 이미지
시간표 위에 자동으로 추가되는데요!
마우스를 다시 떼게 될경우엔 자동적으로 없어지게되요~

즉, 마우스를 올려놓고, 오른쪽에 그 시간에 중복되는 과목이 있는지 확인해보면 편리하겠죠?

사용자 삽입 이미지
그리고, "좋아 피카츄, 너로 결정했어"... 하는 과목이 있으면,
오른쪽의 시간표에서 없어지기 전에 과목 아래에 있는 초록색 체크버튼을 누르면,
이제 마우스를 떼더라도 없어지지 않고, 프로그램이 실행될때마다 자동적으로 채워저 있어요!

사용자 삽입 이미지

어때요? 참 쉽죠?
유세윤과 함께라면~ 수강신청 시즌이 무섭지 않을거에요 >ㅂ<
(다만, 항상 뻗어계시는 유세인트와, 매크로를 사용하시는 일부 학우님들 -_-+++)

그리고, 유세윤에는 몇가지 기능이 더 있는데,
그 기능에 대해서 소개해드릴게요!

사용자 삽입 이미지

이렇게 작성한 시간표를 유세윤에서만 볼것이냐? 아니죠;;
그림파일로 저장할 수도 있고, 프린터로 방금짠 따끈따끈한 시간표*-_-*를 뽑아보실수도 있어요~

그리고, 어... 나 시간표말고,
내가 신청한 목록도 깔쌈하게 살펴보고싶은데.. 라고 하시는 분들을 위해

사용자 삽입 이미지

시간표 화면에서 목록보기 버튼을 누르면,
내가 시간표에 추가한 과목들만 간단히 살펴볼수 있고,
이러한 목록들도 그림파일로 저장할수있거나, 프린터로 뽑아볼수도 있어요!

그 외에, 지금은 지원하진 않지만,
친구들에게 나의 시간표를 보낼수도 있고,
여러 시간표중 나에게 최적화된 시간표를 판정해볼수도 있고,
유세윤아이팟으로 시간표를 내보낼수있는 기능들도 곧 추가될 예정이에요.

자! 유세윤 써..써보고싶죠?

그럼 아래의 Install Now를 눌러서,
설치해보세요~


"유세윤"은 숭실대 학사편람을 기반으로 개발되었으며, 실제 학사편람과 다소 상이할수 있습니다. 따라서, 수강신청 전에, 반드시 숭실대에서 발행하는 학사편람을 참고하시기 바랍니다. 이후에 변경된 학사편람은 유세윤서버로 업데이트되고, 설정란에서 업데이트를 통해 최신버전으로 내려받을 수 있습니다.
(추가 - 현재 맥 OS에서 유세윤의 일부 기능을 사용할수 없는 문제를 발견하였습니다. 이 문제는 빠른시일 내로 패치에 포함토록 하겠습니다.)

유세윤은 Adobe AIR 기반으로 개발되어서 맥OS, 리눅스, 윈도우를 지원하고 있습니다.
그럼 숭실대 학우여러분! 유세윤과 함께 조..조금더(...more) 즐거운 캠퍼스 생활 보내시기 바랍니다.

09학번들도 많이 이뻐해주세요~ ㅎㅎ

PS) 유세윤을 개발하는데 아직 학번이 안나온 새내기를 위해, 수강편람을 제공해주신, 컴퓨터학부 정재봉(아이러니)선배님께도 감사의 말씀을 드리고싶습니다.!
크리에이티브 커먼즈 라이선스
Creative Commons License
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를 활용하여 개발하는것이 좋습니다.
크리에이티브 커먼즈 라이선스
Creative Commons License