인프런 커뮤니티 질문&답변

안녕하세요 강의 수강 중 이해가 안되는 부분이 있어서 질문 드립니다

import SwiftUI

struct ContentView: View {
    var body: some View {
        VStack{
            HStack{
                Image("dogProfile")
                    .resizable()
                    .frame(width: 120, height: 120)
                    .clipShape(Circle())
                    .overlay(
                        Circle()
                            .stroke(Color.teal, lineWidth: 3)
                    )
                VStack(alignment: .leading){
                    Text("이름: 키도")
                    Text("시바견")
                    Text("2017년 5월생")
                }
                // VStack 안에 있는 뷰에 모디파어어를 일괄 적용하고 싶을 경우 이런 식으로 구성할 수 있다(일괄 적용이라는 표현보단 Vstack 자체에 모디파이어를 적용했다는 표현이 더 옳을지도?
                .font(.system(size: 20)) // 정보 글의 폰트 사이즈
                .padding(.leading, 20) // 그림과 정보 글 사이의 공백
            }
            .padding(.bottom, 20)
            
            VStack(alignment: .leading, spacing: 10){
                Text("좋아하는 것")
                    .font(.system(size: 20))
                    .bold()
                Divider() // 좋아하는 것 밑에 있는 선을 그려주는 함수
                Text("- 각종 고기(🐮 = 🐷 = 🐔 > 🐟)")
                Text("- 장본 게  담겨 있는 종량제 봉투")
                Text("- 집에 새로 온 사람")
            }
            .padding()
            .background(
                RoundedRectangle(cornerRadius: 15)
                    .fill(.mint)
                    .opacity(0.2) // 색의 투명도를 지정하는 모디파이어 0이면 완전 투명
                    .shadow(radius: 5)
            )
            
            VStack(alignment: .leading, spacing: 10){
                Text("스킬")
                    .font(.system(size: 20))
                    .bold()
                Divider() // 좋아하는 것 밑에 있는 선을 그려주는 함수
                HStack(alignment: .top, spacing: 30){
                    VStack(alignment: .leading, spacing: 10){
                        Text("- 앉아")
                        Text("- 엎드려(앉아와 자주 혼동함)")
                        Text("- 하우스(집으로 들어가기)")
                    }
                    VStack(alignment: .leading, spacing: 10){
                        Text("- 손")
                        Text("- 코")
                    }
                }
            }
            .padding()
            .background(
                RoundedRectangle(cornerRadius: 15)
                    .fill(.pink)
                    .opacity(0.2) // 색의 투명도를 지정하는 모디파이어 0이면 완전 투명
                    .shadow(radius: 5)
            )
        }
        .padding() // 질문인 부분
    }
    
    struct ContentView_Previews: PreviewProvider {
        static var previews: some View {
            ContentView()
        }
    }
}

위 코드 맨 마지막 padding을 보면 가장 처음 사용하는 VStack에 .padding을 적용하는 코드입니다 궁금한 건 저 padding의 값을 50, 100 이렇게 설정해도 Vstack의 위 아래 여백은 변하지 않는다는 점입니다. 분명 .padding에 값을 넣어주지 않으면 기본적으로 상하좌우 모든 부분에 여백을 주는 걸로 알고 있는데 만 상하 부분의 여백이 변하지 않는 것을 확인했습니다.

개인적으로 여백을 넓게 잡으면 여백을 잡기 위해 글자나 사진 사이즈 등이 뭉개지는 현상이 발생할 줄 알았는데 좌우는 뭉개지는 데 상하는 뭉개지지 않더라구요 Vstack이 기본적으로 가지고 있는 공간이 있는 최소한의 건지... 혹시 뭉개지지 않는 이유를 알 수 있을까요??

그리고 혹시 // VStack 안에 있는 뷰에 모디파어어를 일괄 적용하고 싶을 경우 이런 식으로 구성할 수 있다(일괄 적용이라는 표현보단 Vstack 자체에 모디파이어를 적용했다는 표현이 더 옳을지도? 이 주석 제가 맞게 이해한 건지도 알려주시면 정말 감사하겠습니다..!

좋은 하루 보내세요! 감사합니다!