---
url: 'https://dxpr.com/ko/hc/documentation/learn-dxpr-builder/migration/from-layout-builder'
title: '휴대전화에 맞게 레이아웃 조정하기 | DXPR'
author:
  name: Jurriaan
  url: 'https://dxpr.com/users/jurriaan'
date: '2026-10-24T08:56:56+00:00'
updated: '2026-10-24T09:09:48+00:00'
copyright: 'Copyright DXPR. All rights reserved.'
type: article
summary: |-
  페이지는 휴대전화와 태블릿에 스스로 적응합니다. 넓은 화면에서는 컬럼이 나란히, 작은 화면에서는 쌓입니다. 이 페이지에서는 직접 제어하는 법을 설명합니다. 화면 크기마다 컬럼 레이아웃을 정하고, 넓은 화면에서 순서를 뒤집으며, 특정 기기에서만 요소를 표시합니다. 예제에서는 네 컬럼의 로우를 태블릿에서 2×2로 바꿉니다.
  동영상에서는 사진을 휴대전화에서 숨긴 뒤 창을 좁혀 사라지는 모습을 보여줍니다.
tags:
  - 'Verhuizen vanaf een andere builder'
image: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
published: true
og:
  site_name: DXPR
  updated_time: '2026-10-24T09:09:48+0000'
  'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.'
schema:
  '@context': 'https://schema.org'
  '@graph':
    -
      mainEntity: {  }
    -
      '@type': TechArticle
      headline: '휴대전화에 맞게 레이아웃 조정하기'
      description: |-
        페이지는 휴대전화와 태블릿에 스스로 적응합니다. 넓은 화면에서는 컬럼이 나란히, 작은 화면에서는 쌓입니다. 이 페이지에서는 직접 제어하는 법을 설명합니다. 화면 크기마다 컬럼 레이아웃을 정하고, 넓은 화면에서 순서를 뒤집으며, 특정 기기에서만 요소를 표시합니다. 예제에서는 네 컬럼의 로우를 태블릿에서 2×2로 바꿉니다.
        동영상에서는 사진을 휴대전화에서 숨긴 뒤 창을 좁혀 사라지는 모습을 보여줍니다.
      image:
        '@type': ImageObject
        url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
        width: '1200'
        height: '630'
      datePublished: '2026-10-24T08:56:56+0000'
      dateModified: '2026-10-24T09:09:48+0000'
      author:
        '@type': Organization
        '@id': 'https://dxpr.com/#organization'
        name: DXPR
        url: 'https://dxpr.com/'
        logo:
          '@type': ImageObject
          url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg'
          width: '1348'
          height: '501'
      publisher:
        '@type': Organization
        '@id': 'https://dxpr.com/#organization'
        name: DXPR
        url: 'https://dxpr.com/'
        logo:
          '@type': ImageObject
          url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg'
          width: '1348'
          height: '501'
      mainEntityOfPage: 'https://dxpr.com/ko/hc/documentation/learn-dxpr-builder/migration/from-layout-builder'
      articleSection: 'Verhuizen vanaf een andere builder'
    -
      '@type': WebPage
      '@id': 'https://dxpr.com/ko/hc/documentation/learn-dxpr-builder/migration/from-layout-builder'
      description: |-
        페이지는 휴대전화와 태블릿에 스스로 적응합니다. 넓은 화면에서는 컬럼이 나란히, 작은 화면에서는 쌓입니다. 이 페이지에서는 직접 제어하는 법을 설명합니다. 화면 크기마다 컬럼 레이아웃을 정하고, 넓은 화면에서 순서를 뒤집으며, 특정 기기에서만 요소를 표시합니다. 예제에서는 네 컬럼의 로우를 태블릿에서 2×2로 바꿉니다.
        동영상에서는 사진을 휴대전화에서 숨긴 뒤 창을 좁혀 사라지는 모습을 보여줍니다.
      breadcrumb:
        '@type': BreadcrumbList
        itemListElement:
          -
            '@type': ListItem
            position: 1
            name: 홈
            item: 'https://dxpr.com/ko'
      publisher:
        '@type': Organization
        '@id': 'https://dxpr.com/#organization'
        name: DXPR
      inLanguage: ko
---
[Help Center](/ko/node/75)/[Documentation](/ko/hc/documentation) /[Learn DXPR Builder](/hc/documentation/learn-dxpr-builder) /[Start here](/hc/documentation/learn-dxpr-builder/start-here) /[Verhuizen vanaf een andere builder](/hc/documentation/learn-dxpr-builder/migration) # 휴대전화에 맞게 레이아웃 조정하기.

 Learn DXPR BuilderStart hereVerhuizen vanaf een andere builder

   ## In this guide

 Related guides

- [호버에 반응하게 만들기](/ko/hc/documentation/learn-dxpr-builder/migration/from-paragraphs)
- [Element picker](/hc/documentation/learn-dxpr-builder/editing/element-picker)

페이지는 휴대전화와 태블릿에 스스로 적응합니다. 넓은 화면에서는 컬럼이 나란히, 작은 화면에서는 쌓입니다. 이 페이지에서는 직접 제어하는 법을 설명합니다. 화면 크기마다 컬럼 레이아웃을 정하고, 넓은 화면에서 순서를 뒤집으며, 특정 기기에서만 요소를 표시합니다. 예제에서는 네 컬럼의 로우를 태블릿에서 2×2로 바꿉니다.

동영상에서는 사진을 휴대전화에서 숨긴 뒤 창을 좁혀 사라지는 모습을 보여줍니다.

  ## 시작하기 전에

- 페이지에 동일한 컬럼 네 개의 로우가 있습니다. 자세한 내용은 [Rows and columns](/ko/hc/documentation/learn-dxpr-builder/layout/rows-and-columns)을 참조합니다.

## 화면 크기별 레이아웃 선택하기

1. 로우에 마우스를 올리고 컨트롤 표시줄의 격자 아이콘을 클릭합니다. **Medium devices (≥ 768px)** 패널이 있는 레이아웃 대화상자가 열립니다.
2. 버튼 **Add screen size**를 클릭합니다. **Extra small (< 576px)**로 설정된 두 번째 패널이 열립니다.
3. 해당 패널의 드롭다운에서 **Small devices (≥ 576px)**를 선택합니다.
4. 항목 **Custom Layout**을 클릭하고 `1/2 + 1/2 + 1/2 + 1/2`를 입력한 뒤 **Save**를 클릭합니다.
5. 도구 모음에서 **Save**를 클릭합니다.

절반 네 개는 네 컬럼을 그대로 두고 줄에 두 개씩 배치합니다. 동일한 컬럼 두 개 타일은 모든 화면 크기에서 로우를 두 컬럼으로 줄입니다.

## 표시 내용

데스크톱에서는 네 컬럼이 여전히 한 줄에 있습니다. 브라우저 창을 768픽셀 미만으로 좁히면 둘씩 감싸고, 576픽셀 미만에서는 한 줄에 하나씩 쌓이며, 에디터에서 보이는 순서대로 표시됩니다.

레이아웃은 해당 화면 크기부터 적용되며, 더 큰 화면 크기에 자체 레이아웃이 있으면 거기까지입니다. 새 로우는 모두 **Medium devices (≥ 768px)**용 레이아웃 하나로 시작하므로 휴대전화와 작은 태블릿에서는 컬럼이 쌓입니다. 패널의 **Remove screen size**는 해당 레이아웃을 다시 삭제합니다.

## 넓은 화면에서 순서 뒤집기

로우의 **More** 메뉴를 열고 **Settings**를 선택한 뒤 **Mirror row**를 켭니다. 768픽셀 이상에서는 컬럼이 역순으로 표시되고, 작은 화면에서는 에디터 순서대로 쌓입니다.

사진과 텍스트가 번갈아 나오는 로우에 사용합니다. 에디터에서는 사진을 먼저 두어 휴대전화에서는 텍스트 위에 사진이 나오게 하고, 한 줄 걸러 미러링하여 데스크톱에서는 사진이 오른쪽에 나오게 합니다.

## 화면 크기별로 요소 표시 또는 숨기기

1. 요소의 **More** 메뉴를 열고 **Settings**를 선택합니다.
2. 칩은 다음 그룹에서 고릅니다. **HTML classes** 아래 **Responsive Visibility** 그룹에서 칩을 고릅니다(예: **Hidden on extra small devices, phones (<576px)**).
3. 버튼 **Save**를 클릭합니다.

각 **Hidden on** 칩은 하나의 화면 크기에서만 요소를 숨깁니다. 각 **Visible on** 칩은 해당 한 크기에서만 표시하고 나머지에서는 모두 숨깁니다.

## 화면 크기

| Label in the layout dialog | Screen width |
|---|---|
| **Extra small (< 576px)** | 세로 모드의 휴대전화 |
| **Small devices (≥ 576px)** | 큰 휴대전화, 작은 태블릿 |
| **Medium devices (≥ 768px)** | 태블릿 |
| **Large devices (≥ 992px)** | 노트북 |
| **Extra large (≥ 1200px)** | 데스크톱 |
| **Extra extra large (≥ 1400px)** | 대형 데스크톱 |

요소 **Positioned layers**에는 자체 **Responsive** 토글이 있으며, 기본적으로 꺼져 있습니다. 창 너비에 따라 캔버스 높이와 텍스트를 조절하려면 켭니다. 구성이 비율을 유지합니다.

## 변경이 보이지 않는 경우

- **태블릿에서도 컬럼이 계속 쌓입니다.** 해당 화면 크기의 레이아웃이 로우에 없어 768픽셀 미만에서 컬럼이 쌓입니다. 로우의 격자 아이콘을 열고 **Add screen size**를 클릭한 뒤 **Small devices (≥ 576px)**를 고릅니다.
- **모든 화면 크기에서 요소가 사라졌습니다.** 두 개의 **Visible on** 칩이 있으며, 각각 서로가 표시하는 곳에서 숨깁니다. 하나만 유지하거나 숨길 크기마다 **Hidden on** 칩을 하나씩 사용합니다.
- **휴대전화에서 Mirror row가 동작하지 않습니다.** **Mirror row**는 768픽셀 이상에서 작동합니다. 휴대전화에서 순서를 변경하려면 에디터에서 컬럼을 직접 이동합니다.

## 다음 단계

- [Rows and columns](/ko/hc/documentation/learn-dxpr-builder/layout/rows-and-columns)에서 여기에 반응형으로 만드는 로우를 만듭니다.
- [Edit a page on your phone or tablet](/hc/documentation/learn-dxpr-builder/editing/mobile-editing)에서 작은 화면에서 페이지를 확인하고 수정합니다.
- [Run a section edge to edge](/ko/hc/documentation/learn-dxpr-builder/design/full-width-layouts)에서 콘텐츠 너비를 정합니다.