add: agent skills 생태계 & OpenAI 프론트엔드 가이드 리서치
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
parent
20d1237ebf
commit
1afe8fd4ce
@ -0,0 +1,144 @@
|
|||||||
|
# Agent Skills 생태계 & OpenAI 프론트엔드 디자인 가이드 리서치
|
||||||
|
|
||||||
|
- 날짜: 2026-03-22
|
||||||
|
- 출처:
|
||||||
|
- https://skills.sh/ (Vercel Labs — The Open Agent Skills Ecosystem)
|
||||||
|
- https://github.com/vercel-labs/agent-skills (Vercel 공식 스킬 컬렉션)
|
||||||
|
- https://developers.openai.com/blog/designing-delightful-frontends-with-gpt-5-4
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 1. Agent Skills 생태계 (skills.sh)
|
||||||
|
|
||||||
|
### 개요
|
||||||
|
AI 코딩 에이전트(Claude Code, Cursor, Copilot, Codex 등 20+)를 위한 **재사용 가능한 스킬 디렉토리**. 스킬은 "패키징된 지침과 스크립트"로, 에이전트에 절차적 지식을 추가한다.
|
||||||
|
|
||||||
|
### 설치
|
||||||
|
```bash
|
||||||
|
npx skills add <owner/repo>
|
||||||
|
```
|
||||||
|
|
||||||
|
### 스킬 구성 요소
|
||||||
|
각 스킬은 다음을 포함:
|
||||||
|
- `SKILL.md` — 에이전트 지침서 (핵심)
|
||||||
|
- `scripts/` — 자동화 헬퍼 (선택)
|
||||||
|
- `references/` — 지원 문서 (선택)
|
||||||
|
|
||||||
|
### 주요 스킬 (설치 수 기준 상위)
|
||||||
|
|
||||||
|
| 스킬 | 출처 | 설치 수 | 용도 |
|
||||||
|
|------|------|---------|------|
|
||||||
|
| find-skills | vercel-labs | 660K | 스킬 검색 |
|
||||||
|
| vercel-react-best-practices | vercel-labs | 235K | React/Next.js 성능 최적화 (40+ 규칙) |
|
||||||
|
| web-design-guidelines | vercel-labs | 188K | UI 코드 컴플라이언스 (100+ 규칙, 접근성 포함) |
|
||||||
|
| frontend-design | anthropics | 186K | 프론트엔드 디자인 가이드라인 |
|
||||||
|
| remotion-best-practices | remotion-dev | 165K | 비디오 생성 |
|
||||||
|
|
||||||
|
### Vercel 공식 스킬 5종 (vercel-labs/agent-skills)
|
||||||
|
- **react-best-practices**: 워터폴 제거, 번들 최적화, 서버/클라이언트 성능 (40+ 규칙, 8개 카테고리)
|
||||||
|
- **web-design-guidelines**: 접근성, 포커스, 폼, 애니메이션, 이미지, i18n (100+ 규칙, 11개 카테고리)
|
||||||
|
- **react-native-guidelines**: FlashList, Reanimated, 모바일 아키텍처 (16 규칙)
|
||||||
|
- **composition-patterns**: 합성 컴포넌트, prop drilling 회피, boolean props 관리
|
||||||
|
- **vercel-deploy-claimable**: 40+ 프레임워크 자동 감지 → 즉시 배포 + 프리뷰 URL
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 2. OpenAI 프론트엔드 디자인 가이드 (GPT-5.4 블로그)
|
||||||
|
|
||||||
|
2026-03-20 발표. GPT-5.4 + Codex 환경 대상이나, **디자인 원칙 자체는 범용**.
|
||||||
|
|
||||||
|
### 핵심 설계 원칙
|
||||||
|
|
||||||
|
#### 랜딩 페이지 시퀀스
|
||||||
|
1. **히어로** — 브랜드/제품, 약속, CTA, 지배적 시각
|
||||||
|
2. **지원** — 구체적 기능, 제안 또는 증명
|
||||||
|
3. **상세** — 워크플로우, 제품 깊이, 스토리
|
||||||
|
4. **최종 CTA** — 변환, 시작, 연락
|
||||||
|
|
||||||
|
#### 히어로 규칙
|
||||||
|
- 한 가지 구성만 (대시보드가 아닌 포스터)
|
||||||
|
- 풀블리드 이미지 또는 지배적 시각적 평면
|
||||||
|
- 브랜드명이 가장 큰 텍스트
|
||||||
|
- 기본값으로 히어로 카드/통계 스트립/로고 클라우드 금지
|
||||||
|
- 데스크톱 제목 2-3줄, 모바일에서 한 눈에 읽기 가능
|
||||||
|
- 고정 헤더 포함 시 `calc(100svh - header-height)` 사용
|
||||||
|
|
||||||
|
#### 디자인 시스템 제약
|
||||||
|
- 타이포그래피 최대 2종 (기본 스택 Inter/Roboto/Arial 회피)
|
||||||
|
- 악센트 색상 1개
|
||||||
|
- 카드 없는 레이아웃 기본값 (섹션, 열, 구분선, 목록 사용)
|
||||||
|
- 색상 토큰: background, surface, primary text, muted text, accent
|
||||||
|
- 타이포 역할: display, headline, body, caption
|
||||||
|
|
||||||
|
#### 앱 UI (대시보드)
|
||||||
|
- **Linear 스타일 절제**: 차분한 표면, 강한 타이포/간격, 적은 색상, 밀도 높지만 읽을 수 있는 정보
|
||||||
|
- 카드는 상호작용이 카드일 때만 사용
|
||||||
|
- 회피: 대시보드 카드 모자이크, 두꺼운 경계선, 장식 그래디언트, 장식 아이콘
|
||||||
|
|
||||||
|
#### 카피 규칙
|
||||||
|
- 제품 언어로 작성 (설계 해설 아님)
|
||||||
|
- 제목이 의미 전달, 지원 카피는 보통 한 문장
|
||||||
|
- **테스트: 카피의 30%를 삭제해도 개선되면 계속 삭제**
|
||||||
|
- 대시보드용: 방향/상태/작업 우선 (브랜드 목소리 아님)
|
||||||
|
|
||||||
|
#### 모션 (최소 2-3가지)
|
||||||
|
1. 히어로 입장 시퀀스
|
||||||
|
2. 스크롤 연결/고정/깊이 효과
|
||||||
|
3. 호버/공개/레이아웃 전환
|
||||||
|
- Framer Motion 선호
|
||||||
|
- 빠르고 절제, 모바일에서 부드러움, 장식만이면 제거
|
||||||
|
|
||||||
|
#### Litmus 테스트 (자가 검증)
|
||||||
|
- 첫 화면에서 브랜드/제품이 뚜렷한가?
|
||||||
|
- 강한 시각적 앵커가 1개 있는가?
|
||||||
|
- 제목만 스캔하면 페이지를 이해할 수 있는가?
|
||||||
|
- 각 섹션이 한 가지 일을 하는가?
|
||||||
|
- 카드가 실제로 필요한가?
|
||||||
|
- 모션이 계층/분위기를 개선하는가?
|
||||||
|
- 장식 그림자 제거 시에도 프리미엄으로 느껴지는가?
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 3. 우리 프로젝트 적용 가능성 평가
|
||||||
|
|
||||||
|
### 직접 적용 가능
|
||||||
|
|
||||||
|
| 항목 | 대상 프로젝트 | 이유 |
|
||||||
|
|------|-------------|------|
|
||||||
|
| react-best-practices 스킬 | frontend-ir-valuation | React 18 + Tailwind + Radix 사용 중, 성능 규칙 바로 적용 가능 |
|
||||||
|
| web-design-guidelines 스킬 | frontend-ir-valuation, frontend-customer | 접근성/폼/애니메이션 컴플라이언스 검증 |
|
||||||
|
| composition-patterns 스킬 | frontend-ir-valuation | Radix 기반 합성 컴포넌트 패턴과 직접 연관 |
|
||||||
|
| 디자인 원칙 (카피/레이아웃) | 전체 프론트엔드 | 랜딩 페이지, 대시보드 모두 해당 |
|
||||||
|
| Litmus 테스트 체크리스트 | 전체 프론트엔드 | UI 리뷰 시 자가 검증 기준 |
|
||||||
|
|
||||||
|
### 간접 참고
|
||||||
|
|
||||||
|
| 항목 | 비고 |
|
||||||
|
|------|------|
|
||||||
|
| 스킬 포맷 (SKILL.md + scripts/) | robeing 기존 스킬(skill-calendar 등)과 구조 비교 검토 가능 |
|
||||||
|
| 스킬 생태계 자체 | Claude Code에서 `npx skills add` 가능 — 필요 시 외부 스킬 설치 |
|
||||||
|
|
||||||
|
### 적용 불가/불필요
|
||||||
|
|
||||||
|
| 항목 | 이유 |
|
||||||
|
|------|------|
|
||||||
|
| GPT-5.4 Playwright 자동 검증 | OpenAI 플랫폼 종속 |
|
||||||
|
| vercel-deploy-claimable | Vercel 배포 미사용 (nginx 직접 운영) |
|
||||||
|
| react-native-guidelines | 모바일 앱 없음 |
|
||||||
|
| 이미지 생성 도구 연동 | 워크플로우 해당 없음 |
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 4. 미확정 사항
|
||||||
|
|
||||||
|
- `npx skills add`로 Claude Code에 스킬 설치 시 우리 `.claude/` 설정과 충돌 여부 미검증
|
||||||
|
- robeing 기존 스킬 구조(skill-*/README.md)와 Agent Skills 표준(SKILL.md) 통합 방안 미정
|
||||||
|
- frontend-customer는 dist만 존재 — 소스 코드 구조 확인 필요
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 5. 다음 단계 (제안)
|
||||||
|
|
||||||
|
1. `npx skills add vercel-labs/agent-skills`로 react-best-practices, web-design-guidelines 설치 테스트
|
||||||
|
2. frontend-ir-valuation에 디자인 원칙 적용 검토 (특히 Litmus 테스트 기준)
|
||||||
|
3. robeing 스킬 구조를 Agent Skills 표준(SKILL.md)과 비교하여 통합 검토
|
||||||
Loading…
x
Reference in New Issue
Block a user