랜덤 컬러 생성 앱 프로젝트
프로젝트 소개
랜덤 컬러 생성 앱은 버튼을 클릭할 때마다 배경색이 랜덤하게 바뀌고, 현재 색상의 RGB 값을 화면에 표시하는 간단한 iOS 앱입니다. UIKit을 활용하여 기본 UI 컴포넌트와 사용자 이벤트를 다루는 연습을 해보세요!
학습 목표
1.
UIKit 기본 컴포넌트 활용: UIButton, UILabel, UIView 등을 익히기.
2.
사용자 이벤트 처리: 버튼 클릭 시 발생하는 동작 구현.
3.
Auto Layout: 반응형 UI를 구성하는 방법 학습.
4.
UIColor와 RGB 이해: 색상을 랜덤으로 생성하고, 그 값을 화면에 표시.
구현할 기능
1.
랜덤 색상 생성: 버튼 클릭 시 배경색이 랜덤하게 변경됩니다.
2.
색상 정보 표시:현재 화면 배경색의 RGB 값을 화면에 표시합니다.
3.
초기화 기능: 초기화 버튼을 누르면 배경색이 흰색으로 변경되고, RGB 값도 초기화됩니다.
요구 사항
UI 구성
1.
UIView: 화면 전체를 덮는 배경 영역.
2.
UILabel: 중앙에 RGB 값을 표시.
3.
UIButton: 화면 하단에 두 개의 버튼 배치.
•
"Change Color" 버튼: 랜덤 색상 변경.
•
"Reset" 버튼: 초기화.
구현 해보기
Step 1: 기본 UI 만들기
1.
UIView:
•
배경 역할을 하는 UIView를 화면 전체에 추가하세요.
2.
UILabel:
•
중앙에 텍스트를 표시하는 UILabel을 추가하세요.
•
초기 텍스트는 "R: 255, G: 255, B: 255"로 설정하세요.
3.
UIButton:
•
하단에 "Change Color"와 "Reset" 두 개의 버튼을 추가하세요.
•
Auto Layout을 사용하여 버튼을 정렬하세요.
Step 2: 랜덤 색상 생성 기능 구현
1.
랜덤 색상 생성 로직:
•
UIColor를 사용하여 RGB 값을 랜덤으로 생성하세요.
•
랜덤 색상을 생성할 때 아래 코드를 참고하세요:
let randomRed = CGFloat.random(in: 0...1)
let randomGreen = CGFloat.random(in: 0...1)
let randomBlue = CGFloat.random(in: 0...1)
let randomColor = UIColor(red: randomRed, green: randomGreen, blue: randomBlue, alpha: 1.0)
Swift
복사
2.
배경색 변경:
•
"Change Color" 버튼을 누르면 UIView의 배경색이 랜덤 색상으로 바뀌도록 구현하세요.
3.
RGB 값 업데이트:
•
랜덤 색상의 red, green, blue 값을 추출하여 UILabel에 표시하세요.
•
예제 출력: "R: 123, G: 200, B: 50".
Step 3: 초기화 기능 구현
1.
초기화 버튼:
•
"Reset" 버튼을 누르면 배경색을 흰색(UIColor.white)으로 설정하세요.
•
UILabel의 텍스트를 "R: 255, G: 255, B: 255"로 초기화하세요.
완성 조건
1.
버튼 클릭 시 배경색이 랜덤으로 변경되고, RGB 값이 표시됩니다.
2.
초기화 버튼을 누르면 배경색이 흰색으로 변경됩니다.
3.
모든 UI 컴포넌트가 Auto Layout을 통해 화면에 적절히 배치됩니다.