반응형

반응형은 어떻게 화면 크기에 맞춰 바뀌나요?

반응형 홈페이지는 ‘화면 너비가 이만큼보다 좁으면 이렇게 배치하라’는 규칙을 미리 정해 두고, 손님 화면 너비에 맞는 규칙을 골라 보여 줘요. 이 규칙이 바뀌는 너비를 ‘브레이크포인트’라고 불러요.

예를 들어 컴퓨터에서는 사진 세 장이 한 줄로 서 있다가, 폰에서는 한 장씩 위아래로 쌓여요. 사진과 글 상자는 고정된 크기가 아니라 화면 비율에 맞춰 늘고 줄어들도록 만들어요.

홈페이지 코드 맨 위에는 ‘이 화면을 기기 너비에 맞춰 보여 달라’는 한 줄(뷰포트 설정)이 들어가요. 이 한 줄이 빠지면 폰에서 컴퓨터 화면이 작게 줄어든 채로 보여요.

브레이크포인트는 특정 기기 이름이 아니라 화면 너비를 기준으로 정해요. 그래서 새 폰이 나올 때마다 따로 맞출 필요 없이, 처음 보는 크기의 화면에서도 가장 가까운 규칙에 따라 자연스럽게 배치돼요.

반응형, 적응형, 모바일 전용 사이트는 뭐가 다른가요?

반응형은 하나의 홈페이지가 모든 화면에 맞춰 바뀌는 방식이고, 적응형과 모바일 전용 사이트는 화면별로 따로 만든 버전을 보여 주는 방식이에요. 구글은 만들기 쉽고 관리하기 쉽다는 이유로 반응형을 권해요.

구글은 폰용 내용을 기준으로 사이트를 읽고 순위를 매겨요. 따로 만든 모바일 사이트에 내용이 덜 들어 있으면, 컴퓨터 화면에만 있는 내용은 검색에서 손해를 볼 수 있어요.

이미 m.가게주소.kr 같은 모바일 전용 사이트를 쓰고 있다면, 새로 만들 때 반응형으로 합치고 예전 m. 주소는 새 주소로 자동 연결해 두세요. 그래야 예전에 퍼진 링크로 들어온 손님도 길을 잃지 않아요.

폰 화면에서는 무엇이 달라져야 하나요?

폰에서는 화면을 줄이는 게 아니라, 엄지 하나로 쓰기 편하게 다시 배치해야 해요. 손님은 서서 한 손으로, 짧은 시간 안에 전화번호 · 위치 · 가격을 찾는다고 생각하고 설계해요.

예를 들어 미용실 가격표는 컴퓨터에서는 넓은 표로 보여 줘도, 폰에서는 시술별 카드로 나눠야 옆으로 밀지 않고 볼 수 있어요. 공방 클래스 일정도 폰에서는 달력보다 날짜 목록이 보기 편해요.

폰 화면에서는 보여 줄 순서도 다시 정해야 해요. 컴퓨터에서는 옆에 나란히 있던 ‘가게 소개’와 ‘예약 버튼’이 폰에서는 위아래로 쌓이는데, 이때 손님이 가장 먼저 찾는 정보가 위로 오게 순서를 잡아요.

카페나 음식점이라면 영업시간, 오늘 쉬는지 여부, 길찾기 버튼이 폰 첫 화면 가까이에 있어야 해요. 가게 근처에서 폰을 꺼낸 손님은 이 세 가지를 가장 먼저 찾기 때문이에요.

• 본문 글씨는 확대하지 않아도 읽힐 만큼 크게
• 버튼과 링크는 손가락으로 누르기 충분한 크기와 간격으로 (보통 가로세로 48픽셀 안팎을 권해요)
• 전화번호는 누르면 바로 걸리게, 주소는 누르면 지도 앱이 열리게
• 첫 화면을 큰 팝업으로 가리지 않기
• 사진 속에 글자를 넣지 말고 글자는 글자로 (폰에서 작아져 안 읽혀요)
• 사진은 폰 화면에 맞는 크기로 줄여 빠르게 뜨게

지금 홈페이지를 반응형으로 바꿀 수 있나요?

바꿀 수는 있지만, 오래된 홈페이지는 고치는 것보다 새로 만드는 편이 나은 경우가 많아요. 컴퓨터 화면 너비에 맞춰 칸 크기를 고정해 만든 홈페이지는 배치의 뼈대부터 다시 짜야 해서, 손보는 범위가 거의 새로 만드는 수준이 되기 때문이에요.

먼저 내 홈페이지가 어떤 상태인지 확인해 보세요. 폰으로 열었을 때 글씨가 아주 작게 줄어들어 손가락으로 확대해야 보인다면 반응형이 아닐 가능성이 커요. 일부 화면만 옆으로 밀린다면 그 부분만 고쳐도 되는 경우가 있어요.

새로 만든다면 그 기회에 폰 화면 기준으로 내용을 다시 정리하는 게 좋아요. 예를 들어 오래된 음식점 홈페이지의 메뉴판 이미지를 글자로 된 메뉴로 바꾸면, 폰에서 읽기 쉬워지고 검색에도 메뉴 이름이 잡혀요.

반응형 홈페이지는 어떻게 확인하나요?

가장 확실한 방법은 실제 폰 여러 대로 열어 보고, 손님이 하는 행동을 그대로 따라 해 보는 거예요. 화면이 예쁜지보다 전화 · 예약 · 길찾기가 막힘없이 되는지를 먼저 봐요.

이상한 부분을 발견하면 화면을 캡처하고, 어떤 기기에서 어떤 브라우저로 봤는지 함께 적어 업체에 보내 주세요. 같은 문제라도 기기마다 다르게 보일 수 있어서, 이 정보가 있으면 고치는 시간이 크게 줄어요.

1. 01사장님 폰으로 첫 화면부터 끝까지 내려 보며, 옆으로 밀리는 부분이 없는지 봐요.
2. 02폰을 가로로 돌려서도 한 번 봐요.
3. 03다른 종류의 폰(아이폰 · 갤럭시)과 태블릿에서도 열어 봐요.
4. 04컴퓨터에서는 브라우저 창 너비를 천천히 줄이며 배치가 자연스럽게 바뀌는지 봐요.
5. 05전화 걸기 · 지도 열기 · 예약 버튼을 직접 눌러 봐요.
6. 06와이파이를 끄고 휴대폰 데이터로 열어 사진이 너무 늦게 뜨지 않는지 봐요.

반응형 제작을 맡길 때 자주 놓치는 것은 뭔가요?

가장 흔한 실수는 컴퓨터 화면 시안만 보고 확정하는 거예요. 손님 대부분이 폰으로 본다면, 폰 화면 시안을 먼저 받아 보고 의견을 주는 편이 실제 결과에 가까워요.

또 메뉴판이나 이벤트 안내를 큰 이미지 한 장으로 넣는 경우가 많아요. 폰에서는 글씨가 작아져 읽기 어렵고, 검색엔진도 이미지 속 글자를 잘 읽지 못해요.

글자 크기나 버튼 위치처럼 폰에서만 보이는 문제는 공개 뒤 손님이 먼저 알아차리는 경우가 많아요. 공개 전 확인 단계에 사장님과 직원 폰 몇 대로 직접 예약까지 해 보는 시간을 넣어 달라고 요청하세요.

• 폰 화면 시안도 따로 보여 주시나요?
• 가격표 · 표 · 일정은 폰에서 어떻게 바뀌나요?
• 사진은 화면 크기에 맞게 줄여서 올라가나요?
• 공개 전에 어떤 기기들로 확인하시나요?