반응형 웹(feat.미디어 쿼리) / 적응형 웹

반응형 웹 (Responsive Web)

하나의 웹사이트에서 PC, 스마트폰, 태블릿 PC 등 접속하는 디스플레이의 종류에 따라 화면의 크기가 자동으로 변하도록 만든 웹페이지입니다. 같은 페이지 리소스를 가져와도 해당 페이지 크기에 따라서 다르게 보입니다.

하나의 템플릿이 핵심, 개발자는 기기마다 따로 코드를 개발, 관리하지 않아도 됩니다.

페이지 좁을때

페이지 넓을때

■ 모바일 퍼스트

웹 디자인을 할때, PC보다 모바일 기기를 먼저 생각해서 디자인하고 프로그래밍 하는 기법입니다. 모바일의 제약을 [ 1. 모바일 기기의 스크린 크기 2. 네트워크 속도 및 품질 3. 사용하는 모드 ] 총 3개로 인식하고, 불필요한 요소를 최소화 시켜 사용하기 편한 웹을 제공합니다.

고사양 웹이 저사양 모바일 기기에서도 불편함 없이 구현 되는데 초점이 맞춰져 있습니다.

■ 미디어쿼리

장치에 따라 각기 다른 레이아웃을 작성하거나, 미디어 종류에 따른 CSS 코드를 작성하는 반응형 웹페이지를 만들때 사용하는 구문입니다.

1) Initializing Media Queries

기존의 스타일 시트에 @media 룰을 사용하고 @import 룰을 사용하여 새로운 스타일 시트를 들여오거나, HTML 문서 안에서 별도의 스타일을 링크하는 것 입니다.

/* @media Rule */ 
@media all and (max-width: 1024px) { ... } 
/* @import Rule */ 
@import url(styles.css) all and (max-width: 1024px) { ... }

<!-- Separate CSS File --> 
<link href="styles.css" rel="stylesheet" media="all and (max-width: 1024px)">

일반적인 미디어 타입은 all, screen, print, tv, braille 을 포함합니다. default는 screen 입니다.

2) Logical Operators in Media Queries

미디어 쿼리에서 and, not, only 세 개의 논리연산자를 사용할 수 있습니다.

• and

추가적인 조건을 쓸 수 있습니다. 여러 개의 개별 미디어 쿼리는 콤마로 분리될 수 있으며 암묵적인 or 연산자처럼 동작하게 됩니다.

아래 예는 800과 1024 픽셀 너비의 모든 미디어 타입을 선택하는 쿼리입니다.

@media all and (min-width: 800px) and (max-width: 1024px) {
    ... 
}

• not

아래 예는 흑백이나 모노 스크린에 적용되는 쿼리입니다.

@media not screen and (color) { 
    ... 
}

• only

아래 표현식은 세로 편향인 스크린만을 선택합니다.

@media only screen and (orientation: portrait) {
    ... 
}

※ not 과 only 논리 연산자를 사용할 때 default 미디어 타입은 all 입니다.

적응형 웹 (Adaptive web)

서버사이드에서 클라이언트의 정보를 미리 받아 해당 조건별로 정해진 화면을 보여줍니다. 즉, 클라이언트가 모바일인지 웹인지를 파악해서 리소스를 선택하고 그에 맞는 화면을 나타내주는 형태입니다.

주소창에 "www.naver.com" 이라고 입력해도 모바일 브라우저로 접근하면 "m.naver.com"로 전환되고, 렌더링 하는 리소스들도 전혀 다릅니다.

하나의 템플릿으로 만드는 반응형 웹과는 반대로, 선별된 기기 유형에 따라 별도의 독립적인 템플릿이 요구됩니다.

■ Where ?

1. 오래전 구축된 레거시 시스템 : 콘텐츠 재배치 만으로 모바일 시스템을 구축하는 것이 힘들 경우

2. 특정 목적성을 띤 시스템 : 택배, A/S 기사 앱 처럼 본인이 활용하는 디바이스에 최적화된 시스템이 필요할 경우

3. 유지보수 편의를 우선시하는 시스템 : 오랜 유지보수 기간동안 비즈니스 로직이 달라질 수 있으며, 그에 따라 화면이 변경될 수 있으므로 적응형 웹으로 구축한다.

www.naver.com 

  

m.naver.com

적응형 웹 vs 반응형 웹

Reference

CSS:반응형 웹 : http://www.nextree.co.kr/p8622/

반응형웹 적용하기 : https://webclub.tistory.com/365

반응형웹과 적응형웹의 차이점 : https://hashcode.co.kr/questions/5857/%EA%B0%95%EC%9D%98-3-7-%EB%B0%98%EC%9D%91%ED%98%95%EC%9B%B9%EA%B3%BC-%EC%A0%81%EC%9D%91%ED%98%95%EC%9B%B9%EC%9D%98-%EC%B0%A8%EC%9D%B4%EC%A0%90%EC%9D%80-%EB%AC%B4%EC%97%87%EC%9D%B4-%EC%9E%88%EB%82%98%EC%9A%94