프론트엔드 디자인 방향성은(는) 무엇을 하나요?
이 스킬은 UI를 단순히 기능적으로 동작하게 만드는 것이 아니라, 목적의식이 있고 세련되며 제품 도메인에 적합하게 만드는 작업에 사용하세요.
출처: linus707의 커뮤니티 PR #1659에서 발췌.
참고: ECC는 의도적으로 표준 Anthropic frontend-design 스킬을 재번들링하지 않습니다. 공식 업스트림 스킬이 필요하면 anthropics/skills에서 설치하세요. 이 스킬은 #1659의 유용한 로컬 가이드라인을 ECC에 맞게 설계 방향성으로 재구성한 것입니다.
사용 시기
- 사용자가 웹 페이지, 앱, 대시보드, 아티팩트, 컴포넌트, UI를 구축해 달라고 요청할 때
- 사용자가 인터페이스를 더 세련되고, 독특하며, 아름답거나 덜 평범하게 만들어 달라고 요청할 때
- 구현에 시각적 계층, 타이포그래피, 색상, 모션, 레이아웃, 상호작용 선택이 필요할 때
- 현재 UI는 작동하지만 평평하고, 일반적이며, 템플릿 같거나 대상 사용자와 맞지 않을 때
디자인 방향성
코딩 전에 구체적인 방향을 선택하세요:
- 목적: 인터페이스가 수행하는 작업은 무엇인가?
- 대상 사용자: 누가 이 워크플로우를 반복하며, 그들이 가장 먼저 스캔해야 할 것은 무엇인가?
- 톤: 실용적, 에디토리얼, 장난기, 산업적, 정제됨, 기술적, 최대, 최소, 조밀함, 차분함, 또는 다른 명확한 방향
- 기억에 남는 디테일: 결과물을 의도적으로 보이게 만드는 하나의 디자인 아이디어
- 제약 조건: 프레임워크, 접근성, 성능, 반응형, 기존 디자인 시스템
방향성을 도메인에 맞추세요. SaaS 운영 도구는 일반적으로 조밀하고 조용하며 스캔하기 쉬워야 합니다. 포트폴리오, 런칭 페이지, 게임, 에디토리얼 작품은 더 표현력이 있어도 됩니다. 매일 반복 사용해야 하는 도구에 랜딩 페이지 구성을 강요하지 마세요.
구현 가이드라인
- 사용자가 명시적으로 마케팅 카피를 요청하지 않는 한, 첫 화면은 실제 사용 가능한 경험을 구축하세요.
- 새로운 시각 시스템을 도입하기 전에 기존 프로젝트 컴포넌트, 토큰, 아이콘 라이브러리, 라우팅 패턴을 사용하세요.
- 인터페이스가 이미지, 제품, 장소, 사람, 게임플레이, 차트, 검사 가능한 미디어에 의존할 때는 실제 또는 생성된 시각적 에셋을 사용하세요.
- 일반적인 oversized 히어로 텍스트보다는 맥락에 맞는 타이포그래피와 간격을 선호하세요.
- 팔레트를 다차원으로 유지하세요: 하나의 색조 계열이 UI를 지배하지 않도록 하세요.
- CSS 변수 또는 기존 디자인 토큰을 사용하여 방향성이 상태 전반에서 일관성을 유지하도록 하세요.
- 반응형 제약 조건을 명시적으로 설계하세요: 그리드, 종횡비, 최소/최대 크기, 안정적인 툴바, 고정 형식 컨트롤은 레이블이나 호버 상태가 변경될 때 이동하지 않아야 합니다.
- 모션은 드물지만 의도적으로 사용하세요. 상태를 명확히 하는 고신호 전환을 장식적 애니메이션보다 선호하세요.
- 모바일과 데스크톱에서 텍스트 맞춤을 확인하세요. 긴 레이블은 넘치지 않고 깔끔하게 줄 바꿈되거나 크기가 조정되어야 합니다.
안티 패턴
- 일반적인 생성 패턴(보라색 그라데이션, 장식적 블롭, oversized 카드, 모호한 히어로 카피, 스톡 같은 분위기 미디어)을 기본값으로 사용하지 마세요.
- 다른 카드 안에 UI 카드를 추가하지 마세요.
- 도메인이 절제를 요구할 때 모든 곳에 하나의 장식적 스타일을 사용하지 마세요.
- 기본 제품, 도구, 객체, 워크플로우를 일반 마케팅 섹션 뒤에 숨기지 마세요.
- 디자인 장식을 위해 새로운 의존성을 추가하지 마세요. 명확히 가치가 입증되지 않는 한 추가하지 마세요.
- 컨트롤이 스스로 설명할 수 있을 때 UI 내부에 UI 기능을 설명하지 마세요.
리뷰 체크리스트
- 첫 뷰포트가 제품, 워크플로우, 또는 객체를 즉시 전달하는가?
- 시각적 계층이 스캔 및 반복 사용을 지원하는가?
- 타이포그래피가 컨테이너에 맞고 인접 콘텐츠와 겹치지 않는가?
- 색상 선택에 대비가 있으며 단조로운 팔레트로 축소되지 않는가?
- 아이콘은 사용 가능한 경우 친숙한 도구 작업에 사용되는가?
- 반응형 레이아웃이 보드, 그리드, 툴바, 컨트롤, 타일, 카운터에 대해 안정적인 크기를 가지는가?
- 에셋이 렌더링되고 채움재가 아닌 주제를 전달하는가?
- 모션이 방향성을 개선하고 둔함을 감추지 않는가?
- 명확한 이유가 없는 한 결과물이 리포지토리의 기존 프론트엔드 규칙과 일치하는가?