피그마(Figma)에서 건네받는 데스크톱 시안은 1440px 너비인 경우가 많습니다. 이 시안을 고정 px로 그대로 코딩하면 1920px 모니터에서는 양옆이 비어 보이고, 작은 노트북에서는 가로 스크롤이 생길 수 있습니다. 이를 해결하기 위한 실무 변환법을 알아봅니다.
1. 왜 1440px이 기준인가요?
1440px은 피그마 기본 데스크톱 프레임(1440×1024)이자 예전 13인치 맥북의 기본 해상도(1440×900)라서 데스크톱 시안 기준으로 널리 쓰입니다. 실제 사용자 화면은 1920px, 1536px(1920px 노트북을 125% 배율로 쓰는 경우), 1366px 등 다양하므로, 1440px 시안을 기준으로 위아래 화면에 맞춰 늘리고 줄이는 방식이 실무에서 균형이 좋습니다.
2. 기본 계산 공식
1440px 기준의 시안에서 특정 요소의 크기(px)를 VW로 바꾸는 공식은 다음과 같습니다.
(요소의 PX 값 / 시안 전체 너비 1440) * 100 = 결과 VW예를 들어, 시안에서 제목 폰트가 48px이라면:
- 48 / 1440 = 0.0333...
- 0.0333 * 100 = 3.333vw
같은 48px도 1920px 시안 기준이면 2.5vw입니다. 기준 너비가 다르면 vw 값이 완전히 달라지므로, 1920px 시안을 받았다면 1920px 기준 변환표를 쓰세요. 1440px 기준 3.333vw를 1920px 화면에 그대로 적용하면 약 64px이 됩니다.
3. 실무 워크플로우 (Step by Step)
Step 1: 기준점 설정
CSS 작업 시작 전, 디자인 시안의 전체 너비가 정말 1440px인지 확인합니다. 간혹 1280px이나 1920px인 경우가 있으니 반드시 확인한 뒤 변환 도구의 기준 너비를 설정하세요.
Step 2: 변환 도구 활용
매번 계산기를 두드리는 것은 비효율적입니다. PX to VW 변환기에서 기준 너비 프리셋 1440을 누르고 시안의 px 값을 입력하면 바로 vw 값이 나옵니다. 결과를 클릭하면 복사됩니다. 자주 쓰는 값은 1440px 기준 변환표에서 한눈에 볼 수 있습니다.
여러 줄의 CSS는 CSS 일괄 변환에 붙여넣으면 한 번에 변환됩니다. @media 조건은 그대로 두며, "1px 이하는 px 유지"를 켜면 1px 테두리 같은 값은 px로 남습니다.
Step 3: 최대 크기 제한
1440px 시안 기준으로 VW 코딩을 마쳤다면, 화면이 무한히 커지는 것을 막아야 합니다. 최상위 컨테이너에 max-width: 1440px(혹은 1920px)과 margin: 0 auto를 적용해 레이아웃 폭을 묶고, vw로 지정한 크기에도 상한을 두세요. vw는 컨테이너가 아니라 화면 너비 기준이라, 컨테이너 폭만 막아서는 글자가 계속 커집니다(3.333vw는 2560px 화면에서 약 85px).
/* 가장 간단한 방법: 1440px 이상에서 48px(3rem) 고정 */
.title { font-size: min(3.333vw, 3rem); }
/* 권장: 768px에서 32px → 1440px에서 48px, 그 밖에서는 고정 */
.title { font-size: clamp(2rem, 0.8571rem + 2.381vw, 3rem); }두 번째 방식은 1024px 화면에서 약 38.1px이 되며, rem을 섞어 사용자 글꼴 설정도 반영합니다. 값은 Clamp 생성기로 바로 계산할 수 있습니다.
4. 변환하면 안 되는 것들 (Don'ts)
- 간격(Gutter): 좌우 여백은 VW가 좋지만, 요소 간의 아주 작은 간격(4px, 8px 등)은 PX가 더 깔끔합니다.
- 미세한 테두리: 1px 보더는 1px로 두세요.
그 밖에 VW를 피해야 하는 경우는 PX를 VW로 바꾸면 안 되는 6가지 경우에 정리했습니다.
결론
1440px 기준 변환은 데스크톱 퍼블리싱에서 가장 흔한 방식입니다. 다만 1440px 기준 vw 값은 모바일에서 너무 작아지므로(48px → 375px 화면에서 12.5px), 1024px 이하는 모바일 시안 기준으로 따로 변환하고 글자에는 clamp()로 범위를 두세요.