디자인 패턴과 yui를 이용해 rich ui 빠르게 구현하기
DESCRIPTION
디자인 패턴과 YUI를 이용해 리치 UI 빠르게 구현하기 우리가 원하는 것들 무엇이 문제인가 디자인 패턴 라이브러리 YUI 라이브러리 환경변수 Class 선택기 METRO 적용사례TRANSCRIPT
디자인 패턴과 YUI를 이용해리치 UI 빠르게 구현하기
야후! 코리아 : 정진호, 김완규2009.10.23
발표자
• 정진호–야후! 코리아 Tech. Evangelist – twitter.com/phploveme
• 김완규–야후! 코리아 Front End Engineer (F2E)– twitter.com/wankyu
차례
• 우리가 원하는 것들• 무엇이 문제인가• 디자인 패턴 라이브러리• YUI 라이브러리• 환경변수 Class 선택기
• METRO 적용사례
우리는 누구인가?
• 하루 종일 온라인 상태• 매일 수십통의 이메일• 계속 진보하는 기술 영역• 한국말이 잘 안통하는 동료• 멋있어 보이나 알고보면 삽질 중!
우리는 누구인가?• 사용하는 파일에 의해 우리가 누구인지 정해진다
PPT,XLS PSD,PNG HTML,JS C,PHP
기획자 디자이너프론트 개발자
서버개발자
우리가 원하는 것
• 즐겁게 일하는 것 • 완성도 높은 사이트를 만드는 것• 일을 빨리 끝내고 퇴근 하는 것• 월급 많이 받는 것
HAPPY
말이 안통하는 이유는?
• 경험이 다르기 때문• 사용하는 도구가 다르기 때문• 통일된 규약이 없기 때문
기획 문서의 변화
• 쉽고 간단 : 종이 + 연필• 팔방미인 : MS PPT• 엔지니어 냄새 : MS 비지오• 고품격 : 옴니그래플
팔방미인 PPT
고품격 옴니그래플
디자인 패턴 라이브러리
http://developer.yahoo.com/ypatterns/
야후 디자인 패턴 라이브러리는...
• 웹사이트 패턴(Pattern)–특정 상황에 필요한 사용자 인터페이스의 시각적 설명–건축 패턴에서 유래–사용자의 상황(Context)에 대한 이해가 필요
• 사용자 인터페이스(UI) 패턴 모음
• 학문적 연구 결과–기획자 + 개발자 + 웹디자이너 + 연구원
• 패턴 구성 요소–패턴 이름–문제–상황–해결 방법
단점?영어!
패턴 구성
49 종, 계속 추가• 레이아웃 Layout
• 네비게이션 Navigation
• 선택 Selection
• 상호작용 Rich Interaction
• 소셜 기능 Social
패턴 예제 - 달력• http://developer.yahoo.com/ypatterns/selection/calendar.html
관련 패턴 사용 사이트
코드 예제
패턴 예제 - 아코디언 http://developer.yahoo.com/ypatterns/navigation/accordion.html
스텐실
• 즉시 사용 가능한 시각적 디자인 요소들• 지원형식–옴니그래플, VISIO, PDF , PNG– SVG, Fireworks, Axure, InDesign
• 다운로드– http://developer.yahoo.com/ypatterns/about/stencils/
스텐실 샘플
달력
컨트롤 슬라이더, 스위치
메뉴, 버튼
탭
대화상자
iPhone
구체적인 기획 문서는...
• 1. 프로젝트 초기에 시간을 절약할 수 있다–문제를 미리 발견할 수 있다–구현 가능성, 접근성 판단
• 2. 의사 소통이 가능해 진다–공감과 동의를 얻을 수 있다–기분이 좋다
• 3. 새로운 기능에 대한 아이디어가 생긴다
사용자 인터페이스라이브러리
http://developer.yahoo.com/yui/
웹표준?
• 정의–WWW 공식표준, –기술 규격을 나타내는 일반 용어
• 의미있는 웹으로서의 웹표준–디자인패턴을 통한 의사소통
• 호환성, 접근성–라이브러리를 통한 문제해결
[동영상] 예제 : Carousel
예제 : Carousel
• 어떤 문제를 해결할 수 있나?
• 언제 사용하는가?
• 해결 방법은?
• 왜 이 패턴을 사용하는가?
• 접근성
• 패턴 갤러리
– http://developer.yahoo.com/ypatterns/selection/carousel.html
예제 : Carousel
• Design Pattern Library > Carousel– http://developer.yahoo.com/ypatterns/selection/carousel.html
• 컨텐츠의 집합을 시각적으로 둘러볼 수 있게 해 줌
• 주제나 컨텐츠들의 심성 모델이 시각적으로 가깝게 묶여있을 때
• 모든 내용을 한 번에 보여줄 수 있는 공간이 없을 때
예제 : Carousel
예제 : Carousel
그런데 이걸 어떻게 구현하지?
YUI 라이브러리는...
• 상호작용하는 웹 사이트를 만들 때 유용 • JS 와 CSS로 작성된 유틸리티와 컨트롤의 모음• DOM 스크립트, DHTML, AJAX 사용• 빠르고 강력함 검증되었음• 완전 공짜(Free for all uses)
예제 : Carousel
<!-- Core + Skin CSS --><link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.8.0r4/build/carousel/assets/skins/sam/carousel.css">
<!-- Dependencies --><script type="text/javascript" src="http://yui.yahooapis.com/2.8.0r4/build/yahoo-dom-event/yahoo-dom-event.js"></script><script type="text/javascript" src="http://yui.yahooapis.com/2.8.0r4/build/element/element-min.js"></script>
<!-- Source file --> <script type="text/javascript" src="http://yui.yahooapis.com/2.8.0r4/build/carousel/carousel-min.js"></script>
http://developer.yahoo.com/yui/carousel/
예제 : Carousel
<div id="container"><ol><li><img alt="" src="..."></li>...</ol></div>
http://developer.yahoo.com/yui/examples/carousel/csl_circular_source.html
var carousel = new YAHOO.widget.Carousel("container", { isCircular: true // for a circular Carousel});carousel.render();carousel.show();
[동영상] 코드를 실행하면? • http://developer.yahoo.com/yui/examples/carousel/csl_circular_source.html
METRO Code Convention
http://www.flickr.com/photos/anniemole/313981428/
Code Conventions
• 단위는 em을 사용 M• 네이밍 규칙• Selector는 최소한으로 사용• 기타 세세한 제한사항들–성능 개선을 위한 파일크기 개수 제한등–코드 가독성을 위한 규칙들
호환성
• Conditional Comments?
<!--[if IE]>
<link rel="stylesheet" type="text/css" href=“for_ie.css“ />
<![endif]-->
<!--[if lte IE 6]>
<link rel="stylesheet" type="text/css" href=“for_ie6.css“ />
<![endif]-->
호환성
• Hack?
/* for IE6 */p {_color:white;}
/* for IE */p {*color: green;}
• 좀 더 안전한 방법
* html body{}
*:first-child+html body{}
Environment Class Selectors
• 서버에서의 OS 및 브라우저 식별
<html class="gecko ff3 ff3_5 win">
Environment Class Selectors• PHP CSS Browser Selector–http://bastian-allgeier.de/css_browser_selector/
Environment Class Selectors• PHP CSS Browser Selector
•사용법
•결과
<?php require("css_browser_selector.php"); ?>
<html class="<?php echo css_browser_selector() ?>">
<html class="gecko ff3 linux">
Win Microsoft Windows
Mac Mac OS
Iphone iPhone
ie6 Internet Explorer 6.x
ie7 Internet Explorer 7.x
ff3_5 Firefox 3.5
Opera10 Opera 10.x
chrome Google Chrome
• O/S
• 브라우저
Environment Class Selectors
Environment Class Selectors
.ie body {
background-color: yellow
}
.ie7 body {
background-color: orange
}
• 의사 소통 : 디자인 패턴
• 개발 : YUI 라이브러리
• 호환성 : Environment Class Selectors
결론
모두가 알아야 할 웹표준
• 의미있는 웹• 열려있는 웹• 효율적인 웹
참고 URL
• developer.yahoo.com/
• developer.yahoo.com/yui/
• developer.yahoo.com/ypatterns/
• bastian-allgeier.de/css_browser_selector/
• www.nmindplus.com/2006/06/28/css-hack/
발표자료 다운로드 PDF, PPT, Keyydnkrblog.com/blog/?p=696
감사합니다