Bootstrap 프레임워크 개요
Bootstrap는 HTML, CSS, JavaScript를 기반으로 한 오픈소스 프론트엔드 프레임워크로, 원래 Twitter에서 개발하여 공개하였다. 반응형 디자인과 모바일 우선 접근 방식을 채택하고 있어 다양한 화면 크기에 자동으로 대응하는 레이아웃 구현이 가능하다. 특히 버전 3부터는 '모바일 퍼스트' 철학을 중심으로 구성되어 있으며, 빠르고 일관된 UI 개발을 지원한다.
왜 Bootstrap을 사용해야 하는가?
프론트엔드 개발 초기에는 CSS 클래스 이름이 중복되거나 의미 없는 명명이 난무했으며, 스타일 정의도 불일치하고 유지보수가 어려웠다. 이에 따라 동일한 요소라도 서로 다른 스타일이 적용되는 등 시각적 혼란이 발생하였다. Bootstrap 도입 이후 이러한 문제는 크게 개선되었으며, 미리 정의된 클래스 시스템을 통해 디자인 일관성과 코드 재사용성이 향상되었다. 개발자는 디자인에 집중하기보다는 구조와 기능 구현에 더 많은 시간을 할애할 수 있게 되었다.
설치 및 기본 설정
Bootstrap을 사용하려면 먼저 공식 사이트 또는 국내 미러 사이트인 BootCSS에서 v3.3.7 버전의 압축 파일을 다운로드한다. 압축 해제 후 프로젝트 내부에 배치하고, HTML 문서의 <head> 태그 내에서 CSS 파일을 링크한다. JavaScript 기능을 사용하려면 jQuery와 Bootstrap JS 파일도 반드시 포함시켜야 한다.
<link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.min.css">
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script src="bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>실습 예제: 정보 입력 폼 구성
다음은 사용자 정보를 수집하는 폼을 Bootstrap으로 구성한 예이다. 그리드 시스템(.row, .col-md-*)을 활용해 레이아웃을 조정하고, .form-horizontal 클래스를 사용해 수평 폼을 생성한다. 진척률 표시에는 .progress와 .progress-bar를, 제목 섹션에는 .page-header를 적용하여 시각적 계층을 강조한다.
<div class="container">
<div class="page-header">
<h1>기본 정보 입력 <small>3단계 중 1단계</small></h1>
</div>
<div class="progress">
<div class="progress-bar" style="width: 33%">33%</div>
</div>
<div class="panel panel-info">
<div class="panel-heading">
<h3 class="panel-title">사용자 데이터 등록<span class="glyphicon glyphicon-user pull-right"></span></h3>
</div>
<div class="panel-body">
<form class="form-horizontal">
<div class="form-group">
<label for="name" class="col-sm-2 control-label">이름</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="name" placeholder="이름 입력">
</div>
</div>
<div class="form-group">
<label for="email" class="col-sm-2 control-label">이메일</label>
<div class="col-sm-8">
<input type="email" class="form-control" id="email" placeholder="이메일 주소">
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">성별</label>
<div class="col-sm-8">
<label class="radio-inline">
<input type="radio" name="gender" value="male"> 남성
</label>
<label class="radio-inline">
<input type="radio" name="gender" value="female"> 여성
</label>
</div>
</div>
</form>
</div>
</div>
<button class="btn btn-primary pull-right">다음 단계</button>
</div>데이터 목록 및 테이블 디자인
다음 예제는 사용자 목록을 표 형식으로 출력하고 검색 및 페이지네이션 기능을 포함한 인터페이스이다. .table-striped, .table-bordered, .table-hover 클래스를 조합해 가독성 높은 테이블을 구성하며, .form-inline을 사용해 인라인 검색 폼을 배치한다. 각 행의 작업 버튼은 아이콘과 함께 소형 버튼(.btn-xs)으로 정렬하여 공간 효율성을 높였다.
<div class="panel panel-default">
<div class="panel-heading"><h3 class="panel-title">사용자 목록</h3></div>
<div class="panel-body">
<form class="form-inline">
<div class="form-group">
<input type="text" class="form-control" placeholder="이름으로 검색">
</div>
<button type="submit" class="btn btn-primary">검색</button>
<button class="btn btn-success pull-right">추가</button>
</form>
<table class="table table-bordered table-striped table-hover">
<thead>
<tr>
<th>#</th>
<th>이름</th>
<th>취미</th>
<th>성별</th>
<th class="text-center">작업</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>철수</td>
<td>등산</td>
<td>남</td>
<td class="text-center">
<button class="btn btn-warning btn-xs"><span class="glyphicon glyphicon-edit"></span> 수정</button>
<button class="btn btn-danger btn-xs"><span class="glyphicon glyphicon-trash"></span> 삭제</button>
</td>
</tr>
</tbody>
</table>
<ul class="pagination pull-right">
<li><a href="#">«</a></li>
<li class="active"><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">»</a></li>
</ul>
</div>
</div>아이콘 사용법: Glyphicons 및 Iconfont 통합
Bootstrap 기본 번들에는 Glyphicons라는 아이콘 폰트가 포함되어 있다. <span class="glyphicon glyphicon-star"></span> 형태로 사용 가능하며, 다양한 액션(편집, 삭제, 저장 등)에 시각적 의미를 부여할 수 있다. 보다 풍부한 아이콘 라이브러리를 원한다면 Iconfont(阿里巴巴矢量图标库)를 활용할 수 있다. 이 서비스는 맞춤 아이콘 폰트 생성을 지원하며, 프로젝트에 쉽게 임베드할 수 있는 CDN 또는 로컬 파일 방식을 제공한다.