[SwiftUI] Spacer 이해하고 응용해보기

안녕하세요! 피피아노입니다 🎵

 

오늘은 SwiftUI에서 꼭 알아야 할 요소 중 하나인 Spacer에 대해 자세히 알아보려고 합니다.

 

Spacer는 레이아웃을 구성하는 데 있어 중요한 역할을 합니다. 이번 포스팅에선 Spacer의 기본적인 개념부터 고급 사용법까지 한 번 정리해보겠습니다!

 

Spacer란 무엇인가?

우선 애플 개발 문서에 나와 있는 설명부터 확인해보겠습니다.

 

"A flexible space that expands along the major axis of its containing stack layout, or on both axes if not contained in a stack"

 

번역을 해보면

 

"포함하는 스택 레이아웃의 주 축을 따라 확장되거나 스택에 포함되지 않은 경우 두 축을 따라 확장되는 유연한 공간입니다"

 

이런 말인데 전혀 모르겠죠? 제가 쉽게 설명드리겠습니다!

 

Spacer는 SwiftUI의 레이아웃 시스템의 핵심 요소 중 하나로, 뷰 사이의 공간을 만드는 데 사용됩니다.

 

Spacer는 뷰와 뷰 사이에 추가되어 양 뷰 사이에 자동적으로 공간을 생성합니다. 이는 뷰의 크기나 위치를 수동으로 조정하지 않고도 레이아웃을 유연하게 만들 수 있게 해줍니다.

 

Spacer의 사용법

Spacer를 사용하는 가장 기본적인 방법은 뷰와 뷰 사이에 Spacer()를 추가하는 것입니다. 이렇게 하면 Spacer는 가능한 많은 공간을 차지하려고 합니다.

 

글로만 보면 이해하기 어려우니 Xcode로 한 번 살펴보겠습니다.

(일부분은 개발자 소들이님의 블로그를 참고하여 작성 되었습니다)

위처럼 두 개의 Text의 HStack안에 들어 있습니다.

이미 두 Text 사이에 일정 간격이 존재하는데요? 라고 생각하실 수 있습니다.

 

하지만

HStack이라는 스택이 View를 배치할 때 사용하는 자체 Spacing이 있습니다. 이 부분은 HStack 개념에 대해서 포스팅할 때 다시 설명하도록 하겠습니다.

 

만약 Spacing을 0으로 주게 되면 이 두 개의 Text가 붙어 버리게 됩니다.

이렇게요!

 

근데 저 사이에 공백을 넣어서 좀 띄워주고 싶다? 

 

그럴 때 Spacer를 사용하면 됩니다!

Spacer를 넣으니 가운데 공간이 생겼습니다. 그런데 너무 많이 생겨버렸죠?

이런 일이 생긴 이유는 바로 Spacer의 특징 때문입니다.

 

아까 설명 했듯이 Spacer는 가능한 많은 공간을 차지 하려고 하기 때문에, 기본적으로 사용 가능한 전체 공간을 띄워 버립니다.

 

Spacer를 중복해서 사용해보면

이렇게 텍스트 양쪽에 똑같은 너비의 공간이 생긴 것을 확인할 수 있죠!

 

다시 말해서 텍스트의 양쪽을 띄워줘야 하는데 Spacer를 3개 사용 했으니, 텍스트가 차지하는 공간을 제외하고 전체 공간을 3등분해서 나누어 가졌다! 라고 이해하면 됩니다.

 

이제 Spacer의 개념에 대해서 이해가 되나요?

 

근데 여기에서 문제점이 있습니다. 

 

바로 내가 원하는 만큼 공간을 띄우는 게 아니라 자동으로 공간이 띄워진다는 거죠.

 

이런 문제를 해결하기 위해선 .frame 메소드를 사용하면 됩니다.

 

Spacer 크기 조절

Spacer는 .frame 메소드를 통해 크기를 조정할 수 있습니다. 이를 통해 Spacer가 차지하는 공간의 크기를 조절할 수 있습니다.

 

예를 들어, Spacer().frame(width: 20)라고 하면 Spacer의 너비를 20으로 설정할 수 있습니다.

이렇게 텍스트 사이에 20만큼 공간이 생긴 것을 확인할 수 있습니다.

 

 

그럼 궁금점이 하나 생길 수도 있습니다.

 

Spacer 사용 이유

SwiftUI에서 다른 레이아웃 조정 방법들도 존재하는 것 같은데, Spacer를 사용하는 이유가 뭔가요? 

 

SwiftUI에서는 다양한 레이아웃 조정 방법들이 존재하지만 Spacer를 사용하는 것이 효율적인 이유는 주로 레이아웃 조정의 유연성과 간결성 때문입니다.

 

유연성: Spacer를 사용하면 뷰의 위치를 수동으로 지정하지 않고도 뷰 사이에 자동으로 공간을 생성할 수 있습니다. 이는 뷰의 위치와 크기를 유동적으로 조정하는 데 있어 매우 유용합니다. 또한, Spacer는 VStack, HStack, ZStack 등 다양한 스택 뷰와 함께 사용될 수 있어 다양한 레이아웃 시나리오에서 활용할 수 있습니다.

 

간결성: SwiftUI는 선언적 UI 프레임워크로, UI를 선언적으로 구성하는 것을 목표로 합니다. 이는 코드를 간결하고 읽기 쉽게 만들어 줍니다. Spacer를 사용하면 코드 줄 수를 줄이면서도 뷰 사이의 공간을 효과적으로 조절할 수 있습니다.

 

따라서, SwiftUI에서 Spacer를 사용하는 것은 레이아웃을 유연하고 간결하게 조정하는 데 있어 매우 효과적인 방법입니다. 그렇다고 모든 상황에서 Spacer를 사용하는 게 정답은 아닙니다. 레이아웃 요구사항에 따라 다른 방법들을 사용하는 것이 더 효율적일 수도 있으므로, 상황에 따라 적절한 도구를 선택하는 것이 중요하니 상황에 맞게 사용하시길 바랍니다!!

 

 

감사합니다.

---

잘못된 내용이 있거나 더 좋은 내용 피드백은 언제나 환영합니다!

궁금하신 부분은 댓글로 질문 부탁드립니다!