고급 설정 입문: 여백의 미학, 마진(Margin)과 패딩(Padding)

웹 디자인을 배우면서 가장 많은 분들이 좌절하고, 동시에 이것만 깨달으면 실력이 수직 상승하는 바로 그 마의 구간! **[레슨 7]**에 오신 것을 환영합니다.

지난 레슨에서 위젯과 위젯 사이를 띄울 때 ‘스페이서(Spacer)’ 위젯을 쓴다고 말씀드렸죠? 초보 시절에는 아주 유용하지만, 진정한 프로 디자이너들은 스페이서 위젯을 거의 쓰지 않습니다. 대신 오늘 배울 **’마진(Margin)’**과 **’패딩(Padding)’**을 사용해서 화면의 여백을 한 치의 오차도 없이 완벽하게 통제합니다.

30년 차 선배로서 장담합니다. 오늘 내용만 완벽하게 이해하시면, 여러분은 이미 초보 딱지를 떼신 겁니다. 자, 집중해서 따라와 주세요!

엘리멘터의 모든 위젯과 컨테이너를 클릭한 후 좌측 패널 상단을 보면, 가장 오른쪽에 [고급(Advanced)] 탭이 있습니다. 이곳의 맨 위에 자리 잡고 있는 것이 바로 마진과 패딩입니다.

이 두 가지를 이해하려면 웹 디자인의 기본 원리인 **’박스 모델(Box Model)’**을 알아야 합니다.

웹상의 모든 요소(글자, 이미지, 버튼 등)는 눈에 보이지 않는 ‘네모난 상자(Box)’ 안에 들어있다고 상상해 보세요.

1. 패딩(Padding) 이란? : “내 안의 숨통 틔우기”

패딩은 상자의 테두리(Border) 안쪽으로 생기는 여백입니다.

• 비유: 방(상자)의 벽(테두리)과, 방 한가운데 놓인 침대(콘텐츠) 사이의 빈 공간입니다. 방의 패딩은 벽과 침대와의 거리

• 언제 쓰나요?

  • 버튼을 만들었는데 글씨가 테두리에 너무 꽉 껴서 답답해 보일 때, 버튼 안쪽에 패딩을 주어 뚱뚱하고 넉넉한 버튼으로 만듭니다.

  • 컨테이너 배경에 예쁜 색을 칠했는데, 안에 있는 글자들이 상자 모서리에 딱 붙어있을 때 패딩을 주어 글자들을 상자 안쪽으로 예쁘게 모아줍니다.

2. 여백 (마진 Margin) 이란? : “너와 나 사이의 거리 두기”

여백이란 표현은 조금 잘못된 표현인 것 같은데 바깥쪽 여백 혹은 마진이라고 하는 것이 더 쉽게 이해가 되겠습니다. 즉, 어떤 위젯이나 컨테이너의 테두리(Border) 바깥쪽으로 생기는 여백입니다.

• 비유: 우리 집(나의 상자) 담벼락과 이웃집(다른 상자) 담벼락 사이의 빈 공간(마당)입니다. 다른 요소들을 밀어내는 힘이라고 생각하시면 됩니다. 침대를 기준으로 마진은 벽과의 거리가 됩니다. 벽을 기준으로 하면 침대까지의 거리가 패딩이지요. 즉 침대 마진 1미터 = 벽 패딩 1미터 

• 언제 쓰나요?

  • 위의 컨테이너와 아래 컨테이너 사이가 너무 딱 붙어 있어서 50px 정도 사이를 띄워주고 싶을 때, 아래 컨테이너의 ‘위쪽(Top) 마진’에 50을 입력하여 위쪽 컨테이너를 밀어냅니다. (이때 스페이서 위젯을 쓰지 않는 것입니다!)

3. 엘리멘터에서 마진과 패딩 조작하기 (실전)

아무 위젯이나 캔버스에 올려두고, 좌측 패널의 [고급] 탭을 열어주세요.

⭐ 시니어의 꿀팁: 자물쇠(링크) 아이콘의 비밀 마진과 패딩 입력칸 오른쪽을 보면 작은 **’클립(또는 자물쇠)’ 모양의 아이콘(Link values together)**이 있습니다. 초보자들이 가장 많이 당황하는 부분입니다.

• 자물쇠가 잠겨 있을 때 (회색 배경): 위(Top), 오른쪽(Right), 아래(Bottom), 왼쪽(Left) 중 한 곳에만 숫자를 입력해도 네 방향 모두 똑같은 숫자가 동시에 들어갑니다. (상하좌우 동일한 여백을 줄 때 편합니다.)

• 자물쇠가 풀려 있을 때 (클릭해서 해제): 네 방향의 여백을 각각 다르게 줄 수 있습니다. (예: 위아래만 50px을 띄우고, 좌우는 0으로 두고 싶을 때 반드시 이 자물쇠를 클릭해서 풀어야 합니다!)

• 옵션순서는 위, 오른쪽, 아래, 왼쪽입니다. 12시를 기준으로 시계방향으로 돌아갑니다.

4. 여백 단위 이해하기 (PX vs %)

입력칸 옆에 보면 PX, %, EM, REM 같은 영어 단어들이 있습니다. 당장 다 아실 필요는 없고, 딱 두 가지만 기억하세요.

1. PX (픽셀): 가장 기본이 되는 절대적인 단위입니다. 모니터의 점 한 개 크기입니다. “무조건 50px 만큼 띄워라!”라고 단호하게 명령할 때 씁니다.

2. % (퍼센트): 화면 크기에 따라 유연하게 변하는 상대적인 단위입니다. “화면 전체 너비의 10%만큼만 띄워라!”라고 할 때 씁니다. 반응형 웹을 만들 때 종종 활용됩니다. 초반에는 주로 PX에 맞춰놓고 작업하시는 것이 안 헷갈립니다.

💡 오늘의 미션: 직접 해보기

캔버스에 ‘버튼’ 위젯을 하나 올려보세요.

1. 버튼의 [고급] 탭으로 가서 ‘패딩’의 자물쇠를 풀고, 위(20), 오른쪽(50), 아래(20), 왼쪽(50)을 입력해 보세요. 버튼이 넉넉하고 예뻐졌나요?

2. 그 버튼을 하나 더 복제해서 밑에 둡니다.

3. 아래쪽 버튼의 ‘마진’ 자물쇠를 풀고, 위(Top)에 숫자 30을 넣어보세요. 위의 버튼과 30px만큼 거리가 멀어지는 것을 확인할 수 있습니다.

이제 여러분은 어떤 위젯이든 원하는 위치에 1px의 오차도 없이 정확하게 배치할 수 있는 능력을 갖추셨습니다! 정말 고생 많으셨습니다.

다음 [레슨 8]에서는 오늘 배운 여백의 개념을 응용하여, PC뿐만 아니라 태블릿과 모바일 스마트폰 화면에서도 웹사이트가 깨지지 않고 완벽하게 보이도록 만드는 ‘반응형 웹 디자인 기초’를 다루겠습니다.