프론트엔드 디자인
대담한 창의적 선택을 통해 제네릭한 AI 생성 미학에서 벗어나 기억에 남는 프론트엔드 인터페이스를 만드세요.
참고:
ui-design(타이포그래피, 색상, 간격 기본기),web-design(CSS 패턴) 도 함께 확인하세요.
설치
OpenClaw / Moltbot / Clawbot
npx clawhub@latest install frontend-design
이 스킬이 하는 일
시각적으로 독특한 웹 인터페이스 제작을 다음 방법으로 안내합니다:
- 코딩 전에 대담한 미학적 방향 설정
- 의도적인 타이포그래피, 색상, 공간 선택
- 사용자를 즐겁게 하는 모션 및 마이크로 인터랙션 구현
- AI 생성 UI의 특징인 예측 가능한 패턴 회피
사용 시기
- 새 컴포넌트, 페이지 또는 웹 애플리케이션을 구축할 때
- 랜딩 페이지, 마케팅 사이트 또는 제품 UI를 만들 때
- 인터페이스를 더 기억에 남도록 리디자인할 때
- 시각적 임팩트가 중요한 모든 프론트엔드 작업
키워드
프론트엔드 디자인, 웹 UI, UI 디자인, 랜딩 페이지, 크리에이티브 UI, 웹 미학, 타이포그래피, 비주얼 디자인, 모션 디자인, 독특한 인터페이스
디자인 사고 프로세스
코드를 작성하기 전에 미학적 방향을 확정하세요:
1. 맥락 이해
- 목적: 이 인터페이스는 어떤 문제를 해결하나요?
- 대상: 누가 사용하며 무엇을 기대하나요?
- 제약 조건: 프레임워크, 성능, 접근성 요구사항
2. 대담한 방향 선택
극단적인 미학을 선택하세요 — 평범함은 잊혀집니다:
| 방향 | 특징 |
|---|---|
| 극단적 미니멀리즘 | 엄격하고, 필수적이며, 불필요한 것이 없음 |
| 맥시멀리스트 카오스 | 의도적으로 밀도 높고, 중첩되며, 압도적임 |
| 레트로-퓨처리스틱 | 빈티지 미학과 현대 기술의 혼합 |
| 오가닉/내추럴 | 부드럽고, 흐르며, 자연에서 영감 받음 |
| 럭셔리/리파인드 | 프리미엄 소재, 미묘한 우아함 |
| 플레이풀/토이-라이크 | 재미있고, 친근하며, 밝음 |
| 에디토리얼/매거진 | 타이포그래피 중심, 그리드 기반 |
| 브루탈리스트/로우 | 구조 노출, 안티 디자인 |
| 아트 데코/지오메트릭 | 대담한 형태, 대칭, 장식 |
| 인더스트리얼/유틸리테리언 | 기능 중심, 튼튼함 |
3. 기억에 남는 요소 식별
이 인터페이스에서 사람들이 기억할 단 한 가지는 무엇인가요? 그것에 집중하세요.
미학 지침
타이포그래피
절대 일반적인 폰트를 사용하지 마세요:
- Arial, Helvetica, system-ui
- Inter, Roboto (매우 의도적인 경우 제외)
반드시 독특한 폰트를 선택하세요:
- 개성 있는 디스플레이 폰트와 정제된 본문 폰트를 짝지으세요
- 추천: Space Grotesk, Clash Display, Cabinet Grotesk, Satoshi, General Sans, Instrument Serif, Fraunces, Newsreader
/* 예시 페어링 */
--font-display: 'Clash Display', sans-serif;
--font-body: 'Satoshi', sans-serif;
색상 및 테마
- 일관된 팔레트에 집중하세요 — 안전한 선택으로 타협하지 마세요
- 주도색 + 강조색이 균등하게 분산된 색상보다 효과적입니다
- 일관성을 위해 CSS 변수를 사용하세요
- 흰색 배경에 보라색 그라데이션(일명 'AI 기본값')을 피하세요
:root {
--color-bg: #0a0a0a;
--color-surface: #141414;
--color-text: #fafafa;
--color-accent: #ff4d00;
--color-muted: #666666;
}
공간 구성
기대를 깨세요:
- 완벽한 균형보다 비대칭
- 의도적으로 요소 겹치기
- 대각선 흐름 또는 비전통적인 레이아웃
- 넉넉한 여백 또는 통제된 밀도 — 중간 지점은 피하세요
- 주의를 끄는 그리드 깨기 요소
모션 및 인터랙션
임팩트가 큰 순간에 집중하세요:
- 페이지 로드:
animation-delay를 사용한 계단식 등장 - 스크롤 트리거 애니메이션으로 놀라움 주기
- 개성 있는 호버 상태
- HTML에는 CSS 애니메이션 선호; React에는 Motion 라이브러리 사용
/* 계단식 등장 */
.card { animation: fadeUp 0.6s ease-out backwards; }
.card:nth-child(1) { animation-delay: 0.1s; }
.card:nth-child(2) { animation-delay: 0.2s; }
.card:nth-child(3) { animation-delay: 0.3s; }
@keyframes fadeUp {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
배경 및 분위기
깊이와 분위기를 만드세요:
- 그라데이션 메시 및 다중 정지점 그라데이션
- 노이즈 텍스처 및 그레인 오버레이
- 기하학적 패턴 또는 미묘한 그리드
- 레이어드 투명도
- 드라마틱한 그림자 또는 완전한 평면성
- 인터랙티브 요소를 위한 커스텀 커서
구현 원칙
비전에 복잡성 맞추기
- 맥시멀리스트 비전 → 광범위한 애니메이션을 포함한 정교한 코드
- 미니멀리스트 비전 → 절제, 정밀함, 완벽한 간격
- 우아함 = 비전을 잘 실행하는 것이지, 더 많이 추가하는 것이 아닙니다
세대 간 다양화
패턴에 수렴하지 마세요:
- 라이트/다크 테마를 번갈아 사용하세요
- 매번 다른 폰트 패밀리를 사용하세요
- 다양한 미학적 방향을 탐구하세요
- 각 디자인이 독특하게 느껴져야 합니다
절대 하지 말 것
- 절대 일반적인 폰트 패밀리(Inter, Roboto, Arial, 시스템 폰트)를 사용하지 마세요
- 절대 흰색 배경에 보라색 그라데이션(일명 'AI 미학')을 사용하지 마세요
- 절대 예측 가능하고 판에 박힌 레이아웃을 사용하지 마세요
- 절대 디자인 사고 단계를 건너뛰지 마세요 — 만들기 전에 이해하세요
- 절대 안전하고 중간 수준의 미학으로 타협하지 마세요 — 방향을 확정하세요
- 절대 독특한 디자인에는 독특한 코드가 필요하다는 것을 잊지 마세요
- 절대 여러 세대에 걸쳐 동일한 패턴에 수렴하지 마세요 — 의도적으로 다양화하세요
- 절대 목적 없이 복잡성을 추가하지 마세요 — 미니멀리즘과 맥시멀리즘 모두 의도가 필요합니다