반응형 자막은 화면 폭에 따라 글자 크기, 줄 길이, 놓이는 위치가 알아서 달라지는 자막과 설명 문구를 가리키는 말이다. 이 말은 영상 자막과 사진 아래 설명 문구를 뜻하기도 하고, 반응형 웹에서 글자가 화면에 맞게 바뀌는 방식을 뭉뚱그려 부르는 말로도 쓰인다. 이 기사는 반응형 자막이 어떤 원리로 움직이는지, 그것을 품은 반응형 웹과 반응형 홈페이지가 어떤 조건을 갖춰야 모바일에서 깨지지 않는지에 답한다.
반응형 웹의 구조는 세 가지 장치로 이루어진다
반응형 웹은 하나의 주소와 하나의 문서로 컴퓨터, 태블릿, 휴대전화 화면에 모두 대응하는 제작 방식이다. 이를 떠받치는 장치는 크게 세 가지다. 첫째는 화면 폭을 기준으로 규칙을 바꾸는 미디어 쿼리, 둘째는 칸의 크기를 고정값이 아니라 비율로 잡는 유연한 격자, 셋째는 화면에 따라 함께 줄었다 늘었다 하는 이미지와 영상이다. 여기에 문서 머리말에 화면 폭을 기기에 맞추라고 알려 주는 뷰포트 설정이 빠지면, 휴대전화가 컴퓨터용 화면을 통째로 줄여 보여 주기 때문에 글자가 깨알처럼 작아진다.
반응형 레이아웃은 이 장치들이 만들어 내는 결과물이다. 화면이 넓으면 칸을 여러 줄로 나란히 세우고, 좁으면 한 줄로 쌓아 올린다. 칸이 바뀌는 지점을 분기점이라 부르는데, 특정 기기의 해상도에 맞추기보다 내용이 어색해지는 지점에 두는 편이 오래 간다. 기기의 종류는 계속 늘어나므로 기기 이름을 기준으로 삼으면 금세 어긋나기 때문이다.
자막이 깨지는 곳은 대개 정해져 있다
반응형 자막이 가장 자주 어긋나는 곳은 글자 크기를 픽셀 같은 고정 단위로 박아 둔 경우다. 컴퓨터에서 알맞던 글자가 휴대전화에서는 한 줄에 몇 글자밖에 들어가지 않아 영상 화면을 가리거나 줄이 넘친다. 이를 막으려면 글자 크기를 상대 단위로 잡거나, 최소와 최대 사이에서 화면 폭에 따라 부드럽게 변하게 하는 방식을 쓴다. 한 줄의 길이도 너무 길면 읽기 힘드니 최대 폭을 정해 두는 것이 좋다.
영상 자막은 별도의 자막 파일을 영상에 연결하는 방식이 표준적이다. 이렇게 하면 자막이 이미지로 구워져 영상에 박히지 않고 글자로 남기 때문에, 재생 화면 크기에 맞춰 크기와 위치가 조절되고 사용자가 켜고 끌 수도 있다. 반대로 자막을 영상 안에 이미지로 새겨 넣으면 작은 화면에서 읽을 수 없게 되고 검색 엔진도 내용을 읽지 못한다. 사진 설명 문구는 이미지와 설명을 한 묶음으로 엮는 전용 태그를 쓰면 이미지가 줄어들 때 문구도 함께 따라온다.
상황이 다르면 답도 달라진다
모든 홈페이지가 반응형이어야 하는 것은 아니다. 안내 위주의 소개 사이트나 게시판형 사이트는 반응형이 잘 맞는다. 반면 복잡한 표와 도면을 다루는 업무용 화면은 휴대전화용 화면을 따로 설계하는 적응형이나 별도 모바일 사이트가 나을 수 있다. 적응형은 기기별로 미리 짠 화면 몇 벌을 골라 보여 주는 방식이어서, 관리할 화면이 늘어나는 대신 기기마다 세밀하게 다듬을 수 있다.
반응형 UI를 설계할 때는 크기만 줄이는 것으로 끝나지 않는다. 휴대전화에서는 손가락으로 누르기 때문에 버튼과 링크 사이에 간격이 충분해야 한다. 마우스를 올려야 나타나는 메뉴는 터치 화면에서 작동하지 않는다. 가로로 넓은 표는 화면 안에서 옆으로 밀어 보게 하거나 항목별 카드로 바꾸는 식의 대안이 필요하다. 기기마다 입력 방식이 다르다는 점까지 고려해야 진짜 반응형이다.
흔한 오해와 확인 순서
흔한 오해의 하나는 반응형이면 모바일 대응이 끝났다는 생각이다. 화면 배치가 맞춰져도 이미지 용량이 크면 모바일 회선에서 느려지고, 느린 화면은 이탈로 이어진다. 이미지를 화면 크기별로 여러 벌 준비해 기기가 알맞은 것을 고르게 하는 방식이 이를 덜어 준다. 또 하나는 반응형 웹과 반응형 웹디자인을 서로 다른 것으로 아는 경우인데, 둘은 거의 같은 뜻으로 쓰이며 영어로는 responsive web design이라 한다. 반응형 월페이퍼는 해상도별로 배경 화면을 맞춰 둔 이미지를 뜻해 웹 제작과는 별개의 이야기다.
판단의 순서는 단순하다. 먼저 뷰포트 설정이 들어 있는지 본다. 다음으로 글자와 칸이 고정 단위가 아니라 상대 단위인지 확인한다. 이어서 이미지, 영상, 자막이 화면을 넘치지 않는지, 버튼이 손가락으로 누르기 충분한지 살핀다. 마지막으로 실제 휴대전화와 개발자 도구의 화면 크기 모의 기능으로 폭을 좁혀 가며 어느 지점에서 깨지는지 직접 본다.
| 점검 항목 | 확인할 내용 |
|---|---|
| 뷰포트 설정 | 문서 머리말에 기기 폭에 맞추라는 설정이 있는지 |
| 글자와 자막 | 상대 단위 사용 여부, 줄 길이 제한, 자막 파일 분리 여부 |
| 격자와 분기점 | 내용이 어색해지는 지점에서 칸이 바뀌는지 |
| 이미지와 영상 | 화면을 넘치지 않는지, 크기별 이미지가 준비됐는지 |
| 터치 조작 | 버튼 간격, 마우스 올림 메뉴의 대체 수단 |
반응형 웹을 맡기거나 직접 만들기 전에는 위 표의 항목을 제작 범위에 담았는지 확인하면 된다. 참고할 만한 사례는 검색 대신, 브라우저 개발자 도구로 여러 사이트의 화면 폭을 좁혀 보며 어떤 칸이 어떻게 바뀌는지 살피는 것이 가장 빠르다. 용어의 정확한 정의와 자막 연결 방법은 웹 표준을 설명하는 공개 기술 문서에서 확인할 수 있다.
· · · · · · · · · ·
스페셜타임스는 AI 기술의 도움을 받아 더 빠르고 다양한 뉴스를 독자에게 전달하기 위해 노력하고 있습니다.