SwiftUI에서 많이 하는 실수 - Modifier 순서를 이해하지 못해 스타일이 적용되지 않는 실수

SwiftUI에서 많이 하는 실수 - Modifier 순서를 이해하지 못해 스타일이 적용되지 않는 실수

 

SwiftUI의 View Modifier는 체이닝 순서에 따라 결과가 달라지는 함수형 스타일입니다.
같은 modifier라도 “앞에 오느냐, 뒤에 오느냐”에 따라 전혀 다른 UI를 만들 수 있습니다.
순서를 의식하지 않고 modifier를 붙이면,
cornerRadius가 안 먹거나, 배경색이 이상하게 보이는 등의 문제가 발생합니다.

---

1. 문제 원인

• UIKit의 속성 설정 순서와 같다고 생각
• “어차피 다 적용되겠지”라고 막 붙임
• background, clipShape, cornerRadius 간 관계를 모름

---

2. 나타나는 증상

• cornerRadius를 썼는데 모서리가 둥글게 안 보임
• background를 줄었는데 전체 영역이 아닌 텍스트만 색이 바뀜
• 그림자/패딩/프레임이 의도와 다르게 적용

---

3. 잘못된 코드 예시

Text("Hello")
    .background(Color.blue)
    .cornerRadius(8)   // ❌ Text 자체에만 cornerRadius가 적용되어 티가 안 남

또는:

Text("Hello")
    .cornerRadius(8)
    .background(Color.blue) // ❌ 파란 영역은 네모, 텍스트만 모서리 둥글게 시도

---

4. 올바른 코드 예시

4-1. padding → background → cornerRadius 순서

Text("Hello")
    .padding()
    .background(Color.blue)
    .cornerRadius(8)

• Text에 패딩을 먼저 줘 영역을 키운 뒤, 그 영역에 배경과 cornerRadius가 적용됩니다.

4-2. background에 clipShape 적용

Text("Hello")
    .padding()
    .background(
        RoundedRectangle(cornerRadius: 8)
            .fill(Color.blue)
    )

4-3. shadow는 가장 마지막에 두는 것이 일반적

Text("Hello")
    .padding()
    .background(Color.blue)
    .cornerRadius(8)
    .shadow(radius: 4)

---

5. 정리 및 팁

• Modifier는 “새로운 View를 반환하는 함수”가 이어지는 체인입니다.
• padding → background → clipShape/cornerRadius → shadow 순서는 일종의 관용적인 패턴입니다.
• 원하는 모양이 안 나올 때는, 각 단계 사이에 .border(.red) 같은 디버깅용 스타일을 넣어
  어느 단계에서 프레임/레이아웃이 어떻게 바뀌는지 직접 확인해보는 것이 매우 도움이 됩니다.