피그마에서는 대부분 px(픽셀)로 디자인하지만 실제 웹에서는 모든 크기를 픽셀로 고정하지 않습니다.
버튼과 아이콘처럼 정확한 크기가 필요한 요소는 px이 적합하고, 부모 영역에 맞춰 늘어나는 레이아웃은 %, 화면 크기를 기준으로 하는 영역은 vw와 vh를 활용할 수 있습니다.
rem은 하나의 기준값을 바탕으로 글자와 여백의 스케일을 관리하기 좋아 디자인 시스템과 반응형 협업에서도 알아두면 유용합니다.
웹에서는 왜 여러 단위를 사용할까?
웹사이트는 모니터, 태블릿, 스마트폰처럼 서로 다른 크기의 화면에서 열립니다.
따라서 모든 값을 하나의 고정된 숫자로 만들면 화면이 달라졌을 때 레이아웃이 어색해질 수 있습니다.
디자이너가 꼭 CSS를 직접 작성할 필요는 없지만, 어떤 값은 고정하고 어떤 값은 화면에 따라 변해야 하는지 이해하면 개발자와 훨씬 정확하게 소통할 수 있습니다.
자주 사용하는 웹 단위 한눈에 보기
| 단위 | 기준 | 주로 사용하는 경우 |
|---|---|---|
px | 고정된 크기 | 버튼, 아이콘, 정밀한 간격 |
em | 부모 요소 | 컴포넌트 내부의 상대적인 크기 |
rem | 문서의 루트 기준 | 폰트, 여백, 디자인 시스템 |
% | 부모 영역 | 반응형 너비, 영역 분할 |
vw | 브라우저 너비 | 화면 너비 기준 크기 |
vh | 브라우저 높이 | 화면 높이 기준 섹션 |
pt는 인쇄에서 주로 사용하는 단위이기 때문에 웹디자인에서는 거의 사용하지 않습니다.
px: 정확하게 고정해야 할 때
픽셀은 디자이너에게 가장 익숙한 단위입니다.
피그마 역시 픽셀 기반이기 때문에 실제 디자인 작업에서는 대부분 px로 크기를 지정합니다.
예를 들어 다음과 같은 요소입니다.
- 버튼
120 × 48 - 아이콘
24 × 24 - 요소 사이 간격
20px
버튼과 아이콘처럼 화면이 바뀌더라도 일정한 크기와 정밀한 간격이 필요한 요소에는 px이 이해하기 쉽고 안전합니다.
중요한 것은 픽셀을 사용하면 안 된다는 것이 아니라, 모든 것을 픽셀로 고정하지 않는 것입니다.
em과 rem은 무엇이 다를까?
em은 부모 요소의 크기를 기준으로 계산됩니다.
예를 들어 부모의 글자 크기가 20px이라면 1em은 해당 영역에서 20px을 기준으로 합니다.
컴포넌트의 글자가 커질 때 내부 패딩도 함께 커지게 만드는 식으로 활용할 수 있지만, 부모의 영향을 계속 받기 때문에 구조가 복잡해지면 계산과 관리가 어려워질 수 있습니다.
반면 rem은 문서 전체의 기준값을 사용합니다.
예를 들어 기준을 16px로 잡았다면:
1rem→ 16px2rem→ 32px3rem→ 48px
기준값이 바뀌면 rem으로 설정된 요소들도 함께 변경됩니다.
강의에서는 직접 만든 rem 계산기 예제를 통해 기준값을 16에서 18, 14 등으로 변경했을 때 폰트와 패딩이 함께 커지고 작아지는 모습을 확인합니다.
이런 특성 때문에 rem은 폰트 스케일과 여백을 일정한 규칙으로 관리하는 디자인 시스템에서 이해해두면 좋은 단위입니다.
%: 부모 영역을 기준으로 나누기
퍼센트는 부모 요소의 크기를 기준으로 계산됩니다.
예를 들어 콘텐츠 영역의 최대 폭이 1200px이고 내부의 두 영역을 각각 50%로 나누면 약 600px씩 사용할 수 있습니다.
그래서 다음과 같은 구조에 잘 어울립니다.
- 이미지와 텍스트를 50:50으로 배치
- 카드의 너비를 부모 영역에 맞춰 조절
- 콘텐츠 영역을 화면에 맞게 채우기
강의에서는 콘텐츠 폭은 최대 1200px로 제한하면서 실제 너비는 100%로 사용해, 화면이 좁아질 때 자연스럽게 함께 줄어드는 예제를 설명합니다.
vw와 vh: 브라우저 화면 자체를 기준으로
vw와 vh는 부모 요소가 아니라 현재 브라우저 화면(Viewport)을 기준으로 합니다.
vw→ Viewport Widthvh→ Viewport Height
예를 들어 히어로 영역의 높이를 70vh로 지정하면 사용하는 화면 높이의 약 70%를 차지합니다.
100vh라면 화면 높이를 가득 채우는 구조가 됩니다.
여기서 %와 vh의 차이가 중요합니다.
70%는 **부모 요소의 70%**이고, 70vh는 **현재 화면 높이의 70%**입니다.
따라서 “로그인 화면을 화면 높이만큼 채워주세요”처럼 브라우저 자체의 크기가 중요한 경우에는 vh의 개념을 이해하고 있으면 개발자에게 의도를 더 정확하게 설명할 수 있습니다.
화면을 채우되 일부 공간은 빼고 싶다면?
실무에서는 이런 요청도 자주 생깁니다.
화면은 꽉 채우되 헤더 높이만큼은 빼주세요.
또는:
화면 높이를 채우되 아래에 150px 정도의 여백을 남겨주세요.
이 경우 단순한 고정 높이를 지정하기보다 전체 화면 높이를 기준으로 필요한 영역을 제외하는 방식으로 구현할 수 있습니다.
디자이너가 정확한 CSS 문법을 외울 필요는 없지만, “고정 800px”보다 “화면 높이에서 헤더만큼 제외”라고 전달하는 편이 훨씬 명확합니다.
결국 무엇을 사용하면 될까?
디자인 작업 자체는 여전히 px로 해도 됩니다.
대신 개발 결과가 어떻게 변해야 하는지를 생각할 때는 다음처럼 구분하면 이해하기 쉽습니다.
정확하게 유지되어야 하는 요소
→ px
버튼, 아이콘, 작은 간격처럼 크기가 명확한 요소
하나의 기준으로 스케일을 관리하고 싶은 경우
→ rem
폰트와 여백, 디자인 시스템
부모 영역 안에서 비율로 나누고 싶은 경우
→ %
콘텐츠 영역, 이미지, 컬럼
브라우저 화면 자체를 기준으로 하고 싶은 경우
→ vw, vh
풀스크린 화면, 히어로 섹션, 화면 높이를 채우는 로그인 페이지
디자이너가 기억하면 좋은 세 가지
첫째, 피그마에서 px로 디자인하는 것은 자연스럽습니다.
둘째, 반응형 웹과 개발 협업을 한다면 rem이 어떤 방식으로 스케일을 만드는지 정도는 이해해두는 것이 좋습니다.
셋째, 화면 전체를 채우거나 큰 영역이 유연하게 변해야 한다면 고정 픽셀보다 %, vw, vh 같은 비율 단위를 생각해야 합니다.
웹의 단위는 단순한 숫자 표기법이 아닙니다.
화면이 달라져도 디자인 의도를 안정적으로 유지하기 위한 방법이라고 이해하면 훨씬 쉽습니다.
자주 묻는 질문
웹디자인할 때 px를 사용하면 안 되나요?
아닙니다. 피그마를 비롯한 디자인 툴은 픽셀 기반이기 때문에 디자인 작업에서는 px를 자연스럽게 사용합니다. 중요한 것은 모든 영역을 고정된 px로만 생각하지 않는 것입니다.
em과 rem의 차이는 무엇인가요?
em은 부모 요소의 크기를 기준으로 하고, rem은 문서 전체의 루트 값을 기준으로 합니다.
%와 vh는 무엇이 다른가요?
%는 부모 요소를 기준으로 하고, vh는 현재 브라우저 화면 높이를 기준으로 합니다.
디자이너도 rem을 알아야 하나요?
직접 코딩하지 않더라도 폰트와 간격의 스케일이 어떻게 관리되는지 이해하면 디자인 시스템과 개발 협업에 도움이 됩니다.
