MOTI #1. iPhone 13 Pro 에서 디자인이 깨지는 버그 ( feat. VStack & ZStack )

안녕하세요.

하루하루 모은 이야기로 나만의 꿈을 담은 카드, 모티 개발자인 다람쥐입니다.

모티 신기능도 만들어보고 싶고 코드 개편도 해보고 싶고, 유저와의 소통도 마구마구 해보고 싶은데

요즘 너무 바빠서 한 입니다 ㅠ.ㅠ 어서 모티 사용자분들 채찍질 해주세요.

 

어쨋든 불과 일주일 전에 모티 팀원분 중 한 분이 메인 화면의 상단 이미지와 하단 이미지 사이에 줄이 있다고 해서

부리나케 오래간만에 엑스코드를 열어 보았습니다.

 

보이시나요? 문제의 버그 화면

버전 2로 새로 리뉴얼 하면서 드림캐처가 걸린 느낌을 주기 위해 고리가 있는 상단 이미지와 아래 영역인 하단 이미지로 구성을 했었습니다.

SwiftUI 에서 ZStack 과 VStack 으로 아래와 같이 구성했었어요!

ZStack 은 한 영역에서 각기 다른 뷰를 겹쳐서 쌓아 올리는 친구라고 보면 되고

VStack 은 한 영역에서 위에서 아래로 차곡차곡 뷰를 배치해주는 친구라고 보면 됩니다.

 

VStack(spacing: 0) {
    Image(model.getMainFrameImageString(isTop: true))
    ZStack() {
        Image(model.getMainFrameImageString(isTop: false))
        VStack(spacing: 0) {
        	...
    	}
        ...
    }
    ...
}

VStack 으로 간격 없이 Image() 와 ZStack() { Image() ... } 으로 바로 붙여질거라 생각을 했지만..!

ZStack() 안에서 Image() 이미지뷰가 위에 찰싹 붙어있지는 않겠구나라고 생각이 들었어요!

헤헤 그래서 바로 위에 찰싹 붙어있도록 VStack 과 Spacer 를 이용해서 배치했습니다.

 

VStack(spacing: 0) {
    Image(model.getMainFrameImageString(isTop: true))
    ZStack() {
        VStack {
            Image(model.getMainFrameImageString(isTop: false))
            Spacer()
        }
    	...
    }
    ...
}

Spacer 라는 친구는 다음 남아있는 영역들을 모두 잡아주는 친구입니다.

VStack 안의 Spacer 친구가 Image 뷰 아래의 영역을 모조리 잡아줘서, Image 뷰는 맨 위에 찰싹 붙어있는 모양이 되는 것 입니다.

 

이왕 고치는 김에 1st ~ 6th 가 있는 상단 헤더에 그라데이션도 좀 넣고, 아래 탭에도 그라데이션을 조금 넣었습니다.

하단 이미지가 뚝 끊기는 느낌이 있어 자연스레 만드려고 넣어봤어요!

( 디자이너님들 괜찮죠..? )

 

상단 및 하단 이미지 수정하고 헤더와 탭에 그라데이션 부여, 고양이 너무 귀엽죠?

 

테스트 플라이트에 올려서 다같이 테스트해보고 버전 업데이트로 넘어갑니다!

앞으로 많은 유저분들을 만날 수 있으면 좋겠습니다.

이상 모티 개발자의 디자인 이슈 해결 일지였습니다!

다음에도 더 좋은 글로 만나봬요!

 

하루하루 모은 이야기로 나만의 꿈을 담은 카드, 모티 앱스토어 / 플레이스토어에서 다운로드 받기

앱스토어 : https://apps.apple.com/kr/app/moti/id1496912171

‎MOTI

플레이스토어 : https://play.google.com/store/apps/details?id=com.ahobsu.moti 

MOTI - 나를 기록하는 일기 - Google Play 앱