# Bootstrap — 디자인 스타일 가이드

## 기본 정보
- **ID**: bootstrap
- **카테고리**: design-language
- **연도**: 2011
- **제작자**: Twitter

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

## 역사·배경
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 유틸리티 기본 사용. 커스텀 모션 최소화.

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

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

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

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

## 실제 사용 제품·서비스
- 수많은 중소기업 웹사이트
- GitHub Pages 사이트

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

## 관련 스타일
- [material-design](https://ui.buildersgate.com/styles/material-design)
- [flat-design](https://ui.buildersgate.com/styles/flat-design)
- [card-design](https://ui.buildersgate.com/styles/card-design)

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

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

### 헤더
- background: #7952B3
- textColor: #FFFFFF
- accentColor: #0D6EFD

### 타이포그래피
- fontFamily: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Noto Sans KR', sans-serif
- headingWeight: 500
- bodyWeight: 400
- letterSpacing: 0em

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

### 그림자 (Shadows)
- sm: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075)
- md: 0 0.5rem 1rem rgba(0, 0, 0, 0.15)
- lg: 0 1rem 3rem rgba(0, 0, 0, 0.175)
- xl: 0 2rem 4rem rgba(0, 0, 0, 0.2)

### Border Radius
- none: 0
- sm: 0.2rem
- md: 0.25rem
- lg: 0.3rem
- full: 50rem

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

### 이펙트
- blur: 0px
- opacity: 1
- transition: all 0.15s ease-in-out

### 애니메이션
- duration: 150ms
- easing: ease-in-out

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

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

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

## 자주 묻는 질문 (FAQ)

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

### Q: Bootstrap의 핵심 디자인 원칙은 무엇인가요?
A: Bootstrap의 핵심 원칙은 모바일 우선, 일관성, 접근성입니다.

### Q: Bootstrap은 어떤 프로젝트에 적합한가요?
A: Bootstrap은 빠른 프로토타입 개발, 관리자 패널, 정보 중심 웹사이트, 중소규모 웹 프로젝트, 빠른 프로토타입, 관리자 패널, 정보 중심 사이트, 중소규모 프로젝트 등의 프로젝트에 적합합니다.

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

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

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

### Q: Bootstrap 디자인에서 하면 안 되는 것은 무엇인가요?
A: Bootstrap에서 피해야 할 것: Bootstrap 컴포넌트 구조 무시하고 직접 스타일링 — CSS variable 재정의 권장, 간격을 임의 px로 지정 — spacing 유틸리티 사용.

### Q: Bootstrap을 사용하는 실제 서비스나 제품은 무엇이 있나요?
A: Bootstrap을 적용한 대표적인 제품·서비스로는 수많은 중소기업 웹사이트, GitHub Pages 사이트 등이 있습니다.

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

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

← 홈으로 돌아가기

Bootstrap

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

연도

2011

제작자

Twitter

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

#7952B3

핵심 원칙

1

모바일 우선

2

일관성

3

접근성

주요 특징

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

장단점

장점

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

단점 / 한계

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

적합한 사용처

사용 사례

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

이런 프로젝트에 추천

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

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

실제 사용 예시

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

UI 컴포넌트 예제

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

12-Column Grid System

Bootstrap의 강력한 12컬럼 그리드 시스템

.col-1
.col-1
.col-1
.col-1
.col-1
.col-1
.col-1
.col-1
.col-1
.col-1
.col-1
.col-1
.col-4
.col-8
.col-6
.col-6

Button Styles

다양한 Bootstrap 버튼 스타일

Outline Buttons

테두리만 있는 버튼 스타일

Bootstrap Cards

재사용 가능한 카드 컴포넌트

Card Title

Some quick example text to build on the card title.

Another Card

Card content with a link and action button.

Third Card

Bootstrap cards are flexible containers.

Alert Components

다양한 상태를 나타내는 알림 컴포넌트

Info: This is an informational alert
Success: Operation completed successfully!
Warning: Please review your input
Danger: Something went wrong

Form Components

입력 폼 요소들

Badges

작은 카운트와 라벨 표시

Notifications 4DefaultPrimarySuccessDangerWarning

Progress Bars

진행 상태 표시 바

Navbar

네비게이션 바 컴포넌트

Brand

자주 묻는 질문

Bootstrap이란 무엇인가요?
세계에서 가장 인기있는 프론트엔드 프레임워크로, 빠르고 반응형인 웹사이트 구축을 위한 도구입니다. 2011년 Twitter 내부 도구로 시작. Mark Otto와 Jacob Thornton이 개발. 현재 Bootstrap 5까지 출시되며 꾸준히 진화 중.
Bootstrap의 핵심 디자인 원칙은 무엇인가요?
Bootstrap의 핵심 원칙은 모바일 우선, 일관성, 접근성입니다.
Bootstrap은 어떤 프로젝트에 적합한가요?
Bootstrap은 빠른 프로토타입 개발, 관리자 패널, 정보 중심 웹사이트, 중소규모 웹 프로젝트, 빠른 프로토타입, 관리자 패널, 정보 중심 사이트, 중소규모 프로젝트 등의 프로젝트에 적합합니다.
Bootstrap의 장단점은 무엇인가요?
장점으로는 가장 많은 레퍼런스·커뮤니티, 12컬럼 그리드로 레이아웃 빠르게 구성, 사전 정의된 컴포넌트로 개발 속도 향상, 광범위한 테마 생태계이 있습니다. 단점으로는 "Bootstrap 같은 느낌"으로 차별화 어려움, 커스터마이징이 많을수록 오히려 복잡, 번들 사이즈가 큰 편이 있습니다.
Bootstrap에서 색상은 어떻게 사용하나요?
Bootstrap 표준 8색 semantic 시스템. Primary 파랑을 중심으로 success/danger/warning/info 4종 상태 색 색상 역할은 primary: 주 브랜드 색 — 기본 파랑 또는 커스터마이징 가능, secondary: 보조 — 회색, success: 성공 상태 — 초록입니다. 주의사항: semantic 색상 8종 외 임의 색 추가는 CSS variable 재정의로 처리, danger 색을 강조 목적으로 사용 금지.
Bootstrap에 어울리는 폰트 스타일은 무엇인가요?
Bootstrap에는 시스템 폰트 스택 기본 (-apple-system, Segoe UI 등). 커스터마이징 시 중립적 산세리프 폰트가 적합합니다. 최대 1개 폰트 패밀리 사용을 권장합니다. 제약 사항: Bootstrap 기본 16px, 1.5 line-height 유지 권장, Bootstrap 타이포 유틸리티 클래스 사용 — 직접 크기 지정 최소화.
Bootstrap 디자인에서 하면 안 되는 것은 무엇인가요?
Bootstrap에서 피해야 할 것: Bootstrap 컴포넌트 구조 무시하고 직접 스타일링 — CSS variable 재정의 권장, 간격을 임의 px로 지정 — spacing 유틸리티 사용.
Bootstrap을 사용하는 실제 서비스나 제품은 무엇이 있나요?
Bootstrap을 적용한 대표적인 제품·서비스로는 수많은 중소기업 웹사이트, GitHub Pages 사이트 등이 있습니다.

관련 스타일 탐색

Material Design

구글이 만든 디자인 시스템으로, 물리적 재료와 조명의 은유를 사용합니다.

Flat Design

2D 평면적인 요소를 사용하여 심플하고 미니멀한 디자인을 추구합니다.

Card-Based Design

정보를 카드 형태로 구조화하여 스캔과 소비가 용이하도록 합니다.