김경록의 앱 개발 여정

🔊 개요앱을 만들 때 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)을 참고했는데, 지금까지 내가 경험했던 앱들과는 상충되는 부분이 많아 의아했다. 특히 다음과 같은 규칙들이 눈에 띄었다.런치 스크린에서는 텍스트를 포함하지 말 것 (로컬라이징이 ..

개요  한창 열심히 운동할 때 애용했던 앱이 있습니다.BurnFit이라는 앱인데요, 해당 앱은 위 이미지처럼 유료 요금제를 사용하는 유저에게만 제공하는 화면이 있었습니다.이 화면은 하나의 UICollectionView로 구성되어 있을 것으로 예상되는데, 유저의 상태에 따라 다른 콘텐츠를 보여주는 구조입니다. 저도 최근 팀 프로젝트를 진행하며 비슷한 기능을 구현해야 했습니다.디자인 시안에 따르면, 카테고리 선택 여부에 따라 보이는 화면이 달라져야 했습니다.저희 앱은 기본적으로 회원가입 없이 사용할 수 있지만, 글쓰기와 같이 특정 화면 및 기능은 회원만 접근 가능하도록 제한하고 있었습니다. 이번 글에서는 해당 기능을 구현하며 겪었던 고민과 해결 과정을 공유해보려 합니다.참고: 아래 예제 코드에서는 가독성을 ..

개요팀 프로젝트에서 Cell의 디자인이 개선되었습니다.복잡한 UI였는데 이를 구현하고 개선하는 과정을 담았습니다.포스팅은 메모장 말투로 진행하겠습니다! 구현해야 할 UI에서 주의해야 할 부분1. 제목이 줄바꿈이 되고 카테고리 아래서부터 시작하는 점 2. 레시피의 경우 배경색, 글자색, cornerRadius까지 포함3. 제목과 카테고리 부분이 폰트가 다름 최초 아이디어 : AttributedString 사용func configureMainText(category: String, mainText: String) -> NSAttributedString { let attributedString = NSMutableAttributedString() // 카테고리 글씨 속성 설정 ..