반응형 웹
어떤 크기의 그릇에 담아도 모양이 자연스럽게 맞춰지는 부드러운 푸딩 같은 웹사이트예요.
정의 사용자가 접속한 기기의 화면 크기나 해상도에 맞춰 글자 크기, 이미지, 화면 배치가 유연하게 자동으로 변하는 웹 제작 방식이에요. 컴퓨터 모니터, 태블릿, 스마트폰 등 기기가 달라도 단 하나의 웹사이트 주소로 최적의 화면을 보여줘요.
왜 기기마다 다른 화면이 필요할까요?
커다란 컴퓨터 모니터에 맞춰 만든 신문 모양의 화면을 작은 스마트폰으로 본다고 상상해 보세요. 글씨가 개미만 해져서 손가락으로 화면을 계속 확대하고 좌우로 스크롤해야만 글을 읽을 수 있어요. 반대로 스마트폰 화면을 대형 TV로 보면 양옆이 텅 비어 보기에 답답하죠.
과거에는 이런 문제를 해결하기 위해 컴퓨터용 웹사이트와 모바일용 웹사이트를 따로 만들었어요. 하지만 이 방식은 글 하나를 고칠 때마다 두 곳을 모두 수정해야 해서 번거로웠어요. 게다가 태블릿이나 접히는 폴더블폰처럼 새로운 화면 크기가 나올 때마다 매번 새로 만들어야 했죠.
반응형 웹은 이 고민을 깔끔하게 해결했어요. 기기마다 사이트를 따로 만들지 않고, 화면 너비에 반응해 스스로 재배치되는 구조를 만든 거예요. 넓은 화면에서는 가로로 3줄 나열되던 상품 목록이 스마트폰에서는 세로로 1줄로 착착 정렬돼요.
마법처럼 변하는 비결, 미디어 쿼리
반응형 웹의 핵심 비밀은 바로 웹 스타일을 꾸미는 언어(CSS)에 들어 있는 '미디어 쿼리(Media Query)'라는 기술이에요. 이는 브라우저가 화면의 가로 길이를 실시간으로 재서, 크기에 맞는 옷을 갈아입도록 지시하는 감지 센서 같은 역할을 해요.
예를 들어 "화면 폭이 600픽셀보다 좁아지면 메뉴를 숨기고 햄버거 모양 삼선 아이콘을 보여줘라"라고 규칙을 적어두는 식이에요. 그러면 사용자가 스마트폰을 가로로 돌리거나 브라우저 창의 모서리를 잡아당겨 줄일 때 조건에 맞춰 실시간으로 디자인이 변신해요.
여기에 픽셀(px)처럼 딱딱하게 고정된 단위 대신 퍼센트(%) 단위를 사용하는 유연한 격자 구조가 더해져요. 화면 폭이 줄어들면 글자 상자와 이미지도 비율에 맞춰 유연하게 줄어들기 때문에 글씨가 화면 밖으로 삐져나가지 않아요.
조금 더 정확히 말하면: 적응형 웹과의 차이
우리가 보는 모바일 화면이 모두 반응형 웹인 것은 아니에요. 종종 '적응형 웹'이라는 방식과 비교되기도 해요. 적응형 웹은 스마트폰 크기, 태블릿 크기, PC 크기처럼 미리 정해둔 몇 개의 고정된 규격에 맞춰 각각 따로 준비한 화면을 띄워주는 방식이에요.
반면 반응형 웹은 화면 크기가 1픽셀씩 연속해서 변해도 모든 화면 크기에 매끄럽게 적응해요. 웹사이트 코드를 단 하나만 만들어 두면 되기 때문에 내용을 수정할 때 드는 시간과 비용을 크게 줄일 수 있어요.
또한 검색 포털 사이트의 검색 로봇이 사이트 주소 하나만 확인하면 되므로 검색 결과 상단에 노출되는 데도 훨씬 유리해요. 이처럼 관리하기 쉽고 사용자 경험이 뛰어나 오늘날 대부분의 웹사이트가 반응형을 기본으로 채택하고 있어요.
🤔 흔한 오해
반응형 웹은 모바일용 사이트를 따로 하나 더 만드는 기술이다.
사이트를 두 개 만드는 것이 아니라, 단 하나의 코드와 주소로 모든 기기 화면 크기에 맞춰 디자인만 유연하게 바꾸는 기술이에요.
🧺 일상에서 만나요
화면 크기에 맞춰 내용물 배치를 자동으로 조절해, 모든 기기에서 편리하게 볼 수 있도록 만든 웹사이트예요.