[Swift-TIL] 코딩 없이 화면을 그리는 법 (이론+실습)

스위프트는 앱을 만들때에

코딩을 하지 않아도 화면을 그릴 수 있다.

 

사실 문법 없이도 가능하다.

대신 로직이 없을 때에만 가능하다..

즉, 무언가 누를만한 버튼이나

글자를 눌렀을 때 이렇게 되는

왔다갔다 하는 로직이 없을 때에만

가능한 부분이며,

쉽게 말해서 속없는 알맹이만

만들 수 있다는 거다.

 

그러나 이러한 부분도

중요한 요소이고,

앱에서는 UI 당연히 중요한거다.

 

그렇기 때문에 문법을 먼저 배우고

그 다음 순서로 적당하게

이전 문법들 다뤄보면서

속없는 알맹이는 만들어 봤는데,

그것보다는 조금 더 많이 정교하고

원하는 대로 만드는 방법에 대해

배운 내용을 써보려고 한다.

 

그래서

UI 그리는 법,

문법을 활용한 로직을

입혀보는 것까지

진행해보고자 한다.

 

코딩없이 화면을 그리는 방법은

클릭 몇번으로 충분히 소화가 가능하다.

키보드는 음.. 그렇게 많이 쓰지 않을 예정이다.

 

문법과 마찬가지로

UI요소들을 전부 기억하고,

외울 필요까지는 없다.

 

내가 원하는 것과 필요한것

그리고 현재 그리고 싶은것들 중에서

가장 적절한 부분을 골라서 그릴꺼다.

 

여기서부터는 이론이 의미가 없으니

실습편과 통합해서 다루어 보겠다.

 

 

새롭게 프로젝트 하나를 만들어보고자 한다.

앱을 만들꺼니까 app을 선택 후 다음으로 간다.

뭐... 딱히 여기서는

자기가 원하는 프로젝트 이름을 입력하고,

 

Organization Identifier

이런것 그냥 입력 안해도 무관하다.

 

음... 이글에서는 굳이굳이 설명하지 않겠다.

궁금하다면,

필자가 따로 정리해놓은

Xcode 간단 설명서를 살펴보는게 좋다. 

https://stayjun.tistory.com/44

[Xcode] Xcode 간단 설명서

그렇게 프로젝트를 만들면,

이와 같은 화면이 나왔을것이다.

음... 화면 전반적인 설명에 대한

내용은 위에서 첨부한 상세 설명을

보고 오는 것이 좋다.

 

사진에서 보이는 

Image(systemName: "globe")
	.imageScale(.large)
	.foregroundStyle(.tint)
	Text("Hello, world!")

이 부분을 바꿔보려고 한다.

그리는 방법은

오른쪽 상단 위에 + 버튼으로

그릴 수 있다.

+ 버튼을 누르게 되면

각종 옵션들을 제공하는데,

빨간 네모 박스에서 왼쪽에서부터

Views, Modifiers, Snippets,

Media, Color, Symbols

이렇게 있다.

 

이렇게 그냥 주석처리 해줬다.

주석처리는 커맨드 + / 다.

이렇게 주석 처리를 해놓으면,

프로그램 상에서

없는 코드로 인식되어

동작하지 않습니다.

 

그렇지만,

코드를 뜯어보면 작성자 또는

이 주석 처리된 코드를 보고 있는

사용자들에 눈에는 보이게 된다.

 

그러면 어떻게 이미지와 텍스트들을

+ 버튼을 통해서

뷰를 만들고 동작하게 하는지

한번 경험해보자.

이렇게 내가 원하는 뷰를 누르면,

해당하는 코드를 오른쪽 패널에서

볼 수 있고 또 어떻게 쓰이는지도

알수 있음을 확인할 수 있다.

 

해당되는 뷰들은 필요할 때

보면 되는 것이고,

원하면 검색도 해도 무방하다.

이렇게 인터페이스에 있어서는

스위프트UI가 다소

편하다는 의견도 많다.

 

필자는 드래그&드랍

형식으로도 사용하는데,

보통 같은 경우

그냥 코드를 작성하는게

더 편할때도 많다.

 

이 경우 자신이 더 편한 방법을

선택하는게 좋다.

 

심볼도 마찬가지로

이미지이기 때문에

즉석으로 넣기도 하고 그런다.

뭐.. 여기까지는 그렇게 어렵지 않게

진행할 수 있을 것이다.

 

조금 심화적으로

이미지의 컬러를 변경해보겠다.

오른쪽 패널 인스펙터를 보면,

style에서 색상이나

속성을 설정할 수 있다.

 

우선 임의로 Blue를 넣었다.

그리고 다시 + 버튼을 누르고

Color 로 가보면

이와같이 표시가 되어 있음을

알 수가 있다.

 

따로 코드를 작성하지 않는다 해도

이렇게 가지고서 속성을 추가를 할 수 있다.

 

스위프트UI를 하면서

가장 헷갈리는것 하나가

"모르는데 어떻게 쓰냐" 이다.

 

이러한 부분은 아무도

알려주지 않는다.

 

한참을 헤매이고서야 그때

알고 쓰는경우가 다반사다.

 

앞서 말했듯 속성들이나 + 버튼을 눌렀을 때의

뷰나 모디파이어 전부 알필요는 없지만,

한번쯤은 쭉 들여다 보면 도움이 된다.

 

음... 전에는 이 인스펙터 내에서

Add Modifier 라는 메뉴를 통해서

좀더 가독성이 좋게

접근이 가능했던 것 같은데...

요런식으로(?)

흠... 최근 Xcode 에서는

그런 부분이 잘 안보인다..

요즘은 내가 원하는 코드에

.(점) 을 찍으면 그와 관련되어

이 text라는 코드는 alert 라는 속성을

이용할 수 있구나 라는것을

대강 알 수 있다.

 

이름들이 직관적이기 때문에

궁금하면 한번쯤은

해보는것도 괜찮다.

 

몇몇 코드들은 할 수 있는데,

지금 상태에서 안보이는 것들도 있어서

그런것들을 다 해볼 필요는 없고

그냥 "그런게 되는 구나" 라고

인지만 하고 있으면 된다.

 

단순하게 키워드를 기억하고

훗날 뭔가를 하고 싶을 때

궁금할 때 그 키워드를 꺼내서

검색을 해보거나 직접 해보는게 좋다.

 

단순하게 코드가 아닌

+버튼을 통해서 UI만 짜봤는데,

사람마다 다르겠지만,

필자의 경우는 요즘엔 그냥

코드로 쓰는게 더 편하다고 느낀다.