Flexbox는 웹사이트 레이아웃을 구축하고 반응형으로 만드는 과정을 그 어느 때보다 쉽게 만들어 주는 비교적 최신의 프론트엔드 기술입니다.
예전에는 웹사이트를 만들 때 float 기반 그리드나 심지어 테이블을 사용해야 레이아웃이 의도한 대로 보였습니다. 하지만 이러한 방식은 데스크톱, 태블릿, 모바일 등 다양한 기기에서 일관되게 잘 보이도록 하는 반응형 디자인에는 적합하지 않습니다.
웹 개발 트렌드를 따라가고 싶다면 Flexbox 사용법은 반드시 익혀야 합니다. float 그리드는 빠르게 과거의 유물이 되어가고 있으니까요.
이 단계별 가이드에서는 간단한 반응형 웹사이트 레이아웃을 만드는 전체 과정을 다룹니다. 먼저 이 튜토리얼에서 진행할 내용을 간략히 살펴보겠습니다.
간단한 웹사이트 레이아웃 만들기: 4단계
- 모바일, 태블릿, 데스크톱에서 레이아웃이 어떻게 보일지 스케치합니다.
- 시맨틱 HTML과 CSS를 활용해 기본 레이아웃 코딩을 시작합니다.
- 섹션별로 나머지 레이아웃을 완성합니다.
- CSS는 모바일 우선(mobile-first) 방식으로 작성하여, 가장 좁은 화면 폭부터 스타일을 정의하고 점진적으로 더 넓은 화면 폭으로 확장합니다.
진행 과정에서 제 사고방식을 함께 설명드리고, 실무에서 유용했던 좋은 습관들도 공유하겠습니다.
준비되셨나요? 그럼 시작해 보겠습니다!
1단계: 웹사이트 레이아웃 와이어프레임 설계
와이어프레임은 웹사이트를 구성하는 요소들을 도식화한 것입니다. 디자인 시안에 가까울 만큼 매우 상세하게 그릴 수도 있고, 핵심 요소만 담아 간단하게 작성할 수도 있습니다.
여기서는 아주 기본적인 와이어프레임을 사용합니다. 웹사이트를 핵심 섹션들로 나누고, 각 섹션이 모바일·태블릿·데스크톱에서 어떻게 배치될지 결정합니다.
이번에 만들 섹션은 헤더(Header), 히어로(Hero), 콘텐츠(Content), 사이드바(Sidebar), 푸터(Footer)입니다.
와이어프레임은 MockFlow라는 온라인 도구를 활용해 제작했습니다.
모바일 레이아웃
모든 섹션이 사이드바를 포함해 하나의 긴 세로 열로 쌓이는 것을 볼 수 있습니다.
이처럼 세로로 쌓는(stacking) 방식은 스마트폰처럼 화면이 좁은 기기에 콘텐츠를 효율적으로 배치하는 가장 기본적인 방법입니다.
좁은 화면에서 사이드바를 본문 옆에 나란히 두는 것은 무리가 있습니다. 폭이 충분하지 않기 때문입니다.
태블릿 레이아웃
태블릿은 스마트폰보다 훨씬 넓기 때문에, 이제 사이드바를 본문 콘텐츠 옆에 배치할 수 있습니다. 모든 섹션은 태블릿 화면 전체 폭을 차지합니다.
데스크톱 레이아웃
데스크톱에서는 화면이 매우 넓은 모니터에서 어떻게 보일지 고민해야 합니다. 특히 요즘은 울트라와이드 모니터가 대중화되면서 더욱 중요해졌습니다.
큰 모니터에서 콘텐츠가 화면 전체 폭으로 늘어난다면 읽고 훑어보기가 오히려 어려워집니다. 시선을 화면 맨 왼쪽에서 맨 오른쪽까지 계속 이동시켜야 한다고 상상해 보세요. 너무 피곤한 일이라 사용자들이 떠나버릴 것입니다.
그래서 넓은 화면에서도 가독성을 유지하기 위해 콘텐츠 폭에 상한선을 두고 가운데 정렬했습니다. 이렇게 하면 모니터 크기와 관계없이 편안하고 직관적으로 읽을 수 있습니다.
목표하는 디자인이 명확해졌으니, 이제 본격적으로 HTML과 CSS로 만들어 보겠습니다!
2단계: 기본 구조와 스타일 만들기
HTML 요소로 레이아웃 잡기
앞서 만든 와이어프레임을 바탕으로, 각 섹션에 해당하는 HTML 요소를 하나씩 생성합니다.
<body> 안에 작성할 마크업은 다음과 같습니다:
<!-- Main Content -->
<main>
Main
<!-- Header -->
<header>
Header
</header>
<!-- Hero -->
<section>
Hero
</section>
<!-- Content -->
<section>
Content
</section>
<!-- Sidebar -->
<aside>
Sidebar
</aside>
<!-- Footer -->
<footer>
Footer
</footer>
</main>와이어프레임의 각 요소가 HTML에 그대로 대응되는 것을 확인할 수 있습니다. 아직은 실제 콘텐츠 없이 간단한 플레이스홀더 텍스트만 넣었습니다.
기본 CSS 속성 추가하기
이제 레이아웃이 눈에 보이도록 아주 기본적인 CSS를 추가해 보겠습니다.
main, header, section, aside, footer {
margin: 0;
padding: 20px;
border: 1px solid #000000;
color: #ffffff;
}
main {
background: #000000;
}
.header {
background: #03a9f4;
}
.hero {
background: #d22b1f;
}
.content {
background: #129a22;
}
.sidebar {
border: 1px solid #000000;
background: #673ab7;
}
.footer {
border: 1px solid #000000;
background: #616161;
}box-sizing: border-box 설정이나 폰트 스타일 같은 전반적인 스타일은 생략했습니다. 이 글에서는 위의 스타일만 신경 쓰면 됩니다.
저는 각 요소에 테두리(border)를 추가하는 것을 좋아합니다. 요소의 위치를 한눈에 파악할 수 있고, 이상한 문제가 생겼을 때 디버깅하기도 쉽기 때문입니다. 또한 앞서 만든 와이어프레임과 맞추기 위해 배경색도 지정했습니다.
HTML 파일을 브라우저에서 열면 다음과 같이 보입니다!
눈치채셨겠지만, 현재 화면은 모바일 와이어프레임과 거의 동일합니다. 기본적으로 모든 요소가 위아래로 쌓이기 때문입니다.
플레이스홀더 콘텐츠 넣기
HTML 요소를 만든 후에는 플레이스홀더 콘텐츠를 추가하는 것이 좋습니다. 완성된 웹사이트와 비슷한 모습을 미리 확인할 수 있기 때문입니다.
너무 공들일 필요는 없습니다. lorem ipsum 더미 텍스트를 각 요소에 복사해서 붙여넣으면 됩니다. 예를 들어 Hero 요소는 다음과 같습니다:
<section class="hero">
Hero
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sumenda potius quam expetenda. Nihil opus est exemplis hoc facere longius.
</p>
</section>모든 요소에 lorem ipsum을 넣으면 웹사이트는 다음과 같이 보입니다:
꽤 괜찮네요! 최종 콘텐츠의 분량감을 재현하기 위해 요소마다 서로 다른 길이의 텍스트를 넣었다는 점에 주목하세요.
모바일을 위한 CSS 최적화
이제 모바일 레이아웃은 거의 완성되었습니다!
모바일에서 웹사이트를 예쁘게 보이게 하는 팁 하나를 더 드리자면, 화면 양옆(원한다면 위아래에도)에 균일한 패딩(padding)을 추가하는 것입니다.
이렇게 하면 사용자에게 약간의 여백을 줄 수 있습니다. 패딩과 마진이 전혀 없으면 콘텐츠가 화면 가장자리에 딱 붙어 답답한 느낌을 줍니다.
반대로 여백이 너무 많으면 가독성이 떨어지므로 적당히 조절해야 합니다. 여기서는 전역 패딩으로 20px를 사용했지만, 10px나 15px 등 보기 좋다고 생각하는 값으로 자유롭게 설정하면 됩니다.
이제 태블릿 화면용 스타일을 추가해 보겠습니다.
태블릿용 2단 컬럼 레이아웃 만들기
태블릿 와이어프레임을 다시 보면 Content와 Sidebar 요소가 나란히 배치되어 있고, 나머지는 모바일과 마찬가지로 세로로 쌓여 있습니다.
Content와 Sidebar를 2단 컬럼으로 배치하려면 몇 가지 스타일을 추가해야 합니다. CSS Grid 대신 Flexbox를 사용하겠습니다.
먼저 HTML을 수정해서 Content와 Sidebar 요소를 "flex-container"라는 클래스를 가진 부모 <div>로 감싸줍니다. (생략 기호(...)는 당장 중요하지 않은 추가 마크업을 의미합니다.)
<div class="flex-container">
<!-- Content -->
<section class="content">
Content
...
</section>
<!-- Sidebar -->
<aside class="sidebar">
Sidebar
...
</aside>
</div>CSS를 작성하기 전에, 2단 레이아웃에서 Content와 Sidebar가 어떻게 동작하기를 원하는지 먼저 결정해야 합니다. 선택지는 여러 가지이며, "정답" 역시 상황에 따라 달라집니다.
여기서는 Sidebar를 항상 300px 폭으로 고정하고, Content가 나머지 공간을 모두 차지하도록 하겠습니다.
이를 위해 CSS에 Flexbox 스타일을 추가합니다:
@media screen and (min-width: 640px){
.flex-container {
display: flex;
}
}미디어 쿼리를 사용해 기기 폭이 640px 이상일 때 Flexbox를 활성화합니다. 즉, 그보다 좁은 모바일 화면에서는 세로로 쌓인 상태를 유지하고, 640px 지점을 넘는 순간 Flexbox 레이아웃으로 전환됩니다.
.content {
flex: 1;
...
}
.sidebar {
flex: 0 1 300px;
...
}Content와 Sidebar 요소에 flex 속성을 추가했습니다.
Content의 폭은 Flexbox가 계산하도록 flex: 1로 설정했습니다. 이는 flex-grow: 1, flex-shrink: 1, flex-basis: 0%의 축약형입니다.
이것이 Flexbox의 "기본" 설정입니다. 모든 자식 요소에 flex: 1을 지정하면 폭이 계산되어 최대한 균등하게 분배됩니다.
Sidebar의 폭을 300px로 고정하려면 flex: 0 1 300px을 사용합니다. CSS-Tricks에 따르면 마지막 값인 flex-basis는 "남은 공간이 분배되기 전 요소의 기본 크기를 정의합니다."
덕분에 Sidebar는 항상 300px를 유지하고, 남은 공간은 Content 영역에 할당됩니다.
결과는 다음과 같습니다!
이제 데스크톱용 스타일을 추가해 보겠습니다.
데스크톱용 콘텐츠 최대 폭 제한하기
태블릿과 데스크톱 와이어프레임은 꽤 비슷합니다. 둘 다 콘텐츠 옆에 사이드바가 배치되어 있죠.
데스크톱의 핵심 차이점은, 앞서 언급했듯이 메인 콘텐츠에 max-width를 설정하는 것입니다. 이렇게 하면 울트라와이드 모니터에서도 웹사이트의 가독성이 유지됩니다.
CSS 헬퍼 클래스 활용하기
이 스타일 세트는 여러 요소에 필요할 가능성이 높으므로, 재사용하기 쉬운 헬퍼 클래스로 만들겠습니다.
CSS에 새 클래스와 스타일을 다음과 같이 추가합니다:
.wrapper {
margin: auto;
max-width: 75rem;
}요소의 max-width를 1200px(rem 단위로 변환)로 설정하고, 1200px보다 넓은 화면에서는 가운데 정렬합니다.
HTML에서는 Content와 Sidebar 컨테이너의 폭을 제한하고 싶으므로, flex-container 래퍼에 wrapper 클래스를 추가합니다.
마크업은 다음과 같이 됩니다:
<div class="flex-container wrapper">
…
</div>화면을 넓게 늘려 확인해 보면, 원했던 대로 Content/Sidebar 래퍼 주변에 여백이 생긴 것을 볼 수 있습니다 😁
마무리하며
이렇게 해서 모바일, 태블릿, 데스크톱에서 모두 멋지게 보이는 간단한 반응형 레이아웃을 완성했습니다!
실제 동작하는 웹사이트가 궁금하시다면 데모 페이지에서 확인하실 수 있으며, 프로젝트의 전체 코드는 GitHub에서 내려받을 수 있습니다.
*참고: 이 프로젝트는 Gulp와 Sass를 사용합니다. Gulp 설치에 도움이 필요하다면 간단한 Gulp 튜토리얼을 참고하세요.
끝까지 읽어주셔서 감사합니다! 이 튜토리얼에 대한 생각을 댓글로 남겨주세요 😊