화면 꾸미기 및 Xcode 단축키 정리

About this offer

곧 있을 프로젝트를 대비하기 위해 복습 겸 나중에 찾아서 보기 쉽게 퍼블리싱 개념과 단축키를 정리를 해보려고 합니당 스유에서는 화면을 뷰(View) 로 만들고, 뷰에 수식어(Modifier) 를 붙여 배치와 모양을 정함 수식어는 적용 순서에 따라 결과가 달라질 수 있음 ! I. 색상과 그라데이션 1-1) 단색 Text("Hello") .foregroundStyle(.blue) Rectangle() .fill(.orange) .foregroundStyle() : 글자나 도형의 색상 .background() : 배경 .tint() : 버튼·토글 등의 강조 색상 .opacity() : 투명도. $0$ 은 투명, $1$ 은 불투명 1-2) 그라데이션 LinearGradient( colors: [.blue, .purple], startPoint: .topLeading, endPoint: .bottomTrailing ) LinearGradient : 한 방향으로 색이 이어짐 RadialGradient : 중심에서 바깥으로 퍼짐 AngularGradient : 중심을 기준으로 원형으로 색이 이어짐 그라데이션은 배경이나 도형의 채우기로 사용할 수 있음 RoundedRectangle(cornerRadius: 20) .fill( LinearGradient( colors: [.pink, .purple], startPoint: .top, endPoint: .bottom ) ) II. 도형과 모서리 Circle() Rectangle() RoundedRectangle(cornerRadius: 16) Capsule() Ellipse() Circle : 원 Rectangle : 사각형 RoundedRectangle : 모서리가 둥근 사각형 Capsule : 양 끝이 둥근 캡슐형 Ellipse : 타원 도형 색은 .fill() , 테두리는 .stroke() 로 설정함 Circle() .fill(.yellow) .frame(width: 80, height: 80) .overlay { Circle().stroke(.black, lineWidth: 2) } III. 테두리, 그림자, 자르기 Text("카드") .padding() .background(.white) .clipShape(RoundedRectangle(cornerRadius: 16)) .overlay { RoundedRectangle(cornerRadius: 16) .stroke(.gray.opacity(0.3), lineWidth: 1) } .shadow(color: .black.opacity(0.15), radius: 8, y: 4) .clipShape() : 지정한 모양대로 뷰를 자름 .overlay() : 뷰 위에 다른 뷰를 겹침 .stroke() : 도형의 테두리를 그림 .shadow() : 그림자를 추가 IV. 여백과 크기 Text("제목") .padding(.horizontal, 20) .frame(maxWidth: .infinity, alignment: .leading) .padding() : 여백 추가 .frame() : 크기와 정렬 지정 maxWidth: .infinity : 가능한 가로 공간을 모두 사용 alignment : 뷰 안의 내용 정렬 Spacer() : 남는 공간을 채워 뷰를 밀어냄 훠ᅵᄋ훠이 padding 과 background 의 순서에 따라 배경 적용 영역이 달라짐 Text("버튼") .padding() .background(.blue) // 여백까지 배경색 적용 V. 레이아웃과 정렬 VStack : 세로로 배치 HStack : 가로로 배치 ZStack : 앞뒤로 겹쳐 배치 Spacer() : 뷰 사이 간격 조절 Grid , LazyVGrid : 격자 형태로 배치 HStack { Text("왼쪽") Spacer() Text("오른쪽") } alignment 로 정렬을, spacing 으로 뷰 사이 간격을 설정함 VStack(alignment: .leading, spacing: 12) { Text("제목") Text("설명") } VI. 반복 패턴과 배경 도형을 반복 배치하면 점이나 격자 같은 패턴을 만들 수 있음 LazyVGrid( columns: Array(repeating: GridItem(.flexible()), count: 5) ) { ForEach(0..<25) { _ in Circle() .fill(.blue.opacity(0.3)) .frame(width: 8, height: 8) } } 복잡한 패턴은 반복되는 뷰를 조합하거나 Canvas 를 사용해 그릴 수 있음 VII. 글꼴과 텍스트 스타일 7-1) 기본 글꼴 스타일 Text("큰 제목") .font(.largeTitle) 자주 쓰는 기본 스타일임 !!! .largeTitle .title , .title2 , .title3 .headline , .subheadline .body , .callout .footnote , .caption , .caption2 기본 스타일은 사용자의 글자 크기 설정에 따라 조절되는 동적 타입을 지원 7-2) 글꼴 크기·굵기·디자인 직접 지정하기 Text("SwiftUI") .font(.system(size: 28, weight: .bold, design: .rounded)) size : 글자 크기 weight : 글자 굵기 design : 글꼴 디자인 주요 굵기에는 .ultraLight , .light , .regular , .medium , .semibold , .bold , .heavy , .black 이 있고 글꼴 디자인에는 .default , .serif , .rounded , .monospaced 등이 있음 7-3) 글자 꾸미기 Text("강조할 문장!!") .font(.title3) .fontWeight(.semibold) .italic() .underline() .fontWeight() : 글자 굵기 .italic() : 기울임 .underline() : 밑줄 .strikethrough() : 취소선 .tracking() : 글자 사이 간격 .lineSpacing() : 줄 사이 간격 7-4) 문단 정렬과 줄 수 Text("여러 줄로 표시되는 설명되는 뮨장") .lineLimit(2) .multilineTextAlignment(.leading) .lineLimit() : 표시할 줄 수 제한 .multilineTextAlignment() : 여러 줄 텍스트 정렬 .minimumScaleFactor() : 공간이 부족할 때 글자 축소 비율 설정 VIII. 이미지와 시스템 아이콘 Image("profile") .resizable() .scaledToFill() .frame(width: 120, height: 120) .clipShape(Circle()) .resizable() : 이미지 크기 변경 허용 .scaledToFit() : 비율을 유지하며 이미지 전체 표시 .scaledToFill() : 비율을 유지하며 영역을 채움 .clipShape() : 원하는 모양으로 자르기 시스템 아이콘은 Image(systemName:) 으로 불러옴 Image(systemName: "heart.fill") .foregroundStyle(.pink) IX. 애니메이션 애니메이션은 상태값이 바뀔 때 뷰의 변화를 부드럽게 보여주는 기능 이고 @State 로 상태를 만들고 값을 바꾸면 화면이 갱신됨 9-1) 기본 애니메이션 struct AnimationExample: View { @State private var isExpanded = false var body: some View { VStack { RoundedRectangle(cornerRadius: 16) .fill(.purple) .frame( width: isExpanded ? 220 : 100, height: isExpanded ? 160 : 100 ) Button("크기 바꾸기") { withAnimation(.easeInOut(duration: 0.3)) { isExpanded.toggle() } } } } } withAnimation 안에서 상태값을 바꾸면 그 값에 영향을 받는 뷰가 애니메이션으로 바뀜 9-2) 자주 쓰는 애니메이션 곡선 .linear : 일정한 속도로 움직임 .easeIn : 천천히 시작해 점점 빨라짐 .easeOut : 빠르게 시작해 천천히 멈춤 .easeInOut : 시작과 끝이 부드러워짐 .spring() : 말그대로 스프링처럼 피용튀용 효과를 줌 .spring(duration: 0.5, bounce: 0.25) .animation(_:value:) 방식 특정 상태값이 바뀔 때 애니메이션을 적용 Circle() .fill(isSelected ? .pink : .gray) .frame(width: isSelected ? 120 : 80) .animation(.spring(), value: isSelected) value: 엔 애니메이션 변화를 감지할 상태값을 넣음 9-3) 자주 쓰는 변형 효과 Text("움직이는 뷰") .scaleEffect(isSelected ? 1.2 : 1.0) .rotationEffect(.degrees(isSelected ? 10 : 0)) .offset(x: isSelected ? 20 : 0) .opacity(isSelected ? 1 : 0.4) .scaleEffect() : 크기 확대·축소 .rotationEffect() : 회전 .offset() : 위치 이동 .opacity() : 투명도 변경 9-4) 뷰 전환 효과 transition 은 뷰가 화면에 나타나거나 사라질 때 적용하는 효과 struct TransitionExample: View { @State private var isVisible = false var body: some View { VStack { Button("보이기 / 숨기기") { withAnimation(.easeInOut) { isVisible.toggle() } } if isVisible { Text("안녕하세요!") .padding() .transition(.opacity) } } } } .opacity : 투명하게 나타나거나 사라짐 뿅 .scale : 작아지거나 커지며 전환 .slide : 옆에서 밀려 들어오거나 나감 .move(edge: .top) : 지정한 방향에서 이동 효과를 조합할 수도 있음 .transition(.opacity.combined(with: .scale)) 9-5) 애니메이션 적용 시 주의점 애니메이션할 속성이 상태값에 연결되어 있는지 확인 transition 은 뷰가 추가되거나 제거될 때 사용 상태 변경을 withAnimation 으로 감싸면 전환을 확인하기 쉬움 모든 변화에 애니메이션을 적용하면 화면이 산만해질 수 있음 X. 버튼과 상태에 따른 스타일 Button("확인") { print("눌림") } .buttonStyle(.borderedProminent) .tint(.purple) .buttonStyle() : 버튼 모양 설정 .tint() : 버튼 강조 색상 설정 @State : 화면 안에서 변하는 상태값 저장 @State 값이 바뀌면 그 값과 연결된 화면이 다시 그려짐 XI. Xcode 단축키 기능 단축키 앱 실행 Command + R * 빌드 * Command + B 실행 중지 Command + . 코드 자동 완성 Esc 현재 파일에서 찾기 Command + F 프로젝트 전체에서 찾 기 Command + Shift + F 코드 들여쓰기 정리 Control + I 줄 복사 Command + D 줄 이동 Command + Option + [ 또는 ] 주석 처리·해제 Command + / 미리보기 새로고침 Option + Command + P 빠른 도움말 Option 을 누른 채 심볼 클릭 파일 빠르게 열기 Command + Shift + O 단축키는 Xcode 버전이나 키 설정에 따라 달라질 수 있음 Xcode > Settings > Key Bindings 에서 확인 가능 핵심 요약 !! 배치: VStack , HStack , ZStack , Grid 색과 배경: .foregroundStyle() , .background() , 그라데이션 모양과 디테일: Circle , .clipShape() , .overlay() , .shadow() 크기와 여백: .frame() , .padding() , Spacer() 글꼴: .font() , .fontWeight() , .lineLimit() 움직임: withAnimation , .animation() , .transition() 빠른 작업: Xcode 단축키 활용 SwiftUI는 뷰를 만들고 수식어를 연결해 화면을 꾸미는 방식임 수식어 적용 순서에 따라 결과가 달라질 수 있으니 순서를 바꿔가며 확인하는 게 좋타