CSS 단위 변환기이란?
CSS는 px, pt 같은 절대 단위와 rem, em, vw, vh, % 같은 상대 단위 등 여러 크기 단위를 지원합니다. 상대 단위는 반응형이고 접근성 있는 디자인에 필수적이지만(특히 rem은 사용자의 브라우저 글꼴 크기 설정을 존중합니다), 결과가 루트 글꼴 크기, 현재 요소의 글꼴 크기, 또는 뷰포트 크기 같은 맥락에 따라 달라지기 때문에 머릿속으로 변환하기가 정말 어렵습니다.
이 변환기는 그 계산을 대신 해줍니다: 기준 글꼴 크기, 뷰포트 크기, 변환할 값을 설정하면 다른 모든 단위로의 동등한 값을 즉시 확인할 수 있습니다 — 디자인 시안의 픽셀 측정값을 반응형 rem/vw 값으로 옮기거나, 기존 CSS 규칙이 화면에서 실제로 어떻게 렌더링되는지 다시 확인할 때 유용합니다.
이 계산기를 사용해야 할 때
- 프로젝트를 시작하기 전에 도구 비용을 평가해야 할 때
- 다른 유사 도구와 결과를 비교할 때
- 다양한 시나리오에서 도구 사용 방법을 배울 때
- 팀이나 고객과 결과를 공유할 때
- 도구 계산의 정확성을 확인할 때
- 특정 문제에 대한 빠르고 쉬운 해결책을 찾을 때
단계:
- 변환하려는 값을 입력하고 시작 단위를 선택하세요.
- 기준 글꼴 크기를 설정하세요(기본값은 브라우저 표준인 16px입니다).
- vw/vh 변환의 경우 원하는 뷰포트 너비와 높이를 입력하세요.
- 다른 모든 단위로의 동등한 값을 즉시 확인하세요.
공식
1rem = 1em = 기준 글꼴 크기 (기본값 16px)
1pt = 96/72 px ≈ 1.333px
1vw = 뷰포트 너비 / 100
1vh = 뷰포트 높이 / 100
1% = 기준값 / 100
사용 사례
- 디자이너의 픽셀 기반 Figma/Sketch 사양을 접근성 있는 CSS용 rem 값으로 변환
- vw 기반 반응형 글꼴 크기가 특정 화면 너비에서 실제로 어떻게 렌더링되는지 확인
- 레거시 pt 기반 인쇄물이나 이메일 CSS를 웹 표준 px 또는 rem으로 변환
- 디자인 시스템의 간격 스케일이 단위 간에 깔끔하게 맞아떨어지는지 감사
- 개발자 도구를 열지 않고 코드 리뷰 중 CSS 값을 빠르게 검증
주요 이점
- 7개의 일반적인 CSS 단위를 한 곳에서 모두 변환
- 고정된 가정이 아니라 실제 기준 글꼴 크기와 뷰포트 사용
- 입력하는 즉시 결과 표시 — 브라우저 개발자 도구를 열 필요 없음
- 무료, 가입 불필요, 브라우저에서 전적으로 실행
전문가 팁
- 중첩된 컴포넌트에서 예상치 못한 누적을 피하려면 글꼴 크기에 em보다 rem을 선호하세요
- 대상 브라우저가 지원한다면 모바일 전체 화면 레이아웃에는 vh 대신 dvh/svh를 사용하세요
- rem 변환이 예측 가능하게 유지되도록 디자인 시스템 전체에서 일관된 기준 글꼴 크기를 유지하세요
- 픽셀 완벽한 디자인을 옮길 때는 간격은 rem으로 변환하되, 테두리 두께 같은 세밀한 요소는 px로 유지하세요
피해야 할 일반적인 실수
- 루트 글꼴 크기가 변경되었는지 확인하지 않고 1rem이 항상 16px이라고 가정
- 브라우저 주소창 동작을 고려하지 않고 모바일 전체 높이 레이아웃에 vh 사용
- em 기반 글꼴 크기를 중첩시켜 놓고 예상치 못하게 누적되는 것에 당황
- 동일한 컴포넌트 안에서 px와 rem을 일관성 없이 혼용해 접근성 스케일링을 깨뜨림
주요 용어 설명
- 루트 글꼴 크기: html 요소에 설정된 글꼴 크기로, 모든 rem 단위의 기준이 됩니다.
- 뷰포트(Viewport): 브라우저 창에서 보이는 웹페이지 영역
- 절대 단위: px나 pt처럼 어떤 맥락과도 무관하게 고정된 실제 크기를 갖는 단위
- 상대 단위(Relative unit): rem, em, vw, %처럼 크기가 다른 값에 따라 달라지는 단위
관련 개념
예시
16px 기준 글꼴 크기에서 1.5rem은 24px로 변환됩니다. 1440px 뷰포트 너비에서 5vw는 72px로 변환됩니다.
결과 해석 방법
이 도구는 입력을 기반으로 상세한 결과를 표시합니다. 숫자를 해석하고 그에 따라 결정을 내리는 방법을 이해하기 위해 각 섹션을 주의 깊게 검토하세요.
도구 작동 방식이나 특정 결과 해석에 대한 질문이 있으시면 아래 FAQ 섹션을 참조하거나 지원팀에 문의하세요.