2024/06/21 반응형 웹

반응형 웹

디바이스와 화면 크기에 맞추어 웹 페이지의 레이아웃, 콘텐츠, 기능 등을
자동으로 조정

---

특징

유연한 레이아웃

• 화면 크기에 따라 레이아웃이 유연하게 변경.
  그리드 시스템, 유동적인 이미지와 미디어, 유동적인 폰트 크기 등을 활용.

미디어 쿼리

• CSS 미디어 쿼리를 사용하여 화면 크기에 따른 스타일 변경을 처리가능.
  다양한 디바이스의 화면 크기와 해상도에 맞춰 최적화된 스타일을 적용할 수 있음

콘텐츠 최적화

• 화면 크기에 따라 콘텐츠의 양과 형식을 최적화.
  모바일 기기에 맞춰 이미지 크기를 줄이거나 텍스트 내용을 축약하는 등의 작업 필요

---

리액트에서의 반응형 웹

컴포넌트 기반 구조

• 리액트는 재사용 가능한 UI 컴포넌트를 기반으로 웹 애플리케이션을 구축.
  각 컴포넌트는 자체적인 상태와 렌더링 로직을 가지고 있어, 화면 크기 변화에 따른 UI 변경을 쉽게 처리가능

가상 DOM(Virtual DOM)

• 리액트는 가상 DOM을 사용하여 효율적인 UI 업데이트를 제공.
  가상 DOM을 통해 실제 DOM 업데이트를 최소화하여 성능향상.

반응형 디자인 지원

• 미디어 쿼리, 뷰포트 설정 등을 통해 반응형 디자인을 쉽게 구현할 수 있음.
  컴포넌트 내에서 화면 크기에 따른 UI 변경 가능.

상태 관리

• 리액트의 상태 관리 기능을 활용하여 화면 크기 변화에 따른 UI 업데이트를 쉽게 처리할 수 있음
  상태 변화에 따른 컴포넌트 재렌더링을 통해 반응형 동작을 구현.

---

반응형 웹 vs 적응형 웹

레이아웃 변화 방식

• 반응형 웹
  유동적인 그리드 시스템, 유동적인 이미지/미디어, 유동적인 폰트 크기 등을 사용.
  화면 크기에 따라 레이아웃이 연속적으로 변화.
• 적응형 웹
  미리 정의된 화면 크기 범주(예: 모바일, 태블릿, 데스크톱)에 맞춰 레이아웃을 변경.
  각 범주에 맞는 고정된 레이아웃을 사용.

콘텐츠 최적화

• 반응형 웹
  화면 크기에 따라 콘텐츠의 양과 형식을 유동적으로 최적화.
• 적응형
  웹 화면 크기 범주에 맞춰 미리 준비된 콘텐츠를 선택적으로 제공.

구현 방식

• 반응형 웹
  CSS 미디어 쿼리를 사용하여 화면 크기에 따른 스타일 변경을 처리.
• 적응형 웹
  서버 측에서 사용자 에이전트 정보를 확인하고, 그에 맞는 HTML/CSS/JS를 제공.

유연성

• 반응형 웹
  화면 크기 변화에 따라 연속적으로 레이아웃과 콘텐츠가 변경되어
  더 유연한 사용자 경험을 제공.
• 적응형 웹
  미리 정의된 화면 크기 범주에 맞춰 변경되므로,
  중간 크기의 화면에서는 최적화된 경험을 제공하지 못할 수 있음.