반응형 홈페이지 전환
반응형 홈페이지 전환: PC 전용 사이트를 폰에 맞추는 두 가지 방법
반응형 홈페이지 전환은 기존 코드에 화면 크기별 CSS를 덧대는 방법과, 반응형 구조로 새로 만드는 방법 두 가지가 있어요. 표(table)로 짠 레이아웃이나 고정 폭(예: 980px)으로 만든 사이트는 덧대기만으로는 폰에서 깨지는 곳이 남기 쉬워서 새로 만드는 쪽이 대개 일이 적어요.
내 사이트가 반응형인지 확인하는 법
- 폰으로 사이트를 열어 손가락으로 확대하지 않고 글을 읽을 수 있는지 봐요.
- 화면을 옆으로 밀었을 때 가로로 밀리는지 봐요. 밀리면 가로 넘침이 있는 거예요.
- PC 브라우저에서 창 폭을 줄여 메뉴가 접히는지 봐요.
- 페이지 소스에서
<meta name="viewport"줄이 있는지 찾아봐요. 없으면 반응형이 아니에요.
두 가지 전환 방법 비교
| 구분 | 기존 코드에 덧대기 | 반응형으로 새로 만들기 |
|---|---|---|
| 맞는 경우 | 이미 div 구조이고 폭만 고정된 사이트 | 표 레이아웃, 고정 폭, 이미지로 만든 글자 |
| 작업 범위 | 메뉴, 이미지, 표, 글자 크기 조정 | 화면 설계부터 다시 |
| 남는 문제 | 페이지마다 예외가 생기기 쉬움 | 옛 주소 넘기기를 챙겨야 함 |
| 이후 관리 | 예전 구조를 그대로 안고 감 | 한 코드로 PC·폰을 함께 관리 |
전환할 때 꼭 볼 항목
- 메뉴: 폰에서는 접는 메뉴로 바꿔요.
- 이미지 속 글자: 이미지 안에 글자를 넣었으면 폰에서 읽히지 않아요. 글자는 텍스트로 빼요.
- 표: 열이 많은 표는 폰에서 넘쳐요. 4열 이하로 줄이거나 가로 스크롤 상자에 넣어요.
- 버튼 크기: 손가락으로 누르기 좋게 높이 44px 안팎으로 잡아요.
- 전화 걸기: 전화번호에
tel:링크를 걸어 폰에서 바로 걸 수 있게 해요.
플럿WX로 맡기면
플럿WX는 처음부터 반응형으로 만들어요. 폰 화면에서 가로 넘침이 없는지, 하단 문의 버튼이 보이는지 확인한 뒤 넘겨 드려요. 기존 사이트를 반응형으로 다시 만드는 경우도 같은 가격표를 써요.
계산 예시 · 부가세 포함
| 메인 1페이지 | 330,000원 |
| 페이지 추가 2장 | 220,000원 |
| 문의 폼 | 55,000원 |
예상 금액 범위 605,000~790,000원
견적 계산기 단가로 계산한 예시예요. 최종 금액은 문의 내용을 보고 메일로 확정해요.
자주 묻는 질문
반응형과 모바일 전용 사이트는 뭐가 다른가요?+
반응형은 한 주소, 한 코드가 화면 폭에 맞춰 바뀌어요. 모바일 전용은 m. 주소를 따로 두는 방식이라 내용을 두 번 고쳐야 해요.
반응형으로 바꾸면 주소도 바뀌나요?+
같은 도메인을 쓰면 주소는 그대로예요. 페이지 주소가 바뀌는 곳만 301로 넘기면 돼요.
폰 화면은 어떤 기기로 확인하나요?+
폭 360~430px 폰 화면과 태블릿, PC 폭에서 각각 열어 가로 넘침과 글자 크기를 확인해요.
함께 읽기: 소상공인 홈페이지 만드는 방법 비교 (kryft)