[Swift-TIL] 간단하게 화면 하나 그려보기

오늘은 앱 화면중에

가장 처음 입장하게 되는 화면인

온보딩 화면 하나를 골라서

개발을 해볼 예정이다.

이러한 화면을 하나 그려보고자 한다.

이런 화면 살면서

한번쯤은 다 봤을꺼다.

 

아이폰 처음 샀을 때나

아이폰을 앱을 업데이트 하거나

다운로드 했을 때

앱을 열면 저런 화면이 나온다.

 

이러한 온보딩 화면은

앱을 더 잘 쓰기위해 꼼꼼하게

읽어 보는 사용자들이 많습니다.

 

사용자들의 필요한 정보들이

꽤 많이 들어있기 때문이다.

 

생각보다,

온보딩 화면을 만드는 건

간단하다고 할 수 있다.

 

그렇다면,

어떻게 만들 수 있을까?

일단 이런 비슷한 화면을

하나만 만들예정인데,

시뮬레이터에서

사진앱에 들어가면

이런 화면은 나온다.

 

물론 업데이트에 따라

다른 내용으로 소개 하겠다.

 

위 화면의 레이아웃을 뜯어보고,

어떻게 그릴지 고민을 한번 해보자.

 

음.. 간단하게 메모장에 적어보는것도

좋은 생각일 수 있다.

---

지금 눈에 보이는건

VStack 안에 모든내용이

포함 되어 있다는 걸 알 수 있다.

그다음 보이는건

제목과 이미지

HStack 과 텍스트

그리고 버튼이 보인다.

음~ 여기까지는 얼추 예상했는데,

디테일 한 부분은 실제로 개발을 하면서

실험 해보는것도 충분하니

이정도로 정리를 하고,

실제로 한번 만들어보자.

Onboarding 이라는 파일을

하나 만들어주었다.

 

시뮬레이터에서는

사진앱을 들어가면,

화면이 떠있는것처럼 보이지만,

그건 모달이기 때문에

지금은 크게 신경 쓰지 않아도 괜찮다.

일단은 VStack을 만들어주고

그안에 텍스트를 넣어줬는데

바로 생각나는건 HStack 이다.

이미지와 텍스트인데,

텍스트쪽에도 HStack 안에

VStack이 또 필요해 보인다.

그안에 텍스트가 들어가는것이고

음~ 머릿속에서 바로바로

구현이 되어간다.

이렇게 해주고

HStack을 복붙 해주고

음~ 이렇게 쌓아주고

버튼도 넣어줘보았다.

음.. 얼추 뼈대는 맞춘것 같다.

여기서부터 요소들을

채워 나가면 된다.

제일 위 텍스트에는 사이즈와

굵기, 패딩을 입혀주었다.

나머지 HStack에 들어간

이미지 내용과 텍스트 내용들을

각각 다르게 정리해주는데,

원하던 목표 화면과

비슷하게 만들어줬다.

 

음... 이미지는 찾기 귀찮아서..

그냥 비슷한걸로 이어줘봤다.

 

그런데,

음.. 뭔가 오른쪽 시뮬에서 보기엔

글짜들이 정렬이 하나도 안되어 있다.

 

이를 정렬 해보기 위해

VStack에 속성을 주도록 하겠다.

"alignment"로

"leading"값을 주었다.

여기서는 첫번째 텍스트인

Text("새로워진 디자인")이

헤드라인이 되겠고,

두번째 텍스트가

서브헤드라인이 되겠다.

이렇게 이미지에도 

.resizable()

.scaledToFit()

.frame(width: 35, height: 35)

.padding()

이렇게 주고,

VStack이 끝나는 지점에

.padding()

패딩을 줬다.

 

뭔가 그럴 싸 하게 변했다.

이미지의 패딩은 왼쪽에는

필요없을 것 같아서

"leading" 값을 주었다.

음~ 조금 더 완벽해지고 있는 것 같다.

(들썩 들썩)

아래 패딩엔 "trailing"을 주어서

좀더 가깝게 해주었다.

음... 너무 붙은 것 같아 보여서

"leading"쪽에서 4정도만 줘봤다.

이런식으로 줘도 되는데,

horizontal을 줘도 괜찮다.

미세하게 조정 해줬는데,

여러번 실험 해보는것도 나쁘지 않았다.

이미지의 foregroundColor를 주니

엄청 그럴 싸 해졌다.

 

저렇게 3번 반복되는거다.

복붙해주면된다.

근데 복붙 해주는 과정에서

여백이 조금 깨지기 시작했다.

 

음... 왜그런가 했더니

패딩에 패딩을

하나 더 줬기 때문일 수 있다..

 

그래서 HStack이 끝나는 지점에

.padding(.vertical) 을 줬는데..

음...크게 바뀌지 않아보이긴 하는데,

일단 이부분은 넘어가 보자.

 

버튼에도 속성을 줘보자

버튼 속성을 주는데,

여러가지로 실험해 보다가

maxWidth과 width의 차이점을

자연스럽게 알게 되었다.

 

maxWidth 길이에 상관 없이

끝까지 길어지는데,

width만 주었을 때는

원하는 값까지의

길이만큼만 늘어난다.

 

버튼쪽에는 속성의

순서들도 반드시

잘 생각해야한다.

 

.padding() 을 먼저 넣고

.frame(width: 300) 300만큼의 길이와

.background(Color.blue) 패딩의 길이 만큼의

색상을 입혀주고

.foregroundColor(.white) 글자 색상은 흰색에

cornerRadius를 10 넣어주었다.

음.. 이렇게 봤을 땐 전반적으로

위치들이 이상하다...

이럴땐 Spacer를 주면 된다.

우주는 아니고 공간을

넣어주는 거다.

 

버튼이 너무 밑에 있어서

바텀도 주겠다.

이렇게 넣어주고,

마찬가지로 맨 위 글짜에도

패딩을 위쪽에 주겠다.

음... 이제 저 찌부러진

여백들을 해결해야하는데,

흠...

음.. 각 HStack들의

속성값을 이리저리 만져줬는데,

해결이 되었다.

 

padding값도 빼보고,

vertical 값도 줘보고

별의 별 짓을 해보았다.

 

그만큼,

아직 레이아웃에 대한

이해도가 높지 않다는 뜻이겠다.

 

좀더 좀더 다뤄보고

공부도 해야겠다...

이렇게 화면 하나를 구성해봤는데,

음... 전반적으로 구성하면서

처음 의도 했던 레이아웃 형태가

그럴 싸 하게 나오니까 뿌듯하다.

 

뭐.. 가장 기초적인 화면 하나 그려본거니

앞으로 구성할 화면들을 생각해보면..

귀찮기도 하고,

지치기도 할텐데

괜찮다.

 

그렇게 성장하는 것이라고 생각하면서

화면을 하나하나 구성해나아가 보겠다.