표본
이 스타일의 기본형
버튼·입력·배지를 이 스타일의 규칙 그대로 그린 카드입니다.
Bootstrap
세계에서 가장 인기있는 프론트엔드 프레임워크로, 빠르고 반응형인 웹사이트 구축을 위한 도구입니다.
- YEAR
- 2011
- BY
- MOOD
- 미니멀 · 신뢰감
- PRIMARY#7952B3
- SECONDARY#6C757D
- ACCENT#0D6EFD
- BG#FFFFFF
- SURFACE#F8F9FA
취급 표시
- 살짝 둥근 모서리
- 가는 테두리
- 보통 아이콘 선
표본
이 스타일의 규칙을 그대로 적용한 UI 컴포넌트입니다.
버튼
입력과 토글
배지
중립강조긍정
탭
스탯과 차트
2,480주간 방문증가+12%
1.8%이탈률감소-0.4%p
여덟 달의 지표 흐름을 담은 표본 차트입니다.
아바타와 아이콘
김서이하박지윤채+1
카드
기본 카드
서피스 토큰이 그대로 정하는 기본 상태의 카드입니다.
강조 카드
강조 상태에서 서피스가 어떻게 달라지는지 보여줍니다.
무드와 이웃
밀도여백빽빽여백에서 빽빽 사이 5단계 중 2단계
온도감차가움따뜻함차가움에서 따뜻함 사이 5단계 중 3단계
시대감레트로미래적레트로에서 미래적 사이 5단계 중 3단계
격식자유분방격식자유분방에서 격식 사이 5단계 중 4단계
- 미니멀
- 신뢰감
어디에 쓰나
실제로 쓰는 곳
- 수많은 중소기업 웹사이트
- GitHub Pages 사이트
사용 사례
- 빠른 프로토타입 개발
- 관리자 패널
- 정보 중심 웹사이트
- 중소규모 웹 프로젝트
이런 프로젝트에 맞습니다
- 빠른 프로토타입
- 관리자 패널
- 정보 중심 사이트
- 중소규모 프로젝트
더 읽기
원칙·제약·역사처럼 적용할 때 필요한 내용입니다. 필요한 항목만 펼쳐 보세요.
역사와 배경
2011년 Twitter 내부 도구로 시작. Mark Otto와 Jacob Thornton이 개발. 현재 Bootstrap 5까지 출시되며 꾸준히 진화 중.
핵심 원칙
- 모바일 우선
- 일관성
- 접근성
주요 특징
- 강력한 그리드 시스템
- 사전 정의된 컴포넌트
- 모바일 우선 설계
- 유틸리티 클래스
- 광범위한 커뮤니티
장점과 한계
장점
- 가장 많은 레퍼런스·커뮤니티
- 12컬럼 그리드로 레이아웃 빠르게 구성
- 사전 정의된 컴포넌트로 개발 속도 향상
- 광범위한 테마 생태계
한계
- "Bootstrap 같은 느낌"으로 차별화 어려움
- 커스터마이징이 많을수록 오히려 복잡
- 번들 사이즈가 큰 편
컬러 시스템
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 타이포 유틸리티 클래스 사용 — 직접 크기 지정 최소화
설계 제약
반드시 포함
- 12컬럼 그리드 시스템
- 반응형 breakpoint 준수 (xs/sm/md/lg/xl/xxl)
하지 말 것
- Bootstrap 컴포넌트 구조 무시하고 직접 스타일링 — CSS variable 재정의 권장
- 간격을 임의 px로 지정 — spacing 유틸리티 사용
모션 — Bootstrap transition 유틸리티 기본 사용. 커스텀 모션 최소화.
접근성
기본 컴포넌트에 aria 속성 내장. 단, 직접 구현 시 별도 접근성 처리 필요.
자주 묻는 질문
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 사이트 등이 있습니다.