위로
아래
반응형 웹
특징
- 웹페이지의 디자인과 레이아웃이 화면 크기에 자동으로 맞춰진다.
- CSS 미디어 쿼리(맞춤형 스타일 시트)로 사용자의 기기 특성을 검사하고 그 내용을 바탕으로 자체적으로 렌더링
- 구성요소들의 위치가 PC나 모바일이나 비슷하다.
장점
- 모든 플랫폼에서 일관된 콘텐츠 경험
- 보편적이지 않은 화면 크기의 새로운 기기에서도 작동 가능
단점
- 각 기기마다 브라우저가 렌더링되는 방식에 대한 통제가 어려움
- 요소가 잘못된 순서나 크기로 배치될 경우 설계된 디자인에 어긋남
- 스크린 크기가 조금 달라져도 디자인 배치가 괜찮도록 하기 위해선 더 많은 디자인 조정과 테스트를 요구함
- 동적 콘텐츠를 불러오는데 더 많은 작업이 요구되어 웹사이트 성능이 저하됨
반응형 웹 만드는 방법
- CSS 미디어 쿼리
- 미디어쿼리 : 화면 종류와 크기에 따라 디자인을 달리주는 CSS3 기술. 뷰포트(viewport)도 설정해주어야 한다.
- 부트스트랩 프레임워크
- 부트스트랩 : 반응형 웹사이트를 만들기 위한 HTML, CSS, JavaScript 프레임워크
적응형 웹
특징
- 웹페이지에서 감지된 기기를 기반으로 미리 만들어진 정적인 레이아웃을 불러온다.
- 디자이너가 기기별 스크린 너비 크기에 맞춰 별도로 여러 번 디자인 작업을 해야한다
- 모바일이나 PC 등 화면 크기에 따라 구성 요소가 바뀔 수 있다.
- pc 스크린 크기에 맞게 디자인된 요소들을 작은 모바일 화면에 억지로 구겨넣지 않아도 된다.
장점
- 각 플랫폼 및 상황과 맥락(pc이용, 태블릿 이용, 모바일 이용 등)마다 완벽하게 대응할 수 있다
- 광고나 타사 콘텐츠에 맞추기 간편하다.
단점
- 개별 페이지 취급을 받아 SEO에 부정적 영향을 미친다
모바일 퍼스트 전략
모바일 퍼스트 전략(Mobile First Strategy)
최소단위인 모바일을 기준으로 웹을 디자인하고, 그것을 태블릿, 데스크톱 순으로 점차 큰 해상도의 웹페이지로 변형하는 방법. 레이아웃 단순화가 핵심이고, 레이아웃 안의 콘텐츠는 일관되어야 한다.