[Swift-TIL] 오토레이아웃 맛보기

오늘은 배운 오토레이아웃을

글로 작성해보고자 한다.

 

이전 뷰 컨트롤러를 공부하면서

만들어 놓은 컴포넌트들이다.

 

각자 본인이 만들어본 화면이 있을 수 있는데,

그 화면이 잘 나오고 있는가?

정말 잘 나오고 있는가?

 

여기서 내가 그리는 대로

화면이 잘 나오긴 한다..

 

너무 괜찮은것 같아 보이는

스토리보드

 

하지만.. 아닐꺼다..

단번에 디테일 하게 설명하기에는

너무나 어렵다.

 

간단하게 그림으로 설명을 해보자면,

음.. 이건 애플에서 제공하는 이미지를

따라 그려본거고,

컴포넌트의 크기를 결정하는 요소다.

용어들만 봐주면 될꺼다.

 

너비 Width

높이 Height

가로 가운데 Center X

세로 가운데 Center Y

Baseline 이런것과

쟤는 Not An Attribute 라고 되어 있고,

나머지는

Top

Left or Leading

Right or Trailing

Bottom

 

뭔가 정말 많은데

쉽게 말해보자면,

네모 파란 박스가 컴포넌트이고,

이 박스의 크기를 결정하는 요소들이

왼쪽과의 거리공백,

오른쪽과의 거리공백,

위 아래의 공백,

너비 Width,

높이 Height

 

6개 정도라고 생각하고

그 중 3개정도는 결정이 되어야

그 크기가 완전 픽스 될 수 있다.

 

물론 한 두개 만으로도 할 수 있는데,

보통 3개 정도가 되야

언제나 안정적으로 크기가 고정된다.

 

그건 실습을 하면서 보려한다.

 

이렇게 컴포넌트 크기를 결정하는 요소

제약이 바로 오토레이아웃과

Constraints(컨스트레인트) 이다.

 

문제가 뭐냐하면,

다양한 화면에서 같게 나오도록 하는

방법을 말한다.

 

지금까지 시뮬레이터를 하나만 썻는데,

아이폰 마다 크기가 다른건 다 알꺼다.

 

높이도 너비도 다르고

전부 다르다는 것이다.

 

당연한 이야기지만,

어느정도 비슷한 위치에 놓이긴 한데,

그 크기에 따라 위치에 따라

어떻게 바뀌는지 살펴보고

굉장히 다뤄야 할 내용이 많고

공부하다보면 얘만 막 강의하는

강의가 많은 만큼 공부할 부분이 많다..

 

그렇다고 해서 또

안할 수는 없는 노릇이다.

 

이글에서는 조금 맛 보기?

느낌으로 글을 적어 나갈 생각이다.

 

너무 디테일하게 들어가면,

글이 너무 길어지고..

파다보면, 이 글의 목적성을

잃어버릴 수 있으니

배우고 알게된 내용만

알차게 작성할 예정이다.

---

왼쪽에 있는 이미지를

오른쪽에 있는 이미지처럼

위치를 바꿔주고 조정해보고

시뮬레이터를 실행해봤다.

잘 맞는것 같은데..

뭐 문제가 될게 없지 않나?

일단 얘는 아이폰 16 시뮬레이터다.

그리고 Xcode에 스토리보드도 아이폰 16이다.

 

어떻게 알 수 있는가?

이미지 처럼의 화면에서 알 수 있다.

이렇게 아이폰 16버전에서 앱을 만들고나서

배포까지 하게 될 때

아이폰에는 여러 종류의

디스플레이가 존재하는데,

다른 사람들의 화면에서는 이 앱이

어떻게 보여질까?

 

하단의 이아폰 종류를 바꿔볼 수 있다.

아이폰 11프로 맥스로 바꿔보겠다.

엇...?

뭔가 화면이 부분부분 여백이 생기고

조금씩 비틀린다.

 

그러면 다시 맞추면 되지 않나?

아니다.

 

또 다른기종 또 다른기종

바꿀 때마다 위치가 뒤틀려서

원하는대로 나오지 않는 걸 알 수 있었다.

 

이유는 오토레이아웃을

걸어주지 않았기 때문이다.

 

어떻게 오토레이아웃을 주는가?

원하는 컴포넌트를 선택 후

인디게이터에서

Show the Size inspector

쉽게 삼각형을 선택하고

하단에 있는 Add New Constraints

위와 아래,

양 옆에 어떻게 놓을지를

제약을 주는거다.

 

만약 왼쪽 즉, 리딩에 20만큼을 주게되면

빨간 색으로 선이 표시될꺼다.

너무 타이트하게 해 놓아서

오른쪽 사진처럼 줄여보고 확인해봤다.

오른쪽 처럼 뜨는게 맞다.

 

이렇게 빨간색으로 나오는 이유는

제약이 필요해서이다.

얘가 20만큼 떻어져 있는건 맞지만,

오른쪽으로 얼마만큼 가야하는지

전혀 모르는 상태인거다.

 

그래서 20만큼 떨어져서

언제까지 가야 되는건지

결정을 해달라며 시위하고 있는거다.

두가지 방법이 있는데,

인디게이터에서 보면 리딩이

20만큼 되어 있는걸 알 수 있다.

 

그러면 오른쪽도 20을 주게되면,

빨간색 선이 하나 사라졌음을 알 수 있다.

 

여기서도 한가지가 사라졌음을 알 수 있었다.

인디게이터에서도 확인 할 수 있었다.

 

그렇지만 아직도 문제가 있어보인다.

높낮이의 관한 문제이다.

높 낮이가 얼마나 되어야 하는지 감이

전혀 오지 않았다.

 

그냥 무작정 위에 값을 주게 되면,

레이블이 문제를 제기한다.

"레이블 왈 : 야 그렇게 높이를 주면,

나는 어디 있어야 하는거냐?"

아..

다른 얘들얘들도

이럴것 같아서

굉장히 복잡하고

어려워지기 시작한다.

 

다시 지워줬다..

 

방법이 하나 더 있는데,

컨트롤을 누르고 화면과

제약 관계를 연결하는 방법인거다.

그중에서

"Center Vertically in Safe Area"

이걸 선택을 했다.

 

이렇게 하면,

현재 보이는 화면의 수직에서

가운데 즉, Center Y

이렇게 되서

화면의 딱 정 가운데에 있을 것이고,

왼쪽 오른쪽 20씩 떨어지게 한 상태가 된다.

 

알기 쉽게 아이패드 기종으로 바꿔봤다.

기종을 바꿔봐도 왼쪽 오른쪽 20

한 가운데에 정확하게 보여지고 있다.

걸어놓은 제약이 잘 들어갔다는걸

알 수 있다는 것이다.

 

이렇게 제약을 걸어주게 되면

어떤 화면이 된다 하더라도

계속 같은 화면을 볼 수 있는것이다.

 

엄밀히 말하자면,

디스플레이의 크기가

다 달라지기 때문에

전부 다른 화면이 그려지는 거다.

 

여러 사용자가 같은 느낌의 화면을

볼 수 있도록 도와주는 장치가

이러한 오토레이웃인거다.

 

그리고 나서

제약이 없는 얘들에게

제약을 걸게되면

무너지게 된다.

현재 제약을 잘 준 컴포넌트 바로 위에 있는

얘와 Top으로 연결을 했는데

뭔가 주황색 선이 생겼다.

문제가 있는 컴포넌트를 클릭 후

오른쪽 인스펙터에서

지금 걸려있는 제약을 더블클릭 해보면,

Horizontal Slider의 Top과

Medium Activity Indicator

저 로딩 모양의 이름이다.

Medium Activity Indicator의 Top이

걸려 있는것이다.

 

여기서 그냥 실행을 해보면

스토리 보드에서는 정상적으로 보이는데,

시뮬레이터에서는 다르게 보인다..

이유는 위에서 말했듯이

제약이 같은곳에 걸려 있기 때문인거다.

 

똑같은 Top을 가지고 있는것이다.

왼쪽에서도 말하고 있다.

"좌우로 X포지션이 결정이

안되어서 혼란스럽다. 알려줘라.."

라고 하고 있는것이다.

 

얘는 가운데로 줘보고

실행을 해보면 아래와 같이 된다.

Top는 둘이같고,

가운데가 딱 맞아 있다.

 

근데, 이거 어떻게 해결을

해야하는건가..?

 

어렵지 않다.

일단은 Medium Activity Indicator에게 걸려있는

Top을 지워버린다.

이후 다시 add Constraints

그리고 적당히 거리를 입력해주고

add해주면 된다.

이런결과로 나오게 된다.

Horizontal Slider의 Top과

이 Medium Activity Indicator의 바텀이

56.67만큼 떨어져있다.

 

이상한가?

아이패드로 바꿔봤을 때

레이아웃이 잘 잡혀 있는걸 볼 수 있었다.

여담이지만,

위치의 경우 56.몇 이런건

보기는 좀 그렇긴 하다..

 

독자들은

되도록이면 소숫점이 없게

설게하길 바란다..

 

사실 이러한 오토레이아웃은

정말 많이 해보고

스스로 경험을 쌓아나아가야

충분히 익힐 수 있다.

 

남은 컴포넌트들도

사이즈를 조절한다던지,

위치를어디로 잡아야 한다던지 등

제약을 어떻게 거는 게 단단할지

어떤 화면이 와도 원하는

모습을 볼 수 있도록 할 수 있는지는

경험과 연습으로 커버를 해야한다.

 

이렇게 오토레이아웃 맛보기를

정리해봤다.

 

개인적으로 이 오토레이웃을

정리하면서 필자는 오토레이아웃이

너무 맵게만 느껴졌다..

 

아직도 부족하지만,

경험을 계속 쌓아 나아가다 보면,

지금보다 더 나은

자신이 되어 있을것이라

자신할 수 있다.