Unity 에서의 화면 해상도 (Figma 사용부터, Canvas Scaler 와 다양한 해상도 대응까지!) - Pavdup's Second Brain

# 결론 및 요약 > 필요한 경우, "결론"만 확인하면 됨. ### 질문 안녕하세요! Unity 를 통해 앱을 제작하던 중, 궁금한 점이 있어 여쭙고자 메시지드립니다! 저는 현재 S23을 타겟으로 하여, Figma 및 Unity 의 Canvas Scaler 해상도를 1080 * 2340 으로 맞춰 진행하고 있습니다. 하지만, Figma 에서 제공하는 각 Frame 의 픽셀의 프리셋은 비율은 동일하나 작은 393 * 852 등을 띄고 있으며. 다른 분들의 말씀을 얼핏 들었을 때 실제 제품은 거의 모두 비율은 동일하나 작게 유지함을 전해들었던 것 같습니다! 이와 관련하여 여쭙고 싶은 질문은 다음과 같습니다. 1. 현업에서 Figma 나 xd 등으로 UI 를 만들고, Unity 의 Canvas Scaler 에서 Reference Resolution 을 활용할 때, 393 * 852 와 같은 작은 해상도를 사용하나요? 2. 작은 해상도를 사용한다면, 이를 사용하는 이유가 무엇인가요? 3. 작은 해상도를 사용할 경우, Canvas Scaler 로 늘어나는 과정에서 비주얼 적으로 깨지지 않나요? => - Q. 버튼 등, PNG 그림으로 표현되는 친구들의 경우에도, Canvas Scaler 를 통해 늘렸을 때 잘 처리 되나? => 깨질 수 있긴 함. 하지만, 전체 해상도를 393 * 852 이와 같이 사용할 경우, 문제 일어날 일은 드뭄. 또한, 에셋을 뽑아낼 때, 충분히 큰 크기로 뽑아내는 것도 가능함. (FigmaUnityBridge 에서 Scale 을 3으로 기본 설정한 이유가 그 때문인 듯.) ### 내 추론 1. 맞음. 현업에서 Figma 나 xd 등으로 UI 를 만들고, Unity 의 Canvas Scaler 에서 Reference Resolution 을 활용할 때, 393 * 852 와 같은 작은 해상도를 사용함. 2. 작은 해상도의 에셋을 사용하면 렌더링 시 GPU 부하를 줄일 수 있음.(1) / 앱의 프레임 속도와 배터리 소모량에 긍정적인 영향.(2) / 작은 해상도의 이미지와 에셋을 사용하면 앱의 크기를 줄일 수 있습니다. 이는 앱의 다운로드 속도와 설치 용량에 영향.(3) / 작은 해상도로 디자인된 UI는 Canvas Scaler를 통해 다양한 해상도의 디바이스에 맞게 자동으로 확장.(4) 3. UI Extension 의 Primitives 나, Text Mesh Pro 등의 경우, 벡터 그래픽(Vector Graphics)의 원리를 활용하기 때문에, 해상도에 상관없이 선명하게 표현. 단, 일부 Button 이나, PNG 그림으로 표현되는 친구들은 Canvas Scaler 를 통해 늘렸을 때 깨질 수 있음. (이때, 깨지는 건, 사진이나, 그 이미지를 그 화면에서 볼 수 있는 크기로 늘렸을 때의 픽셀과 동일 => 이것 관련해서 아직 이해가 제대로 되어 있지 않은 듯. 픽셀, DPI, Point 관련 개념에 대해 이해를 할 필요가 있음.) 따라서, FigmaUnityBridge 등에서, 3배수로 뽑아내거나 하는 것이 그러한 원리에 기반을 둠. ### 추가 정리 : Pixel, DPI, UI 에서 Asset 의 적용 정리 ![[KakaoTalk_20240510_233559187.jpg]] - 가장 중점적으로 봐야하는 점 : UI Image 에 들어갈 Sprite 들은, "UI Image * 화면 해상도에 따른 Canvas Scaler 에 의한 크기 변경"이 반영되어 표시된다. 이 크기가 Sprite Asset 의 크기보다 작을 경우, 우겨 넣어져 들어가고 (물론 Image Type 에 따라 다르지만) 클 경우, 늘어나게 된다. - 너무 많이 우겨넣어질 경우, 자글자글한 느낌이 든다. - 너무 많이 늘어날 경우, 흐릿한 느낌이 든다. ### 추가 정리 및 자료 수집 후 수정 1. [2D 자산의 해상도를 선택하는 방법 | 유니티 블로그 | 유니티 블로그](https://blog.unity.com/engine-platform/choosing-the-resolution-of-your-2d-art-assets) - 해상도를 선택할 때, 아트의 크기는 뽑아낼 때 조절하거나, Unity 내부의 Max Size (최대 해상도에 대한 조정임) 등을 통해 조정할 수 있지만, 이미 작은 에셋은 품질을 잃지 않고는 크기를 늘릴 수 없음. 따라서, 품질 자체는 높이는 것을 고려. - 일부 화면 (Retina 및 최신 고 DPI 화면) 의 경우, 실제 하드웨어 해상도는 높지만, 낮은 해상도의 것을 실행하더라도, 두 배의 픽셀을 사용하여 렌더링함으로써, 이미지와 텍스트가 매우 선명하게 보이도록 만드는 기능을 제공함. - 목표로 삼고 있는 최대 해상도를 선택하고, 이를 전체 프로젝트의 목표로 설정하는 것이 필요하다는 뜻. - 이 문서는 나중에 2D Sprite 나, 이런 조작할 때 살펴보면 더 좋을 듯! 화면당 차지하는 비율 등에 관한 내용도 함께 나와 있으므로! 2. [Designing UI for Multiple Resolutions | Unity UI | 3.0.0-exp.4](https://docs.unity3d.com/Packages/[email protected]/manual/HOWTO-UIMultiResolution.html) - Anchor 와 Canvas Scaler 사용해서 화면 크기를 잘 조절할 수 있다. 3. [해상도의 기준이 있어야 UI디자인을 시작할 수 있다](https://brunch.co.kr/@plusx/6) / [프레임 질문 입니다. - 인프런](https://www.inflearn.com/questions/965622/%ED%94%84%EB%A0%88%EC%9E%84-%EC%A7%88%EB%AC%B8-%EC%9E%85%EB%8B%88%EB%8B%A4) 1. 모바일의 경우, Pixel 기반 작업 툴이 아닌, Vector 기반 작업을 사용하므로, 작은 사이즈로 만들어낸다 하더라도, 크게 뽑아낼 수 있음. 이에 따라서 필요가 준 편. 2. Frame 상에 Grid를 두고 작업하는 이유는 여러 사이즈의 디바이스에 범용적으로 적용할 수 있도록 하기 위함. 4. [Dev Weeks: 작업 효율을 높이기 위한 유니티 UI 제작 프로그래밍 패턴들 - YouTube](https://www.youtube.com/watch?v=_jW_D2vF9J8&t=7278s) : 이것도 나중에 한번 살펴보면 좋을 듯. 맨 마지막 부분에서, DPI 를 통한 UI 사이즈 변환에 대해 담고 있음. => 이를 통해 살펴봤을 때, 다음과 같은 방법으로 결론 내릴 수 있을 듯. ### 결론 1. Figma 나 XD 등에서 작업할 때는 Mobile 기준으로 하여 낮은 해상도 (393 * 852) 로 나오게 될 것. 2. [simonoliver/UnityFigmaBridge](https://github.com/simonoliver/UnityFigmaBridge) 등을 통해서 Unity 로 옮김. 이 때, Canvas 는 낮은 해상도든 상관없이, Figma 와 동일한 해상도로 처리. - 단, [[UnityFigmaBridge - Figma 디자인 에셋을 Unity로 Import 하는 법]]의 Server Rendering 을 통해 뽑혀나오는 이미지를 체크할 수 있는데, Setting 의 Server Render Image Scale 를 통해, 뽑혀 나오는 Image 의 크기를 2, 3배수할 수 있음. 이렇게 뽑혀져 나오는 Sprite Asset 은 타겟 해상도를 목표로 하여야 하기 때문에, 2 - 3배수 하는 것이 좋음. 3. 위 플러그인을 통해 뽑은 UI 를 통해 Scene 을 구성. 이때, 해당 UI 를 구성하는 Sprite Asset 은 크기를 2 - 3 배수 했다면, Canvas Scaler 의 Reference Resolution 이 작더라도, 실제 화면(ex - 여기서는 Reference Resolution 보다 3배 정도 크다고 가정)에서는 PNG 파일도 잘 대응됨. 또한, UI Extension 등을 통해 만들어낸 Primitives 라면, 처음부터 Vector 나, 화면 크기가 커짐에 따라 깨짐 없이 만들어졌기 때문에, 문제가 없음. - 위 방법은 Figma가 낮은 기준 해상도로 만들어져 있고, 바로 Import 하여 사용함을 가정. 따라서, 기준 해상도를 교체하기 번거롭기 때문에, Reference Resolution 을 Figma 와 동일하게 맞추는 방향을 사용. - 또한, Sprite Asset 의 크기만 크다면, 낮은 타겟 해상도를 사용하더라도, 어차피 Game View 에서 설정한 화면 크기에 따라서 알아서 들어가므로, 차이가 거의 없겠네. - 즉 결론은, Reference Resolution - Canvas Scaler - Game View Resolution 은 서로 크게 영향 X. **화면 비율**만 잘 맞춰져 있으면 됨.(1) (그러므로, Reference Resolution 은 **UI 제작 환경(Figma 등)의 해상도**를 사용.) 단, 오히려 중요한 건 들어가는 **에셋 (PNG) 파일의 크기**임. 따라서, 이건 **Target 해상도를 기준으로 하여, UI 에셋 환경에서 필요에 따라 배수 (xd, figma) 하여 잘 뽑아야** 함. (2) #### HJ 님 첨언 1. UI 를 만드는 건 다른 곳에서 만들겠지만, 레이아웃 작업 (UI 를 실제 화면에 배치) 은 Unity 를 통해 바로 진행하는 경우가 다수. 2. Unity 에서 UI 배치 작업을 바로 진행하기 때문에, 굳이 낮은 해상도로 진행하지 않음. 일반적으로 Reference Resolution 은 가로 / 세로 FHD 를 사용하는 편. 3. UI 에셋의 크기를 2 - 3 배 뽑아 대응시키는 것이 좋긴 하겠지만, 여유가 없을 수도 있음. 또한, 텍스처에 따라서는 크기만으로 해결될 수 없는 문제가 존재. (ex - 압축 형식, 오브젝트 경계의 계단 현상) 따라서, Device Simulator 혹은 빌드를 통해 주요 단말기에서의 품질을 확인하는 것이 중요함. #### Canvas Scaler 를 통한 다양한 해상도 대응 관련 1. Scale with Screen Size + Expand 나. (비율 맞추고, 확장되므로, 안정적 + 또한 가장 작은 해상도를 고려하는 내 UI 작업 과정과 알맞음.) 2. Constant Pixel Size + Anchor(묶어주는 친구) + ScaleFactor 를 [Dev Weeks: 작업 효율을 높이기 위한 유니티 UI 제작 프로그래밍 패턴들 - YouTube](https://www.youtube.com/watch?v=_jW_D2vF9J8&t=7278s) 여기서 논한 DPI 기반으로 설정해주는 게 나음. ![[KakaoTalk_20240602_173829427.jpg]] *** *** *** # 이전 조사 ### 질문 모바일 환경의 화면 해상도에 대응되는 Unity 앱을 만든다 치자. 내겐 다음과 같은 두 가지 선택지가 있다. 1. Unity 의 Canvas Scaler 의 해상도를 target 해상도와 동일하게 설정할지. 2. 비율만 동일하게 맞춰둔 상황에서, 전체 해상도를 600 * 800 처럼 작게 가져 가는 게 맞을지. 궁금한 이유 : 웹은 작은 해상도를 쓴다 들었기 때문에. 그리고 작은 해상도가 최적화적으로 괜찮을 것이라 들었기 때문에. / 하지만, 비율만 돌일하게 하고, 작은 해상도로 만들면, 비주얼 적으로 깨지지 않을까 하는 생각도 있음. 위 둘 중에서, 어느 것을 현업에서 정석적인가? / 현업에서 사용하는 방식이 무엇인가? 위처럼 상황에 따라 다르게 쓰나? *** ### 답변 1 : Claude 화면 해상도를 타겟 기기에 맞출지, 아니면 비율만 동일하게 한 상태에서 해상도를 줄일지에 대해서는 Unity의 공식 문서나 일반적인 가이드라인에서 명확하게 언급되지 않은 경우가 많음. 프로젝트의 성격, 타겟 디바이스, 성능 요구사항 등에 따라 선택이 달라질 수 있기 때문. 하지만, 반적으로는 Canvas Scaler의 Reference Resolution을 타겟 디바이스의 해상도보다 낮게 설정하는 것이 더 흔함. Canvas Scaler의 Reference Resolution을 실제 타겟 디바이스의 해상도보다 낮게 설정하는 것이 성능과 최적화 측면에서 더 선호되는 방식. ### 추가 질문 안녕하세요! Unity 를 통해 앱을 제작하던 중, 궁금한 점이 있어 여쭙고자 메시지드립니다! 저는 현재 S23을 타겟으로 하여, Figma 및 Unity 의 Canvas Scaler 해상도를 1080 * 2340 으로 맞춰 진행하고 있습니다. 하지만, Figma 에서 제공하는 각 Frame 의 픽셀의 프리셋은 비율은 동일하나 작은 393 * 852 등을 띄고 있으며. 다른 분들의 말씀을 얼핏 들었을 때 실제 제품은 거의 모두 비율은 동일하나 작게 유지함을 전해들었던 것 같습니다! 이와 관련하여 여쭙고 싶은 질문은 다음과 같습니다. 1. 현업에서 Figma 나 xd 등으로 UI 를 만들고, Unity 의 Canvas Scaler 에서 Reference Resolution 을 활용할 때, 393 * 852 와 같은 작은 해상도를 사용하나요? => **맞음.** 2. 작은 해상도를 사용한다면, 이를 사용하는 이유가 무엇인가요? => **작은 해상도의 에셋을 사용하면 렌더링 시 GPU 부하를 줄일 수 있음.(1) / 앱의 프레임 속도와 배터리 소모량에 긍정적인 영향.(2) / 작은 해상도의 이미지와 에셋을 사용하면 앱의 크기를 줄일 수 있습니다. 이는 앱의 다운로드 속도와 설치 용량에 영향.(3) / 작은 해상도로 디자인된 UI는 Canvas Scaler를 통해 다양한 해상도의 디바이스에 맞게 자동으로 확장.(4)** 3. 작은 해상도를 사용할 경우, Canvas Scaler 로 늘어나는 과정에서 비주얼 적으로 깨지지 않나요? => 벡터 그래픽(Vector Graphics)의 원리를 활용하기 때문에, 해상도에 상관없이 선명하게 표현. - Q. 버튼 등, PNG 그림으로 표현되는 친구들의 경우에도, Canvas Scaler 를 통해 늘렸을 때 잘 처리 되나? => 깨질 수 있긴 함. 하지만, 전체 해상도를 393 * 852 이와 같이 사용할 경우, 문제 일어날 일은 드뭄. 또한, 에셋을 뽑아낼 때, 충분히 큰 크기로 뽑아내는 것도 가능함. (FigmaUnityBridge 에서 Scale 을 3으로 기본 설정한 이유가 그 때문인 듯.)