김경록의 앱 개발 여정

개요https://roks-apps.tistory.com/88이전 포스팅에서 UIPopover + UITableView로 드롭다운 버튼을 만들었다가, 드롭다운이 펼쳐진 상태에서 좌측 엣지 스와이프(인터랙티브 뒤로가기) 를 하면 화면이 얼어붙는 이슈가 생겼다 - 드롭다운을 연 상태에서 뒤로가기 제스쳐를 할 경우 네비게이션 타이틀만 바뀌고 화면이 멈추는 버그증상드롭다운 버튼 탭 → 팝오버로 드롭다운 표시드롭다운이 열린 상태에서 좌측 엣지 스와이프로 뒤로가기 제스처 시작네비게이션 바 타이틀은 바뀌지만 뷰는 그대로, 터치도 먹지 않는 상태 발생원인원인 추적은 금방 가능했다 아마 화면 전환에서 문제가 생긴듯했다.presentedViewController(팝오버)가 떠 있는 동안 UINavigationControl..

개요신규 프로젝트에서 사유 선택을 위한 드롭다운 버튼이 필요했다.드롭다운 버튼이라는 게 사실 앱보다는 웹 환경에서 더 자주 쓰이는 UI 같지만,이번 프로젝트의 디자인은 웹 UI를 앱에 맞게 리디자인하는 과정이었기 때문에가능한 한 동기화를 시키려고 했다.처음 해보는 작업이라 구글링을 해봤는데, 대부분 서드파티 라이브러리를 이용해서 해결하고 있었다.하지만 이번 프로젝트는 SnapKit 외에는 서드파티를 쓰지 않는 것을 희망해서 배제하기로 했다우선 가장 간단해 보이는 방법을 찾았고, iOS 기본 컴포넌트인 UIMenu로 구현을 시작했다.UIMenu가 뭐지?UIMenu는 버튼을 탭 했을 때 메뉴 리스트를 보여주는 iOS 기본 컴포넌트다.iOS 14 이후부터는 버튼과 쉽게 결합할 수 있도록 API가 강화되어서,옵..

🔊 개요앱을 만들 때 Button은 필수적이고, 자동으로 터치 피드백을 제공합니다.(눌렸을 때 색깔이 바뀐다던가)하지만 종종 버튼을 눌렀을 때 아무런 반응이 없는 것처럼 보이는 문제를 겪게 되죠.그럴 땐 대부분 아래 이유 중 하나입니다.👇 1. AttributedString에서 색상을 직접 지정한 경우(configuraton 사용 시)configuration 사용 시 폰트를 지정할 때 AttriibutedString을 사용하게 됩니다.그때 foregroundColor 또한 지정이 가능하며 이것으로 글자색을 바꿀 수도 있습니다. let attributedTitle = AttributedString( "이미지", attributes: AttributeContainer([ .font..

📘 개요MVVM 패턴에서 ViewModel(이하 VM)은 UI 요소와 독립적이어야 한다고들 합니다.그런데 그 '독립성'의 기준은 어디일까요?예를 들어, UIKit을 import 하지 않으면 독립적인 걸까요?UILabel의 텍스트처럼 화면에 표현될 값을 포장하여 다루는 건 괜찮을까요? (ex: n 개, n원)혹은 View가 isHidden일지 말지를 판단하는 Bool값을 ViewModel에서 들고 있는 건 괜찮을까요?이 글은 제가 실제로 진행한 프로젝트에서 MVVM을 따르고 있다고 생각했지만, 결과적으로는 안티 패턴에 가까운 코드를 작성했던 경험을 되돌아보며,ReactorKit을 기준으로 어떤 식으로 View와 ViewModel의 책임을 분리했는지 정리한 글입니다🎭 “State는 화면의 상태”라는 말의..

앱에서 사용자에게 간단한 알림을 제공할 때 흔히 사용하는 토스트메시지를 구현해 보았습니다.이번 포스팅에서는 iOS에서 토스트 메시지를 어떻게 구현했는지,그리고 이를 앱 전반에서 안전하고 일관되게 사용하기 위해 어떤 설계 원칙을 적용했는지에 대한 경험을 적어보겠습니다. 🍞 토스트 메시지 구현토스트 메시지는 화면 하단(혹은 지정한 위치)에 잠깐 나타났다가 사라지는 UI 컴포넌트입니다.저는 아래와 같이 토스트 메시지를 구현했습니다.import UIKitimport SnapKitfinal class ToastManager { static let shared = ToastManager() private var isShowingToast = false private init() {}..

이번에 다룰 커스텀 UI는 위와 같은 스타일입니다.단순한 버튼처럼 보이지만, 자세히 보면 테두리가 점선으로 되어 있는 걸 알 수 있습니다.UIKit에서 기본 제공하는 borderStyle 옵션은 다음과 같습니다:.none.line.bezel.roundedRect하지만 이 중 어떤 것도 점선 테두리는 지원하지 않죠.(제가 모르는걸 수도..?ㅎㅎ..)물론 UIView를 하나 덧씌워서 해결할 수 있을까도 고민했지만,문제는 단순한 overlay가 아니라 ‘점선’ 그 자체였습니다.결국 선택지는 하나.CAShapeLayer와 UIBezierPath를 이용해 직접 그리는 방식으로 가야 했습니다.이번 포스팅에서는 실전 예제와 함께,점선 테두리를 가진 UIButton을 만드는 방법을 정리해 보겠습니다.🧱 기본 버튼 스..

이번 프로젝트에서는 두 가지 유형의 바텀시트를 구현해야 했습니다.내부 디자인은 차이가 있지만, 전체적인 구조는 거의 동일했죠.그래서 저는 하나의 바텀시트 베이스 클래스를 만들고, 그걸 상속해서 각각의 사용처에서 커스터마이징하는 구조로 설계했습니다. 공통 UI 구조 파악하기두 가지 바텀시트 모두 아래와 같은 특징이 있었습니다.모서리가 둥근 흰색 시트반투명한 배경아래에서 위로 올라오는 애니메이션시트 상단에 그림자가 들어감공통 요소가 명확했기 때문에, 기본 구조만 잘 만들어두면 각각의 케이스에 맞게 확장해서 사용할 수 있겠다고 생각했습니다. 그래서 재사용 가능한 Base BottomSheetViewController를 만들기로 했습니다.🏗️ 재사용 가능한 구조로 설계하기먼저 아래의 세 가지 주요 뷰를 정의했..

✅ 두 가지 스타일의 내비게이션 바 사용현재 프로젝트에선 다음과 같은 구조로 내비게이션 바 스타일이 나뉩니다:루트(첫 번째) 화면 → 로고 및 아이콘을 포함한 커스텀 스타일그 이후 푸시된 화면들 → 시스템 스타일 기반의 일반 네비게이션 바🎛 커스텀 네비게이션 컨트롤러에서 공통 처리이미 앱 전반에서 사용되는 커스텀 내비게이션 컨트롤러(InteractivePoppableNavigationController)가 존재하므로, 여기에 스타일 설정을 통합합니다.SceneDelegate 또는 AppDelegate에서 내비게이션 컨트롤러를 초기화할 수 있습니다:// SceneDelegatefunc scene(_ scene: UIScene, willConnectTo session: UISceneSession, opti..

개요  우리 디자인팀이 제작해 준 게시글 자세히 보기 화면은 기본 뼈대 자체는 완성되어 있었지만, 기획 검토 중 유저가 선택한 사진의 개수와 태그의 개수가 유동적이라는 점에서 놓친 부분이 있었습니다.즉, 사진이나 태그가 전혀 없을 수도 있고, 일부만 있을 수도 있는 상황을 모두 고려해야 했습니다. 기존 80% 완성해놓은 뷰에 조건 별 제약 조건을 업데이트하는 과정을 글에 담았습니다.시도해 본 방식은 아래와 같습니다.1. 유저가 설정하지 않은 경우 해당 뷰의 높이를 0으로 지정하기단순한 접근으로 사진과 태그 영역의 높이를 0으로 지정하는 방식으로 처리해봤는데, 이 경우 이미 설정된 Constraints가 그대로 유지되어 글과 소셜 버튼 사이에 불필요한 간격이 발생했습니다.즉, 단순히 뷰의 높이만 0으로 만..

최근 프로젝트에서 런치 스크린을 추가하는 과정에서 정말 오랜만에 Storyboard를 사용하게 되었다. 평소 코드 기반(CodeBase)으로 UI를 구성해 왔기 때문에 런치 스크린 역시 코드로 구현할 수 있을 거라 생각했지만, 코드만으로는 런치 스크린을 작성할 수 없다는 사실을 알게 되었다. 심지어 SwiftUI를 사용하더라도 런치 스크린만큼은 Storyboard 방식으로 구성해야 한다는 점도 새롭게 배운 부분이었다.📖 HIG를 참고해보니...HIG 원문먼저 Apple의 Human Interface Guidelines (HIG)을 참고했는데, 지금까지 내가 경험했던 앱들과는 상충되는 부분이 많아 의아했다. 특히 다음과 같은 규칙들이 눈에 띄었다.런치 스크린에서는 텍스트를 포함하지 말 것 (로컬라이징이 ..