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

# 시작에 앞서

### 개요

스튜디오 에디터는 큐샵에서 사이트의 화면 구조와 디자인을 세밀하게 편집할 수 있는 고급 에디터입니다.

클래식 에디터가 48개 그리드 기반으로 빠르게 사이트를 구성하는 방식이라면, 스튜디오 에디터는 픽셀 단위 조정과 레이아웃 기반 편집을 함께 사용합니다. 또한, 블로그처럼 같은 구조가 반복되는 콘텐츠는 콜렉션으로 관리할 수 있습니다.

랜딩페이지, 회사소개 홈페이지, 브랜드 사이트처럼 화면 완성도가 중요한 사이트에 적합하며, 반복 콘텐츠를 함께 운영해야 하는 경우에도 사용할 수 있습니다.

<div data-with-frame="true"><figure><img src="/files/t3YZRw7xGSVQn1F3ugKf" alt=""><figcaption></figcaption></figure></div>

### 1. 스튜디오 에디터란?

스튜디오 에디터는 페이지를 **섹션, 레이아웃, 블록** 단위로 구성하는 편집 도구입니다. 페이지의 큰 흐름을 섹션으로 나누고, 각 섹션 안에 레이아웃을 배치한 뒤, 텍스트·이미지·버튼·폼 같은 블록을 추가해 정교한 화면을 만들 수 있습니다.

스튜디오 에디터의 기본 구조는 다음과 같습니다.

```
페이지
└ 섹션
  └ (선택) 레이아웃
    └ 블록
```

섹션은 페이지의 큰 영역을 나누는 단위입니다. 레이아웃은 섹션 안에서 콘텐츠를 배치하는 구조이고, 블록은 실제로 화면에 표시되는 요소입니다.

이 구조를 이해하면 페이지를 더 안정적으로 구성할 수 있습니다. 예를 들어 첫 화면은 큰 메시지와 버튼 중심으로 만들고, 서비스 소개 영역은 2열 레이아웃으로 구성하며, 기능 소개 영역은 그리드로 정리할 수 있습니다. 필요한 경우 특정 요소를 자유롭게 배치해 화면에 강조점을 만들 수도 있습니다.

### 2. 클래식 에디터와 스튜디오 에디터의 차이

클래식 에디터와 스튜디오 에디터의 가장 큰 차이는 **화면을 배치하는 기준**입니다.

클래식 에디터는 캔버스가 가로 48개 그리드로 나뉘어 있습니다. 사용자는 이 그리드 안에 블록을 배치하고, 콘텐츠가 표시될 영역을 쉽게 늘리거나 줄일 수 있습니다.

스튜디오 에디터는 픽셀 단위 조정과 레이아웃 기반 편집을 함께 사용합니다. 레이아웃 설정은 필수는 아니지만 스택, 그리드, 컨테이너 채움, 내용에 맞춤, 상대적 흐름 같은 방식을 사용하면 화면 구조를 더 정교하고 세밀하게 잡을 수 있습니다.

<table><thead><tr><th width="151.00341796875">구분</th><th>클래식 에디터</th><th>스튜디오 에디터</th></tr></thead><tbody><tr><td>편집 기준</td><td>48개 그리드</td><td>픽셀 단위와 레이아웃</td></tr><tr><td>화면 구성</td><td>그리드 안에 블록 배치</td><td>섹션, 레이아웃, 블록 조합</td></tr><tr><td>장점</td><td>빠르고 쉬운 영역 조정</td><td>세밀한 구조와 배치 조정</td></tr><tr><td>배치 방식</td><td>정해진 그리드 기준</td><td>스택, 그리드, 자유 배치 활용</td></tr><tr><td>반복 콘텐츠 관리</td><td>페이지별 콘텐츠 중심으로 관리</td><td>블로그 같은 반복 콘텐츠를 콜렉션으로 관리 가능</td></tr><tr><td>적합한 작업</td><td>빠른 제작과 간단한 운영</td><td>랜딩페이지, 회사소개, 브랜드 사이트 제작</td></tr></tbody></table>

두 에디터는 우열보다 목적이 다릅니다. 빠른 제작과 쉬운 운영이 중요하다면 클래식 에디터가 적합하고, 화면 구조를 직접 설계해야 한다면 스튜디오 에디터가 적합합니다.

### 3. 스튜디오 에디터가 적합한 경우

스튜디오 에디터는 사이트의 화면 구성을 직접 설계해야 할 때 적합합니다. 템플릿의 내용을 바꾸는 수준을 넘어, 섹션의 흐름, 레이아웃의 균형, 요소의 위치와 여백까지 조정해야 한다면 스튜디오 에디터를 사용할 수 있습니다.

다음과 같은 경우에 적합합니다.

```
- 시각적 완성도가 중요한 브랜드 사이트를 제작하는 경우
- PC와 모바일 화면을 확인하며 배치와 여백을 조정해야 하는 경우
- 블로그처럼 반복되는 콘텐츠를 함께 운영하려는 경우
```

예를 들어 랜딩페이지는 첫 화면, 서비스 소개, 장점, 후기, 문의 섹션을 각각 나누어 구성할 수 있습니다. 회사소개 홈페이지라면 브랜드 메시지, 사업 영역, 포트폴리오, 팀 소개, 문의 영역을 목적에 맞게 배치할 수 있습니다.

블로그처럼 같은 구조가 반복되는 콘텐츠는 콜렉션 기능을 사용해 관리할 수 있습니다. 이 문서에서는 콜렉션의 개념만 간단히 안내하며, 자세한 사용 방법은 별도 가이드에서 다룹니다.

스튜디오 에디터는 설정할 수 있는 항목이 많은 만큼 처음에는 어렵게 느껴질 수 있습니다. 다만 페이지 구조를 직접 다루는 방식에 익숙해지면, 일반적인 웹빌더보다 더욱리 유연하게 화면을 구성할 수 있습니다.

### 4. 클래식 에디터가 더 적합한 경우

사이트를 빠르게 만들고 간단히 운영하는 것이 더 중요하다면 클래식 에디터가 더 적합할 수 있습니다. 복잡한 레이아웃을 직접 설계하지 않아도 되고, 콘텐츠 입력과 기본 영역 조정만으로 충분한 경우에는 클래식 에디터가 더 편합니다.

다음과 같은 경우에는 클래식 에디터를 사용을 고려해 보세요.

```
- 사이트를 빠르게 만들어야 하는 경우
- 복잡한 디자인 편집이 필요하지 않은 경우
- 픽셀 단위 조정보다 쉬운 편집 방식이 더 중요한 경우
- 에디터 사용에 익숙하지 않은 경우
```

클래식 에디터는 48개 그리드 기반으로 콘텐츠 영역을 조정합니다. 따라서, 사이트 구조가 단순하고 빠른 제작이 중요하다면 클래식 에디터가 더 효율적일 수 있습니다.

### 5. 스튜디오 에디터를 선택하기 전에 알아둘 점

스튜디오 에디터는 새 사이트를 생성하는 과정에서 선택할 수 있습니다. 한 번 스튜디오 에디터로 만든 사이트는 클래식 에디터로 변경할 수 없습니다.

따라서 사이트를 만들기 전에 편집 목적을 먼저 확인해야 합니다. 빠른 제작과 쉬운 운영이 중요하다면 클래식 에디터를 선택하고, 세밀한 화면 구성과 디자인 조정이 중요하다면 스튜디오 에디터를 선택합니다.

스튜디오 에디터는 PC 환경에서 사용할 수 있습니다. 모바일에서는 사이트 화면을 확인할 수 있지만, 에디터에서 직접 편집하는 작업은 PC에서 진행해야 합니다.

선택 전에 아래 항목을 확인해 보세요.

```
1. 사이트를 빠르게 만드는 것이 중요한가?
2. 화면 구조와 디자인을 직접 조정해야 하는가?
3. 랜딩페이지나 회사소개 홈페이지처럼 차별화된 구성이 필요한가?
4. 블로그처럼 반복 콘텐츠를 함께 운영해야 하는가?
5. 섹션, 레이아웃, 블록 구조를 다룰 수 있는가?
6. PC 환경에서 사이트를 편집할 수 있는가?
```

### 6. 다음에 볼 가이드

스튜디오 에디터를 이용하기로 결정하셨나요? 이제 다음 가이드로 넘어가 스튜디오 에디터에 대해 더 자세히 알아보세요.