피그마에서 뽑은 색과 글자는 결국 CSS 값으로 굳습니다. 어떤 형식으로 적고 어떻게 묶느냐에 따라 뒷일이 달라지니, 추출한 값을 코드로 옮기는 길을 짚어 보겠습니다.
68.1 색값을 hex, rgb, hsl로 적기
피그마가 알려 주는 색은 같은 색이라도 세 가지 표기로 적을 수 있습니다. 짧게는 hex, 채널이 또렷한 rgb, 밝기를 조절하기 좋은 hsl입니다.
.brand {
color: #2563eb; /* hex */
color: rgb(37, 99, 235); /* rgb */
color: hsl(221, 83%, 53%); /* hsl */
}
세 줄은 완전히 같은 파랑입니다. 밝기만 살짝 낮춘 변형이 필요하면 hsl의 마지막 숫자만 줄이면 되니, 색 계열을 다룰 때 편합니다.
68.2 투명도는 rgba나 8자리 hex로
반투명한 막이나 그림자는 색값만으로 표현되지 않습니다. 피그마의 불투명도 40퍼센트는 알파 채널로 옮겨야 은은함이 살아납니다.
.overlay {
background: rgba(0, 0, 0, 0.4); /* 검정 40% */
}
.overlay-alt {
background: #00000066; /* 8자리 hex, 같은 40% */
}
rgba의 네 번째 값과 8자리 hex의 끝 두 자리가 같은 투명도를 뜻합니다. 색값만 넘기고 알파를 빠뜨리면 은은한 막이 시커먼 덩어리로 굳으니 꼭 함께 적습니다.
68.3 흩뿌린 색을 토큰으로 모으기
같은 파랑을 여기저기 hex로 직접 박으면, 나중에 색을 바꿀 때 모든 자리를 뒤져야 합니다. 이름을 붙여 한곳에 모으면 한 줄로 전체가 바뀝니다.
/* 나쁜 예: 값이 흩뿌려짐 */
.btn { background: #2563eb; }
.link { color: #2563eb; }
.badge { border-color: #2563eb; }
같은 값이 세 곳에 흩어져 있습니다. 강조 색이라는 이름 하나로 묶고, 그 이름을 불러 쓰면 값이 한 자리에만 남습니다.
/* 좋은 예: 토큰으로 모음 */
:root {
--color-accent: #2563eb;
--color-text: #1f2937;
}
.btn { background: var(--color-accent); }
.link { color: var(--color-accent); }
.badge { border-color: var(--color-accent); }
이제 브랜드 색이 바뀌어도 토큰 한 줄만 고치면 됩니다. 피그마의 색 스타일 이름을 이 토큰 이름과 똑같이 맞춰 두면 옮길 때 헷갈리지 않습니다.
68.4 폰트 성질을 값 그대로 옮기기
글자는 글꼴 하나로 정해지지 않습니다. 피그마가 보여 주는 크기, 굵기, 줄 높이, 자간을 각각 제 속성으로 옮겨야 같은 글자가 나옵니다.
.title {
font-family: "Pretendard", sans-serif;
font-size: 24px;
font-weight: 600;
line-height: 1.4;
letter-spacing: -0.02em;
}
굵기는 특히 오해가 잦습니다. 피그마의 Semibold는 700이 아니라 600이니, 굵게가 아니라 정확한 단계 숫자로 옮겨야 무게가 그대로 전해집니다.
/* 나쁜 예: 굵기를 뭉뚱그림 */
.title { font-weight: bold; } /* 700으로 굳음 */
/* 좋은 예: 잰 단계 그대로 */
.title { font-weight: 600; } /* Semibold */
자간도 피그마 값 그대로 옮깁니다. 픽셀로 보이는 자간은 em으로 환산하면 글자 크기가 변해도 비율이 유지되니, 제목에는 살짝 좁힌 -0.02em이 자주 쓰입니다.
68.5 px를 rem으로 환산하는 이유
피그마는 px로 값을 보여 주지만, 글자 크기는 rem으로 옮기는 편이 좋습니다. 사용자가 브라우저 기본 글자 크기를 키우면 rem은 함께 커지기 때문입니다.
/* 기준 16px = 1rem */
.body-text {
font-size: 1rem; /* 16px */
}
.small {
font-size: 0.875rem; /* 14px */
}
.heading {
font-size: 1.5rem; /* 24px */
}
환산은 잰 px을 16으로 나누면 됩니다. 14px은 0.875rem, 24px은 1.5rem입니다. 고정 px으로 박으면 사용자가 글자를 키워도 꿈쩍 않으니, 본문 글자는 rem이 안전합니다.
68.6 텍스트 스타일을 클래스로 묶기
제목마다 크기와 굵기와 줄 높이를 따로 적으면 값이 흩어집니다. 피그마의 텍스트 스타일 하나를 클래스 하나로 묶으면 이름만 붙여 재사용합니다.
.heading-lg {
font-size: 1.5rem;
font-weight: 700;
line-height: 1.3;
letter-spacing: -0.02em;
}
.heading-sm {
font-size: 1.125rem;
font-weight: 600;
line-height: 1.4;
}
여러 속성을 한 줄로 줄이는 font 단축도 있습니다. 순서는 굵기, 크기와 줄 높이, 글꼴이며 크기와 글꼴은 반드시 있어야 합니다.
.caption {
font: 400 0.875rem/1.5 "Pretendard", sans-serif;
}
슬래시 앞이 글자 크기, 뒤가 줄 높이입니다. 단축은 짧아서 편하지만 자간은 담지 못하니, 자간이 필요하면 letter-spacing을 따로 적어 줍니다.
68.7 의미로 이름 붙이고 어두운 화면까지
토큰 이름을 파랑처럼 색으로 지으면, 나중에 그 색이 초록으로 바뀔 때 이름이 어긋납니다. 쓰임으로 이름을 지어야 값이 바뀌어도 이름은 그대로입니다.
:root {
--bg: #ffffff;
--text: #1f2937;
--text-muted: #6b7280;
}
어두운 화면은 같은 이름에 다른 값을 넣어 갈아 끼웁니다. 클래스가 아니라 토큰만 바꾸니 나머지 CSS는 손대지 않습니다.
@media (prefers-color-scheme: dark) {
:root {
--bg: #111827;
--text: #f9fafb;
--text-muted: #9ca3af;
}
}
body {
background: var(--bg);
color: var(--text);
}
밝은 배경에서 잘 읽히던 글자색이 어두운 배경에서 흐려지지 않는지 두 경우 모두 대비를 확인합니다. 어두운 화면은 배경만 검게 칠하는 일이 아니라 그 위의 색을 다시 헤아리는 일입니다.
68.8 정리
색과 글자를 옮길 때는 값을 흩뿌리지 않는 것이 핵심입니다. 색은 토큰으로, 글자는 클래스로 묶고, 투명도는 알파로, px 글자는 rem으로 적습니다.
:root {
--color-accent: #2563eb;
}
.heading-lg {
color: var(--color-accent);
font-size: 1.5rem;
font-weight: 700;
line-height: 1.3;
}
추출의 목표는 값을 복사하는 것이 아니라 이름을 잇는 것입니다. 피그마의 스타일 이름과 CSS의 토큰 이름이 맞물리면, 색 하나 글자 하나가 흔들림 없이 건너옵니다.