직접홈페이지 만들기 홈페이지 여백이 왜 어색할까요? 마진(Margin)과 패딩(Padding) 한 번에 이해하기

홈페이지를 만들거나 편집하다 보면 글자 크기나 색상보다 더 자주 마주치는 항목이 있습니다.
바로 마진(Margin)과 패딩(Padding)입니다.

“둘 다 여백 아닌가?”라고 느끼기 쉽습니다. 실제로 둘 다 공간을 만드는 기능이 맞습니다. 다만 공간이 만들어지는 위치가 다릅니다. 이 차이만 이해하면 홈페이지의 답답함이나 어색한 간격을 훨씬 쉽게 조절할 수 있습니다.

마진: 상자와 상자 사이의 거리

마진은 쉽게 말하면 내 상자 바깥쪽 여백입니다.

예를 들어 홈페이지에 제목 영역, 설명문 영역, 버튼 영역이 차례로 있다고 생각해 보겠습니다. 제목과 설명문이 너무 붙어 있으면 답답해 보이겠지요. 이때 제목 아래 또는 설명문 위에 마진을 넣으면, 두 요소 사이가 자연스럽게 벌어집니다.

즉, 마진은 다음과 같은 상황에 사용합니다.

• 제목과 본문 사이를 띄우고 싶을 때

• 카드와 카드 사이 간격을 만들고 싶을 때

• 한 섹션과 다음 섹션 사이를 넓히고 싶을 때

• 이미지와 문단을 서로 분리하고 싶을 때

중요한 점은 마진을 늘려도 상자 자체의 배경색이나 테두리가 커지는 것은 아니라는 것입니다. 상자 바깥에 빈 공간이 생길 뿐입니다.

그래서 마진은 “다른 요소와 얼마나 떨어져 있을까?”를 조절하는 값이라고 기억하면 됩니다.

패딩: 상자 안에서 내용물까지의 거리

패딩은 상자 안쪽 여백입니다.

예를 들어 파란색 배경을 가진 버튼 안에 ‘상담 문의’라는 글자가 있다고 해보겠습니다. 글자가 버튼 테두리에 너무 가까우면 답답하고 눌러 보기도 불편해 보입니다. 이때 버튼 안쪽에 패딩을 주면, 글자 주변에 숨 쉴 공간이 생기고 버튼도 자연스럽게 커집니다.

패딩은 다음과 같은 상황에 사용합니다.

• 버튼 안의 글자 주변을 넉넉하게 만들고 싶을 때

• 카드 안의 제목과 설명문이 테두리에 붙지 않게 할 때

• 색상 배경을 가진 영역을 더 여유롭게 보이게 할 때

• 안내 박스, 공지 상자, 후기 카드 안의 내용을 편안하게 배치할 때

패딩을 늘리면 상자 안의 내용물은 가운데 쪽으로 밀리고, 배경색이나 테두리를 가진 상자 자체가 함께 커집니다.

그래서 패딩은 “내 상자 안에서 내용물이 얼마나 편안하게 놓일까?”를 조절하는 값입니다.

가장 쉽게 구분하는 방법

마진과 패딩이 헷갈릴 때는 아래 질문 하나만 해보면 됩니다.

이 공간은 다른 상자와 거리를 두기 위한 것인가, 아니면 내 상자 안의 내용물을 띄우기 위한 것인가?

다른 요소와의 거리라면 마진입니다.

상자 안의 글자·이미지·버튼과 테두리 사이 거리라면 패딩입니다.

카드로 생각하면 더 쉽습니다

홈페이지에서 자주 쓰는 ‘카드’ 디자인을 떠올려 보겠습니다.

카드 밖에서 옆 카드와 떨어져 있는 공간은 마진입니다.

카드 안에서 글자와 카드 테두리가 떨어져 있는 공간은 패딩입니다.

예를 들면 이런 구조입니다.

• 카드와 카드 사이 24px → 마진

• 카드 안쪽의 제목·본문 주변 30px → 패딩

• 제목 아래 본문까지 12px → 마진 또는 요소 간 간격 설정

• 버튼 안의 글자 주변 위아래 12px, 좌우 20px → 패딩

실제 홈페이지 편집에서의 활용

홈페이지 편집기에서 섹션이 너무 붙어 보인다면, 먼저 섹션의 위·아래 마진을 확인해 보세요. 특히 첫 화면의 소개 문구, 프로그램 안내, 후기, 문의 영역처럼 큰 덩어리 사이에는 충분한 마진이 있어야 읽는 사람이 내용을 구분하기 쉽습니다.

반대로 카드나 버튼 안의 글자가 답답해 보인다면 패딩을 조절하는 것이 맞습니다. 배경색이 있는 박스에서 글자가 테두리에 가까워 보일 때도 패딩을 늘리면 해결되는 경우가 많습니다.

처음에는 수치를 크게 바꾸기보다 10px 또는 20px 정도씩 조절해 보세요. 작은 차이처럼 보여도 화면 전체에서는 인상이 크게 달라집니다.

기억하기 쉬운 한 문장

마진은 밖을 띄우고, 패딩은 안을 띄웁니다.

홈페이지의 각 요소가 서로 너무 붙어 있다면 마진을 살펴보고, 카드나 버튼 안의 글자가 답답하다면 패딩을 살펴보면 됩니다. 이 원리만 잡아도 홈페이지 편집이 훨씬 덜 어렵게 느껴질 것입니다.