반응형 구현 시 사이즈 기준 + 모바일 퍼스트 기법

미디어쿼리 범용적인 사이즈 기준점(break point)

스마트폰 320~767 / 태블릿 768~1023 / 데스크탑 1024~

 

 

 

 

Min-width와 Max-width (맨날헷갈림...)

(Max-width : 768px) = “최대너비768일 때까지 아래 내용을 적용해라”

(Min-width : 481px) = “최소너비 481부터 아래 내용을 적용해라”

 

작은 화면에서 큰 화면으로 조절해 나갈때는 min-width

큰 화면에서 작은 화면으로 조절해 나갈때는 max-width를 사용

 

 

 

모바일퍼스트(mobile first) 기법이란?

처음 웹 어플리케이션을 구축하는 단계에서부터 모바일 중심으로 구축하는 것을 의미

*데스크톱이나 타 기기를 위해서는 그에 맞는 반응형/적응형 웹을 제공

불필요한 요소를 최소화 시킨 모바일 웹은 사이트가 진짜로 제공해야 할 내용과 기능이 무엇인지 나타낸다.

 

 

모바일퍼스트 기법을 사용하는 이유

모바일 앱을 데스크톱으로 확장하는 것은 쉽지만, 데스크톱 앱을 모바일로 간추리는 것은 어렵기 때문.

데스크톱 기준으로 빽빽하게 작성된 웹 페이지는 모바일로 옮기는 것이 사실상 불가능하다.

반대로, 모바일 기준으로 느슨하게 작성된 웹 페이지는 데스크톱으로 충분히 쉽게 옮길 수 있다.

 

 

장점

1. 모바일 사용자 경험에 최적화되어 있음

2. 웹사이트와 앱에 필수적인 요소만 남기도록 만듦

3. 더 작고, 빠르고, 효율적인 서비스를 탄생시킴

4. 눈에보이는 미적인 디자인보다 컨텐츠를 우선적으로 생각하게 됨

 

 

단점

1. 데스크탑 버전이 휑하고 단순하게 보일 수 있음

2. 개발하는데 있어서 더 어렵고 덜 직관적으로 느껴짐

3. 창의성에 제약을 받을 수 있음

4. 클라이언트는 데스크탑 버전의 프로토타입을 보길 원할 수 있음