프로젝트를 진행하다 보면 여러 요청 사항들이 이루어 지도록 구현해야 하는 상황이 많이 있지요.
그 중에서는 별로 구현해 봤자 크게 유용하지 않은 것들도 있습니다. 프로그래머 입장에서 봤을 때 말이죠.
이번에 jQuery Mobile 프로젝트를 진행하는데 그래픽 디자이너가 아래 와 같이 만들어 버렸습니다.
음 이건....
왼쪽의 arrow button 이 문제인데요. 왜냐하면 jQuery Mobile 에서는 저런 arrow button 을 지원하지 않거든요. 저런 버튼은 iPhone 이나 iPad 같은 iOS 기기에서 지원하는 위젯이거든요.
아마 디자이너가 아이폰에서 저런 arrow-back button 을 보고 디자인을 한 것 같습니다.
일단 저런 요청이 들어왔으니까 저는 한번 시도해 보기로 했습니다.
jQuery Mobile 에서 arrow button 구현하기.
아래 버튼이 제가 구현한 것인데요.
CSS 로 긴 사각형을 만들고 왼쪽에 작은 사각형을 만든 다음에 이걸 45도 돌린 겁니다.
여기서 작은 사각형을 돌리고 나서 오른쪽에 있는 버튼이랑 잘 어울려야 하거든요.
그래서 Gradient 를 45도 rotate 하고 난 상태에서 오른쪽 사각형이랑 어울리도록 하는 것이 관건입니다.
<html>
<head>
<style type=text/css>
#ios-arrow-left {
display : block;
position:absolute;
z-index : 0;
left:50px;
top:50px;
height:30px;
width:100px;
padding: 0 10px 0 6px;
font-weight:
bold;
color:
#fff /*{f-bup-color}*/;
text-shadow:
0 /*{f-bup-shadow-x}*/
1px /*{f-bup-shadow-y}*/
0 /*{f-bup-shadow-radius}*/
#294d05 /*{f-bup-shadow-color}*/;
border-radius: 5px;
background:
#b9f07f; /* Old browsers */
background:
-moz-linear-gradient(
top,
#b9f07f 0,
#8fbd36 9%,
#387800 94%,
#74a814 97%,
#387800 100%); /* FF3.6+ */
background:
-webkit-gradient(
linear,
left top,
left bottom,
color-stop(0,#b9f07f),
color-stop(9%,#8fbd36),
color-stop(94%,#387800),
color-stop(97%,#74a814),
color-stop(100%,#387800)); /* Chrome,Safari4+ */
background:
-webkit-linear-gradient(
top,
#b9f07f 0,
#8fbd36 9%,
#387800 94%,
#74a814 97%,
#387800 100%); /* Chrome10+,Safari5.1+ */
background:
-o-linear-gradient(
top,
#b9f07f 0,
#8fbd36 9%,
#387800 94%,
#74a814 97%,
#387800 100%); /* Opera 11.10+ */
background:
-ms-linear-gradient(
top,
#b9f07f 0,
#8fbd36 9%,
#387800 94%,
#74a814 97%,
#387800 100%); /* IE10+ */
background:
linear-gradient(
to bottom,
#b9f07f 0,
#8fbd36 9%,
#387800 94%,
#74a814 97%,
#387800 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b9f07f', endColorstr='#387800',GradientType=0 ); /* IE6-9 */
}
#ios-arrow-left:before {
position:absolute;
content : ' ';
left:-7px;
top:4px;
height : 21px;
width: 20px;
z-index : 1;
-moz-transform :
rotateZ(45deg) skewY(-0deg) skewX(-0deg);
-o-transform :
rotateZ(45deg) skewY(-0deg) skewX(-0deg);
-webkit-transform :
rotateZ(45deg) skewY(-0deg) skewX(-0deg);
transform :
rotateZ(-0deg) skewY(-0deg) skewX(-0deg);
background: #b9f07f; /* Old browsers */
background:
-moz-linear-gradient(
-45deg,
#b9f07f 0%,
#8fbd36 9%,
#387800 94%,
#74a814 97%,
#387800 100%); /* FF3.6+ */
background:
-webkit-gradient(
linear,
left top,
right bottom,
color-stop(0%,#b9f07f),
color-stop(9%,#8fbd36),
color-stop(94%,#387800),
color-stop(97%,#74a814),
color-stop(100%,#387800)); /* Chrome,Safari4+ */
background:
-webkit-linear-gradient(
-45deg,
#b9f07f 0%,
#8fbd36 9%,
#387800 94%,
#74a814 97%,
#387800 100%); /* Chrome10+,Safari5.1+ */
background:
-o-linear-gradient(
-45deg,
#b9f07f 0%,
#8fbd36 9%,
#387800 94%,
#74a814 97%,
#387800 100%); /* Opera 11.10+ */
background:
-ms-linear-gradient(
-45deg,
#b9f07f 0%,
#8fbd36 9%,
#387800 94%,
#74a814 97%,
#387800 100%); /* IE10+ */
background:
linear-gradient(
135deg,
#b9f07f 0%,
#8fbd36 9%,
#387800 94%,
#74a814 97%,
#387800 100%); /* W3C */
filter: progid:
DXImageTransform.Microsoft.gradient(
startColorstr='#b9f07f',
endColorstr='#387800',
GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}
#ios-arrow-left:hover {
background:
#b9007f /*{f-bup-background-color}*/;
border:
1px solid #5f666b /*{f-bup-border}*/;
background:
#b9f07f /*{f-bup-background-color}*/;
font-weight:
bold;
color:
#fff /*{f-bup-color}*/;
text-shadow:
0 /*{f-bup-shadow-x}*/
1px /*{f-bup-shadow-y}*/
0 /*{f-bup-shadow-radius}*/
#294d05 /*{f-bup-shadow-color}*/;
background:
#387800; /* Old browsers */
background: -moz-linear-gradient(
top,
#387800 0%,
#74a814 9%,
#387800 94%,
#b9f07f 100%); /* FF3.6+ */
background: -webkit-gradient(
linear,
left top,
left bottom,
color-stop(0%,#387800),
color-stop(9%,#74a814),
color-stop(94%,#387800),
color-stop(100%,#b9f07f)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(
top,
#387800 0%,
#74a814 9%,
#387800 94%,
#b9f07f 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(
top,
#387800 0%,
#74a814 9%,
#387800 94%,
#b9f07f 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(
top,
#387800 0%,
#74a814 9%,
#387800 94%,
#b9f07f 100%); /* IE10+ */
background: linear-gradient(
to bottom,
#387800 0%,
#74a814 9%,
#387800 94%,
#b9f07f 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient(
startColorstr='#387800',
endColorstr='#b9f07f',
GradientType=0 ); /* IE6-9 */
}
#ios-arrow-left:hover:before
{
position:absolute;
content : ' ';
left:-9px;
top:4px;
height : 21px;
width: 20px;
z-index : 1;
-moz-transform :
rotateZ(45deg) skewY(-0deg) skewX(-0deg);
-o-transform :
rotateZ(45deg) skewY(-0deg) skewX(-0deg);
-webkit-transform :
rotateZ(45deg) skewY(-0deg) skewX(-0deg);
transform :
rotateZ(-0deg) skewY(-0deg) skewX(-0deg);
border-bottom:
1px solid #5f666b;
border-left:
1px solid #5f666b;
background: #387800; /* Old browsers */
background:
-moz-linear-gradient(
-45deg,
#387800 0%,
#74a814 9%,
#387800 94%,
#b9f07f 100%); /* FF3.6+ */
background: -webkit-gradient(
linear,
left top,
left bottom,
color-stop(0%,#387800),
color-stop(9%,#74a814),
color-stop(94%,#387800),
color-stop(100%,#b9f07f)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(
-45deg,
#387800 0%,
#74a814 9%,
#387800 94%,
#b9f07f 100%); /* Chrome10+,Safari5.1+ */
background:
-o-linear-gradient(
-45deg,
#387800 0%,
#74a814 9%,
#387800 94%,
#b9f07f 100%); /* Opera 11.10+ */
background:
-ms-linear-gradient(
-45deg,
#387800 0%,
#74a814 9%,
#387800 94%,
#b9f07f 100%); /* IE10+ */
background:
linear-gradient(
-45deg,
#387800 0%,
#74a814 9%,
#387800 94%,
#b9f07f 100%); /* W3C */
filter: progid:
DXImageTransform.Microsoft.gradient(
startColorstr='#b9f07f',
endColorstr='#387800',
GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}
</style>
</head>
<body>
<div id="ios-arrow-left"></div>
</body>
</html>
|
|
iosBtn.html#ios-arrow-left 부분이 오른쪽의 큰 사각형 부분입니다.
그 다음 #ios-arrow-left:before 부분이 그 사각형 왼쪽에 작은 사각형을 만든건데요.
rotateZ(45deg) skewY(-0deg) skewX(-0deg); 으로 사각형을 45도 돌립니다.
그리고 Gradient 부분을 보면
-webkit-linear-gradient(
-45deg,
#b9f07f 0%,
#8fbd36 9%,
#387800 94%,
#74a814 97%,
#387800 100%); /* Chrome10+,Safari5.1+ */
여기서도 45도 돌려서 gradient 가 그려지도록 만들었습니다.
그러면 45도 돌린 후에는 오른쪽 사각형이랑 제대로 gradient 가 어울리겠죠.
그 다음 #ios-arrow-left:hover 와 #ios-arrow-left:hover:before 부분은 마우스를 올렸을 효과를 구현했습니다.
구현하고 보니까 크롬하고 사파리에서만 돌아가던데요.
(Firefox 와 Opera 같은데서는 작은 사각형의 rotate 가 안되더라구요.)
이번 프로젝트의 target device 는 main 이 blackberry (ver 6,7) 이구요. sub 로 iPad와 iPhone 을 대상으로 합니다.
회사 내부의 특정 business 를 위한 모바일 웹인데 담당자들이 주로 사용하는 디바이스들이 블랙베리랑 iOS 디바이스들이거든요.
이 두 종류의 디바이스에서는 제대로 적용이 됩니다.
그런데 이 효과는 적용하지 않기로 했습니다.
User Experience 부분에서 문제가 있어서 입니다. hover 는 mouseup 이벤트에 해당하는 거고 요즘 사용하는 touch screen 모바일 기기에서는 다른 여러 다양한 이벤트들이 발생하기 때문이거든요.
오른쪽 큰 사각형은 버튼으로 설정이 되서 jQuery Mobile 이 각 이벤트마다 알아서 CSS 처리를 하는데 이 작은 사각형은 그러지 못해서 편안한 UX 를 위해서는 이 touch screen 의 해당 이벤트를 catch 해서 그에 맞는 UI 를 구현해야 하거든요.
이 작은 효과를 내기 위해서 개발에 소요되는 시간이 너무 깁니다.
완전 Time consuming job 이죠.
당연히 jQuery Mobile 에서 지원하지 않는 부분을 매뉴얼로 구현하니까 일일이 이벤트 발생시마다 컨트롤 해야 되는 거겠죠.
처음 이 디자인을 받았을 때 부터 그럴거라고 생각을 했었지만 디자이너와 프로젝트 리더와 프로젝트 매니저를 설득하고 좀 더 효율적이고 유저에게도 도움을 주는 방향으로 프로젝트를 진행해 나갈 수 있게 하려면 충분한 근거를 제시하면서 제 의견을 얘기해야 되겠기에 일단 여기까지 구현하고 직접 디바이스에서 실행하면서 그 장단점을 발표했습니다.
그 결과 이 방법 보다는 버튼 안에 < 이미지를 넣는 방법이 더 효율적이라는 의견을 도출해 냈죠.
그 미팅에 디자이너는 참석하지 않았는데요.
오늘은 추수감사절이라 휴일이고 내일 가서 디자이너에게 자세히 설명하고 버튼안에 들어갈 이미지를 부탁해야 겠습니다.
사실 오늘 그 디자이너 집에 초대받아서 점심 먹고 왔거든요.
여기 추수감사절은 칠면조 요리를 먹는게 전통이지만 그 디자이너가 얼마전에 인도에서 와서 토종 인도 요리로 먹고 왔습니다.
저기 레몬 얹혀 있는 건 수육인데 그건 저희 집에서 준비해 간 거였어요.
마침 그 집안은 목요일에는 고기를 안 먹는다 그래서 한 점도 안 먹었어요. ^^
저 동그란 거는 뿌리라는 요리이고 큰 접시에 담긴건 컬리 플라우어 커리(카레)와 브지인가 브르지인가 하는 계란요리하고 감자요리가 담겨져 있습니다. 그리고 노란 스프같은 건요.
사실 이게 우리나라에서 먹는 커리(카레) 랑 제일 비슷하지만 카레는 아니고 달 이라는 음식입니다.
왼쪽 위에 하얀 접시로 덮여진 것이 밥이구요.
내일은 추수감사절 다음날인 Black Friday 입니다.
저희 회사에서는 휴일은 아니고 대부분 재택근무를 하는데요.
저는 이 디자이너가 미팅이 있어서 회사에 나간다고 해서 같이 나갈려구요.
이 기능을 구현하려고 이것 저것 구글링을 했었는데요.
저 위에 사용한 소스는 아래 싸이트에 있는 소스를 참조한 겁니다.
http://cssnerd.com/2011/11/30/the-best-pure-css3-ios-style-arrow-back-button/
그리고 이미지를 사용해서 구현한 소스도 있는데요.
이 방법은 처음부터 대상에서 제외 했습니다.
기본적으로 이번 프로젝트에서는 버튼을 만들 때 이미지를 사용하지 않거든요.
이 방법을 사용하면 다른 버튼과 조화를 이루는 방법에 아주 많은 공수가 들어갈 겁니다.
아래 정보가 있는 싸이트와 파일을 올립니다.
http://taitems.tumblr.com/post/7240874402/ios-inspired-jquery-mobile-theme-jquery-mobile
|
|
iOS-Inspired-jQuery-Mobile-Theme-master.zip그리고 또 한군데 발견한 곳은
http://appcropolis.com/how-to-make-iphone-back-button-in-jquery-mobile/
입니다.
이 글은 자세히 읽어보지는 못했습니다. 별로일 것 같아서요.
혹시 이 소스 분석해 보시고 저 위에 있는 두가지 방법보다 좋은 것 같으면 알려 주세요.
일단 저 arrow button 효과는 이번 프로젝트에서는 사용하지 않을 거지만 덕분에 좋은 공부를 했고 좋은 자료를 이 블로그에 남길 수 있게 됐습니다.
나중에 진짜 필요한 상황이 오면 큰 도움이 되겠죠.
여러분들도 좋은 하루 보내시고 즐코딩하세요.
'jQuery Mobile > JQM codes' 카테고리의 다른 글
| jQuery Mobile 샘플코드 분석, Cascading Selects - .empty() .val() - (0) | 2012.08.11 |
|---|---|
| jQuery Mobile 샘플코드 분석, Dynamic Add (0) | 2012.08.10 |
| jQuery Mobile 로 만든 To-Do List 분석하기 04 (0) | 2012.08.09 |
| jQuery Mobile 로 만든 To-Do List 분석하기 03 (0) | 2012.08.08 |
| jQuery Mobile 로 만든 To-Do List 분석하기 02 (0) | 2012.08.07 |
| jQuery Mobile 로 만든 To-Do List 분석하기 01 (0) | 2012.08.07 |
| json2.js 플러그 인 알아보기 (0) | 2012.08.04 |
| jQuery.tmpl 플러그 인 튜토리얼 (0) | 2012.08.04 |
| jquery.cookie.js 사용법 알아보기 (1) | 2012.08.03 |