웹사이트를 모바일 반응형으로 만드는 법

웹사이트를 모바일 반응형으로 만들려면 뷰포트 메타 태그를 추가하고, 모바일 우선으로 유연한 너비의 레이아웃을 만들고, CSS 브레이크포인트로 더 큰 화면에서 레이아웃을 재배치하세요. 열을 쌓고, 메뉴를 접고, 이미지를 화면에 맞게 줄이는 식입니다. 그다음 모든 페이지를 휴대폰 너비에서 확인해서, 좌우로 스크롤되는 곳, 너무 작은 글자, 누르기 어려운 작은 버튼이 없는지 보세요. AI로 만든 사이트라면, 명확한 프롬프트 한 번과 휴대폰 크기 미리보기에서의 점검으로 대부분 해결되는 경우가 많습니다.

반응형 디자인이란 실제로 무엇인가

반응형 사이트는 하나의 페이지 세트와 URL을 사용하며, 화면에 맞춰 적응합니다. “m.” 사이트를 따로 만드는 것이 아니라, CSS가 특정 너비에서 레이아웃을 바꿉니다. 이때의 경계를 브레이크포인트라고 합니다. 구성 요소는 다음과 같습니다:

• 뷰포트 메타 태그는 모바일 브라우저에게 기기의 실제 너비를 사용하라고 알려 줍니다.
• 유동적 레이아웃은 고정된 픽셀 너비 대신 퍼센트, 플렉스박스, 그리드를 사용합니다.
• 미디어 쿼리(또는 Tailwind의 md: 같은 프레임워크 클래스)는 특정 너비 이상에서 레이아웃을 바꿉니다.
• 유연한 미디어는 이미지와 영상이 컨테이너에 맞게 줄어듭니다.

이것이 중요한 이유는 방문자 대다수가 휴대폰을 쓸 가능성이 높고, 구글이 페이지의 모바일 버전을 색인하기 때문입니다. 콘텐츠나 링크가 데스크톱에만 있다면, 구글도 그것을 보지 못할 수 있습니다.

선택지와 트레이드오프

모바일 우선이 대개 더 간단합니다. 단일 열이 가장 쉬운 레이아웃이고, 공간이 넓어질 때 열을 추가하는 것이 열을 빼는 것보다 일이 적습니다.

보통 깨지는 부분

뷰포트 태그

휴대폰에서 페이지가 작은 데스크톱 사이트처럼 보인다면, 뷰포트 태그가 빠진 것입니다:

<meta name="viewport" content="width=device-width, initial-scale=1">

maximum-scale=1이나 user-scalable=no는 넣지 마세요. 핀치 줌을 막으면 저시력 사용자가 사이트를 쓰기 어려워집니다.

고정 너비와 가로 스크롤

가장 흔한 반응형 버그는 화면보다 넓은 것입니다. 고정된 width: 1200px 컨테이너, 넓은 표, 긴 URL이나 코드 블록, max-width: 100%가 없는 이미지 등입니다. 그러면 페이지 전체가 좌우로 스크롤됩니다. width 대신 max-width를 쓰고, 텍스트가 줄바꿈되게 하고, 넓은 요소에는 자체 스크롤 영역을 주세요.

내비게이션

데스크톱 메뉴 링크 다섯 개는 휴대폰에 거의 들어가지 않습니다. 보통은 메뉴 버튼을 눌러 패널을 여는 방식으로 해결합니다. 가장 중요한 행동 두세 개, 예를 들어 “예약”, “장바구니”, “로그인”은 계속 보이게 두고, 메뉴가 키보드로도 작동하고 쉽게 닫히는지 확인하세요.

글자와 터치 영역

• 휴대폰에서 본문 글자 약 16px은 합리적인 최소값입니다. 더 작은 글자의 입력란은 아이폰에서 탭할 때 화면이 확대됩니다.
• 버튼과 링크는 누르기 쉽게 만드세요. WCAG 2.2 AA는 최소 24×24 CSS 픽셀(또는 충분한 간격)을 요구합니다. 엄지로 누르기 편하려면 약 44픽셀이 더 좋습니다.
• 인접한 링크 사이에는 간격을 두어 잘못 누르지 않게 하세요.

표와 데이터

넓은 표는 반응형 앱에서 가장 까다로운 부분입니다. 선호도 순서대로 선택지는 다음과 같습니다: 휴대폰에서는 열을 줄이기, 각 행을 카드로 바꾸기, 또는 첫 열을 고정한 채 가로로 스크롤되는 컨테이너에 표를 넣기. 사람들이 무엇을 비교해야 하는지에 따라 고르세요.

이미지와 미디어

max-width: 100%와 height: auto를 사용하고, srcset으로 작은 화면에는 더 작은 파일을 제공하고, 레이아웃이 튀지 않도록 너비와 높이를 지정하세요. 삽입된 영상과 지도는 종횡비를 유지하도록 반응형 래퍼가 필요합니다. 이미지가 작을수록 페이지도 빨라집니다. 웹사이트를 더 빠르게 만드는 법을 참고하세요.

양식

라벨은 입력란 위에 두고, 입력란은 전체 너비로 만들고, 적절한 입력 타입(type="email", type="tel", inputmode="numeric")을 써서 휴대폰이 맞는 키보드를 보여 주게 하세요. 제출 버튼은 엄지가 닿는 곳에 두고, 키보드가 올라와도 보이게 하세요.

호버 전용 동작

휴대폰에는 호버가 없습니다. 호버할 때만 나타나는 툴팁, 드롭다운, 미리보기는 터치 사용자에게 보이지 않습니다. 탭으로도 작동하게 만드세요.

효과가 있는 프롬프트

새로 만드는 경우에는 처음부터 이렇게 말하세요:

모바일 우선으로 만들어 주세요. 휴대폰에서는 단일 열, 태블릿 너비부터 두 열, 데스크톱에서는 전체 레이아웃. 320px 너비에서 가로 스크롤 없음, 본문 글자 최소 16px, 터치 영역 최소 44px, 작은 화면에는 메뉴 버튼, 휴대폰에서는 표가 카드로 바뀌도록 해 주세요.

기존 페이지라면 보이는 것을 설명하세요:

휴대폰에서 /pricing 페이지가 좌우로 스크롤되고, 세 개의 요금제 카드가 나란히 찌그러져 있어요. 768px 아래에서는 카드를 세로로 쌓고, 비교 표는 자체 컨테이너 안에서 가로 스크롤되게 하고 기능 열은 고정해 주세요. 데스크톱 레이아웃은 그대로 두세요.

모든 페이지를 375px 너비에서 확인해 주세요. 넘치거나, 겹치거나, 16px보다 작은 글자나 44px보다 작은 터치 영역이 있거나, 호버로만 작동하는 것을 모두 나열한 뒤 하나씩 고쳐 주세요.

단계별 방법

1. 뷰포트 태그가 페이지 head에 있는지 확인하세요.
2. 너비 320–375px에서 테스트하세요. 브라우저의 기기 모드나 휴대폰 크기 미리보기를 쓰세요. 모든 페이지를 위에서 아래까지 스크롤하세요.
3. 가로 스크롤을 먼저 해결하세요. 너무 넓은 요소를 찾으세요. 그것이 사라지기 전에는 다른 것을 판단하기 어렵습니다.
4. 내비게이션을 정리하세요. 메뉴 버튼, 핵심 행동은 보이게.
5. 주요 흐름마다 글자, 터치 영역, 양식을 확인하세요. 가입, 검색, 결제, 문의.
6. 표와 미디어를 처리하세요. 카드나 스크롤 컨테이너, 반응형 이미지와 임베드.
7. 중간 크기도 확인하세요. 너비를 휴대폰에서 데스크톱까지 천천히 늘려 보세요. 레이아웃은 종종 태블릿 너비 부근에서 깨집니다.
8. 실제 휴대폰에서 테스트하세요. 에뮬레이터는 화면 키보드가 버튼을 가리는 것, 노치, 모바일 데이터에서의 속도 같은 것을 놓칩니다.

흔한 실수

• 휴대폰 크기 하나만 테스트하기. 작은 휴대폰, 큰 휴대폰, 태블릿을 모두 확인하세요.
• 맞추려고 모바일에서 콘텐츠 숨기기. 구글은 모바일 버전을 색인하고, 휴대폰 사용자는 같은 정보를 원합니다.
• 뷰포트 태그에서 확대를 막기.
• 휴대폰에 데스크톱 크기 이미지 제공. 로딩 시간과 데이터를 낭비합니다.
• 고정 위치 요소가 쌓이는 것. 고정 헤더, 쿠키 배너, 채팅 버블이 휴대폰 화면의 절반을 가릴 수 있습니다.
• 작은 화면에서 닫을 수 없는 팝업. 닫기 버튼이 화면 밖에 있을 때.

모바일 체크리스트

• 뷰포트 메타 태그가 있고, 확대가 막히지 않음
• 모든 페이지에서 320px 너비에 가로 스크롤 없음
• 본문 글자 약 16px, 입력란이 화면 확대를 일으키지 않음
• 터치 영역이 충분히 크고 간격이 있음
• 메뉴가 휴대폰과 키보드에서 모두 작동함
• 휴대폰에서 표를 읽을 수 있음 (카드, 열 축소, 또는 스크롤 컨테이너)
• 이미지와 임베드가 크기에 맞게 조정되고, 적절한 크기의 파일이 제공됨
• 양식이 올바른 입력 타입을 쓰고, 제출 버튼에 엄지가 닿음
• 중요한 것이 호버에 의존하지 않음
• 최소 한 대의 실제 휴대폰에서 테스트함

반응형 레이아웃은 접근성의 일부이기도 합니다. WCAG는 콘텐츠가 320px 너비와 200% 확대에서 작동하기를 요구합니다. 사람들이 휴대폰으로 매일 쓸 앱을 만들고 있다면, 모바일 친화적 웹 앱 만드는 법에서 설치 가능한 PWA까지 더 깊이 다룹니다.

Mythex의 반응형 디자인

Mythex는 반응형 웹 앱을 만들고, Pro에서는 이를 Android와 iPhone 앱으로 감쌀 수 있습니다. 워크스페이스에서 미리보기 위의 휴대폰 아이콘(모바일로 전환)을 누르면 앱을 휴대폰 크기 프레임에서 볼 수 있고, 프레임 가장자리를 끌어서 다른 너비도 시도할 수 있습니다(미리보기와 코드). 작은 화면 레이아웃을 고치는 짧은 시작 프롬프트는 모바일 반응형 프롬프트 문서에 있습니다. 실제 휴대폰에서도 확인하세요. 게시된 URL을 열거나, 미리보기 링크를 공유해서 휴대폰에서 열어 보세요.

자주 묻는 질문