반응형 디자인 구현

반응형 디자인의 장단점

 

장점:

• 모든 플랫폼에서 일관된 콘텐츠 경험
• 보편적이지 않은 화면 크기의 새로운 기기에서도 작동 가능

단점:

 

• 각 기기에서 웹사이트가 렌더링되는 방식에 대한 통제가 상대적으로 어려움
• 요소가 잘못된 순서 또는 크기로 재배치되는 경우 시각적 계층 구조를 방해함
• 디자인에 대한 더 많은 전문 지식이 필요함. 플랫폼 간 테스트 및 디자인 조정을 요함
• 동적 콘텐츠를 불러오는 데 더 많은 작업이 요구되어 웹사이트 성능이 저하됨

 

적응형 디자인의 장단점

 

장점:

 

• 각 플랫폼 및 상황과 맥락에 맞춰 제공되는 완벽한 맞춤화된 경험
• 원하는 기기에 맞게 최적화된 디자인을 할 수 있는 고성능 작업 수행
• 광고 및 타사의 통합 콘텐츠에 대한 간편한 맞춤화

단점:

 

• 콘텐츠가 모든 기기에서 일관되지 않을 경우 SEO에 부정적인 영향을 미침

 

2. 미디어 쿼리

미디어 쿼리는 반응형을 위한 기본이자 핵심입니다.

잘 활용하면 어떤 디바이스에서도 예쁜 웹 페이지를 만들 수 있어요.

	
.title {
  font-size: 40px;
}
 
@media (max-width: 600px) {
  .title {
    font-size: 20px;
  }
}

media라는 키워드로 사용하며, 아래는 미디어 쿼리를 활용한 예시입니다.

타이틀의 텍스트 크기를 40px로 하되, 600px보다 작은 화면에서는 20px로 줄인다는 내용입니다.

그러니 모바일 시안을 받았다면, 분기점을 정한 뒤 시안의 사이즈에 맞춰 미디어 쿼리를 지정해 주면 됩니다.

(Zeplin 등으로 전달 받았다면 사이즈를 그대로 사용하시면 돼요.

다만, PSD의 경우 이미지 사이즈 때문에 2배 사이즈로 받는 경우가 있기에 나누기 2만큼의 값을 지정해 줍니다.)

 

 

미디어쿼리 적용

미디어 쿼리를 적용하는 법은 간단합니다.

 

1) CSS 파일 내에 직접 작성하거나

@media (min-width:768px) {}

 

2) <link> 태그에 media 속성을 설정해 사용합니다

<link rel="stylesheet" media="all and (min-width:1200px)" href="desktop.css" >
<link rel="stylesheet" media="all and (min-width:768px) and (max-width:1199px)" href="laptop.css" >​

 

하지만 대부분의 경우 첫 번째 방법을 써요!

왜냐하면 두 번째 방법처럼 CSS를 분리해 두더라도, 브라우저는 '에라 모르겠다'며 일단 모든 CSS 파일을 다운로드하기 때문입니다.

HTTP 요청이 많아지면 성능이 그만큼 저하되므로, CSS 파일 내에서 @media로 분리하는 것을 추천합니다.

 

구문

미디어 쿼리 구문은 '미디어 유형 / 논리 연산자 / 특성'으로 이루어지며 대소문자를 구분하지 않습니다.

 

미디어 유형

all	모든 디바이스 대상
print	인쇄 결과물 및 인쇄 미리보기 문서
screen	화면 대상

@media screen {}을 쓰면, 스크린이 있는 디바이스에서만 적용이 됩니다.

이외에도 여러 유형이 있지만 제일 많이 쓰는 건 all과 screen이에요.

유형을 지정하지 않는 경우엔 디폴트인 all이 지정됩니다.

 

논리 연산자

and	모든 쿼리가 참이여야 적용
not	모든 쿼리가 거짓이여야 적용
, (comma)	어느 하나라도 참이면 적용 (or에 해당)
only	미디어쿼리를 지원하는 브라우저만 적용

여기서 only라는 생소한 키워드가 나왔네요!

@media only screen {}을 사용하면 미디어쿼리를 지원하지 않는 브라우저(IE8 이하)에서는 해당 스타일을 무시합니다.

더 정확히 얘기하자면, 미디어쿼리를 지원하는 브라우저는 only 키워드를 만나면 무시하고 그대로 읽어들입니다.

반면에 지원하지 않는 브라우저는 only라는 이름의 미디어 유형이 있다고 생각합니다.

하지만 only라고 정의된 미디어 종류는 없기 때문에, 결국 아무것도 적용되지 않는 거죠.

 

특성

width	뷰포트 너비
height	뷰포트 높이
aspect-ratio	뷰포트 가로세로비
orientation	뷰포트 방향

orientation의 경우, 아쉽게도(?) 모바일 전용 속성이 아닙니다.

'가로가 세로보다 긴지' 또는 '세로가 가로보다 긴지'에 따라 가로 모드/세로 모드라고 판단합니다.

만약 모바일 환경에만 특정 CSS를 적용해야 한다면 User Agent를 판단 후 분기해야 합니다.

이런 식으로 유형, 연산자, 특성을 조합해 다양한 구문을 만들어 낼 수 있습니다.

@media all and (min-width:768px) and (max-width:1080px) {}
/* '모든 디바이스 & 최소 너비가 768 이상 & 최대 너비가 1080 이하'라는 조건을 모두 만족할 때 */

@media (min-height: 680px), screen and (orientation: portrait) { ... }
/* '최소 높이가 680 이상'이거나 '세로 모드의 스크린 기기' 중 하나를 만족하는 경우에 적용*/

 

미디어 쿼리의 스펙 문서를 살펴보면 이외에도 정말 많은 특성을 만나볼 수 있어요.

예를 들면, 미디어 쿼리 레벨 4 스펙에서 추가된 hover나 pointer등이 있습니다.

@media (hover: hover) and (pointer: fine) { }를 써서 마우스나 트랙패드가 있는 기기를 조건으로 하는 구문을 만들 수 있습니다.

하지만 최신 스펙에는 언제나 지원 브라우저가 제한되어 있다는 한계가 존재하죠 😕

 

실무에서는 특성에 주로 width 값을 사용합니다. 사실 이것만 써도 거의 커버할 수 있어요!