Unisquads:가이드/위키/편집/레이아웃 (r2)

1. 개요

레이아웃 기능을 사용하면, 문서 안의 블록들을 원하는 위치에 자유롭게 배치할 수 있습니다. 텍스트·이미지·표 등 여러 블록을 하나로 묶어 가로로 나란히 놓거나, 격자 모양으로 정렬하거나, 탭으로 내용을 구분할 수 있습니다.

기능	설명	사용 예시
컨테이너	여러 블록을 하나로 묶어 가로/세로/격자 등 원하는 방식으로 배치합니다	2단 레이아웃, 카드형 갤러리, 대시보드 구성
탭 레이아웃	같은 공간에서 탭을 클릭해 여러 내용을 전환하며 보여줍니다	비교 정보, 단계별 설명, 긴 내용 정리

슬래시 커맨드(/)를 입력하면 사용 가능한 블록 목록이 표시됩니다. /컨테이너 또는 /탭 레이아웃을 입력해 바로 삽입할 수 있습니다.

2. 레이아웃

레이아웃은 문서 안의 블록들을 원하는 위치에 배치하는 기능입니다. 컨테이너를 사용해 블록을 묶고, 방향·크기·간격 등을 설정하여 다양한 구성을 만들 수 있습니다.

2.1. 레이아웃 구조

레이아웃의 기본 단위는 컨테이너입니다. 컨테이너는 블록들을 담는 상자 역할을 하며, 안에 넣은 블록들을 가로·세로·격자 등 원하는 방식으로 배치합니다.

구분	항목	설명
배치 방식	가로/세로	블록을 한 방향으로 나열합니다. 가로 정렬은 왼쪽→오른쪽, 세로 정렬은 위→아래로 배치됩니다
	그리드	정해진 열 수만큼 칸을 나누고, 블록을 순서대로 채웁니다. 균등한 크기의 카드 배치에 적합합니다
	벤토	블록마다 차지하는 칸 수(가로·세로)를 자유롭게 지정합니다. 대시보드나 매거진 스타일에 적합합니다
중첩	깊이	컨테이너 안에 컨테이너를 넣을 수 있습니다. 최상위가 깊이 0, 그 안이 깊이 1, 또 안이 깊이 2입니다
	깊이 핸들	컨테이너 왼쪽 상단에 숫자 버튼이 표시됩니다. 이 숫자가 현재 깊이이며, 클릭하면 해당 컨테이너를 선택합니다
	역할 분리	바깥 컨테이너는 전체 방향·크기를, 안쪽 컨테이너는 개별 영역의 스타일을 담당하면 관리하기 쉽습니다
탐색	진입	컨테이너를 더블 클릭하면 안쪽으로 들어갑니다
	나가기	`Esc` 키를 누르면 한 단계 위의 부모 컨테이너로 올라갑니다
	직접 선택	깊이 핸들(숫자 버튼)을 클릭하면 중첩된 구조에서 원하는 컨테이너를 바로 선택할 수 있습니다

2.2. 레이어

컨테이너가 여러 개 중첩되면 구조를 파악하기 어려워집니다. 레이어 패널은 전체 컨테이너 구조를 트리 형태로 보여주며, 컨테이너를 선택·추가·복제·삭제·이동할 수 있는 관리 도구입니다.

구분	항목	설명
구조 파악	트리 보기	모든 컨테이너가 부모-자식 관계로 들여쓰기되어 표시됩니다. 현재 선택된 컨테이너가 강조됩니다
구조 파악	바로 이동	트리에서 컨테이너를 클릭하면 에디터에서 해당 컨테이너가 바로 선택됩니다
관리	형제 추가	같은 레벨에 새 컨테이너를 추가합니다. 가로 정렬에서 옆에 칸을 하나 더 만들 때 사용합니다
	자식 추가	선택한 컨테이너 안에 새 컨테이너를 추가합니다. 중첩 구조를 만들 때 사용합니다
	복제	컨테이너와 안의 모든 내용을 그대로 복사합니다. 같은 형태의 카드를 반복할 때 유용합니다
	삭제	선택한 컨테이너를 제거합니다. 안에 있는 모든 내용도 함께 삭제됩니다
이동	드래그앤드롭	레이어 패널에서 컨테이너를 잡아 위·아래로 끌면 같은 레벨 안에서 순서가 바뀝니다
이동	제한	같은 부모의 형제끼리만 순서를 바꿀 수 있습니다. 다른 깊이로 옮기려면 잘라내기/붙여넣기를 사용하세요

3. 컨테이너

슬래시 커맨드 /컨테이너로 삽입합니다. 여러 블록을 하나로 묶어 가로 배치, 격자 배치 등 다양한 레이아웃을 만들 수 있습니다. 컨테이너 안에 컨테이너를 넣으면 더 복잡한 구성도 가능합니다.

3.1. 레이아웃 프리셋

컨테이너를 추가할 때 프리셋을 선택하면, 자주 쓰는 레이아웃이 한 번에 만들어집니다. 직접 하나씩 설정할 필요 없이 바로 시작할 수 있습니다.

항목	설명
가로 정렬	블록들을 왼쪽에서 오른쪽으로 나란히 배치합니다
세로 정렬	블록들을 위에서 아래로 쌓아 배치합니다
그리드 2~4열	같은 크기의 칸으로 균등하게 나눕니다 (예: 2칸, 3칸, 4칸)
벤토	칸마다 크기를 다르게 지정할 수 있는 자유로운 격자 레이아웃입니다

3.2. 레이아웃 타입

컨테이너 안에 넣은 블록들을 어떤 방식으로 배치할지 정합니다. 타입을 바꾸면 방향이나 열 수도 함께 설정할 수 있습니다.

항목	설명
가로/세로	블록을 가로 또는 세로 한 방향으로 나열합니다. 가장 기본적인 배치 방식입니다
그리드	정해진 열 수만큼 칸을 나누고, 블록을 순서대로 채워 넣습니다
벤토	블록마다 차지하는 칸 수를 자유롭게 정할 수 있어, 대시보드나 포트폴리오 같은 레이아웃에 적합합니다

3.3. 크기 설정

컨테이너의 가로 너비와 세로 높이를 어떻게 결정할지 설정합니다.

항목	설명
너비 — 채우기	부모 영역의 가로를 꽉 채웁니다 (기본값)
너비 — 맞추기	안에 넣은 내용의 크기에 맞춰 너비가 자동으로 조절됩니다
너비 — 고정	원하는 숫자를 직접 입력합니다 (예: 300px, 50%)
높이 — 자동	내용이 늘어나면 높이도 함께 늘어납니다 (기본값)
높이 — 고정	원하는 높이를 직접 입력합니다 (예: 200px)
높이 — 화면	화면 전체 높이만큼 차지합니다

3.4. 정렬

컨테이너 안의 블록들을 가로·세로 어디에 배치할지 정합니다. 가운데 정렬, 양쪽 균등 배분 등을 설정할 수 있습니다.

항목	설명
가로 정렬	왼쪽, 가운데, 오른쪽, 균등 배분 등 가로 방향 위치를 정합니다
세로 정렬	위, 가운데, 아래, 늘리기 등 세로 방향 위치를 정합니다
줄바꿈	블록이 한 줄에 다 들어가지 않으면 다음 줄로 넘길지 설정합니다

3.5. 간격

블록 사이의 거리와 컨테이너 안쪽 여백을 조절합니다.

항목	설명
블록 간격	블록과 블록 사이의 거리입니다. 숫자가 클수록 사이가 벌어집니다 (기본 12px)
안쪽 여백	컨테이너 테두리와 내용 사이의 빈 공간입니다 (기본 16px)

3.6. 오프셋

컨테이너의 바깥 여백(마진)을 설정합니다. 음수 값을 사용하면 다른 요소와 겹치게 배치할 수도 있습니다.

항목	설명
방향별 설정	위·아래·왼쪽·오른쪽 각각 따로 지정할 수 있습니다
음수 오프셋	음수 값을 입력하면 요소가 겹치는 효과를 만들 수 있습니다
뷰포트별	PC·태블릿·모바일에서 각각 다른 값을 지정할 수 있습니다

3.7. 스타일

컨테이너의 배경색, 테두리, 둥근 모서리 등 시각적인 꾸미기를 설정합니다.

항목	설명
배경색	단색, 그라데이션, 이미지 배경을 적용할 수 있습니다
배경 효과	투명도 조절, 블러 효과, 오버레이 색상을 추가할 수 있습니다
테두리	색상, 두께, 둥근 모서리 정도를 설정합니다

3.8. 레이어

컨테이너를 여러 개 중첩하면 구조가 복잡해질 수 있습니다. 레이어 패널을 사용하면 전체 구조를 한눈에 보고, 원하는 컨테이너를 쉽게 선택하거나 관리할 수 있습니다.

항목	설명
구조 보기	컨테이너가 어떻게 중첩되어 있는지 트리 형태로 보여줍니다
컨테이너 추가	같은 레벨에 형제 컨테이너를 추가하거나, 안쪽에 자식 컨테이너를 추가합니다
복제	현재 선택된 컨테이너를 내용까지 그대로 복사합니다
삭제	선택된 컨테이너를 삭제합니다. 안에 있는 내용도 함께 제거됩니다
이동	레이어를 클릭하면 해당 컨테이너로 바로 이동하여 선택됩니다

3.9. 깊이 (중첩)

컨테이너는 안에 또 다른 컨테이너를 넣을 수 있습니다. 이것을 "중첩"이라고 합니다. 중첩할수록 깊이(depth)가 1씩 증가하며, 복잡한 다단 레이아웃이나 대시보드를 구성할 수 있습니다.

구분	항목	설명
기본 개념	깊이 번호	최상위 컨테이너는 깊이 0, 그 안에 넣으면 깊이 1, 또 그 안에 넣으면 깊이 2입니다
	깊이 핸들	컨테이너 왼쪽 상단의 숫자 버튼이 현재 깊이를 표시합니다. 클릭하면 해당 컨테이너를 선택합니다
	제한 없음	깊이에 제한은 없지만, 3단계 이내로 유지하는 것을 권장합니다. 너무 깊으면 구조가 복잡해집니다
탐색	안으로 진입	컨테이너를 더블 클릭하면 안쪽으로 들어갑니다. 깊이 핸들의 숫자를 클릭하면 해당 컨테이너를 직접 선택합니다
	밖으로 나가기	`Esc` 키를 누르면 한 단계 위의 부모 컨테이너로 올라갑니다. 반복해서 누르면 최상위까지 이동합니다
	레이어 패널	전체 중첩 구조를 트리 형태로 보여줍니다. 원하는 컨테이너를 클릭하면 바로 이동합니다
활용 팁	역할 분리	바깥 컨테이너는 전체 레이아웃(방향·크기)을 담당하고, 안쪽 컨테이너는 개별 영역의 스타일(배경·테두리)을 담당하면 관리가 쉽습니다
활용 팁	자식 크기	부모가 가로 정렬일 때, 자식 컨테이너의 `flex` 값으로 비율을 조절합니다. 예: flex 2와 flex 1이면 2:1 비율로 나뉩니다

3.10. 이동

레이어 패널에서 컨테이너의 순서를 바꿀 수 있습니다. 드래그앤드롭으로 직관적으로 이동하며, 같은 부모 안에서만 순서 변경이 가능합니다.

구분	항목	설명
드래그앤드롭	순서 변경	레이어 패널에서 컨테이너를 잡아 위·아래로 끌어 놓으면 순서가 바뀝니다
	같은 레벨만	같은 부모 안의 형제 컨테이너끼리만 순서를 바꿀 수 있습니다. 다른 깊이로 이동하려면 잘라내기/붙여넣기를 사용하세요
	내용 보존	이동할 때 컨테이너 안의 모든 내용(텍스트, 이미지, 중첩 컨테이너 등)이 그대로 유지됩니다
기타 조작	복제	레이어 패널의 복제 버튼을 누르면 컨테이너와 모든 하위 내용이 그대로 복사됩니다
	형제 추가	같은 레벨에 빈 컨테이너를 새로 추가합니다
	자식 추가	선택한 컨테이너 안에 새 컨테이너를 추가합니다. 중첩 구조를 만들 때 사용합니다

4. 탭 레이아웃

슬래시 커맨드 /탭 레이아웃으로 삽입합니다. 같은 공간에서 탭을 클릭해 여러 내용을 전환하며 볼 수 있습니다. 긴 내용을 정리하거나, 비교 정보를 보여줄 때 유용합니다.

4.1. 탭 타입 · 스타일

탭 버튼의 모양과 크기를 설정합니다.

항목	설명
밑줄	탭 아래에 밑줄이 표시됩니다. 깔끔하고 심플한 기본 스타일입니다
기본	탭에 테두리와 배경이 적용됩니다. 블록감 있는 디자인입니다
알약	둥근 알약 모양의 탭 디자인입니다
탭 크기	내용에 맞추기 / 균등하게 나누기 / 기본 크기 중 선택합니다

4.2. 탭 위치

탭 버튼이 콘텐츠의 어느 쪽에 표시될지 정합니다.

항목	설명
위	콘텐츠 위에 가로로 배치됩니다 (기본값)
아래	콘텐츠 아래에 가로로 배치됩니다
왼쪽	콘텐츠 왼쪽에 세로로 배치됩니다
오른쪽	콘텐츠 오른쪽에 세로로 배치됩니다

4.3. 색상 설정

탭 버튼의 색상을 상태별로 바꿀 수 있습니다.

항목	설명
기본 상태	선택되지 않은 탭의 글자색과 배경색입니다
마우스 올림	마우스를 탭 위에 올렸을 때 바뀌는 색상입니다
선택된 탭	현재 보고 있는 탭의 글자색, 배경색, 밑줄/테두리 색상입니다
탭 영역 배경	탭 버튼들이 있는 전체 영역의 배경색입니다

4.4. 동작 설정

탭의 접기/펼치기와 아이콘 표시 등 동작을 설정합니다.

항목	설명
접기/펼치기	이미 선택된 탭을 다시 클릭하면 콘텐츠를 접을 수 있습니다
처음에 접힌 상태	문서를 열었을 때 탭 콘텐츠가 접혀 있는 상태로 시작합니다
탭 아이콘	각 탭 버튼에 아이콘을 표시할 수 있으며, 위치와 크기도 조절 가능합니다

4.5. 탭 관리

탭을 추가하거나 삭제하고, 이름을 바꾸는 방법입니다.

항목	설명
탭 추가	사이드바의 "새 탭 추가" 버튼을 클릭합니다
탭 삭제	탭 버튼의 X 아이콘을 클릭합니다 (최소 1개는 남아야 합니다)
이름 변경	탭 버튼을 더블클릭하면 바로 이름을 수정할 수 있습니다

5. 학습 케이스

실제 문서에서 자주 사용하는 레이아웃 패턴을 단계별로 알아봅니다. 아래 케이스를 따라하면 기본적인 레이아웃 구성법을 익힐 수 있습니다.

5.1. 케이스 1: 이미지 + 텍스트 2단 레이아웃

이미지와 설명 텍스트를 나란히 배치하는 가장 기본적인 레이아웃입니다. 인물 소개, 제품 설명 등에 활용됩니다.

단계	내용
1	`/컨테이너`를 입력하고, 가로 정렬 프리셋을 선택합니다
2	왼쪽 컨테이너에 이미지를 삽입합니다. `/이미지`로 삽입할 수 있습니다
3	오른쪽 컨테이너에 설명 텍스트를 작성합니다
4	비율 조절: 이미지 컨테이너의 `flex` 값을 2, 텍스트를 3으로 설정하면 2:3 비율이 됩니다
팁	부모 컨테이너의 세로 정렬을 "가운데"로 설정하면, 이미지와 텍스트가 세로 중앙에 맞춰집니다

5.2. 케이스 2: 카드형 그리드 갤러리

여러 항목을 카드 형태로 균일하게 보여주는 레이아웃입니다. 포트폴리오, 멤버 소개, 상품 목록 등에 적합합니다.

단계	내용
1	`/컨테이너`를 입력하고, 그리드 3열 프리셋을 선택합니다
2	각 칸에 이미지와 제목 텍스트를 넣습니다
3	카드 느낌을 주려면 각 자식 컨테이너에 배경색과 둥근 모서리(8~12px)를 설정합니다
4	부모 컨테이너의 블록 간격으로 카드 사이 여백을 조절합니다 (16~24px 권장)
팁	항목이 많으면 레이어 패널의 "형제 추가" 버튼으로 카드를 빠르게 늘릴 수 있습니다

5.3. 케이스 3: 대시보드 벤토 레이아웃

크기가 다른 블록들을 자유롭게 배치하는 벤토 레이아웃입니다. 대시보드, 포트폴리오, 매거진 스타일에 적합합니다.

단계	내용
1	`/컨테이너`를 입력하고, 벤토 프리셋을 선택합니다. 프리셋마다 다른 배치가 적용됩니다
2	각 블록의 colSpan(가로 칸 수)과 rowSpan(세로 칸 수)을 설정합니다. 12열 기준으로 4는 1/3, 6은 1/2, 8은 2/3에 해당합니다
3	메인 콘텐츠는 크게(8열×2행), 보조 콘텐츠는 작게(4열×1행) 설정하면 시각적 위계가 생깁니다
4	행 높이를 설정하면 일정한 격자감이 생깁니다. 50~80px 사이로 설정해보세요
팁	벤토 프리셋은 총 10종이 준비되어 있습니다. 원하는 프리셋을 선택한 뒤 colSpan/rowSpan만 미세 조정하면 됩니다

5.4. 케이스 4: 중첩으로 히어로 + 콘텐츠 구성

바깥 컨테이너로 전체 구조를 잡고, 안쪽 컨테이너로 세부 영역을 나누는 방식입니다. 랜딩 페이지나 포스터형 문서에 적합합니다.

단계	내용
1	바깥 컨테이너: `/컨테이너`로 세로 정렬 프리셋을 선택합니다. 높이를 화면으로 설정합니다
2	히어로 영역: 레이어 패널에서 자식 추가 버튼을 눌러 안쪽 컨테이너를 만듭니다. 배경 이미지를 설정하고, 높이를 고정 50%로 합니다
3	히어로 안에 제목 텍스트를 넣고, 정렬을 "가운데 / 가운데"로 설정합니다
4	콘텐츠 영역: 형제 추가로 두 번째 컨테이너를 만들고, 가로 정렬로 변경하여 본문과 사이드바를 나란히 배치합니다
팁	구조가 복잡해지면 레이어 패널을 항상 열어두고 작업하세요. 현재 위치를 시각적으로 확인할 수 있습니다