피그마(Figma)나 제플린(Zeplin)에서 건네받는 데스크톱 시안의 90%는 1440px 너비를 기준으로 합니다. 이 시안을 바탕으로 코딩할 때, 고정 PX를 쓰면 1920px 모니터에서는 양옆이 푕해 보이고, 작은 노트북에서는 가로 스크롤이 생길 수 있습니다. 이를 해결하기 위한 실무 변환법을 알아봅시다.
1. 왜 1440px이 기준인가요?
과거에는 1920px(FHD)을 기준으로 많이 잡았지만, 맥북 프로나 일반적인 랩탑 사용자의 통계적 비중이 높아지면서 1440px이 표준적인 데스크톱 기준점이 되었습니다. 또한 1440px 시안은 1920px로 확장될 때나 1024px로 축소될 때 모두 디자인적 균형을 맞추기 가장 유리한 해상도입니다.
2. 기본 계산 공식
1440px 기준의 시안에서 특정 요소의 크기(px)를 VW로 바꾸는 공식은 다음과 같습니다.
예를 들어, 시안에서 제목 폰트가 48px라면:
- 48 / 1440 = 0.0333...
- 0.0333 * 100 = 3.333vw
3. 실무 워크플로우 (Step by Step)
Step 1: 기준점 설정
CSS 작업 시작 전, 디자인 시안의 전체 너비가 정말 1440px인지 확인합니다. 간혹 1280px이나 1920px인 경우가 있으니 반드시 확인 후 변환 도구의 기준값(Viewport Width)을 설정하세요.
Step 2: 변환 도구 활용
매번 계산기를 두드리는 것은 비효율적입니다. PX to VW 변환기의 Viewport Width 칸에 1440을 입력하고, 시안에 적힌 PX 값을 입력해 즉시 결과 코드를 복사하세요.
💡 실무 팁: 소수점 관리
VW 변환 시 소수점이 길게 나오는 경우가 많습니다. 보통 소수점 3자리까지 유지하는 것이 브라우저 간 렌더링 오차를 줄이는 데 가장 효과적입니다. (예: 3.333vw)
Step 3: 임계점 설정 (Max-width)
1440px 시안 기준으로 VW 코딩을 마쳤다면, 화면이 무한히 커지는 것을 방지해야 합니다. 1920px 이상의 디스플레이에서도 디자인 의도를 유지하려면 최상위 컨테이너에 max-width: 1440px(혹은 1920px)과 margin: 0 auto를 적용하는 것이 국룰입니다.
4. 변환하면 안 되는 것들 (Don'ts)
- 간격(Gutter): 좌우 여백은 VW가 좋지만, 요소 간의 아주 작은 간격(4px, 8px 등)은 PX가 더 깔끔합니다.
- 미세한 테두리: 1px 보더는 1px로 두세요.
결론
1440px 기준 변환은 현대 웹 퍼블리싱의 표준입니다. 올바른 계산법과 도구를 활용하면 어떤 디바이스에서도 디자이너의 의도를 완벽하게 구현할 수 있습니다.