웹/앱 디자인의 단위 개념 총정리

어도비XD에서 디자인을 하고 코딩으로 구현할 때 항상 애매한 구간을 마주하게 된다..

그건 바로 폰트 사이즈는 pt인가 dp인가 px인가......

 

화면은 안드로이드를 기준으로 할 땐 dp를 사용하는데 아이콘도 dp니까 폰트도 dp인가...????

그럼 코딩으로 옮길 땐 어떻게 해야하지??

 

그래서 dp sp pt px 등등의 개념을 공부해보자

아래 내용은 youtube Ami Design Tv의 내용임. https://youtu.be/TqJm2TM9JnA

 

 

---

운영체제 디자인 단위 정리

 

DP, SP는 안드로이드에서 많이 사용하는 단위, PT 는 IOS에서 사용하는 단위이다.

 

1. DP (Device-independent Pixel)

디바이스 크기에 의존하지 않은 픽셀 단위

디바이스가 아무리 달라도 보이는 크기가 모두 같다 그래서 아이패드에서 놓은 아이콘의 크기와 핸드폰에서 킨 아이콘의 크기는 옆에 두고 비교를 해도 크기가 같다.

 

왜 이렇게 만든 걸까?

안드로이드는 디바이스가 워낙 많기 때문에 해당 엘리먼트를 모두 동일한 크기로 보여지게끔 하기 위해 dp가 만들어졌다.

 

<안드로이드의 밀도(해상도) 기준 6가지>

Idpi

mdpi   -   여기서 1dp = 1px과 같다

hdpi

xhdpi

xxhdpi

xxxhdpi

 

100px의 이미지를 해상도가 다른 여러 디바이스에서 보인다고 해보자.

이미지는 디바이스 면적의 100px만큼을 차지하는데 해상도가 높을수록 방이 넓어지는 것과 같으므로 해상도가 낮은 곳에서는 100px이 커다랗지만 높은 곳에서는 깨알만치 보이게 된다. 그럼 디바이스마다 보이는 크기가 달라지겠지? 이를 일관되게 맞추기 위해 DP라는 개념이 나타났다.

 

2. SP (scale-independent pixel)

1dp와 1sp의 크기는 동일하다.

하지만 디바이스 설정에서 스케일을 수정하여 보여지게 할 크기를 조정할 수 있는 유동성을 갖추고 있다.

사용 예시로 문자텍스트같이 연령층이 다양한 사용처에서 쓰인다.

 

3. PT (point)

dp와 개념이 같다.

애플은 안드로이드와 달리 해상도가 3가지로 구분된다.

 

1@x

2@x

3@x

 

+) 해상도에 따른 파일 저장방법

안드로이드 - 해상도별로 폴더를 설정

Ios - 해상도별로 폴더를 설정+파일이름에 배수입력

 

 

---

웹 폰트 사이즈 단위 정리 (feat. 반응형 웹)

1. px (pixel)

보통 폰트의 크기를 고정시킬 때 default

 

2. em

앞서 적용된 폰트크기의 배수로 적용.

html에서 부모개체의 폰트속성을 자식개체로 상속받았을 때 자식개체를 2em으로 적용하면 2배 크기가 된다.

<style>
    .class { font-size: 14px; }
    h1 { font-size: 16px; }
    p { font-size: 2em; }
</style>
...
<div class="text">
    <h1>여기는 16이니까 16px이겠죠?</h1>
    <h2>여기는 class의 영향을 받아 14px</h2>
    <p>여기는 몇 픽셀이 될까요? 정답은 28px입니다.</p>
</div>

 

 

3. rem

em과 비슷하게 배수로 적용되지만 상위개체의 속성을 받는 것이 아니라 웹브라우저의 기본 크기인 16px의 배수가 된다.

 

4. vw

화면크기에 영향을 가로너비에 따라서 폰트 크기가 달라진다.

1vw = 화면 가로너비의 1/100

화면의 가로가 1000px이면? 1vw는 10px이다.

 

5. vh

세로너비에 영향을 받는다.

 

vw와 vh는 반응형웹에서 자주 쓰이는 단위이며, 폰트뿐만이 아니라 다른 엘리먼트에도 적용이 가능하다.

참고 웹사이트 :
https://www.peststopboys.co.uk
https://emotivefeels.com
https://www.variable-fonts.com

The Benefits and Uses of Variable Fonts | Interactive Microsite

 

 

---

Pixel, PPI, DPI, 고밀도 디스플레이의 개념

1. Pixel

이미지를 이루는 가장 작은 단위 화면구성의 최소단위

 

+) 물리적 픽셀과 논리적 픽셀의 개념

물리적픽셀

기기에서 표현가능한 픽셀

논리적픽셀

일정 비율의 맞추어 이미지를 욱여넣은 픽셀

 

2. PPI & DPI (Pixels Per Inch & Dots Per Inch)

 

3. 레티나

애플 자체에서 고밀도 디스플레이를 지칭하는 마케팅용어