모바일 웹 만들기 전 참고사항 및 만드는 순서

 

 

 

 

 

 

대상 : 모바일 웹 / 하이브리드 웹

 

 

 

 

 

 

1. 디자인 파일 (PSD)은 640px로 작업

 

 

웹의 경우 디자이너 분들이 1280으로 주고

보통 받은 기준대로 작업을 하는데

모바일의 경우 디자이너에게 640으로 받더라도

퍼블리싱 작업할때는 나누기 2하여 작업을 한다.

최저 해상도 320px로 제작

 

이미지는 원 사이즈로 쓴다.

안에있는 컨텐츠들 사이즈는 짝수로 작업해

퍼블리셔에게 넘기는게 좋다.

 

 

 

 

 

2. meta요소의 viewport 속성 사용

 

 

디바이스별 서로 다른 사이즈를 100%

사이즈로 구현해 주는 기능이 있다.

 

유저 스케일 영역, 즉 양손 터치 가능을 추가하여

화면 사이즈를 사용자가 편의에 맞게 조절 할 수 있고

viewport 속성을 통해 제어가 가능하다.

 

대부분은 양손터치가 불가능 하도록 설정을 하며

사용자 입장에서도 딱히 불편함을 느끼지는 않지만

 

모바일 웹 접근성 측면을 고려해 시각 장애를

가지고 계신 분들을 배려하는 설정을 할 수 있다.

 

콘텐츠 명도 대비 란 항목에 택스트와 배경간의

명도차이를 줌으로서 다양한 색상의 폭을

사용할 수 있는데 양손 터치가 활성화 되면

사용할 수 있는 색의 범위가 넓어지게 된다.

 

하지만 사전에 협의를 하여 사용유무를 결정해야 한다.

 

 

 

 

 

3. HTML5 와 CSS3의 적극 활용

 

HTML5 에서는

많은 종류의 input 요소를 사용할 수 있게 되었고

사용성이 높아진 이유는 바로 모바일 때문이다.

 

다양한 컨텐츠에 맞는 알맞은 input요소를 사용하게 되면

사용성이 많이 올라가게 된다.

 

CSS3를 활용하면 이미지 사용률을 줄일 수 있고 그로 인해

사이트에 걸릴 수 있는 부하를 적게 할 수 있고 속도 개선에도

도움을 줄 수 있다.

 

 

 

 

 

4. 모바일 호환성을 고려

 

크로스 브라우징을 고려할 대상으로는

웹 브라우저 종류 (인터넷 익스플로러,

크롬, 파이어폭스, 사파리),

 

ios 인지 안드로이드인지, os는

어느 버전 이상인지 고려해야 한다.

 

모든 버전을 맞추기는 어렵고

제작 전 클라이언트나 기획자 또는

다른 파트의 사람들과 함께 결정을 해야 한다.

 

아이폰 6이상, 안드로이드 젤리빈 아이스크림 이상이라던지

모든 사용자를 고려해 만들면 좋겠지만 현실적으로는 힘들어

대부분 사용자가 많은 특정 버전, 특정 기기 이상에서만

지원하는 쪽으로 결정을 한다.

 

 

 

 

 

5. fixed 가 아닌 유동형 레이아웃으로 제작

 

유동형 100% 나 가변형 타입으로 제작하여

모든 화면에 꽉 찬 디스플레이가 나와야 한다.

 

안드로이드 폰의 경우 세로형도 있지만

포트레이트 같은 가로형도 있고

포트레이트 같은 세로형도 있지만

가로형 같은 랜드스케이프 형도 있다.

 

 

 

 

 

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

 

정말 중요한 부분이란다.

 

 

---

 

 

모바일 웹 페이지

카피 연습을 위한

초반 체크 사항

 

 

 

 

1. 대상 페이지를 캡쳐한다.

 

 

 

2. 캡쳐 혹은 복사본 사이즈가 어떻든

모바일 사이트의 가로 사이즈는 640px!

포토샵으로 가지고 온뒤 이미지 사이즈

설정의 가로값을 640으로 해준다.

 

 

 

3. 모바일 사이트는 아이콘을 많이 쓴다.

대부분 투명 이미지 아이콘, png 아이콘이

많이 필요하게 된다.

 

보통 이미지를 잘라서 사용을 할 수 있고

딩뱃(dingbat) 이라 하는 웹 폰트를

찾아 사용 할 수 있다. 또 ai,

일러스트 원본 파일을 무료로 다운받아

사용하거나 직접 제작해 사용하는

총 4가지의 방법이 있다.

 

 

 

4. 코딩 시작