coastdigitalgroup/coastai-skills

섹션 구성 시스템

목적

섹션 구성 시스템은 페이지의 '중간' 부분, 즉 글로벌 헤더와 푸터 사이에 위치하는 일련의 섹션을 설계하기 위한 방법론을 제공합니다. 카드, 버튼과 같은 원자적 컴포넌트는 섹션 내에 존재하지만, 이 시스템은 섹션 간의 공간적 리듬, 레이아웃 패턴, 전환에 초점을 맞춥니다. 콘텐츠가 논리적으로 그룹화되고, 레이아웃 변화를 통해 시각적 피로가 최소화되며, 사용자가 일관된 내러티브 또는 작업 흐름을 따라갈 수 있도록 보장합니다.

사용 사례

• 여러 기능 및 혜택 섹션이 있는 긴 형식의 랜딩 페이지 설계
• 기술 사양, 사회적 증거, 사용 가이드가 필요한 제품 상세 페이지(PDP) 구조화
• '회사 소개' 또는 '작동 방식' 페이지를 소화하기 쉬운 콘텐츠 블록으로 구성
• 다중 페이지 웹사이트 전반에 걸쳐 일관된 '페이지 본문' 리듬 설정
• 주제나 우선순위 변화를 나타내기 위한 수직적 간격 및 배경 전환 관리

사용하지 말아야 할 경우

• 단일 섹션 뷰: 전체 경험이 히어로 영역이나 단일 뷰포트에 들어맞는 경우(예: 간단한 로그인 페이지 또는 스플래시 화면)
• 글로벌 네비게이션/푸터: 지속적인 사이트 프레임에는 site-navigation-system 또는 site-footer-system을 사용하세요.
• 마이크로 인터랙션: 섹션 내 개별 요소 동작에는 interactive-state-system을 사용하세요.
• 순수 데이터 표시: 콘텐츠가 균일한 항목의 연속적인 흐름인 경우(예: 대규모 데이터 테이블 또는 무한 피드)

입력

1. 콘텐츠 시퀀스: 페이지 섹션의 우선순위 목록(정보 아키텍처에서 가져옴)
2. 섹션 우선순위: '고영향'(혜택 중심) 섹션과 '지원'(기술 사양/사회적 증거) 섹션 구분
3. 브랜드 팔레트: 배경 교대 패턴 정의용
4. 유동적 간격 시스템: 일관된 수직 여백 및 섹션 패딩용
5. 반응형 그리드 시스템: 최대 콘텐츠 너비 및 열 동작 정의용

출력

1. 섹션 시퀀스 맵: 각 섹션의 순서와 레이아웃 패턴을 보여주는 청사진
2. 전환 전략: 배경 전환(예: 밝음 -> 어두움 -> 밝음) 및 수직 간격에 대한 정의된 규칙
3. 레이아웃 청사진: 일반적인 섹션 패턴(지그재그, 그리드, 50/50 분할)에 대한 주석이 달린 와이어프레임
4. 반응형 스태킹 규칙: 복잡한 섹션 레이아웃이 모바일에서 축소되는 방식

워크플로

1. 내러티브 흐름 매핑

사용자 의도에 따라 콘텐츠를 논리적 순서로 배열합니다. 일반적인 랜딩 페이지 흐름은 다음과 같습니다:

• 인지: 히어로 / 문제 제시
• 교육: 작동 방식 / 핵심 기능
• 검증: 사회적 증거 / 사례 연구
• 세부 사항: 부가 기능 / 가격 / FAQ
• 전환: 최종 CTA

2. 섹션 레이아웃 패턴 선택

레이아웃 패턴을 번갈아 사용하여 반복을 피하세요:

• 분할(50/50): 한쪽에는 콘텐츠, 다른 쪽에는 시각적 요소. 고영향 혜택에 가장 적합합니다.
• 지그재그: '분할' 패턴을 번갈아 사용(예: 시각적 요소 왼쪽, 그다음 시각적 요소 오른쪽). 스토리텔링 및 스캔 피로 감소에 가장 적합합니다.
• 기능 그리드: 3~4열의 카드/아이콘. 부가 기능 또는 서비스에 가장 적합합니다.
• 중앙 정렬 스택: 모든 콘텐츠가 세로 및 가로로 중앙 정렬됩니다. 강력한 문구 또는 최종 CTA에 가장 적합합니다.

3. 전환 시스템 설계

시각적 단서를 사용하여 주제 변경을 알리세요:

• 배경 교대: 섹션을 '그룹화'하기 위해 흰색, 밝은 회색 또는 브랜드 색상 간에 전환합니다. 각 섹션에 대해 별도의 회색/색조를 직접 선택하는 대신 color-mix()를 사용하여 단일 브랜드 토큰에서 색조 배경을 파생시킵니다(예: color-mix(in oklch, var(--brand) 6%, white)). 이렇게 하면 브랜드 색상이 변경되어도 팔레트가 일관되게 유지됩니다.
• 수직 간격: fluid-spacing-system에서 일관된 상단/하단 패딩을 사용합니다. 이상적으로는 clamp()를 사용하여 중단점에서 갑자기 변경되는 대신 섹션 패딩이 모바일과 데스크탑 간에 부드럽게 조정되도록 합니다.
• 구분선: 보다 현대적이거나 역동적인 느낌을 위해 미세한 선이나 각진 SVG 전환을 사용합니다.

4. 콘텐츠 '브레이크' 설정

사용자가 너무 빨리 스크롤하는 것을 막기 위해 '브레이커 섹션'을 도입하세요:

• 인용문/추천사: 큰 텍스트 중앙 정렬 섹션.
• 전체 너비 이미지: 정신적 재설정을 제공하는 몰입형 시각 자료.
• 통계/임팩트: 큰 숫자가 있는 고대비 블록.

5. 반응형 스태킹 정의

섹션이 축소되는 방식을 계획하세요:

• 자연스러운 스택: 분할 레이아웃은 일반적으로 시각적 요소가 위나 아래에 쌓입니다(보통 문맥상 위쪽).
• 지그재그 반전: 지그재그 레이아웃에서 '미디어'가 모바일에서 순차적으로 쌓이지 않도록 하세요(예: 텍스트-미디어-미디어-텍스트). 일관성을 유지하도록 순서를 조정하세요(예: 미디어-텍스트-미디어-텍스트).

의사 결정 규칙

• '피로' 규칙: 세 개의 연속된 섹션에서 동일한 레이아웃 패턴을 절대 사용하지 마세요. 분할, 그리드, 중앙 정렬 레이아웃을 순환하세요.
• '시각적 앵커' 규칙: 모든 고영향 섹션에는 텍스트를 뒷받침하는 시각적 앵커(이미지, 비디오 또는 아이콘)가 있어야 합니다.
• 대비를 통한 집중: 페이지의 나머지 부분과 높은 대비를 만들기 위해 가장 중요한 메시지나 최종 CTA에는 어두운 배경 섹션을 사용하세요.
• 텍스트 너비 제한: 섹션 컨테이너가 더 넓더라도 가독성을 보장하기 위해 텍스트 블록의 너비를 제한하세요(일반적으로 max-width: 60ch).

제약 조건

• 접근성: 배경색 전환은 해당 섹션 내 모든 텍스트에 대해 WCAG AA 명암비를 유지해야 합니다.
• 제목 계층: 각 주요 섹션은 논리적인 문서 개요를 따르는 <h2-h6>으로 시작해야 합니다.
• 반응형: 섹션 패딩은 모바일에서 축소되어야 합니다(예: 데스크탑의 --space-3xl은 모바일에서 --space-xl이 됩니다). 개별 중단점 재정의보다는 clamp() 표현식을 선호하세요.
• 간격 일관성: 섹션 사이의 간격은 주제 전환에 더 큰 '브레이크'가 필요한 경우가 아니라면 일관되어야 합니다.

일반적인 실패 패턴

• '텍스트의 벽': 사본이 너무 많고 시각적 중단이나 부제목이 없는 섹션.
• 패턴 반복: 5개의 연속된 섹션에 동일한 50/50 분할 레이아웃을 사용하여 페이지가 단조롭게 느껴지는 경우.
• '모바일 샌드위치': 지그재그 레이아웃에서 모바일에서 스태킹 순서를 조정하지 않아 두 개의 이미지 또는 두 개의 텍스트 블록이 서로 직접 위에 놓이게 되는 경우.
• 공백 부족: 충분한 수직 패딩 없이 섹션을 함께 밀어넣어 콘텐츠가 답답하게 느껴지는 경우.
• 일관성 없는 정렬: 명확한 논리 없이 동일한 시퀀스에서 중앙 정렬된 제목과 왼쪽 정렬된 제목을 섞어 사용하는 경우.

검증 기준

• 페이지 레이아웃이 최소 두 가지 이상의 패턴(예: 분할 및 그리드)을 번갈아 사용합니다.
• 섹션 전환(배경 이동)을 사용하여 관련 콘텐츠를 그룹화합니다.
• 유사한 섹션 유형 전반에 걸쳐 수직 간격(패딩)이 일관됩니다.
• 모든 섹션이 올바른 제목 계층 구조(h2는 주요 섹션)를 따릅니다.
• 지그재그 레이아웃의 모바일 스태킹 순서가 논리적으로 정의됩니다.
• 텍스트가 많은 섹션은 읽을 수 있는 줄 길이(max-width: 60-80ch)를 유지합니다.
• 배경색이 있는 섹션의 명암비가 WCAG AA를 충족합니다.