1. 레이아웃의 정의
Layout is the visual arrangement of elements on the screen. Material Design3, Understanding layout
레이아웃은 UI 화면 안에서 텍스트, 이미지, 버튼, 네비게이션 등 인터페이스 요소를 목적에 맞게 배치하고 조직하는 구조이다. 이 배치는 정보의 우선순위를 드러내고, 사용자의 탐색과 행동을 쉽게 만든다.
- 어떤 요소를 위에 둘지
- 서로 얼마나 떨어뜨릴지
- 어떤 순서로 읽히게 할지
- 어떤 정보가 먼저 보이게 할지
레이아웃은 시각적 위계를 만드는 핵심 수단이다.
2. 상단 / 본문 / 하단 구조
2-1. 앱의 상단 / 본문 / 하단
상단 : 현재 위치를 알려주고, 주요 기능을 바로 실행하게 하는 영역이다. 제목, 뒤로가기, 메뉴, 검색, 알림 같은 요소가 들어간다.
본문 : 핵심 콘텐츠가 놓이는 중심 영역이다. 사용자가 읽고, 보고, 입력하고, 선택하는 핵심 구간이라고 볼 수 있다.
하단 : 주로 탐색을 위한 영역이다. 보통 bottom navigation이나 tab bar가 들어가며, 사용자가 홈, 검색, 마이페이지 같은 최상위 화면을 빠르게 오갈 수 있게 한다.
2-2. 웹의 상단 / 본문 / 하단
상단(Header) : 페이지의 정체성을 보여주고, 탐색을 시작하게 하는 영역이다. 로고, 사이트명, 메뉴, 검색, 로그인 버튼 등이 들어간다.
본문 (Main) : 페이지의 핵심 정보가 담기는 중심 영역이다. 기사 내용, 상품 목록, 이미지, 표, 폼, 게시물처럼 사용자가 실제로 읽고 이용하는 정보가 들어간다.
하단 (Footer) : 웹의 하단은 보조 정보와 마무리 정보를 제공하는 영역이다. 보통 저작권, 회사 정보, 정책 링크, 고객센터, 관련 문서 링크 등이 들어간다.
3. 레이아웃에서 섹션 구분의 중요성
섹션 기반 레이아웃은 화면이나 페이지를 하나의 긴 덩어리로 보여주는 대신, 주제나 기능별로 여러 구획으로 나누어 구성하는 방식이다.
소개 섹션, 추천 섹션, 카테고리 섹션, 후기 섹션처럼 의미 있는 단위로 나누는 방식이다. 이렇게 하면 사용자는 한 번에 모든 정보를 읽지 않아도, 필요한 부분만 빠르게 훑어볼 수 있다.
4. 레이아웃의 표현 방식
4-1. 리스트형 레이아웃
리스트형 레이아웃은 여러 항목을 세로로 연속 배치해 보여주는 방식이다. 정보를 카드처럼 크게 묶기보다 한 줄씩 순서 있게 나열하는 구조이다. 그래서 사용자는 여러 항목을 빠르게 훑고, 비교하고, 필요한 항목을 찾기 용이하다.
리스트형 레이아웃은 항목 수가 많고, 사용자가 빠르게 훑어보거나 순서대로 확인해야 할 때 적합하다. 예를 들어 메시지 목록, 알림 목록, 설정 메뉴, 검색 결과, 게시글 목록, 주문 내역 같은 화면에 많이 쓰인다. 웹에서도 뉴스 목록, 상품 목록, 공지사항, 게시판처럼 반복 항목을 정리할 때 자주 사용된다.
4-2. 카드형 레이아웃
카드형 레이아웃은 서로 관련된 정보와 액션을 하나의 독립된 박스형 단위 안에 묶어서 보여주는 방식이다. 정보를 개별 단위로 묶어 시각적으로 구분해 주기 때문에, 사용자는 각 항목을 하나의 콘텐츠 덩어리로 인식하기 쉽고, 풍부한 정보와 시각적 맥락을 한 번에 볼 수 있다.
카드형 레이아웃은 이미지, 제목, 설명, 상태 정보, 버튼 등 여러 종류의 정보를 함께 보여줘야 할 때 적합하다. 그래서 쇼핑 상품, 콘텐츠 추천, 뉴스 기사, 영상 추천, 숙소 목록, 포트폴리오 썸네일처럼 항목 하나하나를 독립적으로 보여줄 필요가 있는 화면에서 많이 쓰인다. 반대로 아주 빠른 스캔이나 정렬·비교가 중요한 경우에는 리스트형이 더 유리할 수 있다.
https://uxdesign.cc/lets-talk-about-card-design-in-web-design-f618e6bf31e9 UX Collective card design in web
4-3. 테이블형 레이아웃
테이블형 레이아웃은 정보를 행과 열구조로 정리해서 보여주는 방식이다. 단순히 세로로 나열하는 것이 아니라,
여러 기준을 한 번에 비교할 수 있도록 표 형태로 배열하는 구조이다.
테이블형 레이아웃은 여러 항목을 같은 기준으로 비교해야 할 때 가장 적합하다. 예를 들어 가격 비교표, 일정표, 성적표, 통계표, 주문 내역, 관리자 데이터 화면, 매출 현황 같은 곳에서 많이 쓰인다.
4-4. 혼합형 레이아웃
혼합형 레이아웃은 한 화면 안에서 리스트형, 카드형, 테이블형 같은 여러 표현 방식을 함께 사용하는 구조이다. 화면 전체를 한 가지 방식으로만 구성하지 않고, 섹션마다 목적에 맞는 레이아웃을 다르게 적용하는 방식을 말한다.
예를 들어 같은 화면 안에서 상단 추천 영역은 카드형, 중간 정보 목록은 리스트형, 하단 비교 영역은 테이블형으로 구성될 수 있다.
정보의 성격에 따라 가장 적절한 표현 방식을 조합한다. 빠르게 훑어봐야 하는 정보는 리스트형으로, 시각적으로 강조해야 하는 콘텐츠는 카드형으로, 비교가 필요한 데이터는 테이블형으로 보여줄 수 있다.
5. 정보 우선 순위에 따른 화면 구성
5-1. 콘텐츠 우선 화면
콘텐츠 우선 화면은 사용자가 먼저 읽고, 보고, 탐색해야 할 정보를 중심에 두는 화면이다. 화면의 핵심이 버튼이나 입력이 아니라 내용 자체에 있다.
| 예시 | 레이아웃 |
| 뉴스 기사 상세 블로그 글 영상/콘텐츠 추천 화면 상품 상세 설명 전시 소개 페이지 |
큰 제목 대표 이미지 본문 내용 관련 콘텐츠 정보 흐름이 중심 |
5-2. 액션 우선 화면
액션 우선 화면은 사용자가 무언가를 바로 해야 하는 행동을 중심에 두는 화면이다. 즉, 읽는 것보다 입력, 선택, 클릭, 실행이 더 중요하다.
| 예시 | 레이아웃 |
| 로그인 / 회원가입 결제 화면 예약 화면 주문하기 화면 업로드 / 작성 화면 검색 필터 화면 |
입력창 버튼 선택 옵션 CTA(Call to Action) |
6. 반응형 레이아웃
반응형 레이아웃은 화면 크기가 달라질 때 단순히 요소 크기만 줄이는 것이 아니라, 정보를 배치하는 구조 자체가 달라지는 방식을 말한다. 이때, 레이아웃이 바뀌는 지점을 브레이크포인트(break point)라고 정의한다. 일반적으로는 좁은 화면에서 단일 열 구조로 시작하고, 화면이 넓어질수록 2열, 3열처럼 다열 구조로 확장하는 방식이 많이 사용된다.
6-1. 구조 변화 패턴
| 열 수 변화 | 화면이 좁아질수록 여러 열 구조를 줄이고 단일 열 구조로 바꾸는 방식 | 4열 카드 목록 → 2열 → 1열 |
| 사이드 영역 재배치 | 본문 옆에 있던 사이드바, 필터, 보조 정보를 아래로 옮기거나 숨기는 방식 | 좌측 필터 영역 → 상단 버튼 또는 하단 패널 |
| 내비게이션 축소 | 넓은 화면의 전체 메뉴를 작은 화면에서 더 단순한 탐색 방식으로 바꾸는 방식 | 가로 메뉴 → 햄버거 메뉴 |
| 정보 우선순위 재정렬 | 작은 화면에서 덜 중요한 정보를 뒤로 보내고 핵심 정보부터 보이게 재배치하는 방식 | 상세 설명 축소, 가격·버튼 우선 배치 |
| 콘텐츠 밀도 조절 | 화면 크기에 따라 한 번에 보여주는 정보량을 줄이거나 늘리는 방식 | 카드 안 부가 정보 숨김, 텍스트 줄 수 축소 |
| 요소 크기 및 간격 조정 | 글자, 이미지, 카드, 여백 크기를 화면에 맞게 조정하는 방식 | 큰 카드 → 작은 카드, 넓은 여백 → 좁은 여백 |
| 레이아웃 전환 | 같은 콘텐츠를 다른 구조로 바꾸어 보여주는 방식 | 테이블형 → 카드형, 다열형 → 리스트형 |
| 패널 분리 | 넓은 화면에서는 함께 보이던 영역을 작은 화면에서 단계적으로 나누는 방식 | 목록 + 상세 동시 표시 → 목록 화면 / 상세 화면 분리 |
| 고정 요소 변화 | 상단/하단에 고정되던 요소를 화면 크기에 맞게 축소하거나 접는 방식 | 상단 툴바 축소, 하단 고정 버튼 단순화 |
| 인터랙션 방식 변화 | 화면 크기에 따라 같은 기능도 다른 조작 방식으로 제공하는 패턴 | hover 기반 메뉴 → 탭/클릭 기반 메뉴 |
6-2. 브레이크 포인트
(1) 웹
| 576px / 640px 전후 | 모바일 |
| 768px 전후 | 태블릿 시작 |
| 992px / 1024px 전후 | 작은 노트북 / 큰 태블릿 가로 |
| 1200px / 1280px 전후 | 데스크톱 기본 |
| 1400px / 1536px 이상 | 넓은 데스크톱 |
출처 - Bootstrap https://getbootstrap.com/docs/5.0/layout/breakpoints/
Breakpoints
Breakpoints are customizable widths that determine how your responsive layout behaves across device or viewport sizes in Bootstrap.
getbootstrap.com
(2) 앱
dp = density-independent pixel
화면 밀도와 상관없이 비슷한 물리적 크기로 보이게 하기 위한 가상 픽셀 단위
1dp = mdpi(160dpi) 화면에서 대략 1px
| 0–599dp | Compact |
| 600–839dp | Medium |
| 840dp 이상 | Expanded |
| 1200dp 이상 | Large |
| 1600dp 이상 | Extra-large |
출처 - Bootstrap https://developer.android.com/develop/ui/compose/layouts/adaptive/use-window-size-classes?hl=ko
창 크기 클래스 사용 | Jetpack Compose | Android Developers
창 크기 클래스를 사용하여 적응형 레이아웃을 만듭니다.
developer.android.com
7. 정렬, 간격, 위계
7-1. 정렬
정렬은 화면에 질서를 만드는 기본 장치이다. 요소들이 같은 시작선, 끝선, 혹은 중심선을 공유하면 화면이 정돈되어 보이고, 사용자는 정보를 더 빠르게 훑을 수 있다.
7-2. 간격
간격은 요소들 사이의 관계를 보여주는 역할을 한다. 가까운 요소는 같은 그룹으로 인식되고, 멀리 있는 요소는 다른 그룹으로 인식된다.
간격이 잘 설계된 화면은 제목과 본문, 입력 라벨과 입력창, 카드와 카드 사이의 관계가 자연스럽게 읽힌다. 반대로 관련된 요소 사이 간격이 너무 멀거나, 관계없는 요소가 지나치게 가까우면 사용자는 무엇이 무엇과 연결되는지 판단하기 어려워진다.
7-3. 위계
위계는 사용자가 무엇을 먼저 보고, 다음에 무엇을 읽고, 마지막에 어디서 행동해야 하는지를 정해주는 원리이다. 크기, 색, 간격, 위치 등의 차이로 만들 수 있다. 위계가 분명한 화면은 한눈에 이해되지만, 모든 요소를 똑같이 강조하면 사용자는 어디부터 봐야 할지 몰라 피로감을 느끼게 된다.
8. 안정적으로 보이는 구조와 복잡해 보이는 구조
안정적으로 보이는 화면은 정렬이 맞고, 간격 규칙이 일정하며, 정보의 위계가 분명한 구조를 가진다. 그래서 사용자는 어디부터 보고 어떻게 읽어야 할지 쉽게 이해할 수 있다. 반대로 복잡해 보이는 화면은 정렬선이 제각각이거나, 간격이 불규칙하거나, 모든 요소가 동시에 강조되어 시선이 분산되는 경우가 많다. 결국 화면 인상의 차이는 요소 수 자체보다, 정렬·간격·위계를 얼마나 일관되게 설계했는지에 달려 있다.
미니 과제
1. 같은 서비스의 앱 화면 1개, 웹 화면 1개를 골라 각각 상단 / 본문 / 하단 / 핵심 강조 영역으로 나누기
2. 앱과 웹 중 어느 쪽이 정보 밀도가 더 높은지 적기
3. 정렬 / 간격 / 강조 방식 차이도 함께 적기
- 정렬 : 단일 열 중심의 좌측 정렬 구조 / 각 섹션의 제목, 카드, 리스트 항목이 같은 시작선을 기준으로 정렬되어 있다.
- 간격 : 섹션과 섹션 사이를 여백으로 구분 / 카드 하나하나보다 콘텐츠 묶음 단위의 간격이 더 중요하게 작동한다.
- 강조 : 색상, 배너 크기, 카드 크기, 위치 / 콘텐츠 강조 + 빠른 훑어보기가 함께 작동
- 정렬 : 다열 구조, 좌측 정렬
- 간격 : 여러 영역을 나누면서 간격으로 구조 구분 / 모바일보다 구조적 구분은 더 잘 드러남
- 강조 : 검색창, 메인 배너, 대표 카드, 섹션 타이틀 / 크기와 위치를 통한 강조
실제 한 화면에 노출되는 정보량은 웹이 더 많기 때문에, 정보 밀도는 웹이 더 높다고 볼 수 있다. 웹은 다열 구조이끼 때문에 한 화면에 정보가 더 많이 보인다.