[모바일]모바일 코딩하는 분들에게

2014.03.04 16:49

웹퍼블리셔로 일한지 꽤나 오래 된거같다.

웹디자인을 시작으로 웹퍼블리셔까지..

지금도 회사마다 다르겠지만, 본인이 웹디자인을 시작했을때만해도 코딩과 디자인을 병행하면서 했던 기억이 난다.

웹표준과 웹접근성, jquery 및 CSS까지 이제는 모바일 시대가 도래하면서 웹퍼블리셔의 역할이 분명해졌다고 생각한다.


pc버전으로 사이트를 제작시 모든 브라우저 특히나 익스6부터 맞춰야하는것 때문에 굉장한 스트레스로 다가왔었는데(지금은 익스8부터 맞추는 기업들도 많다), 이번에 스마트폰 디바이스마다 맞춰야하는 현실이 되어버렸다.


익스6같은 존재가 안드로이드 하위버전이라고 보셔도 무방할듯 하다. 물론 ios하위버전에도 문제가 되는부분이 있긴하다.

필자가 모바일 코딩을 하면서 힘든부분과 해결방법들을 몇자 적어 볼려고 한다. 100% 맞다고 확신은 못하지만, 사이트 제작자 분들에게 조금이나마 도움을 주고자함이다.


문서는 되도록이면 utf-8로 작업하길 바란다. 물론 저장도 utf-8로.. (글로벌 고고씽~)


모바일 코딩 기본 html소스


<!DOCTYPE html>

<html lang="ko">

<head>

<meta charset="UTF-8" />

<title>Mobile Coding</title>

<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0" />

<meta name="format-detection" content="telephone=no" />

<link rel="apple-touch-icon" href="이미지경로.png" />

</head>

<body>


</body>

</html>


특별한 이슈가 없는한 위와 같은 방식으로 html 기본소스로 잡으면 된다.

<meta name="format-detection" content="telephone=no" />

위 meta 태그를 넣는 이유는 모바일 코딩시 숫자를 전화번호로 인식하는 경우가 있다. 그렇게 되면 터치가 가능해지고 터치했을때 전화가 걸리게 된다. 그리고 ios에서는 전화번호로 인식할때 자체 디바이스에서 정해논 class가 적용되는 현상이 있다. 이런경우를 방지하기 위함이다. 관련링크 : http://www.webmini.net/542796

만약 숫자가 전화번호가 맞아서 터치시 전화를 걸리게 하고 싶다면, 따로 관련링크를 적용해도 된다.


전화걸기    : <a href="tel:1234-1234 ">전화걸기</a>

문자보내기 : <a href="sms:010-1234-1234">문자보내기</a>


그리고 <link rel="apple-touch-icon" href="이미지경로.png" /> 는 아이폰에서 북마크 추가시 바탕화면에서 볼수있는 아이콘 이미지이다. png로 꼭 저장하길..


전화번호,이메일,지도 자동링크 방지


아이폰 사파리 계열에서는 숫자가 전화번호 형식으로 자동링크가 걸리지만, 안드로이드에서 메일주소와 지도상의 주소까지 자동으로 링크가 걸리는 이슈가 있다.

그럴땐 meta 태그를 추가하면 된다.


<meta name="format-detection" content="telephone=no, address=no, email=no" />


전화번호 링크만 없앨때는 

<meta name="format-detection" content="telephone=no" />



CSS 

@charset "UTF-8";
/* mobile style */
*{-webkit-text-size-adjust:none}
body, form, div, p, h1, h2, h3, h4, h5, h6, dl, dt, dd, ul, ol, li, fieldset, th, td, input, textarea,button,select{margin:0;padding:0;font-family:'Malgun Gothic','맑은 고딕',dotum,'돋움',sans-serif;font-weight:normal}
body{-webkit-user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:rgba(0,0,0,0)}
li{list-style:none}
a{text-decoration:none}
a[href^="tel"]{ font-style:normal}
address, caption, em, var{font-style:normal;font-weight:normal}
input, textarea, select{letter-spacing:normal}
ol, ul, dl{list-style:none}
fieldset, img{border:0}
legend, caption{display:none}
img{border:0;vertical-align:top}
hr{display:none}
table{border-collapse:collapse;border-spacing:0}
br{letter-spacing:normal}
p{letter-spacing:normal}
input{vertical-align:middle}
input[type="text"], input[type="password"]{-webkit-appearance:none}
input[type="checkbox"]{-webkit-appearance:none;-webkit-border-radius:0}
input:checked[type="checkbox"]{-webkit-appearance:checkbox}
input[type="radio"]{border:none;-webkit-appearance:none}
button,input[type="button"],input[type="submit"],input[type="reset"],input[type="file"]{-webkit-appearance:button;border-radius:0}
textarea{-webkit-appearance:none}
select{-webkit-appearance:menulist-text}


css같은 경우는 디자인이 어떻게 나오느냐에 따라 다를수 있고, 웹퍼블리셔마다 작업스타일이 있어서 정답은 없다.

대충 위와 같고, 간단히 설명을 하자면


*{-webkit-text-size-adjust:none}


위에 소스는 아이폰 가로모드로 했을때 글자가 커지는걸 방지하기 위함이다.

관련주소 : http://www.webmini.net/css/408401


<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />


body에 위와 같이 하는 이유는 안드로이드에서 레이어를 띄웠을때 position:fixed 적용시 안드로이드 하위버전에서는 고정이 안되는 버그가 있다. 그럴때 해결하기 위함이다. 하지만 적용해도 뚝뚝 끊기는 현상은 발생한다. 

되도록이면 모바일에서는 position:fixed를 사용하지 않으면 좋지만 그렇지않을 경우도 있으니 참고만 하길 바란다.

그밖에 하위버전에서는 내부 스크롤이 안되는 경우가 있어서 iscroll.js 로 해결해도 된다.


관련링크 : http://cubiq.org/iscroll-4

iscroll사용시 동적일때 : http://www.webmini.net/jquery/543822



border-radius 사용시


안드로이드 하위버전에서는 border-radius 수치가 커지면 깨끗하게 표현이 되지 않는데, css3에서 추가된걸 마구쓰게될경우 속도도 느려지고, 그래픽이 깨져보이는걸 알수있다. ex)갤럭시s2


예를들어 쪽지함 알림수치같은걸 볼수있는데, 이럴경우는 배경이미지로 제작을 해야할것이다.



안드로이드에서 input 박스가 레이어를 뚫고 올라올때


body{-webkit-user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:rgba(0,0,0,0)}

위에걸로 해결이 안될땐 아래 방식으로 해보자.


input{-webkit-appearance:menulist-text} 추가해주면 해결이 되긴하나, 안드로이드 4.x 버전에서는 한글 자음과 모음이 하나씩 써지는게 보여지지 않는 문제도 있다. 


Webkit CSS properties


관련 링크 : http://css-infos.net/properties/webkit



안드로이드에서 placeholder이 적용안될때


아마도 안드로이드 4.x 에서 input type="number" 로 했을때 placeholder 이 적용이 안되는 문제가 발생할것이다.

간단히 설명을 하자면 input type="number" 로 했을때 input 박스를 터치하면 숫자패드가 올라오게 하는것이다. 그런데 이놈이 number였을때 placeholder을 넣어도 보이지 않는 문제가 발생한다. 그럴때 해결방법이다. 


<input type="text" placeholder="메일주소 입력" onfocus="this.type='number';">


터치전에는 type="text" 터치하면 number 로 바뀌게 되는것이다. 


관련링크 : http://www.webmini.net/html/543403

input type 관련링크 : http://blog.naver.com/mastre50?Redirect=Log&logNo=40188982609

가로 메뉴가 홀수일때


가로메뉴가 짝수일때는 상관이 없지만, 홀수일때 가로 100%일때 딱 맞아떨어지지가 않는다.


ex)

<ul>

<li>메뉴1</li>

<li>메뉴2</li>

<li>메뉴3</li>

</ul>


해결방법 css

li{width:33%}

li:last-child {width:34%}


33%로는 딱떨어지지 않아서 맨마지막 li에는 34%로 주면 된다.

반대로 li:first-child 로 해줘도 된다.


가상선택자는 여러가지가 있으니 아래 링크를 참고하길 바란다. (예제도 같이 보면 이해가 빠를것이다.)


http://www.w3.org/wiki/CSS/Selectors#Structural_pseudo-classes


추가 : border이 들어갔을때는 margin-left:-1px 이런식으로 border-left:1px solid #ccc; 가 들어간곳에 주면 된다.



미디어쿼리 @media (반응형)


요새 많은 사이트가 pc/모바일 구분없이 반응형웹으로 제작하는 경우가 많다. (상위브라우저에서 가능)

미디어쿼리는 이벤트 제작시 세로/가로모드에 따라 유용하게 사용할 수도 있고, 해상도별로 최적화할수도 있다.


사용방법은 아래와 같다. (css)

@media (min-width: 330px) {

 .test{width:360px;color:#333}

}


해상도별로 사이즈를 조절할수도 있으며, 최소,최대크기에 따라 보여주는걸 다르게 할수도 있다.

디바이스별 해상도는 아래링크에서 확인하면 된다. (실제 디바이스에서 보는거와는 차이가 있으니 해상도에 따른 변화만 참고하자)


http://troy.labs.daum.net/



jQuery는 해야한다.


javascript 를 매우 단순하게 해주는게 jQuery 이다.

javascript Library 라고 보면 된다.


사이트를 동적으로 만들기위해 스크립트는 꼭 해야할 필요가 있다. 또한 jquery는 css와 연관되는 부분이 많기때문에 알아야한다.

회사마다 다르고, 많은 회사에서 개발자들이 스크립트를 처리해주는 경우가 있는데, 개발과 연결된 스크립트 외에 시각적인 효과정도는 퍼블리셔가 해야한다. 개발전달하면서 스크립트가 들어감에 따라 마크업 소스가 바뀌는 경우도 있고, 디자인과 가까운게 개발보다는 퍼블리셔가 맞기 때문에 어떤효과를 줘야하는지도 잘알지 않을까?


관련링크 : http://blog.naver.com/topsaga/140155586647 (이해하는데 도움이 많이된다.)

jQAPI : http://jqapi.com/ (개인적으로 자주 이용한다.)

생활코딩(강추) : http://opentutorials.org/course/1 (엄청난 동영상강좌와 쉬운 설명들.. 최고라고 말하고싶다)


요약

1. 안드로이드가 싫어진다.

2. 아이폰에서 보면 너무 만족스럽다.

3. 차라리 pc버전 제작할때가 그리워진다.


현재 생각나는것만 포스팅해봤는데, 계속 추가해서 포스팅 예정이니, 맞지 않는것이나, 공유할 문서가 있으면 댓글 달아주시길..

신고

'이야기 > 모바일' 카테고리의 다른 글

[모바일]모바일 코딩하는 분들에게  (36) 2014.03.04

빽짱구 이야기/모바일 , , , , , , , , ,

  1. 이전 댓글 더보기
  2. Blog Icon
    지나감

    정말 왠만해선 댓글 안남기는데 정말 유용하네요~ㅎㅎ

  3. 댓글 감사합니다.^^

  4. Blog Icon
    수잔

    좋은 글 감사~

  5. 댓글 감사합니다.

  6. Blog Icon
    행인

    감사댓글 남길 수 밖에 없는 내용이네요. 나홀로 디자이너에게 아주 유용한 정보 감사합니다.^^

  7. 네 도움이 되셨다니 다행입니다.^^

  8. Blog Icon

    정보 감사해요 많은 도움 됐습니다! :)

  9. 네~ 감사합니다.^^

  10. Blog Icon
    dorosi

    잘보고 가요.. 서핑하다 들어왔는데 한참을 봤네요.. 즐찾 해놓을게요~ 정보 공유 감사합니다

  11. 네 감사합니다.~^^

  12. Blog Icon
    ykllove

    우와.. 최고십니다.. 모바일 코딩 공부중인데요 이제막 시작해서 하나도 모르겠던데.. ㅠㅠ
    감사해요 너무너무 잘 보고갑니다!!

  13. 과찬이십니다.^^

  14. Blog Icon
    몽돌순이

    ㅎㅎ 요약해둔 세가지 글이 참 공감가네요...ㅎㅎㅎ
    아이폰 보고 코딩해두면 참 멋진데 다른 폰에서 이상하게 맘에 안듬..ㅋㅋㅋ
    여튼 잘 봤습니다 ^^ 참고도 됐고요 ㅎㅎ

  15. 네 댓글감사합니다.^^

  16. Blog Icon
    홍좀비

    모바일 코딩시 이미지 너비값을 퍼센트로 처리 하는데
    인풋과 같은 입력 양식을 퍼센트로 주면
    아이폰과 안드로이드 폰으로 볼시 크기가 너무 다릅니다..
    이건 어떻게 해결 하면 될까요??

  17. 인풋은 아이폰과 안드로이드로 볼시 사이즈도 그렇고 기본 디자인도 그렇고 많이 다릅니다. 그럴땐 사이즈를 초기화를 시켜주셔도 됩니다. 예를들어 input{height:30px;border:0} 이런식으로요

  18. Blog Icon
    홍황

    잘보고 즐찾까지 해두었네요~ ^^
    그리고 궁금한게 있는데요,
    모바일 페이지 코딩시 브라우저에서 확인을 하잖아요~
    최소로 확인해 줘여 할 브라우저에는 모가 있을까요

  19. 모바일 페이지 코딩시에는 모바일에서 제공되는 브라우저가 html5와 css3를 지원하기때문에 PC브라우저에서는 html5와 css3가 지원되는 상위브라우저에서 확인하시면됩니다. (크롬,파폭,사파리,익스9이상)
    주로 크롬을 많이 사용하며, 하위브라우저에서는 맞출 필요가 없습니다.

  20. Blog Icon
    홍홍홍

    잘보고 갑니다. 정말 도움 마니 되게써요.

  21. 아직 부족한감이 있지만, 도움이 되셨다니 감사합니다.

  22. 와 주옥같은 팁이네요. 정말 감사드려요. 마지막 팁이 이해가 안가서 그러는데요. min-width를 어디에 적용하죠? 레티나 때문에 반으로 줄여서 하고 있더든요. 스케일은 1로 하구요.

  23. 레티나하고는 상관이 없습니다.
    전체 레이아웃을 min-width:320px 으로 할경우 이미지나 텍스트를 디자인시안(640px)으로 작업했을때 반으로 줄여서 계산해서 코딩을 하게되지만, 640px로 잡을때는 반으로 줄일필요없이 640시안 그대로 작업해도 된다는 이야기 였습니다.

  24. Blog Icon

    요즘아이폰6플러스는 750이든데 그럼 max-width 750으로해야할까요?

  25. Blog Icon

    요즘아이폰6플러스는 750이든데 그럼 max-width 750으로해야할까요?

  26. 아뇨 750으로 하실필요는 없습니다.

  27. Blog Icon
    수잔

    ㅎㅎㅎ
    PC 코딩 할때가 그리워진다...에서 격하게 공감합니다.

  28. Blog Icon
    designerLee

    아..좋은 정보 정말 감사합니다~~

  29. Blog Icon
    김선태

    여기서 만나게 될줄이야 너무 반가워요

  30. Blog Icon
    박보라

    요약이 넘나 공감되네요!! 감사합니다!! ㅎㅎ

  31. Blog Icon
    박보라

    요약이 넘나 공감되네요!! 감사합니다!! ㅎㅎ

  32. Blog Icon

    정말 유용한 글 감사합니다. 많이 참고하고 있습니다^^

  33. Blog Icon
    김가은

    좋은정보 감사합니다!