모바일 웹개발
모바일과 데스트탑 웹개발의 차이점들
- 모바일웹의 JavaScript,HTML,CSS는 Desktop과 동일하다
- 마우스와 키보드대신 손가락이 있다.
- 모바일은 화면이 작다.
- 기기의 성능이 상대적으로 좋지 않다.
모바일 브라우저의 특징
- 작다.
- 고정. resize가 안된다. (확대, 축소 가능)
- 마우스와 다르게 터치할 수 있다
css pixel(device independent pixel) 과 physical pixel(device pixel)
-
pixel density라고 불리는 ppi(pixel per inch) 를 통해서 device의
픽셀 밀도를 알 수 있다. (높을수록 선명) -
디바이스(모바일 기기)마다 픽셀 밀도가 다르다.
-
1배율의 픽셀 갯수가 가로,세로 각각 2배로 커졌음을 의미한다. 여기서 말하는 2배는 사실 픽셀의 개수가 1개에서 4개로 바뀌었다는 점이다.
-
픽셀의 총 갯수는 4배 증가(가로2, 세로2) 한 것이지만 물리적이 공간 크기는 그대로인 상태에서 픽셀의 갯수는 4분할 되었기 때문에 배수로 얘기하면 2배라고 말한다.
- 모바일의 pixel ratio이 4라면 4x4해서 1px에 16px가 들어가 있다. (1px로 보이지만 16px을 1px크기로 압축해서 보여주는 것)
- iphone 8+ 의 viewport(눈에 보이는 화면)의 width는 414 x 736 point
(참고 : https://www.paintcodeapp.com/news/ultimate-guide-to-iphone-resolutions)
-
이 단위는 logical width라고도 함. 단위도 pixel이라고 하지 않고 point(pt)라고 함.
-
CSS 개발에서는 이 크기를 css pixel 또는 device independent pixel 이라고 부른다.
-
기본 해상도를 physical pixel 또는 device pixel 이라고 한다.
device pixel = CSS pixel * pixel ratio
- css 개발 할 때의 단위는 css pixel 기준을 활용하는 것이 일반적이다.
<meta name="viewport" content="width=device-width, initial-scale=1.0">- 위 코드처럼 viewport 설정을 통해서 쉽게 css pixel로 렌더링 되도록 할 수 있다.
아래 링크에 가면 자세한 내용을 알 수 있다.
https://webclub.tistory.com/629
사용자가 모바일로 접속했는지 알 수 있는 방법
- script로 pixel ratio의 값이 1보다 크다면 모바일화면으로 보고 있다는 것을 알 수 있다.
ratio = window.devicePixelRatio;
if(ratio >= 2) { // ratio > 1 로하면 브라우저 조금만 확대해도 모바일로 인식함
//이러한 위험성 때문에 아래 방법이 더 좋다.
document.querySelector('.pc').style.display = 'none';
}else{
document.querySelector('.mobile').style.display = 'none';
}- Modernizr 사용
-
Modernizr는 cross browsing을 위해 필요하다.
-
touch event가 적용되면 모바일에서 이용하는 것으로 본다.
다운로드 -> 찾아볼 기능 검색 -> +를 누르면 우측에 view examples이 나온다
하지만 모든 기능을 찾아서 +해서 사용할 수 없으니 Modernizr cdn을 사용해서 script src를 넣어준다음 아래 코드 넣어준다.
if(Modernizr.touchevents) {
document.querySelector('.pc').style.display = 'none';
}else{
document.querySelector('.mobile').style.display = 'none';
}- navigator.userAgent로 모바일 기기 감지
아래 동영상을 보고 모바일 감지하기 공부하자
https://www.youtube.com/watch?v=1O13X68nrSs
Touch Event
- 모바일 디바이스 브라우저에서는 touch 이벤트를 사용한다.
touchstart -> touchmove -> touchend
- 이벤트 등록은 다음과 같이 PC브라우저에서 적용한 방식과 동일함.
document.querySelector("p").addEventListener('touchmove', (evt) => {
console.log(evt.changedTouches);
});-
touch이벤트리스너에 전달되는 event객체에는 target 속성이 있으며 touches와 changedTouches라는 하위 속성이 있다.
-
이 두 개의 값은 배열타입이다. 그 이유는 하나뿐인 마우스 포인터만 있는 PC와 다르게, 모바일 기기에서는 1개 이상의 터치영역이 생기기 때문이다. (손가락이 여러개라서)
-
때문에 어떤 손가락은 touchstart이고 어떤 손가락은 touchmove중인 상태가 발생 된다.
-
touches
: 모든 touch 이벤트 -
changedTouches
: 이전대비 현재 변화가 일어난 모든 이벤트 -
touchstart 와 touchend 에서 changedTouches 는 언제나 1개만 들어온다다.
-
changedTouches 가 여러 개 들어오는 상황은 touchmove 에서 2개 이상의 손가락을 동시에 움직일 때 이다.
-
인덱스는 그냥 인덱스일 뿐 처음 터치한 손가락이 뭔지, 두 번째 터치한 손가락이 뭔지를 알려주지는 않는다.
touch move 주의할 점
touchmove 는 touchstart 나 touchend 와 달리 일반적으로 브라우저가 처음부터 소유해 버린다.
따라서 최초 한 번은 발생하지만 그 이후는 브라우저의 스크롤이 가져가 버린다.
만약 어떤 dom 에서 touchmove 이벤트를 사용하겠다는 뜻은 바꿔 말하면 그 영역에서는 스크롤이 안일어나게 하겠다는 뜻이다.
따라서 touchmove 의 경우는 반드시 e.preventDefault() 를 호출하여 막아주지 않으면 제대로 작동하지 않는다.
자세한 Touch Event는 아래 링크를 참조하자
touch event
애니메이션
-
모바일웹은 제한된 크기로 화면을 숨겨두고 보여주기를 잘 해야함. 특히 화면 전환 시에 애니메이션이 효과적이다.
-
모바일웹의 애니메이션 역시, CSS3의 transform속성을 잘 사용하면 된다.
css
transition: transform .5s ease-in-out;
transform: translate3d(100px, 0px, 0px);javascript에서 css속성 설정
elTarget.style[sTS] = sValue + " " + nDuration + "s";
elTarget.style[sTF] = 'translate3d(' + (nPreviousTranslateX + nDistance) + 'px, 0, 0)';모바일 웹 서비스 및 개발 전략
- 오밀조밀한 UI보다는 간결하고 시원한 UI
- 핵심을 담은 UX
- 불필요한 애니메이션 보다 터치기반의 빠른 인터랙션 지원
다음 모바일 환경 확인
http://troy.labs.daum.net/
참고
