[디자이너 & 퍼블리셔를 위한 가이드 #3] 적응형과 반응형 결정하기. 브레이크포인트 정하기. 반응형홈페이지란

일반적으로는 적응형/반응형 여부는 프로젝트 세팅 단계에서 정하고 시작한다.
관리자페이지 처럼 넓은 화면에서 봐야 유용한 웹 같은 경우에는 반응형보다는 적응형으로 가는 편이다.
모바일웹(웹앱)의 작업 여부는 어떻게 되는지도 확인하자.

 

적응형, 그리고 반응형 웹이란?

적응형이란 모든 디바이스에 균일하게 보이도록 최소 너비를 고정으로 가져가는 방법이고,
반응형이란 디바이스의 폭에 따라 화면이 상이하게 보이는 것이라고 이해하면 쉽다.

 

적응형 예시)

잡코리아 https://www.jobkorea.co.kr/
잡다 https://www.jobda.im/

모바일 화면을 디자인 할때, 스테이터스바와 툴바영역높이를 포함하여 디자인한다. 브라우저 마다 다르게 하단에 띄워주는 플로팅바도 고려하는것이 좋다.

특히 사파리에서는 Viewport 영역이 툴바 뒤까지 포함이기 때문에, 100vh(높이를 화면크기만큼 지정하겠다)를 사용할 경우 하단이 짤리는 현상, 혹은 화면이 꽉 차있지 않아도 약간의 스크롤바가 생기는 현상이 발생한다.

이를 해결하기 위한 라이브러리들이 있고, 라이브러리를 사용하지않아도 퍼블리싱 선에서 대비가 가능하다. 따라서 검수때 화면에 컨텐츠가 부족함에도 스크롤이 발생한다면 이 부분을 체크해 보는것이 좋다.

최대 최소 사이즈와 브레이크포인트를 결정하자. 

ex) 최소사이즈는 1340x720이며 적응형으로 작업해야 합니다.
ex) 540/1200 으로 브레이크포인트를 잡는건 어떨까요? 

= 540 이하는 모바일, 540~1200 사이는 태블릿, 1200 이상은 PC로 간주하는 경우이다.


미디어쿼리 적용 순서는 어느화면을 기준으로 하느냐에 따라 결정된다. 
일반적으로는 PC > Mobile 순으로 미디어쿼리를 적용했으나, 최근에는 모바일 기기 사용자가 증가함에 따라 Mobile > PC 순으로 작업을 하는 추세이다. 어느순서로 해도 사실 상관은 없다. 다만 모바일퍼스트 디자인을 해야 작업하는데 상대적으로 수월하다.

작은 화면 to 큰 화면은 min-width를 사용하고, 큰 화면 to 작은 화면은 max-width를 사용한다. 
또한 디바이스별로 별도의 Breakpoint를 설정하는 방법은 좋지 않다. 내 디자인 레이아웃에 맞춰 설정하는것이 가장 좋은 방법이며, 주로 디자이너와 기획자가 협의하여 정한다.