UIKit, H.I.G
요구사항을 세상에 시각적으로 보여주는 클라이언트 개발 공부 내용을 정리합니다.
-
[UIKit] 재사용 Component 개발하기 (1) - Toast Message 💡 재사용 Component 개발하기 시리즈 글을 시작하며 이번 33기 앱잼이었던 프로젝트에서 우리 iOS 팀이 추구한 방향 중 하나는, 앱 내에서 반복되는 컴포넌트(내비게이션바, 바텀시트, 알림 창, 토 mini-min-dev.tistory.com 1️⃣ HIG 살펴보기 : 팝업창(Alerts)이란? 보통 팝업창으로 알고 있는 알림창을 iOS 공식문서에서는 정확하게 Alerts라고 부른다. Alerts는 사용자에게 "중요한 문제를 알리는 용도"로 사용한다. 여기서 말하는 "중요한 문제"란 해당 작업으로 데이터가 파괴될 수 있는 경우, 새롭게 시작하는 혹은 앱 안에서 발생한 어떤 중요한 작업에 대해 사용자에게 알리기 위한..
[UIKit] 재사용 Component 개발하기 (2) - 팝업창 (Alerts)[UIKit] 재사용 Component 개발하기 (1) - Toast Message 💡 재사용 Component 개발하기 시리즈 글을 시작하며 이번 33기 앱잼이었던 프로젝트에서 우리 iOS 팀이 추구한 방향 중 하나는, 앱 내에서 반복되는 컴포넌트(내비게이션바, 바텀시트, 알림 창, 토 mini-min-dev.tistory.com 1️⃣ HIG 살펴보기 : 팝업창(Alerts)이란? 보통 팝업창으로 알고 있는 알림창을 iOS 공식문서에서는 정확하게 Alerts라고 부른다. Alerts는 사용자에게 "중요한 문제를 알리는 용도"로 사용한다. 여기서 말하는 "중요한 문제"란 해당 작업으로 데이터가 파괴될 수 있는 경우, 새롭게 시작하는 혹은 앱 안에서 발생한 어떤 중요한 작업에 대해 사용자에게 알리기 위한..
2024.02.24 -
💡 재사용 Component 개발하기 시리즈 글을 시작하며 이번 33기 앱잼이었던 프로젝트에서 우리 iOS 팀이 추구한 방향 중 하나는, 앱 내에서 반복되는 컴포넌트(내비게이션바, 바텀시트, 알림 창, 토스트 메시지 등)를 재사용할 수 있도록 만드는 것이었다. 공통으로 반복되는 부분과, 변화가 필요한 부분을 고민해서 모듈화 시킨 과정을 이번 시리즈에서 같이 느껴볼 수 있길 바란다. 1️⃣ Toast Message란? 토스트 메시지(Toast Message)는 원래 안드로이드에만 존재하는 컴포넌트이다. 보통 앱 사용 중, 사용자와의 상호작용은 계속 열어둔 상황에서 동시에 짧은 메시지를 사용자에게 보여주기 위해 사용하는 컴포넌트다. 사용자의 인터랙션이 별도로 없어도 특정한 시간 뒤에 표출, 사라짐 동작이 자..
[UIKit] 재사용 Component 개발하기 (1) - Toast Message💡 재사용 Component 개발하기 시리즈 글을 시작하며 이번 33기 앱잼이었던 프로젝트에서 우리 iOS 팀이 추구한 방향 중 하나는, 앱 내에서 반복되는 컴포넌트(내비게이션바, 바텀시트, 알림 창, 토스트 메시지 등)를 재사용할 수 있도록 만드는 것이었다. 공통으로 반복되는 부분과, 변화가 필요한 부분을 고민해서 모듈화 시킨 과정을 이번 시리즈에서 같이 느껴볼 수 있길 바란다. 1️⃣ Toast Message란? 토스트 메시지(Toast Message)는 원래 안드로이드에만 존재하는 컴포넌트이다. 보통 앱 사용 중, 사용자와의 상호작용은 계속 열어둔 상황에서 동시에 짧은 메시지를 사용자에게 보여주기 위해 사용하는 컴포넌트다. 사용자의 인터랙션이 별도로 없어도 특정한 시간 뒤에 표출, 사라짐 동작이 자..
2024.02.16 -
1️⃣ 이번 글에서 구현하고자 하는 기능은? 이번 글에서 구현할 기능은 예전에도 한번 구현해 본 경험이 있던 컬렉션 뷰에서 특정 Cell을 꾹 눌러 드래그할 때, Cell의 순서를 바꿀 수 있는 Drag & Drop 기능이다. 사실 이 내용은 예전에도 한번 다룬적이 있던 내용이다. (당시 썼던 글 내용이 궁금하다면, 아래 링크를 타고 넘어가봐도 좋다 ^__^) [UITableView] 테이블 뷰 Drag & Drop으로 cell 위치 바꾸기 그동안 맥북을 수리 맡기느라 iOS 관련 포스팅을 못하고 있었다. 거의 1주반에 달하는 긴 기다림의 시간이 지나고, 다시 달려보려고 한다🌊 오늘 다룰 Challenge는 테이블 뷰를 드래그 앤 드롭해서 mini-min-dev.tistory.com 당시 글에서는 테이블..
[UICollectionView] Drag & Drop cell 위치 변경, Delegate로 구현하기1️⃣ 이번 글에서 구현하고자 하는 기능은? 이번 글에서 구현할 기능은 예전에도 한번 구현해 본 경험이 있던 컬렉션 뷰에서 특정 Cell을 꾹 눌러 드래그할 때, Cell의 순서를 바꿀 수 있는 Drag & Drop 기능이다. 사실 이 내용은 예전에도 한번 다룬적이 있던 내용이다. (당시 썼던 글 내용이 궁금하다면, 아래 링크를 타고 넘어가봐도 좋다 ^__^) [UITableView] 테이블 뷰 Drag & Drop으로 cell 위치 바꾸기 그동안 맥북을 수리 맡기느라 iOS 관련 포스팅을 못하고 있었다. 거의 1주반에 달하는 긴 기다림의 시간이 지나고, 다시 달려보려고 한다🌊 오늘 다룰 Challenge는 테이블 뷰를 드래그 앤 드롭해서 mini-min-dev.tistory.com 당시 글에서는 테이블..
2024.02.01 -
0️⃣ 이번 리팩토링의 목적! 어쩌다 보니 커스텀 탭바를 구현하면서 공부한 내용이 시리즈 형식으로 쓰이게 되었는데, 어느덧 세 번째 글을 쓸 차례이다. 사실 두 번째 글에서부터 이어진 내용이긴 한데, 이번 리팩토링은 각각의 뷰들이 커스텀 탭바의 각 탭들을 클릭했을 때 개별적으로 표출되도록 구현했던 화면을, 하나의 스크롤 뷰 위에 모두 포함시키고 그에 따른 커스텀 탭바의 자연스러운 액션 (스크롤 위치에 따라 탭바가 움직이는 기능 + 각 탭을 클릭했을 때 자동으로 해당 위치까지 스크롤되는 기능)까지 주도록 변경하는 것이 목적이었다. 이 리팩토링을 위해 앞에서 StickyHeader도 적용을 시켰던 것이었기에, 이번 글에서는 추가적으로 남은 탭바의 자연스러운 액션을 구현하도록 한 부분에 대한 설명을 이어서 써..
[UIScrollView] 상단 커스텀 탭바를 만들어봅시다! (3) - 특정 위치 자동 스크롤 기능 추가0️⃣ 이번 리팩토링의 목적! 어쩌다 보니 커스텀 탭바를 구현하면서 공부한 내용이 시리즈 형식으로 쓰이게 되었는데, 어느덧 세 번째 글을 쓸 차례이다. 사실 두 번째 글에서부터 이어진 내용이긴 한데, 이번 리팩토링은 각각의 뷰들이 커스텀 탭바의 각 탭들을 클릭했을 때 개별적으로 표출되도록 구현했던 화면을, 하나의 스크롤 뷰 위에 모두 포함시키고 그에 따른 커스텀 탭바의 자연스러운 액션 (스크롤 위치에 따라 탭바가 움직이는 기능 + 각 탭을 클릭했을 때 자동으로 해당 위치까지 스크롤되는 기능)까지 주도록 변경하는 것이 목적이었다. 이 리팩토링을 위해 앞에서 StickyHeader도 적용을 시켰던 것이었기에, 이번 글에서는 추가적으로 남은 탭바의 자연스러운 액션을 구현하도록 한 부분에 대한 설명을 이어서 써..
2023.12.12 -
1️⃣ 오늘 구현할 기능, StickyHeader란 무엇일까? [UISegmentedControl] 상단 커스텀 탭바를 만들어봅시다! (1) - UISegmentedControl 활용 1️⃣ 오늘 만들어줄 화면은? 합동 세미나 과제로 테이블링 어플을 클론코딩하면서 만들었던 상단 커스텀 탭바의 내용을 정리해보겠다. 여러 글들을 찾아봤을 때, 상단 커스텀 탭바를 만들어주 mini-min-dev.tistory.com 오늘 글은 지난번 커스텀 탭바를 만들었던 내용에 이어서, 추가적으로 Sticky Header 기능을 구현해 준 내용으로 써보겠다. (커스텀 탭바 기능에 대한 설명은 위에 첨부해놓은 지난 글로 넘어가서 읽고 오길 바란다.) StickyHeader라는 말이 잘 와닿지 않아서 그렇지, 쉽게 설명하면 스..
[UIScrollView] 상단 커스텀 탭바를 만들어봅시다! (2) - StickyHeader 기능 추가1️⃣ 오늘 구현할 기능, StickyHeader란 무엇일까? [UISegmentedControl] 상단 커스텀 탭바를 만들어봅시다! (1) - UISegmentedControl 활용 1️⃣ 오늘 만들어줄 화면은? 합동 세미나 과제로 테이블링 어플을 클론코딩하면서 만들었던 상단 커스텀 탭바의 내용을 정리해보겠다. 여러 글들을 찾아봤을 때, 상단 커스텀 탭바를 만들어주 mini-min-dev.tistory.com 오늘 글은 지난번 커스텀 탭바를 만들었던 내용에 이어서, 추가적으로 Sticky Header 기능을 구현해 준 내용으로 써보겠다. (커스텀 탭바 기능에 대한 설명은 위에 첨부해놓은 지난 글로 넘어가서 읽고 오길 바란다.) StickyHeader라는 말이 잘 와닿지 않아서 그렇지, 쉽게 설명하면 스..
2023.12.07 -
1️⃣ 어떤 이슈가 있었는데? 오랜만에 예전에 쓴 글을 참고해서 gradinet가 적용되는 View를 만들어주려고 했다. 뷰(gradinetView)가 가지는 CAGradientLayer를 잡아서 색상, 위치, 그라디언트의 시작점과 종료 지점을 지정해 주고, gradient의 frame을 뷰의 bounds와 동일하게 선언해 주고, 이렇게 만들어진 CAGradientLayer 객체를 view의 layer에 추가해 주는 방식으로 만들어주면 될 것이라 생각했다. 하지만, CAGradientLayer 객체가 view에 추가되지 않아 Gradient가 적용된 View를 확인할 수 없었다. 이번 글에서는 해당 View에서 어떤 이유로 gradient가 적용되지 않았는지, 이 문제를 해결하기 위해서 사용한 방식은 어..
[UIView] View에서 CALayer에 추가해준 속성이 적용되지 않았던 이유 (bounds, frame, viewDidLayoutSubviews, layoutSubViews)1️⃣ 어떤 이슈가 있었는데? 오랜만에 예전에 쓴 글을 참고해서 gradinet가 적용되는 View를 만들어주려고 했다. 뷰(gradinetView)가 가지는 CAGradientLayer를 잡아서 색상, 위치, 그라디언트의 시작점과 종료 지점을 지정해 주고, gradient의 frame을 뷰의 bounds와 동일하게 선언해 주고, 이렇게 만들어진 CAGradientLayer 객체를 view의 layer에 추가해 주는 방식으로 만들어주면 될 것이라 생각했다. 하지만, CAGradientLayer 객체가 view에 추가되지 않아 Gradient가 적용된 View를 확인할 수 없었다. 이번 글에서는 해당 View에서 어떤 이유로 gradient가 적용되지 않았는지, 이 문제를 해결하기 위해서 사용한 방식은 어..
2023.12.01 -
1️⃣ 오늘 만들어줄 화면은? 합동 세미나 과제로 테이블링 어플을 클론코딩하면서 만들었던 상단 커스텀 탭바의 내용을 정리해보겠다. 여러 글들을 찾아봤을 때, 상단 커스텀 탭바를 만들어주는 방법은 크게 두 가지가 있는 것 같았다. CollectionView와 PageViewController를 함께 활용해서 만들어줄 수 있고, Segmented Control을 활용해서 만들어줄 수도 있었는데, 이번 글에서는 후자의 방식으로 구현하는 것을 소개해보겠다. (전자의 방식은 다음에 2탄으로 작성해보기로 하며) 두 방식 중 어떤 방식을 선택해야 하는가 했을 때, 구현 방식으로 본다면 Segmented Contol의 방식이 더 쉽겠지만, 이 방법은 각 탭 영역이 일정한 경우에만 사용할 수 있다는 제한사항이 있으므로 ..
[UISegmentedControl] 상단 커스텀 탭바를 만들어봅시다! (1) - UISegmentedControl 활용1️⃣ 오늘 만들어줄 화면은? 합동 세미나 과제로 테이블링 어플을 클론코딩하면서 만들었던 상단 커스텀 탭바의 내용을 정리해보겠다. 여러 글들을 찾아봤을 때, 상단 커스텀 탭바를 만들어주는 방법은 크게 두 가지가 있는 것 같았다. CollectionView와 PageViewController를 함께 활용해서 만들어줄 수 있고, Segmented Control을 활용해서 만들어줄 수도 있었는데, 이번 글에서는 후자의 방식으로 구현하는 것을 소개해보겠다. (전자의 방식은 다음에 2탄으로 작성해보기로 하며) 두 방식 중 어떤 방식을 선택해야 하는가 했을 때, 구현 방식으로 본다면 Segmented Contol의 방식이 더 쉽겠지만, 이 방법은 각 탭 영역이 일정한 경우에만 사용할 수 있다는 제한사항이 있으므로 ..
2023.11.26 -
0️⃣ Diffable Datasource? DataSource? UITableView와 UICollectionView를 사용할 때, 공통적으로 사용하는 두 객체가 있다. 그것은 바로 Delegate와 DataSource. 잠깐 Delegate와 Datasource의 개념을 복습하고 지나가보자면, MVC(Model-View-Controller) 프로그래밍 디자인 패턴에서 이 객체들을 바라봤을 때, 뷰를 그리기 위해 필요한 데이터를 제공하는 모델(M)의 역할은 DataSource가, 화면을 처리하는 뷰(V)의 역할은 테이블뷰 인스턴스가, 뷰의 모양과 동작을 관리하는 컨트롤러(C)의 역할은 Delegate가 담당한 셈이라고 이해하면 된다. 오늘 이 글에서는 데이터를 제공하는 DataSource 중에서도 (제..
[UITableViewDiffableDataSource] Diffable Datasource, 데이터가 달라졌을 때 View에 효율적으로 반영하는 방법0️⃣ Diffable Datasource? DataSource? UITableView와 UICollectionView를 사용할 때, 공통적으로 사용하는 두 객체가 있다. 그것은 바로 Delegate와 DataSource. 잠깐 Delegate와 Datasource의 개념을 복습하고 지나가보자면, MVC(Model-View-Controller) 프로그래밍 디자인 패턴에서 이 객체들을 바라봤을 때, 뷰를 그리기 위해 필요한 데이터를 제공하는 모델(M)의 역할은 DataSource가, 화면을 처리하는 뷰(V)의 역할은 테이블뷰 인스턴스가, 뷰의 모양과 동작을 관리하는 컨트롤러(C)의 역할은 Delegate가 담당한 셈이라고 이해하면 된다. 오늘 이 글에서는 데이터를 제공하는 DataSource 중에서도 (제..
2023.11.04 -
1️⃣ Intro 이번 글에서는 요즘 과제로 하고 있는 아이폰 기본 "날씨" 앱을 클론 코딩하면서 알게 된 SearchController와 SearchBar에 대한 내용을 정리해 보겠다. 내가 구현하고 싶었던 내용은 아래 내용과 같았다. 여러 지역의 날씨 데이터가 아래 gif에서 보이는 것과 같이 UITableView의 Cell로 구성되어 있을 때, NavigationBar에 포함되어 있는 SearchBar에 내가 검색하고 싶은 지역 이름을 입력하면, 해당 이름이 포함된 지역의 날씨 데이터 Cell만 TableView에 표출할 수 있도록 하는 내용이다. 2️⃣ UISearchBar? UISearchController? UISearchBar는 사용자의 텍스트 입력을 받는 텍스트 필드와 함께 검색/취소/북마..
[UISerarchBar] UISearchController를 이용해서 TableView의 특정 Cell을 표출하는 SearchBar1️⃣ Intro 이번 글에서는 요즘 과제로 하고 있는 아이폰 기본 "날씨" 앱을 클론 코딩하면서 알게 된 SearchController와 SearchBar에 대한 내용을 정리해 보겠다. 내가 구현하고 싶었던 내용은 아래 내용과 같았다. 여러 지역의 날씨 데이터가 아래 gif에서 보이는 것과 같이 UITableView의 Cell로 구성되어 있을 때, NavigationBar에 포함되어 있는 SearchBar에 내가 검색하고 싶은 지역 이름을 입력하면, 해당 이름이 포함된 지역의 날씨 데이터 Cell만 TableView에 표출할 수 있도록 하는 내용이다. 2️⃣ UISearchBar? UISearchController? UISearchBar는 사용자의 텍스트 입력을 받는 텍스트 필드와 함께 검색/취소/북마..
2023.11.03 -
[iOS] 스톱워치 앱 만들기 (3) - 테이블 뷰에 랩 타임 추가하기 [iOS] 스톱워치 앱 만들기 (2) - 버튼 클릭에 따른 상태 변화 기능 구현 [iOS] 스톱워치 앱 만들기 (1) - 프로젝트 기본 세팅과 Timer에 대한 이해 오랜만에 써보는 iOS 개발 글이다. 오지 않을 것만 같던 mini-min-dev.tistory.com 이번 글에서는 내가 스톱워치 앱을 만들기로 한 가장 주된 이유인, "Copy Paste 기능"을 구현해 보도록 하겠다. 갤럭시에서는 테이블 뷰에 랩 타임이 나와있으면 이를 쉽게 복사해서 기록을 공유할 수 있는 것에 반해, 아이폰 스톱워치에는 그 기능이 없어 내가 실제로 군대에서 어려움을 겪었다. (스톱워치를 사용할 때마다 갤럭시 찾기....) 그게 답답했던 나는 이번 ..
[iOS] 스톱워치 앱 만들기 (4) - UIEditMenuInteraction과 UIPasteboard[iOS] 스톱워치 앱 만들기 (3) - 테이블 뷰에 랩 타임 추가하기 [iOS] 스톱워치 앱 만들기 (2) - 버튼 클릭에 따른 상태 변화 기능 구현 [iOS] 스톱워치 앱 만들기 (1) - 프로젝트 기본 세팅과 Timer에 대한 이해 오랜만에 써보는 iOS 개발 글이다. 오지 않을 것만 같던 mini-min-dev.tistory.com 이번 글에서는 내가 스톱워치 앱을 만들기로 한 가장 주된 이유인, "Copy Paste 기능"을 구현해 보도록 하겠다. 갤럭시에서는 테이블 뷰에 랩 타임이 나와있으면 이를 쉽게 복사해서 기록을 공유할 수 있는 것에 반해, 아이폰 스톱워치에는 그 기능이 없어 내가 실제로 군대에서 어려움을 겪었다. (스톱워치를 사용할 때마다 갤럭시 찾기....) 그게 답답했던 나는 이번 ..
2023.07.07 -
[iOS] 스톱워치 앱 만들기 (2) - 버튼 클릭에 따른 상태 변화 기능 구현 [iOS] 스톱워치 앱 만들기 (1) - 프로젝트 기본 세팅과 Timer에 대한 이해 오랜만에 써보는 iOS 개발 글이다. 오지 않을 것만 같던 전역도 이제 슬슬 보이고 있고, 마냥 휴가 때 놀기만 하는 것이 도저 mini-min-dev.tistory.com 이번 글에서는 3번과 4번의 절반에 해당하는 "테이블 뷰에 기록이 순서대로 추가되는" 기능 구현을 해보겠다. 기록은 순으로 표출하게 구현할 것이다. 1. 우측 Start 버튼을 누르면 시간이 움직인다. 처음 상태에서 왼쪽 Lap 버튼은 눌릴 수 없다. 2. 시간이 가기 시작하면, Start 버튼은 Reset 버튼으로 바뀌고 Lap 버튼은 누를 수 있도록 바뀐다. 3. L..
[iOS] 스톱워치 앱 만들기 (3) - 테이블 뷰에 랩 타임 추가하기[iOS] 스톱워치 앱 만들기 (2) - 버튼 클릭에 따른 상태 변화 기능 구현 [iOS] 스톱워치 앱 만들기 (1) - 프로젝트 기본 세팅과 Timer에 대한 이해 오랜만에 써보는 iOS 개발 글이다. 오지 않을 것만 같던 전역도 이제 슬슬 보이고 있고, 마냥 휴가 때 놀기만 하는 것이 도저 mini-min-dev.tistory.com 이번 글에서는 3번과 4번의 절반에 해당하는 "테이블 뷰에 기록이 순서대로 추가되는" 기능 구현을 해보겠다. 기록은 순으로 표출하게 구현할 것이다. 1. 우측 Start 버튼을 누르면 시간이 움직인다. 처음 상태에서 왼쪽 Lap 버튼은 눌릴 수 없다. 2. 시간이 가기 시작하면, Start 버튼은 Reset 버튼으로 바뀌고 Lap 버튼은 누를 수 있도록 바뀐다. 3. L..
2023.07.06 -
[iOS] 스톱워치 앱 만들기 (1) - 프로젝트 기본 세팅과 Timer에 대한 이해 오랜만에 써보는 iOS 개발 글이다. 오지 않을 것만 같던 전역도 이제 슬슬 보이고 있고, 마냥 휴가 때 놀기만 하는 것이 도저히 견딜 수(?)만 없어서 거의 말출이라 할 수 있는 이번 14일간의 휴가 mini-min-dev.tistory.com 지난 글에 이어서 이제 본격적으로 스톱워치 기능을 구현해 줄 차례이다. 이번 글에서는 1, 2, 5번의 상태 변화 기능을 구현해보려 한다. Lap 버튼 클릭에 따른 테이블 뷰의 셀 추가 관련 부분은 다음 글에서! 1. 우측 Start 버튼을 누르면 시간이 움직인다. 처음 상태에서 왼쪽 Lap 버튼은 눌릴 수 없다. 2. 시간이 가기 시작하면, Start 버튼은 Reset 버튼으..
[iOS] 스톱워치 앱 만들기 (2) - 버튼 클릭에 따른 상태 변화 기능 구현[iOS] 스톱워치 앱 만들기 (1) - 프로젝트 기본 세팅과 Timer에 대한 이해 오랜만에 써보는 iOS 개발 글이다. 오지 않을 것만 같던 전역도 이제 슬슬 보이고 있고, 마냥 휴가 때 놀기만 하는 것이 도저히 견딜 수(?)만 없어서 거의 말출이라 할 수 있는 이번 14일간의 휴가 mini-min-dev.tistory.com 지난 글에 이어서 이제 본격적으로 스톱워치 기능을 구현해 줄 차례이다. 이번 글에서는 1, 2, 5번의 상태 변화 기능을 구현해보려 한다. Lap 버튼 클릭에 따른 테이블 뷰의 셀 추가 관련 부분은 다음 글에서! 1. 우측 Start 버튼을 누르면 시간이 움직인다. 처음 상태에서 왼쪽 Lap 버튼은 눌릴 수 없다. 2. 시간이 가기 시작하면, Start 버튼은 Reset 버튼으..
2023.07.05