[Swift 기능] Card Flip을 구현해보자!

서론

안녕하세요~! 개발자 제라스입니다 🙏🏻🤖🙏🏻

 

오늘은 좀 가벼운 기능 구현 주제로 카드를 뒤집는 듯한 Flip View를 구현해보고자 합니다.

이번에 아카데미에서 프로젝트를 진행하면서 어떤 '자랑'과 그것에 대한 '상장'을 한 곳에서 예쁘게 보여주는 방식이 뭐가 있을까 싶어서 고민하다가 '카드를 뒤집는 듯한 Flip 기능을 덧붙이면 어떨까' 싶어서 한번 구현해보게 되었습니다.

 

저 처음에 이거 시간 좀 잡아먹히려나 싶었는데...

정말 30분도 안 걸려서 너무 다행입니다ㅎㅎ 👍🏻😃👍🏻

 

그럼 간단하게 어떻게 구현했는지 얘기해보겠습니다!

두 View에 대한 Flip 기능 구현

일단 다음 두 View를 플립하는 화면을 구현하려고 했습니다!

왼쪽은 자랑 View(ShowCaseView) / 오른쪽은 상장 View(AwardView)

 

여기서 두 View를 뒤집는 걸 구현해봅시다.

우선 코드는 다음과 같습니다.

import SwiftUI

// Card를 뒤집는 동작을 담당하는 Controller
@Observable
class CardPresenter {
  var isFlipped: Bool = false

  func flip() {
    isFlipped.toggle()
  }
}

struct CardFlipView: View {
    @State var presenter = CardPresenter()
    
    var body: some View {
        Group{
            if presenter.isFlipped {
                AwardView()
            } else {
                ShowCaseView()
            }
        }
        .cornerRadius(10)
        .frame(width: 300,
               height: 500)
        .onTapGesture {
            presenter.flip()
        }
        .rotation3DEffect(
            // 해당 각도로 뒤집어서 만듦. 이때 UI가 자연스레 돌아가는 이유는 하단의 animation 덕분.
            .degrees(presenter.isFlipped
                     ? 180
                     : 0),
            // y축을 기준으로 뒤집겠다는 의미
            axis: (x: 0,
                   y: 1,
                   z: 0)
        )
        // 자연스럽게 '보이던 View'는 사라지고 '안보이던 View'는 나타나는 효과
        .animation(.default, value: presenter.isFlipped)
    }
}

 

이렇게 하면 가로로 뒤집는 모션을 구현할 수 있습니다!

다음처럼요~~!!

으엥???

하지만 뒤집었더니 View도 뒤집어진 채로 보이죠??

그래서 이걸 어떻게 할까 고민하다가...

그냥 뒤집어진 View를 미리 뒤집어진걸 올려두면 제대로 보이겠더라구요 ㅋㅋㅋㅋㅋㅋㅋ

그래서 다음과 같이 뒤집어두었습니다.

Group{
    if presenter.isFlipped {
        // scaleEffect를 적용하여 CardView를 반대로 뒤집어 둠.
        // rotation3DEffect로 앞 -> 뒤로 뒤집으려 할 때 뒤에 있던 View가 뒤집어진 채로 보이기 때문.
        AwardView()
            .scaleEffect(x: -1)
    } else {
        ShowCaseView()
    }
}

 

 

이러면 ShowCaseView(현재 보이는 View)와 달리 AwardView(아직 안 보이는 View)는 미리 뒤집어져 있기에 180도 회전하면 View가 한번 더 뒤집히기에 제대로 보이게 됩니다.

 

구현 결과는...

 

이렇게 완성이 되었습니다! :-D

마무리

제가 생각보다 쉬운 걸 너무 어렵게 바라봤던 것 같습니다.

사실 예전에 네부캠을 하면서 상당히 화려한 Flip 기능을 만들었던 팀이 있는데(Web 프로젝트 팀이긴 했지만...)

그 팀에서 상당히 힘들게 구현했던 것을 보고는 조금 오래걸리려나 싶었거든요 ㅎㅎ

 

앞으로 프로젝트를 진행하면서 새로 구현해본 것들을 조금씩 포스팅해보겠습니다!

그럼 오늘도 포스팅 읽어주셔서 감사합니다! :-) 👋🏻👋🏻

---

아직 꼬꼬마 개발자입니다.

더 나은 설명이나 코드가 있다면 언제든 환영입니다.

적극적인 조언과 피드백 부탁드립니다!

 

그럼 오늘도 개발 가득한 하루되세요!

- Xerath -

🤖🤖🤖🤖🤖🤖🤖