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