# Phosphor Icons — 디자인 스타일 가이드
## 기본 정보
- **ID**: phosphor-icons
- **카테고리**: icon-package
## 설명
유연하고 다양한 스타일을 제공하는 아이콘 패밀리입니다. 6가지 다른 무게(weight)로 동일한 아이콘을 표현할 수 있습니다.
## 핵심 원칙
- npm install phosphor-react
- 번들 사이즈: 선택적 import
- 9,000+ 아이콘 (6가지 weight)
## 주요 특징
- 9,000개 이상의 아이콘 (6가지 스타일)
- Thin, Light, Regular, Bold, Fill, Duotone
- 일관된 디자인 시스템
- 다국어 지원
- 애니메이션 친화적
## 컬러 시스템 가이드
6가지 weight(thin/light/regular/bold/fill/duotone) — 동일 아이콘을 맥락에 맞게 변형
### 색상 역할
- thin/light: 장식적·배경 아이콘
- regular/bold: 인터페이스 표준 아이콘
- fill: active 상태 또는 강조
- duotone: 두 색으로 깊이감 — secondary color 지원
### 색상 제약 조건
- 한 프로젝트 내 weight 3종 이하 사용 권장 — 혼잡 방지
- duotone 사용 시 secondary color 일관성 유지
### 다크모드 전략
currentColor + secondary color 두 가지 모두 다크 대응
### 대비 요구사항
thin weight는 작은 크기에서 가시성 저하 — 16px 이하에서는 regular 이상 사용
## 타이포그래피 가이드
- **폰트 성격**: 아이콘 패키지 — 타이포그래피 해당 없음. Phosphor는 6가지 weight 변형 스타일
- **권장 폰트 수**: 최대 0개
- **타입 스케일**: 아이콘은 4px 배수 크기 권장 (16/20/24/32/40px)
### 타이포그래피 제약
- 아이콘 크기는 인접 텍스트 font-size의 1~1.5배 권장
- regular/bold/fill 등 6종 stroke-width — 텍스트 굵기와 시각적 균형 맞추기
## 하면 안 되는 것 (안티패턴)
- 아이콘 스타일 혼용 금지 — 한 프로젝트에서 패키지 1~2개만
- 아이콘 단독 사용 금지 (레이블 없을 때) — aria-label 필수
- Phosphor 아이콘을 지나치게 크게 사용 금지 — 유연한 스타일 요구 프로젝트 최적화
## 반드시 포함해야 하는 것
- 일관된 크기 사용 (24px 기본 권장)
- 인터랙티브 아이콘에 tooltip 또는 레이블
- hover/active 상태 색상 피드백
## 모션 가이드
아이콘 자체 애니메이션 최소화. hover 시 opacity 변화 또는 scale 1.1 정도만.
## 사용 사례
- 타이포그래피 중심 디자인
- 브랜드 일관성이 중요한 프로젝트
- Duotone 아이콘 필요 시
## 추천 프로젝트 유형
- 타이포그래피 중심 UI
- 브랜드 일관성 중요 프로젝트
- Duotone 아이콘 활용
## 장점
- 6가지 weight로 디자인 시스템 일관성
- 아이콘 수 매우 풍부
- Duotone 스타일 지원
## 단점·한계
- phosphor-react는 deprecated, @phosphor-icons/react 사용 필요
- 다른 라이브러리 대비 인지도 낮음
## 관련 스타일
- [lucide-react](https://ui.buildersgate.com/styles/lucide-react)
- [react-icons](https://ui.buildersgate.com/styles/react-icons)
- [material-icons](https://ui.buildersgate.com/styles/material-icons)
## 참고 구현 예시 (디자인 토큰)
> 아래 토큰은 이 스타일의 참고 구현 예시입니다. 프로젝트의 브랜드 컬러·폰트에 맞게 조정하되, 위 컬러 시스템/타이포그래피 가이드의 제약 조건을 준수하세요.
### 색상
- primary: #5DAD5A
- secondary: #4A9E47
- accent: #7BC878
- background: #F9FAFB
- surface: #FFFFFF
- text: #1F2937
- textSecondary: #6B7280
- border: #D1D5DB
### 헤더
- background: linear-gradient(135deg, #5DAD5A 0%, #4A9E47 100%)
- textColor: #FFFFFF
- accentColor: #7BC878
### 타이포그래피
- fontFamily: system-ui, 'Noto Sans KR', sans-serif
- headingWeight: 600
- bodyWeight: 400
- letterSpacing: 0
### 스페이싱
- unit: 8px
- scale: 1
### 그림자 (Shadows)
- sm: 0 1px 2px rgba(0,0,0,0.05)
- md: 0 4px 6px rgba(0,0,0,0.1)
- lg: 0 10px 15px rgba(0,0,0,0.15)
- xl: 0 20px 25px rgba(0,0,0,0.2)
### Border Radius
- none: 0
- sm: 6px
- md: 8px
- lg: 12px
- full: 9999px
### 테두리 (Borders)
- width: 1px
- style: solid
- color: #D1D5DB
### 이펙트
- blur: 0px
- opacity: 1
- transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1)
### 애니메이션
- duration: 200ms
- easing: cubic-bezier(0.4, 0, 0.2, 1)
### 컴포넌트 토큰
- 버튼: shape=rounded / hoverEffect=lift / textTransform=none
- 카드: style=flat / hoverEffect=lift
- 인풋: style=outlined / focusEffect=ring
- 배지: shape=rounded / style=solid
- 아이콘: package=phosphor / strokeWidth=1.5 / defaultSize=24
### 레이아웃
- containerStyle: boxed
- sectionSpacing: normal
### 특수 효과
- glassmorphism: false
- gradientText: false
- animatedBackground: false
- scanlines: false
- noise: false
## 자주 묻는 질문 (FAQ)
### Q: Phosphor Icons이란 무엇인가요?
A: 유연하고 다양한 스타일을 제공하는 아이콘 패밀리입니다. 6가지 다른 무게(weight)로 동일한 아이콘을 표현할 수 있습니다.
### Q: Phosphor Icons의 핵심 디자인 원칙은 무엇인가요?
A: Phosphor Icons의 핵심 원칙은 npm install phosphor-react, 번들 사이즈: 선택적 import, 9,000+ 아이콘 (6가지 weight)입니다.
### Q: Phosphor Icons은 어떤 프로젝트에 적합한가요?
A: Phosphor Icons은 타이포그래피 중심 디자인, 브랜드 일관성이 중요한 프로젝트, Duotone 아이콘 필요 시, 타이포그래피 중심 UI, 브랜드 일관성 중요 프로젝트, Duotone 아이콘 활용 등의 프로젝트에 적합합니다.
### Q: Phosphor Icons의 장단점은 무엇인가요?
A: 장점으로는 6가지 weight로 디자인 시스템 일관성, 아이콘 수 매우 풍부, Duotone 스타일 지원이 있습니다. 단점으로는 phosphor-react는 deprecated, @phosphor-icons/react 사용 필요, 다른 라이브러리 대비 인지도 낮음이 있습니다.
### Q: Phosphor Icons에서 색상은 어떻게 사용하나요?
A: 6가지 weight(thin/light/regular/bold/fill/duotone) — 동일 아이콘을 맥락에 맞게 변형 색상 역할은 thin/light: 장식적·배경 아이콘, regular/bold: 인터페이스 표준 아이콘, fill: active 상태 또는 강조입니다. 주의사항: 한 프로젝트 내 weight 3종 이하 사용 권장 — 혼잡 방지, duotone 사용 시 secondary color 일관성 유지.
### Q: Phosphor Icons에 어울리는 폰트 스타일은 무엇인가요?
A: Phosphor Icons에는 아이콘 패키지 — 타이포그래피 해당 없음. Phosphor는 6가지 weight 변형 스타일 폰트가 적합합니다. 최대 0개 폰트 패밀리 사용을 권장합니다. 제약 사항: 아이콘 크기는 인접 텍스트 font-size의 1~1.5배 권장, regular/bold/fill 등 6종 stroke-width — 텍스트 굵기와 시각적 균형 맞추기.
### Q: Phosphor Icons 디자인에서 하면 안 되는 것은 무엇인가요?
A: Phosphor Icons에서 피해야 할 것: 아이콘 스타일 혼용 금지 — 한 프로젝트에서 패키지 1~2개만, 아이콘 단독 사용 금지 (레이블 없을 때) — aria-label 필수, Phosphor 아이콘을 지나치게 크게 사용 금지 — 유연한 스타일 요구 프로젝트 최적화.
## API 엔드포인트
- 스타일 상세: https://ui.buildersgate.com/api/styles?id=phosphor-icons
- 디자인 토큰: https://ui.buildersgate.com/api/themes?id=phosphor-icons&merged=true
Phosphor Icons은 타이포그래피 중심 디자인, 브랜드 일관성이 중요한 프로젝트, Duotone 아이콘 필요 시, 타이포그래피 중심 UI, 브랜드 일관성 중요 프로젝트, Duotone 아이콘 활용 등의 프로젝트에 적합합니다.
Phosphor Icons의 장단점은 무엇인가요?
장점으로는 6가지 weight로 디자인 시스템 일관성, 아이콘 수 매우 풍부, Duotone 스타일 지원이 있습니다. 단점으로는 phosphor-react는 deprecated, @phosphor-icons/react 사용 필요, 다른 라이브러리 대비 인지도 낮음이 있습니다.
Phosphor Icons에서 색상은 어떻게 사용하나요?
6가지 weight(thin/light/regular/bold/fill/duotone) — 동일 아이콘을 맥락에 맞게 변형 색상 역할은 thin/light: 장식적·배경 아이콘, regular/bold: 인터페이스 표준 아이콘, fill: active 상태 또는 강조입니다. 주의사항: 한 프로젝트 내 weight 3종 이하 사용 권장 — 혼잡 방지, duotone 사용 시 secondary color 일관성 유지.
Phosphor Icons에 어울리는 폰트 스타일은 무엇인가요?
Phosphor Icons에는 아이콘 패키지 — 타이포그래피 해당 없음. Phosphor는 6가지 weight 변형 스타일 폰트가 적합합니다. 최대 0개 폰트 패밀리 사용을 권장합니다. 제약 사항: 아이콘 크기는 인접 텍스트 font-size의 1~1.5배 권장, regular/bold/fill 등 6종 stroke-width — 텍스트 굵기와 시각적 균형 맞추기.
Phosphor Icons 디자인에서 하면 안 되는 것은 무엇인가요?
Phosphor Icons에서 피해야 할 것: 아이콘 스타일 혼용 금지 — 한 프로젝트에서 패키지 1~2개만, 아이콘 단독 사용 금지 (레이블 없을 때) — aria-label 필수, Phosphor 아이콘을 지나치게 크게 사용 금지 — 유연한 스타일 요구 프로젝트 최적화.