'html5'에 해당되는 글 4건

허니몬의 IT 이야기/프로그래머, '코드 엔지니어'
  2월 29일, 긴 연휴 앞서 오랜만에 표준프레임워크와 관련된 세미나에 참석했다. 

""LG Electronics | LG-LU6500 | Not defined | Center-weighted average | 1/10sec | F/2.6 | 0.00 EV | 3.5mm | ISO-1000 | Flash did not fire | 2012:02:29 18:41:19  전자정부 표준프레임워크 세미나의 트레이드마크가 되어버린 샌드위치. 7시쯤 되면 슬슬 배가 고파오기 때문에 시기적절하게 내놓는 이 샌드위치가 이리 맛있을 수가 없다. 2시간 정도의 세미나를 버틸만한 식량이라고 할까나? 예전에는 세미나실 안에서 먹도록 했었는데, 지금은 옆에 있는 휴게실에서 먹고 들어가도록 하고 있었다. 세미나실에서 쩝쩝거리면서 먹기도 거시기 했는데, 별도로 먹을 공간을 마련해준 건 감사하다. 
  조금 아쉬운 점이라면, 흡연하시는 분들이 지하세미나실 입구에서 담배를 피시기에, 바람을 타고 담배연기가 세미나실로 흘러들어오는 것은 여전히 불편한 점이다. 담배를 피는 것을 뭐라고 할 수는 없겠지만, 담배를 피지 않는 사람들을 위해서 조금 더 멀리가서 담배를 피워주셨으면 좋겠다. 
""LG Electronics | LG-LU6500 | Not defined | Center-weighted average | 1/24sec | F/2.6 | 0.00 EV | 3.5mm | ISO-125 | Flash did not fire | 2012:02:29 18:43:03  연휴 앞이라서 신청자들에 비해서 많은 불참자가 있지 않을까 생각했던 것과는 달리, 많은 사람들이 참석했다. 나야 세미나 참석하는 걸 좋아하니까 그렇다치고, 다른 사람들은 어떤 생각으로 이 세미나에 오는 걸까나? 이번 세미나의 주제는 최근 많은 이슈를 불러일으키고 있는 '모바일Mobil 표준프레임워크'였다. egov.js 랄까? ㅡ_-)? jQuery 모바일 프레임워크를 '한국형(Korean style)'으로 수정하고 '한글화 가이드'를 제공해준다. 잘다듬어진 '한글 가이드'를 보는 느낌이었다. 공공기관쪽에서 재사용성, 코드중복 등의 문제를 해결하기 위해서 국내 대형SI 3사가 컨소시엄을 이루어 발전시키고 있는 '전자정부 표준프레임워크'를 사용하는 프로젝트가 많은지는 아직 모르겠다. 내가 저쪽 바닥으로 가서 해야하는 일을 찾다보면 소식을 접할 수 있으려나?


  이번 정권에서는 공공기관의 전산관련 비용이 절감되어서리 여러가지 SI공공사업이 감축되었다는 이야기가 들려온다. 4대강에 다 쏟아부었다는 이야기만 가득 들려오고.

  이것이 2MB Get out 깔때기....


  이번 발표에서도 모바일 표준프레임워크를 적용한 공공기관 프로젝트 사례가 나왔다. 모바일 관련 붐이 일어났을 때, 공공기관에서도 그 붐에 휩쓸려 쓰잘데기 없는 모바일 앱(각기다른 UI와 산정가를 가지고 소모적으로 생산된)들이 쏟아져나오고 사회적으로 많은 물의를 일으켰었다. 그러는 중에 모바일 환경은 크게 안드로이드, iOS, 윈도우즈폰 등으로 모바일 플랫폼이 다양화되면서 앱제작비용이 증가하게된다. 이를 조금 절감할 수 있는 방법으로 '하이브리드앱Hybrid App'을 추구하게 되었다.
  모바일UI 관련한 부분에서 센차터치(http://www.sencha.com/)와 jQuery Mobile(http://jquerymobile.com/) 두 종류를 따져보다가 오픈소스에 라이센스 문제가 없는 jQuery mobile 쪽으로 선택했다고 한다.
""LG Electronics | LG-LU6500 | Not defined | Center-weighted average | 1/30sec | F/2.6 | 0.00 EV | 3.5mm | ISO-250 | Flash did not fire | 2012:02:29 18:59:39


진행을 담당하시는 분의 목소리가 참 좋으시더군요.
... 사람 이름을 제대로 못애우는 '사람이름 못외워병'에 걸려있어서...
죄송합니다. (_ _); 그동안 메일도 몇번 주시고 그랬었는데...


""LG Electronics | LG-LU6500 | Not defined | Center-weighted average | 1/17sec | F/2.6 | 0.00 EV | 3.5mm | ISO-200 | Flash did not fire | 2012:02:29 19:01:11  미녀개발자(!?)의 발표였다.
  전자정부 표준프레임워크 개발환경에서 손쉽게 모바일 프로젝트를 생성하고, jQuery 를 이용하여 html이 랜더링되고 손쉽게 화면을 구성하는 방법을 설명해주셨다. 발표장면을 보면서, '전자정부 프레임워크는 참 손쉽게 프로젝트를 만들수가 있어'라는 생각을 품게 되었다. 조금 아쉬운 점이 있다면 윈도우 환경에서만 사용할 수 있다는 것이랄까?
  요즘 맥북을 사용하는 개발자들이 늘어나고 있는 상황(뭐, 대부분의 공공기관 SI프로젝트에서는 개인정보 보호라는 명목하에 각종 보안프로그램을 설치해야 개발이 가능하니까, 윈도우 환경을 벗어날 수 없긴 하겠다.

""LG Electronics | LG-LU6500 | Not defined | Center-weighted average | 1/13sec | F/2.6 | 0.00 EV | 3.5mm | ISO-320 | Flash did not fire | 2012:02:29 20:21:22

  마침 세미나에 같은 교육기관 동문이신 분을 만나서 세미나가 끝나고, 무교동 등갈비골목으로 가서 등갈비를 안주 삼아 소주를 즐겼다. 그 분도 정규직 생활을 청산하고 프리랜서 활동을 시작하신 참이었다. 2년정도의 짧은 기간동안 정규직으로 근무하시면서 참 많은 고생을 하신 분이었다. 하지만 개발에 대한 열정을 품으시고 세미나와 컨퍼런스에 꾸준히 참석하시는 모습이 보기좋은 멋진 분이기도 하다.

""LG Electronics | LG-LU6500 | Not defined | Center-weighted average | 1/10sec | F/2.6 | 0.00 EV | 3.5mm | ISO-640 | Flash did not fire | 2012:02:29 21:04:33

나도 올해로 이쪽 바닥에 뛰어든지 횟수로 3년차가 되어가고 있다. 이제 조금이나마 이바닥의 생리가 보이고, '이 바닥이 다 그래.'라고 말할 수 있는 날이 다가오고 있다.... 읭? 그건 여전히 건방진 모습일지 모르겠지만, 그냥 그러려니 하자.


아래는 발표내용 정리.



장소 : 청계광장 정보화진흥원

표준프레임워크 오픈커뮤니티 18차 기술세미나

주제 : 전자정부 모바일 표준프레임워크 2.0 제대로 활용하기

부제 : 한국형 커스터마이징 jQuery Mobile 설명

발표자 : SK C&C 김상욱 부장


전자정부 프레임워크 모바일포탈 : http://m.egovframe.go.kr/

가이드 : http://m.egovframe.go.kr/mguide/


발표하시는 분께서, 모바일 표준프레임워크를 사용한 경험이 있는 개발자를 찾았지만 2명 정도가 손을 들었을 뿐이다.

  150여명이 넘는 개발자가 참석한 자리에서 전자정부 표준프레임워크를 기반으로 해서 개발을 한 사람이 찾아오지 않는 기술세미나라... 아직 표준프레임워크가 가야할 길이 먼 것 같다.


** 모바일 표준프레임워크는 '모바일 웹'이다.


1. 모바일 표준프레임워크는 무엇인가?

모바일 서비스 제공을 위한, 사용자 경험지원 기능, 모바일 공통 컴포넌트(30여개) 등을 추가적으로 구현한 프레임워크


2. 모바일 서비스 : 모바일웹

모바일 웹, 모바일 앱.

1강 3중 구도(강: 안드로이드, 중 : 윈도우폰, RIM, iOS)

모바일 플랫폼의 파편화 : 네이티브 앱으로 개발하게 될 경우 플랫폼별 개발비용이 들지.


프론트엔드 개발이 웹으로 옮겨가고 있다. 이번 삽질이 그냥 삽질로 끝나지 않기를 바라며...

재사용성, 재활용성, 중복투자 - 무엇보다는 비용이다.


행정안전부 고시 '제 2010-40호'

- 최소 3종 이상 웹 브라우저에서 동등한 서비스 제공

- 정부에서 주관하는 웹표준, HTML4, CSS2

- 접속하는 유저의 접속환경을 획득하여 분기처리라...

- 네이티브 앱에서 구현가능한 것과 웹에서 가능한 것의 분명한 구분이 필요하다.



전자정부프레임워크는 시장에서 시작성과 안정성을 인정받았을까?

그 위에 모바일 표준 프레임워크를 얹는다.


Cross Platform

Cross browsers

HTML5 + CSS3 + JavaScript


모바일 호환성에 대한 검증

Look & Feel 느낌이나 보여지는 것이 그러해야한다.


자바스크립트는 컴포넌트

인터프리팅하여 브라우저에서 내려받아서 렌더링 하고 보여준다.

디버깅이 용이치 않아?


스프링MVC가 가지고 있는 비즈니스 로직을 그대로 가지고 있다?

그렇게 해서 재사용성을 높였다?


토비의 스프링을 다시 공부하면서 

전자정부 프레임워크도 다시한번 봐야겠구나.


Best Practice 제공

- 100여 개의 프로젝트에 대한 고민을 하지 않아도 된다.

- 이번 프로젝트에서 전자정부 프레임워크를 썼다면 어땠을까나? ㅡ_-)?


16개 컴포넌트를 제공해준다고?

Touch Optimization


전자정부 프레임워크 : 2차가공, 재가공 가능, MIT, 아파치

라이센스 : 전자정부 프레임워크에 맞춰서 jQuery mobile을 지역화했다.

실제 기기에서 실행해봐라


제한된 사용환경을 고려하여 간결하고 가볍게 개발하라.

<table> 쓰지 말고



(모바일)표준프레임워크의 기대 효과는 무엇인가~~~

이게 가장 중심이 되지 않을까?


하이브리드앱 표준프레임워크?

웹뷰 애플리케이션, 브릿지 프레임워크, 모바일웹 프레임워크


자원은 재활용하고 중복개발하지 않는다.


-----------------------

전자정부프레임워크는 개발환경을 잘 제공해주는 덕분에 귀찮아.


기기별 크기와 해상도가 다름

처리방법

- 대부분 CSS로 처리

- 전체 널비를 비율로 각 부분별로 나누어 처리


CSS3

Vendor prefix

Chrome, Safari : -webkie-

firefox : -moz-

Opera : -o-


터치 기반의 이벤트 처리와 마우스 이벤트 처리의 구분이 필요함

- 터치 이벤트, 스크롤 이벤트만 존재함.


만능 자바스크립트~~


자바스크립트 하나만 잘해도 요즘은 먹고살만한 세상이 되었다. 거기에 html5를 잘하면 좋고, css3도 다룰 줄 알면 훌륭하다. 한마디로 다 잘해야하는 거다. 읭?


------------------------


모바일 전자정부프레임워크 이슈리스트

- Performance

- JavaScript error

= 에러 당시에는 디버깅을 하여 배포 가이드

= 업그레이드 하면서 처리

- 업그레이드에 따른 스펙변경

기기변경에 따른 업그레이드

= pushstate를 지원하는 history.js 를 import

- 연속된 Ajax에 의한 비정상적인 화면 출력



모바일 서비스를 적용할 때는~

1. performance 에 신경

2. 스크립트, css를 조합하여 디버깅

3. 브라우저 지원스펙에 대해서 민감해야 한다.

4. 직접 고칠 수 없다면 다른 대안을 마련해야한다.


신고
5 0
허니몬의 IT 이야기/IT 트랜드


<!DOCTYPE html>
<html lang="ko"><!-- en 만 ko로 변경-->
<head>
  <meta charset="utf-8" />

  <!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame
       Remove this if you use the .htaccess -->
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />


  <title>html5Template</title>
  <meta name="description" content="" />
  <meta name="generator" content="Studio 3 http://aptana.com/" />
  <meta name="author" content="Kim Ji-Heon" />

  <meta name="viewport" content="width=device-width; initial-scale=1.0" />

  <!-- Replace favicon.ico & apple-touch-icon.png in the root of your domain and delete these references -->
  <link rel="shortcut icon" href="/favicon.ico" />
  <link rel="apple-touch-icon" href="/apple-touch-icon.png" />
</head>

<body>
  <div>
    <header>
      <h1>html5Template</h1>
    </header>
    <nav>
      <p><a href="/">Home</a></p>
      <p><a href="/contact">Contact</a></p>
    </nav>

    <div>
     
    </div>

    <footer>
     <p>&copy; Copyright 2011 by Kim Ji-Heon</p>
    </footer>
  </div>
</body>
</html>
시스템 정보를 읽어와서 내 이름을 넣어줬다.... ㅡ_-)> 흠...
그냥 편하게 쓰면 되는것인가...! 하지만, 베타버전 답게 아직 불안정한 모습을 여기저기서 보여준다. 
내가 HTML5에 관심을 기울이게 된건, 지금 하고 있는 일이 웹표준을 준수하면서 모바일 웹사이트를 구축하는 일이기 때문이지.
필요에 의해 관심이 생겨난 상황. 
저작자 표시
신고
0 0
허니몬에 관한 보고서/허니몬의 행성, 허니스(Honies)

이 글은 허니몬님의 2010년 3월 18일의 미투데이 내용입니다.

신고
2 0
허니몬의 IT 이야기/IT 트랜드
아참... 아마도 내년 2010년에는 웹표준과 관련된 다양한 현상들이
발생을 하게 될 듯 합니다. 공공기관 및 각종 사이트들이 웹표준
준수를 위해서 개선 사업 프로젝트를 진행을 할 것 이고요.

이 글을 보니까 문득 떠올랐습니다. ^^; ㅎㅎ
개발자, 여러분. 아직도 IE6을 쓰십니까? ㅡㅅ-);;;
이제 IE6은 쓰지 마세요. Firefox나 Chrome 쓰라고 안할테니까
IE8으로 업그레이드라도 하세요. IE8에서 제공하는 개발자모드를
잘 활용하시면 웹프로그래밍에 편리합니다.
http://blog.creation.net/419
이와 관련해서 2010년에 출시할 IE9에서는 HTML5를 준수한다고
발표를 했습니다. HTML5는 올해 출시된 W3C의 국제표준 HTML입니다.
HTML5 태그에서는 불필요한 태그를 없애고,
Video, Audio, Canvas 라는 태그를 새롭게 제공을 하고 있습니다.

이와 관련된 내용은
http://naradesign.net/wiki/대한민국_웹_표준_사이트
를 참조하세요.

http://kwsg.org/
국내 웹표준 준수 사이트 리스트

주류가 된 웹 표준
http://channy.creation.net/blog/655


내년에는 HTML5와 CSS 에 대한 공부를 해볼까 합니다.
이 부분에 대해서는 조금 더 생각을 정리해서 말씀드리겠습니다. ^^

저작자 표시
신고
0 0
1
블로그 이미지

Email : ihoneymon@gmail.com 안녕하세요, 꿀괴물 입니다. ^^ 멋진 비행을 준비 하는 블로그 입니다. 만능형 인간이 되어 많은 이들에게 인정받고, 즐겁고 행복하게 살기를 간절히 원합니다!! 달콤살벌한 꿀괴물의 좌충우돌 파란만장한 여정을 지켜봐주세요!! ^^

허니몬