[SwiftUI] UI 최적화 문제

안녕하세요 불망입니다

현재 사이드 프로젝트인 iWaver를 진행중에 있는데 문제가 생겼습니다.
iWaver는 Apple Developer Academy@Postech에서 진행한 마지막 프로젝트입니다.

오늘은 최적화를 진행하면서 어떤 문제가 있었는지 어떻게 해결했는지 글을 작성해봤습니다.

문제 상황

현재 프로젝트를 진행하면서 발견된 문제점이 있습니다.

저희 프로그램 주요 기능 중 하나인 PDF파일을 Image로 변경하여 사용자가 원하는 이미지들을 골라서 원하는 배치공간에 이미지 파일들을 넣을 수 있는 기능이 있습니다.

사용자가 원하는 배치공간에 이미지를 넣고 확인을 하면 자동으로 Numbers 프로그램에 사용자가 정해둔 공간에 이미지가 자동으로 들어가게 됩니다.

PDF파일을 Image로 변경된 구간을 MacOS 유저들이 많이 사용하는 drag, command, shift를 사용하여 변환할 이미지를 선택 할 수 있는 기능이 있습니다.

변환된 Image들은 모두 ScrollView안에 배치가 되는데 이미지가 많은 상태이거나 이미지가 고화질일 경우 drag를 할 때 user가 drag할 때 생성이 되는 Rectangle가 user의 마우스 포인터를 실시간으로 따라오지 못하는 경우가 생겼습니다.

UI 멈춘 현상

문제 원인

제가 테스트를 하면서 얻은 결과는 아래 두가지의 경우 였습니다.

1. 전환된 Image의 화질이 높을 경우 한 Image마다 갖고 있는 정보가 많을 경우

2. Image의 용량과 상관없이 단순히 이미지 개수가 많은 경우

이 정보를 토대로 저는 ScrollView가 문제라고 생각을 했습니다.

ScrollView내에서 Image들을 모두 View에 할당되게 되는데 많은 이미지들의 정보를 처리하기 때문에 UI가 멈추는 현상이 나오게 되는 것이 었습니다.

문제 해결

ScrollView내에 LazyVGrid를 사용하여서 ScrollView내에서 현재 사용자가 보고있는 객체들만 불러오게 됩니다.그래서 모든 객체를 불러오는 것이 아니어서 CPU가 처리할 것이 현저하게 줄어듭니다.그리고 이전의 이미지들의 배치를 offset을 이용하여서 배치를 한 형태였습니다.예를 들어 아래의 코드처럼 이미지의 크기를 가져와서 padding값을 offset으로 추가해주는 형태였습니다.

Image("예시")
	.offset(x: imageRects[i].minX + 20, y: imageRects[i].minY + 20)

offset을 사용하지 않고 lazyVGrid를 사용하게 되면서 계산도 줄어들게 되었습니다.

전체적으로 UI 멈춘 현상이 제거가 된 것을 볼 수 있었습니다.

LazyVGrid를 사용하고 난 후