이번 토이 프로젝트의 화면에서 반응형 웹을 적용해보면 좋을 것 같아서 급하게 반응형 웹 적용방법을 찾아보고 있다.
반응형 웹 VS 적응형 웹
일단 반응형 웹의 정확한 정의가 궁금하여 찾아보았다.
반응형 웹 디자인
감지된 화면 크기에 따라 자동으로 페이지가 재배열되는 유동적인 접근 방식.
반응형 웹 디자인을 사용하면 웹 페이지의 디자인과 레이아웃이 모든 화면 크기에 자동으로 맞춰 화면 표출.
CSS 미디어 쿼리(맞춤형 스타일 시트)를 이용해 사용자가 사용하는 기기의 특성을 검사하여 웹사이트에서 자체 렌더링.
적응형 웹 디자인
브라우저가 주어진 플랫폼에 맞춰 특별히 생성된 레이아웃을 불러오는 웹 디자인 유형
정적인 레이아웃을 불러오기 때문에 디자이너가 다양한 화면 너비에 맞춰 별도로 디자인 작업을 수행하야 한다는 불편함 존재.
각 디자인 방식은 장점과 단점이 확실히 존재했다.
반응형 웹 디자인의 장단점
장점
- 모든 플랫폼에서 일관된 콘텐츠 경험
- 보편적이지 않은 화면 크기의 새로운 기기에서도 작동 가능
단점
- 각 기기에서 웹사이트가 렌더링 되는 방식에 대한 통제가 상대적으로 어려움
- 요소가 잘못된 순서 또는 크기로 재배치되는 경우, 시각적 계층 구조를 방해함
- 디자인에 대한 더 많은 전문 지식이 필요함. 플랫폼 간 테스트 및 디자인 조정을 요함
- 동적 컨텐츠를 불러오는 데 더 많은 작업이 요구되어 웹사이트 성능 저하
적응형 웹 디자인의 장단점
장점
- 각 플랫폼 및 상황과 맥락에 맞춰 제공되는 완벽한 맞춤화된 경험
- 원하는 기기에 맞게 최적화된 디자인을 할 수 있는 고성능 작업 수행
- 광고 및 타사의 통합 콘텐츠에 대한 간편한 맞춤화
단점
- 콘텐츠가 모든 기기에서 일관되지 않을 경우 SEO에 부정적인 영향을 미침
개인적인 생각으로는 밑줄 그은 사항들때문에 최근에 특히 반응형 웹에 대한 수요가 많아지지 않았나 추측해본다.
출처
https://ko.wix.com/blog/post/responsive-vs-adaptive-design
반응형 웹 디자인 vs 적응형 웹 디자인: 어떤 유형을 선택해야 할까?
시작하기: 웹사이트 제작 → | 도메인 등록하기 →2022년 현재 소비자들은 노트북이나 데스크톱 컴퓨터보다 모바일 기기을 통해 웹사이트를 방문할 가능성이 더 높습니다. 즉, 이제 비즈니스 측
ko.wix.com
'프론트엔드 > CSS & HTML' 카테고리의 다른 글
| 반응형 웹 적용기 : 3. 디바이스별 CSS 입히기 (2) | 2024.06.16 |
|---|---|
| 반응형 웹 적용기 : 2. 반응형을 적용할 디바이스 해상도 확인하기 (1) | 2024.06.15 |