[javascript] 모바일 웹개발

eunbi·2020년 3월 30일

JavaScript mobile

javascript

목록 보기

7/8

모바일 웹개발

모바일과 데스트탑 웹개발의 차이점들

모바일웹의 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/

참고

eunbi

프론트엔드 개발자입니다 :)

이전 포스트

[javascript] requestAnimationFrame

다음 포스트