SwiftUI 01: Profile Card 만들기

개요

이 글은 SwiftUI 기본 레이아웃을 연습하기 위한 프로필 카드 예제입니다.

핵심 포인트

• VStack/HStack으로 정보를 묶기
• Image에 clipShape와 overlay로 원형 아바타 만들기
• 카드 영역에 background + cornerRadius 적용

간단한 예시 코드

struct ProfileCard: View {
  var body: some View {
    VStack(spacing: 12) {
      Image("avatar")
        .resizable()
        .frame(width: 88, height: 88)
        .clipShape(Circle())
        .overlay(Circle().stroke(Color.white, lineWidth: 2))
      Text("Hui")
        .font(.title2).bold()
      Text("iOS / SwiftUI")
        .font(.subheadline)
        .foregroundColor(.secondary)
    }
    .padding(20)
    .background(Color(.systemBackground))
    .cornerRadius(16)
    .shadow(radius: 6)
  }
}