웹과 앱 개발에서의 디자인시 절대 단위와 상대 단위를 사용에 대해

웹과 네이티브 앱 개발에서 단위 선택은 접근성, 반응성, 유지보수성에 큰 영향을 미칩니다. 특히 일부 디자이너들은 “px 같은 절대 단위는 무조건 안 된다!”고 생각해 **상대 단위(em, rem)**만 고집하기도 하는데, 이 역시 과도하게 사용하면 사용자 설정 글자 확대 시 레이아웃이 깨지는 문제가 발생할 수 있습니다.

이번 포스팅에서는:

• 웹(CSS) 에서 주로 쓰이는 px, em, rem
• 안드로이드(Android) 에서 쓰이는 dp(density‑independent pixel)와 sp(scale‑independent pixel)
• iOS 네이티브에서의 pt(point)와 px

의 차이와 목적별 올바른 활용법을 살펴봅니다.

1. 웹(CSS) 단위: px · em · rem

1.1 px (픽셀)

• 절대 단위: 물리적 픽셀 기반
• 용도: 테두리(border), 그림자(shadow), 그리드(gap) 등
• 장점: 1:1 디자인 구현이 쉽고, 레이아웃 예측 가능
• 단점: 텍스트 확대 시 크기가 고정되어 가독성 저하

1.2 em

• 상대 단위: 부모 요소의 font-size 기준
• 용도: 컴포넌트 내부 패딩·라인높이 등, 부모 글자 크기에 비례 조절
• 장점: 글자 크기 변화에 따라 내부 요소도 자동 조정
• 단점: 중첩될수록 값 계산이 복잡해질 수 있음

.card { font-size: 1.2em; /* 부모 대비 120% */ }
.card .title { font-size: 2em; /* .card 기준 240% */ }

1.3 rem

• 상대 단위: 루트(html) 의 font-size 기준
• 용도: 사이트 전체 기본 폰트 크기, 제목·본문 글자에 주로 사용
• 장점: 전체 폰트 크기를 한 번에 조정 가능(접근성 향상)
• 단점: 브라우저 기본 크기 변경에 민감할 수 있음

html { font-size: 16px; }
body { font-size: 1rem; }   /* 16px */
h1   { font-size: 2rem; }   /* 32px */

2. 안드로이드 뷰 단위: dp · sp

2.1 dp (Density‑Independent Pixel)

• 설명: 화면 밀도(dpi)에 관계없이 일관된 물리적 크기를 보장
• 용도: 레이아웃 마진, 패딩, 뷰(버튼·이미지) 크기 지정
• 장점: 기기별 화면 해상도 차이 무시, 레이아웃 일관성 유지

<Button
    android:layout_width="100dp"
    android:layout_height="48dp" />

2.2 sp (Scale‑Independent Pixel)

• 설명: dp에 사용자 폰트 크기 설정(scale) 을 추가로 반영
• 용도: 텍스트 크기 지정
• 장점: 시스템 글자 크기 변경에 따라 자동 확대/축소(접근성 지원)

<TextView
    android:textSize="16sp"
    android:layout_margin="8dp" />

3. iOS 네이티브 단위: pt · px

3.1 pt (Point)

• 설명: 포인트 단위. 1pt는
  • 구형 기기(~@1x): 1px
  • 레티나(@2x): 2px
  • 슈퍼 레티나(@3x): 3px
• 용도: 폰트 크기, 레이아웃 마진/패딩, 뷰 크기 지정
• 장점: 다양한 해상도에서 물리적 크기 일관성

label.font = UIFont.systemFont(ofSize: 16)  // 16pt
view.frame = CGRect(x: 20, y: 50, width: 280, height: 44)

3.2 px (Pixel)

• 설명: 실제 디스플레이의 물리적 픽셀 단위
• 용도: 고해상도 이미지를 처리하거나 픽셀 단위 정밀 제어가 필요할 때
• 주의: 주로 자동 변환 로직(@2x, @3x)가 개발 툴에서 처리

4. 단위 혼용 전략: 목적별 최적 활용법

1. 웹

   • 본문·제목: rem → 접근성 설정 시 전체 폰트 조정
   • 컴포넌트 패딩·행간: em → 컴포넌트 글자 크기 비례 유지
   • 테두리·그리드: px → 디자인 의도 1:1 보장

2. 안드로이드

   • 화면 요소 크기: dp → 기기 독립적 물리 크기
   • 텍스트: sp → 시스템 글자 크기 반영

3. iOS

   • 전체 포인트: pt → 다양한 디스플레이 밀도 자동 변환
   • 이미지 에셋: @1x/@2x/@3x 처리로 실제 픽셀 대응

5. 접근성 고려 팁

• 브라우저·OS 폰트 확대:

  • 웹은 rem으로 전체 폰트 확대 반영
  • 네이티브는 시스템 글자 크기 설정에 따라 sp·pt 자동 적용

• 글자 크기 한계 설정:

  • CSS clamp() 로 최대·최소 크기 제한
  • 네이티브는 텍스트 스타일(Accessibility Dynamic Type)로 폰트 범위 지정

• 미디어쿼리·레이아웃 조정:

  • 웹: 브레이크포인트별 html { font-size } 변경
  • 앱: 화면 가로 세로 및 사용자 설정에 따라 동적 레이아웃 적용

6. 결론

• **절대(px/pt/dp)**와 상대(rem/em/sp) 단위를 목적별로 혼용해야
  • 디자인 의도(정밀 제어)와 사용자 편의성(접근성)을 균형 있게 달성할 수 있습니다.
• CSS, Android, iOS 각 플랫폼의 최적 단위를 이해하고 적용하면
  • 레이아웃 깨짐 없이 일관된 UX를 제공할 수 있습니다.

단위 선택에서 “무조건 상대만 쓰자” 또는 “무조건 절대만 쓰자”는 양극단의 함정입니다.
각 플랫폼의 단위 특성을 적극 활용하여, 디자인 완성도와 접근성을 동시에 만족시키는 스마트한 개발 전략을 적용해 보세요!