Swift UI 를 공부해보자


유튜브 스탠퍼드 SwiftUI 강의 를 보며 스위프트 UI 를 공부해보았다.
앱 공부는 역시 앱을 만들면서 배우는 것 만큼 재밌는게 없다고 생각한다.
스탠퍼드 강의에서는

이렇게 생긴 앱을 만들려고한다.
간단한 카드 뒤집는 게임이다. 같은 카드를 뒤집으면 점수가 오를 것 같다.
SwiftUI 가 아닌 UIKit 으로 만드는 방법이 먼저 떠올랐다.

먼저 최상단에 Themes, New Game 은 네비게이션 뷰나 다양한 방법으로 구현이 가능한 버튼들이고, 아래 게임 부분은 CollectionView 를 통해 코드를 몇줄 추가해주면 가능해 보인다. 아래 Score 역시 쉽다. 변수를 지정해주고 추가해주기만 하면 될 것 같다.
그런데 궁금한 부분은 애니메이션을 처리하는 방법이다. 지금까지 UIKit 으로 앱을 만들 때 애니메이션을 심도있게 사용해 본 적이 없기 때문에, 애니메이션 적용이 쉽다는 SwiftUI 가 흥미롭게 느껴진다.

일단 SwiftUI에게 가장 만족스러운 부분은, UI를 구성할 때 Leading Trailing, Center Horizontal... 이런것들을 일절 사용하지 않는다는 것이다. 아직 얼마 못배워서 그런진 모르겠지만...


처음 시작화면이다. UIKit 과 많이 달라보인다.
일단 Class 가 사라지고 Struct 가 생겼다.
옆에 상속도 받았기에 도대체 이럴거면 struct와 class 를 나눈 이유가 뭐지..? 하고 찾아봤더니 역시 어렵다. 아직 내가 볼 필요가 없는 수준인 것 같다.

아무튼, Text 안에 있는 String 을 바꾸면 오른쪽에 preview 가 자동으로 , 실시간으로 바뀐다! Storyboard 처럼 바로바로 실행하고 종료해야하는 번거로움이 사라졌다.

내가 바로 다음 해본 것은 , 또 다른 Text를 얹는 것이었다.
같은 코드를 추가해보았다. 그랬더니 시뮬레이터가 두개가 나왔다.....?!
일단 넘어가보자.

내 목적은 두개의 String 즉, Label 을 묶는 것이었다. 근데 저렇게 두개가 나오다니... 하던 찰나에 ZStack 이라는 것을 강의에서 설명한다.

Zstack 은 View 들을 Z 축으로 나열? 겹친다.

이렇게 코너반경이 10포인트인 직사각형위에 고스트를 얹어보았다.
하지만 나는 테두리만 주황색인 직사각형을 원한다.

뒤에 .stroke() 를 통해 테두리의 넓이도 함께 정해보았다.
UIKit 과 다른점! 하나의 뷰 뒤에 계속해서 함수를 적으며 속성을 변경한다.
UIKit 에서는 뒤에 계속 적는게 아니라,
var Square = UILabel()
Square.layer.cornerRadius = 10.0
Square.backgroundColor = .blue
뭐 이런식으로 계속 써 내려갔었던 것으로 기억한다...
뷰마다 적어야 하는 속성이 달랐기 때문에 함수를 따로 만들어 사용하는 것도 번거로웠다.

이렇게 Zstack 클로저 밖에 .foregroundColor 을 적어주면
Zstack 안의 모든 뷰에 속성을 적용시킬 수 있다.

이런 식으로 카드를 만들고 나니, 카드를 따로 구조체화 시켜주고 싶었던 스탠퍼드 교수님.

CardView 구조체를 따로 만든다.

강의를 끝내기 전 마지막으로 HStack에 대해 보여주신다.
H 는 Horizontal의 약자로 수평으로 뷰를 나열한다.

이렇게 카드뷰 네 개를 나열한다.

카드뷰에 패딩과 foregroundColor이 있는것이 맘에 들지 않으니, HStack으로 바꿔주고, 카드가 뒤집힐 때도 생각을 해주자.

isFaceUp 이라는 Variable 을만들어주고
false 이면 카드 전체가 오렌지색으로 바뀌게 만들었다.
지금 isFaceUp을 선언해주지 않았는데,
CardView 내부에서 선언할 수도 있고 (var isFaceUp: Bool = false)
위에 ForEach 안의 CardView() 에서도 선언할 수 있다
Cardview(isFaceUp = false)
여기까지가 첫번째 강의이다.
다른 인터넷강의들에 비해 정말 훨씬,,, 깔끔하다.

다음 강의는 MVVM 이 제목에 들어있는데 아직도 잘 이해가 가지 않는 MVVM 모델에 대한 설명을 어떻게 할지 너무 궁금하다.

profile
iOS 개발, Flutter 개발, Swift, Dart, 42 Seoul 3기

0개의 댓글