RN, DP (android, Device Independent Pixel, 밀도 독립 화소), PT(iphone)

 

[DP, Android]

 

RN 으로 작업할 때는 DP 라고 생각하고 그냥 디자인 받아서 width, height 값으로 작업하면 된다. 아래 코드는 그냥 참고용일 뿐.

대신 디자인을 받을 때 해상도가 좀 떨어질 경우 다시 좀 고해상도로 요청하면 된다. 

디자이너도 DP 의 개념 단위로 작업을 해야 한다... (실제 작업은 고해상도 px 단위이지만 논리적으로는 DP 로 생각하고 작업해야한다.)

DP 단위로 작업한다는 것은 비율적으로 작업한다는 의미이다. 한 픽셀 한 픽셀의 의미가 아니라 전체적인 비율로 작업하는 개념이어야 한다. 물론 그 전체적인 비율단위의 작업의 결과를 뽑아낼 때 한 픽셀 한 픽셀도 잘 맞아들어 가도록 정밀도 있게 작업하면 좋다.

하지만 실제 개발에 반영될 때 해당 이미지 자체는 거의 정확한 사이즈일 지 몰라도 flex layout 과 FlatList 등과 만났을 때 약간의 차이는 있을 수 있음을 유도리 있게 해야 한다. DP 의 개념 자체가 그러한 유도리를 반영하고 있는 것이다.

 

RN 의 width, height 의 숫자값은 DP 이다. 픽셀로 전환하고 싶다면 PixelRatio.getPixelSizeForLayoutSize() 함수를 사용할 수 있다.

 

The general way to set the dimensions of a component is by adding a fixed width and height to style.

All dimensions in React Native are unitless, and represent density-independent pixels.

Setting dimensions this way is common for components whose size should always be fixed to a number of points and not calculated based on screen size.

 

const DESIGNED_DEVICE_WIDTH = 375;
const DEVICE_WIDTH = Dimensions.get('window').width;
const ratio = DEVICE_WIDTH / DESIGNED_DEVICE_WIDTH;
const scale = (dp: number) => PixelRatio.roundToNearestPixel(dp * ratio);

const currentDeviceWidth = scale(DESIGNED_DEVICE_WIDTH); // TEST, same as DEVCIE_WIDTH

// 범용적 dp 개념
// scale 에 dp 가 5 인 것을 넣어주면 375 기준 디자인 시안에 실제 화면은 750 이라면 2배가 되어 10 을 리턴해준다.
// 즉, dp 는 디자인 시안 기준 pixel 에 대하여 실제 화면의 pixel 의 비율을 의미한다.
// 디자이너는 디자인 시안을 할 때 앱을 기준으로 가로 세로 몇을 기준으로 잡는다.
// 해당 단위는 pixel 일 것이고 실제 디바이스의 앱 스크린은 pixel 기준으로 가로 세로가 다를 수 있다.
// 따라서 디자인의 아이콘을 뽑아서 주면 실제 디바이스 기준으로 크기를 맞추어주어야 한다.
// 이를 dp 라는 device independent pixel 기준으로 하여 여러 기기 대응 가능한 이미지를 뽑아주면 좋다.

// 안드로이드
// ldpi (120), mdpi (160), hdpi (240), xhdpi (320), xxhdpi (480), xxxhdpi (640)
// 안드로이드의 기본 기기별 기준 dpi (dots per inch) 리스트 들이다.
// 현실에서의 길이 개념은 inch 이다. pixel 과 dots 는 화면 상의 밀도를 나타낸다.
// dp 와 px 의 변환은 현실의 길이 개념은 아니다.
// 기기의 화면의 실제 현실 길이는 자로 재어보아야 한다.
// 그리고 그 길이에 대해서 몇개의 점들로 이루어져 있는지가 dpi 이다.
// dots per inch 는 1인치 (2.54 센티) 에 들어 있는 pixel 의 수 이다.
// ** 안드로이드에서는 mdpi 인 160 dpi 를 기본으로 한다. **
// 따라서 mdpi 인 160 dpi 일 때 dp 와 px 이 같은 크기를 갖는다. 
// 안드로이드에서는 160 dpi 일 때 1 dp 가 1 px 이 된다.
// px = dp * (해상도/160)

// 48dp 의 정사각형을 그릴 경우
// xxxhdpi 인 갤럭시 s7 의 경우 640 dpi 이므로 192px = 48*(640/160) 픽셀로 디자인 출력을 주면 된다.
// px = dp * 단말DPI/기본160
// dp = px * 기본160/단말DPI
// mdpi 단말의 경우 1dp 는 1px 로 해주면 되고
// xxhdpi 단말의 경우 1dp 는 3px 로 해주면 된다.

// 위의 코드에서 실제 dp 를 적용하는 것을 보면 디자인 시안 너비 대비 실제 기기의 너비의 비율을 구하고
// 해당 비율을 dp 에 곱하였을 때 실제 의도하는 px 값이 되도록 한다.
// 375 px 기준 너비로 디자인 시안을 작업을 할 경우 실제 기기의 화면의 가로 총 픽셀 수가 750 px 일 경우
// 해당 시안에서 2배를 해주어야 실제 기기에서 시안에서 보이는 비율로 크기가 보이게 된다.
// 안드로이드는 그 기준이 160dpi 가 1dp = 1px 이 된다는 것이다.

// 디자인 시안은 pixel 기준으로 그려질 것이고 
// pixel 은 현실의 크기 개념이 아니며
// 기기는 dpi 와 같이 실제 길이 대비 pixel 의 밀도 개념이 있으며
// 원하는 것은 디자인 시안의 비율과 해상도로 실제 기기에서 보여지는 것이다.
// 따라서 디자인 시안의 가로 세로 기준 pixel 과 실제 기기에서의 pixel 수의 비율에 따라서
// 디자인 시안의 pixel 보다 더 큰 pixel 을 가지는 출력을 기기에 적용해야 할 경우가 많다.
// 디자인 시안은 pixel 단위로 작업이 이루어지지만 실제로는 추상적인 dp 단위로 작업을 하는 것이 좋으며
// 해당 dp 단위로 개념을 잡고 작업을 할 때 pixel 은 최대한 큰 pixel 의 가로 세로로 잡고 작업하면
// 높은 해상도의 이미지에서 부터 낮은 것까지 모두 뽑아내기 좋을 것이다.

// 디자인 작업은 당연히 스크린이라 px 단위 작업이고
// 하지만 작업의 기준은 dp 라고 간주하고 작업하여야 하고 (즉, 전체 화면 상의 비율적 크기로 작업한다는 의미)
// 기준 가로 세로 캔버스 크기는 최대 px 로 잡는 것이 좋다.
// 안드로이드는 각각의 기기 대응 출력으로 뽑아주어야 하고

// RN 에서 작업할 때는 아이폰 기준으로 그냥 style 에 width height 넣어서 작업하면 될 듯 함.
// 위의 코드와 같이 dp 변환 함수를 일일이 적용하는 것도 코드가 지저분해지고
// 안드로이드의 assets 에 일일이 각 디바이스 대응 이미지를 넣어주는 것도 불편하고
// RN 은 그냥 require 로 이미지를 불러오는 것이 두 플랫폼 모두 대응에 편리하고
// RN 에서의 style 의 width height 는 dp 기준의 단위이다. 아이폰은 pt.

 

 

http://design.gabia.com/wordpress/?p=33289 

https://reactnative.dev/docs/height-and-width#fixed-dimensions 

https://stackoverflow.com/a/38847960 

 

 

 

[PT, iOS]

 

point (constraint나 constant값을 줄 때의 숫자값들은 모두 포인트단위)
1인치를 72로 나눈 값이 1point라고 한다.
즉 1pt = 1/72 inches = 25.4⁄72 mm = 약 0.3527 mm
(1 inches = 25.4  mm)


pixel
"이 그림은 해상도가 640픽셀 ×480픽셀이다." 라는 말은 이 그림 속에 작은 사각형 점(즉, 화소=픽셀)이 640 × 480 = 30만 7200개 들어 있다는 뜻.

WINDOW에서는 9pt = 12px 
MAC에서는 9pt = 9px 
WINDOW에서의 화면 해상도는 96 dpi를 사용하지만, 
MAC에서의 화면 해상도는 72 dpi를 사용
1 inch 당 96개의 점이 있는 것과 72개의 점이 있는 것에 대한 차이.

iOS에서 포인트 개념은 

iPhone 4S에 도입 된 Retina Display에서 도입
이전의 Retina가 아닌 디스플레이의 경우 픽셀과 포인트가 동일한 크기(1pt = 1px)라고 Apple에서 결정
Retina 디스플레이에서는 1 포인트가 2 픽셀이라고 Apple이 정의
레티나는 픽셀을 각 방향으로 2배를 주어야 하는데 레티나가 아닌 경우도 고려해야 하고 이러면 개발자들은 혼란이 올 수 있다.

레티나 디스플레이 환경에서는 1pt = 4px

아이폰 6세대 부터 레티나 HD 디스플레이를 사용. 레티나 HD 디스플레이는 3배로 픽셀을 적용.

레티나 HD 디스플레이 환경에서는 1pt = 9px