brandvm/webflow-style-guide

Webflow 스타일 가이드: 모든 사이트에 동일한 레이아웃

스타일 가이드는 프로토타입과 Webflow에서 다른 어떤 페이지보다 먼저 구축되는 첫 번째 페이지입니다. 변수, 태그 스타일, 클래스가 다른 것에 의존되기 전에 검증하며, 모든 클래스를 한 요소에 담아 Webflow의 사용하지 않는 스타일 정리가 CMS, 스크립트, 또는 아직 구축되지 않은 페이지에서만 사용되는 클래스를 절대 삭제하지 못하게 합니다.

레이아웃은 고정되어 있습니다. 프로젝트는 콘텐츠만 제공하고 레이아웃은 제공하지 않습니다:

• sg.css는 페이지 자체의 레이아웃입니다 (Sg 클래스).
• scripts/gen-style-guide.mjs는 Webflow 스냅샷, CSS, 프로젝트의 샘플로 페이지를 작성합니다.
• scripts/check-style-guide.mjs는 클래스가 페이지에 없거나, 콤보의 클래스들이 한 요소에 함께 배치되지 않거나, 레이아웃이 변경된 경우 실패합니다.
• scripts/sections.mjs는 두 스크립트가 공유하는 섹션 목록입니다.
• 모든 타이포그래피 샘플은 data-sg-type(이름)을 가지므로, 프로토타입의 pnpm measure:type이 1440px와 390px에서 렌더링된 타입(크기, 줄 높이, 자간, 두께)을 출력하여 클래스가 Webflow에 들어가기 전에 디자인의 타입 시트와 비교할 수 있습니다.

공유 규칙이 적용되며(webflow-build › rules.md: Designer 우선, 승인 없이 커밋 또는 푸시 금지), Webflow에서는 자체 빌드 규칙이 적용됩니다: 각 배치 전에 승인 필요.

레이아웃

프레임. 왼쪽에 고정된 사이드바가 섹션 번호를 링크로 나열하며, 읽고 있는 섹션이 강조 표시됩니다. 오른쪽에는 하나의 콘텐츠 열이 있습니다. 991px 이하에서는 사이드바가 탐색 아래에 가로로 스크롤되는 링크 스트립이 됩니다.

새로운 사람을 위해 작성됨. 페이지는 사이트를 처음 보는 사람(클라이언트 또는 첫날의 개발자)이 이해할 수 있어야 합니다.

• 개요는 페이지 설명, 사용법(찾기, 행 읽기, 추가 전 재사용, 여기에 추가)에 대한 네 개의 카드, 사이트 한눈에 보기(개수), 폰트, 변수 컬렉션 및 중단점으로 시작합니다.
• 모든 섹션은 번호, 제목, 용도와 사용법을 설명하는 한 줄로 시작합니다(텍스트는 scripts/sections.mjs에 있으며 모든 사이트에서 동일).
• 버튼, 폼 및 컴포넌트의 샘플은 패널 위에 표시됩니다. 클래스 이름은 칩 안에 표시됩니다. 긴 테이블은 스크롤 중에도 이름을 볼 수 있게 유지됩니다.
• 모든 레이블은 사이트 자체 폰트를 사용합니다. 모노스페이스 없음: Designer 클래스는 하나의 폰트 패밀리를 유지하며, 시스템 모노스페이스 폰트는 자체 슬래시가 있는 0을 제공합니다.
• 프레임은 페이지의 색상을 사용합니다(중립 선과 패널은 낮은 불투명도). 따라서 밝은 사이트나 어두운 사이트에서 동일하게 보입니다.

섹션은 항상 이 순서대로, 이 이름과 id를 가집니다. 내용이 없는 섹션은 생략됩니다. 추가, 이름 변경 또는 재정렬되지 않습니다.

#	섹션	id	출처
1	개요	overview	생성됨: 페이지 사용법, 개수, 폰트, 컬렉션, 중단점
2	색상	colors	Colors Semantic 외부의 모든 Color 변수
3	테마	themes	섹션, Colors Semantic 모드를 설정하는 모든 클래스, 모드별 역할 테이블
4	타이포그래피	typography	Typography Styles 모드를 설정하는 모든 클래스, 네이티브 태그 스타일(제목, 단락, 링크), Body 스타일의 폰트 기능 및 타입 스케일
5	유틸리티	utilities	Size, Weight, Leading, Tracking, Text 및 Max Width 클래스
6	간격, 반경 및 레이아웃	spacing	간격(각각 크기 막대 포함), 반경 및 레이아웃 변수
7	버튼 및 링크	buttons	샘플
8	폼	form-elements	샘플(항목은 section=forms 사용, Webflow가 forms를 요소 id로 거부)
9	컴포넌트	components	샘플
10	페이지 섹션	page-sections	샘플, 절반 크기 화면으로 표시
11	기타 클래스	other-classes	생성됨: 위에 해당하지 않는 모든 클래스

행. 페이지의 모든 항목은 하나의 Sg Row입니다. 왼쪽에는 Designer에 표시되는 이름, CSS 클래스, 일반 언어로 된 메모(바인딩 대상, 중단점별 값, 상태). 오른쪽에는 실제 샘플이 있습니다. 섹션은 제목과 행 목록입니다. 값 테이블(모드별 역할, 타입 스케일, 간격, 레이아웃)은 행의 샘플에서 하나의 Sg Table로 표시됩니다. 이름 열 다음에 모드 또는 값별 열이 있습니다.

프레임에 프로젝트 클래스 없음. 프레임은 Sg 클래스만 사용하므로 프로젝트의 타입 스케일이나 섹션 패딩과 관계없이 페이지가 동일하게 보입니다. 프로젝트 클래스는 샘플에만 나타납니다.

변수는 표준이지 제한이 아닙니다

페이지는 사이트가 가진 모든 것을 보여줍니다. 템플릿의 컬렉션, 이름 및 시작 값(webflow-build 규칙 §4, 기본 폰트로 Geist 포함)은 표준 레이아웃 및 변수 사용 방식입니다. 프로젝트는 값을 변경하고 변수, 모드 및 컬렉션을 추가, 이름 변경 또는 제거할 수 있습니다.

• 시맨틱 컬렉션 외부의 모든 Color 변수는 견본입니다. 모드를 설정하는 모든 클래스는 테마 또는 타입 행입니다. 생성기가 역할별로 알지 못하는 모든 컬렉션은 "간격, 반경 및 레이아웃" 아래에 테이블로 표시됩니다.
• 표준 컬렉션을 다르게 명명하는 사이트는 design/style-guide/config.json에 명시합니다(예: { "collections": { "semantic": "테마", "typeStyles": "타입 스타일" } } (키: semantic, typeStyles, typeRole, typeScale, spacing, radius, layout).
• 고정된 것은 레이아웃: 프레임, 섹션 순서, 행입니다.

샘플 (섹션 7~10)

제공하는 두 가지 방법; 둘 다 동일한 행을 생성합니다.

1. 실제 페이지에서 가져오면 페이지와 동기화됩니다. 페이지에서 마크업을 감싸세요:

<!-- sg:start section=components | name=카드 | class=.card | note=목록 및 홈 페이지에서 사용됨 -->
<a class="card" href="/work/item" data-card>…</a>
<!-- sg:end -->

2. 수동으로, 페이지에 자체적으로 표시되지 않는 것(버튼 상태, 폼 부분)을 위해. design/style-guide/items/에 섹션별 파일 하나씩, 각 항목은 헤더 주석과 마크업으로 구성됩니다:

<!-- sg: section=buttons | name=버튼 보조 | class=.button.is-secondary | note=버튼에 콤보 -->
<a class="button is-secondary" href="#buttons">보조</a>

• section은 buttons, forms, components 또는 page-sections입니다. name은 필수입니다. class와 note는 선택 사항입니다.
• 컴포넌트 및 페이지 섹션의 경우 실제 페이지 블록을 선호합니다. 수동으로 복사한 샘플은 페이지와 동기화되지 않으며, 이전 빌드에서 수동 복사된 미리보기로 구축된 컴포넌트는 스크립트 훅을 잃었습니다.
• 생성기는 샘플에서 id, for, data-* 훅 및 id 참조를 제거하고 inert로 표시합니다. 이는 컴포넌트의 그림일 뿐 작동하는 복사본이 아니므로 스크립트가 연결되지 않고 포커스를 받지 않습니다.
• 페이지는 noindex이므로 두 번째 h1이 있어도 괜찮습니다. 타이포그래피 섹션은 모든 H1 제목 태그 스타일의 샘플로 실제 하나를 보여주고, 샘플에 포함될 수 있습니다.
• page-sections 샘플은 밀봉된 프레임에서 절반 크기로 표시됩니다. Webflow에 해당 페이지가 존재하면 제거하세요: 페이지는 그런 다음 클래스를 유지합니다. 섹션 1~9는 영구적으로 유지됩니다.
• 인라인 style 속성 없음: Webflow 가져오기는 각각을 정크 콤보 클래스로 변환합니다. 색상 견본, 반경 상자 및 간격 막대는 대신 변수당 생성된 하나의 콤보를 사용합니다.

프로토타입에서 (첫 번째 페이지)

1. 프로토타입 폴더가 존재하고(webflow-prototype › 프로젝트 설정) Webflow 스냅샷이 최신입니다(pnpm css).
2. pnpm style-guide. design/style-guide/index.html과 src/css/style-guide.css를 작성합니다. 절대 편집하지 마세요.
3. 프로젝트의 샘플(버튼 및 폼 항목, 페이지가 구축됨에 따라 컴포넌트 및 페이지 블록)을 추가하고 다시 실행합니다.
4. pnpm check:style-guide가 통과할 때까지 실행합니다.
5. 담당자가 1440, 820, 667 및 390에서 페이지를 검토하고 첫 번째 콘텐츠 페이지가 시작되기 전에 승인합니다.
6. 그 후로는 모든 새 클래스나 컴포넌트가 동일한 작업에 행을 가집니다: 샘플 추가, pnpm style-guide, pnpm check:style-guide.

Webflow에서 (첫 번째 페이지)

변수, 태그 스타일, 클래스 및 레포지토리 번들이 적용된 후, 다른 페이지보다 먼저. 배치당 승인 필요.

1. 페이지. design 폴더의 /design/style-guide, 표준 셸 사용(webflow-build 규칙 §1). 페이지 헤드 코드에 noindex, nofollow; 사이트 검색 및 사이트맵에서 제외(사이트맵 설정은 사이트 플랜 필요: 플랜이 없는 사이트에서는 noindex 태그가 검색에서 제외하며, 제외는 플랜이 존재할 때 설정됨). 링크는 전체 페이지 로드로 연결됩니다.
2. Sg 클래스. 스타터에서 복제된 사이트는 이미 가지고 있습니다. 그렇지 않으면 모든 값을 유지하는 가장 빠른 방법: WHTML 빌더로 프레임을 가져오고 sg.css를 css로 전달합니다(변수 및 calc()는 일반 값으로 대체, rgb(r g b / a)는 rgba()로 작성). 가져오기는 각 클래스를 longhand 속성, 상태 및 중단점으로 생성하며 슬러그로 이름을 지정합니다. 그 후 각각을 Designer가 표시해야 하는 이름(Sg Row, Sg Row Meta, Sg Table Key…)으로 이름을 변경합니다. .w--current 규칙은 Sg Sidebar Link의 현재 상태가 되며, 스타일 도구 자체가 작성할 수 없습니다. 이는 클래스가 새 것일 때만 작동합니다. 이미 존재하는 클래스의 경우 가져오기는 번호가 매겨진 복제본을 만듭니다(webflow-build/lessons/mcp.md).
3. 변수 콤보. 각 색상 변수에 대해 콤보 Sg Swatch Color + Is … 바인딩 background-color; 각 반경 변수에 대해 Sg Radius + Is … 바인딩 border-radius; 각 간격 변수에 대해 Sg Bar + Is … 바인딩 width. 생성된 src/css/style-guide.css에 한 줄에 하나씩 나열됩니다.
4. 생성된 페이지에서 클래스만 사용하여 섹션별로 빌드합니다. 마크업을 가져오기 전에 모든 클래스와 콤보를 생성합니다(가져오기는 하나의 클래스가 누락되면 전체 클래스 목록을 삭제합니다). 그런 다음 각 사이드바 링크를 해당 섹션에 연결합니다(링크 유형: 페이지 섹션). 그러면 Webflow가 현재 섹션을 표시합니다.
5. 컴포넌트 행은 마크업 복사본이 아닌 컴포넌트 인스턴스입니다.
6. 스테이징에서 확인: 사이트의 모든 클래스가 게시된 페이지나 셸에 나타나고, 모든 콤보가 하나의 요소에 있어야 합니다(클래스가 떨어져서만 나타나는 콤보는 정리 시 여전히 삭제됨). 사이드바가 뷰의 섹션을 강조 표시합니다. 헤드에 noindex가 있습니다. 그런 다음에만 사용하지 않는 스타일 정리가 안전합니다.

기존 사이트에서

템플릿에서 구축되지 않은 사이트도 동일한 페이지를 가질 수 있습니다: webflow-prototype 스킬의 프로토타입 스타터에서 프로토타입 폴더를 만들고 사이트의 스냅샷을 가져온 다음 "프로토타입에서" 및 "Webflow에서"를 따릅니다. Sg 클래스는 아직 존재하지 않습니다. 2단계에서 생성하세요.

게이트

• 프로토타입 스타일 가이드 승인됨 [담당자]: 프로토타입의 첫 번째 콘텐츠 페이지 전.
• 스타일 가이드 기본 완료 [Claude 확인, 담당자 승인]: Webflow 페이지가 지금까지 존재하는 모든 클래스를 보유합니다. 게시되었으며 세 가지 너비에서 확인됨.
• 스타일 가이드 최종 확인 [Claude 확인]: 빌드 인계 시, pnpm check:style-guide가 통과하고 게시된 페이지가 모든 클래스를 보유합니다.

레이아웃 변경

레이아웃은 여기서 변경되며, 모든 사이트에 한 번에 적용되며, 단일 프로젝트에서는 절대 변경되지 않습니다: 템플릿에서 sg.css, 섹션 목록 또는 생성기를 편집하고, 동일한 작업 라운드에서 스타터 사이트를 업데이트하고 릴리스합니다 (webflow-build › rules.md › 기여). 프로젝트는 pnpm update-skills 및 pnpm style-guide로 업데이트를 받습니다.