디자인 패턴과 YUI를 이용해 Rich UI 빠르게 구현하기
-
Upload
jinho-jung -
Category
Technology
-
view
1.889 -
download
3
description
Transcript of 디자인 패턴과 YUI를 이용해 Rich UI 빠르게 구현하기
디자인 패턴과 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
감사합니다