MyStarryCompanion

 🌠MyStarryCompanionApp 

퀴즈를 통해 별자리를 학습할 수 있는 앱

 

도와주신 분
WWDC22,23 StudentChallenge 마다 디자인 조력해주신 우리 심명진 디자이너 선생님 항상 애정합니다.🥺

 

📽️시연 영상(Youtube)

https://www.youtube.com/watch?v=9WZQ4pwnIjo 

🖍️ Trouble Shooting: GitHub

 

🔗 App Store : MyStarryCompnaion

✨ Skills & Tech Stack
SwiftUI

🛠 Development Environment
------------------------
iOS: 15.0+,  Xcode: 14.1

 

기술적 도전

1. UIBezierPath를 활용해 커스텀 뷰 사용

 

 import SwiftUI
 
struct CustomShapeView: View {
    var body: some View {
        GeometryReader { geometry in
            Path { path in
                let Bwidth = geometry.size.width * 100
                let Bheight = geometry.size.height * 100
                let width = geometry.size.width
                let height = geometry.size.height
                
                let radius = min(width, height) / 2.0
                let center = CGPoint(x: width/2, y: height/2)
                let holeRadius = radius * 0.5
                
                path.addRect(CGRect(x: -Bwidth/2, y: -Bheight/2, width: Bwidth, height: Bheight))
                let holeRect = CGRect(x: center.x - holeRadius, y: center.y - holeRadius, width: holeRadius * 2, height: holeRadius * 2)
                let holePath = UIBezierPath(ovalIn: holeRect)
                let holeCGPath = holePath.cgPath
                path.addPath(Path(holeCGPath))
            }
            .fill(style: .init(eoFill: true, antialiased: true))
            .foregroundColor(Color(red: 0, green: 0, blue: 0, opacity: 0.7))
        }
    }
}

 

 

2. GeometryReader, ScaleEffect를 활용해 다이나믹한 애니메이션 구현

Image("constellations")
    .resizable()
    .foregroundColor(.accentColor)
    .scaleEffect(vm.scale)
    .ignoresSafeArea()
    .animation(.easeInOut, value: 0.5)
    .offset(x: vm.xOffset, y: vm.yOffset)

License

---

MIT