RESPONSIVE · 02

모바일 화면을 기준으로 짜는 반응형 사이트 제작

반응형은 디자인 취향이 아니라 검색의 전제 조건입니다. 구글이 모바일 화면에 보이는 내용을 기준으로 색인하기 때문입니다. 좁은 화면에서 먼저 배치를 잡고 넓은 화면으로 넓혀 가면, 어느 기기에서도 내용이 빠지지 않습니다.

When you need it

어떤 상태일 때 필요한가

휴대폰으로 열면 글자가 잘리고 버튼이 겹치는 사이트가 아직 많습니다. 더 큰 문제는 모바일에서 일부 내용을 감춰 둔 경우입니다. 구글은 모바일 화면에 보이는 것을 기준으로 색인하기 때문에, 데스크톱에만 있고 모바일에 없는 글은 검색에 반영되지 않습니다. 화면이 좁아서 생기는 문제가 아니라 검색 자산이 사라지는 문제입니다.

Deliverables

무엇을 받으시나요

모바일 우선 레이아웃 설계
하나의 주소로 모든 화면 대응
터치 목표 크기 · 본문 가독성 기준 적용
모바일 기준 Core Web Vitals 최적화
기존 사이트의 반응형 전환
How it works

진행 방식

  1. 1

    깨지는 지점 파악

    방문자가 실제로 쓰는 기기 비율을 먼저 확인하고, 어느 화면 폭에서 무엇이 깨지는지 목록으로 만듭니다. 여기서 기준 화면이 정해집니다.

  2. 2

    모바일 우선 설계

    좁은 화면에서 배치를 먼저 잡고 넓은 화면으로 넓혀 갑니다. 반대 순서로 하면 모바일에서 무엇을 덜어낼지 고민하게 되고, 그 과정에서 내용이 빠집니다.

  3. 3

    단일 주소로 구현

    같은 주소, 같은 HTML이 화면 크기에 따라 배치만 바꾸도록 만듭니다. 모바일 전용 주소를 따로 두지 않아 검색 자산이 갈라지지 않습니다.

  4. 4

    실제 기기 검증

    시뮬레이터가 아니라 실제 휴대폰에서 확인합니다. 모바일 회선 기준 로딩 속도와 화면이 밀리는 정도(CLS)까지 측정해 넘겨드립니다.

FAQ

반응형 사이트 제작, 자주 받는 질문

반응형 사이트와 모바일 사이트는 다른 건가요?

다릅니다. 모바일 사이트는 m으로 시작하는 별도 주소를 따로 만드는 방식이고, 반응형은 같은 주소가 화면 크기에 맞춰 배치를 바꾸는 방식입니다. 주소가 둘로 갈라지면 검색 자산도 갈라지고 관리도 두 배가 되기 때문에, 특별한 이유가 없으면 반응형으로 만듭니다.

지금 있는 사이트를 반응형으로 바꿀 수 있나요?

대부분 가능합니다. 다만 구조에 따라 새로 짜는 편이 빠르고 저렴한 경우도 있습니다. 도메인 주소를 주시면 무료 점검에서 지금 코드를 먼저 확인하고, 전환과 신규 제작 중 어느 쪽이 나은지 근거와 함께 회신드립니다.

반응형으로 만들면 모바일 속도도 빨라지나요?

자동으로 빨라지지는 않습니다. 배치만 바뀌고 이미지와 스크립트는 그대로면 오히려 휴대폰에서 더 느려질 수 있습니다. 화면 크기에 맞는 이미지를 따로 내려보내고 필요 없는 스크립트를 줄이는 작업을 함께 진행합니다.

웹사이트 제작과 무엇이 다른가요?

웹사이트 제작은 정보 구조부터 새로 짓는 전체 작업이고, 반응형은 그중 화면 대응을 따로 떼어낸 작업입니다. 새로 만드시는 경우 반응형은 제작 범위에 이미 포함되니 따로 신청하실 필요가 없습니다. 이미 운영 중인 사이트의 모바일 화면만 문제라면 이쪽만 진행하시면 됩니다.

Other services

함께 맡길 수 있는 축

Free audit

지금 사이트가 어디서 막혔는지부터 봅니다

도메인 주소만 주시면 무료로 점검해 드립니다. 저희가 도울 수 없는 일이면 그렇게 말씀드립니다.