1. Front-End Engineer
2012년 4월 18일
P180-76 1

2. 1. 웹 개발 환경 변화
 사용자 접근 환경의 변화
1. 다양한 Smart Device (Phone, TV, Car … )
2. 다양한 Browser ( IE, Firefox, Safari, Chrome, Opera … )
3. 다양한 OS ( Windows, Mac OS, Linux … )
 사용자 기대 수준의 변화
1. Desktop Application 수준 이상의 UI/UX를 요구
2. Interactive한 사용 환경 요구
3. 반응형 웹 요구
4. 높은 웹 접근성 요구
 정부 정책의 변화
1. 방송통신위원회의 ActiveX 대체 권고
2. 전자정부 서비스 호환성 준수지침 ( 행안부 고시 제 2010-40호 )
3. 웹 콘텐츠 접근성 지침 ( 행안부 고시 제 2011-32호 )
 대응 방안
1. 서비스 개발시 웹표준 기술 적용 ( HTML+CSS+Javascript )
2. 사용자 웹 접근성 및 브라우저 호환성 보장
3. Ajax 기술을 활용한 UI
4. Hybrid WebApp으로 개발 ( Mobile )
P180-76 2

3. 2. 웹 표준 기술 (1/2)
 HTML
1. HTML4.01, HTML5, XHTML
2. 콘텐츠의 구조, 내용, 의미를 표현 ( Semantic Tag )
3. Multimedia ( Canvas, Audio, Video )
4. Offline 지원 ( Web Storage, Web Database )
5. Realtime 통신 ( WebSocket)
6. Thread ( Web Worker )
7. 위치기반서비스 지원 ( Geolocation API )
8. Server-Sent Event, Device API …
 CSS
1. 콘텐츠의 Style 정의
2. Text, Color, Background, Transformation, Animation 등을 정리
3. CSS 활용 예제 ( Google 크롬, Safari, Firefox )
4. http://redesigner.org/blog/2011/01/06/41-awesome-examples-of-css3-animations-and-demos/
 Javascript
1. 웹표준 기술(HTML, CSS, SVG, WebGL 등)을 사용하기 위한 기반 기술
2. Javascript Framework (jQuery, dojo, Extjs, YUI … )
3. Ajax, Open API 등의 기술과 융합
P180-76 3

4. 2. 웹 표준 기술 (2/2)
 Javascript 기반 Framework
1. 모바일용 애플리케이션 프레임워크, 웹애플리케이션개발툴, 프로그래밍 라이브러리 등.
2. Xwing Runtime ( Ajax+XHTML+CSS+Javascript ).
※ 이미지출처 :
웹앱스 퓨처컨 2011 – 2011년 자바스크립트 개발자 전성시대
NHN 김양원 선임연구원 발표 자료
P180-76 4

5. 3. 웹 표준 기술 활용(1/2)
 ActiveX 대체
1. Flash 를 Video/Audio로 전환 ( like Youtube )
2. WebSocket ( Realtime )
 위치 기반 서비스
1. 지도 서비스 ( Google Map, Naver Map … )
2. 사용자 위치 정보 ( HTML5 )
 Hybrid WebApp
1. 다양한 Mobile Device에 대한 대응
2. 웹표준기술로 Native App 효과 ( like KTH 푸딩 얼굴인식 )
 Graphic 처리
1. SVG ( 차트 like FusionChart )
2. HTML5 Canvas
3. WebGL ( 3D )
4. 3D 활용 예제(Javascript로 구현한 3D 포토 갤러리, 3D Page Navigation )
5. http://www.dhteumeuleu.com/runscript.php?scr=photo3D.html
6. http://www.dhteumeuleu.com/runscript.php?scr=nav-3D.html
P180-76 5

6. 3. 웹 표준 기술 활용(2/2)
 웹표준 적용 사례
1. Google Docs, Gmail, Facebook, Twitter, Youtube, …
※ 이미지출처 :
웹앱스 퓨처컨 2011 – 2011년 자바스크립트 개발자 전성시대
NHN 김양원 선임연구원 발표 자료
P180-76 6

7. 4. 웹 플랫폼 개발 조직
 Front End Engineer
1. 웹표준 기술(HTML+CSS+Javascript)을 이용한 Presentation Layer 구현
2. Cross-Browser 처리
3. JavaScript Framework 에 대한 이해 및 활용
4. jQuery (jQuery Plugin) 활용
5. Ajax 기술 이해 및 활용
6. Browser 동작 방식 이해
7. Performance
8. Security
 타사 조직 사례
1. NHN ( Ajax UI팀, 웹표준화팀, 오픈UI기술팀, 웹플랫폼개발랩 )
2. KTH ( 앱스프레소팀, 웹어플리케이션팀 )
3. SK컴즈 ( UI 개발팀 )
P180-76 7