반응형 웹(Responsive Web)의 이해

반응형 웹(Responsive Web)의 이해

Responsive Web Design (pixabay)

*이 글은 무엇인가요?

  이 글은 반응형 웹에 대한 기본적인 이해, 반응형 웹을 적용하는 기준과 방법에 대한 간단한 예시를 다루는 글입니다.  

 

*이 글은 무엇이 아닌가요?

  이 글은 반응형 웹을 개발하기 위한 구체적인 코드 사례들을 소개하는 글이 아닙니다.

 

*목차

1. 반응형 웹이란?

2. 뷰포트(Viewport)

3. 미디어 쿼리(media-query)

4. 분기점(breakpoint)

5. 반응형 웹 디자인 9가지 기본 원칙

6. Mobile First vs Desktop First

7. 마무리

 

---

 

반응형 웹(Responsive Web)이란?

Responsive web design (FROONT)

  사용자의 디바이스나 사용자의 필요에 따라 화면의 크기가 자동으로 변하도록 만든 웹 페이지를 의미합니다. 반응형이라는 용어를 최초로 사용하기 시작한 것은 2010년의 에단 마르코트(Ethan Marcotte)였지만, 그 이전부터 반응형에 대한 개념은 정립되어 있었는데, 1994년에 출시된 넷스케이프 브라우저 시절, 윈도우 창의 크기를 조절할 때마다 서버로부터 페이지 데이터를 다시 받아와야했던 기능적 한계에서 비롯되었습니다. 시간을 가로질러, 현재는 스크린 해상도 크기에 따라 특정 스타일을 적용하도록 분기 처리를 해주는 media-query라는 모듈을 통해 많은 개발자들이 보다 쉽게 반응형 웹을 구현할 수 있게 되었습니다. 

 

  반응형 웹은 PC와 모바일 등 어떤 디바이스에서 접근하든 동일한 URL을 사용하기 때문에 검색 포털 등 사용자 접속을 효율적으로 관리할 수 있으며, 별도의 웹사이트를 제작하여 보여주는 적응형 웹(Adaptive Web)과 대조적으로 하나의 소스 코드로 관리할 수 있어 개발 유지 보수 비용의 절감 효과를 가져올 수 있는 장점이 있습니다. 또한, SEO에 유리하며, 다양한 디바이스가 출시되는 미래를 대비한 미래 지향적 기술로 볼 수 있습니다.

 

  반응형 웹의 특성을 요약하자면 다음과 같습니다.

 

  강점

  1) 간편한 유지보수  2) 유리한 마케팅  3) 검색엔진 최적화  4) 미래 지향적 기술

  약점

  1) 로딩 시간의 증가  2) 복잡한 콘텐츠에 적합하지 않음

 

 

뷰포트(Viewport)

  브라우저에서 뷰포트는 메뉴바, 탭 영역 등을 제외한 순수 화면의 크기를 의미합니다. 모바일 브라우저들은 viewport로 알려진 가상의 window상에 페이지를 렌더링 하는데, 디바이스 크기와, 각각의 브라우저 마다 계산되는 영역이 달라 같은 웹페이지라도 환경에 따라, 뷰포트는 매우 다양할 수 있습니다.

 

 

Layout viewport & Visual viewport (in mobile)

파란색이 layout viewport, 빨간색이 visual viewport

  Layout viewport는 브라우저가 웹 페이지를 그리는 영역으로, 고정된 화면이며, 현재 브라우저 창의 크기에 상관없이 해상도를 기준으로 글자의 크기나 기본 폰트 크기를 처리합니다. 레이아웃 뷰포트는 모바일에서 중요한 역할을 하는데, 사용자가 줌 인아웃 등의 행동을 할 때, 실제 레이아웃의 변화를 발생시키지 않고 비주얼 뷰포트만 변경시켜 화면이 확대, 축소되는 것을 가능하게 합니다. 반면, Visual viewport는 실제로 사용자에게 보이는 화면 영역을 의미합니다.

 

  데스크탑이나 노트북 화면에서 visual viewport는 작고, layout viewport는 크기 때문에 화면은 모니터의 해상도를 크기의 기준으로 잡습니다. 모바일 화면에서는 해상도가 800*400인 안드로이드 기기의 브라우저의 경우, 기본 뷰포트 크기가 900px이므로 800이 아닌 해상도 900px인 노트북에서 보는 듯한 크기로 모든 것을 조정하게 됩니다. 따라서, 웹을 사용하는 다양한 환경에 각각 원치 않은 화면 출력이 발생하는 것을 방지하기 위해서는 HTML의 <meta> 태그를 이용하여 뷰포트 크기를 따로 설정해주는 것이 좋습니다.

 

 

 

viewport 설정 방법

 

name="viewport"인 meta 태그 content 속성

HTML 내 <meta> 태그를 사용하여 viewport 정보를 브라우저에 전달하도록 합니다. (데스크탑에서는 무시됨)

<meta name="viewport" content="width=device-width, initial-scale=1.0"/>

content="user-scalable=no" 설정은 사용자의 줌인, 줌아웃을 막는 상태로, 웹 접근성 평가 시 warning message를 받을 수 있습니다.

 

자, 이제 우리는 viewport의 크기에 따라 다른 css를 적용할 수 있게 되었습니다. 다음은 우리가 원하는 크기에 원하는 레이아웃이 출력되도록 설정해보겠습니다.

 

미디어 쿼리(media-query)

  미디어 쿼리는 사이트에 접속하는 장치에 따라 특정한 CSS 스타일을 사용하도록 도와주는 소프트웨어 모듈입니다. viewport 설정으로 다양한 디바이스의 크기를 파악하고, CSS 코드 내 미디어쿼리로 분기점을 나누어 스타일을 정의하는 것이 일반적인 반응형 웹 적용 방법입니다. 미디어 쿼리의 유형과 논리 연산자에 대한 자세한 내용은 MDN을 참고하시는 것을 추천드립니다.

/* viewport의 크기가 200px ~ 480px 사이에 있을 때, body의 배경색이 red로 바뀐다. */
/* min은 초과, max는 이하로 동작한다*/
@media screen and (min-width: 200px) and (max-width: 480px) {
  body{
  	background-color: red;
  }
}


/* 최신 브라우저에서는 범위 기능을 사용할 수 있다.*/
@media (200px < width <= 480px ) { 
  body{
  	background-color: red;
  }
}

 

 

분기점(breakpoint)

Remain Style Guide의 breakpoint 예시

  breakpoint는 미디어 쿼리를 통해 레이아웃을 변경시킬 화면 크기 지점을 의미합니다. 일반적으로 Mobile, Tablet, Desktop 3가지로 구분하지만, 크기와 해상도가 다른 디바이스가 상당히 많기 때문에 디자인 및 개발을 진행하기 전에 서비스의 특징이나 사용자에 맞춰 적절한 breakpoint를 미리 결정하고 작업하는 것이 좋습니다.

 

 

2021년 9월 기준 디바이스 screen 크기 사용 비율 (전 세계)

 

 

  한 가지 주의할 점으로, 몇 년 전까지만해도 모바일 최대 가로 너비가 480px 정도면 충분히 대응 가능했다면, 최근 출시한 갤럭시 Z flip 3의 최대 해상도는 2640x1080, 최소 해상도는 260*512로 대응해야할 viewport의 범위가 전보다 확대된 것을 알 수 있습니다. 데스크탑보다 모바일 디바이스의 크기가 상대적으로 훨씬 다양하고 계속해서 변화하고 있는 상황이라는 것을 알고 있어야하며, breakpoint를 선택하고 또 디자인을 결정할 때 변화 가능성에 대해 예측하고 수용할 수 있는 범위로 작업을 진행하는 것이 유지보수성을 높이는 길이 될 것입니다. 경우에 따라 원하는 디자인을 포기해야하는 경우도 있습니다. 그 때가 바로, 개발자와 디자이너의 소통이 절실한 순간이 아닌가 싶습니다.

 

 

/* 분기점 예시 : mobile(~600px), tablet(600px ~ 1024px), desktop(1024px ~ ) */

/* 모바일 */
@media screen and (max-width: 600px) {
  body{
  	background-color: red;
  }
}

/* 태블릿 */
@media screen and (min-width: 600px) and (max-width: 1024px) {
  body{
  	background-color: blue;
  }
}

/* 데스크탑 */
@media screen and (min-width: 1024px) {
  body{
  	background-color: yellow;
  }
}

 

각 분기점을 기준으로 다른 스타일이 적용된다

 

 

 

 

반응형 웹 디자인 9가지 기본 원칙 

  다음은 2014년에 Sandijs Ruluks라는 웹 디자이너가 작성한 [9 basic principles of responsive web design] 의 내용입니다. 굳이 따지자면, 원칙이라기 보다는 반응형 웹을 디자인할 때 고려해야할 점에 가깝고, 반응형 웹 디자인과 관련된 내용으로 참고하시는 것을 추천드립니다.

9 basic principles of responsive web design

 1. 반응형(Responsive) vs 적응형(Adaptive)

   - 반응형 웹과 적응형 웹의 디자인은 비슷하지만 차이가 있으니 적절한 선택을 해야합니다.

 2. 흐름(The Flow) 

  - 화면 크기에 따라 공간의 변화가 생겨 아래의 내용이 푸쉬 다운 되는 것을 의미.

 3. 상대 단위(Relative units) 

  - 화면 너비나 픽셀 밀도의 환경이 다양할 수 있으므로 모든 곳에서 작동하는 장치가 필요합니다.

  - %와 같은 상대적 단위가 px 같은 절대적 단위보다 유용할 것입니다.

 4. 중단점(breakpoint)

  - 브레이크포인트를 사용하면 레이아웃을 미리 정의 된 지점에서 변경할 수 있습니다.

 5. 최대,최소 값 

  - max-width, min-width 같은 최대 최소 값을 통해 콘텐츠의 너비를 통제할 수 있습니다.

  - 콘텐츠를 유연하지만 적절한 크기 범위 내에서 제공하고 싶을 때 사용할 수 있습니다.

 6. 중첩된 객체(Nested Objects)

  - 중첩을 통해 크기 변경이 필요 없는 여러 요소들을 묶어서 관리할 수 있습니다.

 7. mobile or Desktop 우선

  - 큰 차이는 없으나 모바일 우선으로 디자인한 후 데스크탑 작업을 하는 것이 미리 제한 사항을 파악할 수 있어 의사결정에 도움이 됩니다.

 8. 웹 폰트 vs 시스템 폰트

  - 웹 폰트 사용은 다운 시간이 오래 걸리는 반면, 시스템 글꼴은 매우 빠릅니다.

 9. 비트맵 이미지 vs 벡터 이미지

  - 사진과 같은 화려한 이미지는 비트맵이 유리하지만, 단순한 이미지는 벡터 이미지를 권장합니다. 적절한 선택을 하는 기준을 세워 작업하세요.

 

 

---

모바일 우선 vs 데스크탑 우선

 

Mobile First

  2009년, Luke Wroblewski라는 사람이 모바일의 중요성을 강조하는 글을 올리며 [모바일 퍼스트]라는 용어가 사용되기 시작했는데, [모바일 퍼스트]는 데스크탑보다 모바일을 더 먼저 고려하고, 데스크탑은 그 다음으로 고려해야 한다는 것을 의미합니다.

 

전 세계 디바이스별 웹 브라우저 점유율 비교 (2010 ~ 2021)

대한민국 디바이스별 웹 브라우저 점유율 비교 (2010 ~ 2021)

 

  대한민국을 포함하여 전 세계적으로 모바일의 시장 점유율이 계속해서 증가하고 있는 것을 넘어 데스크탑의 점유율을 이미 넘어선 상태입니다. 모바일 시대는 더 이상 미래가 아닌 현재의 핵심이며, 많은 기업들이 모바일 퍼스트 혹은 모바일 온리 전략을 활용하고 있습니다.

 

  모바일 화면은 데스크탑보다 화면의 크기가 작기 때문에 레이아웃이나 디자인의 제약이 상대적으로 많은 편입니다. 콘텐츠의 중요도에 따라 크기를 결정하기도 하고, 세부적인 디자인이 달라지기도 하기 때문에 [모바일 작업을 먼저 수행하고 데스크탑 화면에 대응하는 것]이 [데스크탑 작업 후 모바일에 대응하는 것]보다 유지 보수성 측면에서 보다 효율적일 수 있습니다. 실제로 저 또한 프로젝트 진행 중 데스크탑 화면 작업을 하고 나서 모바일 화면 작업을 하려고 했을 때, 적절한 모바일 레이아웃을 위해서 일부 데스크탑 레이아웃을 추가 수정해야하는 상황이 종종 발생하고는 했습니다. 따라서, 개발하는 서비스와 제공하는 콘텐츠의 특징을 잘 파악하여 적절한 방법의 작업 순서를 결정하는 것이 중요할 것입니다.

 

모바일을 우선 적용한 디자인의 장단점은 다음과 같습니다.

장점

1. 모바일 사용자 경험에 최적화
2. 웹사이트와 앱에 필수적인 요소만 남김
3. 눈에 보이는 미적인 디자인보다 컨텐츠를 우선
4. 더 작고, 빠르고, 효율적인 서비스를 탄생

단점

1. 데스크탑 버전이 더 간결하고 단순할 수 있음
2. 개발하는데 있어서 더 어렵고 덜 직관적
3. 창의성에 제약을 받을 수 있기 때문에, 다른 서비스와 두드러진 차이점을 보여주기 힘듦
4. 클라이언트가 데스크탑 버전의 프로토타입을 원할 수 있음

 

 

SEO, 모바일 퍼스트 인덱스(MFI, Mobile First Index)의 도입

 

  모바일 퍼스트 인덱스는 검색 엔진이 콘텐츠를 평가할 때, 데스크탑 사이트를 기준으로 인덱스하는 것이 아니라, 모바일 사이트를 기준으로 하는 것을 의미합니다. 모바일 디바이스를 사용한 구글 검색이 데스크탑 검색보다 더 많아진 것을 확인한 구글이 모바일 사용자에게 보다 나은 콘텐츠를 제공하기 위해 내린 결정입니다. 물론, 데스크탑 사이트만 갖고 있어도 인덱스가 되긴 하지만, 모바일 프랜들리에 어긋나기 때문에 검색 엔진 순위에는 악영향을 미칠 것입니다.

인덱스(Index)는 검색엔진이 내보낸 크롤러라는 일종의 프로그램이 페이지 내용을 읽고 판단하여 검색엔진 데이터 베이스에서 정리 / 등록한 상태

구글 검색 엔진의 모바일 퍼스트 인덱스로의 변화

 

 

---

 

마무리

  반응형 웹 디자인은 필수가 아닙니다. 카카오 브랜드의 온라인 매거진, 브런치는 데스트탑 웹, 모바일 웹, 모바일 앱 등 다양한 환경에서 사용 가능하지만, 웹의 경우 적응형 웹(Adaptive web)으로 구현되어 있습니다. 그리고 NAVER 홈페이지 또한 적응형 웹으로 구현되어 있습니다. 물론, 브런치의 경우 모바일에서 접근할 시 앱 설치를 유도하는 것이 목적이기 때문에 페이지 자체의 용도가 변경되기 때문일 것이고, NAVER는 페이지 내에서 사용되는 콘텐츠가 상당히 복잡하기 때문에 반응형으로 제작하는 것이 더 큰 비용이 들기 때문일 것입니다. 반응형 웹을 고려할 때 가장 중요한 것은, 서비스 특성에 적합한 전략과 대응 방식을 선택하는 것이 아닐까 싶습니다. 상당히 기획에 가까운 부분이고, 비즈니스, 디자인, 개발 등 다양한 관점에서 실리를 따질 필요가 있는 부분이기 때문에 여러 서비스들의 선택을 충분히 관찰하고, 또 경험해보는 것이 필요하다는 생각이 듭니다.

 

 

 

 

 

---

참고자료

https://m.post.naver.com/viewer/postView.nhn?volumeNo=27162241&memberNo=2521903 

반응형 웹의 개념과 역사

https://brunch.co.kr/@presscat/28

웹 브라우저 시장 점유율 현황 (2020년 최신)

https://www.beusable.net/blog/?p=2328 

구글의 모바일 퍼스트 인덱스(MFI)의 모든 것 | 뷰저블

https://developer.mozilla.org/en-US/docs/Glossary/Viewport

Viewport - MDN Web Docs Glossary: Definitions of Web-related terms | MDN

https://bokand.github.io/viewport/index.html

https://bokand.github.io/viewport/index.html

https://developer.mozilla.org/ko/docs/Web/CSS/Media_Queries/

미디어 쿼리 사용하기 - CSS: Cascading Style Sheets | MDN

https://blog.froont.com/9-basic-principles-of-responsive-web-design/

9 basic principles of responsive web design