UIUX 디자인을 하는 디자이너는 피그마와 같은 디자인 프로그램을 사용합니다. 디자인 프로그램은 기본 단위가 픽셀 pixel 단위인데요, 반응형 디자인을 코딩할 때는 erm 단위를 사용합니다. 하지만 디자인 프로그램에서는 erm을 사용할 수가 없습니다. 퍼블리셔와 소통하기 위해 px 단위를 em 혹은 rem으로 변환해야하는 경우가 많습니다. 그럴때마다 계산을 하기 너무 어려운데요, 디자이너를 위해 계산을 쉽게 할 수 있는 방법을 소개해드리겠습니다.
px rem 단위 변환 글 목차
UIUX 디자인에서 px와 rem의 차이점
px(pixel) : 고정된 크기의 단위로 해상도에 따라 크기가 변경되지 않습니다. 그래서 픽셀로 작업을 하면 웹에서는 적당한 크기의 폰트도 모바일에서는 작게보일 수 있습니다.
rem(root em) : 기본 구성 크기(보통 16px)를 기준으로 상대적으로 크기를 결정하는 단위입니다. 예를 들어, 브라우저 기본 구성 크기가 16px일 때 16px는 1rem, 32px는 2rem이 됩니다.
PX to REM converter 사이트
https://nekocalc.com/px-to-rem-converter
이 사이트에서는 손쉽게 단위변환이 가능합니다. 왼쪽창에 픽셀단위 숫자를 넣으면 오른쪽에 자동으로 계산된 rem수치를 보여줍니다. 기본으로 16px를 기준으로 변환이 되며, 하단의 calculation based on a root font-size of 16pixel. 글귀의 연필 아이콘을 클릭하면 수정이 가능합니다.
px rem 단위 바로 변환하기
위에 알려드린 사이트에서도 px rem변환이 가능하지만 사이트 방문이 어려운 분들을 위해 이 글에서도 바로 계산이 가능하도록 아래 기능을 준비했습니다. 하단 입력창에 픽셀 단위 숫자를 입력하시면 자동으로 하단에 rem 값이 나오게 됩니다.
px to rem 변환기
px rem 단위 변환표
자주 사용하는 폰트 크기를 기준으로 변환표를 준비하였습니다. 계산이 필요없이 자주 사용하는 폰트 크기는 아래 표 내용을 참고하시면 됩니다. 모든 기준은 16px를 기준으로 변환하였습니다.
px to rem 변환표 (기본 폰트 크기 16px 기준)
| px | rem |
|---|---|
| 8px | 0.5rem |
| 10px | 0.625rem |
| 12px | 0.75rem |
| 14px | 0.875rem |
| 16px | 1rem |
| 18px | 1.125rem |
| 20px | 1.25rem |
| 24px | 1.5rem |
| 32px | 2rem |
| 48px | 3rem |
| 64px | 4rem |
| 80px | 5rem |
| 96px | 6rem |
px rem 단위 변환 유용한 팁 내용 잘 보셨나요? 디자인 팁 및 피그마 사용법 등 다양한 팁 글을 작성하고 있습니다. 디자인 관련하여 아래 글도 한번씩 보시는 걸 추천드립니다.