[SwiftUI] ViewModifier를 활용하여 가독성 높은 UI 코드 작성하기

 

SwiftUI에서 UI를 구현할 때, .padding(), .background(), .overlay() 등 여러 modifier를 자주 사용하게 됩니다.

 

하지만 이러한 modifier들이 많아질수록 코드의 길이가 길어지고 가독성이 떨어질 수 있습니다.

이번 글에서는 예제 코드를 통해 이러한 문제를 해결하는 방법을 살펴보겠습니다.

 

---

 

 

1. 기존 코드

아래 화면은 여러 개의 ViewModifier를 사용하여 구현되었습니다. 각 요소를 하나씩 살펴보겠습니다.

 

 

 

1.1 둥근 텍스트 버튼

 

둥근 텍스트 버튼은 좌우 10, 상하 5의 여백을 가지며, 흰색 배경과 검정색 외곽선을 가지고 있습니다. 또한, 그림자 효과가 적용되어 있으며, 모서리 둥근 정도는 20입니다.

 

 

 

 

 

1.2 둥근 VStack안에 이미지와 텍스트가 있는 뷰

 

이미지와 텍스트가 포함된 둥근 VStack은 좌우 50, 상하 5의 여백을 가지며, 배경색은 #D1BDFF이고 검정색 외곽선이 적용되어 있습니다. 그림자 효과는 없으며, 모서리 둥근 정도는 20입니다.

 

 

 

 

 

1.3 둥근 외곽선과 배경을 가지는 TextField

 

둥근 외곽선과 배경을 가진 TextField는 상하좌우 10의 여백을 가지며, 배경색은 흰색이고 외곽선 색상은 #AAAAAA입니다. 그림자 효과는 없으며, 모서리 둥근 정도는 15이고, 외곽선 바깥쪽으로 좌우 50의 여백을 추가로 적용하였습니다.

 

위의 세 가지는 용도와 모습이 다르지만 중복되는 modifier가 여러 개 있습니다

 

중복된 modifier를 재활용하는 방법을 고민하던 중, Apple 공식 홈페이지에서 해결 방법을 찾았습니다.

 

ViewModifier 프로토콜을 채택하는 구조체를 사용하면, content와 상관없이 중복되는 viewModifier를 재활용할 수 있습니다.

 

 

 

 

 

2. ViewModifier 프로토콜 채택

2.1 코드

 

apple 공식 문서를 참고하여 ViewModifier 프로토콜을 채택하여 둥근 박스 Modifier를 정의하는 RoundedBox를  만들었습니다.

각 요소는 아래와 같습니다.

1. backgroundColor:  둥근 박스 배경색 ( 기본 값은 투명 )
2.  borderColor: 둥근 박스 테두리 ( 기본 값은 투명 )
3. cornerRadius: 둥근 정도
4. padding: 안쪽 여백 ( 기본값은 0포인트 )
5. useShadow: shadow 효과 사용 여부 ( 기본 값은 false )

 

 

 

 

 

2.2 적용

이런 식으로 View에서 호출할 수도 있지만, 공식 문서에서는 확장(extension)을 자체적으로 정의하는 방법을 추천하고 있습니다.

 

 

 

 

공식 문서에 나온 방법으로 구현해보겠습니다.

 

위 코드처럼 extension을 구현하고, 아래 코드처럼 호출하면 정상적으로 적용된 것을 확인할 수 있습니다

 

 

 

 

 

하나의 View 파일에서 직접 만든 ViewModifier를 3개만 사용했을 뿐인데, 23줄을 줄일 수 있었습니다. 해당 ViewModifier를 더 많이 사용할수록 코드를 더 효율적으로 줄일 수 있습니다

 

 

 

해당 코드

GitHub - Leeyounhyoung/SwiftUICustomViewModifier: This project demonstrates the creation and use of custom ViewModifiers in Swif

 

 

 

참고문서

ViewModifier | Apple Developer Documentation