Studio Two 에디터: 셀 및 그리드 작업하기 | 고객센터

이 도움말은 2026년 11월에 출시된 새로운 Studio Two 에디터를 다룹니다. Studio 에디터와 Studio Two 에디터 중 어떤 에디터를 사용 중인지 확실하지 않다면 여기에서 자세한 내용을 확인하세요.

그리드에 콘텐츠를 배치하세요. Studio Two 에디터의 모든 섹션에는 섹션 그리드가 있어 화면 크기가 달라져도 레이아웃을 유지할 수 있습니다.

콘텐츠에 가장 적합한 그리드 레이아웃을 선택하세요. 행과 칼럼을 직접 설정하고 반응형 단위로 각 크기를 지정하려면 CSS 그리드를 수동으로 편집할 수도 있습니다.

섹션 그리드 작업하기

콘텐츠에 맞게 섹션 그리드를 구성하세요. 빈 섹션은 하나의 셀로 시작하므로, 일반적으로 행이나 칼럼으로 스플릿하거나 콜라주로 구성해 레이아웃을 만듭니다. 이후 요소를 드래그하지 않고도 셀을 추가하고, 셀 크기를 균등하게 조정하거나 그리드를 뒤집어 다른 구성을 적용할 수 있습니다.

섹션 그리드를 사용자 지정하려면:

에디터로 이동합니다.
해당 섹션을 선택합니다.
에디터 오른쪽 상단에서 속성 검사 패널 열기 아이콘을 클릭합니다.

(아직 열려 있지 않은 경우) 디자인 탭을 클릭한 후 레이아웃으로 스크롤합니다.
그리드를 사용자 지정할 방법을 선택합니다.

레이아웃 변경하기

셀 추가 또는 삭제하기

셀을 스플릿하려면 어떻게 해야 하나요?

셀을 병합하거나 위치를 바꾸려면 어떻게 해야 하나요?

그리드를 균등하게 조정하거나 뒤집으려면 어떻게 해야 하나요?

수직 간격을 직접 설정하려면 어떻게 해야 하나요?

알아두세요:

캔버스에서 그리드 셀의 크기를 직접 조정할 수 있습니다. 섹션 또는 섹션 내 셀을 선택한 후 그리드라인을 원하는 위치로 드래그합니다.

CSS 그리드 수동 편집하기

CSS 그리드를 수동으로 편집해 칼럼과 행을 세밀하게 조정할 수 있습니다. 각 칼럼과 행의 크기를 fr, 최소/최대, % 등의 반응형 단위로 설정하고, 프리셋 레이아웃을 선택하는 대신 칼럼과 행의 수를 직접 지정할 수 있습니다.

전체 섹션 또는 개별 셀의 CSS 그리드를 편집할 수 있습니다.

섹션: 섹션 그리드를 변경합니다. 기존 셀은 새 그리드의 컨테이너로 전환됩니다.
셀: 선택한 셀의 레이아웃만 CSS 그리드로 전환합니다. 섹션의 나머지 그리드는 그대로 유지됩니다.

중요!

수동 CSS 그리드는 섹션 그리드로 되돌릴 수 없습니다. 실수로 전환했다면 즉시 에디터 오른쪽 상단에서 실행 취소 아이콘을 클릭합니다.

CSS 그리드를 수동으로 편집하려면 다음 단계를 따르세요.

에디터로 이동합니다.
에디터 상단에서 데스크톱 화면 중단점을 선택합니다.
해당 섹션 또는 셀을 선택합니다.
에디터 오른쪽 상단에서 속성 검사 패널 열기 아이콘을 클릭합니다.

아직 열려 있지 않다면 디자인 탭을 클릭한 후 레이아웃으로 스크롤합니다.
CSS 그리드 옆의 수동 편집을 클릭합니다.
팝업에서 수동 편집을 클릭해 확인합니다.
도움말: 앞으로 이 사이트에서 확인 팝업을 건너뛰려면 다시 표시하지 않기 체크박스를 선택합니다.

수동 CSS 그리드 작업하기

그리드를 한 줄씩 구성합니다. 수동 CSS 그리드에서는 행, 칼럼, 간격을 각각 별도의 값으로 설정하고 fr, 최소/최대, % 등의 반응형 단위를 사용할 수 있습니다. 화면 중단점마다 그리드를 조정할 수 있습니다. 데스크톱에서 설정한 디자인이 작은 화면에도 적용되므로 각 화면 크기에 맞게 조정하세요.