PC에서는 정상인데 휴대폰에서 제목이 여러 줄로 늘어나고 버튼이 화면 밖으로 밀리나요? CodeBuilder의 📱 반응형코딩에서 576 화면만 골라 글자 크기·줄 간격·버튼 배치를 고친 뒤, 768과 기본 화면이 그대로인지 확인하는 순서를 안내합니다.
이 글의 목표는 모바일에서 겹치는 제목과 버튼만 고치고, 이미 잘 보이는 PC 화면은 바꾸지 않는 것입니다.
CodeBuilder 화면과 메뉴명은 2026년 8월 30일 실제 화면과 원본 코드에서 확인했습니다. 화면 안의 ‘온담 베이커리’는 기능 설명을 위한 가상 실습 사이트이며 실제 고객이나 제작 성과가 아닙니다.
PC는 괜찮은데 모바일만 깨지는 이유
PC 화면에서 한 줄이던 제목도 화면 폭이 줄면 두세 줄로 바뀝니다. 여기에 큰 글자 크기, 넓은 좌우 여백, 고정 너비, 가로로만 배치된 버튼이 함께 있으면 글자와 버튼이 겹치거나 가로 스크롤이 생깁니다.
이 문제를 고치려고 기본 화면의 스타일을 먼저 바꾸면 PC까지 함께 달라질 수 있습니다. 모바일에서만 필요한 값은 576 화면에서 수정하고, 수정 뒤 768과 기본 화면으로 이동해 다른 크기가 유지되는지 확인하는 것이 핵심입니다.
수정 전에 현재 작업본부터 지킵니다
반응형 작업은 한 요소가 아니라 부모 묶음의 배치까지 바꿀 수 있습니다. 먼저 🕒 history에서 현재 시점을 확인하고, 어떤 페이지 파일을 수정하는지 기록해 두세요. 잘못된 크기에서 수정했을 때 돌아갈 기준점이 생깁니다.
저장 전 비교와 복원 순서가 낯설다면 내려받기 전에 Diff·미리보기·history로 실수를 찾는 순서를 먼저 확인하세요.
1. ‘📱 반응형코딩’을 열고 576을 선택합니다
CodeBuilder에서 문제가 보이는 페이지 파일을 연 다음 상단의 📱 반응형코딩을 누릅니다. 비주얼 화면 상단에는 기본·1500·1200·992·768·576 크기 버튼이 나타납니다.
- 모바일에서 깨지는 제목과 버튼이 있는 페이지 파일을 엽니다.
- 📱 반응형코딩을 누릅니다.
- 상단 크기 버튼에서 576을 선택합니다.
- 화면에서 문제가 되는 제목을 클릭합니다.
576은 ‘화면 폭이 정확히 576px인 기기만’ 뜻하는 것이 아니라 576px 이하에 적용할 규칙을 편집하는 기준입니다. 따라서 390px 안팎의 일반 휴대폰 화면에도 이 규칙이 적용됩니다.
2. 제목의 폰트 크기와 줄 간격을 줄입니다
제목을 선택하면 오른쪽 🎨 스타일 패널에서 값을 조절할 수 있습니다. 먼저 🔤 텍스트 → 폰트 크기를 줄이고, 제목 줄이 서로 붙어 보이면 ✨ 고급 → 줄 간격을 함께 조절합니다.
예를 들어 PC 제목이 54px이라면 모바일에서는 32px부터 확인하고, 줄 간격은 1.15~1.3 범위에서 실제 문장을 보며 맞출 수 있습니다. 이 숫자는 모든 사이트의 정답이 아니라 출발점입니다. 제목이 두세 줄로 자연스럽게 읽히고 버튼과 겹치지 않는 값을 선택하세요.
- 글자가 화면 밖으로 나가면 폰트 크기와 최대 너비를 확인합니다.
- 줄이 서로 붙으면 줄 간격을 조금 늘립니다.
- 단어가 지나치게 잘게 끊기면 제목 폭과 좌우 여백을 함께 봅니다.
3. 버튼 하나보다 버튼을 감싼 묶음을 고칩니다
버튼 두 개가 나란히 있다가 모바일에서 겹친다면 개별 버튼보다 두 버튼을 감싼 부모 묶음을 먼저 선택합니다. 선택이 어려우면 상단의 🌲 트리에서 버튼의 바깥 요소를 찾습니다.
- 📐 레이아웃 → 방향(flex)을 가로에서 세로로 바꿔 봅니다.
- 가로 배치를 유지하려면 줄바꿈(flex-wrap)을 허용합니다.
- 간격(gap)을 12px 정도부터 확인합니다.
- 📦 여백 & 모서리에서 버튼의 좌우 여백이 지나치게 크지 않은지 봅니다.
버튼 안의 글자가 잘린다면 버튼 너비를 무조건 크게 만들기보다, 부모 묶음의 방향과 버튼 좌우 여백을 먼저 조정하는 편이 작은 화면에서 안정적입니다.
4. 768과 기본 화면으로 이동해 수정 범위를 확정합니다
576에서 값을 바꾼 뒤 768로 이동하면 방금 수정한 값이 576 이하의 반응형 규칙으로 확정됩니다. 이어서 기본으로 이동해 PC 화면의 제목 크기와 버튼 배치가 그대로인지 확인합니다.
- 576: 제목이 읽기 좋은 줄 수인지, 버튼이 화면 안에 있는지 확인
- 768: 태블릿에서 버튼이 불필요하게 세로로 바뀌지 않았는지 확인
- 기본: PC 제목 크기와 가로 버튼 배치가 유지되는지 확인
마지막으로 👁 미리보기의 576 버튼과 📱 QR을 사용합니다. 576 미리보기는 반응형 규칙을 빠르게 확인하는 화면이고, 실제 휴대폰은 더 좁을 수 있으므로 QR로 가로 스크롤과 버튼 터치 영역까지 확인해야 합니다.
수정이 예상대로 보이지 않을 때 복구하는 방법
- PC까지 작아졌습니다: 기본 화면에서 수정했을 가능성이 큽니다. 되돌리기나 history로 복원한 뒤 576을 다시 선택합니다.
- 제목 값이 바뀌지 않습니다: 제목 글자 대신 바깥 섹션을 선택했는지 확인하고 🌲 트리에서 제목 요소를 다시 고릅니다.
- 버튼이 계속 겹칩니다: 개별 버튼이 아니라 두 버튼을 감싼 부모 묶음의 방향·줄바꿈·간격을 확인합니다.
- 수정값이 미리보기에 없습니다: 다른 크기로 한 번 이동해 규칙을 확정하고 저장한 뒤 미리보기를 새로고침합니다.
- 가로 스크롤이 남습니다: 고정 너비, 최소 너비, 큰 좌우 여백, 줄바꿈이 막힌 요소를 차례로 확인합니다.
완료 확인표
- 수정 전 history에서 돌아갈 시점을 확인했다.
- 기본이 아니라 576 화면에서 모바일 값을 수정했다.
- 제목의 폰트 크기와 줄 간격을 실제 문장으로 확인했다.
- 버튼 묶음의 방향·줄바꿈·간격을 확인했다.
- 768과 기본 화면에서 기존 디자인이 유지되는지 확인했다.
- 576 미리보기 또는 QR로 실제 휴대폰의 가로 스크롤을 확인했다.
글자와 버튼을 고친 뒤 대표 사진까지 모바일에서 잘리는지 확인하려면 CodeBuilder에서 홈페이지 대표 사진 바꾸기를 이어서 보세요.
