INTRO
지난 포스팅에서 CSS의 기본 개념과 문법에 대해 알아보았다.
이번에는 현대 웹 개발에서 필수가 된 반응형 웹 디자인(Responsive Web Design)에 대해 간단하게 정리해보자!
1. 반응형 웹이란?
반응형 웹은 하나의 웹사이트로 데스크톱, 태블릿, 모바일 등 다양한 디바이스에 대응할 수 있도록 만든 웹사이트를 의미한다.
최근 대부분의 사이트에서 동일한 사이트 URL로 접속하더라도 데스크톱으로 접속한 화면과 모바일로 접속한 웹 화면이 다른걸 의미한다.
그렇다면 왜 반응형 웹이 필요할까?
💡 반응형 웹이 필요한 이유
다양한 디바이스 환경
- 스마트폰, 태블릿 등 모바일 기기의 보급 확대
- 각기 다른 화면 크기와 해상도
- 세로 모드, 가로 모드 등 다양한 화면 방향
이러한 환경에서 일관된 사용자 경험을 제공하기 위해 반응형 웹이 필수가 되었다.
2. 반응형 웹의 핵심 요소
💡 Viewport 설정
뷰포트는 웹페이지가 표시되는 영역을 의미한다.
<meta name="viewport" content="width=device-width, initial-scale=1.0">이 설정이 없다면 모바일에서도 PC 버전 그대로 표시되어 가독성이 떨어진다.
💡 미디어 쿼리
화면 크기에 따라 다른 스타일을 적용할 수 있다.
이때, 우리가 일반적으로 보는 화면에 대한 반응형 디자인을 구현하기 위해서는 @Media screen이라는 태그를 사용해주면 된다.
이후, 아래 예시와 같은 방식으로 사용하면 반응형 웹 구현이 가능하다!
/* 모바일 우선 디자인 */
.container {
width: 100%;
padding: 10px;
}
/* 태블릿 */
@media screen and (min-width: 768px) {
.container {
width: 750px;
padding: 20px;
}
}
/* 데스크톱 */
@media screen and (min-width: 1024px) {
.container {
width: 980px;
padding: 30px;
}
}💡 유동적 그리드 (Fluid Grid)
고정된 px 단위 대신 상대적인 단위를 사용한다.
.container {
width: 100%; /* 부모 요소 기준 */
max-width: 1200px;
margin: 0 auto;
}
.column {
float: left;
width: 33.33%; /* 3등분 */
padding: 1em; /* 폰트 크기 기준 */
}💡 유동적 이미지
이미지가 컨테이너를 넘어가지 않도록 설정한다.
img {
max-width: 100%;
height: auto;
}3. 실제 적용예시 - Github Blog
필자는 개인 저장 공간으로 Github Pages를 이용해서 Jekyll과 기본 Javascript만을 이용해 개인 블로그를 개발한 경험이 있다.
(MPA 방식으로 동작하기 때문에 트렌드 기술을 적용하여 개편 예정이다 😅)
여러 테마를 적용해서 간단하게 개발할 수 있었지만, 마음에 드는 게 없어서 직접 처음부터 작업을 진행했다.
개발이 어느 정도 마무리되고 휴대폰으로 개발한 Github 블로그에 접속했을 때 보였던 것은 깨진 화면, 글자가 잘린 메뉴, 가로로 스크롤이 생기는 게시글 등 그냥 엉망진창이었다.
이 문제를 해결하기 위해 당시에는 이게 '반응형 웹'의 문제인지도 모른 채 개발했지만, 지금은 그 경험을 바탕으로 독자에게 실제 사례를 통한 반응형 웹의 중요성을 보여주고자 한다.
💡 Responsive View
필자는 Github Blog에서 다음 뷰와 같이 반응형 디자인을 구현하였다.
조금더 세부적으로 들어가면 아래와 같다.
Screen View
초록색으로 표시된 부분은 화면이 좁아짐에 따라서 크기뿐만이 아니라 다른 적용사항도 필요한 부분이다.
Mobile View
모바일 화면 사이즈로 줄어들게 되면, 아래 그림처럼 화면이 구성된다.
즉, Scroll Bar의 위치가 조정되고 이전에 있었던 특정 컴포넌트들은 사라진다.
또한, 새로운 컴포넌트인 햄버거바가 새로 생기게 된다.
이렇게 구성하기 위해서는 우선 기본적으로 알아야할 개념이 있다.
💡 디바이스별 분기점
각 디바이스마다 어느정도의 px을 기준으로 분기를 갖는지 파악해야한다.
이처럼 주로 1024, 728, 480을 기준으로 반응형 웹 디자인을 설계하고 그에 맞춰서 CSS 스타일을 작성해주면 된다.
즉, 특정 사이즈에 원하는 디자인이 있다면 그에 맞춰서 화면을 구성하는 요소에 대한 스타일링을 모두 진행해줘야 한다.
HTML 태그를 무분별하게 사용하거나 class, id 등을 일관되게 사용하지 않았다면 반응형 웹 스타일링을 하면서 어려움을 겪을 수 있다..
(HTML을 체계적으로 작성하는게 중요할 것이다..🤣)
💡 적용 코드 예시
먼저 실제 Github Blog에 적용했던 반응형 웹 CSS 코드의 일부를 살펴보자.
(디바이스 분기점으로 992px, 768px, 576px을 기준으로 사용했다.)
@media screen and (max-width: 992px){
.navbar{
display: none;
}
.nav-logo{
margin-left: 2rem;
}
.search{
display: none;
}
.post-sidebar{
display:flex;
flex-direction: column;
margin-left: 2rem;
margin-right: 2rem;
}
.post-header{
margin-left: 0;
}
...
}
@media screen and (max-width: 768px){
.recent > h2{
font-size: 19pt;
}
.home-post-meta{
justify-content: start;
display:block;
margin-bottom: 0.6rem;
}
...
}
@media screen and (max-width: 576px){
.nav-logo{
max-width: 30px;
max-height: 30px;
margin-left: 0.8rem;
}
#toggle-menu{
margin-right:0.8rem;
}
...
}여기서 주목할 점은 max-width 속성의 적용 범위다.
화면 너비가 600px일 경우
- 992px 기준의 스타일이 우선 적용된다.
- 768px 기준의 스타일이 이후 덮어씌워진다.
- 576px 기준 이하의 스타일은 적용되지 않는다.
즉, 더 넓은 범위에 설정된 스타일이 기본이 되며, 화면이 작아질수록 필요한 부분만 덮어써서 스타일을 변경하는 방식이라는걸 알아두자
💡 개발 Tip
필자의 경우 반응형 웹을 개발할 때 다음과 같은 방식이 효율적이었다.
PC 버전 먼저 완성하기
- 보통 PC 화면이 가장 많은 요소를 포함
- 모든 컴포넌트의 스타일을 한 번에 정의 가능
큰 화면에서 작은 화면으로
- max-width를 이용해 큰 화면부터 작은 화면으로 줄여가며 개발
- 각 분기점에서 필요한 스타일만 수정하면 되어 효율적
이러한 방식은 모든 화면 요소를 처음부터 고려할 수 있고, 각 분기점에서 필요한 부분만 수정하면 되어 개발 효율성이 높았다.
(어떤 방법이 더 좋다라고는 말할 수 없겠지만 필자의 경험 기반으로 제시된 내용일 뿐이다!)
OUTRO
이번 포스팅에서는 반응형 웹 디자인의 개념부터 실제 Github Blog 개발 경험까지 다뤄보았다.
처음 블로그를 개발할 때는 반응형 웹의 중요성을 인지하지 못했지만, 모바일에서 깨진 화면을 마주하고 나서야 그 필요성을 절실히 깨달았다.
다행히도 CSS의 미디어 쿼리와 적절한 분기점 설정으로 이 문제를 해결할 수 있었다.
현대 웹 개발에서 반응형 디자인은 선택이 아닌 필수가 되었다.
PC, 태블릿, 모바일 등 다양한 디바이스에서 일관된 사용자 경험을 제공하기 위해서는 처음 설계 단계부터 반응형 웹을 고려해야 할 것이다.
