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

http://hyeonseok.com

Front-end
Interaction
UXD, FI, 신현석


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 InternetExplorer
Photoshop HybridApp
JPEG
DeviceIndependence Interoperability Findability
Test


서버와 클라이언트
Client-side


사용 기술
Language
๏ 구조: HTML
๏ 표현: CSS
๏ 동작: JavaScript

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);
}


사용 기술
HTML5, CSS3
๏ 좀 더 인터랙티브하고 풍부한 표현을 위해서 만들어지고 있는
HTML, CSS의 업그레이드 버전
- 보다 풍부한 메타데이터를 기술하는 문서 구조
- 효과적인 표현 방법, 브라우저 자체 애니메이션 지원
- 동영상, 오디오 코덱 내장
- 3D 모델링

๏ 최신 브라우저에서 활발하게 지원 중
- 구형 브라우저에서는 지원 안되는 경우가 많음
- graceful degradation으로 보완

- 모바일 환경은 대부분 최신 브라우저


사용 기술
HybridApp, WebApp, WebOS
๏ HybridApp
- NativeApp이 앱 안에 일부 웹 콘텐츠를 포함

๏ WebApp
- 웹 기술로 어플리케이션을 구성하고 Native 환경에서 작동하도록 패키징

๏ WebOS
- ObjectiveC(iOS)나 JAVA(Android)와 같은 기술 없이 브라우저의 레이아
웃 엔진 + WebAPI로 단말기를 직접 제어
- WebOS 안에서 구동되는 모든 기능, 사용자 앱은 웹기술로 만들어짐
- Firefox OS, Tizen 등


브라우저 다양성
Web Interoperability
๏ 다양한 브라우저
- 다양한 운영체제, 버전


브라우저 다양성
Web Interoperability
๏ 브라우저 지원(support)의 의미
- 브라우저마다 지원하는 기술의 정도가 다름
- 특히 나온지 오래된 브라우저: IE6, IE7 등

- 다양한 환경을 지원하기위한 추가적인 노력이 필요
- 여러벌의 코드를 만든다든가
- 신기술을 적용할 수 없다든가

- 비용과 효과 사이의 종합적인 고찰이 필요
- 핵심 기능의 제공(progressive enhancement)
- 사용자 경험의 우아한 저하(graceful degradation)
- 브라우저의 사장 점유율
- 호환성 유지를 위해 들어가는 비용 등

http://dowebsitesneedtolookexactlythesameineverybrowser.com/


단말 다양성
Device independence
๏ 다양한 단말기, 제조사
- 다양한 운영체제, 다양한 브라우저

๏ 다양한 화면 크기, 화면 밀도
๏ 다양한 입/출력기기 다양한 화면밀도

다양한 화면 크기 다양한 단말기


단말 다양성
Device independence
๏ Density-independent pixel (dp)

고정 픽셀 dp

๏ Responsive web design


웹 접근성
Web Accessibility
๏ 사람과 사용 환경의 차이를 다루는 분야
๏ 보편적 디자인(Universal design)


인터랙션
Blue Motion
๏ 모션 & 인터랙션 갤러리
- http://wiki.kthcorp.com/display/bluemotion/Home


업무 분담
FI팀의 구성
๏ 개발자? 디자이너?
- 사용자 환경에서 사용자의 요구를 토대로한 일관성, 차별성, 감성적인 측면
을 다룬다는 측면에서는 디자이너
- 개발 환경에서 코드를 다루고 제품을 만든다는 측면에서는 개발자

๏ 크게 CSS 전문가, JavaScript 전문가로 구분
- CSS 전문가: 주로 콘텐츠와 보여지는 양식을 다룸
- JavaScript 전문가: 인터랙션과 앱 설계 및 구성을 다룸

๏ 전문성은 높으나 업무 규모가 작으면 오버헤드가 발생
- 커뮤니케이션 창구가 나눠지는 단점이 있음
- 업무 분야의 일반화를 통해 보완할 수 있도록 노력 중


의사소통
Work Process
๏ 다양한 프로젝트
- 동시에 다수의 프로젝트를 지원
- 메신저, 전화 보다는 문서, BTS를 통한 커뮤니케이션 필요성 증대

๏ 예전 방식(Waterfall process)
- ZIP, Mail, IM 등으로 파일 전달
- 협업이 힘듬
- 손머지

๏ 요즘 시도하는 방식(Agile, 기민한 대응)
- VCS, DVCS로 코드 관리
- Jira, Conﬂuence, Mailing-list를 통한 커뮤니케이션 요구 증가


감사합니다
eo.shin@kt.com

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

Recommended

Recommended

More Related Content

More from KTH, 케이티하이텔

More from KTH, 케이티하이텔 (20)

Recently uploaded

Recently uploaded (7)

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