해상도 해상도 해상도!! (px, pt, inch, dpi...)
디자인을 하다 보면 몇 배수 디자인, 해상도, pt px 등 크기 단위 같은 용어들이 쏟아져 나온다.
이건 내가 퍼블리싱하면서도 잘 이해는 못하고 이미지가 깨지는 이유는 해상도가 높아서 두 배 세배로 큰 사이즈를 넣어줘야 선명하게 출력된다는 어렴풋한 상식만을 가지고 있었다. 아니면 루트 크기를 주고 rem처럼 루트 크기에 비례하는 상대적 크기단위 이런 것들은 알고 있었다. 퍼블리셔들은 모니터 해상도로 다양하게 테스트해 보면서 하면 얼추 잘 맞았었음.
근데 마음 한구석의 찝찝함이 있는 거 뭔지 아려나... 약간 뭔가 제대로 모르고 넘어가는 것에 대한 찝찝함이 약간 화장실 갔다가 뒤처리 안 하고 나온 것처럼 계속 찝찝한 기분... 무튼 그래서 항상 pt px 단위나 배수에 대한 이해를 해보려고 항상 인터넷에 검색해 봤던 것 같다. (ㅋㅋㅋ) 진짜 수도 없이 많은 블로그나 유튜브 영상을 봐 옴. 하지만 생각보다 나의 멍청한 뇌로는 잘 이해가 안 갔음ㅠㅠ 지금은 단편 단편적으로 짧게 짧게 어렴풋이 이해가 가서 여기 페이지에 내가 해상도에 대해 단편, 단편적으로 이해한 내용을 두서없이 쓸 계획이다. (그래서 틀린 부분이 있을 수도 있음 주의!)
내가 이해한 방식
원래 알고 있었던 내용은
- 맥북에서는 px=pt로 같다는 것.
- 해상도가 디바이스마다 달라서 중요한 이미지는 2배 정도 크게 올려서 출력해야 한다는 것
내가 핸드폰, 아이패드, 맥북을 가지고 있으면서 각각의 스크린 크기를 비교해 보고 그냥 혼자 분석함
나는 아이폰 12 미니, 아이패드 프로 4, 맥북프로 2020을 가지고 있고 크기는 각각 이렇다.
단위까지 나왔으면 좋았겠지만...ㅎ
(+수정) 암튼 눈에 실제로 보이는 게 위쪽이고 원래 픽셀수가 아래쪽인 듯하다. 예를 들면 아이폰 사이즈에서 375는 pt, 1125는 px인듯하다.
(+추가로 알게 된)
- 2340*1080은 해상도인 듯...
- 476 ppi는 픽셀이 눈에 보이지 않을 정도로 작다(아무튼 좋은 디스플레이를 썼다 이 뜻인 듯).
- 내 폰에서는 3배 수로 디자인 해야 이미지가 깨지지 않을 듯하다.
- PT와 DT는 같은 말.
- 정확한 이유는 모르겠는데 노트북(데스크톱)등 스크린이 큰 디바이스는 배수가 크지 않음... 그 정도여도 잘 보인다 이런 건가?
- ppi와 dpi를 확실하게 알겠다. ppi는 픽셀로 웹 등 디스플레이에서 쓰이고 dpi는 도트로 출력물에서 쓰임. 그래서 포토샵에서 했을 시절 웹용은 72 ppi로, 출력물은 300 dpi로 한 이유를 알겠다.
(++추추가)
- 1DP(PT)에 4px 로 써있는데 그게 아니고 9배(3*3px=9px)임 보통 3배수라고함
결론은 1배 수로 디자인하면 이미지는 2-3배로 압축해서 저장될 정도로 크게 디자인한다. (근데 어차피 알고 있던 사실ㅎ)
근데 또 어차피 피그마에서 내보내기 할 때 2x, 3x 등으로 출력 가능함.
최최최최최종결론은 = 이렇게 분석하지 않아도 됐었을 듯ㅋㅋㅋ
그래도 뭔가 찝찝한 기분은 사라졌다. 그거에 만족함.