기본 폰트와 화면 너비를 기준으로 픽셀을 rem·vw로 바꾸고, 1x·2x·3x 크기도 함께 볼 수 있습니다.
💡 변환 결과
• 2x (@2x / xhdpi): 0 px
• 3x (@3x / xxhdpi): 0 px
추천 font-size: 0 rem
📊 적용 안내
* px는 고정 크기입니다. rem은 루트 폰트에, vw는 화면 너비에 비례합니다. 글자·간격은 rem, 화면 비율에 맞출 박스 너비는 vw를 쓰는 경우가 많습니다.
💡 rem 변환으로 피그마 px를 CSS에 맞추기
피그마 시안은 대부분 px로 잡혀 있습니다. 그대로 코딩하면 화면마다 글자·여백이 딱딱하게 고정되어, 폰트 확대나 좁은 기기에서 어색해지기 쉽습니다. rem은 html(루트) 글자 크기를 1로 보고 배수를 쓰고, vw는 화면 가로를 100등분한 값입니다. 이 rem 변환 도구는 루트 px·디자인 가로폭·타겟 px만 넣으면 rem·vw와 1x·2x·3x 픽셀을 바로 보여 줍니다.
기본값은 루트 16px, 기준 폭 1920px입니다. 모바일 시안이면 기준 폭을 360~390 등으로 바꿔 vw를 다시 계산하면 됩니다. rem 변환과 vw 변환을 한 화면에서 같이 보면, 같은 px가 글자용·레이아웃용으로 어떻게 갈리는지 비교하기 쉽습니다.
📊 자주 쓰는 크기 (참고표)
루트 16px, PC 1920px / 모바일 360px 기준의 예시입니다. 위 입력값을 바꾸면 결과는 그에 맞게 달라집니다.
| 시안 크기 | REM (16px) | VW (1920px) | VW (360px) |
|---|---|---|---|
| 12 px | 0.75 rem | 0.625 vw | 3.333 vw |
| 16 px | 1.00 rem | 0.833 vw | 4.444 vw |
| 24 px | 1.50 rem | 1.250 vw | 6.666 vw |
| 32 px | 2.00 rem | 1.666 vw | 8.888 vw |
📌 rem과 vw를 나누어 쓰기
rem은 사용자가 브라우저 글자 크기를 키우면 함께 커져 접근성에 유리합니다. 제목·본문·패딩처럼 “글자 체계”에 묶인 값에 잘 맞습니다. vw는 화면이 넓어질수록 같이 커지므로, 히어로 타이틀 크기나 카드 가로폭처럼 화면 비율에 맞출 때 씁니다. 둘을 한 요소에 섞을 때는 clamp 등으로 최소·최대를 두는 경우가 많습니다.
공식은 간단합니다. rem = 타겟 px ÷ 루트 px, vw = (타겟 px ÷ 기준 가로폭) × 100. 이 페이지는 그 값을 바로 복사할 수 있게 보여 줍니다. rem 변환 결과를 스타일시트에 붙인 뒤에는 개발자 도구로 실제 계산된 px도 한 번 확인하면, 루트 설정이 프로젝트와 맞는지 금방 알 수 있습니다.
⚙️ 1x·2x·3x 이미지 크기
레티나처럼 밀도가 높은 화면에서는 같은 논리 픽셀이라도 더 많은 물리 픽셀이 필요합니다. 시안에 적힌 아이콘이 24px라면 @2x는 48px, @3x는 72px 자산을 준비하는 식입니다. 아래 배수표는 입력한 타겟 px를 1·2·3배한 참고값입니다. SVG를 쓰면 배수 자산을 줄일 수 있지만, 래스터 아이콘·사진을 쓸 때는 배수 준비가 여전히 필요합니다.
🚨 이용 시 주의사항
프로젝트에서 html { font-size: 62.5%; }처럼 루트를 바꿔 두었다면, 위 기본 16px 대신 실제 루트 px를 넣어야 맞습니다. 브라우저가 너무 작은 글자를 강제로 키우는 경우도 있어, 적용 후 실제 화면에서 한 번 확인하는 편이 안전합니다. vw만으로 글자 크기를 잡으면 큰 모니터에서 지나치게 커질 수 있으니 rem과 함께 쓰는 것을 권합니다.
