리유저블 코드

뮤직 플레이어 앱을 포함한 미디어 관련 서비스에는 유저가 재생중인 미디어의 타임라인을 조절하는 기능이 있다. Seekbar 라는 이름으로 많이 부른다. FLO 뮤직 플레이어 앱에서도 물론 Seekbar가 존재한다. 플레이어 컨트롤러 버튼들과 마찬가지로 MusicPlayer의 정보를 보여주며, 유저 인터랙션을 통해 싱글톤 객체를 컨트롤 하는 역할이다. 나는 PlayerSeekbar 클래스를 만들어서 각 뷰에 넣어주었다. 이번 글에서는 FLO 뮤직플레이어 앱에서 어떻게 Seekbar를 구현했는지 작성하고자 한다. 1. Seekbar의 기능 - MusicPlayer의 currentTime을 바인딩해 UI로 표시 - MusicPlayer의 currnetPlaybackRatio(재생 비율)을 바인딩해 해당 비율만..

FLO MusicPlayer 앱에서 사용하는 AVPlayer는 음악을 재생시키고, 컨트롤를 하는 핵심 요소로 사용된다. AVPlayer를 어떻게 사용했는지 알아보자 먼저, iOS의 프레임워크들에서 자주 사용했던 자연스럽게 delegate를 채택하려고 했지만, delegate가 AVPlayer에는 없다. 대신, KVO(Key-Value-Observing) 방식으로 AVPlayer의 상태값을 받아올 수 있다. KVO는 존재만 알고 있었던지라, 이번 기회에 공부를 해보았다. KVO 짧은 정리 KVO는 NSObject의 기능으로 willSet, didSet 과 유사하다고 볼 수 있음 프로퍼티의 상태 변화에 대해 '외부' 에서 옵저버를 추가할 수 있음 (willSet, didSet은 내부에서 추가 필요) 외부에서..

음악 플레이어에서 가장 중요한 코어 기능은 음악을 제어하는 기능이다. (플레이어 컨트롤러) 아래 사진은 이전 글에서 설명했던 앱의 구조인데, 뷰에 들어가는 공통 기능 중 ControlButtons 에 대한 설명을 해보려고 한다. 1. 개요 FLO 앱을 포함한 음악 플레이어 앱의 컨트롤 버튼을 생각 해보면, 가장 큰 특징은 어느 곳에서나 같은 역할을 한다는 점이다. 재생, 일시정지, 앞으로가기, 뒤로가기 등.. 여러 기능들이 있지만, 뷰가 다르다고 하여 다른 역할을 하지 않으며 음악을 컨트롤 하는 같은 역할을 한다. 특히 나는 음악을 재생하는 MusicPlayer 객체를 싱글톤으로 만들어서 앱의 어느곳에서든 항상 존재하도록 구현했다. 즉, 생성하는 버튼이 하는 일은 MusicPlayer 싱글톤 객체를 제어..

그동안 궁금했었던 부분들에 대해 공부하는 시간을 가져보던 중 평소 관심있었던 부분인 뮤직 플레이어를 만들어 보고 싶었다. FLO의 플레이어 뷰를 보면 기능 요구사항은 다음과 같다. - 플레이어 컨트롤 버튼 - 시간에 따른 가사 자동 스크롤 - 가사를 탭 했을 때 해당 부분으로 이동 - 음악 정보(이미지, 곡 정보 등) 사용한 프레임워크와 앱의 구조를 살펴보자 1. AVFoundation AVFoundation은 [ CoreAudio / CoreVideo / CoreMedia / CoreAnimation ] 위에 있는 프레임워크다. Core 패밀리들은 iOS 혹은 MacOS 등에서 하드웨어와 함께 Low-Level 로 동작하는 프레임워크들이고(C 기반), AVFoundation은 Core 패밀리 위에서 멀..

앱을 개발하다보면 URL이나 전화번호를 연결해줘야 할 경우가 많이 있다. URL은 링크로, 전화번호는 전화로 연결을 해주어야 한다. 그렇다면 링크와 전화번호를 UILabel에서 인식을 해야 하고, 하이라이트 등의 기능을 구현해야 하는데 .. 이 기능을 훌륭하게도 UITextView가 가지고 있다. 이번 포스팅에서는 UITextView를 이용해 링크와 전화번호 등의 인식과 연결을 구현하고, UILabel 처럼 사용하는 방법을 알아보려고 한다. 1. 샘플 뷰 먼저 스토리보드에서 다음과 같은 뷰를 후다닥 만들어주었다. 동일한 내용의 더미 데이터고, 위는 UILabel, 아래는 UITextView로 만들었다. 앞서 얘기했었던 URL과 전화번호를 인식하는 기능은 UILable 에서는 기본 제공하지 않는다. UIT..

함수형 프로그래밍에 대해 알아보기 전에 우선 Swift라는 언의의 패러다임을 알아볼 필요가 있다. 그 중 가장 강조되는 패러다임은 다음과 같다. 함수형 프로그래밍 프로토콜 지향 프로그래밍 먼저 프로토콜은 클래스, 열거형, 구조체에 프로토콜을 채택함으로 특정 기능을 구현할 수 있는 기능이다. 이를 이용해서 기능별로 모듈화를 할 수 있다. Swift의 기본 타입(뼈대)들은 모두 구조체로 만들어져 있다. 상속이 되지 않는 구조체에 그 많은 기능들을 넣기 힘들어 보이지만, 프로토콜, 익스텐션, 제넬릭을 이용해 구현되었다. 프로토콜에 대한 내용은 다음에 따로 포스팅을 할 예정이다. 1. 개요, 함수형 프로그래밍이란? 함수형 프로그래밍의 중요한 개념은 함수를 일급 객체로 다루는 점이다. 일급 객체의 특징 - 변수에..

1. 개요 원격 푸시, 알림, Push Notification 등으로 불리는 푸시알림은 Product가 앱으로 개발되어야 하는 중요한 이유 중 하나이다. Apple 디바이스에 전송되는 푸시알림은 APNs(Apple Push Notification Service)를 통해 전송된다. 보통의 경우 Firebase나 kakao등의 푸시 서버를 사용하는 편인데 클라이언트에서는 서버의 요청에 따라 유저를 특정할 수 있는 값과 APNs 토큰을 전달하고, 서버에서는 해당 토큰과 값으로 등록 등의 처리를 한다. (사용하고자 하는 방식에 따라 다름) 푸시알림은 사용자에게 단순히 알림을 주는 것 뿐 아니라, 알림을 클릭했을 때 특정 화면으로 이동하게 한다. 이번 포스팅에서는 푸시 데이터를 수신하고, 데이터에 따라 특정 뷰로..

이번 포스팅에서 구현할 뷰는 카카오맵 에서 확인할 수 있는 뷰인데, 하단에 붙어있는 조그마한 팝업뷰다. 기획, 디자인에서 이런 형태가 요구된다면, 시간이 들어도 재사용이 가능한 형태로 만들어두는 것이 결국 미래의 시간을 아끼게 될 수 있을 것이라 생각한다. 그래서 이러한 뷰를 다른 곳에서도 사용할 수 있도록 뷰 컨트롤러 활용해 만들어 보았다. (이름도 NiceSimplePickerView 로 비장하게 만들어줬다..🙂) 1. 뷰의 구조 뷰의 구조를 설계하는데 다음 내용을 고려했다. 들어오는 데이터의 갯수에 따라 선택 가능한 뷰가 늘어나야 함 -> 컬렉션뷰 사용 ContainerView는 CollectionView의 dataSource에 따라 크기가 늘어나야 함 헤더 타이틀 뷰와 dismiss button은..

iOS 앱을 개발하다 보면, 테이블뷰와 컬렉션뷰(이하 테이블뷰)는 거의 필수적으로 만들어야 한다. 그러다보면 기획에 따라 동일한 셀을 여러 테이블뷰에 사용하는 것이 필요할 떄도 있고, 동일한 테이블뷰를 여러 곳에 사용하는 경우도 있다. 이런 경우에 Wireframe을 멍하게 바라보며 고민을 한다. 뷰 컨트롤러 내에서 분기처리 할까? 부모 뷰 컨트롤러로 만들까? 어느 뷰 범위까지 모듈로 만들까? ... 여러가지 전후 상황과 화면 구성에 따라 가장 적절한 방법을 찾기 위해 노력한다. 가장 최근 업무에서는 커스텀 테이블뷰 혹은 컬렉션뷰를 만들어서 사용하는 방법을 사용했다. 동일한 테이블뷰를 여러가지 뷰 컨트롤러에서 사용하는 UI였는데, 모든 뷰 컨트롤러에서 dataSource와 delegate를 구현하는 것..

여러 카테고리의 앱들을 만들어보면 각 앱들의 카테고리마다 공통으로, 자주 쓰는 기능들이 존재한다. 대표적으로 SNS 앱에서는 친구 관계에 대한 기능을 예로 들 수 있다. 팔로우, 친구 등 이름으로 쓰이는 친구 관계는 생각보다 나름(?) 복잡한 관계를 가지고 있다. 친구 신청중, 친구 요청 받음, 친구, 차단됨, 내가 차단 시킴 ... 등 여러가지 복잡한 상태를 가지고 있으며, 이것 또한 앱마다 다를 것이다. 따라서 어떠한 방식이든 클라이언트와 서버간 relationship에 대한 약속이 필요하며, 이는 하나의 앱에서 동일한 작동을 보장해야 한다. 이번에 개발에 참여한 SNS 앱에서도 당연하게도 친구 관계에 대한 UI가 많이 있었다. 이런 여러가지 뷰에서 사용되는 동일한 기능들을 각각의 뷰에서 하나하나 구..