피그마에서 잰 픽셀은 그냥 숫자가 아니라 CSS로 옮겨질 약속입니다. 잰 값을 어떤 속성으로 심느냐에 따라 화면이 달라지니, 측정과 코드를 나란히 놓고 보겠습니다.
67.1 잰 간격을 gap, padding, margin으로 나누기
피그마에서 16px이라고 같은 16px이 아닙니다. 요소 안쪽 여백은 padding, 요소 사이 틈은 gap, 바깥으로 미는 거리는 margin입니다.
.card {
padding: 16px; /* 안쪽 여백 */
margin-bottom: 24px; /* 바깥으로 미는 거리 */
}
.card-list {
display: flex;
flex-direction: column;
gap: 12px; /* 요소 사이 틈 */
}
같은 숫자라도 세 속성은 서로 다른 곳을 움직입니다. 잴 때부터 이 틈이 안쪽인지 사이인지 바깥인지를 정해 두면 옮길 속성이 저절로 정해집니다.
67.2 8pt 스케일을 토큰으로 묶기
간격을 아무 값이나 쓰면 13px, 17px처럼 규칙 없는 숫자가 흩어집니다. 4의 배수로 오르는 사다리를 토큰으로 정해 두면 값에 질서가 생깁니다.
:root {
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-6: 24px;
--space-8: 32px;
}
피그마에서 잰 값이 15px이라면 사다리에 없는 어중간한 칸입니다. 가까운 칸으로 스냅해 16px로 맞추고, 토큰을 불러 씁니다.
.panel {
padding: var(--space-4); /* 16px */
gap: var(--space-3); /* 12px */
margin-bottom: var(--space-6); /* 24px */
}
토큰 하나만 고치면 화면 곳곳의 간격이 함께 움직입니다. 잰 값을 사다리에 스냅하는 이 한 걸음이 흩어진 숫자를 규칙으로 바꿉니다.
67.3 잰 크기를 width, height, min-height로
요소의 너비 200px은 그대로 고정일 수도, 부모를 채울 수도, 내용에 맞춰 늘 수도 있습니다. 잰 숫자 하나로는 이 셋이 구분되지 않습니다.
.avatar {
width: 48px;
height: 48px; /* 늘 고정인 크기 */
}
.content {
width: 100%; /* 부모를 채움 */
max-width: 640px;
}
.tag {
width: fit-content; /* 내용에 맞춰 */
}
피그마의 채움은 CSS의 flex-grow와 통합니다. 부모 너비를 나눠 갖는 요소라면 고정 px 대신 flex로 옮겨야 화면이 좁아져도 삐져나오지 않습니다.
.row {
display: flex;
gap: 12px;
}
.row .side {
width: 200px; /* 고정 폭 */
}
.row .main {
flex: 1; /* 남는 폭을 채움 */
}
높이를 딱 정하면 내용이 넘칠 때 잘립니다. 최소만 정해 두면 내용이 늘 때 함께 자라니, 버튼이나 카드에는 height 대신 min-height가 안전합니다.
.btn {
min-height: 44px; /* 손끝이 닿는 최소 */
padding: 0 16px;
}
67.4 margin 상쇄 함정과 gap으로 회피
세로로 쌓인 요소에 margin을 위아래로 주면 이웃한 margin이 서로 겹쳐 큰 쪽만 남습니다. 잰 값은 두 배인데 화면은 한 배로 붙는 함정입니다.
/* 나쁜 예: margin이 상쇄되어 24px이 아니라 12px */
.item {
margin-top: 12px;
margin-bottom: 12px;
}
부모에 flex와 gap을 쓰면 이 상쇄가 아예 일어나지 않습니다. gap은 오직 요소 사이에만 틈을 넣어, 잰 값이 그대로 화면에 떨어집니다.
/* 좋은 예: gap은 상쇄 없이 정확히 12px */
.list {
display: flex;
flex-direction: column;
gap: 12px;
}
.item {
margin: 0;
}
피그마의 오토 레이아웃 간격은 CSS의 gap과 같은 개념입니다. 오토 레이아웃으로 잰 틈은 margin이 아니라 gap으로 옮기는 편이 어긋남이 적습니다.
67.5 줄 사이 간격은 line-height로
글자 크기만 옮기고 줄 간격을 비워 두면 브라우저 기본값이 들어와 의도보다 빽빽해집니다. 피그마에서 잰 줄 높이를 line-height로 함께 넘겨야 합니다.
/* 나쁜 예: 줄 간격을 비워 둠 */
.para {
font-size: 16px;
}
/* 좋은 예: 잰 줄 높이를 비율로 */
.para {
font-size: 16px;
line-height: 1.6; /* 16px 기준 약 26px */
}
줄 높이를 24px처럼 고정으로 넣으면 글자 크기가 바뀔 때 따로 놉니다. 1.6 같은 비율로 두면 글자가 커질 때 줄 간격도 함께 늘어 자연스럽습니다.
67.6 카드 하나를 통째로 옮기기
낱낱의 값이 아니라 카드 하나를 재서 옮겨 보겠습니다. 피그마에서 잰 안쪽 여백 20px, 제목과 본문 사이 8px, 카드 사이 16px을 각각 제 속성에 배치합니다.
.feed {
display: flex;
flex-direction: column;
gap: var(--space-4); /* 카드 사이 16px */
}
.card {
display: flex;
flex-direction: column;
gap: var(--space-2); /* 제목-본문 사이 8px */
padding: 20px; /* 안쪽 여백 */
min-height: 80px;
}
안쪽 여백은 padding, 자식 사이 틈은 안쪽 gap, 카드끼리 틈은 바깥 gap으로 층이 나뉩니다. 세 간격이 서로 다른 자리에 있으니 나중에 하나만 바꿔도 다른 층은 흔들리지 않습니다.
67.7 중첩된 간격은 합으로 보인다
바깥 상자의 padding과 안쪽 상자의 margin이 겹치면, 화면에서는 둘을 더한 하나의 큰 틈으로 보입니다. 잰 값을 그대로 한 속성에 몰아넣으면 나중에 내용이 바뀔 때 틈이 어긋납니다.
/* 겉보기 32px = 바깥 20px + 안쪽 12px */
.outer {
padding: 20px;
}
.inner {
margin-top: 12px;
}
보이는 32px을 한 곳에 적지 말고, 어느 층에서 얼마가 왔는지 나눠 두면 구조가 살아 있습니다. 겹친 틈은 늘 여러 값의 합이라는 것을 기억하면 실수가 줄어듭니다.
67.8 정리
잰 값을 옮길 때는 세 가지만 챙기면 됩니다. 간격은 gap, padding, margin으로 나누고, 어중간한 숫자는 8pt 토큰으로 스냅하며, 크기는 고정인지 채움인지에 따라 속성을 고릅니다.
.summary {
display: flex;
gap: var(--space-4);
padding: var(--space-4);
min-height: 44px;
line-height: 1.6;
}
측정은 눈으로 하지만 옮기는 것은 규칙으로 합니다. 사다리와 gap을 손에 익히면 잰 값이 코드에서도 흐트러지지 않습니다.