전체 글

Shorts UI 구현하기 (SwiftUI+UIViewRepresentable+UICollectionView)

배경유튜브 Shorts, 인스타그램 릴스, TikTok과 같은 숏폼 콘텐츠 UI를 어떻게 구현할 수 있을까요?최근 사이드 프로젝트를 진행하며 Shorts 화면을 담당하게 되었고, 구현하며 마주한 고민들과 기술적인 선택, 그리고 그 안에서 마주했던 문제 해결 경험을 정리해보려고 합니다.요구사항 정의구현에 들어가기 전 먼저 만족해야 하는 요구사항을 아래와 같이 정리할 수 있었습니다.기능 명세는 일반적인 숏폼 컨텐츠를 떠올리며 정의할 수 있었고, 기존 SwiftUI 기반의 앱 구조에 안정적으로 통합되기를 원했습니다.한번에 하나의 영상이 전체화면을 채우는 UI세로 방향 스크롤을 통해 영상 전환 및 페이징 UX스크롤 시 영상 전환이 빠르고 부드러울 것좋아요, 댓글, 사용자 정보 등 오버레이가 가능할 것Swift..

EC2 인스턴스 스토리지 용량 확장하기

개인용 서버를 운영하면서 처음에는 10GB면 충분하겠지 싶어 작게 디스크 용량을 설정했었습니다.하지만 Node.js, MySQL 및 다양한 도구들을 설치하다보니 예상보다 빠르게 부족해졌습니다. 특히 n8n 셀프 호스팅을 위해 Docker를 구성하다보니 여유 공간이 급격히 줄어들고 있었습니다.이에 따라 EC2 인스턴스의 EBS 볼륨 및 파일시스템 확장을 진행했습니다.스토리지 볼륨 확장먼저 AWS EC2 인스턴스에서 사용 중인 디스크는 EBS (Elastic Block Store) 볼륨으로 관리됩니다. EC2 인스턴스를 중지하지 않고도 볼륨의 크기를 확장할 수 있는 장점을 가지고 있습니다.EBS 용량을 늘리기 위해서는 AWS 관리 콘솔 → EC2 → Elastic Block Store → 볼륨으로 이동합니다..

KingFisher 대신 Nuke

Swift에서 비동기 이미지 처리를 위해 가장 먼저 떠오르고 많이 사용되는 라이브러리는 KingFisher 입니다. 오랫동안 많은 iOS 프로젝트에서 사용되어 왔고, 사용법도 간단하고, 자료가 많아 이제는 비동기 이미지 처리에선 대표적인 라이브러리라고 할 수 있습니다. 하지만 최근 Nuke 라는 라이브러리가 눈에 들어왔고, KingFisher보다 퍼포먼스가 좋다는 이미지를 보고 궁금해졌습니다. 그래서 한번 어떤 장점이 있는지 알아보려고 합니다.Nuke 가 제공하는 기능들URL 기반 이미지 비동기 로딩메모리, 디스크 캐싱 지원플레이스홀더, 에러 처리리사이징, 라운딩 등 이미지 후 처리SwiftUI, UIKit 지원다양한 이미지 포맷 지원(jpeg, png, svg, heif, gif, webp)이미지 처리..

WWDC25 - FoundationModels로 엿본 애플이 꿈꾸는 개인화 AI의 미래

올해 WWDC25에서 가장 궁금하던 부분은 "애플은 AI에 어떻게 대응할까?" 였습니다.ChatGPT나 Gemini처럼 클라우드 기반 LLM이 각광받는 시대에 개인정보 보호와 기기간 통합을 중시하는 애플이 어떻게 대응할지 궁금했는데요. 바로 이번에 발표된 FoundationModels을 통해 애플의 스탠스를 확인할 수 있었습니다. 이대로라면 골든 타임을 놓칠 수 있겠다고 생각한 것인지, Apple Inteligence 출시 전에 개발자들로 하여금 먼저 온디바이스 AI 모델을 사용하여 개발할 수 있도록 'FoundationModels' 이란 프레임워크를 공개했습니다. 이 프레임워크는 iOS, iPadOS, macOS, visionOS를 포함하는 Apple 전 플랫폼에서 온디바이스 언어 모델을 활용할 수 있..

iOS Hang, Hitch 그리고 Render Loop

앱이 멈추거나 끊기는 이유는 크게 2가지로 나뉩니다.Hang(앱이 반응하지 않는 문제)과 Hitch(스크롤이 버벅이는 프레임 드롭 문제)두 용어에 대해 혼동할 때가 많았는데, 이를 정리하고 어떻게 개선할 수 있을지 알아보려고 합니다.Hang과 Hitch 구분Hang: 메인 스레드의 멈춤 현상앱 전체가 멈추고 터치 등 사용자 입력에 전혀 반응하지 않는 현상으로, 메인 스레드 내 작업이 너무 많을 경우 발생합니다.Hang은 2가지 시나리오로 발생할 수 있는데, 메인스레드가 너무 많은 작업을 수행하는 경우와 단일 긴 작업으로 인해 블로킹되는 경우입니다.예를 들어 화면에 보여지는 이미지는 4개지만, 전체 이미지를 준비하려고 할 경우 아래와 같이 메인스레드가 불필요하게 너무 많은 작업을 수행하게 되고 Hang으로..

의존성 역전을 통한 독립적인 네트워크 모듈 설계하기

최근 프로젝트를 진행하며 독립적인 네트워크 모듈을 직접 설계하며, 아래와 같은 목표를 세웠습니다.네트워크 관련 서드파티 라이브러리는 네트워크 모듈 내에서만 알도록 할 것모듈 외부에선 NetworkService만 알도록 할 것토큰 리프레쉬 로직과 같이 인증 관련 세부 구현은 숨길 것이를 위해 NetworkService 내부에서 Alamofire의 AuthenticationInterceptor 를 활용하여 인증을 처리하고 있었습니다.이렇게 설계하면 사용하는 쪽에선 인증 로직을 신경쓰지 않아도 되게 됩니다.401 인증 에러 응답을 받으면 Alamofire가 Authenticator.refresh() 를 호출하고, 토큰을 갱신한 뒤 자동으로 요청을 재시도하니까요. 그런데 한가지 문제가 발생했습니다. 의존성 문제..

Demystify SwiftUI - Identify: SwiftUI는 뷰를 어떻게 구분할까?

SwiftUI는 뷰를 어떻게 구분할까?SwiftUI는 정체성(Identity)을 통해 뷰를 구분합니다.UIView, NSView를 클래스로 모델링한 UIKit, AppKit과 달리 SwiftUI에선 View를 Struct로 취급하기 때문에 View를 식별하기 위해선 별도의 ID가 필요합니다.정체성은 명시적 정체성, 구조적 정체성 두가지 방식으로 표현될 수 있으며, 명시적 정체성을 부여하지 않더라도 뷰 계층 구조를 활용해 뷰에 암시적인 ID를 부여합니다.명시적 정체성 (Explicit Identity)개발자가 ID 나 Identifiable 프로토콜을 사용하여 뷰나 데이터에 직접 고유한 식별자를 제공하는 방식입니다. ForEach와 같은 데이터 기반 컴포넌트에서 특히 중요하며, SwiftUI가 컬렉션의 항..

번역) SwiftUI 간단한 뷰 레이아웃 구성하기

해당 글은 Apple 공식문서를 번역한 글로 의역이나 잘못 번역된 내용이 있을 수 있습니다.정확한 내용은 원문을 참고해주세요.https://developer.apple.com/documentation/swiftui/laying-out-a-simple-view개요뷰의 레이아웃을 만들려면, 먼저 자식 뷰들의 계층을 구성합니다. 그런 다음, 자식 뷰의 크기와 간격을 설정 파라미터와 frame, padding 같은 뷰 수정자를 통해 조정할 수 있습니다.레이아웃 구성 방식에 대해 더 알고 싶다면 스택 뷰로 레이아웃 만들기를 참고하세요. 뷰 계층 구성하기다음은 메시징 서비스에서 받은 메시지를 표시하기 위한 뷰 예시입니다.이 뷰는 HStack을 사용하여 발신자를 나타내는 뷰와 메시지 내용을 담는 뷰를 나란히 배치합니..

번역) SwiftUI 커스텀 뷰 선언하기

해당 글은 Apple 공식문서를 번역한 글로 의역이나 잘못 번역된 내용이 있을 수 있습니다.정확한 내용은 원문을 참고해주세요.https://developer.apple.com/documentation/swiftui/declaring-a-custom-view#Conform-to-the-view-protocol개요SwiftUI는 사용자 인터페이스 디자인을 선언형(declarative) 방식으로 제공합니다. 전통적인 명령형(imperative) 방식에서는 뷰를 생성하고, 배치하고, 설정하는 책임은 물론, 상태 변화에 따라 뷰를 지속적으로 업데이트하는 책임까지 컨트롤러 코드가 부담합니다. 반면, 선언형 방식에서는 UI의 원하는 레이아웃을 반영하는 뷰 계층을 선언함으로써, 사용자 인터페이스의 *간단한 설명(lig..

Socket vs WebSocket

소켓(Socket)이란?소켓(Socket) 은 네트워크를 경유하는 프로세스 간 통신의 종착점.OSI 7계층 중 응용 계층에 속하는 프로세스들은 데이터 송수신을 위해 반드시 소켓을 거쳐 전송 계층으로 데이터를 전달해야한다.즉, 소켓은 전송 계층과 응용 프로그램 사이의 인터페이스 역할을 하며 떨어져 있는 두 호스트를 연결해준다.소켓은 아래의 요소들을 담고 있는 하나의 파일인 것이다.프로토콜상대와 자신의 IP 주소Port 번호통신 동작 진행 상태소켓에 담기는 정보 심화편+ with GPT더보기✅ 소켓(Socket)의 기본 구성 정보소켓은 단순한 ‘연결’이 아니라, 네트워크 통신을 위한 컨텍스트(Context)입니다.즉, 소켓을 생성하면 다음과 같은 중요한 정보들이 내부에 저장됩니다:정보항목설명IP 주소로컬 I..

HTTP 개요 및 HTTP 버전별 차이

HTTP란?HTTP(HyperText Transfer Protocol)는 클라이언트와 서버 간에 의미 있는 요청과 응답을 주고받기 위한 텍스트 기반 통신 프로토콜입니다.'의미 있는' 이란?HTTP는 단순히 데이터를 주고받는 수준을 넘어서, 요청과 응답의 목적과 맥락을 헤더(Header)를 통해 설명할 수 있습니다.예를 들어, GET, POST와 같이 요청의 종류를 설명하고, User-Agent를 통해 누가 보냈는지를 설명하며 Content-Type을 통해 데이터의 형식이 무엇인지를 설명할 수 있습니다.전송 방식HTTP는 어플리케이션 계층의 프로토콜로 신뢰가능한 전송 계층 프로토콜(TCP) 위에서 동작합니다. 보안이 강화된 버전인 HTTPS(HTTP over TLS)는 TLS(SSL)를 통해 데이터를 암호..

애플 로그인 서버부터 클라이언트까지(Swift + Nest.js + TypeScript)

iOS 앱을 개발할 때 소셜 로그인 기능을 구현한다면, 애플 로그인은 사실상 필수적인 기능입니다. 그렇기에 프로젝트를 할 때마다 애플 로그인을 구현하게 되는데, 매번 '어떻게 구현하더라' 하며 다시 찾아보는 일이 반복되곤 했습니다. “애플로부터 토큰을 발급받아 서버에 넘기면 서버가 알아서 로그인 또는 회원가입 처리를 진행하고, 그 후 액세스 토큰과 리프레시 토큰을 넘겨 받는다” 정도로만 기억하고 있었고, 로그인 플로우에 대한 명확한 이해가 부족해 발생하는 문제였습니다. 마침 클라이언트부터 백엔드까지 직접 구현해볼 수 있는 기회가 생겼고, 이번 기회에 로그인 플로우를 제대로 정리해야겠다고 생각해 iOS 클라이언트 코드와 서버 로직까지 모두 작성해보았습니다.iOS 클라이언트는 Swift 로, 서버 코드는 N..