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은 웹에서 모바일 사이트 접근 가능
*리베하얀님 유튜브를 보고 작성했습니다.
'UX > UX개념' 카테고리의 다른 글
e-Commerce 필수개념 (0) | 2020.09.04 |
---|---|
웹사이트 구축 프로세스 (0) | 2020.09.04 |
iOS 리젝 사유 (0) | 2020.08.11 |
웹앱, 네이티브앱, 하이브리드앱 차이/비교 (0) | 2020.08.11 |
비즈니스 목표 이해하기 / 이해관계자 인터뷰 (0) | 2020.05.20 |