계산기 · 2026년 7월 18일 · 읽는 시간 4분
px를 rem으로 바꿀 때마다 계산기 꺼내는 거 이제 그만
디자인 시안은 px인데 코드는 rem으로 써야 하고... 16으로 나누는 거 맞는데 왜 이게 맨날 귀찮냐.
이 상황 공감되면 계속 읽어봐
CSS 작업하다 보면 이런 순간들이 꼭 생긴다:
- 피그마 디자인은 px → 접근성 위해 rem으로 작성해야 할 때
- 반응형 레이아웃 짜다가 vw 계산 필요할 때 → 뷰포트 1440px 기준으로 360px는 몇 vw?
- em 값 결정해야 하는데 부모 폰트 크기 달라서 헷갈릴 때
- Tailwind 쓰다가 커스텀 값 px로 넣어야 할 때 역으로 변환
- 모바일/데스크톱 폰트 크기 조율할 때 px↔rem 왔다갔다
이게 진짜 자주 있는 일인데, 매번 계산기 앱 열어서 나누기 하는 게 은근히 시간 잡아먹는다. 특히 값 여러 개 한꺼번에 바꿔야 할 때.
기존 방법들의 문제
- 계산기 앱으로 직접 계산 → 오차 없는지 매번 확인해야 하고, 여러 값 처리하면 지침
- 구글 검색에서 "24px to rem" → 나오긴 나오는데 기준 폰트가 16px 고정이라 프로젝트 설정이 다르면 다시 계산
- 피그마 플러그인 → 설치해야 하고, 브라우저에서 작업할 때는 쓸 수 없음
- VSCode 확장 → 에디터에서만 작동, 빠른 단발성 변환엔 과함
- 직접 CSS 변수로 만들어두기 → 프로젝트 안에서는 좋은데 사전 계산이 필요한 상황엔 그래도 변환기가 필요함
결국 필요한 건 기준 폰트 크기를 내가 설정하고, 뷰포트도 내가 지정해서 변환해주는 웹 도구였다.
그래서 직접 만들었음
변환 지원 단위:
- px ↔ rem → 기준 폰트 크기 직접 설정 (기본 16px, 변경 가능)
- px ↔ em → 부모 요소 폰트 크기 기준으로 계산
- px ↔ vw / vh → 뷰포트 가로/세로 크기 입력하면 비율 계산
- px ↔ % → 부모 요소 크기 기준 퍼센트 변환
- pt ↔ px → 인쇄/앱 작업 시 포인트 단위 변환
주요 기능:
- 기준값 커스텀 → 기준 폰트 크기 10px, 14px, 16px, 18px 등 자유 입력
- 뷰포트 크기 설정 → 1280, 1440, 1920px 등 직접 지정
- 양방향 실시간 변환 → px 입력하면 rem 나오고, rem 입력하면 px로 역변환
- 결과 복사 버튼 → 클립보드에 바로 복사
- 일괄 변환 표 → 주요 px 값들(8, 12, 14, 16, 20, 24, 32, 48, 64px)에 대한 rem/em 값 한눈에 보기
CSS 단위, 언제 뭘 써야 하나
변환 도구 쓰면서 한 번쯤 짚고 넘어가면 좋은 부분:
- px → 고정 크기. 브라우저 폰트 크기 설정 변경해도 영향 안 받음. 아이콘, 보더, 그림자 등 픽셀 단위로 제어해야 할 때 적합.
- rem → 루트(
html) 폰트 크기 기준. 접근성 권장 단위. 브라우저에서 폰트 크기 키워도 비율대로 커짐. 대부분 텍스트/여백에 권장. - em → 부모 요소 폰트 크기 기준. 중첩되면 계산 복잡해질 수 있어서 주의 필요. 컴포넌트 내부에서 상대적 크기 줄 때 유용.
- vw / vh → 뷰포트 크기 기준. 전체 화면 채우는 히어로 섹션, 풀페이지 레이아웃 등에 사용. 작은 텍스트에 쓰면 너무 작아지거나 커질 수 있어서 clamp()랑 같이 쓰는 경우 많음.
- % → 부모 요소 기준 비율. 반응형 레이아웃에서 폭 지정할 때 자주 사용.
실제로 써보니
좋은 점:
- 기준 폰트 크기 바꿀 수 있어서 프로젝트 설정 다른 경우도 커버됨
- 일괄 변환 표 → 매번 계산 안 해도 되고, 주요 값 한 번에 파악 가능
- 양방향 변환 → rem → px 역으로도 되니까 기존 코드 분석할 때도 유용함
- 복사 버튼 → 결과값 바로 코드에 붙여넣기 가능
한계:
- CSS clamp() 같은 복합 함수 자동 생성은 없음
- Sass/Less 변수 형태로 내보내는 기능은 없음
- 실제 렌더링 결과 미리보기는 없음 → 어디까지나 계산기
사용법
- 기준 폰트 크기 설정 (기본 16px, 프로젝트 다르면 변경)
- 변환할 값 입력 (px 또는 rem/em 등)
- 실시간으로 변환 결과 확인
- 복사 버튼 눌러서 바로 코드에 사용
- vw/vh 변환 필요하면 뷰포트 크기도 입력
10초면 된다. 계산기 열 시간에 이미 결과 나와있음.
써보기
px 계산 매번 머리로 하던 거 이제 그냥 여기 와서 넣으면 됨.
#CSS단위변환 #px변환rem #CSS계산기 #프론트엔드 #웹개발 #반응형디자인