# Font Awesome — 디자인 스타일 가이드

## 기본 정보
- **ID**: font-awesome
- **카테고리**: icon-package

## 설명
웹에서 가장 유명하고 널리 사용되는 아이콘 라이브러리입니다. 무료 버전만으로도 2,000개 이상의 아이콘을 제공합니다.

## 핵심 원칙
- npm install @fortawesome/react-fontawesome
- 번들 사이즈: 개별 아이콘 import
- 2,000+ 무료 아이콘

## 주요 특징
- 2,000개 이상의 무료 아이콘
- Solid, Regular, Brands 스타일
- Pro 버전은 16,000개 이상
- 오랜 역사와 커뮤니티
- CSS 또는 SVG 방식 지원

## 컬러 시스템 가이드
CSS font 기반 — color CSS property로 색상 제어. currentColor 지원

### 색상 역할
- icon-color: CSS color property — text-color와 동일하게

### 색상 제약 조건
- Pro 아이콘 무단 사용 금지 — 라이선스 확인
- 아이콘 크기는 font-size로 제어 — width/height 무효

### 다크모드 전략
CSS color 변경으로 자동 처리

### 대비 요구사항
폰트 기반으로 텍스트 대비 규칙 동일 적용

## 타이포그래피 가이드
- **폰트 성격**: 아이콘 패키지 — 타이포그래피 해당 없음. Font Awesome는 solid/regular/brands/light 등 다수 스타일
- **권장 폰트 수**: 최대 0개
- **타입 스케일**: 아이콘은 4px 배수 크기 권장 (16/20/24/32/40px)

### 타이포그래피 제약
- 아이콘 크기는 인접 텍스트 font-size의 1~1.5배 권장
- weight별 상이 stroke-width — 텍스트 굵기와 시각적 균형 맞추기

## 하면 안 되는 것 (안티패턴)
- 아이콘 스타일 혼용 금지 — 한 프로젝트에서 패키지 1~2개만
- 아이콘 단독 사용 금지 (레이블 없을 때) — aria-label 필수
- Font Awesome 아이콘을 지나치게 크게 사용 금지 — 범용 — 다양한 아이콘 수량 필요 시 최적화

## 반드시 포함해야 하는 것
- 일관된 크기 사용 (24px 기본 권장)
- 인터랙티브 아이콘에 tooltip 또는 레이블
- hover/active 상태 색상 피드백

## 모션 가이드
아이콘 자체 애니메이션 최소화. hover 시 opacity 변화 또는 scale 1.1 정도만.

## 사용 사례
- 브랜드 아이콘 필요 시 (Twitter, GitHub 등)
- 전통적인 웹 프로젝트
- Pro 아이콘 필요 시

## 추천 프로젝트 유형
- 브랜드 로고 아이콘 필요
- 전통적 웹 프로젝트
- Pro 아이콘 필요 시

## 장점
- 가장 많은 브랜드 로고 아이콘 포함
- 오랜 역사와 광범위한 레퍼런스
- Pro 버전 풍부한 아이콘

## 단점·한계
- 무료 버전 아이콘 스타일 제한
- Pro 버전 유료
- SVG 개별 import 설정 복잡

## 관련 스타일
- [react-icons](https://ui.buildersgate.com/styles/react-icons)
- [bootstrap-icons](https://ui.buildersgate.com/styles/bootstrap-icons)
- [material-icons](https://ui.buildersgate.com/styles/material-icons)

## 참고 구현 예시 (디자인 토큰)
> 아래 토큰은 이 스타일의 참고 구현 예시입니다. 프로젝트의 브랜드 컬러·폰트에 맞게 조정하되, 위 컬러 시스템/타이포그래피 가이드의 제약 조건을 준수하세요.

### 색상
- primary: #339AF0
- secondary: #228BE6
- accent: #74C0FC
- background: #F8F9FA
- surface: #FFFFFF
- text: #212529
- textSecondary: #495057
- border: #DEE2E6

### 헤더
- background: linear-gradient(135deg, #339AF0 0%, #228BE6 100%)
- textColor: #FFFFFF
- accentColor: #74C0FC

### 타이포그래피
- fontFamily: 'Font Awesome 6 Free', 'Noto Sans KR', system-ui, sans-serif
- headingWeight: 700
- bodyWeight: 400
- letterSpacing: 0

### 스페이싱
- unit: 8px
- scale: 1

### 그림자 (Shadows)
- sm: 0 2px 4px rgba(0,0,0,0.08)
- md: 0 4px 8px rgba(0,0,0,0.12)
- lg: 0 8px 16px rgba(0,0,0,0.16)
- xl: 0 16px 32px rgba(0,0,0,0.2)

### Border Radius
- none: 0
- sm: 4px
- md: 8px
- lg: 12px
- full: 9999px

### 테두리 (Borders)
- width: 2px
- style: solid
- color: #DEE2E6

### 이펙트
- blur: 0px
- opacity: 1
- transition: all 0.25s ease

### 애니메이션
- duration: 250ms
- easing: ease

### 컴포넌트 토큰
- 버튼: shape=rounded / hoverEffect=lift / textTransform=none
- 카드: style=elevated / hoverEffect=lift
- 인풋: style=outlined / focusEffect=ring
- 배지: shape=rounded / style=solid
- 아이콘: package=lucide / strokeWidth=2 / defaultSize=24

### 레이아웃
- containerStyle: boxed
- sectionSpacing: normal

### 특수 효과
- glassmorphism: false
- gradientText: false
- animatedBackground: false
- scanlines: false
- noise: false

## 자주 묻는 질문 (FAQ)

### Q: Font Awesome이란 무엇인가요?
A: 웹에서 가장 유명하고 널리 사용되는 아이콘 라이브러리입니다. 무료 버전만으로도 2,000개 이상의 아이콘을 제공합니다.

### Q: Font Awesome의 핵심 디자인 원칙은 무엇인가요?
A: Font Awesome의 핵심 원칙은 npm install @fortawesome/react-fontawesome, 번들 사이즈: 개별 아이콘 import, 2,000+ 무료 아이콘입니다.

### Q: Font Awesome은 어떤 프로젝트에 적합한가요?
A: Font Awesome은 브랜드 아이콘 필요 시 (Twitter, GitHub 등), 전통적인 웹 프로젝트, Pro 아이콘 필요 시, 브랜드 로고 아이콘 필요, 전통적 웹 프로젝트, Pro 아이콘 필요 시 등의 프로젝트에 적합합니다.

### Q: Font Awesome의 장단점은 무엇인가요?
A: 장점으로는 가장 많은 브랜드 로고 아이콘 포함, 오랜 역사와 광범위한 레퍼런스, Pro 버전 풍부한 아이콘이 있습니다. 단점으로는 무료 버전 아이콘 스타일 제한, Pro 버전 유료, SVG 개별 import 설정 복잡이 있습니다.

### Q: Font Awesome에서 색상은 어떻게 사용하나요?
A: CSS font 기반 — color CSS property로 색상 제어. currentColor 지원 색상 역할은 icon-color: CSS color property — text-color와 동일하게입니다. 주의사항: Pro 아이콘 무단 사용 금지 — 라이선스 확인, 아이콘 크기는 font-size로 제어 — width/height 무효.

### Q: Font Awesome에 어울리는 폰트 스타일은 무엇인가요?
A: Font Awesome에는 아이콘 패키지 — 타이포그래피 해당 없음. Font Awesome는 solid/regular/brands/light 등 다수 스타일 폰트가 적합합니다. 최대 0개 폰트 패밀리 사용을 권장합니다. 제약 사항: 아이콘 크기는 인접 텍스트 font-size의 1~1.5배 권장, weight별 상이 stroke-width — 텍스트 굵기와 시각적 균형 맞추기.

### Q: Font Awesome 디자인에서 하면 안 되는 것은 무엇인가요?
A: Font Awesome에서 피해야 할 것: 아이콘 스타일 혼용 금지 — 한 프로젝트에서 패키지 1~2개만, 아이콘 단독 사용 금지 (레이블 없을 때) — aria-label 필수, Font Awesome 아이콘을 지나치게 크게 사용 금지 — 범용 — 다양한 아이콘 수량 필요 시 최적화.

## API 엔드포인트
- 스타일 상세: https://ui.buildersgate.com/api/styles?id=font-awesome
- 디자인 토큰: https://ui.buildersgate.com/api/themes?id=font-awesome&merged=true

이 페이지 주소를 AI에게 보여주고 "디자인 시스템 문서를 만들어줘"라고 해보세요.

← 홈으로 돌아가기

Font Awesome

웹에서 가장 유명하고 널리 사용되는 아이콘 라이브러리입니다. 무료 버전만으로도 2,000개 이상의 아이콘을 제공합니다.

#339AF0

핵심 원칙

1

npm install @fortawesome/react-fontawesome

2

번들 사이즈: 개별 아이콘 import

3

2,000+ 무료 아이콘

주요 특징

  • 2,000개 이상의 무료 아이콘
  • Solid, Regular, Brands 스타일
  • Pro 버전은 16,000개 이상
  • 오랜 역사와 커뮤니티
  • CSS 또는 SVG 방식 지원

장단점

장점

  • +가장 많은 브랜드 로고 아이콘 포함
  • +오랜 역사와 광범위한 레퍼런스
  • +Pro 버전 풍부한 아이콘

단점 / 한계

  • −무료 버전 아이콘 스타일 제한
  • −Pro 버전 유료
  • −SVG 개별 import 설정 복잡

적합한 사용처

사용 사례

  • 브랜드 아이콘 필요 시 (Twitter, GitHub 등)
  • 전통적인 웹 프로젝트
  • Pro 아이콘 필요 시

이런 프로젝트에 추천

브랜드 로고 아이콘 필요전통적 웹 프로젝트Pro 아이콘 필요 시

UI 컴포넌트 예제

이 디자인 스타일의 특징을 반영한 실제 UI 컴포넌트들입니다.

UI 기본 아이콘 (Solid)

가장 널리 사용되는 기본 UI - 20개

House
User
Heart
Star
Search
Bell
Envelope
Gear
Cart
Camera
File
Folder
Download
Upload
Trash
Edit
Check
Close
Plus
Minus

화살표 & 방향

방향 아이콘 - 4개

Up
Down
Left
Right

커뮤니케이션

연락 및 일정 - 5개

Calendar
Clock
Location
Phone
Message

날씨 & 시스템

날씨, 네트워크 - 7개

Sun
Moon
Cloud
Rain
Bolt
WiFi
Bluetooth

미디어 재생

미디어 컨트롤 - 9개

Play
Pause
Forward
Backward
Volume
Image
Video
Music
Film

사용자 & 보안

사용자 관리 및 보안 - 6개

Users
Profile
ID Card
Lock
Shield
Key

차트 & 분석

데이터 시각화 - 4개

Line
Bar
Pie
Column

브랜드 아이콘

소셜 미디어 & 기업 로고 - 12개

Facebook
Twitter
Instagram
YouTube
LinkedIn
GitHub
Apple
Google
Amazon
Microsoft
Spotify
Slack

Font Awesome 특징

  • ✓웹에서 가장 유명한 아이콘 라이브러리 - 2,000개 이상 무료 아이콘
  • ✓Solid, Regular, Brands 3가지 무료 스타일 (Pro는 16,000개 이상)
  • ✓브랜드 로고 아이콘이 가장 풍부한 라이브러리
  • ✓오랜 역사와 대규모 커뮤니티, CSS와 SVG 방식 모두 지원

자주 묻는 질문

Font Awesome이란 무엇인가요?
웹에서 가장 유명하고 널리 사용되는 아이콘 라이브러리입니다. 무료 버전만으로도 2,000개 이상의 아이콘을 제공합니다.
Font Awesome의 핵심 디자인 원칙은 무엇인가요?
Font Awesome의 핵심 원칙은 npm install @fortawesome/react-fontawesome, 번들 사이즈: 개별 아이콘 import, 2,000+ 무료 아이콘입니다.
Font Awesome은 어떤 프로젝트에 적합한가요?
Font Awesome은 브랜드 아이콘 필요 시 (Twitter, GitHub 등), 전통적인 웹 프로젝트, Pro 아이콘 필요 시, 브랜드 로고 아이콘 필요, 전통적 웹 프로젝트, Pro 아이콘 필요 시 등의 프로젝트에 적합합니다.
Font Awesome의 장단점은 무엇인가요?
장점으로는 가장 많은 브랜드 로고 아이콘 포함, 오랜 역사와 광범위한 레퍼런스, Pro 버전 풍부한 아이콘이 있습니다. 단점으로는 무료 버전 아이콘 스타일 제한, Pro 버전 유료, SVG 개별 import 설정 복잡이 있습니다.
Font Awesome에서 색상은 어떻게 사용하나요?
CSS font 기반 — color CSS property로 색상 제어. currentColor 지원 색상 역할은 icon-color: CSS color property — text-color와 동일하게입니다. 주의사항: Pro 아이콘 무단 사용 금지 — 라이선스 확인, 아이콘 크기는 font-size로 제어 — width/height 무효.
Font Awesome에 어울리는 폰트 스타일은 무엇인가요?
Font Awesome에는 아이콘 패키지 — 타이포그래피 해당 없음. Font Awesome는 solid/regular/brands/light 등 다수 스타일 폰트가 적합합니다. 최대 0개 폰트 패밀리 사용을 권장합니다. 제약 사항: 아이콘 크기는 인접 텍스트 font-size의 1~1.5배 권장, weight별 상이 stroke-width — 텍스트 굵기와 시각적 균형 맞추기.
Font Awesome 디자인에서 하면 안 되는 것은 무엇인가요?
Font Awesome에서 피해야 할 것: 아이콘 스타일 혼용 금지 — 한 프로젝트에서 패키지 1~2개만, 아이콘 단독 사용 금지 (레이블 없을 때) — aria-label 필수, Font Awesome 아이콘을 지나치게 크게 사용 금지 — 범용 — 다양한 아이콘 수량 필요 시 최적화.

관련 스타일 탐색

React Icons

ES6 imports를 통해 Font Awesome, Material Design, Feather 등 다양한 아이콘 라이브러리를 하나의 패키지로 사용할 수 있는 가장 인기있는 React 아이콘 라이브러리입니다.

Bootstrap Icons

Bootstrap 프레임워크의 공식 아이콘 라이브러리입니다. 2,000개 이상의 고품질 오픈소스 SVG 아이콘을 제공합니다.

Material Icons

Google의 Material Design 공식 아이콘 세트입니다. 5가지 테마와 2,000개 이상의 아이콘을 제공합니다.