davila7/claude-code-templates

프리미엄 웹 디자인

Awwwards에 어울리는 React (.jsx) 컴포넌트를 만드세요. "누가 디자인했지?" 하고 궁금하게 만드는 그런 작품들입니다. 모든 픽셀에 의도가 있고, 모든 애니메이션에 안무가 있으며, 진지한 창의적 재능과 예산이 투입되었다는 인상을 주는 사이트입니다.

AI 미학의 문제

대부분의 AI 생성 웹사이트는 인식 가능한 공통된 DNA를 공유합니다. 이를 피하려면 그것이 무엇인지 정확히 알아야 합니다.

금지 목록 — 절대 하지 말아야 할 것

타이포그래피 금지사항

• 기본 글꼴로 Inter, Poppins, Montserrat, Raleway, Space Grotesk, Outfit 사용 — 이 폰트는 "AI 템플릿"을 연상시킵니다. (참고: Inter Tight는 별개의 서체 패밀리로 다른 메트릭을 가지며 허용됩니다.)
• 하나의 서체 패밀리만 모든 곳에 사용
• 예측 가능한 계층 구조의 균일한 글꼴 크기 (64px → 32px → 18px → 14px)
• 모든 곳에 기본 자간과 줄 높이 사용
• 특히 여러 줄로 된 문단을 모든 곳에서 중앙 정렬

색상 금지사항

• 보라색에서 파란색으로 이어지는 그라데이션 (가장 큰 AI 디자인 클리셰)
• 상황에 맞는 이유 없이 인디고/바이올렛을 주요 브랜드 색상으로 사용
• 흰색 배경 + 하나의 강조 색상 + 회색 텍스트 (SaaS 스타터 키트)
• 버튼이나 카드에 이유 없이 그라데이션 사용
• 실제 색상 선택의 대체제로 불투명도나 반투명 오버레이 사용
• 어두운 배경에 네온 강조 색상 사용 ("개발자 포트폴리오" 스타일)

레이아웃 금지사항

• 히어로 → 3열 특징 그리드 → 사용자 후기 → CTA → 푸터 (기본 SaaS 랜딩 페이지)
• 히어로 → 통계 표시줄 → 작업 그리드 → 소개 분할 → CTA → 푸터 ("프리미엄 AI" 랜딩 페이지 — 마찬가지로 판에 박힌 패턴)
• 사이트 간에 서로 바꿔 끼울 수 있는 예측 가능한 상하 섹션 순서. 모든 사이트는 고유한 구조적 DNA를 가져야 합니다 — 섹션 수가 다르고, 정렬 논리가 다르며, 깔끔한 범주에 속하지 않는 섹션이 있어야 합니다.
• 동일한 크기의 카드로 구성된 완벽하게 대칭적인 그리드
• 모든 것이 중앙 정렬되고 최대 너비 컨테이너 안에 포함됨
• 주요 UI 요소로 둥근 사각형과 박스 섀도우 사용
• 3~4개 행의 아이콘 + 제목 + 문단 카드
• 제목 + 부제목 + 두 개의 버튼이 나란히 있는 일반적인 히어로 섹션
• 텍스트만 있는 정적 평면 히어로 섹션 — 히어로 섹션은 몰입형 공간 경험이어야 합니다.

모션 금지사항

• 스크롤 시 아래에서 위로 페이드 인되는 요소 (과도하게 사용된 AOS 효과)
• 모든 것에 동일한 전환 효과 (동일한 지속 시간, 동일한 이징, 동일한 방향)
• 그냥 확대하거나 그림자를 추가하는 호버 효과
• 스켈레톤 스크린이나 안무된 리빌 대신 로딩 스피너 사용

이미지 및 장식 금지사항

• 배경 장식용 블롭(blob) 모양
• 떠다니는 기하학적 모양 (원, 삼각형) 을 "디자인 요소"로 사용
• 일반적인 그라데이션 메쉬 배경
• 균일한 가로세로비의 스톡 포토 그리드
• 섹션 마커로 이모지나 일반적인 라인 아이콘 사용

---

고급스러운 디자인의 실제 모습

프리미엄 웹 디자인은 절제, 놀라움, 그리고 세부 사항에 대한 집착적인 관심을 통해 장인정신을 전달합니다.

정체성으로서의 타이포그래피

타이포그래피는 500달러 웹사이트와 50,000달러 웹사이트를 구분짓는 가장 중요한 요소입니다.

서체 선택 철학:

• 제목에는 개성과 의견이 있는 독특한 세리프 또는 디스플레이 서체를 사용하세요. 좋은 시작점: 세리프의 경우 Playfair Display, Cormorant Garamond, DM Serif Display, Fraunces, Instrument Serif. 과도하게 사용되지 않은 산세리프의 경우: Syne, General Sans, Satoshi, Switzer, Cabinet Grotesk, Nacelle, Inter Tight, IBM Plex Sans, Manrope, Archivo, Work Sans, Instrument Sans.
• 개성 있는 디스플레이 서체와 중립적이면서도 세련된 본문 서체를 페어링하세요.
• 강조 타이포그래피(레이블, 카테고리, 날짜용) 로 고정폭 서체를 사용하면 에디토리얼한 품질이 더해집니다 — JetBrains Mono, IBM Plex Mono, Space Mono.
• 굵기를 극적으로 혼합하세요 — 900 두께의 제목 옆에 300 두께의 본문은 시각적 긴장감을 만듭니다.

타이포그래피 실행:

• 중단점 점프 대신 유동적인 크기 조절을 위해 clamp() 사용
• 극적인 크기 대비 — 데스크탑에서 제목은 8vw+가 될 수 있음
• 큰 제목에 음수 자간 사용 (-0.03em ~ -0.06em)
• 본문에는 넉넉한 줄 높이 (1.6–1.8), 제목에는 좁은 줄 높이 (0.9–1.1)
• 혼합 정렬 — 왼쪽 정렬 본문과 가끔 오른쪽 정렬 레이블 또는 비대칭 제목
• 문단에 max-width (45–75ch) 와 제목에 text-wrap: balance 적용
• 카테고리, 날짜, 메타데이터용으로 넓은 자간(0.1em+) 의 대문자 마이크로 레이블 사용

분위기로서의 색상

• 흑백으로 시작하세요. 색상은 그 자리를 증명할 때만 추가하세요.
• 의도가 있는 하나의 지배적인 색조 — "이 색상이 주장하는 감정적 영역은 무엇인가?"
• 순수한 #ffffff 또는 #000000 보다 오프 화이트와 따뜻한 회색이 더 디자인된 느낌을 줍니다 — #FAFAF8, #F5F0EB, #1A1A1A, #0D0D0D를 시도해보세요.
• 무채색 또는 유사색 팔레트에 한 순간의 대비를 더하는 것이 무지개 색 구성표보다 더 세련되게 읽힙니다.
• 제대로 된 다크 테마: "어두운 회색에 흰색"이 아니라 미묘한 따뜻함이나 차가운 색조로 배경 레이어링을 고려한 것.
• 색상을 아껴서 사용하면 더 강력하게 작용합니다 — 흑백의 바다 속 하나의 빨간색 링크는 빨간색이 모든 곳에 있는 것보다 더 강력합니다.

스토리텔링으로서의 레이아웃

이 스킬의 가장 큰 실패 모드는 표면적으로는 다르게 보이지만 동일한 기본 구조를 공유하는 사이트를 생성하는 것입니다 — 히어로, 세 개의 에디토리얼 섹션, 인용구, 양식, 코로폰. 여러 사이트에 걸쳐 이는 단지 색상만 다른 템플릿처럼 느껴지기 시작합니다. 이것을 적극적으로 그리고 의도적으로 막아야 합니다.

구조적 DNA 고유성 규칙:

마크업을 작성하기 전에 기본 구조적 개념을 소리내어 말하세요 — "인덱스 원고" 또는 "고정 수평 디오라마" 와 같은 단일 명사구입니다. 한 배치의 사이트 내에서 두 사이트가 동일한 기본 구조적 개념을 공유해서는 안 됩니다. 이전 사이트가 고정 스크롤 내러티브였다면 이번 사이트는 그렇지 않습니다. 이전 사이트가 33/67 수직 분할이었다면 이번 사이트는 그렇지 않습니다. 구조적 아이디어는 사용자가 가장 먼저 알아차리는 것입니다 — 구조를 바꾸지 않고 색상만 바꾸는 것은 미용에 불과합니다.

구조적 DNA 카탈로그

이것들은 각기 다른 기본 구조입니다. 각 스킬 호출은 하나의 개념을 선택하고 그것에 집중해야 합니다. 하나의 사이트에 두 가지 구조를 혼합하지 마세요 (두 구조 모두 약해집니다).

1. 인덱스 원고 — 섹션이 없는 하나의 긴 에디토리얼 칼럼. 위에서 아래로 하나의 타이포그래피 리듬. 전체 페이지가 우연히 웹사이트가 된 하나의 원고처럼 읽힙니다. (적합한 분야: 셰프의 메뉴, 향수의 편지, 선언문.)
2. 고정 수평 디오라마 — 페이지는 긴 세로 스크롤이지만, 스크롤하면서 보이는 것은 수평으로 파노라마처럼 움직이는 장면입니다. position: sticky + 스크롤에 의해 구동되는 translateX를 사용하세요. (적합한 분야: 의뢰 작업의 타임라인, 단계별 프로세스, 유물 컬렉션.)
3. 두 패널 영구 분할 — 페이지는 항상 50/50(또는 38/62) 으로 분할됩니다. 한 패널은 고정되고 다른 패널은 스크롤됩니다. 탐색은 패널 내부에서 이루어지며, 전체 페이지를 스크롤하여 이동하지 않습니다. (적합한 분야: 실시간 업데이트 색인이 있는 아카이브, 사서의 카탈로그.)
4. 슬라이드 시퀀스 — 화면 전체 높이의 "슬라이드", 스냅 스크롤이 있는 화면당 하나씩. 각 슬라이드는 완전히 다른 구성입니다. (적합한 분야: 사진작가의 모노그래프, 갤러리 둘러보기, 에디토리얼 룩북.)
5. 받침대 위의 무대 위 물체 — 단일 3D/이미지 피사체가 중앙에 위치하고 회전 가능하며, 페이지의 나머지 부분 전체는 물체 주위를 공전하는 주변 텍스트입니다. (적합한 분야: 단일 제품 하우스 — 시계, 향수 병, 술병.)
6. 고정 내러티브 (스크롤텔링) — 2~4개 화면 높이의 섹션이 제자리에 고정되는 동안 그 내용물이 개별 상태(이미지 전환, 텍스트 전환, 진행률 표시)를 통해 전진합니다. 페이지에서 중심 요소로 한 번 사용됩니다. (적합한 분야: 미션 프로필, 제작 프로세스, 건물 붕괴 연구.)
7. 수평 탐색 — 페이지의 기본 스크롤 방향이 수평입니다. 섹션은 왼쪽에서 오른쪽으로 읽힙니다. 세로 스크롤은 비활성화되거나 세부 정보 공개를 위해 예약됩니다. (적합한 분야: 시계 아카이브, 박물관의 한 동, 영화 스튜디오의 슬레이트.)
8. 사이드바 + 칼럼 — 영구적인 왼쪽 사이드바는 절대 스크롤되지 않습니다(탐색, 메타데이터, 실행 푸터). 오른쪽 칼럼이 전체 사이트입니다. (적합한 분야: 법률 사무소, 연구 기관, 학술 출판사.)
9. 챕터 게이트 — 매우 다른 분위기 영역 사이의 전체 화면 챕터 구분선. 각 챕터는 고유한 배경색, 타이포그래피 무게, 레이아웃 리듬을 가집니다. 페이지는 아래로 내려갈수록 성격이 변합니다. (적합한 분야: 다분야 스튜디오, 회고전.)
10. 원장 / 등록부 — 페이지가 구식 문서(선하증권, 등록부, 선박 명세서)처럼 제시됩니다. 표 형식의 행이 지배적입니다. 타이포그래피는 원장처럼 읽힙니다. (적합한 분야: 대기자 명단, 배치 등록부, 탐험 명세서.)
11. 콜라주 / 그리드 파괴자 — 의도적인 파열이 있는 잡지 스타일의 비대칭 그리드 — 칼럼으로 번지는 과도하게 큰 이미지, 거터를 가로지르는 인용구, 여백의 각주. (적합한 분야: 에디토리얼 간행물, 문화 잡지, 크리에이티브 스튜디오.)
12. 단일 객체, 크롬 없음 — 사이트는 단지 주제(회전 가능)와 그 아래 한 줄의 짧은 문장뿐입니다. 내비게이션, 푸터, 거의 UI가 없습니다. (적합한 분야: 아티스트의 단일 작품 발표, 성명 작업.)
13. 제품 UI 슬레이트 — 히어로가 제품 자체 인터페이스(대시보드 타일, diff 뷰, 명령 팔레트)의 사실적인 시뮬레이션입니다. 제품이 UI 자체인 기술/AI 브랜드에서 사용됩니다. (적합한 분야: AI IDE, 개발 도구.)
14. 대시보드 타일 그리드 — 전체 페이지가 라이브 카운터, 스파크라인, 깜빡이는 표시등이 있는 실제처럼 느껴지는 대시보드 구조로 되어 있습니다. (적합한 분야: 인프라, 사이버 보안, 관찰 가능성.)
15. 대화 타임라인 — 페이지는 사용자가 스크롤함에 따라 시뮬레이션된 대화/대본/통화를 재생합니다. 기능 소개는 특정 순간에 고정됩니다. (적합한 분야: 음성 AI, 지원 플랫폼, 법률 인터뷰.)

개념 선택 방법:

• 클라이언트의 핵심 사실에서 시작하세요. 정체성이 9코스 메뉴 하나인 레스토랑은 인덱스 원고를 원할 것입니다. 정체성이 정밀함과 단일 무브먼트인 시계 제조사는 받침대 위의 무대 위 물체를 원할 것입니다. 브랜드가 연례 여정 하나인 탐험 회사는 고정 내러티브를 원할 것입니다.
• 이 세션에서 마지막으로 사용된 개념이라면 거부하세요. 다음으로 좋은 개념을 선택하세요.
• JSX를 작성하기 전에 개념과 한 문장의 정당성을 기록하세요. 프롬프트 파일에 계속 보이도록 유지하세요.

레이아웃 원칙 (선택한 구조적 개념 내에서 적용):

• 의도적으로 그리드를 깨세요. 전체 너비 구간 뒤에 좁은 텍스트 칼럼이 이어짐. 화면 밖으로 번지는 과도하게 큰 이미지. 비대칭 2열 분할 (60/40, 70/30).
• 넉넉한 여백은 낭비되는 공간이 아니라 럭셔리의 신호입니다. 섹션 간 8rem+ 패딩.
• 포트폴리오나 갤러리를 위한 가로 스크롤 섹션 (잘 구현해야 하며, 수평 탐색을 의도적으로 선택하지 않는 한 주요 탐색 패턴으로 사용하지 마세요).
• 겹치는 요소 — 이미지 위의 텍스트, 컨테이너를 벗어나는 이미지, 섹션 경계를 넘는 요소.
• 스크롤을 따라다니는 고정 요소 — 콘텐츠가 지나가는 동안 함께 머무르는 레이블.

프리미엄으로 읽히는 특정 마이크로 패턴:

• 균일한 그리드 대신 시각적 콘텐츠를 위한 Masonry 또는 비스듬한 그리드.
• 에디토리얼 효과를 위해 mix-blend-mode로 이미지와 겹치는 텍스트.
• 눈에 보이는 진행 상태가 있는 번호가 매겨지거나 색인된 섹션.
• 디자인이 때때로 깨는 눈에 보이는 그리드 시스템 (미세한 선 또는 컬럼).
• 스크롤하여 지나갈 때 변형되는 콘텐츠 — 단순히 나타나는 것이 아니라 변형, 크기 조절, 위치 변경.
• 카드 그리드 대신 목록(배치, 명세서, 등록부) 을 위한 표/원장 형식의 행.
• SaaS 양식이 아닌 에디토리얼 문서의 일부처럼 보이는 양식 필드 — 세리프 입력 필드 위에 작은 고정폭 레이블, 테두리 없음, 하단 테두리만.

금지된 반복 (스킬 세션 내):

• 두 사이트 모두에 "고정 왼쪽 열 + 스크롤 오른쪽 열" 프로세스 섹션을 제공하지 마세요. 하나에 사용하고, 다른 하나를 위해 다른 것을 발명하세요.
• 두 사이트 모두 33/67 비대칭 히어로로 시작하지 마세요. 하나가 그랬다면, 다음은 중앙 스테이지, 전체 너비 배경, 원장, 또는 히어로 없이 시작합니다.
• 두 사이트 모두 동일한 "문의 양식 + 코로폰 그리드" 쌍으로 끝나지 마세요. 마무리 방식을 다양화하세요.

내비게이션 바 다양성 — 주의해야 할 조용한 실패 모드.

가장 쉬운 기본값은 grid-template-columns: auto 1fr auto 상단 표시줄에 "왼쪽 브랜드 마크, 중앙에 무언가, 오른쪽 정렬 무언가, mix-blend-mode: difference"입니다. 세 사이트 후에는 디자인 선택이 아닌 특징으로 읽히기 시작합니다. 각 세션에서 내비게이션을 상당히 다양화하세요:

• 내비게이션 없음 (단일 객체, 크롬 없음 브랜드).
• 고정 사이드바에 내장된 내비게이션 (사이드바 + 칼럼 브랜드).
• ⌘K 실행기 스타일의 하단 고정 명령 표시줄 (기술 제품 브랜드 — Cursor / Linear / Arc).
• 보조 스트립으로 아래에 펼쳐진 탭이 있는 인라인 중앙 워드마크.
• 내비게이션 역할을 하는 전체 너비 가로 스크롤 인덱스.
• 섹션 이름이 있는 연속 스크롤 티커인 마키 내비게이션.
• 아래에서 위로 작성된 왼쪽 세로 내비게이션.
• 실시간 작동 표시기가 있는 상태 표시줄 내비게이션.
• 마키 티커 스트립 (벤치마크 가격, 메트릭) 과 슬림 상단 표시줄.

브랜드와 구조적 DNA에 속하는 내비게이션을 선택하세요 — 세 열 상단 표시줄을 기본값으로 사용하지 마세요.

에디토리얼 럭셔리 기본값을 피하세요.

이 스킬은 압박을 받으면 다음과 같은 방향으로 기울어집니다: 따뜻한 크림색 바탕, 세리프 디스플레이(Fraunces / Cormorant), 고정폭 메타데이터, 단일 황동 강조, 넓은 자간 대문자 마이크로 레이블, ◦ 불릿 기호. 이것은 실제 미학이며, 꾸뛰르, 향수, 고급 요리, 시계 산업에 적합합니다. 기술, AI, 사이버 보안, 소비자 가전, SaaS 또는 개발자 도구에는 적합하지 않습니다 — 그리고 계속해서 이것을 기본값으로 사용하면 한 배치의 모든 사이트가 동일한 에이전시가 작업한 것처럼 보입니다.

분야가 기술이라면, 미학은 다음과 같은 방향으로 치우쳐야 합니다: 순수 흰색 또는 거의 검은색 바탕(크림색 아님); 네오 그로테스크 산세리프(Söhne 느낌, Inter Tight, IBM Plex Sans, Instrument Sans)를 디스플레이로... (원문 생략)