반응형(휴대폰 화면)
같은 화면이 기기 크기에 따라 배치를 다시 짜는 것이에요. 컴퓨터에서는 옆으로 나란히, 휴대폰에서는 위아래로 쌓여요. 주소도 내용도 하나인데 놓이는 자리만 달라져요.
쉽게 말하면
A4 전단지를 복사기에 넣고 명함 크기로 줄여 본 적 있으세요? 종이는 작아졌는데 글씨도 같이 작아져서 결국 아무도 못 읽어요. 그래서 명함은 처음부터 명함용으로 다시 짜죠. 큰 상호 하나, 전화번호 하나, 끝. 반응형이 바로 이거예요. 컴퓨터 화면을 축소하는 게 아니라, 휴대폰에서는 휴대폰용으로 다시 배치하는 거예요.
내용은 그대로예요. 주소도 하나고요. 손님이 무엇으로 들어오는지에 따라 놓이는 자리만 달라져요.
손님이 손가락으로 확대하고 좌우로 밀어야 읽혀요. 대부분은 그 전에 나가요.
확대 없이 읽히고, 한 손으로 바로 눌러요. 전화가 걸려 와요.
손님은 거의 휴대폰으로 들어와요
동네 가게는 특히 그래요. 길에서 검색하다가, 지도 앱에서 눌러서, 인스타 프로필 링크에서 넘어와요. 전부 휴대폰 안에서 일어나는 일이에요.
컴퓨터로 가게 이름을 정확히 검색하는 사람은 대개 이미 우리 가게를 아는 손님이에요. 처음 오는 손님은 휴대폰에 있어요. 그런데 화면을 만드는 사장님은 컴퓨터 앞에 앉아 있죠. 이 어긋남에서 사고가 시작돼요.
비율은 짐작하지 말고 내 것으로 보세요
업종마다, 손님 연령대마다 달라요. 남의 통계를 외우는 것보다 방문 기록에서 내 화면의 휴대폰 비율을 직접 확인하는 게 정확해요. 대부분의 사장님이 그 숫자를 보고 한 번 놀라요.
장면 1 · 손님이 전화했다
“사장님, 홈페이지에서 예약 버튼이 안 눌려요. 어디 있어요?”
버튼이 없어진 게 아니에요. 컴퓨터 기준으로 오른쪽 끝에 놓인 버튼이 좁은 화면에서 밖으로 밀려난 거예요. 사장님 컴퓨터에서는 멀쩡히 보이니 끝까지 원인을 못 찾는 대표적인 사고예요.
폭이 좁아지면 무엇이 달라지나
반응형이 잘 된 화면은 폭이 좁아질 때 이런 일들이 알아서 일어나요. 무엇이 어떻게 변하는지 알아 두면, 만들어진 화면을 볼 때 잘못된 곳이 눈에 들어와요.
| 화면 요소 | 컴퓨터에서 | 휴대폰에서 |
|---|---|---|
| 메뉴 | 위쪽에 가로로 전부 펼쳐져요 | 버튼 하나로 접히고, 누르면 세로 목록이 열려요 |
| 사진과 설명 | 좌우로 나란히 놓여요 | 위아래로 쌓여요. 사진이 먼저, 글이 아래 |
| 가격표 | 표 한 장이 한눈에 들어와요 | 옆으로 미는 표가 되거나, 항목별 카드로 바뀌어요 |
| 버튼 | 마우스로 정확히 콕 찍어요 | 엄지로 눌러요. 더 크고 서로 떨어져 있어야 해요 |
| 전화번호 | 눈으로 보고 다른 전화기로 걸어요 | 누르면 바로 전화 앱이 떠야 해요 |
| 사진 무게 | 빠른 인터넷이라 티가 잘 안 나요 | 데이터로 열면 무거운 사진이 그대로 느려져요 |
AI에게 만들어 달라고 할 때도 이 말을 그대로 쓰면 돼요. "휴대폰에서는 두 칸을 세로로 쌓아 주세요", "메뉴는 좁은 화면에서 접어 주세요"처럼요. 요청하는 법은 프롬프트 문서에 더 있어요.
휴대폰에서 꼭 확인할 네 가지
전부 확인할 필요는 없어요. 이 네 가지만 실제 휴대폰으로 보면 사고의 대부분이 걸러져요. 순서대로 5분이면 끝나요.
- 1글씨 크기. 손가락으로 확대하지 않고 읽히나요? 팔을 편하게 둔 거리에서 읽히면 통과예요. 특히 회색 작은 글씨(영업시간, 주차 안내)를 보세요. 정작 손님이 제일 궁금해하는 정보가 거기 숨어 있는 경우가 많아요.
- 2버튼 크기와 간격. 엄지로 눌렀을 때 옆에 있는 다른 버튼이 같이 눌리지 않나요? 버튼끼리 딱 붙어 있으면 오누름이 나요. 예약 버튼 옆에 취소 버튼이 붙어 있는 화면은 특히 위험해요.
- 3전화 걸기. 전화번호를 눌러 보세요. 전화 앱이 바로 떠야 해요. 글자로만 적혀 있으면 손님이 번호를 외워서 다시 눌러야 하고, 그 사이에 마음이 식어요. 주소도 마찬가지예요. 누르면 지도 앱이 뜨게 해 두세요. 동네 가게에서는 이 두 개가 매출과 가장 가까운 버튼이에요.
- 4사진 무게. 와이파이를 끄고 데이터로 화면을 열어 보세요. 사진이 몇 초씩 늦게 뜨거나 회색 칸으로 남아 있으면 무거운 거예요. 카메라 원본을 그대로 올리면 화면에 보이는 크기보다 몇 배 큰 사진을 손님 데이터로 내려받게 돼요.
와이파이를 끄고 한 번 보세요
가게 안에서는 다 빨라요. 손님은 지하철이나 길 위에서 열어요. 데이터로 한 번 열어 보는 것이 가장 값싼 성능 점검이에요. 다 뜨기까지 답답하다고 느껴지면 손님도 똑같이 느껴요.
컴퓨터에서만 보고 만들면 생기는 사고
이 사고는 늘 같은 순서로 일어나요. 무서운 건 아무도 알려주지 않는다는 점이에요. 화면이 불편한 손님은 항의하지 않고 그냥 나가요.
- 1큰 컴퓨터 화면에서 만들고, 예쁘게 나와서 만족해요.
- 2그대로 배포해요. 손님에게 링크를 뿌려요.
- 3손님 대부분은 휴대폰으로 열어요. 버튼은 화면 밖에 있고, 사진은 늦게 뜨고, 표는 잘려요.
- 4손님은 불편하다고 말하지 않고 뒤로 가기를 눌러요. 사장님 화면에는 아무 문제가 없어요.
- 5몇 주 뒤 "홈페이지 만들었는데 문의가 없네"라는 결론에 도착해요. 원인은 화면이 아니라 배치였는데요.
가장 흔한 세 가지 증상은 이래요. 화면이 좌우로 밀리는 것(어딘가 한 요소가 화면보다 넓어요), 팝업의 닫기 버튼이 화면 밖에 있는 것, 그리고 긴 글자(이메일 주소나 링크)가 줄바꿈 없이 삐져나가는 것이에요.
장면 2 · 외주 개발자가 말했다
“모바일 대응은 별도 항목이라 견적이 좀 올라갑니다.”
예전에는 컴퓨터용과 휴대폰용을 따로 만들던 시절이 있어서 나온 말이에요. 지금은 한 벌로 만들고 폭에 따라 배치가 달라지게 하는 게 기본이에요. 견적서에 반응형이 포함인지 한 줄로 확인하고, 포함이 아니라면 왜인지 물어보세요. 물어보는 법은 외주 문서에 있어요.
자주 묻는 것
- Q. 휴대폰용 주소를 따로 만들어야 하나요?
- 아니요. 주소는 하나가 좋아요. 손님이 링크를 공유할 때도 헷갈리지 않고, 검색에도 유리해요. 자세한 건 검색 노출을 보세요.
- Q. 휴대폰 기종이 수백 개인데 다 확인해야 하나요?
- 아니요. 폭이 아주 좁은 구형 휴대폰, 요즘 흔한 휴대폰, 태블릿, 컴퓨터. 이 네 가지만 보면 대부분 걸러져요. 기종보다 중요한 건 화면의 폭이에요.
- Q. 컴퓨터에서 브라우저 창을 좁혀 보는 걸로 충분한가요?
- 절반은 맞아요. 배치가 어떻게 접히고 쌓이는지는 그걸로 확인돼요. 다만 손가락으로 누르는 감, 데이터 속도, 전화 걸기는 진짜 휴대폰으로만 확인돼요. 두 가지를 다 하세요.
- Q. 글씨를 무조건 크게 하면 되는 거 아닌가요?
- 다 크면 순서가 사라져요. 손님이 무엇부터 봐야 할지 모르게 돼요. 가장 중요한 한 가지(상호나 예약 버튼)를 크게 하고 나머지는 읽히는 선까지만 키우세요.
- Q. 사진 용량은 어느 정도가 적당한가요?
- 정해진 기준은 없어요. 요령은 화면에 보이는 크기보다 훨씬 큰 원본을 그대로 쓰지 않는 것이에요. 확인은 데이터로 열어 보는 방법이 제일 정확해요. AI로 만든 사진도 마찬가지라 AI 이미지 문서를 같이 보시면 좋아요.
- Q. 앱으로 만들면 반응형은 신경 안 써도 되나요?
- 앱도 기기마다 화면 크기가 제각각이라 같은 고민이 있어요. 다만 웹은 작은 휴대폰부터 큰 모니터까지 폭의 차이가 훨씬 커서 손이 더 가요.
확인해 보세요
손님이 "예약 버튼이 안 보인다"고 해요. 사장님 컴퓨터에서는 멀쩡해요. 가장 먼저 할 일은?
하나 더
반응형은 무엇인가요?
직접 해보기
만든 화면을 좁게 만들어 보세요
스튜디오에서 화면을 열고, 브라우저 창의 오른쪽 끝을 잡아 왼쪽으로 천천히 끌어 보세요. 폭이 줄어들 때 메뉴가 접히고 칸이 세로로 쌓이면 반응형이 살아 있는 거예요. 아무것도 안 변하고 글씨만 작아지면 손볼 곳이 있는 거고요. 그다음에 진짜 휴대폰으로 한 번 더 확인하세요.
스튜디오 열기더 깊이 (안 읽어도 괜찮아요)
배치가 바뀌는 지점이 정해져 있어요 · 화면 폭이 몇 이하가 되면 세로로 쌓는다는 식으로 바뀌는 지점을 미리 정해 둬요. 만드는 사람들은 이 지점을 분기점이라고 불러요. 보통 휴대폰, 태블릿, 컴퓨터 정도로 세 구간을 두고, 화면이 복잡하면 지점을 더 늘려요. 손님 화면이 어중간한 폭에서 깨진다면 이 지점 사이가 비어 있는 거예요.
손가락은 마우스보다 굵어요 · 누르는 영역의 최소 크기를 애플과 구글이 각각 안내하고 있어요. 애플은 44포인트, 구글은 48dp를 기준으로 제시해요. 단위는 다르지만 결론은 같아요. 대략 손톱만 한 정사각형보다 작으면 안 된다는 것이에요. 눈에 보이는 글자는 작아도 되지만, 눌리는 영역은 그보다 넉넉해야 해요.
사진은 기기에 맞춰 골라 보낼 수 있어요 · 같은 사진을 큰 판과 작은 판으로 여러 벌 두고, 기기가 자기 화면에 맞는 것을 골라 받아 가게 할 수 있어요. 휴대폰은 작은 판을 받으니 빠르고 데이터도 덜 써요. 만들 때 "휴대폰에는 가벼운 판을 보내 주세요"라고 요청해 두면 나중에 손볼 일이 줄어요.
이것만 기억하세요
- ·반응형은 축소가 아니라 다시 배치하는 것이에요
- ·처음 오는 손님은 대부분 휴대폰 안에 있어요
- ·글씨 크기, 버튼 크기와 간격, 전화 걸기, 사진 무게. 이 넷만 보세요
- ·와이파이를 끄고 데이터로 한 번 열어 보세요
- ·컴퓨터에서만 확인하면 손님은 말없이 나가요