KTH_Detail day_안드로메다에서 온 디자이너이야기_4차_FI팀의모든것_신현석_20130124

1,441 views
1,294 views

Published on

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,441
On SlideShare
0
From Embeds
0
Number of Embeds
10
Actions
Shares
0
Downloads
29
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

KTH_Detail day_안드로메다에서 온 디자이너이야기_4차_FI팀의모든것_신현석_20130124

  1. 1. http://hyeonseok.com Front-endInteraction UXD, FI, 신현석
  2. 2. http://hyeonseok.com Front-end Interaction Team Firefox Client-side Mobile ResponsiveWebDesign Animation UX UniversalDesign PNG Prototyping W3C Performance JavaScript User-agent ProgressiveEnhancement Audio CSS Designer Motion Opera Diversity Web AJAX Developer WebApp Chrome Accessibility User Front-end Safari Engineer HTML GIF Video Interaction GracefulDegradation Git SearchEngineOptimization InternetExplorerPhotoshop HybridApp JPEG DeviceIndependence Interoperability Findability Test
  3. 3. http://hyeonseok.com서버와 클라이언트Client-side
  4. 4. http://hyeonseok.com사용 기술Language๏ 구조: HTML๏ 표현: CSS๏ 동작: JavaScript
  5. 5. HTML CSS JavaScript<!DOCTYPE html> button { var p = document.querySelector(p);<html lang="ko"> background: #eee; var button = document.querySelector(button);<head> border: 4px groove #555; button.addEventListener(click, function () {<meta charset="UTF-8"> border-radius: 0.5em; if (p.style.display == none) {<title>웹 콘텐츠</title> padding: 0.3em 1em; p.style.display = null;</head> } button.innerHTML = 감추기;<body> p { } else {<button>감추기</button> color: #0c0; p.style.display = none;<p>안녕하세요.</p> font-weight: bold; button.innerHTML = 보이기;</body> background: #eee; }</html> padding: 0.5em; }, false); }
  6. 6. http://hyeonseok.com사용 기술HTML5, CSS3๏ 좀 더 인터랙티브하고 풍부한 표현을 위해서 만들어지고 있는 HTML, CSS의 업그레이드 버전 - 보다 풍부한 메타데이터를 기술하는 문서 구조 - 효과적인 표현 방법, 브라우저 자체 애니메이션 지원 - 동영상, 오디오 코덱 내장 - 3D 모델링๏ 최신 브라우저에서 활발하게 지원 중 - 구형 브라우저에서는 지원 안되는 경우가 많음 - graceful degradation으로 보완 - 모바일 환경은 대부분 최신 브라우저
  7. 7. http://hyeonseok.com사용 기술HybridApp, WebApp, WebOS๏ HybridApp - NativeApp이 앱 안에 일부 웹 콘텐츠를 포함๏ WebApp - 웹 기술로 어플리케이션을 구성하고 Native 환경에서 작동하도록 패키징๏ WebOS - ObjectiveC(iOS)나 JAVA(Android)와 같은 기술 없이 브라우저의 레이아 웃 엔진 + WebAPI로 단말기를 직접 제어 - WebOS 안에서 구동되는 모든 기능, 사용자 앱은 웹기술로 만들어짐 - Firefox OS, Tizen 등
  8. 8. http://hyeonseok.com브라우저 다양성Web Interoperability๏ 다양한 브라우저 - 다양한 운영체제, 버전
  9. 9. http://hyeonseok.com브라우저 다양성Web Interoperability๏ 브라우저 지원(support)의 의미 - 브라우저마다 지원하는 기술의 정도가 다름 - 특히 나온지 오래된 브라우저: IE6, IE7 등 - 다양한 환경을 지원하기위한 추가적인 노력이 필요 - 여러벌의 코드를 만든다든가 - 신기술을 적용할 수 없다든가 - 비용과 효과 사이의 종합적인 고찰이 필요 - 핵심 기능의 제공(progressive enhancement) - 사용자 경험의 우아한 저하(graceful degradation) - 브라우저의 사장 점유율 - 호환성 유지를 위해 들어가는 비용 등
  10. 10. http://dowebsitesneedtolookexactlythesameineverybrowser.com/
  11. 11. http://dowebsitesneedtolookexactlythesameineverybrowser.com/
  12. 12. http://dowebsitesneedtolookexactlythesameineverybrowser.com/
  13. 13. http://hyeonseok.com단말 다양성Device independence๏ 다양한 단말기, 제조사 - 다양한 운영체제, 다양한 브라우저๏ 다양한 화면 크기, 화면 밀도๏ 다양한 입/출력기기 다양한 화면밀도 다양한 화면 크기 다양한 단말기
  14. 14. http://hyeonseok.com단말 다양성Device independence๏ Density-independent pixel (dp) 고정 픽셀 dp๏ Responsive web design
  15. 15. http://hyeonseok.com웹 접근성Web Accessibility๏ 사람과 사용 환경의 차이를 다루는 분야๏ 보편적 디자인(Universal design)
  16. 16. http://hyeonseok.com인터랙션Blue Motion๏ 모션 & 인터랙션 갤러리 - http://wiki.kthcorp.com/display/bluemotion/Home
  17. 17. http://hyeonseok.com업무 분담FI팀의 구성๏ 개발자? 디자이너? - 사용자 환경에서 사용자의 요구를 토대로한 일관성, 차별성, 감성적인 측면 을 다룬다는 측면에서는 디자이너 - 개발 환경에서 코드를 다루고 제품을 만든다는 측면에서는 개발자๏ 크게 CSS 전문가, JavaScript 전문가로 구분 - CSS 전문가: 주로 콘텐츠와 보여지는 양식을 다룸 - JavaScript 전문가: 인터랙션과 앱 설계 및 구성을 다룸๏ 전문성은 높으나 업무 규모가 작으면 오버헤드가 발생 - 커뮤니케이션 창구가 나눠지는 단점이 있음 - 업무 분야의 일반화를 통해 보완할 수 있도록 노력 중
  18. 18. http://hyeonseok.com의사소통Work Process๏ 다양한 프로젝트 - 동시에 다수의 프로젝트를 지원 - 메신저, 전화 보다는 문서, BTS를 통한 커뮤니케이션 필요성 증대๏ 예전 방식(Waterfall process) - ZIP, Mail, IM 등으로 파일 전달 - 협업이 힘듬 - 손머지๏ 요즘 시도하는 방식(Agile, 기민한 대응) - VCS, DVCS로 코드 관리 - Jira, Confluence, Mailing-list를 통한 커뮤니케이션 요구 증가
  19. 19. Web for AllWeb on Everything
  20. 20. http://hyeonseok.com감사합니다eo.shin@kt.com

×