문의하기

본문 영역

디자인 빌더

디자인 빌더 · PC·태블릿·모바일 화면 따로 맞추기

  • 이용가이드
  • 작성자 : 안목
  • 작성일 : 2026-10-08
  • 조회수 : 29

손님은 PC·태블릿·휴대폰으로 들어옵니다. 화면 크기 단추로 바꿔 보며, 작은 화면에서 어색한 곳만 따로 고칩니다.

화면 바꾸기

윗줄 가운데 화면 크기 단추 세 개. 1번 데스크탑, 2번 태블릿, 3번 모바일입니다.
그림 1화면 크기 단추
  1. 데스크탑 — PC 화면입니다. 처음엔 이 화면입니다.
  2. 태블릿 — 편집 화면이 태블릿 틀 안에 그려집니다.
  3. 모바일 — 편집 화면이 휴대폰 틀 안에 그려집니다.

태블릿·모바일에서 본 모습

태블릿·모바일 화면에서도 글자를 누르거나 톱니 단추로 패널을 열어 똑같이 고칠 수 있습니다. 패널 제목이 「Tablet 위젯 설정」·「Mobile 위젯 설정」으로 바뀌어 어느 화면을 고치는지 알려 줍니다.

태블릿 틀 안에 그려진 메인페이지. 헤더 메뉴와 첫 화면 제목이 태블릿 폭에 맞게 보입니다.
그림 2태블릿 화면

무엇이 화면마다 따로 저장되나

휴대폰 틀 안에 그려진 메인페이지. 제목이 두 줄로 줄바꿈되어 보입니다.
그림 3모바일 화면
  • 특정 화면에서만 위젯을 감추려면 위젯 설정 패널의 영역 숨김처리에서 PC · Tablet · Mobile 가운데 고르세요.
  • PC에서 먼저 다 만든 다음, 모바일로 바꿔 글자 크기와 여백만 줄이는 차례가 편합니다.

표를 좌우로 밀어서 보세요.

화면별로 저장되는 것
고치는 것어떻게 저장되나
글자 내용PC·태블릿·모바일이 함께 씁니다. 어느 화면에서 고쳐도 모두 바뀝니다.
글자 크기·줄 간격·자간·정렬고친 화면에만 들어갑니다.
위젯 설정 패널의 칸(배경·여백 등)고친 화면에만 들어갑니다. 태블릿에서 비워 둔 칸은 PC 값을, 모바일에서 비워 둔 칸은 태블릿(없으면 PC) 값을 따릅니다.
사진(이미지 설정)화면마다 따로 넣을 수 있고, 비워 두면 PC 사진을 씁니다.
그리드 칸 나누기칸을 쪼갠 구조는 함께 쓰고, 크기·간격·정렬은 화면마다 따로 저장됩니다.
사이트 설정(색·폭·글꼴 등)패널 제목이 「PC 사이트 설정」처럼 바뀌며 화면마다 따로 정할 수 있습니다.

여기까지 확인했나요

  • 모바일 화면으로 바꿔 글자가 넘치거나 잘리는 곳이 없는지 봤습니다.
  • 모바일에서만 글자 크기·여백을 줄였습니다.
  • 「사이트 게시」 뒤 휴대폰으로 실제 홈페이지를 열어 확인했습니다.