퍼블리싱 준비 가이드: 반응형 vs 적응형

반응형 웹 vs 적응형 웹

반응형 웹이란?

• 웹 페이지의 디자인과 레이아웃이 모든 화면 크기에 자동으로 맞춰진다

• 한 가지 웹 사이트로 다양한 종류의 기기에 최적화된 화면을 보여주는 방식

• CSS 미디어 쿼리(맞춤형 스타일 시트)를 사용해서, 사용자가 최종적으로 사용하는 기기를 감지, 화면 크기에 맞게 UI 템플릿을 변형

/* Desktop */
@media only screen and (min-width: 1021px) {
}

/* Tablet */
@media only screen and (min-width: 768px) and (max-width: 1020px) {
}

/* Mobile */
@media only screen and (max-width: 767px) {
}

특징

• 웹 개발 과정 간편

• 단 하나의 기기만으로 접속하더라도, 모든 기기를 위한 CSS를 전부 다운로드해야 함

  => 데이터 소모량이 높고 로딩 속도가 느림

주의할 점

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

• 자바스크립트 코드도 디바이스 크기별 분리 적용이 가능하다

var mq = window.matchMedia( "(max-width: 570px)" );
  if (mq.matches) {
      // window width is at less than 570px
  }
else {
    // window width is greater than 570px
}

• 화면 설계시 상단 주소창, 하단 툴바 영역 높이까지 고려하기

  • Safari는 툴바 뒤의 영역까지 viewport 영역으로 계산하기 때문에 100vh도 하단이 짤림

• 스켈레톤UI/디폴트 상태 UI를 미리 요청하자

  • 디폴트 상태 UI 예시: 검색값이 없을 때의 검색결과 페이지, 채팅 목록이 비었을 때의 채팅창 UI

적응형 웹이란?

• 웹페이지에서 감지한 기기를 기반으로, 미리 만들어진 정적인 레이아웃을 불러오는 방식

• 서버 또는 브라우저 기반의 기기 감지 방법을 사용해 각 기기에 적합한 UI 템플릿을 제공하는 방식

특징

• 웹 개발 과정 복잡

• 자신의 기기에 맞는 템플릿 및 CSS만 다운로드

  => 데이터는 적게 쓰고 로딩 속도가 빠름