섹션Section
한 줄 정의
섹션은 웹페이지를 내용별로 나눈 가로 구역 하나하나로, '소개' · '상품' · '후기'처럼 한 가지 이야기를 담는 덩어리예요.
쉽게 말하면
웹페이지 한 장을 위에서 아래로 훑어보면 첫 화면 소개, 상품 목록, 고객 후기, 문의처럼 내용이 구역별로 나뉘어 있어요. 이 구역 하나가 섹션이에요. 섹션 하나에 한 가지 이야기만 담고 배경색이나 여백으로 앞뒤 섹션과 나눠 두면, 방문자는 스크롤을 내리면서 지금 어떤 이야기를 읽고 있는지 쉽게 알 수 있어요.
어떻게 나누나요
페이지를 만들기 전에 방문자가 품을 질문을 순서대로 적어 보면 섹션 순서를 정하기 쉬워요. 질문이 "여기는 뭐 하는 곳이지?", "무엇을 파는데?", "믿을 만한가?", "어떻게 연락하지?" 순서라면, 섹션도 히어로 섹션 · 상품 · 후기 · 문의 순서로 놓을 수 있어요.
큐샵에서는
클래식 에디터와 스튜디오 에디터 모두 섹션 단위로 페이지를 채워 디자인해요. 두 에디터는 섹션 안의 콘텐츠를 배치하는 방식이 달라요.
- 클래식 에디터: 섹션 안의 콘텐츠를 그리드(칸을 나눈 격자)에 맞춰 배치해요
- 스튜디오 에디터: 피그마의 오토 레이아웃과 같은 방식으로, 정렬과 간격을 자동으로 맞춰 주는 스택으로 배치해요
헷갈리는 말
| 헷갈리는 말 | 뜻 | 섹션과 다른 점 |
|---|---|---|
| 블록 | 섹션 안에 놓는 글 · 이미지 · 버튼 같은 낱개 요소 | 섹션은 구역이고, 블록은 그 구역을 채우는 재료예요 |
| 컴포넌트 | 여러 곳에 똑같이 다시 쓰려고 원본으로 만들어 둔 화면 요소 | 섹션은 페이지의 자리를 나누는 단위이고, 컴포넌트는 같은 요소를 되풀이해 쓰기 위한 단위예요 |
같은 말
아래 이름으로도 불러요. 모두 같은 뜻이에요.
Section