반응형 레이아웃은 하나의 웹페이지가 접속한 화면의 너비에 맞춰 배치와 크기를 스스로 바꾸도록 짠 설계 방식이다. 반응형 웹, 반응형 웹사이트, 반응형 홈페이지, 반응형 디자인이라는 말도 대부분 같은 뜻으로 쓰인다. 이 기사는 반응형 레이아웃이 어떤 원리로 움직이는지, 모바일 전용 사이트와 무엇이 다른지, 어떤 상황에서 어느 쪽이 맞는지를 차례로 설명한다.
반응형 레이아웃은 어떤 구조로 움직이나
반응형의 뼈대는 세 가지다. 첫째는 글상자와 칸의 너비를 고정된 픽셀 대신 비율 같은 상대 단위로 잡는 유연한 격자다. 둘째는 화면 너비가 일정 기준을 넘거나 못 미칠 때 서로 다른 스타일을 적용하는 CSS의 미디어쿼리다. 셋째는 이미지와 영상이 담긴 칸을 따라 함께 줄어들고 늘어나게 하는 유연한 이미지다. 이 기준 너비를 흔히 중단점이라 부르며, 보통 휴대전화, 태블릿, 컴퓨터 화면 정도로 나누어 설계한다.
비슷한 말도 짚어 둔다. 영어로는 responsive web design이라 쓰고, 줄여서 RWD라고 적기도 한다. 반응형 UI는 메뉴, 버튼, 입력창 같은 조작 요소가 화면에 따라 모양과 위치를 바꾸는 쪽에 초점을 둔 표현이다. 반응형 월페이퍼처럼 배경화면을 가리키는 쓰임도 검색에 섞여 나오지만, 웹사이트 설계와는 별개의 이야기다.
이런 방식이 자리 잡은 배경에는 화면 크기가 지나치게 다양해졌다는 사정이 있다. 기기마다 화면별로 따로 페이지를 만들면 끝이 없으므로, 하나의 주소와 하나의 내용으로 모든 화면을 받아내자는 발상이 나왔다. 주소가 하나이면 관리자는 글을 한 번만 고치면 되고, 검색엔진도 같은 내용을 여러 주소에서 따로 읽을 필요가 없다. 검색엔진 쪽에서도 이런 단일 주소 구조를 관리하기 쉬운 방식으로 안내해 온 것으로 알려져 있다.
모바일 전용 사이트와 견주면 무엇이 다른가
모바일 전용 사이트는 휴대전화 접속자에게만 별도로 만든 사이트다. 흔히 별도 주소를 쓰거나, 서버가 접속 기기를 가려서 다른 페이지를 내려보내는 식으로 만든다. 화면이 작고 손가락으로 조작한다는 전제에 맞춰 내용과 기능을 처음부터 줄이고 다듬을 수 있다는 것이 장점이다. 반면 컴퓨터용과 모바일용 두 벌을 따로 관리해야 하므로, 한쪽만 고치고 다른 쪽을 놓쳐 내용이 어긋나기 쉽다.
실제로는 반응형이라고 해서 저절로 잘 되지 않는다. 사람들이 자주 걸려 넘어지는 곳은 컴퓨터 기준으로 만든 큰 이미지가 휴대전화에서도 그대로 내려와 느려지는 경우, 폭이 넓은 표가 화면 밖으로 넘치는 경우, 마우스를 올려야 열리는 메뉴가 터치 화면에서 작동하지 않는 경우다. 누르는 칸이 너무 작아 엉뚱한 곳이 눌리거나 글자가 작아 읽기 힘든 것도 흔한 문제다. 제작이 끝난 뒤 실제 휴대전화로 확인하는 과정을 건너뛰면 이런 문제가 그대로 남는다.
상황이 다르면 답도 달라진다
회사 소개, 상품 안내, 예약 문의처럼 읽고 연락하는 것이 중심인 홈페이지라면 반응형이 대체로 무난한 선택이다. 내용이 하나로 유지되고 관리 부담이 작기 때문이다. 반대로 휴대전화에서만 쓰는 기능이 핵심이거나 카메라, 알림처럼 기기 기능을 깊게 써야 하는 서비스라면 모바일에 특화한 별도 구성이나 앱을 따져 볼 만하다. 이미 컴퓨터용 페이지가 아주 많이 쌓여 있다면 전면 개편에 드는 비용과 일정도 함께 저울질해야 한다.
흔한 오해도 바로잡는다. 반응형은 모든 화면에서 똑같이 보이게 하는 방식이 아니라, 화면에 맞게 다르게 보이게 하는 방식이다. 반응형이라고 해서 속도가 자동으로 빨라지는 것도 아니며, 모바일 전용이 언제나 더 낫다는 말도 맞지 않는다. 또 반응형 웹사이트는 앱을 대신하는 것이 아니라 브라우저에서 열리는 웹의 한 설계 방식일 뿐이다.
| 구분 | 내용 |
|---|---|
| 주소와 내용 | 반응형은 하나의 주소와 하나의 내용, 모바일 전용은 별도 구성이 따로 존재 |
| 관리 부담 | 반응형은 한 번 수정하면 전체 반영, 모바일 전용은 두 벌을 각각 수정 |
| 화면 최적화 | 반응형은 폭넓게 맞추되 세밀함은 설계 실력에 좌우, 모바일 전용은 휴대전화에 깊게 맞춤 |
| 어울리는 경우 | 반응형은 안내와 문의 중심 홈페이지, 모바일 전용은 기기 기능에 크게 기대는 서비스 |
정하기 전에 무엇을 먼저 확인하나
판단의 순서는 이렇다. 먼저 방문자가 어떤 기기로 들어와 무엇을 하려는지, 주요 행동이 읽기인지 조작인지를 정리한다. 다음으로 휴대전화에서만 필요한 기능이 있는지, 관리할 인력과 예산이 두 벌을 감당할 수 있는지를 따져 본다. 제작을 맡길 때는 어떤 화면 너비를 기준으로 검수하는지, 완성 뒤 실제 기기에서 확인하는 절차가 계약에 들어 있는지를 문서로 확인하면 된다. 속도와 화면 표시 상태는 검색엔진 회사가 무료로 제공하는 점검 도구와 직접 휴대전화로 열어 본 결과를 함께 보면 판단에 도움이 된다.
· · · · · · · · · ·
스페셜타임스는 AI 기술의 도움을 받아 더 빠르고 다양한 뉴스를 독자에게 전달하기 위해 노력하고 있습니다.