[TIL] 스린이들 - 개발 진행 기록(1)

 

 

 

첫 프로젝트로 팀 소개 앱 만들기를 진행 중이다.

오늘은 둘째 날이고 각자 화면 1개씩 정해서 ui 작업을 하고 있다. 제목은 "Swift + 어린이"를 의미하는 스린이들로 결정했다. 내 아이디어가 채택되어 살짝 뿌듯했다.😊 프로젝트의 컨셉은 배우는 입장이라서 칠판 UI이다.

 

---

✔️ 오늘 한 작업

• 맡은 화면 디자인 작업
  • 오토레이아웃
  • 배경화면 및 폰트 설정
• 런치스크린 디자인

 

 

⚙️ UI 구성

1) QUIZ 화면

• 컴포넌트 차례로 쌓아 작업하기
• 오토레이아웃 잡아주기
• 배경 화면 넣기
• 폰트 설정하기

 

 

💡 구현해야 할 화면 

 

 

내가 구현해야 할 화면은 Quiz 화면이다. 

팀원분께서 피그마로 디자인 작업을 너무 잘해주셔서 큰 도움이 되었다!😊

 

 

 

💡컴포넌트 배치

 

 

오토레이아웃 같은 경우 자꾸 틀어져서 애먹었는데 튜터님이 많은 도움을 주셨다.

우선 가장 위 컴포넌트부터 Leading, Trailing, Top 이렇게 잡으면서 설정하는 게 가장 틀어지지 않았다.

레이아웃 같은 경우는 연습을 많이 해보는 게 제일 중요한 것 같다. 

 

추가한 Constraints

 

 

💡전체 UIViewController 코드

class ViewController: UIViewController {

    @IBOutlet weak var quizLabel: UILabel!
    @IBOutlet weak var profileView: UIView!
    @IBOutlet weak var questionLabel: UILabel!
    @IBOutlet weak var exampleView: UIView!
    @IBOutlet weak var example1: UIButton!
    @IBOutlet weak var example2: UIButton!
    @IBOutlet weak var example3: UIButton!
    @IBOutlet weak var example4: UIButton!
   
    override func viewDidLoad() {
        super.viewDidLoad()
        
        exampleView.backgroundColor = UIColor.clear
        // 배경 이미지뷰
        let backgroundImg = UIImageView(frame: UIScreen.main.bounds)
        backgroundImg.image = UIImage(named: "backgroundImg")
        // 기존 뷰에 배경 이미지뷰 추가
        self.view.addSubview(backgroundImg)
        self.view.sendSubviewToBack(backgroundImg)
        
        
        // profileView를 동그라미 모양으로 만들기 위해 모서리를 조정
        profileView.layer.cornerRadius = profileView.frame.size.width / 2
        // 모서리 조정 후 뷰의 레이어 속성에 반영
        profileView.layer.masksToBounds = true
    
        // 각 button 모서리
        example1.layer.cornerRadius = 30
        example1.layer.masksToBounds = true
        
        example2.layer.cornerRadius = 30
        example2.layer.masksToBounds = true
        
        example3.layer.cornerRadius = 30
        example3.layer.masksToBounds = true
        
        example4.layer.cornerRadius = 30
        example4.layer.masksToBounds = true
        
        // 버튼에 액션 추가
        example1.addTarget(self, action: #selector(buttonTapped(_:)), for: .touchUpInside)
        example2.addTarget(self, action: #selector(buttonTapped(_:)), for: .touchUpInside)
        example3.addTarget(self, action: #selector(buttonTapped(_:)), for: .touchUpInside)
        example4.addTarget(self, action: #selector(buttonTapped(_:)), for: .touchUpInside)
   
    }
    @objc func buttonTapped(_ sender: UIButton) {
        // 버튼이 탭되었을 때 실행될 코드 작성
        example1.backgroundColor = UIColor(red: 173/255, green: 132/255, blue: 104/255, alpha: 1.0)
    }

}

 

배경 이미지 설정, cornerRadius 설정은 ViewDidLoad() 에서 작성해 주었다.

추가로 임시로 버튼을 선택했을 시 버튼의 색상이 바뀌도록 구현했다.

 

 

 

✏️ 폰트 설정

 

폰트 파일을 추가한 뒤 Info.plist 에서 폰트를 추가하고 custom 폰트에서 설정해 줬다.

 

 

2) LaunchScreen

📌문제점

• 런치스크린 같은 경우 처음에 ImageView 2개와 커스텀 폰트 Label로 화면을 구성했다.
• 그랬더니 생긴 문제는 폰트가 바뀌지 않고 가운데 오는 이미지가 배경 이미지에 덮여 보이지 않는다는 것이었다.

📌해결

• 튜터님께서 런치스크린은 무겁게 가져가는 것은 애플이 지양하는 바라고 하셔서
  런치 스크린 배경 이미지 1개를 만들어 ImageView 에 넣어주었다.

 

 

3) 결과 화면

 

 

📌느낀 점

• 전에 공부하면서 오토레이아웃 잡는 방법이 오늘 작업하는 데도 도움이 되었다. (어떤 경험이든 도움이 된다는 사실)
• 9-9 커리큘럼이지만 프로젝트를 하다 보니 시간이 정말 빨리 간다.
• 찾아보고 시도해 보다 모르겠을 땐 바로 튜터님에게 물어보는 게 제일 좋은 방법이다. (친절하게 잘 알려주신다🥹)