웹퍼블리셔로 일한지 꽤나 오래 된거같다.
웹디자인을 시작으로 웹퍼블리셔까지..
지금도 회사마다 다르겠지만, 본인이 웹디자인을 시작했을때만해도 코딩과 디자인을 병행하면서 했던 기억이 난다.
웹표준과 웹접근성, 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>
전화번호,이메일,지도 자동링크 방지
아이폰 사파리 계열에서는 숫자가 전화번호 형식으로 자동링크가 걸리지만, 안드로이드에서 메일주소와 지도상의 주소까지 자동으로 링크가 걸리는 이슈가 있다.
그럴땐 meta 태그를 추가하면 된다.
<meta name="format-detection" content="telephone=no, address=no, email=no" />
CSS
/* 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}
}
해상도별로 사이즈를 조절할수도 있으며, 최소,최대크기에 따라 보여주는걸 다르게 할수도 있다.
디바이스별 해상도는 아래링크에서 확인하면 된다. (실제 디바이스에서 보는거와는 차이가 있으니 해상도에 따른 변화만 참고하자)
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버전 제작할때가 그리워진다.
현재 생각나는것만 포스팅해봤는데, 계속 추가해서 포스팅 예정이니, 맞지 않는것이나, 공유할 문서가 있으면 댓글 달아주시길..
