> For the complete documentation index, see [llms.txt](https://help.qshop.ai/customer_support/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://help.qshop.ai/customer_support/studio-editor/editor/layout.md).

# 레이아웃 추가하고 설정하기

### 개요

레이아웃은 섹션 안에서 콘텐츠를 배치하는 구조입니다. 섹션이 페이지의 큰 영역을 나누는 단위라면, 레이아웃은 그 안에서 텍스트, 이미지, 버튼 같은 블록을 어떤 방향과 간격으로 배치할지 정하는 역할을 합니다.

스튜디오 에디터에서는 스택, 그리드, 복합 스택 같은 레이아웃을 사용해 콘텐츠를 정렬할 수 있습니다. 레이아웃을 사용하면 여러 블록을 더 안정적으로 배치할 수 있고, PC와 모바일 화면에서도 콘텐츠 흐름을 관리하기 쉽습니다.

### 1. 레이아웃이란?

레이아웃은 섹션 안에서 콘텐츠의 배치 구조를 만드는 요소입니다. 텍스트와 이미지를 나란히 배치하거나, 여러 개의 카드를 일정한 간격으로 정렬하거나, 콘텐츠를 위아래로 쌓아 보여줄 때 사용합니다.

예를 들어 서비스 소개 섹션을 만든다면, 왼쪽에는 이미지 블록을 두고 오른쪽에는 제목, 설명, 버튼 블록을 배치할 수 있습니다. 이때 이미지와 텍스트 영역을 나누는 구조가 레이아웃입니다.

```
서비스 소개 섹션
└ 2열 레이아웃
  ├ 이미지 블록
  └ 텍스트 영역
    ├ 제목 블록
    ├ 설명 블록
    └ 버튼 블록
```

레이아웃을 먼저 잡으면 블록을 하나씩 직접 배치하는 것보다 화면 구조가 안정적입니다. 특히 여러 콘텐츠를 반복하거나, PC와 모바일 화면에서 자연스럽게 정렬해야 할 때 레이아웃을 사용하는 것이 좋습니다.

### 2. 섹션, 레이아웃, 블록의 차이 이해하기

스튜디오 에디터에서는 페이지를 섹션, 레이아웃, 블록 단위로 구성합니다. 섹션은 페이지의 큰 영역이고, 레이아웃은 섹션 안에서 콘텐츠를 배치하는 구조입니다. 블록은 텍스트, 이미지, 버튼처럼 실제로 화면에 표시되는 요소입니다.

```
페이지
└ 섹션
  └ 레이아웃
    └ 블록
```

<table><thead><tr><th width="150.43792724609375">구분</th><th>설명</th></tr></thead><tbody><tr><td>페이지</td><td>사이트를 구성하는 실제 화면입니다.</td></tr><tr><td>섹션</td><td>페이지 안에서 콘텐츠를 구분하는 큰 영역입니다.</td></tr><tr><td>레이아웃</td><td>섹션 안에서 콘텐츠를 배치하는 구조입니다.</td></tr><tr><td>블록</td><td>텍스트, 이미지, 버튼처럼 실제로 표시되는 요소입니다.</td></tr></tbody></table>

예를 들어 고객 후기 영역을 만든다면, 먼저 고객 후기 섹션을 추가합니다. 그 안에 3열 레이아웃을 넣고, 각 열 안에 후기 카드 내용을 배치할 수 있습니다.

### 3. 추가 요소에서 레이아웃 열기

레이아웃은 왼쪽 사이드바의 **추가 요소**에서 추가합니다. 먼저 레이아웃을 넣을 페이지와 섹션을 정한 뒤, 필요한 레이아웃 유형을 선택합니다.

1. 스튜디오 에디터에서 편집할 페이지를 엽니다.
2. 레이아웃을 추가할 섹션을 선택합니다.
3. 왼쪽 사이드바에서 **추가 요소**를 엽니다.
4. **레이아웃**을 선택합니다.
5. 추가할 레이아웃 유형을 확인합니다.

레이아웃 목록이 표시됩니다.

### 4. 주요 레이아웃 유형 이해하기

스튜디오 에디터에서는 콘텐츠 목적에 따라 여러 유형의 레이아웃을 사용할 수 있습니다. 한 방향으로 콘텐츠를 쌓고 싶다면 스택을 사용하고, 여러 항목을 일정한 칸으로 나누어 보여주고 싶다면 그리드를 사용할 수 있습니다.

| 레이아웃 유형 | 설명                          |
| ------- | --------------------------- |
| 수평 스택   | 콘텐츠를 왼쪽에서 오른쪽 방향으로 배치합니다.   |
| 수직 스택   | 콘텐츠를 위에서 아래 방향으로 배치합니다.     |
| 열 레이아웃  | 여러 콘텐츠를 가로 열 구조로 나누어 배치합니다. |
| 행 레이아웃  | 여러 콘텐츠를 세로 행 구조로 나누어 배치합니다. |
| 그리드     | 콘텐츠를 행과 열이 있는 칸 구조로 배치합니다.  |
| 복합 스택   | 가로와 세로 구조를 함께 조합해 배치합니다.    |

처음 사용하는 경우에는 수직 스택, 수평 스택, 2열 레이아웃처럼 단순한 구조부터 사용하는 것이 좋습니다. 구조가 익숙해지면 그리드나 복합 스택을 사용해 더 다양한 화면을 만들 수 있습니다.

{% hint style="info" %}
**도움말**: 레이아웃은 블록을 담는 구조입니다. 텍스트, 이미지, 버튼을 먼저 배치하기보다 레이아웃을 먼저 만들고 그 안에 블록을 넣으면 화면을 더 안정적으로 구성할 수 있습니다.
{% endhint %}

### 5. 레이아웃 추가하기

레이아웃을 추가할 때는 먼저 어떤 섹션 안에 넣을지 정합니다. 레이아웃은 섹션 안에서 블록을 배치하는 구조이므로, 일반적으로 섹션을 먼저 추가한 뒤 레이아웃을 배치합니다.

1. 편집할 페이지를 엽니다.
2. 레이아웃을 추가할 섹션을 선택합니다.
3. 왼쪽 사이드바에서 **추가 요소**를 엽니다.
4. **레이아웃**을 선택합니다.
5. 추가할 레이아웃 유형을 선택합니다.
6. 레이아웃을 페이지에 추가합니다.

선택한 레이아웃이 섹션 안에 추가됩니다.

레이아웃을 추가한 뒤에는 그 안에 텍스트, 이미지, 버튼, 폼 같은 블록을 넣어 실제 콘텐츠를 구성합니다.

### 6. 수평 스택 사용하기

수평 스택은 콘텐츠를 가로 방향으로 배치할 때 사용합니다. 이미지와 텍스트를 나란히 배치하거나, 여러 버튼과 카드를 한 줄로 정렬할 때 적합합니다.

1. **추가 요소**를 엽니다.
2. **레이아웃**을 선택합니다.
3. **수평 스택**을 선택합니다.
4. 섹션 안에 수평 스택을 추가합니다.
5. 스택 안에 필요한 블록을 추가합니다.
6. 오른쪽 사이드바에서 정렬과 간격을 조정합니다.

수평 방향으로 콘텐츠를 배치할 수 있는 레이아웃이 추가됩니다.

예를 들어 왼쪽에는 이미지, 오른쪽에는 텍스트와 버튼을 배치하는 소개 영역을 만들 수 있습니다.

```
수평 스택
├ 이미지
└ 텍스트 + 버튼
```

### 7. 수직 스택 사용하기

수직 스택은 콘텐츠를 위에서 아래로 쌓아 보여줄 때 사용합니다. 제목, 설명, 버튼처럼 순서가 있는 콘텐츠를 구성할 때 적합합니다.

1. **추가 요소**를 엽니다.
2. **레이아웃**을 선택합니다.
3. **수직 스택**을 선택합니다.
4. 섹션 안에 수직 스택을 추가합니다.
5. 스택 안에 필요한 블록을 추가합니다.
6. 오른쪽 사이드바에서 정렬과 간격을 조정합니다.

수직 방향으로 콘텐츠를 배치할 수 있는 레이아웃이 추가됩니다.

예를 들어 랜딩페이지의 첫 화면에서 제목, 설명, 버튼을 위에서 아래로 정렬할 수 있습니다.

```
수직 스택
├ 제목
├ 설명
└ 버튼
```

### 8. 열 레이아웃 사용하기

열 레이아웃은 여러 콘텐츠를 가로로 나누어 보여줄 때 사용합니다. 서비스 소개, 기능 비교, 카드 목록처럼 같은 수준의 콘텐츠를 나란히 보여줄 때 적합합니다.

1. **추가 요소**를 엽니다.
2. **레이아웃**을 선택합니다.
3. 2열, 3열, 4열 레이아웃 중 하나를 선택합니다.
4. 섹션 안에 레이아웃을 추가합니다.
5. 각 열 안에 블록을 추가합니다.
6. 열 간 간격과 정렬을 조정합니다.

선택한 열 구조가 섹션 안에 추가됩니다.

예시:

```
3열 레이아웃
├ 기능 1
├ 기능 2
└ 기능 3
```

열 레이아웃을 사용할 때는 각 열의 콘텐츠 양을 비슷하게 맞추는 것이 좋습니다. 한 열만 지나치게 길거나 짧으면 전체 화면의 균형이 어색해질 수 있습니다.

### 9. 그리드 레이아웃 사용하기

그리드 레이아웃은 여러 콘텐츠를 행과 열이 있는 칸 구조로 배치할 때 사용합니다. 포트폴리오, 상품 목록, 기능 카드, 이미지 갤러리처럼 반복되는 콘텐츠를 정리할 때 적합합니다.

1. **추가 요소**를 엽니다.
2. **레이아웃**을 선택합니다.
3. 그리드 레이아웃을 선택합니다.
4. 섹션 안에 그리드를 추가합니다.
5. 각 칸에 텍스트, 이미지, 버튼 같은 블록을 추가합니다.
6. 오른쪽 사이드바에서 행과 열의 간격을 조정합니다.

그리드 구조가 섹션 안에 추가됩니다.

예시:

```
2x2 그리드
├ 카드 1
├ 카드 2
├ 카드 3
└ 카드 4
```

그리드는 같은 형식의 콘텐츠를 정리할 때 유용합니다. 카드 크기, 이미지 비율, 텍스트 길이가 너무 다르면 정렬이 흐트러져 보일 수 있으므로 미리보기에서 함께 확인합니다.

### 10. 복합 스택 사용하기

복합 스택은 가로와 세로 구조를 함께 사용해야 할 때 적합합니다. 단순한 수평 또는 수직 배치만으로 만들기 어려운 화면을 구성할 때 사용할 수 있습니다.

예를 들어 왼쪽에는 큰 이미지 영역을 두고, 오른쪽에는 제목, 설명, 버튼을 세로로 쌓는 구조를 만들 수 있습니다. 또는 위쪽에는 제목 영역을 두고, 아래쪽에는 여러 카드를 가로로 배치할 수도 있습니다.

1. **추가 요소**를 엽니다.
2. **레이아웃**을 선택합니다.
3. 복합 스택을 선택합니다.
4. 섹션 안에 복합 스택을 추가합니다.
5. 각 영역 안에 필요한 블록을 추가합니다.
6. 오른쪽 사이드바에서 정렬, 간격, 크기를 조정합니다.

복합 구조를 가진 레이아웃이 추가됩니다.

복합 스택은 화면을 더 자유롭게 구성할 수 있지만 구조가 복잡해질 수 있습니다. 처음에는 단순한 스택과 그리드부터 사용하고, 필요한 경우 복합 스택으로 확장합니다.

### 11. 레이아웃 크기와 배치 방식 이해하기

레이아웃은 단순히 블록을 넣는 틀이 아니라, 블록이 어떤 기준으로 크기를 차지하고 흐를지 정하는 구조입니다. 스튜디오 에디터에서는 레이아웃의 크기와 배치 방식을 조정해 더 자연스러운 화면을 만들 수 있습니다.

자주 사용하는 개념은 다음과 같습니다.

<table><thead><tr><th width="150.02642822265625">개념</th><th>설명</th></tr></thead><tbody><tr><td>컨테이너 채움</td><td>레이아웃이나 블록이 부모 영역의 공간을 채우도록 설정합니다.</td></tr><tr><td>내용에 맞춤</td><td>안에 들어 있는 콘텐츠 크기에 맞춰 영역이 조정됩니다.</td></tr><tr><td>상대적 흐름</td><td>주변 요소와의 관계에 따라 자연스럽게 배치됩니다.</td></tr><tr><td>자유 배치</td><td>특정 요소를 원하는 위치에 직접 배치할 때 사용합니다.</td></tr></tbody></table>

일반적인 콘텐츠는 상대적 흐름이나 스택 구조 안에서 배치하는 것이 좋습니다. 강조가 필요한 요소나 장식 요소는 자유 배치를 사용해 특정 위치에 둘 수 있습니다.

{% hint style="info" %}
**도움말**: 모든 요소를 자유 배치로 만들면 PC와 모바일 화면에서 정렬이 어색해질 수 있습니다. 기본 구조는 스택이나 그리드로 만들고, 강조가 필요한 일부 요소에만 자유 배치를 사용하는 것이 좋습니다.
{% endhint %}

### 12. 레이아웃 선택하고 설정하기

레이아웃을 추가한 뒤에는 캔버스에서 레이아웃을 선택해 설정을 변경합니다. 오른쪽 사이드바에는 선택한 레이아웃에 맞는 설정 항목이 표시됩니다.

1. 캔버스에서 설정할 레이아웃을 클릭합니다.
2. 오른쪽 사이드바에서 선택된 항목을 확인합니다.
3. 필요한 설정 항목을 엽니다.
4. 방향, 정렬, 간격, 크기, 여백 등을 조정합니다.
5. 캔버스에서 변경 결과를 확인합니다.

레이아웃 설정이 변경됩니다.

#### 자주 설정하는 항목

<table data-search="false"><thead><tr><th width="150.04998779296875">설정 항목</th><th>설명</th></tr></thead><tbody><tr><td>방향</td><td>콘텐츠를 가로 또는 세로로 배치합니다.</td></tr><tr><td>정렬</td><td>콘텐츠를 왼쪽, 가운데, 오른쪽 또는 위아래 기준으로 정렬합니다.</td></tr><tr><td>간격</td><td>블록 사이의 거리를 조정합니다.</td></tr><tr><td>크기</td><td>레이아웃의 너비와 높이를 설정합니다.</td></tr><tr><td>여백</td><td>레이아웃 안쪽 또는 바깥쪽 간격을 조정합니다.</td></tr><tr><td>배경</td><td>레이아웃 영역의 배경을 설정합니다.</td></tr><tr><td>외곽선</td><td>레이아웃 영역의 테두리를 설정합니다.</td></tr></tbody></table>

레이아웃 설정은 화면의 균형에 큰 영향을 줍니다. 특히 정렬, 간격, 크기는 PC와 모바일 화면에서 모두 확인합니다.

### 13. 레이아웃 안에 블록 배치하기

레이아웃은 블록을 담기 위한 구조입니다. 레이아웃을 추가한 뒤에는 그 안에 텍스트, 이미지, 버튼, 폼 같은 블록을 넣어 실제 콘텐츠를 구성합니다.

1. 캔버스에서 블록을 넣을 레이아웃을 선택합니다.
2. 왼쪽 사이드바에서 **추가 요소**를 엽니다.
3. 추가할 블록 유형을 선택합니다.
4. 블록을 레이아웃 안에 추가합니다.
5. 필요한 내용을 입력하거나 교체합니다.
6. 레이아웃 안에서 블록의 정렬과 간격을 확인합니다.

블록이 레이아웃 안에 배치됩니다.

예를 들어 3열 레이아웃 안에 각각 이미지, 제목, 설명을 넣으면 기능 소개 카드 영역을 만들 수 있습니다.

```
3열 레이아웃
├ 이미지 + 제목 + 설명
├ 이미지 + 제목 + 설명
└ 이미지 + 제목 + 설명
```

### 14. 레이아웃 순서 변경하기

페이지 흐름이나 섹션 안의 콘텐츠 순서를 바꾸려면 레이아웃 위치를 변경합니다. 예를 들어 이미지 영역을 텍스트 위로 올리거나, 카드 목록을 설명 영역 아래로 이동할 수 있습니다.

1. 이동할 레이아웃을 선택합니다.
2. 원하는 위치로 이동합니다.
3. 섹션 안에서 콘텐츠 순서가 자연스러운지 확인합니다.

레이아웃 위치가 변경됩니다.

순서를 바꾼 뒤에는 페이지 전체 흐름을 확인합니다. 콘텐츠가 방문자에게 어떤 순서로 읽히는지 보는 것이 중요합니다.

### 15. 레이아웃 복제하기

같은 구조를 반복해서 사용해야 할 때는 레이아웃을 복제할 수 있습니다. 예를 들어 같은 형식의 카드 목록이나 반복되는 소개 영역을 만들 때 기존 레이아웃을 복제한 뒤 내용만 수정합니다.

1. 복제할 레이아웃을 선택합니다.
2. 레이아웃 메뉴를 엽니다.
3. **복제**를 선택합니다.
4. 복제된 레이아웃을 확인합니다.
5. 필요한 내용을 수정합니다.

기존 레이아웃과 같은 구조의 레이아웃이 추가됩니다.

복제한 레이아웃은 문구, 이미지, 버튼 링크를 반드시 확인합니다. 기존 내용이 그대로 남아 있으면 방문자에게 잘못된 정보가 표시될 수 있습니다.

### 16. 레이아웃 삭제하기

사용하지 않는 레이아웃은 삭제할 수 있습니다. 레이아웃을 삭제하면 그 안에 배치한 블록도 함께 삭제될 수 있습니다.

1. 삭제할 레이아웃을 선택합니다.
2. 레이아웃 메뉴를 엽니다.
3. **삭제**를 선택합니다.
4. 삭제 여부를 확인합니다.

선택한 레이아웃이 페이지에서 삭제됩니다.

{% hint style="danger" %}
**주의**: 레이아웃을 삭제하면 그 안에 들어 있는 블록도 함께 사라질 수 있습니다. 삭제하기 전에 필요한 콘텐츠가 있는지 확인합니다.
{% endhint %}

### 17. 모바일 화면 확인하기

레이아웃을 추가하거나 수정한 뒤에는 모바일 화면에서도 확인합니다. PC에서는 가로로 자연스럽게 보이는 레이아웃이 모바일에서는 세로로 쌓이거나 간격이 달라질 수 있습니다.

1. 모바일 캔버스로 전환합니다.
2. 레이아웃 순서가 자연스러운지 확인합니다.
3. 텍스트가 잘리지 않는지 확인합니다.
4. 이미지가 화면 너비에 맞게 표시되는지 확인합니다.
5. 버튼을 누르기 쉬운 크기로 보이는지 확인합니다.
6. 필요한 경우 모바일 화면에 맞게 간격과 정렬을 조정합니다.

모바일 화면에서 레이아웃 표시 상태를 확인할 수 있습니다.

### 18. 미리보기로 레이아웃 확인하기

레이아웃 작업이 끝나면 미리보기에서 실제 화면에 가깝게 확인합니다. 에디터 캔버스에서 자연스러워 보여도 미리보기에서는 여백, 줄바꿈, 이미지 비율, 모바일 배치가 다르게 보일 수 있습니다.

1. 상단 툴바에서 **미리보기**를 클릭합니다.
2. 데스크톱 화면에서 레이아웃이 자연스럽게 보이는지 확인합니다.
3. 모바일 화면에서도 레이아웃을 확인합니다.
4. 블록이 잘리거나 겹치지 않는지 확인합니다.
5. 열과 행의 간격이 적절한지 확인합니다.
6. 문제가 있으면 에디터로 돌아가 레이아웃을 수정합니다.

미리보기에서 레이아웃 구성을 확인할 수 있습니다.