한눈에 보는 정의
디자인에서 글자·이미지·버튼 사이에 일부러 비워 두는 공간. CSS의 white-space 속성(줄바꿈 처리)과는 다른 뜻이다.
이런 말로 들어요
- 내용이 너무 빽빽해요. 여백을 좀 더 주세요.
- 섹션 사이 여백을 일정하게 맞췄어요.
그림으로 보기
여백은 내용을 묶고 나누는 장치입니다. 라벨은 자기 입력칸 가까이, 다른 항목과는 멀리 두면 덜 헷갈립니다.
하캄솔루션 자체 제작 설명도식자세히 알아보기
여백은 낭비가 아니라 내용을 묶고 나누는 장치입니다. 가까이 붙은 것은 한 무리로, 떨어진 것은 다른 무리로 읽힙니다. 그래서 입력칸 라벨은 자기 칸 가까이, 다른 칸과는 멀리 두면 덜 헷갈립니다. 실제 코드에서는 margin과 padding으로 여백을 만들고, 8px처럼 정해 둔 단위의 배수로 맞추면 화면이 정돈돼 보입니다.
실무 예시
예를 들어 상담 신청 폼에서 각 라벨과 입력칸 사이는 8px, 항목과 항목 사이는 24px로 두면 어떤 라벨이 어느 칸 것인지 바로 보입니다.
함께 살펴볼 점
여백을 너무 많이 주면 휴대폰에서 중요한 내용과 버튼이 첫 화면 밖으로 밀립니다. 화면 크기별로 여백 값을 조정합니다.
AI에게 이렇게 요청해 보세요
이 페이지의 여백을 8px 단위로 정리해 줘. 라벨과 입력칸은 가깝게, 항목 사이는 넓게, 섹션 사이는 더 넓게 두고 모바일에서는 조금 줄여 줘.
코딩·작성 도구에 붙여 쓰기 전에 내 상황에 맞게 바꾸고, 결과는 직접 확인하세요.출처와 검토 정보
- Group Form Elements Effectively Using White Space - NN/g 새 창
라벨을 관련 입력칸에 더 가깝게 두는 등 여백으로 폼 요소를 묶으면 응답 시간과 노력이 줄어든다는 사용성 조언을 확인했습니다.
자료 확인 - Grids & spacing - Material Design 3 새 창
레이아웃에서 요소 사이 간격을 일정한 단위로 정해 쓰는 디자인 시스템 안내를 확인했습니다.
자료 확인
내용 검토
최초 발행 · 내용 수정