7. PC·태블릿·모바일 화면 맞추기
PC에서 보기 좋은 페이지도 모바일에서는 글자가 잘리거나 버튼이 겹칠 수 있습니다. 공통 설정을 먼저 정한 뒤 화면 크기별로 확인합니다.
1단계. 공통 화면부터 만들기
- 상단 데스크톱을 선택합니다.
- 제목·본문·이미지·버튼을 넣고 기본 글자 크기와 배치를 정합니다.
- 긴 문장과 큰 이미지를 실제 사용할 내용으로 넣어 둡니다. 짧은 샘플 문구만으로 확인하면 줄바꿈 문제를 놓칠 수 있습니다.
2단계. 태블릿·모바일 미리보기 열기
- 상단 태블릿을 선택하여 줄바꿈·열 배치·여백을 확인합니다.
- 모바일로 전환하고 같은 항목을 확인합니다.
- 캔버스에 표시된 기기 이름과 폭을 확인합니다. 편집기에 정해진 미리보기 폭은 모든 실제 기기의 폭과 같지는 않습니다.
3단계. 기기별로 필요한 값 조절하기
- 수정할 요소를 선택하고 인스펙터의 기기별 조정을 확인합니다.
- 현재 기기에 제공되는 글자·배치·여백 등의 항목을 조절합니다. 요소마다 별도로 조절할 수 있는 항목이 다릅니다.
- 모바일에서 글자가 너무 좁게 보이면 좌우 여백과 부모 영역 폭부터 확인합니다.
- 설정을 바꾼 후 데스크톱으로 돌아가 공통 화면에 원치 않는 변화가 생기지 않았는지 확인합니다.
안내
특정 기기에 설정 항목이 없다고 해서 다른 기기의 모든 값을 별도로 바꿀 수 있는 것은 아닙니다. 현재 패널에 제공되는 항목을 기준으로 조정해 주세요. 모든 설정 초기화 같은 초기화 기능은 적용 범위를 확인한 뒤 사용합니다.
4단계. 실제 방문자 화면에서 다시 확인하기
- 변경사항을 저장하고 게시합니다.
- 실제 페이지 주소를 PC와 휴대전화에서 엽니다.
- 페이지 끝까지 내려가며 제목·본문·이미지·버튼·폼을 확인합니다.
- 탭과 아코디언을 열고 버튼을 눌러 실제 조작도 확인합니다.
화면별 점검표
- 제목·긴 주소·긴 단어가 화면 밖으로 나가지 않습니다.
- 이미지 속 얼굴·로고·글자가 의도치 않게 잘리지 않습니다.
- 카드가 겹치지 않고 모바일에서 읽기 좋은 순서로 표시됩니다.
- 페이지 전체에 불필요한 가로 스크롤이 없습니다.
- 버튼과 폼을 눌러 사용할 수 있고 고정 요소에 가려지지 않습니다.
사용자 CSS를 추가했다면
화면 폭에 따라 적용하는 CSS는 빌더 미리보기와 실제 방문자 화면에서 결과가 다를 수 있습니다. 실제 모바일 화면의 결과까지 확인해 주세요.