UIKit의 여러 UI Component와 Auto Layout를 이용하여, 버튼을 누르면 도시의 날씨, 온도 등을 보여주는 간단한 날씨 앱 만들기.
SF Symbol의 아이콘들을 이용하여 버튼을 누르면 도시와 날씨를 랜덤으로 추출해서 보여주는 앱으로, 뷰 구성요소로 컴포넌트로는 stack view안에 첫 번째로 크게 도시를 나타내는 레이블로 텍스트를 표현, 이미지를 표현하는 이미지뷰, 텍스트로 날씨를 표현, 두 번째로 stack view안에 텍스트뷰, 이미지뷰, 텍스트뷰로 첫 번째와 같이 표현, 세 번째로는 클릭할 때마다 랜덤으로 바뀌는 버튼을 사용.
해당 mini project는 아이폰 16으로 설정.
새 프로젝트를 생성
프로젝트 생성은 기존과 동일하므로 간단하게 요약.
xcode 에서 new project 생성 > ios > app > next > project 이름, storyboard, swift 확인 후 next
페이지를 담당하는 코드와 이미지를 나타내는 이미지뷰를 연결하기 위해 기존 viewController 이름 변경을 위해 기존 viewController를 삭제하고 WeatherViewController 생성.
xcode > file > new > file from template (cmd(⌘) + n) > cocoa touch class > next > WeatherViewController 클래스 만들기 > next
Storyboard ID에도 똑같이 WeatherViewController 이름으로 넣어준다.
Storyboard ID는 ViewController를 Storyboard에서 찾을 때 사용하는 ID. 나중에 뷰가 점점 많아지는 프로젝트나 앱을 개발할 때, Storyboard에서 ViewController를 찾을 때, 그때 고유 ID를 통해서 Storyboard에서 해당하는 ViewController를 쉽게 찾을 수 있다.
우선 뷰 자체의 Backgraund 컬러를 변경.
그 후 각각에 대해 오토레이아웃 정해야 하므로, 크게 vertical stack view를 사용하고 stack view를 잘 보이게 하기 위해 백그라운드 색상을 변경 > 이 부분은 나중에 다시 백그라운드 컬러 변경 예정.
오토레이아웃을 적용, 오토레이아웃을 통해 뷰의 위치와 크기를 알 수 있다.
스택 뷰 안에 들어가는 디자인 요소 배치.
스택뷰가 자동으로 수직 방향으로 정리를 해주지만 대신 시스템이 보았을 때 y축이 애매한 요소들이 있을 시, 아래 사진처럼 오토 레이아웃에 이상이 있다고 알려준다. 스택 포지션, 이미지 뷰, 레이블의 y포인트가 애매해 생기는 오류인데 보통 이미지 뷰의 이미지를 잡아 y축을 정리하면서 오토 레이아웃의 오류가 없어지는 것을 확인할 수 있다.
디자인을 잡기위해 위에서부터 정리.
첫 레이블에 설정할 도시 이름과 색상, 가운데 정렬 및 크기를 정하고, 해당 프로젝트의 심볼에 컬러를 주기 위해 SF Symbol에서 모노크롬(Monochrome)으로 되어 있는 것을 멀티 컬러(Multicolor)로 변경하면 색상이 보이는 것을 확인할 수 있다. SF Symbol 앱에서 변경 후 Xcode에서 랜덤모드를 멀티 컬러로 변경.
웨더 이미지의 사이즈는 변경하고 싶은 이미지뷰를 클릭 > Ctrl(⌃)누른 상태에서 마우스를 끌어주면(드래그 앤 드롭) 오토레이아웃 constraints를 정해줄 수 있다. 해당 높이를 설정하고, 현재의 사이즈대로 높이가 잡힌 것을 확인 후 원하는 높이로 사이즈 변경.
해당 이미지의 랜덤 모드가 해당 설정 높이와 비율에 맞게 들어가도록 Content Mode를 Aspect Fit으로 설정.
Aspect Fit은 상황에 맞게 비율 고정을 유지하면서 넣어주는 기능이라고 생각하면 쉽다. 이미지 사용 시 Aspect Fit 사용을 권장.
온도를 나타내는 레이블의 이름으로 온도와, 색상, 크기와 가운데 정렬로 맞춘 후, 27 º 도같은 온도 표현이나 특수문자 삽입 시 macOS에서 단축키 Ctrl(⌃) + Cmd(⌘) + Space를 누르면 이모지 및 특수기호를 선택할 수 있는 팝업이 열린다. 여기에서 다양한 기호, 심볼, 이모지를 선택하여 Xcode에 입력할 수 있다.
이미지뷰와 동일한 방식으로 버튼을 클릭 후 Ctrl(⌃) + 마우스를 누른 상태에서 드래그 앤 드랍으로 백그라운드 해당 높이를 설정. 나머지 설정으로는 Foregraund와 Backgraund 색상 변경 > 코너 스타일 변경 > 버튼의 이름과 텍스트 크기 설정 등을 해준다.
시뮬레이터로 돌려 봤을 때 레이블과 이미지 등 간격이 다소 상단으로 몰려 있으므로 해당 간격을 조절하기 위해 스택 뷰안 아이템들 간의 간격을 Spacing으로 조절해 준다.
버튼 디자인 변경하기.
스택 뷰 안에 버튼을 넣을 경우 버튼의 사이즈가 스택 뷰안에 꽉 차게 설정이 되어있다. 이 부분을 패딩을 줘서 디자인을 변경하고 싶을 시 버튼을 감싸는 뷰를 하나 만든 다음 그 안에 다시 버튼을 넣어주면 패딩값 변경이 가능하다.
그 부분을 변경하기 위해 버튼의 높이를 없애고, 백그라운드 컬러를 투명하게 변경. 영역을 알기 쉽게 하기 위해 백그라운드 컬러를 설정해 주는 것이 편하지만 이 부분을 생략.
버튼이 이 스택 뷰안에서 정중앙에 위치하고 버튼의 좌 우 양 옆의 간격이 있게 패딩을 줘서 디자인을 변경하기 위해,
버튼을 클릭 후 Ctrl(⌃) 누른 상태에서 뷰로 마우스를 끌어 뷰와의 관계를 설정한 후 수직, 수평방향으로 가운데 정렬을 해준다.
가운데 정렬을 했으므로 좌 우의 패딩을 주기 위해 더 많은 작업을 할 필요 없이 중앙을 중심으로 왼쪽만 패딩값을 주면 동일하게 같이 반영된다. 이 부분을 Leading Space to Container를 통해 Leading을 설정한 후 화면을 보면 주황색으로 선이 보이는 것을 확인할 수 있는데, 이 부분을 수동으로 업데이트 설정을 위해 Constraint 단축키 Option(⌥) + Cmd(⌘) + + 를 눌러 업데이트 반영이 된 것을 확인할 수 있다.
마지막 스택 뷰 디자인.
스택 뷰 안에 Verical Stack View를 넣고 그 안에 레이블과 이미지뷰 등 차례로 원하는 디자인에 맞춰 컴포넌트를 넣는다.
각각의 레이블과 이미지뷰 등의 컬러와 텍스트 사이즈 및 정렬을 정해준다.
이미지 뷰의 오토레이아웃을 정리 및 여러 개를 만들기 위해 cmd(⌘) + c / cmd(⌘) + v 로 복붙.
스택 뷰를 똑같이 분배하고 싶을 시 Distribution을 fill > fill Equally로 변경하면 균등하게 분배되는 것을 볼 수 있다.
이 부분도 스택 뷰라 끝까지 꽉 찬 모습을 확인할 수 있는데, 버튼이랑 똑같이 패딩값을 주기 위해
동일한 방법으로 뷰를 만들어 스택 뷰를 넣고 뷰 안에서 오토레이아웃을 주기 위해 먼저 스택 뷰를 뷰와의 관계를 연결시켜 주고, 설정 시
Shift(⇧) 눌린 상태에서 클릭 시 다수 선택 후 엔터.
오토레이아웃이 적용 안될 시 Constraint 단축키 Option(⌥) + Cmd(⌘) + + 를 눌러 업데이트 설정.
각각의 컴포넌트 높이를 정해준다.
그 후 패딩 값 설정을 해주고, 다시 데이터를 업데이트 해주기 위해 cmd(⌘)+ c / cmd(⌘) + v 로 복붙. 시뮬레이터로 확인.
시뮬레이터로 돌렸을 시 버튼의 위치가 높아 위치를 변경해 주고, 스택 뷰의 불필요한 백그라운드 컬러를 변경한다.
각각의 컴포넌트의 데이터를 변경해주고 실제로 데이터 업데이트 구현 뷰 구성 완료.
화면 중앙의 큰 부분을 차지하는 스택 뷰안의 컴포넌트들인 도시와 날씨, 온도가 버튼을 클릭 시 랜덤으로 변화하도록 하는 부분의 로직을 실제 코드랑 스토리보드를 연결해서 구현.
뷰 컨트롤러의 버튼을 눌렀을 때 어떤 액션이 취해지도록 하기 위해 Assistant를 통해 연결된 코드를 보이도록 뷰 컨트롤러를 뜨게 한다.
연결된 뷰 컨트롤러에 버튼을 클릭 > Ctrl(⌃)을 누른 채로 코드에 끌어주면 @IBAction을 넣을 수 있다.
실제 로직을 구현 시 도시를 표현하는 레이블, 날씨를 표현하는 이미지뷰, 온도를 표시하는 레이블들을 실제로 사용되는 UI 컴포넌트를 코드에 연결할 때 같은 방식으로 클릭 > Ctrl(⌃)을 누른 채로 코드에 끌어 @IBOutlet으로 연결해 준다.
사용된 도시, 날씨, 온도 등의 데이터 작성.
시뮬레이터에서 버튼을 클릭할 때마다 print가 잘 동작하는 것을 콘솔에서 확인 가능.
첫 번째로 도시에 시티 레이블의 cities 배열 안에 있는 아이템 중에 하나를 랜덤으로 뽑아서 세팅.
두 번째로 뷰 안에 들어가는 이미지는 UI이미지에서 weathers 배열 안에 있는 아이템 중 하나를 랜덤으로 이미지로 보여주도록 세팅.
즉, UI이미지뷰라는 클래스 안에 이미지 속성 해준 것을 다시 재설정해준다고 생각하면 된다.
그다음으로 클릭이 되었을 때 랜덤으로 세팅이 되게끔 로직을 구성해 준다.
시뮬레이터로 확인 시 시스템이미지가 랜더링 될 때 템플릿으로 보여주므로 색상을 랜더링 모드로 변경해야 한다. 랜더링 모드로 변경하고 넣어주면 원래의 이미지로 색상이 출력된다.
오리지널이 아닌 템플릿으로 하면 밑의 좌측 사진처럼 기본적인 uI이미지 뷰에 틴트 컬러가 먹힌 것을 확인할 수 있다. 틴트 컬러를 변경 시 다른 색상도 가능하다.
템플릿이란 이미지의 형태만 가져다 쓰고 그 내부에 보이는 컬러는 해당하는 UI의 컴포넌트에 틴트 컬러로 적용된 것을 가져다가 쓴다.
템플릿이 아닌 원래 이미지 본래의 색을 가져다 쓸 경우 오리지널을 쓰면 된다.
스토리보드에서 UI컴포넌트들을 구성하는 것을 해보고 원하는 의도의 유치에 오토레이아웃으로 설정하고, 오토레이아웃을 넣는 방법이 여러 가지 있는데 다른 글에서 정리.
UI컴포넌트가 여러 개 있는데 그중 스택 뷰로 간편히 정리, 수직 수평 스택뷰의 장점으로 > 자동으로 UI컴포넌트 위치를 잡아준다.
Verical 스택뷰의 경우 위아래 정렬, Horizontal 스택뷰의 경우 수평방향으로 정렬과 분배 방식도 설정이 가능하기 때문에 최대한 자동으로 편하게 사용하기 위해 또는 편리하게 배열들을 잘 맞추기 위해서 사용한다.
SwiftUi에서도 스택 뷰를 많이 활용하기 때문에 UIKit에서 SwiftUi로 넘어가는 준비를 하는 과정이 필요한데
UIKit 구성을 할 때 스택뷰를 최대한 활용하는 게 SwiftUi 전환하고 준비하는데 용이하다.
'IOS > UIKit' 카테고리의 다른 글
| [UIKit] mini project ChatList(UICollectionView) (1) | 2025.08.02 |
|---|---|
| [UIKit] mini project StockRank(UICollectionView) (2) | 2025.07.29 |
| [UIKit] mini project 심볼롤러(SymbolRoller) (0) | 2025.07.07 |
| [UIKit] 기본 UI 컴포넌트(Component) / 오토레이아웃(Auto Layout) (3) | 2025.07.05 |
| [UIKit] UIKit app 코드구조 / MVC 디자인 패턴 (0) | 2025.07.03 |