# Bootstrap

> 세계에서 가장 인기있는 프론트엔드 프레임워크로, 빠르고 반응형인 웹사이트 구축을 위한 도구입니다.

- 층: 레퍼런스 (디자인 언어)
- ID: bootstrap
- 연도: 2011
- 제작자: Twitter
- 무드 태그: 미니멀, 신뢰감
- 출처: 빌더스게이트 디자인 피팅룸 — https://ui.buildersgate.com/styles/bootstrap

## 정의

세계에서 가장 인기있는 프론트엔드 프레임워크로, 빠르고 반응형인 웹사이트 구축을 위한 도구입니다.

## 역사·배경

2011년 Twitter 내부 도구로 시작. Mark Otto와 Jacob Thornton이 개발. 현재 Bootstrap 5까지 출시되며 꾸준히 진화 중.

## 주요 특징

- 강력한 그리드 시스템
- 사전 정의된 컴포넌트
- 모바일 우선 설계
- 유틸리티 클래스
- 광범위한 커뮤니티

## 핵심 원칙

- 모바일 우선
- 일관성
- 접근성

## 컬러 시스템

Bootstrap 표준 8색 semantic 시스템. Primary 파랑을 중심으로 success/danger/warning/info 4종 상태 색

### 색상 역할

- primary: 주 브랜드 색 — 기본 파랑 또는 커스터마이징 가능
- secondary: 보조 — 회색
- success: 성공 상태 — 초록
- danger: 오류·삭제 — 빨강
- warning: 경고 — 노랑
- info: 정보 — 청록
- light/dark: 밝은/어두운 중성 색

### 색상 제약

- semantic 색상 8종 외 임의 색 추가는 CSS variable 재정의로 처리
- danger 색을 강조 목적으로 사용 금지
- Bootstrap 기본 색상 비율 유지 권장

### 다크모드 전략

data-bs-theme='dark' 속성으로 처리. 직접 CSS 재정의보다 Bootstrap dark mode API 사용

### 대비 요구사항

WCAG AA 기본 (Bootstrap이 검증)

## 타이포그래피

- 폰트 성격: 시스템 폰트 스택 기본 (-apple-system, Segoe UI 등). 커스터마이징 시 중립적 산세리프
- 권장 폰트 수: 최대 1개
- 타입 스케일: Bootstrap 기본 heading scale (h1 2.5rem ~ h6 1rem)

### 타이포그래피 제약

- Bootstrap 기본 16px, 1.5 line-height 유지 권장
- Bootstrap 타이포 유틸리티 클래스 사용 — 직접 크기 지정 최소화

## 설계 제약

### 하면 안 되는 것

- Bootstrap 컴포넌트 구조 무시하고 직접 스타일링 — CSS variable 재정의 권장
- 간격을 임의 px로 지정 — spacing 유틸리티 사용

### 반드시 포함할 것

- 12컬럼 그리드 시스템
- 반응형 breakpoint 준수 (xs/sm/md/lg/xl/xxl)

### 모션 가이드

Bootstrap transition 유틸리티 기본 사용. 커스텀 모션 최소화.

## 무드 프로파일

4축 각각 −2 ~ +2 정수. 취향 테스트(/fit)와 비교 페이지가 같은 좌표를 쓴다.

- 밀도: -1 (여백 −2 ↔ +2 빽빽)
- 온도감: 0 (차가움 −2 ↔ +2 따뜻함)
- 시대감: 0 (레트로 −2 ↔ +2 미래적)
- 격식: +1 (자유분방 −2 ↔ +2 격식)

## 사용 사례

- 빠른 프로토타입 개발
- 관리자 패널
- 정보 중심 웹사이트
- 중소규모 웹 프로젝트

## 추천 프로젝트 유형

- 빠른 프로토타입
- 관리자 패널
- 정보 중심 사이트
- 중소규모 프로젝트

## 장단점

### 장점

- 가장 많은 레퍼런스·커뮤니티
- 12컬럼 그리드로 레이아웃 빠르게 구성
- 사전 정의된 컴포넌트로 개발 속도 향상
- 광범위한 테마 생태계

### 단점·한계

- "Bootstrap 같은 느낌"으로 차별화 어려움
- 커스터마이징이 많을수록 오히려 복잡
- 번들 사이즈가 큰 편

## 실제 사용 제품·서비스

- 수많은 중소기업 웹사이트
- GitHub Pages 사이트

## 접근성

기본 컴포넌트에 aria 속성 내장. 단, 직접 구현 시 별도 접근성 처리 필요.

## 자주 묻는 질문

### Q1. Bootstrap이란 무엇인가요?

세계에서 가장 인기있는 프론트엔드 프레임워크로, 빠르고 반응형인 웹사이트 구축을 위한 도구입니다. 2011년 Twitter 내부 도구로 시작. Mark Otto와 Jacob Thornton이 개발. 현재 Bootstrap 5까지 출시되며 꾸준히 진화 중.

### Q2. Bootstrap의 핵심 디자인 원칙은 무엇인가요?

Bootstrap의 핵심 원칙은 모바일 우선, 일관성, 접근성입니다.

### Q3. Bootstrap은 어떤 프로젝트에 적합한가요?

Bootstrap은 빠른 프로토타입 개발, 관리자 패널, 정보 중심 웹사이트, 중소규모 웹 프로젝트, 빠른 프로토타입, 관리자 패널, 정보 중심 사이트, 중소규모 프로젝트 등의 프로젝트에 적합합니다.

### Q4. Bootstrap의 장단점은 무엇인가요?

장점으로는 가장 많은 레퍼런스·커뮤니티, 12컬럼 그리드로 레이아웃 빠르게 구성, 사전 정의된 컴포넌트로 개발 속도 향상, 광범위한 테마 생태계이 있습니다. 단점으로는 "Bootstrap 같은 느낌"으로 차별화 어려움, 커스터마이징이 많을수록 오히려 복잡, 번들 사이즈가 큰 편이 있습니다.

### Q5. Bootstrap에서 색상은 어떻게 사용하나요?

Bootstrap 표준 8색 semantic 시스템. Primary 파랑을 중심으로 success/danger/warning/info 4종 상태 색 색상 역할은 primary: 주 브랜드 색 — 기본 파랑 또는 커스터마이징 가능, secondary: 보조 — 회색, success: 성공 상태 — 초록입니다. 주의사항: semantic 색상 8종 외 임의 색 추가는 CSS variable 재정의로 처리, danger 색을 강조 목적으로 사용 금지.

### Q6. Bootstrap에 어울리는 폰트 스타일은 무엇인가요?

Bootstrap에는 시스템 폰트 스택 기본 (-apple-system, Segoe UI 등). 커스터마이징 시 중립적 산세리프 폰트가 적합합니다. 최대 1개 폰트 패밀리 사용을 권장합니다. 제약 사항: Bootstrap 기본 16px, 1.5 line-height 유지 권장, Bootstrap 타이포 유틸리티 클래스 사용 — 직접 크기 지정 최소화.

### Q7. Bootstrap 디자인에서 하면 안 되는 것은 무엇인가요?

Bootstrap에서 피해야 할 것: Bootstrap 컴포넌트 구조 무시하고 직접 스타일링 — CSS variable 재정의 권장, 간격을 임의 px로 지정 — spacing 유틸리티 사용.

### Q8. Bootstrap을 사용하는 실제 서비스나 제품은 무엇이 있나요?

Bootstrap을 적용한 대표적인 제품·서비스로는 수많은 중소기업 웹사이트, GitHub Pages 사이트 등이 있습니다.

## 참고 디자인 토큰

> 아래 토큰은 이 스타일의 참고 구현 예시다. 프로젝트의 브랜드 컬러·폰트에 맞게 조정하되, 위 컬러 시스템·타이포그래피·설계 제약은 지킨다.

### 색상

- primary: #7952B3
- secondary: #6C757D
- accent: #0D6EFD
- background: #FFFFFF
- surface: #F8F9FA
- text: #212529
- textSecondary: #6C757D
- border: #DEE2E6

### 타이포그래피

- fontFamily: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Noto Sans KR', sans-serif
- headingWeight: 500
- bodyWeight: 400
- letterSpacing: 0em

### 간격·반경·그림자·테두리

- spacing: unit 4px × scale 1
- borderRadius: sm 0.2rem / md 0.25rem / lg 0.3rem / full 50rem
- shadow sm: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075)
- shadow md: 0 0.5rem 1rem rgba(0, 0, 0, 0.15)
- shadow lg: 0 1rem 3rem rgba(0, 0, 0, 0.175)
- border: 1px solid #DEE2E6

### 컴포넌트 형태

- button: rounded / hover darken / text none
- card: elevated / hover lift
- input: outlined / focus ring
- badge: pill / solid
- icon: lucide / stroke 2 / size 20px
- layout: boxed / section normal
- animation: 150ms ease-in-out

## 관련 링크

### 관련 스타일

- [Material Design](https://ui.buildersgate.com/styles/material-design)
- [Flat Design](https://ui.buildersgate.com/styles/flat-design)
- [Card-Based Design](https://ui.buildersgate.com/styles/card-design)

### 데모 (같은 화면, 이 스타일로)

- [브랜드 랜딩 데모](https://ui.buildersgate.com/demo/brand/bootstrap)
- [SaaS 대시보드 데모](https://ui.buildersgate.com/demo/saas/bootstrap)
- [커머스 데모](https://ui.buildersgate.com/demo/commerce/bootstrap)

### 비교

- [Bootstrap vs Flat Design](https://ui.buildersgate.com/compare/bootstrap-vs-flat-design)
- [Bootstrap vs Material Design](https://ui.buildersgate.com/compare/bootstrap-vs-material-design)

### 쓰임새별 추천

- [제품 랜딩 페이지](https://ui.buildersgate.com/for/landing-page)
- [포트폴리오](https://ui.buildersgate.com/for/portfolio)
- [기업·공공 사이트](https://ui.buildersgate.com/for/corporate-public)
- [브랜드 사이트](https://ui.buildersgate.com/for/brand-site)

---

HTML 버전: https://ui.buildersgate.com/styles/bootstrap

이 문서는 https://ui.buildersgate.com/styles/bootstrap.md 로 제공됩니다. 전체 목록은 https://ui.buildersgate.com/llms.txt 를 참고하세요.