🔫
dimensions와 해상도의 상관관계

비고
Tags
디자인
Select
recommand
notion image
 
개요Galaxy A7 Lite공식 스펙 확인Dimension 변화해상도랑 Dimensions 결과값이랑 다르네?!고정 크기로 화면 작업 시스케일로 화면 작업 시다른 예시 ( 갤럭시 노트10 )공식 스펙 확인Dimension 변화결론상황별 해결방안1. 어떤 디바이스에서도 같은 비율로 보여주고 싶다!2. 어떤 디바이스에서도 같은 크기로 보여주고 싶다!
 

개요

디바이스 스펙 상의 해상도와, 실제 컴포넌트를 그릴 때의 width, height가 달라서 이슈가 있었던 경험이 있었다.
따라서 RN의 Dimensions를 통해 받는 width, height 값과 해상도와의 상관관계에 대해서 이야기 하고자 한다.
 

Galaxy A7 Lite

공식 스펙 확인

  • 해상도 1340 x 800 (WXGA+)
1340 * 800 이고, 화면 디자인도 이 해상도를 기준으로 작업 진행됨.
notion image

Dimension 변화

화면 크기에 변화를 줄 때마다 Dimensions에서 반환되는 width, height, scale이 변화한다.
notion image
dimensions {"fontScale": 1, "height": 991.5492425005608, "scale": 1.3312500715255737, "width": 600.9389348488247}
dimensions {"fontScale": 1, "height": 878, "scale": 1.5, "width": 533.3333333333334}
dimensions {"fontScale": 1, "height": 750.8571428571429, "scale": 1.75, "width": 457.14285714285717}

해상도랑 Dimensions 결과값이랑 다르네?!

  • width * scale = 스펙 상의 가로 해상도
    • 600.9389348488247(width) * 1.3312500715255737(scale) = 800 (가로 해상도)
  • height * scale + 하단버튼 = 스펙 상의 세로 해상도
    • 991.5492425005608(height) * 1.3312500715255737(scale) = 1320
      • 해상도 상의 세로는 1340인데 20이 부족하다!
      • 하단버튼이 20을 차지하고 있었음
        • notion image
⚠️
- 하단 버튼도 swipe 방식이 아닌, 항상 버튼이 노출되는 경우에도 그만큼 height가 줄어든다.
 

고정 크기로 화면 작업 시

동일한 디바이스임에도, 화면이 커지면서 화면이 다 뭉개지게 된다.
실질적으로 쓸 수 있는 width, height 값이 줄어드는데, 수치를 동일하게 사용하기 때문이다.
 
notion image
 

스케일로 화면 작업 시

피그마 상의 수치를 입력하면 자동으로 현재 디바이스 화면 상에서 얼마만큼인지를 계산하여 적용하는 방식
  • 스케일 : 피그마 수치 * 현재화면 크기 / 피그마 기준 해상도 화면 크기
 
동일한 디바이스에서 화면 크기를 변경하여도 출력되는 결과물이 동일함.
notion image
 

다른 예시 ( 갤럭시 노트10 )

공식 스펙 확인

notion image

Dimension 변화

화면 크기에 변화를 줄 때마다 Dimensions에서 반환되는 width, height, scale이 변화한다.
notion image
dimensions {"fontScale": 1, "height": 786.2857142857143, "scale": 2.625, "width": 411.42857142857144}
dimensions {"fontScale": 1, "height": 730.6666666666666, "scale": 2.8125, "width": 384}
dimensions {"fontScale": 1, "height": 682, "scale": 3, "width": 360}
dimensions {"fontScale": 1, "height": 639.0588235294117, "scale": 3.1875, "width": 338.8235294117647}
dimensions {"fontScale": 1, "height": 600.8888888888889, "scale": 3.375, "width": 320}

결론

동일한 디바이스여도 화면 크기, 폰트 크기에 따라 화면이 다 달라진다
 
스펙 상의 해상도와 동일하게 작업하려면 scale이 1이어야 한다.
  • width * scale = 스펙상의 가로 해상도
  • height * scale + 하단버튼영역 = 스펙상의 세로 해상도
  • swipe 버튼일 때와, 일반 버튼을 사용할 때 height가 각각 다르게 나옴
 
문제는 화면 크기를 젤 작게 선택하더라도 scale이 1이 아니다.
  • 태블릿 : scale 1.3배가 최소 적용
  • 노트10 : scale 2.625배가 최소 적용
 
휴대폰 설정의 화면크기, 폰트크기 설정을 바꾸더라도 앱에선 동일하게 나오게 하려면 오히려 스케일을 적용해야 가능하다.( 실제로 앱 상의 width와 height 자체가 변경되므로 )
 

상황별 해결방안

1. 어떤 디바이스에서도 같은 비율로 보여주고 싶다!

⚠️
상황 디자이너 : 모든 화면에서 동일한 비율로 동일한 모습을 띄도록 하는 것이 디자인 이슈가 가장 적고, 디바이스 별로 상황을 고려하지 않아도 돼서 생산성을 높히기에 적합하다!
// 최종 연산 전에 핊요한 값들 계산
const 화면비율 = 현재화면의_width / 피그마상의_디바이스_width;

// 최종적으로 컴포넌트의 width에 적용될 보정된 수치 계산
const 보정된 값 = 피그마상의 수치 * 화면비율
notion image

2. 어떤 디바이스에서도 같은 크기로 보여주고 싶다!

⚠️
상황 디자이너 : 디자인 기조에 따라 디자인한 텍스트, 컴포넌트 크기에 디 의미가 있으므로 디바이스 별로 달라져선 안된다! 특히 이미 큰 타이틀 텍스트를 화면이 큰 태블릿으로 봤을 때 너무 크게 나오게 된다면, 오히려 큰 글씨가 가독성을 해치게 되므로 지양해야 한다!
// 디바이스의 디바이스 스펙 상의 가로 해상도 값 산출 방법
const 현재_디바이스의_해상도 = dimensions.width * dimensions.scale;

// 최종 연산 전에 핊요한 값들 계산
const 화면비율 = 현재화면의_width / 피그마상의_디바이스_width;
const 해상도비율 = 현재_디바이스의_해상도_width / 피그마상의_디바이스_해상도_width;

// 최종적으로 컴포넌트의 width에 적용될 보정된 수치 계산
const 보정된 값 = 피그마상의 수치 * 화면비율 * 해상도비율;
notion image