반응형 홈페이지 제작 비용이 업체마다 다른 것은 휴대폰 화면 값이 따로 붙어서가 아니라, 만들어야 할 화면 틀의 수와 그 틀을 화면 크기마다 얼마나 손보는지가 견적마다 다르기 때문입니다. 견적서를 페이지 틀 수, 기능, 디자인 수준, 콘텐츠 준비 네 가지로 나누고, 각각을 몇 가지 화면 크기에서 확인하는지 함께 보면 금액이 왜 다른지 보입니다.
반응형 홈페이지의 전체 비용 범위가 먼저 궁금하시면 반응형 홈페이지 제작 비용 — 휴대폰 화면까지 포함하면 얼마인가요? 글을 보세요.
반응형은 한 벌의 내용을 화면마다 다시 앉히는 일
반응형 홈페이지는 주소와 내용은 하나인데, 보는 화면의 너비에 맞춰 배치가 바뀌는 홈페이지입니다. 가게 안내 문구를 큰 현수막, 전단지, 명함에 함께 싣는 일과 비슷합니다. 글은 같아도 현수막에서는 옆으로 길게, 명함에서는 위아래로 좁게 다시 놓아야 읽힙니다.
'모바일 대응'은 업체마다 뜻이 달라, 아래 셋을 구분해 두면 견적서가 읽힙니다.
| 방식 | 어떻게 보이나 | 일의 양 |
|---|---|---|
| 반응형 | 홈페이지 하나가 화면 너비에 맞춰 배치를 바꿈 | 화면 크기마다 배치를 정하고 확인 |
| 모바일 전용 따로 | PC용과 휴대폰용을 두 벌 만듦 | 두 벌을 만들고, 고칠 때도 두 벌 |
| PC 화면 축소 | PC 화면을 그대로 작게 보여 줌 | 손이 거의 안 가지만 손가락으로 키워 봐야 읽힘 |
화면 크기마다 따로 하는 일
PC 화면을 만든다고 휴대폰 화면이 저절로 완성되지는 않습니다. 화면이 좁아질 때마다 정해 줘야 하는 일이 있습니다.
- 칸 배치 — PC에서 옆으로 세 칸이던 사례 사진을 휴대폰에서는 한 칸씩 위아래로 쌓습니다.
- 메뉴 — 위쪽에 펼쳐 둔 메뉴를 휴대폰에서는 버튼 하나로 접어 둡니다.
- 글자와 버튼 크기 — 손가락으로 누르기 쉬운 크기로 키우고 줄 간격을 다시 맞춥니다.
- 표와 큰 사진 — 옆으로 넓은 표는 휴대폰에서 잘리므로 위아래로 읽는 모양으로 바꿉니다.
- 실제 기기 확인 — 크기가 다른 휴대폰과 태블릿에서 열어 보고 어긋난 곳을 고칩니다.
이 일은 페이지 틀마다, 화면 크기마다 반복됩니다. 예를 들어 페이지 틀이 6가지이고 PC·태블릿·휴대폰 세 가지 크기를 확인한다면 확인하고 손볼 화면은 18개입니다. 틀이 12가지로 늘면 36개가 됩니다. 공통 부분은 여러 틀에 함께 쓰여 작업 시간이 정확히 곱절이 되지는 않지만, 확인할 곳은 늘어납니다. (숫자는 이해를 돕기 위한 예시입니다.)
페이지 수와 페이지 틀은 다릅니다
페이지 틀은 화면의 생김새이고, 페이지 수는 그 틀에 내용을 채워 만든 화면의 개수입니다.
시공 사례가 30건이어도 모두 사진 몇 장, 설명, 문의 버튼으로 된 같은 모양이라면 틀은 하나입니다. 틀 하나를 화면 크기마다 맞춰 두면 나머지는 관리자 페이지에서 내용만 채우면 됩니다. 반대로 회사 소개, 서비스, 사례, 오시는 길이 모두 다르게 생겼다면 페이지는 4개뿐이어도 틀도 4개입니다. 일의 양은 페이지 수보다 틀 수를 더 크게 따라갑니다.
한 페이지로 충분한지, 여러 페이지가 필요한지는 원페이지 홈페이지, 괜찮을까요? 글에서 판단 기준을 볼 수 있습니다.
금액을 가르는 네 가지
| 항목 | 일이 늘어나는 경우 | 가볍게 유지되는 경우 |
|---|---|---|
| 페이지 틀 수 | 페이지마다 생김새가 다름 | 같은 틀에 내용만 바꿔 채움 |
| 기능 | 예약 달력, 결제, 회원 가입 | 문의 신청서, 전화·지도 연결 |
| 디자인 수준 | 처음부터 새로 그림, 움직이는 효과가 많음 | 업종에 맞춘 틀을 다듬어 씀 |
| 콘텐츠 준비 | 소개 글을 대신 쓰고 사진을 새로 찍음 | 사장님이 글·사진을 준비 |
이 가운데 페이지 틀, 기능, 디자인은 화면 크기마다 다시 맞추고 확인해야 해서 화면 크기가 늘수록 일이 함께 늘어납니다. 콘텐츠 준비는 화면 크기와 상관없이 한 번 드는 일입니다.
기능은 휴대폰에서 손이 더 갑니다
휴대폰에 맞춰 다시 손보지 않으면 PC에서 잘 되던 기능도 이렇게 막힙니다.
- 예약 달력 — 한 달 달력을 그대로 줄이면 날짜 칸이 손가락보다 작아져, 손님이 다른 날을 누른 채 신청합니다.
- 신청서 — 칸이 많으면 휴대폰 키보드가 화면을 가려, 어디까지 썼는지 모르고 나가게 됩니다.
- 가격표 — 옆으로 넓은 가격표가 잘려 오른쪽 칸이 보이지 않습니다.
- 전화번호 — 글자로만 적혀 있으면 눌러도 전화가 걸리지 않습니다.
기능이 많을수록 휴대폰에서 어떻게 쓰이게 할지 정하고 시험하는 시간이 늘어납니다. 신청서를 휴대폰에서 쓰기 편하게 만드는 방법은 상담 신청서 만드는 법 글에서 다룹니다.
모바일 전용을 따로 만들 때와 비교
PC용과 휴대폰용을 두 벌 따로 만들면 휴대폰 화면을 전혀 다르게 꾸밀 수 있지만, 만든 뒤에도 두 곳을 함께 관리해야 합니다.
| 비교 | 반응형 | 모바일 전용 따로 |
|---|---|---|
| 만들 때 | 한 벌을 화면 크기마다 맞춤 | 두 벌을 각각 만듦 |
| 비용이 드는 곳 | 화면 크기별로 맞추는 작업이 제작비에 포함 | 휴대폰용 제작비가 더해지고, 수정·관리도 두 곳 몫 |
| 내용 고칠 때 | 한 번 고치면 모든 화면에 반영 | 두 곳을 각각 고침 |
| 주소 | 하나 | PC용과 휴대폰용이 나뉘는 경우가 많음 |
| 검색 관리 | 한 주소로 모여 단순함 | 두 주소의 관계를 따로 설정 |
영업시간을 바꾸면서 PC 화면만 고치고 휴대폰 화면을 그대로 두면, 휴대폰으로 들어온 손님은 옛 시간을 보고 헛걸음을 합니다. 휴대폰 손님이 많은 가게라면 한 번에 모든 화면이 바뀌는 반응형이 수월합니다.
견적서에서 확인할 것
두 견적의 금액이 다르면 아래 항목을 하나씩 맞춰 봅니다.
- 페이지 틀이 몇 가지인지 — 페이지 수와 따로 적혀 있는지 봅니다.
- 어떤 화면 크기에서 확인하는지 — 휴대폰만인지, 태블릿과 가로로 돌린 화면까지인지 묻습니다.
- 기능이 휴대폰에서도 같은지 — 예약·신청서·지도가 휴대폰에서 어떻게 보이는지 확인합니다.
- 디자인을 새로 그리는지, 틀을 다듬는지 — 시안이 몇 가지인지도 함께 봅니다.
- 휴대폰 화면을 언제 볼 수 있는지 — 계약 전에는 업체의 운영 사례를 휴대폰으로 열어 보고, 제작 중 휴대폰 시안을 따로 보여 주는지 확인합니다. PC 시안만 보면 휴대폰 화면은 오픈 날 처음 보게 됩니다.
- 만든 뒤 드는 비용 — 서버·도메인·수정비가 들어 있는지 2년 합계로 봅니다.
견적을 2년 합계로 맞춰 비교하는 방법과 계약 전에 글로 받아 둘 내용은 홈페이지 제작 업체 추천받기 전에 글에 있습니다.
자주 빠뜨리는 것
- 관리자 페이지의 휴대폰 화면 — 손님 화면은 반응형인데 관리자 화면은 PC에서만 편한 경우가 있습니다. 매장에서 휴대폰으로 사진을 바로 올리고 싶다면 미리 묻습니다.
- 실제 글을 넣은 모습 — 시안의 짧은 예시 글 대신 실제 소개 글을 넣었을 때 휴대폰에서 몇 번 내려야 하는지 확인합니다.
- 사진 용량 — 화질은 그대로 두고 용량만 줄여 올리면 휴대폰 데이터로도 화면이 빨리 열립니다. 용량이 왜 중요한지는 트래픽이 뭔가요? 글에서 설명합니다.
팬텀디자인 구독에서는
팬텀디자인 홈페이지 구독에는 PC·모바일 반응형과 업종 맞춤 디자인이 구독료 안에 포함되어 있습니다. 제작비 0원에 월 99,000원(VAT 별도), 24개월 약정이며 제작 중 수정과 관리자 페이지가 포함됩니다. 관리자 화면에서 올리는 사진은 화질은 그대로 두고 용량만 줄여 저장되도록 설정해 둡니다. 약정 중에 해지하면 남은 기간의 이용료가 위약금으로 발생하니 계약 전에 확인해 주세요. 예약·결제처럼 기능이 더해지면 범위에 따라 별도로 견적을 드리고, 자세한 조건은 요금 안내에서 볼 수 있습니다.
만든 뒤 드는 비용도 함께 보세요
도메인, 서버, 보안 인증서, 유지보수처럼 매달·매년 드는 돈에서 차이가 커지기도 합니다. 2년 합계 비교는 월 구독 홈페이지, 왜 저렴한가요? 글에서, 방식별 제작비 범위는 홈페이지 제작 비용 총정리 글에서 볼 수 있습니다.
자주 묻는 질문
반응형 홈페이지는 휴대폰 화면 비용이 따로 드나요?
보통 제작비 안에 함께 들어 있습니다. 다만 화면 틀이 많거나 예약·결제 같은 기능이 있으면 휴대폰에 맞추는 일이 늘어 전체 금액이 커집니다.
페이지 수가 같은데 견적이 다른 이유는 무엇인가요?
페이지 수보다 페이지 틀 수가 일의 양을 정하기 때문입니다. 같은 모양의 페이지는 틀 하나로 만들 수 있지만, 생김새가 다른 페이지는 틀마다 화면 크기별로 손봐야 합니다.
모바일 전용 홈페이지를 따로 만드는 것이 더 낫지 않나요?
휴대폰 화면을 전혀 다르게 꾸밀 수 있지만, 만들 때와 고칠 때 모두 두 벌을 손봐야 합니다. 내용을 자주 바꾸는 가게라면 한 번 고치면 모든 화면에 반영되는 반응형이 운영하기 수월합니다.
견적서에서 무엇을 먼저 확인해야 하나요?
페이지 틀 수, 확인하는 화면 크기, 휴대폰에서의 기능, 디자인 방식, 휴대폰 화면을 볼 수 있는 시점, 만든 뒤 드는 비용을 봅니다. 두 견적의 이 항목을 맞춰 보면 금액 차이가 어디서 오는지 보입니다.
계약 전에 휴대폰 화면을 볼 수 있나요?
계약 전에는 업체가 만든 실제 운영 사례를 휴대폰으로 열어 보는 것이 가장 확실합니다. 그리고 제작 중에 휴대폰 시안을 따로 보여 주는지 견적서에서 확인해 두면, 휴대폰 화면을 오픈 날 처음 보는 일을 막을 수 있습니다.
