앱을 개발하면서 가장 걱정되는 해상도에 따른 깨짐..!
해상도가 달라서 발생하는 문제라면 거의 대부분 기기 화면 크기가 달라 디자인이나 글씨 등이 깨지거나 잘리는 문제를 말한다.
개발 과정에서 가장 고민했던 것 중 하나였는데, 다양한 해결 방법이 있겠지만 우리 팀에서는 config파일을 만들어 사용했다. 상당히 효율적인 해결책이라 생각되어 소개하게 되었다.
static func getRatioFromWidth(ratio: CGFloat) -> CGFloat{
return UIScreen.main.bounds.height * ratio
}config파일을 생성해 자주 변경될 수 있는 변수값들을 정리하고, 이런 함수를 추가했다.
UIScreen을 이용한 코드인데 Spacer()를 활용해 글자 간 간격을 조정할 때 비율로서 만들어진 함수를 불러다 사용하면 화면 크기가 달라지더라도 비율로 취급했기 때문에 간격이 유지된다. Height도 동일하게 생성할 수 있다.
사용예시
Spacer().frame(height:Config.getRatioFromWidth(ratio: 0.1907))
추가적으로 GeometryReader도 사용했는데 글자 크기를 비율로서 유지시켜주기 위해서 사용하는 거라고 보면 된다.
사용 방법은 아래와 같다.
GeometryReader { geometry in
//다른 코드들
}비율로서 값을 유지하고 싶은 Text를 감싸는 VStack이나 HStack등을 이 코드로 한번 더 감싸주면 된다.
폰트나 간격을 숫자로서 지정하려고 하면 화면 크기가 바뀜에 따라 당연히도 달라 보인다. 같은 수치이지만 큰 화면에서는 작아보이고 작은 화면에서는 커 보이기 때문이다. 해결은 비율에 있다. 일정 수치의 크기가 아니라 화면 전체에서의 비율로서 이를 다뤄주면 일정하게 유지하여 해상도 문제를 해결할 수 있다. 비율로 유지하는 방법은 이것만 있는 것은 아니니 가장 사용하기 편한 방식을 사용하면 될 것 같다.
