반응형 퍼센트 계산기
디자인 시안의 px 값을 브라우저 뷰포트 기준의 vw 단위로 변환하는 퍼블리싱 전용 도구입니다. 소형 PC·태블릿·모바일 분기별 vw 값을 자동으로 계산하고, CSS 코드를 바로 복사할 수 있습니다. 일괄 변환, vw→px 역계산, 증감 계산 기능도 지원합니다.
결과
min 뷰포트 지정 시: max(vw, minPx) 형식으로 하한선 자동 생성
반응형 퍼센트 계산기란?
퍼블리싱 작업 시 디자인 시안의 px 값을 브라우저 뷰포트 기준의 vw 단위로 변환하는 전문 도구입니다. 미디어쿼리 분기별로 자동 계산하며, max(vw, px) 형식으로 최소 크기를 보장하는 CSS 값을 바로 복사할 수 있습니다. 분기 설정은 퍼블리싱 섹션 전체에서 공유됩니다.
주요 기능
px → vw 변환
기본디자인 시안의 px 값을 입력하면 설정된 모든 분기에 맞는 vw 값을 한 번에 계산합니다.
- ✓디자인 기준(PC/Mobile)별 입력 지원
- ✓min 뷰포트 설정 시 max() 자동 생성
- ✓전체 복사로 CSS 주석 포함 일괄 복사
- ✓PC 고정값(px) 별도 지정 가능
일괄 변환
효율여러 px 값을 한꺼번에 입력해 분기별 결과를 표로 확인하고 복사합니다.
- ✓쉼표·줄바꿈·스페이스 자유 입력
- ✓전체 또는 특정 디자인 기준 선택
- ✓행별 개별 복사 지원
- ✓스페이서, 패딩, 폰트 등 대량 처리에 최적
vw → px 역계산
검증기존 vw 값이 각 분기 뷰포트에서 실제로 몇 px로 렌더링되는지 역산합니다.
- ✓설정한 분기의 Max/Min 뷰포트 기준 계산
- ✓코드 리뷰 및 QA 검증에 활용
- ✗max() 형식의 복합 값은 직접 해석 필요
증감 계산
보조디자인 수정 시 값의 변화율을 구하거나, 변화율 적용 결과를 미리 계산합니다.
- ✓이전/이후 값으로 변화율(%) 자동 계산
- ✓변화율 입력으로 결과값 역산
- ✓증가/감소 방향을 색상으로 직관적 표시
자주 묻는 질문
vw(viewport width)는 브라우저 창 너비의 1%에 해당하는 단위입니다. px는 고정 크기이므로 뷰포트가 달라지면 디자인 비율이 깨질 수 있지만, vw는 뷰포트에 비례하여 자동으로 크기가 조절됩니다.
예를 들어 1500px 뷰포트 기준 20px 텍스트를 1.33vw로 변환하면, 1200px 화면에서는 자동으로 약 16px로 축소되어 비율이 유지됩니다. 미디어쿼리 분기별로 px 값을 일일이 지정하지 않고 유동적인 레이아웃을 구현할 수 있어 퍼블리싱 작업 시간을 크게 단축할 수 있습니다. 단, vw만 사용하면 소형 화면에서 텍스트가 지나치게 작아질 수 있으므로 max(vw, px) 형식으로 최솟값을 지정하는 것이 좋습니다.