N-Screen과 HTML5, 웹표준 팁&테크

N-Screen 종결자, HTML5

• 과거에도 N-Screen 환경은 존재했다.
• 현재와의 차이점은 Network의 유무
• N-Screen은 Connected Lifestyle에서 비롯
  회사에 출근해서 컴퓨터를 켠 후 가장 먼저 하는 일은 무엇일까?
  –> 인터넷이다. =Connected Life를 의미

• 멀티 디바이스의 시대 사람들이 원하는 것
  –> Seamless 언제 어디서나, 어느 기기에서도 끊김없는 이용 환경
• 이것이 N-Screen 대응이 대두된 본질
• 사용자 경험에서부터 출발해야 한다.

• N-Screen의 종결자들 –> 브라우저 성능이 향상됐다. 웹표준으로 만들면 된다.
  – CSS
  – HTML5
  – Javascript
  – SVG(Scalable Vector Graphics)

• N-Screen 사용자 환경
  – 이동중 애플 아이폰(iOS) > 회사 PC(Window7) > 집 타블렛PC(Android)
  – 서비스 제공자의 입장 =X 사용자의 입장
  – 플랫폼에서의 단절, 소프트웨어의 단절 –> Cross + Platform / Device 환경 구축 필요 –> 웹표준

• Web UI technology 참고 사이트
  – 유튜브 www.youtube.com/xl
  – 쇼핑몰 www.teegallery.com/
  – jQTouch jqtouch.com/
  – Sencha Touch www.sencha.com/products/touch/

• N-Screen 시대적 마인드가 필요하다
  – N-Screen 시대는 인터넷의 가전으로의 진입을 의미
  – 어느 하나의 기술이 모든 것을 장악하지 못한다.
  – 가장 중립적이고 범용적인 기술이 각광 –> 웹

모바일 웹표준과 콘텐츠 제작사례 (송태민 과장, SK커뮤니케이션즈)

• 모바일?
  = WAP을 의미했다.
  – HTML5는 인력비용이 많이 든다. 나중에 하자고 결론

• 모바일 그리고… 앱
  – 네이티브앱, 웹앱, 하이브리드앱으로 구분
  – 무선NATE = WAP Mobile 년 1조 매출.
  – 돈 버는 모바일 시장은 앱뿐? –> SK컴즈는 WAP의 UI를 유지하면서 수익을 거둘 수 있는 가온(중간)을 지향.
  – 예) us.illyssimo.com

• 모바일 UI
  – 변천사: WAP(2008) –> WAP UI 그대로 –> 정적 UI –> 현재 UI
  – WAP mobile Design: 메인페이지 용량 30Kbyte 이하(아이콘 1개당 5Kbyte), 컬러수 256 이하, png 8bite 저장, 3개 템플릿 운영

• 모바일 웹표준 Tip&Tech
  – 모바일 사이트 확인 방법: Firefox 모바일 다운로드 페이지에서 > PC용 Firefox 모바일 버전 다운로드(Fennec)
  – 파이어폭스 브라우저에서 확인: 파이어폭스 다운로드&설치 > User Agent Switcher 애드온즈 부가기능 설치
  > 도구 > Default User Agent > iPhone 3.0 선택
  – 파이어폭스의 iPhone 3.0 모드에서 동영상 검색 후 클릭하면 MP4로 다운로드 가능
  – 웹표준 따르는 모바일웹 앱, 이렇게 만들자-블로터닷넷 >>

• www.standard.pe.kr : 송태민 과장의 웹표준 카페
• 모바일 웹 모범사례 via W3C