mukulmunda41-create/new-section – 새 섹션 추가

새 섹션 (New section)

이미 규칙이 정해진 사이트의 한 섹션을 위한 짧은 루틴입니다. futuristic-web-design 스킬의 섹션 단계를 독립적으로 실행할 수 있도록 패키징한 것입니다.

../futuristic-web-design/가 이 스킬 옆에 있다면, 참조 파일에 세부 내용이 있습니다. 작업에 필요한 파일을 읽으세요: references/design-system.md에는 레이아웃 용어와 일반 사이트 감사(audit), references/ship.md에는 연락처 양식과 전화 통과(phone pass) 정보가 있습니다.

프로젝트에 규칙 파일이나 디자인 시스템이 아직 없다면, futuristic-web-design을 첫 번째 단계부터 사용하세요. 디자인 시스템 없이 구축된 섹션은 제너릭한 모양이 됩니다.

루틴 (The routine)

1. 규칙을 읽습니다. 프로젝트 규칙 파일(AGENTS.md, CLAUDE.md 또는 GEMINI.md)과 테마 토큰을 엽니다. 거기에 정의된 서체와 팔레트만 사용하고, 프로젝트가 이미 사용하는 스택을 따릅니다.
2. 내용을 확인합니다. 사실이 중요한 경우(가격, 주장, 이름, 인용문)는 물어보세요. 실제 비즈니스에 대해 고객, 리뷰 또는 통계를 절대 만들어 내지 마세요. 다른 곳에서는 실제 카피를 쓰고, 직접 만든 줄은 표시해 두세요. 채우기용 텍스트는 사용하지 마세요.
3. 의도적으로 레이아웃을 선택합니다. 분할, 중앙 정렬, 풀 블리드, 그리드, 벤토 또는 비대칭 중에서 선택하고, 그 이유를 한 줄로 설명하세요. 세 개의 동일한 카드 위에 중앙 정렬된 제목이 기본인 것을 피하고, 하나의 항목을 강조하고 나머지는 오프셋하세요.
4. components/ 아래 또는 프로젝트에 해당하는 위치에 하나의 컴포넌트를 별도 파일로 구축합니다.
5. 브라우저에서 390px, 768px, 1440px으로 확인하고, 보이는 문제를 수정합니다. 모든 규칙을 만족해도 레이아웃이 이상해 보일 수 있습니다.
6. 위아래 간격을 인접 섹션과 일치시킵니다.
7. 세 줄로 보고합니다: 무엇을 구축했는지, 파일 경로, 그리고 사용자가 확인해야 할 사항(만든 카피, 연결되지 않은 버튼, 확인할 수 없었던 모든 것).

요청된 섹션만 변경하세요. 요청보다 더 넓은 diff는 어떤 편집이 도움이 되었는지 숨깁니다.

레이아웃 옵션 (Layout options)

사용자가 옵션을 요청하거나, 무엇을 원하는지 설명할 수 없을 때는 같은 내용으로 두세 가지 변형을 구축하세요. 각각을 자체 프리뷰 라우트(/preview-1, /preview-2, 또는 재스타일링의 경우 /before와 /after)에 넣고 한 줄 설명을 추가하세요. 사람들은 구체적으로 지정하는 것보다 선택을 더 쉽게 합니다.

사용자가 선택할 때까지 실제 페이지는 건드리지 마세요. 그런 다음 다른 변형과 해당 라우트를 삭제하세요. 남은 프리뷰 라우트는 사이트와 함께 배포되기 때문입니다.

섹션이 디자인된 것으로 보이게 하는 요소 (What makes a section look designed)

• 타이포그래피. 헤드라인 서체는 크고 좁은 자간으로, 읽기용 서체는 그 외 모든 곳에 사용합니다. 서체는 두 가지만 사용합니다. font-mono 같은 프레임워크 기본값이 레이블에 사용되면 세 번째 서체로 간주됩니다. 히어로 헤드라인은 최대 약 여덟 단어입니다.
• 하나의 주요 버튼. 채워진 스타일, 팔레트의 버튼 색상, 브리프의 동작에 연결됩니다. 두 번째 동작은 화살표가 있는 텍스트 링크 또는 얇은 아웃라인입니다. 동일한 가중치의 두 버튼은 결정이 내려지지 않았음을 나타냅니다.
• 모든 버튼은 실제 목적지로 연결됩니다. 목적지를 알 수 없으면 가장 가까운 정직한 대상을 사용하고, 버튼을 보고서에 '연결되지 않음'으로 표시합니다.
• 표면과 공간. 넉넉한 여백, 평평한 채우기, 가는 테두리, 선택적 그레인(입자) 또는 유리 효과. 팔레트를 대체하는 그래디언트는 사용하지 않습니다. 호버 시에만 그림자.
• 이미지. 표시 크기로 제공, 첫 화면 아래에서는 지연 로딩(lazy-load), 사진을 설명하는 대체 텍스트 포함("image 1" 대신 "연한 돌 위의 앰버 세럼 병").
• 모션. 짧은 페이드와 위로 몇 픽셀 이동, 500ms 미만, 한 번만. prefers-reduced-motion에서는 부드러운 스크롤과 호버 전환을 포함해 아무것도 움직이지 않습니다.

390px 확인 (The 390px check)

휴대폰이 대부분의 방문을 차지하므로, 이 너비가 섹션이 완성되었는지를 결정합니다.

• 본문 텍스트는 읽을 수 있고, 어떤 헤드라인도 다섯 줄 이상으로 줄바꿈되지 않습니다.
• 아무것도 화면 가장자리에 밀착되지 않습니다.
• 터치 대상은 약 44px 이상입니다.
• 수평 스크롤이 없습니다.
• 내비게이션은 열리고 닫히는 메뉴 토글 뒤로 접힙니다.
• 한 행의 카드는 그 위 텍스트 길이에 관계없이 가격과 버튼을 같은 줄에 유지합니다. 세 가지 너비 모두에서 확인하세요.

연락처 섹션 (Contact section)

목적지가 없는 양식은 해롭습니다. 사람들이 자신의 메시지가 도착했다고 가정하기 때문입니다. 모델은 우편함입니다: 게시는 모두에게 열려 있고, 읽기는 소유자 외에는 모두에게 잠겨 있습니다.

• 필드 name, email, message를 Supabase 또는 프로젝트가 이미 사용하는 백엔드의 leads 테이블에 저장합니다.
• Row level security 활성화: 익명 삽입 허용, 공개 읽기 없음. 삽입에 .select()를 연결하지 마세요. 읽기 권한이 없으면 호출이 실패합니다.
• 사이트 코드는 공개 키만 사용하며, .env.local에서 로드합니다. 이 파일은 git-ignored 상태로 유지됩니다.
• 전송 전에 유효성 검사(가능한 이메일 형식, 비어 있지 않은 메시지)를 수행하고 거부 사유를 설명합니다. 성공과 실패에 대해 별도의 메시지를 제공합니다.
• 스팸 방어: 숨겨진 honeypot 필드(비어 있어야 함)와 사람이 입력할 수 있는 것보다 빠르게 도착한 제출을 거부합니다.
• 방문자처럼 테스트하세요: 빈 메시지, 잘못된 이메일 형식, 유효한 제출. 테이블에 새 행이 추가되어야만 작동이 확인됩니다. 화면의 확인 메시지만으로는 충분하지 않습니다.
• 저장에 실패하면 오류를 읽고 정책을 수정하세요. 이 테이블에는 사람들의 이름과 주소가 저장되므로 Row level security를 절대 끄지 마세요.