Make It Simple!

1시간 만에 정리한 초간단 HTML5 (Freelac 에서 나온 HTML5 책 요약)

■ HTML5
- HTML5
 . JavaScript + CSS + HTML
 . DOM(Document Object Model) 이해 필요

- HTML5 기능 요약
 . Video/Audio 재생
 . 2D Graphic 처리 (canvas)
 . Offline에서 수행되는 Web Application 구현 가능 (Application Cache)
 . Domain 간의 통신 구현 (Cross Document Messaging, XMLHttpRequest)
 . Client Data 저장 (Web Storage, Web SQL Database, Indexed Database API)
 . Backgroung 처리 (Web Workers)
 . Server Data Push, Srver와 쌍방향 통신 (Server Sent Event, Web Sockets)
 . Local File 처리 (File API)

- Markup 의 semantic 기능 강화
- 높은 호환성 제공

■ HTML5 주요 기능
- HTML Tag & CSS
 . <applet> Tag와 같은 의존적 Tag를 제거함. 대신 embed와 같은 표준 Tag 권장
 . UI 구성 Tag는 CSS를 사용하도록 유도

- Canvas 를 이용한 그래픽 처리
 . canvas 객체를 생성하여 함수 형태로 그래픽 처리가 가능
 . fillRect(), drawImage(), moveTo(), lineTo(), stroke() 함수 등

- video, audio Tag를 이용한 동영상, 사운드 처리 가능
 . 미디어 플레이어 기능 구현
 . 네트워트 상태 정보, 버퍼링 등 제공

- Section 요소를 사용한 컨텐츠의 구조적 표현 가능
 . section, article, aside, nav

- 향상된 form 요소
 . input 태그 다양화 (search, tel, url, email 등의 입력을 위한 포매팅 자동 지원)
 . datetime, date, month, week, time 등 시간, 날짜(달력) 입력을 위한 form tag 제공
 . number, range, progress 등
 . 입력 값의 validation 지원
 . 자동 완성 기능

- Drag & Drop 기능
 . 컨텐츠 항목에 대한 drag & drop 기능 지원
 . 파일 drag & drop -> 파일 업로드 연계 가능

■ MessageEvent 인터페이스를 이용한 웹 페이지 간 통신 구현
- Cross Document Messaging : 두 개 이상의 웹 페이지가 메시지를 주고 받는 방식으로 통신 가능(postMessage(), onmessage event handler)
- Channel Messaging : M:N 통신 구현 (postMessage(), onmessage event handler)
 
■ Offline Web Application
- Network 연결 없이 동작하는 Application 구축 가능
- Application Cache 이용 -> 빠른 응답속도
- 캐시 대상 리소스를 지정할 수 있음 (Cache manifest)

■ Web Storage
- Web Storage : 클라이언트 디스크에 데이터를 저장하기 위한 영역
- Cookie와 비슷하나 크기 제한이 없고, 서버로 전송되지 않으며 유효기간이 없음
- 전역변수 localStorage를 활용 (setItem(), getItem(), removeItem())
- Session Storage : Window 별로 할당되는 저장소 (Domain(URL), Window 별로 다른 영역 생성)

■ Web SQL Database
- 클라이언트에서 사용할 수 있는 작은 규모의 DBMS
- SQL을 이용한 Query 가능 (select, update, delete, insert)
- 서버의 DBMS와 동기화 가능
- Domain별로 분리된 Database 생성으로 보안을 강화

■ Web Workers
- JavaScript 코드를 Background로 실행할 수 있음
- 하나의 Thread로 실행되는 웹 페이지의 행(Hang) 현상을 막을 수 있음
- Multi Threads 개념으로 병렬 처리가 가능하며 향상된 User Interface 구현 가능

■ Web Sockets
- Client-Server 통신기능 제공 (Client = Web Browser)
- send() 메소드를 이용한 데이터 전송
- onmessage event handler를 이용한 데이터 수신 및 처리
- 서버 측 Web Sockets 애플리케이션 구축 필요 (Python - pywebsocket 등 이용)

■ Geolocation API
- Mobile Device 위치 정보를 구하기 위한 API (Mobile Application에서 활용 가능)
- GPS 또는 Network(Wi-Fi) 망을 이용하여 경도와 위도 정보를 구함
- getCurrentPosition(), watchPosition(), clearWatch() API 제공

■ File API
- Web Page에서 Local PC의 파일에 접근할 수 있는 기능을 제공함
- 파일 속성을 구할 수 있음
- 파일 업로드 없이 파일 내용을 읽어서 처리할 수 있음

■ Indexed Database API
- Index Key - Value 패턴의 데이터 관리 기능 제공
- 전통적 SQL이 아닌 Key-Value 방식으로 사용되며 데이터를 추가, 검색하기 위한 API 제공
- JSON 표현 방식과 유사

■ 기타 기능
- iframe을 이용한 프레임 구현 시 sandbox 속성 지정 가능 : XSS 방지를 선택적으로 구현 가능
- Async 방식의 JavaScript 로딩을 통한 속도 개선
- CSS 파일의 적용 범위를 지정 가능
- 링크 요소의 ping 적용을 통한 Tracking 가능
- 메뉴, 툴바와 같은 고급 사용자 인터페이스 구현 가능
- Server Sent Events를 활용한 Server Push 기능 구현
- XMLHttpRequest Spec 지원 (AJAX 원형)

 

 

출장왔습니다.
트윗이 중국은 막혀있는지 접속이 안되네요. (막혀 있답니다.)

후배사원과 42일동안 있을 것 같습니다.



호텔 체크인 후 찍어본 사진입니다.
틈틈이 중국의 일상을 정리해 보도록 하겠습니다.

잠시 후, 회사에서 사용하는 인트라넷의 새로운 버전이 오픈됩니다. 운영체제와 브라우저의 제한이 없기 때문에 Any OS(Operating Systems), Any Browser를 지원한다고 합니다. 더해서 인트라넷 시스템에 포함된 업무시스템도 Any Browser에서 사용이 가능하도록 기능을 개선하는 작업을 하고 있습니다.

사용자 입장에서는 편리한 일이겠지만 개발자 입장에서는 그리 편한 것만은 아니라는 생각이 듭니다. 물론 대부분의 기능은 큰 문제없이 실행이 되지만 미세한 기능에서는 브라우저 별 차이가 존재하는 것 같습니다. 어떤 브라우저에서는 입력필드에 커서가 안보이고, 어떤 브라우저는 원하는 필드에 포커스를 줄 수 없고, 이외에 적지 않은 부분에서 브라우저 별로 다르게 작동하는 경우가 많아 보입니다.

또 다른 문제는 UI(User Intercace)의 문제입니다. 동일한 HTML 코드와 CSS를 적용해도 브라우저 별로 화면구성에 차이가 발생하는 경우가 있습니다. 모든 브라우저가 동일한 웹 표준을 지원하지 않거나 미세한 차이가 존재하기 때문인 것으로 보입니다. 큰 문제가 아닐 수 있지만 동일한 화면, 동일한 기능이 조금이라도 다르게 보인다면 문제가 발생할 소지는 항상 있게 됩니다.

결국 이런 문제를 해결하기 위해 프로그램 코드에 브라우저를 식별하는 코드가 존재하게 될 것 같기도 합니다. 만약 Internet Explorer 면 이렇게, Chrome 이면 요렇게, Firefox 면 저렇게, 이런 식으로 말입니다.

이는 대략 10여년 전, 그러니까 96, 97년에 Netscape Navigator 브라우저와 Microsoft Internet Explorer 브라우저를 동시에 지원하기 위해 JavaScript로 수많은 분기로직을 만들었던 경험을 떠올리게 합니다. 이런 이유때문에, 역설적으로 Navigator 브라우저가 시장에서 사라지고 Internet Explorer 가 홀로 남았을때 개발하기 편해졌다고 좋아했던 기억이 떠오르기도 합니다.

오늘도 프로그램 기능수정에는 크게 시간이 소요되지 않았는데, 브라우저 별로 다르게 나타나는 화면구성을 표준화하느라 디자인측면에서 상당한 시간이 소요되었습니다. 한번 작업으로 끝날 수 있으면 좋겠지만 앞으로도 동일한 일은 계속 발생할 것 같습니다.

Any OS - Any Browser, 사용자에게는 좋은 환경을 제공하는 것임에는 틀림이 없으나 개발자에게는 그리 좋지 못한 소식일 수도 있을 것 같습니다. 웃어야 할까요, 울어야 할까요?

어제는 회식이 있었습니다. 보통 회식이라고 하면 부서회식, 파트회식 등 모임의 단위가 있기 마련인데 어제 회식은 근 28년 이상 일하시던 정든 곳을 떠나는 분을 보내드리기 위해 부서에 관계없이 이 분을 알고 있는 많은 분들이 모였습니다.

평소에도 술을 적게 드시는 편은 아니지만(그렇다고 많이 드시지도 않지만) 어제만큼은 정말 기분좋게 드시는 모습을 보면서 참 많은 생각이 들었습니다. 30년 가까운 세월이면 강산이 변해도 3번이 변하는 아주 긴 시간이고 저도 회사를 오래 다녔다고 하지만 이제 겨우 15년을 조금 넘기고 있으니까 아주 긴 시간임에는 틀림이 없는 것 같습니다.

얼마전 이 분으로부터 작은 부탁을 받았습니다. 회사 인트라넷에 저장되어 있는 주소록을 다운로드 받아 달라는 부탁이었는데 작업을 해드리면서 많은 생각이 들었습니다. 주소록의 카테고리도 다양했고 각 카테고리에 들어있는 주소록의 개수도 상당히 많더군요. 이 주소들을 보면서 그동안 인연을 맺어왔던 분들이 이렇게 많았구나 하는 생각을 했습니다.

단순히 숫자가 많다고 놀랄 일은 아니겠습니다만, 이렇게 다수의 의미있는 인연을 이루기 위해 적지 않은 시간과 애를 쓰신 그 정성은 존경할 만하다고 생각됩니다.

저도 전에 1년동안 다니던 직장을 그만둘때 받아왔던 명함이나 연락처를 아직도 가지고 있고 1년에 한두번 만나기도 합니다만 그 수가 열 손가락에 꼽을 정도니까 감히 비교를 할 수는 없겠지요. 다만 회사를 그만둔 이후에도 15년 동안이나 만남을 유지하고 있다는 점에서 위안을 받아야 할지도 모르겠습니다.


또한, 이분을 알고 있는 많은 분들이 모여서 축하를 해드리고 저마다 송사를 하며 일부는 눈물을 흘리는 모습을 보면서 이 분이 이 회사, 조직에서 이룬 성과는 눈에 보이는 성과만 있는 것은 아니겠구나 하는 생각이 들었습니다. 어떤 분은 그러시더군요. 나도 퇴사하고 싶다고. 저는 그 정도까지는 아니었습니다만 과연 내가 이 회사를 떠날때 몇 명이나 모여서 축하를 해주고 눈물을 흘려줄까 하는 생각을 하니 참으로 창피했습니다. 이제부터 팬(?) 관리를 해야 하는 것은 아닌지 모르겠습니다.

더 큰 성공과 미래를 위해 새로운 길을 떠나신 이은호 그룹장님께 감사의 말씀을 드립니다.
그동안 정말 고생 많이 하셨습니다.
행복하십시오. 

가을의 절정이다.

계절 상으로는 졸리거나 그럴 때는 아닌데 사무실을 둘러보면 점심시간에 잠깐의 낮잠을 즐기는 사람이 많아진 것 같다. 많이들 피곤한 모양이다.

어제는 늦은 시간까지 고생하는 후배사원들과 함께 맥주 한잔을 했다.
그 여파 때문일까? 신입사원 하나가 지각을 했다. 알람소리를 못 들었단다. (많이 먹지는 않았는데,,)
아마도 최근 많은 것을 배우고 익히느라 힘이 들었던 모양이다.
하긴 나도 신입 때는 이유도 없이 피곤하고 그랬었던 기억이 난다.

나도 졸립긴 하다. 이 졸리움을 귀에 쪽은 이어폰에서 나오는 이효리의 U-Go-Girl 을 Volume Up 해서 들으며 참고 있는 중이다.

한 2~3일 휴가내고 푹 쉬었으면 좋겠다.