반응형
블로그 이미지
개발자로서 현장에서 일하면서 새로 접하는 기술들이나 알게된 정보 등을 정리하기 위한 블로그입니다. 운 좋게 미국에서 큰 회사들의 프로젝트에서 컬설턴트로 일하고 있어서 새로운 기술들을 접할 기회가 많이 있습니다. 미국의 IT 프로젝트에서 사용되는 툴들에 대해 많은 분들과 정보를 공유하고 싶습니다.
솔웅

최근에 받은 트랙백

글 보관함


프로젝트를 진행하다 보면 여러 요청 사항들이 이루어 지도록 구현해야 하는 상황이 많이 있지요.


그 중에서는 별로 구현해 봤자 크게 유용하지 않은 것들도 있습니다. 프로그래머 입장에서 봤을 때 말이죠.


이번에 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 효과는 이번 프로젝트에서는 사용하지 않을 거지만 덕분에 좋은 공부를 했고 좋은 자료를 이 블로그에 남길 수 있게 됐습니다.


나중에 진짜 필요한 상황이 오면 큰 도움이 되겠죠.


여러분들도 좋은 하루 보내시고 즐코딩하세요.

반응형

Comment

  1. 알 수 없는 사용자 2013.01.15 05:13

    좋은글보고갑니다~