웹 개발자로 일을 한지 어언 3년이 다 되어갑니다.
그동안 다양한 프로젝트를 진행했지만 이번엔 웹에서 간단한 식물키우는 미니게임을 포함한 프로젝트를 진행하게 되었습니다.
게임이라 하면 프레임과 자연스러운 애니메이션이 필수라 생각했지만 Css로는 한계가 있다 생각해 Unity로 게임을 만들어 보자 제안했습니다. 물론 그 제안이 후회로 바뀌기까지는 얼마 걸리지 않았지만.....ㅠ
이번엔 Unity Webgl을 통해 겪은 여러가지 이슈와 어떤 시도를 했고 어떻게 해결했는지를 공유해볼까 합니다!
우여곡절이 정말 많았지만 그 중에서도 가장 크리티컬했던 이슈, '이미지 뭉개짐(깨짐)' 현상!
이 이슈로인해 열심히 공부한 Unity를 써먹어보지도 못할 뻔 했습니다 ㅎ..
우선 이미지 뭉개짐(깨짐) 현상이 뭔지 사진으로 보여드리자면,
△ Unity Editor에서 보이는 화면입니다.
△ Webgl 빌드 후 웹에서 보이는 화면입니다.
차이가 느껴지시나요!?
좀 더 확대해서 보면,
△ Unity Editor에서 보이는 화면입니다.
△ Webgl 빌드 후 웹에서 보이는 화면입니다.
이미지의 선명도가 아주 낮아지는 이슈가 발생했습니다..
이런 퀄리티라면 Unity로 하던 작업을 Canvas에서 css로 직접 구현해야 했습니다.
얼마나 열심히 공부했는데 ㅠㅠ 이대로는 안된다! 바로 이슈를 해결하기 위한 시도를 해봅니다.
첫번째 시도, 이미지의 해상도를 올려보자!
기존의 이미지를 모두 4배의 해상도의 이미지로 교체, Unity에서 해상도도 4배로 변경하고 빌드 후 확인해 본 결과.. 똑같은 이슈가 발생했습니다..
두번째 시도, 빌드 시 이미지 압축의 문제이지 않을까?
폭풍 검색을 통해 빌드 압축에 관한 모든 설정을 찾아보고 하나씩 변경하면 확인해봤습니다.
참고로 빌드 한번 할 때 30초~1분 정도가 소요됩니다.. 빌드만 50번 정도 해본거 같습니다ㅠㅠ
하지만 그래도 이슈는 해결되지 않았습니다.
세번째 시도, 뭘.. 더 해야 할까..?
Unity 이미지 깨짐, 뭉개짐, 선명도 낮음, 선명하지 않음 등등 모든 검색어로 검색해도 저와같은 현상을 이야기해주는 글은 없었고, 주변에 Unity를 하는 이가 한명도 없었기에 좌절에 빠졌습니다.....
지푸라기라도 잡는 심정으로 이것저것 다 건들여 보고 React에서 useUnityContext 라이브러리의 설정값도 하나하나 건들여보던 그때! 이게 왠걸!?
이미지 이슈 해..해결!!!!!!
문제는 바로 devicePixelRatio 설정값이었습니다!
<Unity
matchWebGLToCanvasSize={true}
unityProvider={unityProvider}
devicePixelRatio={4}
style={{ width: '100%', height: '100%' }}
/>useUnityContext 라이브러리를 통해 Webgl로 빌드한 빌드파일을 구동시키는데, 그때 줄 수 있는 여러가지 설정 값중 devicePixelRatio의 값 따로 설정해주지 않았습니다. 이 값을 4로 올려줄 시 원하는 정도의 이미지 선명도를 얻을 수 있었습니다.
그럼 이 devicePixelRatio란 무엇인가!
DPR이라고도 불리는데 간단하게 1인치(25.4mm) 안에 표현되는 화소 수를 말합니다.
좀 더 Deep하게 들어가려면 몇가지를 알아야 하는데
► 물리적(Physical) 해상도
단말이 실제로 표한할 수 있는 물리적인 화소 기본 단위
물리 픽셀 = 디바이스 픽셀
예) 사진 기본 크기
► 논리적(Logical) 해상도
디바이스 픽셀과 무관하게 HTML/CSS에서 논리적으로 표현할 수 있는 화소 기본 단위
논리 픽셀 = CSS 픽셀
예) 사진 출력 크기
► 해상도
화면의 도트 또는 픽셀 수
DPI와 PPI라는 단위를 사용
DPI(dots per inch): 1인치 정사각형 안에 들어가는 '점'의 수. 점의 밀도
PPI(pixel per inch): 1인치 안에 들어가는 '픽셀' 수. 픽셀 밀도
그렇다면 Device Pixel Ratio는 도대체 무엇인가?
모니터에서 보이는 화면 그대로를 모바일 기기에서 본다면 볼 수 없을 정도로 작게 보이게 될 것이다.
그래서 모바일처럼 화면 크기에 비해 해상도가 높은 기기에서는 화면 크기에 맞춰 볼 수 있는 논리적 픽셀이라는 개념을 사용한다.
한마디로 논리적 픽셀과 물리적 픽셀의 비율! 그것이 Device Pixel Ratio이다.
현재 개발을 Macbook pro로 진행하고 있다.
Macbook Pro의 DPR를 확인해보면,
DPR이 2인걸 볼 수 있다.
내 핸드폰인 iPhone15 pro 는 DPR이 3이다.
결론!
Unity Webgl로 빌드 시 DevicePixelRatio는 2이상으로 설정해줘야 이미지가 제대로 나오게 된다!
