> 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/blocks.md).

# 블록 추가하고 설정하기

### 개요

블록은 페이지에 실제로 표시되는 콘텐츠 요소입니다. 텍스트, 이미지, 버튼, 폼, 아이콘처럼 방문자가 직접 보거나 사용하는 요소가 블록에 해당합니다.

스튜디오 에디터에서는 섹션 안에 레이아웃을 만들고, 그 안에 필요한 블록을 추가해 화면을 구성합니다. 블록을 추가한 뒤에는 오른쪽 사이드바에서 크기, 위치, 여백, 스타일, 클릭 이벤트 등을 설정할 수 있습니다.

### 1. 블록이란?

블록은 사이트 화면에 들어가는 실제 콘텐츠 요소입니다. 제목을 넣고 싶다면 텍스트 블록을 사용하고, 이미지를 보여주고 싶다면 이미지 블록을 사용합니다. 방문자가 클릭할 버튼이 필요하다면 버튼 블록을 추가합니다.

예를 들어 랜딩페이지의 첫 화면은 다음과 같이 구성할 수 있습니다.

```
첫 화면 섹션
└ 수직 레이아웃
  ├ 제목 텍스트 블록
  ├ 설명 텍스트 블록
  └ 버튼 블록
```

블록은 단독으로 배치할 수도 있지만, 일반적으로는 레이아웃 안에 넣어 사용하는 것이 좋습니다. 레이아웃 안에 블록을 배치하면 정렬과 간격을 더 안정적으로 관리할 수 있습니다.

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

스튜디오 에디터에서는 페이지를 섹션, 레이아웃, 블록 단위로 구성합니다. 섹션은 페이지의 큰 영역이고, 레이아웃은 섹션 안에서 콘텐츠를 배치하는 구조입니다. 블록은 레이아웃 안에 들어가는 실제 콘텐츠 요소입니다.

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

| 구분   | 설명                             |
| ---- | ------------------------------ |
| 페이지  | 사이트를 구성하는 실제 화면입니다.            |
| 섹션   | 페이지 안에서 콘텐츠를 구분하는 큰 영역입니다.     |
| 레이아웃 | 섹션 안에서 콘텐츠를 배치하는 구조입니다.        |
| 블록   | 텍스트, 이미지, 버튼처럼 실제로 표시되는 요소입니다. |

예를 들어 서비스 소개 영역을 만든다면, 먼저 섹션을 추가하고 그 안에 2열 레이아웃을 넣습니다. 왼쪽에는 이미지 블록을 넣고, 오른쪽에는 제목, 설명, 버튼 블록을 배치할 수 있습니다.

### 3. 추가 요소에서 블록 열기

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

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

선택한 블록이 캔버스에 추가됩니다.

{% hint style="info" %}
**도움말**: 블록을 추가하기 전에 먼저 섹션과 레이아웃을 잡아두면 정렬과 간격을 관리하기 쉽습니다.
{% endhint %}

### 4. 주요 블록 유형 이해하기

블록은 사이트에 넣을 콘텐츠의 종류에 따라 선택합니다. 텍스트를 넣을 때는 텍스트 블록을, 이미지를 넣을 때는 이미지 블록을, 방문자의 행동을 유도할 때는 버튼이나 폼 블록을 사용할 수 있습니다.

<table><thead><tr><th width="124.82342529296875">블록 유형</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><tr><td>상품</td><td>상품 정보를 사이트에 표시할 때 사용합니다.</td></tr></tbody></table>

처음에는 텍스트, 이미지, 버튼 블록부터 사용하는 것이 좋습니다. 이 세 가지 블록만으로도 대부분의 기본 페이지 구조를 만들 수 있습니다.

### 5. 텍스트 블록 추가하기

텍스트 블록은 제목, 설명, 안내 문구처럼 글자를 표시할 때 사용합니다. 페이지의 메시지를 전달하는 가장 기본적인 블록입니다.

1. **추가 요소**를 엽니다.
2. **텍스트**를 선택합니다.
3. 텍스트 블록을 페이지에 추가합니다.
4. 텍스트 내용을 입력합니다.
5. 오른쪽 사이드바에서 글씨 크기, 굵기, 정렬 등을 조정합니다.

텍스트 블록이 페이지에 추가됩니다.

텍스트를 작성할 때는 한 블록에 너무 많은 내용을 넣지 않는 것이 좋습니다. 제목, 설명, 보조 문구를 구분하면 내용을 읽기 쉽습니다.

```
좋은 구성 예시
├ 제목 텍스트
├ 설명 텍스트
└ 보조 안내 텍스트
```

### 6. 이미지 블록 추가하기

이미지 블록은 사진, 배너, 로고, 일러스트 등을 보여줄 때 사용합니다. 이미지 블록을 사용하면 페이지 분위기와 정보 전달력을 높일 수 있습니다.

1. **추가 요소**를 엽니다.
2. **이미지**를 선택합니다.
3. 이미지 블록을 페이지에 추가합니다.
4. 사용할 이미지를 업로드하거나 선택합니다.
5. 오른쪽 사이드바에서 크기, 비율, 정렬을 조정합니다.

이미지 블록이 페이지에 추가됩니다.

이미지를 사용할 때는 PC와 모바일 화면에서 잘리지 않는지 확인합니다. 특히 가로로 긴 이미지는 모바일에서 일부가 잘려 보일 수 있습니다.

{% hint style="info" %}
**도움말**: 이미지는 너무 복잡한 것보다 전달하려는 내용이 분명한 이미지를 사용하는 것이 좋습니다. 텍스트 위에 이미지를 배치할 경우 글자가 잘 읽히는지도 함께 확인합니다.
{% endhint %}

### 7. 버튼 블록 추가하기

버튼 블록은 방문자의 행동을 유도할 때 사용합니다. 문의하기, 상담 신청, 예약하기, 자세히 보기처럼 클릭이 필요한 곳에 배치합니다.

1. **추가 요소**를 엽니다.
2. **버튼**을 선택합니다.
3. 버튼 블록을 페이지에 추가합니다.
4. 버튼 문구를 입력합니다.
5. 오른쪽 사이드바에서 버튼 스타일을 조정합니다.
6. 필요한 경우 클릭 이벤트를 설정합니다.

버튼 블록이 페이지에 추가됩니다.

버튼 문구는 방문자가 클릭했을 때 어떤 일이 일어나는지 알 수 있게 작성합니다.

```
예시
- 문의하기
- 상담 신청하기
- 예약하기
- 자세히 보기
- 견적 요청하기
```

`클릭하기`, `바로가기`처럼 의미가 넓은 문구보다 실제 행동이 드러나는 문구를 사용하는 것이 좋습니다.

### 8. 폼 블록 추가하기

폼 블록은 방문자에게 정보를 입력받을 때 사용합니다. 상담 신청, 문의 접수, 예약 신청처럼 이름, 연락처, 문의 내용 등을 받아야 하는 경우에 사용할 수 있습니다.

1. **추가 요소**를 엽니다.
2. **폼**을 선택합니다.
3. 폼 블록을 페이지에 추가합니다.
4. 필요한 입력 항목을 확인합니다.
5. 폼 제목과 안내 문구를 수정합니다.
6. 미리보기에서 입력 흐름을 확인합니다.

폼 블록이 페이지에 추가됩니다.

폼은 방문자가 직접 정보를 입력하는 영역이므로, 필요한 항목만 구성하는 것이 좋습니다. 입력 항목이 너무 많으면 제출을 포기할 수 있습니다.

{% hint style="info" %}
**도움말**: 폼을 게시하기 전에는 반드시 미리보기에서 입력과 제출 흐름을 확인합니다.
{% endhint %}

### 9. 아이콘과 도형 블록 사용하기

아이콘과 도형은 정보를 보조하거나 화면을 꾸밀 때 사용합니다. 기능 설명, 장점 소개, 단계 안내처럼 짧은 정보를 시각적으로 구분해야 할 때 유용합니다.

1. **추가 요소**를 엽니다.
2. **아이콘** 또는 **도형**을 선택합니다.
3. 블록을 페이지에 추가합니다.
4. 오른쪽 사이드바에서 크기, 색상, 위치를 조정합니다.
5. 텍스트나 이미지와 함께 배치합니다.

아이콘 또는 도형 블록이 페이지에 추가됩니다.

아이콘과 도형은 보조 요소이므로 너무 많이 사용하지 않는 것이 좋습니다. 중요한 콘텐츠보다 장식 요소가 더 눈에 띄면 페이지의 메시지가 흐려질 수 있습니다.

### 10. 미디어 블록 사용하기

미디어 블록은 영상이나 외부 미디어를 페이지에 보여줄 때 사용합니다. 서비스 소개 영상, 사용 방법 영상, 브랜드 영상 등을 넣을 수 있습니다.

1. **추가 요소**를 엽니다.
2. **미디어**를 선택합니다.
3. 미디어 블록을 페이지에 추가합니다.
4. 사용할 미디어를 연결하거나 설정합니다.
5. 캔버스에서 표시 상태를 확인합니다.

미디어 블록이 페이지에 추가됩니다.

영상이나 외부 미디어는 페이지 로딩과 화면 흐름에 영향을 줄 수 있습니다. 꼭 필요한 위치에 배치하고, 모바일 화면에서도 자연스럽게 보이는지 확인합니다.

### 11. 상품 블록 사용하기

상품 블록은 사이트에 상품 정보를 표시할 때 사용합니다. 상품 이미지, 이름, 가격, 구매 또는 상세보기 연결이 필요한 경우에 사용할 수 있습니다.

1. **추가 요소**를 엽니다.
2. **상품**을 선택합니다.
3. 상품 블록을 페이지에 추가합니다.
4. 표시할 상품 정보를 확인합니다.
5. 오른쪽 사이드바에서 표시 방식과 정렬을 조정합니다.

상품 블록이 페이지에 추가됩니다.

상품 블록은 사이트의 상품 설정과 연결될 수 있습니다. 원하는 상품이 표시되지 않는다면 상품 정보가 먼저 등록되어 있는지 확인합니다.

### 12. 블록 선택하고 설정하기

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

1. 캔버스에서 수정할 블록을 클릭합니다.
2. 오른쪽 사이드바에서 선택된 항목을 확인합니다.
3. 필요한 설정 항목을 엽니다.
4. 크기, 위치, 여백, 스타일 등을 조정합니다.
5. 캔버스에서 변경 결과를 확인합니다.

블록 설정이 변경됩니다.

블록마다 설정할 수 있는 항목은 다를 수 있습니다. 텍스트 블록은 글씨체와 정렬을 중심으로 설정하고, 이미지 블록은 크기와 비율을 중심으로 설정합니다. 버튼 블록은 스타일과 클릭 이벤트를 함께 확인합니다.

### 13. 블록 위치와 크기 조정하기

블록의 위치와 크기는 화면의 균형에 큰 영향을 줍니다. 같은 블록이라도 어느 위치에 놓는지, 얼마나 크게 표시하는지에 따라 페이지 인상이 달라집니다.

1. 조정할 블록을 선택합니다.
2. 오른쪽 사이드바에서 위치 또는 크기 설정을 확인합니다.
3. 너비와 높이를 조정합니다.
4. 필요한 경우 정렬을 변경합니다.
5. 캔버스에서 주변 블록과의 균형을 확인합니다.

블록의 위치와 크기가 변경됩니다.

가능하면 블록은 레이아웃 안에서 정렬하는 것이 좋습니다. 모든 블록을 자유롭게 배치하면 PC와 모바일 화면에서 정렬이 어색해질 수 있습니다.

{% hint style="info" %}
**도움말**: 일반적인 콘텐츠는 레이아웃 안에서 정렬하고, 강조가 필요한 일부 요소만 자유롭게 배치하는 것이 좋습니다.
{% endhint %}

### 14. 블록 여백 조정하기

여백은 블록 주변의 간격입니다. 블록 사이의 간격이 적절해야 콘텐츠가 읽기 쉽고 화면이 안정적으로 보입니다.

1. 조정할 블록을 선택합니다.
2. 오른쪽 사이드바에서 여백 설정을 엽니다.
3. 위, 아래, 좌, 우 여백을 조정합니다.
4. 주변 블록과의 간격을 확인합니다.

블록 여백이 변경됩니다.

여백이 너무 좁으면 콘텐츠가 답답해 보이고, 너무 넓으면 서로 관련 없는 요소처럼 보일 수 있습니다. 특히 제목과 설명, 이미지와 버튼 사이의 간격을 함께 확인합니다.

### 15. 블록 스타일 설정하기

블록 스타일은 블록의 시각적 표현을 조정하는 설정입니다. 텍스트 색상, 배경, 외곽선, 그림자, 모서리 반경 등을 사용해 블록의 분위기를 바꿀 수 있습니다.

1. 스타일을 변경할 블록을 선택합니다.
2. 오른쪽 사이드바에서 스타일 설정을 엽니다.
3. 필요한 항목을 수정합니다.
4. 캔버스에서 변경 결과를 확인합니다.

블록 스타일이 변경됩니다.

스타일은 사이트 전체 분위기와 맞춰 사용하는 것이 좋습니다. 같은 페이지 안에서 색상과 모서리, 그림자 스타일이 지나치게 다양하면 화면이 어수선해 보일 수 있습니다.

### 16. 버튼이나 이미지에 클릭 이벤트 설정하기

버튼, 이미지 등 일부 블록에는 클릭 이벤트를 설정할 수 있습니다. 클릭 이벤트를 설정하면 방문자가 블록을 클릭했을 때 특정 페이지로 이동하거나, 외부 링크를 열거나, 전화·문자 같은 동작을 실행할 수 있습니다.

1. 클릭 이벤트를 설정할 블록을 선택합니다.
2. 오른쪽 사이드바에서 클릭 이벤트 설정을 엽니다.
3. 연결할 동작을 선택합니다.
4. 이동할 페이지나 URL 등 필요한 값을 입력합니다.
5. 설정을 저장합니다.
6. 미리보기에서 클릭 동작을 확인합니다.

클릭 이벤트가 설정됩니다.

자주 사용하는 클릭 이벤트는 다음과 같습니다.

<table><thead><tr><th width="146.2088623046875">클릭 이벤트</th><th>설명</th></tr></thead><tbody><tr><td>페이지 이동</td><td>사이트 안의 다른 페이지로 이동합니다.</td></tr><tr><td>외부 URL</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="danger" %}
**주의**: 클릭 이벤트를 설정한 뒤에는 반드시 미리보기에서 동작을 확인합니다. URL이나 전화번호가 잘못 입력되면 방문자가 원하는 행동을 할 수 없습니다.
{% endhint %}

### 17. 블록 순서 변경하기

레이아웃 안에서 블록의 순서를 바꾸면 콘텐츠가 읽히는 흐름이 달라집니다. 예를 들어 버튼을 설명 아래로 옮기거나, 이미지를 제목 위에 배치할 수 있습니다.

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

블록 순서가 변경됩니다.

순서를 바꾼 뒤에는 방문자가 정보를 읽는 흐름이 자연스러운지 확인합니다. 일반적으로 제목, 설명, 이미지, 버튼의 순서가 명확하면 내용을 이해하기 쉽습니다.

### 18. 블록 복제하기

같은 형식의 블록을 반복해서 사용해야 할 때는 블록을 복제할 수 있습니다. 예를 들어 같은 스타일의 버튼이나 카드 안의 텍스트를 반복할 때 사용할 수 있습니다.

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

기존 블록과 같은 형식의 블록이 추가됩니다.

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

### 19. 블록 삭제하기

사용하지 않는 블록은 삭제할 수 있습니다. 삭제한 블록은 페이지에서 사라지므로, 필요한 콘텐츠인지 먼저 확인합니다.

1. 삭제할 블록을 선택합니다.
2. 블록 메뉴를 엽니다.
3. **삭제**를 선택합니다.
4. 삭제 여부를 확인합니다.

선택한 블록이 페이지에서 삭제됩니다.

{% hint style="danger" %}
**주의**: 블록을 삭제하면 해당 블록에 입력한 텍스트, 이미지, 링크 설정도 함께 사라질 수 있습니다. 삭제하기 전에 필요한 콘텐츠인지 확인합니다.
{% endhint %}

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

블록을 추가하거나 수정한 뒤에는 모바일 화면에서도 확인합니다. PC에서는 자연스럽게 보이는 블록이 모바일에서는 너무 크거나 작게 보일 수 있습니다.

1. 모바일 캔버스로 전환합니다.
2. 텍스트가 잘리지 않는지 확인합니다.
3. 이미지가 화면 너비에 맞게 표시되는지 확인합니다.
4. 버튼을 누르기 쉬운 크기로 보이는지 확인합니다.
5. 폼 입력 항목이 자연스럽게 표시되는지 확인합니다.
6. 필요한 경우 크기, 여백, 정렬을 조정합니다.

모바일 화면에서 블록 표시 상태를 확인할 수 있습니다.

### 21. 미리보기로 블록 확인하기

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

1. 상단 툴바에서 **미리보기**를 클릭합니다.
2. 데스크톱 화면에서 블록이 자연스럽게 보이는지 확인합니다.
3. 모바일 화면에서도 블록을 확인합니다.
4. 버튼이나 링크가 정상적으로 동작하는지 확인합니다.
5. 폼이 있다면 입력 흐름을 확인합니다.
6. 문제가 있으면 에디터로 돌아가 블록을 수정합니다.

미리보기에서 블록 표시와 동작을 확인할 수 있습니다.