프랭클리/디자인-룰

디자인 규칙

이 규칙은 브리프, 프로젝트의 DESIGN.md 및 사용 중인 디자인 스킬(보통 임페커블)이 선택의 여지를 남겨둔 모든 곳에 적용하세요. 해당 항목이 명시하는 바가 있으면 그것이 우선합니다. UI를 처음 편집하기 전과 비평 또는 감사를 작성하기 전에 이 규칙을 읽으세요.

카피

• 컨트롤의 레이블은 그 결과를 나타내며, 동일한 단어가 플로우 전체에 걸쳐 일관되게 사용됩니다. "게시" 버튼은 "게시됨" 확인 메시지를 생성합니다.
• 오류 텍스트는 무엇이 실패했는지와 해결 방법을 제품의 어조로, 사과 없이 명시합니다.
• 네비게이션, 히어로, 푸터에서 의도당 하나의 레이블만 사용합니다("영업팀에 문의" 또는 "문의하기" 중 하나를 선택하고 둘 다 사용하지 않음). 기본 버튼 레이블은 한 줄에 세 단어 이하로 들어맞아야 합니다.
• 제목과 버튼은 프로젝트에서 이미 사용하고 있는 대/소문자 규칙을 따릅니다. 새 프로젝트는 문장형 대소문자(sentence case)를 사용합니다.
• 페이지당 하나의 레지스터(어조)를 사용합니다. 과장된 카피와 간결한 제품 카피가 같은 화면에 공존하지 않아야 합니다.
• 둥근 따옴표와 아포스트로피, 실제 생략 부호(…)를 사용하고, 줄표(em dash)는 사용하지 않습니다(마침표, 쉼표 또는 콜론 사용). 줄당 가운데 점(middle dot)은 최대 하나입니다.
• 사용 후기는 세 줄 이하로 작성하고, 해당 인물의 이름과 역할을 포함합니다.
• 전달하기 전에 렌더링된 페이지의 모든 보이는 문자열(대체 텍스트, 빈 상태, 푸터 포함)을 한 번 읽고, 행복한 말(happy talk: 무언가가 얼마나 좋은지만 말하는 문장)을 제거하세요.

자유롭게 선택 가능한 축에서 제외할 요소

• 팔레트: #F4F1EA 근처의 따뜻한 크림색 바탕에 #D97757 근처의 테라코타 악센트(Claude 자체 인터페이스 색상); 프리미엄 소비자 세트 #F5F1EA, #EFEAE0, #B08947, #B6553A, #9A2436, #1A1714; 검정을 대신하는 약간 색조가 있는 거의 검은색(#0B0B0B, #111).
• 타이포그래피: 이탤릭체, 굵기 또는 색상으로 구분된 헤드라인의 한 단어; 자간이 넓은 대문자 레이블; 링크 및 버튼 텍스트에 추가된 "→"; "단어 — 조각" 형태로 구성된 레이블.
• 크롬: 히어로의 버전 태그(V0.6, BETA) 또는 버전 푸터; 스크롤 다운 큐; 로케일, 시계 또는 날씨 스트립; 이미지 위의 장식용 상태 표시줄 또는 알약; 장식용 사진 크레딧; "브랜드. 모션. 스페셜."과 같은 슬로건 스트립; "조용히 신뢰받는".
• 데이터: 위아래로 선이 그어진 행으로 표시된 5개 이상의 항목 목록; 값을 비교하는 데 사용되는 채워진 진행률 표시줄.

설득 페이지

• 히어로: 데스크톱 너비에서 헤드라인은 2줄 이하, 보조 텍스트는 20단어 이하, 기본 액션은 스크롤 없이 보여야 하며, 텍스트 요소는 4개 이하, 상단 패딩은 6rem 이하, 액션 버튼 아래에는 아무것도 없어야 함(태그라인, 신뢰 스트립, 가격 티저 없음).
• 헤드라인은 유동적인 크기(대략 clamp(3rem, 5vw, 5.5rem))의 넓은 컨테이너에 설정하여 모든 너비에서 2~3줄을 유지합니다.
• 네비게이션은 한 줄에, 높이 64–72px, 최대 80px를 넘지 않습니다.
• 페이지당 최대 한 개의 마키(marquee)와 최대 두 개의 번갈아 나타나는 이미지/텍스트 분할을 연속으로 사용합니다.
• N개 항목의 벤토(bento) 그리드는 정확히 N개의 셀을 가지며 빈 셀이 없어야 합니다. 조밀한 패킹 시, 모든 중단점에서 스팬이 서로 맞물리는지 확인합니다.
• 방문자가 첫눈에 기억해야 할 한 가지를 명명하고, 이후의 선택이 이를 지원하도록 합니다.

컴포넌트 및 세부 사항

• 중첩된 모서리 반경: 내부 반경 = 외부 반경 − 두 요소 사이의 간격.
• 카드 행에서 각 카드의 액션을 하단에 고정하여 버튼이 정렬되도록 합니다. 가격 기능 목록은 모든 열에서 동일한 높이에서 시작합니다.
• 내림자가 있는 이탤릭체 표시 유형은 줄 높이(line-height)를 1.1 이상으로 하고 약간의 하단 패딩을 추가하여 글자가 잘리지 않도록 합니다.
• 본문 단락은 text-wrap: pretty를 사용하여 단락이 한 단어로 끝나지 않도록 합니다.
• 사용자가 콘텐츠로 돌아오는 곳(문서, 기사 목록)에서는 방문한 링크가 다르게 보입니다. href="#" 플레이스홀더는 배포되지 않습니다.
• 접이식 사이드바 레일은 너비 56–72px, DOM에 레이블 유지, 44×44px 타겟, 토글에 aria-expanded 설정, 숨겨진 콘텐츠에 inert 설정.
• 전체 높이 섹션은 dvh 또는 svh를 사용하며, 절대 100vh를 사용하지 않습니다.
• 어떤 너비에서도 가로 스크롤이 없어야 합니다. 애니메이션 또는 오프셋 요소의 넘침을 overflow-x: clip으로 자릅니다. hidden은 고정 위치 지정을 깨뜨립니다.
• 스크롤 연결 효과는 프레임워크 상태에 스크롤 이벤트 또는 프레임당 기록하는 대신 CSS 스크롤 기반 애니메이션 또는 IntersectionObserver에서 실행됩니다.
• 뷰포트 메타는 확대/축소를 허용합니다(user-scalable=no 또는 maximum-scale=1 없음). 전환은 transition: all 대신 해당 속성을 지정합니다.
• 공개 사이트는 콘텐츠로 건너뛰기 링크, 사용자 정의 404 페이지, 파비콘, 제목, 메타 설명, 오픈 그래프 태그, 푸터의 법적 링크를 제공합니다.
• CSS 특이성을 평평하게 유지하고, 섹션 수준 규칙(.section)과 컴포넌트 규칙(.cta)이 서로의 패딩이나 마진을 취소하지 않는지 확인합니다.

다크 모드

• 루트에 color-scheme: dark를 설정하여 양식 컨트롤과 스크롤바가 테마를 따르도록 합니다.
• 본문 텍스트는 순수 흰색이 아닌 오프-화이트(팔레트에서 색조를 띤 #E0E0E0 정도)입니다.
• 악센트는 라이트 테마 값에서 채도를 10~20% 낮춥니다.

비평 및 감사

이러한 항목을 디자인 스킬 자체의 비평 또는 감사 구조 내에서 발견 사항으로 보고하며, 새로운 보고서 섹션을 추가하지 않습니다.

• 트렁크 테스트(Trunk test), 페이지별: 처음 방문자가 이 사이트가 무엇인지, 어떤 페이지에 있는지, 주요 섹션이 무엇인지, 여기서 어떤 옵션이 있는지, 구조상 어디에 있는지, 검색 방법을 말할 수 있습니까? 명확한 답변이 3개 이하이면 심각도가 높은 발견 사항입니다.
• 호감도(Goodwill): 70점에서 시작합니다. 숨겨진 가격이나 연락처 정보 또는 강제 투어의 경우 15점 감점; 까다로운 입력 형식(카드 번호의 공백 거부) 또는 작업에 필요하지 않은 정보 요청의 경우 10점 감점; 모호한 선택당 5점 감점. 각 감점과 함께 점수를 보고합니다.
• 첫인상(First look): 눈에 가장 먼저 띄는 세 가지와 그것들이 중요한 세 가지인지 명명합니다.
• 행복한 말(Happy talk): 페이지의 단어 수와 그중 행복한 말이 차지하는 비율을 보고합니다.

리디자인

라이브 사이트의 디자인을 교체하기 전에 SEO 기준선(제목, 메타 설명, 제목, 인덱싱된 URL)을 기록합니다. 사용자가 변경을 승인하지 않는 한 URL 슬러그, 네비게이션 레이블, 양식 필드 이름 및 순서, 로고, 법적 및 동의 카피, 분석 ID를 유지합니다.

변형, 컴프 및 폰트

• 헤드라인을 서로 바꿔도 아무도 눈치채지 못할 정도로 두 변형이 너무 가까우면, 그중 하나를 더 멀리 밀어냅니다.
• 생성된 컴프의 세부 사항을 읽으려면 보드를 자르는 대신 해당 섹션을 더 크게 재생성합니다.
• 일괄 스크린샷 라운드는 375, 768 및 1440px 너비를 포함합니다.
• 빌드된 페이지는 실패한 부분에 대한 타겟 편집으로 수정합니다. 재빌드의 경우에만 전체 파일을 재생성합니다.
• 모든 폰트는 공식 목록(Google Fonts, Fontshare 또는 파운드리)에서 확인하고 URL을 거기서 가져옵니다. 확인되지 않은 폰트는 이름이나 URL을 추측하는 대신 보류 중으로 표시합니다.