Obigo, ACL

Desktop에선 이런 형태를 Widget이라고 합니다.

Mobile widget은 다양한 형태가 될 수 있습니다.

W3C Widget Spec

• http://www.w3.org/TR/widgets/

Opera widgets

• http://widgets.opera.com/

Access Widget

• http://widgets.access-company.com/en/

Nokia Widget

• http://www.forum.nokia.com/Develop/Web/

• HTML Mark-up
• CSS coding
• Image Slicing
• 위 작업을 총칭하여 편의상 Publishing으로 부르기로 합니다.

하나의 서비스를 각각의 플랫폼 마다 개발해야 합니다.
크로스 플랫폼은 꿈 같은 이야기.

• Web기술 이라면 가능하지 않을까
• 개발자도 더 많이 끌어들일 수 있고
• 그런데, 웹은 고도화된 UI나 기능 구현이 어렵다고
• Device의 모든 기능을 활용할 수도 없잖아
• 그럼 다른 대안이 있어?

• Zip 압축파일. 확장자만 WGT로 변경해서 사용함

Widget의 구성

• config.xml
• icon.png
• index.html
• 기타 등등 (CSS, Image, JS, Locales)

<?xml version="1.0" encoding="UTF-8"?>
<widget xmlns       = "http://www.w3.org/ns/widgets"
        id          = "http://obigo.com/sudoku"
        version     = "1.0 Beta"
        height      = "320"
        width       = "240"
        viewmodes   = "widget">
  <name>Sudoku</name>
  <description>It's a really nice Sudoku game.</description>
  <author email="toby.yun@obigo.com">Toby</author>
  <license>Copyright (c) Obigo All Rights Reserved</license>
</widget>

• Widget RunTime (Web RunTime)
• WGT 파일을 로드하여 실행할 수 있도록 함
• Widget object 지원
• Device API 지원 (JIL/BONDI)

• JIL / BONDI

• 기술의 발전속도가 사용자들의 요구보다 빠름
• 정적인 방식이 알맞은 서비스 영역이 있음

• Widget은 보기 좋게 만드는데 한계가 있어
• 퍼포먼스가 떨어져 (느려)
• 웬만한건 다 안돼

• 이통사, 제조사들의 각 프로젝트 마다 Widget을 검토중
• 일단 시작하게 되면 Eco system 구축을 위해 다수의 widget이 필요함. (Contest 개최하여 Contents 수급)
• 삼성의 Bada에도 widget이 탑재됨
• 슈퍼 앱스토어 WAC, KWAC 등장 준비중
• HTML/CSS로 해결 가능한 일을 Javascript로 handling하는 경향이 있음.
• 어쨌거나 지금 준비하면 할 일이 많음

사파리와 크롬은 같은 webkit 엔진을 씁니다.

구글 크롬 만화에서 그런 생각을 엿볼 수 있습니다.

iPhone, Android뿐 아니라 Blackberry, Symbian도 webkit으로

• There’s no standard procedure.
• No rollover, but touch
• CSS3, 간략한 마크업
• scroll bar
• haptic (a)
• keypad
• PNG Image 사용
• 거의 모든 화면이 동적 컨트롤 됨

• JQtouch
• Sencha
• cubiq.org

Common UI, Custom UI

• Library를 활용한 Common UI
• Library로 만들어 낼 수 없는 Custom UI

iPhone App UI 예시

• Press button
• Image Slicing - Ctrl+Shift+C
• Background Image
• Border Image
• CSS Image Sprites

• 혼자서 준비할 것인가, 조직에 몸담을 것인가
• 난독화, alt사용, 접근성 문제는 신경쓰지 않아도 될까
• 여전히 남는 Platform dependency 문제
• Platform UI 와 WebApp UI의 이질감 극복
• 하위 호환성을 고려한 제작
• UI는 퍼블리셔에게. 그러나 어디까지?
• Font 해결방법? 웹폰트, SVG, Library, CSS Image Sprites, CSS drawing

This Presentation will be posted online at:

• http://j.mp/toby01

Questions, comments or more info:

• http://twitter.com/headvoy
• http://me2day.net/headvoy
• headvoy@gmail.com