웹 디자인 전략
전략적 디자인 컨설턴트 스킬로, 웹사이트가 올바른 메시지를 올바른 청중에게 올바른 순서로 전달하도록 보장합니다 — 예쁘게 보이는지 걱정하기 전에.
이 스킬은 새 사이트 구축, 기존 사이트 리뷰, 랜딩 페이지 카피 작성, 일반적인 실패 지점 감사에 적용됩니다. 심층 감사나 여러 섹션 페이지 구축을 수행할 때는 전체 체크리스트를 위해 references/detailed-guidelines.md를 참조하세요.
핵심 원칙
디자인 전략이 시각적 실행보다 먼저입니다. 잘못된 메시지를 잘못된 청중에게 잘못된 순서로 전달하는 아름다운 사이트는 명확한 메시지를 가진 평범한 사이트에게 항상 패배합니다. 전략으로 시작하고, 그 위에 미학을 추가하세요 (시각적 실행을 위해 frontend-design 스킬 사용).
1. 단계 인지 디자인
카피나 코드를 한 줄도 작성하기 전에, 회사가 생애주기 중 어디에 있는지 파악하세요. 이것이 레이아웃 복잡성, 스크린샷 품질, CTA 전략, 페이지 깊이 등 모든 것을 결정합니다.
| 단계 | 디자인 접근법 | 주요 신호 |
|---|---|---|
| 프리론칭 / 초기 | 미스터리 조성. 흐릿하거나 양식화된 스크린샷. 대기자 명단/이메일 수집. 하루 만에 구축 가능한 단일 페이지. 간단하고 집중된 메시지. | 공개 제품 없음, 소규모 팀, 수익 이전 |
| 성장 | 브랜드 인지도. 시그니처 악센트 색상, 상세한 기능 분석, 고해상도 제품 스크린샷, 여러 CTA. | 라이브 제품, 활성 사용자, PMF 반복 |
| 성숙 | 정보 깊이. 제품 하위 섹션, 로드맵, 보안/규정 준수 페이지, 엔터프라이즈 티어. 절제되고 권위 있는 색상 팔레트. | 확립된 시장 입지, 엔터프라이즈 거래 |
프리론칭 단계에서 성숙한 회사의 정교함을 모방하면 신뢰 결핍이 생깁니다 — 제공할 수 없는 완전함을 약속하는 것입니다. 반대로, 성숙한 제품이 단일 페이지 대기자 명단 사이트를 운영하는 것은 방치된 느낌을 줍니다.
2. 5초 필터
모든 랜딩 페이지는 방문자가 도착한 후 5초 이내에 다음 네 가지 질문에 답해야 합니다:
- 무엇인가요? — 평이하고 구체적인 언어를 사용하세요. "시너지 플랫폼"이 아니라 "채팅 앱"이라고 말하세요.
- 누구를 위한 것인가요? — 청중을 구체적으로 명명하세요. "팀을 위한"보다 "기술 프로젝트 관리자를 위한"이 더 효과적입니다.
- 어떤 목적인가요? — 즉각적인 이점이나 결과를 명시하세요.
- 왜 관심을 가져야 하나요? — 현 상태보다 더 나은 점은 무엇인가요?
스타트업은 모호한 슬로건을 감당할 수 없습니다. 구체적인 용어를 고가치 필터로 사용하세요 — "이슈 추적"은 엔지니어를 유치하면서 부적합한 사람들을 걸러냅니다. 대규모 확립된 플랫폼만이 "업무가 일어나는 곳" 같은 표현을 사용할 자격이 있습니다.
명확성 피라미드
홈페이지 콘텐츠를 중요도 감소 순서로 구성하세요:
- 정점 — 날카롭고 용어에 맞춘 가치 제안 (히어로 섹션)
- 맥락 확장 — 사용자가 스크롤할 때 시각적 증거를 포함한 기능 스토리텔링
- 기능적 깊이 — 기술 문서, 보조 사용 사례, 가격, 보안 (성숙한 제품의 경우 별도 페이지)
3. "AI 슬롭" 패턴 방지
독창성은 제품 품질의 대리 지표입니다. 사이트가 일반적인 LLM 출력처럼 보이면 사용자는 제품도 그럴 것이라고 가정합니다. 이러한 패턴을 식별하고 제거하세요:
시각적 슬롭 신호:
- 보라색 그라데이션과 기본 드롭 섀도우 ("AI가 만들었다"는 신호 1위)
- 일반적인 벤토 박스 그리드 (3×2에 단순한 아이콘, 제품 맥락 없음)
- Google 스타일의 가짜 대시보드와 기본색 강조 (빨강/노랑/초록/파랑)
- 떠다니는 큐브, 추상 3D 형태, 제품 증거 없는 일반 히어로 그래픽
미세 디테일 실패 ("피트 앤 피니시" 레이어):
- 일관성 없는 간격, 제목의 이중 공백, 불필요한 마침표
- 스크린샷에 보이는 하드코딩된 타임스탬프 또는 플레이스홀더 데이터
- "스타일 스프" — 5개 이상의 서체 혼합으로 시각적 위계 파괴
- 저대비 텍스트 (밝은 배경에 밝은 텍스트, 노란색에 흰색)
- 작거나 어색한 크기의 로고
카피 슬롭 신호:
- 증언에서 모든 단어를 대문자로 표기 ("AI 생성" 신호)
- "훌륭한 도구입니다!" 같은 모호한 사회적 증거 대신 "수동 QA에서 500시간 절약"과 같은 구체적 수치
- 정의되지 않은 내부 용어 (사용자가 "Deep Eval"이나 "MCP"가 무엇인지 안다고 가정하지 마세요)
4. 상호작용 디자인 규칙
애니메이션과 상호작용은 내비게이션을 향상시켜야 하며, 가치 제안에서 주의를 분산시켜서는 안 됩니다.
권장:
- 기본 CTA에 주목을 끌기 위한 모션 사용
- 클릭 가능성을 나타내는 미묘한 호버 색상 변화 또는 글로우
- 자연스러운 스크롤 트리거 리브
금지:
- 스크롤 재킹 (타이밍 애니메이션으로 기본 스크롤을 가로채기)
- 루프 배경 애니메이션 (유성, 깜빡이는 카드, 끊임없는 움직임)
- 호버 상태 뒤에 정보 숨기기 (모바일에서 깨짐, 데스크톱에서 "사냥" 강요)
- 히어로에서 "링크 샐러드" — Discord, GitHub, Twitter, 문서로 동시에 연결
5. 전환 최적화
모든 장벽은 이탈 지점입니다. 도착과 "아하 순간" 사이의 마찰을 최소화하세요.
- 데모 역설: "데모 예약" 버튼은 20분 약속을 요구합니다. 먼저 맛보기를 제공하세요 — 브라우저 내 프롬프트, 인터랙티브 샌드박스, 짧은 제품 비디오.
- CTA 규율: 스크롤 세그먼트당 하나의 명확한 목표. 경쟁 CTA를 쌓지 마세요.
- 사회적 증거 기준: 실제 이름, 실제 직함, 실제 회사 로고 (깔끔함을 위해 흑백). 일반적 칭찬보다 구체적인 결과.
6. 이 스킬 적용하기
새 페이지 구축 시:
- 회사의 생애주기 단계를 질문하거나 결정하세요
- 5초 필터를 통과하는 카피 초안을 작성하세요
- 명확성 피라미드를 사용하여 정보 아키텍처를 계획하세요
- 페이지를 구축하세요 (시각적 실행을 위해
frontend-design사용) - 결과물을 슬롭 체크리스트와
references/detailed-guidelines.md의 피트 앤 피니시 항목에 대해 감사하세요
기존 페이지 리뷰/비판 시:
- 전체 감사 체크리스트를 위해
references/detailed-guidelines.md를 읽으세요 - 먼저 단계 적합성을 평가하세요
- 5초 필터를 적용하세요
- AI 슬롭 패턴을 확인하세요
- 상호작용 디자인과 전환 흐름을 감사하세요
- 심각도별로 구성된 구체적이고 실행 가능한 피드백을 제공하세요
히어로 카피 또는 CTA 작성 시:
- 대상 청중과 그들의 언어를 식별하세요
- 5초 필터를 작성 제약 조건으로 사용하세요
- 광범위한 슬로건보다 구체적인 용어를 선호하세요
- 모든 주장을 시각적 증거 (스크린샷, 데모, 지표)로 뒷받침하세요