본문 바로가기
UX/UX개념

모바일 사이트 만들기 전 알아야 할 것

by 일상변주가 2020. 8. 12.

PSD는 640px로 만든다

웹사이트는 1280기준 사이트면 1200px 사이즈로 주로 만들게 된다.

모바일 사이트는 최저 해상도 320px로 작업하며

psd는 640px 사이즈로 작업하여 퍼블 시 반으로 줄여 작업한다.

폰트 사이즈 또한 짝수로 만들어서 작업하는 것이 좋다.(소수점일 시 뭉그러져 나오거나 나눠서 작업하기 까다로워진다)

meta의 viewport를 사용한다

모바일 기기 내의 사이즈를 100% 가로, 세로 사이즈로 꽉 차게 구현해야 한다.

1) userscale - 양손 터치할 때 확대/축소 기능 : 메타에서 제어 가능하다

(대부분은 양손 터치를 못 하게 한다.)

2)모웹 접근성 - 텍스트 명도 차이를 많이 주게 하여, 다양한 색상을 쓸 수 있도록 함

HTML5, CSS3를 적극 활용한다

많은 인풋 요소들을 다양한 컨텐츠에 맞춰 다양한 타입을 사용할 수 있다.

모바일 사용성이 높아진다

다양한 디자인 요소를 CSS3로 대체할 수 있다.(속도 개선에 많은 효과가 있다)

iOS는 숫자를 전화번호로 인식하기 때문에 메타 요소를 추가해 줘야 한다.

모바일 호환성이 가능해야 한다

iOS, Android의 OS 버전은 어디까지 맞출지 정리가 필요하다.

예) iOS 5, 안드젤리까지.. 맞추겠다 등을 고객과 선협의 필요

유동형 레이아웃으로 만들어야 한다

가로 사이즈를 100% 작업하거나 유동형, 가변형으로 만들어야 한다.

가변형 : 한쪽은 고정, 한쪽은 가변적인 디자인으로 만들어야 한다.

PC에서 모바일웹 접속 시 처리 방법

인터넷 익스플로러에서는 html5나 css3를 다 지원하지 않는 문제 때문에 고객과 협의가 필요함

m.url.com은 웹에서 모바일 사이트 접근 가능

*리베하얀님 유튜브를 보고 작성했습니다.