[Bootstrap] 14. 실전 예제: 간단한 UI 섹션 만들기
이전 글에서는 Bootstrap Icons를 사용해 버튼, 입력창, 메뉴, 카드에 아이콘을 넣는 방법을 정리했습니다. 이번 글에서는 지금까지 배운 내용을 바탕으로 간단한 UI 섹션을 직접 구성해보겠습니다.
Bootstrap을 공부할 때 클래스 하나하나를 따로 외우는 것도 중요하지만, 실제로는 여러 클래스를 조합해서 하나의 화면을 만드는 연습이 더 중요합니다. 이번 예제에서는 그리드, 카드, 버튼, 아이콘, 여백, 색상, 그림자, 둥근 모서리를 함께 사용해보겠습니다.
1. 이번 글에서 만들 화면
이번 글에서는 간단한 서비스 소개 섹션을 만들어보겠습니다. 구성은 아래와 같습니다.
- 상단 소개 영역
- 주요 기능 카드 3개
- 상태 요약 카드 3개
- 하단 CTA 버튼 영역
실제 웹사이트의 랜딩 페이지, 포트폴리오 소개 영역, 관리자 대시보드 첫 화면 등에 응용할 수 있는 구조입니다.
2. 기본 준비 코드
예제를 실행하려면 Bootstrap CSS와 Bootstrap Icons를 먼저 연결해야 합니다.
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.13.1/font/bootstrap-icons.min.css">
Bootstrap Icons를 사용하지 않는다면 두 번째 link는 생략해도 됩니다. 하지만 이번 예제에서는 아이콘을 함께 사용할 것이므로 같이 연결합니다.
3. 전체 레이아웃 잡기
먼저 전체 섹션을 감싸는 container를 만들고, 위아래 여백을 줍니다.
<section class="py-5 bg-light">
<div class="container">
내용이 들어갈 영역
</div>
</section>
| 클래스 | 역할 |
|---|---|
| py-5 | 위아래 여백 적용 |
| bg-light | 밝은 배경색 적용 |
| container | 본문 영역의 최대 너비를 제한하고 가운데 정렬 |
section은 하나의 의미 있는 화면 구역을 만들 때 사용하기 좋습니다. container는 내용이 화면 양끝에 붙지 않도록 정리해줍니다.
4. 상단 소개 영역 만들기
상단에는 제목, 설명, 버튼을 배치합니다. 텍스트를 가운데 정렬하고, 버튼은 두 개를 나란히 배치해보겠습니다.
<div class="text-center mb-5">
<span class="badge text-bg-primary rounded-pill mb-3">
Bootstrap Practice
</span>
<h2 class="fw-bold mb-3">
빠르게 화면 구조를 만드는 Bootstrap UI 예제
</h2>
<p class="text-muted mb-4">
그리드, 카드, 버튼, 아이콘, 유틸리티 클래스를 조합해
간단한 서비스 소개 섹션을 만들어봅니다.
</p>
<div class="d-flex justify-content-center gap-2">
<a href="#" class="btn btn-primary">
<i class="bi bi-play-circle me-1"></i>
시작하기
</a>
<a href="#" class="btn btn-outline-secondary">
예제 보기
</a>
</div>
</div>
text-center는 내용을 가운데 정렬하고, mb-5는 아래쪽 여백을 줍니다. d-flex와 gap-2를 사용하면 버튼 사이 간격을 깔끔하게 만들 수 있습니다.
5. 기능 카드 3개 만들기
다음으로 서비스의 주요 기능을 보여주는 카드 3개를 배치합니다. 모바일에서는 한 줄에 1개, 태블릿 이상에서는 3개가 나란히 보이도록 구성합니다.
<div class="row g-4 mb-5">
<div class="col-12 col-md-4">
<div class="card h-100 border-0 shadow-sm">
<div class="card-body p-4">
<div class="fs-2 text-primary mb-3">
<i class="bi bi-grid-3x3-gap"></i>
</div>
<h5 class="card-title fw-bold">반응형 그리드</h5>
<p class="card-text text-muted">
화면 크기에 따라 콘텐츠가 자연스럽게 재배치됩니다.
</p>
</div>
</div>
</div>
<div class="col-12 col-md-4">
<div class="card h-100 border-0 shadow-sm">
<div class="card-body p-4">
<div class="fs-2 text-success mb-3">
<i class="bi bi-check-circle"></i>
</div>
<h5 class="card-title fw-bold">빠른 UI 구성</h5>
<p class="card-text text-muted">
버튼, 카드, 배지 같은 컴포넌트를 빠르게 조합할 수 있습니다.
</p>
</div>
</div>
</div>
<div class="col-12 col-md-4">
<div class="card h-100 border-0 shadow-sm">
<div class="card-body p-4">
<div class="fs-2 text-warning mb-3">
<i class="bi bi-stars"></i>
</div>
<h5 class="card-title fw-bold">깔끔한 마감</h5>
<p class="card-text text-muted">
여백, 색상, 그림자, 둥근 모서리로 화면 완성도를 높일 수 있습니다.
</p>
</div>
</div>
</div>
</div>
카드에 h-100을 사용하면 같은 줄에 있는 카드 높이를 맞추는 데 도움이 됩니다. border-0과 shadow-sm을 함께 사용하면 테두리는 줄이고 가벼운 그림자로 구분할 수 있습니다.
6. 상태 요약 카드 만들기
이번에는 숫자와 상태를 보여주는 요약 카드를 만들어보겠습니다. 관리자 페이지나 대시보드에서 자주 사용하는 형태입니다.
<div class="row g-3 mb-5">
<div class="col-12 col-md-4">
<div class="bg-white rounded-4 shadow-sm p-4">
<div class="d-flex justify-content-between align-items-center">
<div>
<p class="text-muted mb-1">완료된 작업</p>
<h3 class="fw-bold mb-0">128</h3>
</div>
<span class="badge text-bg-success rounded-pill">
+12%
</span>
</div>
</div>
</div>
<div class="col-12 col-md-4">
<div class="bg-white rounded-4 shadow-sm p-4">
<div class="d-flex justify-content-between align-items-center">
<div>
<p class="text-muted mb-1">진행 중</p>
<h3 class="fw-bold mb-0">24</h3>
</div>
<span class="badge text-bg-primary rounded-pill">
Active
</span>
</div>
</div>
</div>
<div class="col-12 col-md-4">
<div class="bg-white rounded-4 shadow-sm p-4">
<div class="d-flex justify-content-between align-items-center">
<div>
<p class="text-muted mb-1">확인 필요</p>
<h3 class="fw-bold mb-0">7</h3>
</div>
<span class="badge text-bg-warning rounded-pill">
Check
</span>
</div>
</div>
</div>
</div>
상태 요약 카드에서는 숫자가 가장 중요하므로 h3와 fw-bold로 강조했습니다. 반대로 설명 문구는 text-muted로 낮은 중요도를 표현했습니다.
7. CTA 영역 만들기
마지막으로 사용자의 행동을 유도하는 CTA 영역을 만듭니다. CTA는 Call To Action의 줄임말로, 사용자가 다음 행동을 하도록 안내하는 영역입니다.
<div class="bg-primary text-white rounded-4 p-4 p-md-5 text-center">
<h3 class="fw-bold mb-3">
Bootstrap 조합 연습을 계속해보세요
</h3>
<p class="mb-4 opacity-75">
같은 컴포넌트라도 여백, 정렬, 색상 조합에 따라 전혀 다른 화면처럼 보일 수 있습니다.
</p>
<a href="#" class="btn btn-light">
<i class="bi bi-arrow-right-circle me-1"></i>
다음 예제 보기
</a>
</div>
bg-primary와 text-white를 함께 사용해 강조 영역을 만들었습니다. rounded-4로 모서리를 둥글게 만들고, p-4 p-md-5로 화면 크기에 따라 여백을 다르게 적용했습니다.
8. 완성 코드
위에서 만든 코드를 하나로 합치면 아래와 같습니다.
<section class="py-5 bg-light">
<div class="container">
<div class="text-center mb-5">
<span class="badge text-bg-primary rounded-pill mb-3">
Bootstrap Practice
</span>
<h2 class="fw-bold mb-3">
빠르게 화면 구조를 만드는 Bootstrap UI 예제
</h2>
<p class="text-muted mb-4">
그리드, 카드, 버튼, 아이콘, 유틸리티 클래스를 조합해
간단한 서비스 소개 섹션을 만들어봅니다.
</p>
<div class="d-flex justify-content-center gap-2">
<a href="#" class="btn btn-primary">
<i class="bi bi-play-circle me-1"></i>
시작하기
</a>
<a href="#" class="btn btn-outline-secondary">
예제 보기
</a>
</div>
</div>
<div class="row g-4 mb-5">
<div class="col-12 col-md-4">
<div class="card h-100 border-0 shadow-sm">
<div class="card-body p-4">
<div class="fs-2 text-primary mb-3">
<i class="bi bi-grid-3x3-gap"></i>
</div>
<h5 class="card-title fw-bold">반응형 그리드</h5>
<p class="card-text text-muted">
화면 크기에 따라 콘텐츠가 자연스럽게 재배치됩니다.
</p>
</div>
</div>
</div>
<div class="col-12 col-md-4">
<div class="card h-100 border-0 shadow-sm">
<div class="card-body p-4">
<div class="fs-2 text-success mb-3">
<i class="bi bi-check-circle"></i>
</div>
<h5 class="card-title fw-bold">빠른 UI 구성</h5>
<p class="card-text text-muted">
버튼, 카드, 배지 같은 컴포넌트를 빠르게 조합할 수 있습니다.
</p>
</div>
</div>
</div>
<div class="col-12 col-md-4">
<div class="card h-100 border-0 shadow-sm">
<div class="card-body p-4">
<div class="fs-2 text-warning mb-3">
<i class="bi bi-stars"></i>
</div>
<h5 class="card-title fw-bold">깔끔한 마감</h5>
<p class="card-text text-muted">
여백, 색상, 그림자, 둥근 모서리로 화면 완성도를 높일 수 있습니다.
</p>
</div>
</div>
</div>
</div>
<div class="row g-3 mb-5">
<div class="col-12 col-md-4">
<div class="bg-white rounded-4 shadow-sm p-4">
<div class="d-flex justify-content-between align-items-center">
<div>
<p class="text-muted mb-1">완료된 작업</p>
<h3 class="fw-bold mb-0">128</h3>
</div>
<span class="badge text-bg-success rounded-pill">+12%</span>
</div>
</div>
</div>
<div class="col-12 col-md-4">
<div class="bg-white rounded-4 shadow-sm p-4">
<div class="d-flex justify-content-between align-items-center">
<div>
<p class="text-muted mb-1">진행 중</p>
<h3 class="fw-bold mb-0">24</h3>
</div>
<span class="badge text-bg-primary rounded-pill">Active</span>
</div>
</div>
</div>
<div class="col-12 col-md-4">
<div class="bg-white rounded-4 shadow-sm p-4">
<div class="d-flex justify-content-between align-items-center">
<div>
<p class="text-muted mb-1">확인 필요</p>
<h3 class="fw-bold mb-0">7</h3>
</div>
<span class="badge text-bg-warning rounded-pill">Check</span>
</div>
</div>
</div>
</div>
<div class="bg-primary text-white rounded-4 p-4 p-md-5 text-center">
<h3 class="fw-bold mb-3">
Bootstrap 조합 연습을 계속해보세요
</h3>
<p class="mb-4 opacity-75">
같은 컴포넌트라도 여백, 정렬, 색상 조합에 따라 전혀 다른 화면처럼 보일 수 있습니다.
</p>
<a href="#" class="btn btn-light">
<i class="bi bi-arrow-right-circle me-1"></i>
다음 예제 보기
</a>
</div>
</div>
</section>
9. 이 예제에서 사용한 핵심 클래스
| 분류 | 사용한 클래스 | 역할 |
|---|---|---|
| 레이아웃 | container, row, col-md-4 | 화면 폭과 컬럼 배치 구성 |
| 여백 | py-5, mb-5, p-4, gap-2 | 섹션과 요소 사이 간격 조절 |
| 정렬 | text-center, d-flex, justify-content-between, align-items-center | 텍스트와 요소 정렬 |
| 카드 | card, card-body, shadow-sm, border-0 | 정보를 하나의 박스로 묶음 |
| 색상 | bg-light, bg-primary, text-white, text-muted | 배경과 텍스트 분위기 조절 |
| 모양 | rounded-4, rounded-pill | 둥근 모서리와 배지 형태 적용 |
10. 화면을 만들 때 생각할 순서
Bootstrap으로 화면을 만들 때는 클래스를 무작정 붙이기보다 순서를 정해두면 좋습니다.
- 먼저 전체 구역을 section 또는 div로 나눈다.
- container로 본문 폭을 정리한다.
- row와 col로 큰 배치를 잡는다.
- card, button, badge 같은 컴포넌트를 넣는다.
- 마지막으로 여백, 색상, 정렬, 그림자를 조절한다.
처음부터 세부 스타일을 꾸미려고 하면 구조가 복잡해질 수 있습니다. 먼저 큰 레이아웃을 잡고, 그다음 컴포넌트를 배치하고, 마지막에 유틸리티 클래스로 마감하는 흐름이 좋습니다.
11. 자주 하는 실수
- container 없이 요소를 바로 배치해서 화면 양끝에 붙는 경우
- row 없이 col을 사용해 그리드가 어색해지는 경우
- 카드마다 내용 길이가 달라 높이가 맞지 않는 경우
- 여백 클래스를 너무 많이 붙여 구조를 파악하기 어려워지는 경우
- 색상을 과하게 사용해 어떤 요소가 중요한지 모호해지는 경우
- 버튼과 링크의 역할을 구분하지 않고 사용하는 경우
Bootstrap은 빠르게 화면을 만들 수 있게 도와주지만, 화면의 정보 구조와 중요도는 직접 판단해야 합니다. 중요한 내용은 크게, 보조 설명은 작고 연하게, 행동 버튼은 명확하게 배치하는 것이 좋습니다.
12. 정리
- Bootstrap 화면은 큰 구조를 먼저 잡고 세부 스타일을 조절하는 방식이 좋다.
- container, row, col로 기본 배치를 만든다.
- card, badge, button, icon을 조합하면 실전 UI를 빠르게 만들 수 있다.
- shadow-sm, rounded-4, p-4 같은 유틸리티 클래스로 화면 마감을 정리할 수 있다.
- 모바일 화면을 고려해 col-12, col-md-4 같은 반응형 컬럼을 함께 사용하는 것이 좋다.
이번 글에서는 Bootstrap으로 간단한 UI 섹션을 직접 구성해보았습니다. 지금까지 배운 컴포넌트와 유틸리티 클래스를 조합하면, 별도의 CSS를 많이 작성하지 않아도 충분히 정돈된 화면을 만들 수 있습니다.
다음 글에서는 Bootstrap을 사용할 때 자주 발생하는 레이아웃 깨짐과 디버깅 방법을 정리해보겠습니다.
'Tech Stack > BootStrap' 카테고리의 다른 글
| [Bootstrap] 16. 최종 정리: 자주 쓰는 패턴과 실전 활용 흐름 (0) | 2026.07.04 |
|---|---|
| [Bootstrap] 15. 레이아웃 깨짐과 디버깅 방법 (0) | 2026.07.03 |
| [Bootstrap] 13. Bootstrap Icons 이해하기 (0) | 2026.07.01 |
| [Bootstrap] 12. Image, Figure, Ratio 이해하기 (0) | 2026.06.30 |
| [Bootstrap] 11. Breadcrumb, Spinner, Placeholder 이해하기 (0) | 2026.06.29 |