#mobile
노트 33개
Frontend › CSS
노치와 폴더블 화면 대응: env()와 뷰포트 세그먼트노치·둥근 모서리·홈 표시줄처럼 화면을 가리는 하드웨어는 viewport-fit=cover와 env(safe-area-inset-*)로 비켜 간다. 두 화면에 걸친 폴더블은 horizontal·vertical-viewport-segments 미디어 기능으로 감지하고 env(viewport-segment-*)로 경첩을 피해 칸을 나눈다. 세그먼트 기능은 아직 실험 단계라 점진적 향상으로만 쓴다.
Frontend › CSS
미디어 쿼리 문법과 미디어 기능미디어 쿼리는 미디어 타입(all·screen·print)과 미디어 기능으로 이루어진다. and·or·not과 범위 문법으로 조건을 묶고, 뷰포트 크기·화면 비율·해상도·갱신 속도·표시 모드·색 표현력·입력 장치·사용자 설정·스크립트 여부까지 묻는다. 입력 방식은 화면 크기로 짐작하지 않고 pointer·hover로 직접 묻는다.
Frontend › CSS
반응형 디자인과 다국어 타이포그래피유동 그리드·유동 미디어·미디어 쿼리라는 세 요소에서 출발해 뷰포트 메타 태그, 미디어 쿼리와 브레이크포인트, 부모 크기에 반응하는 컨테이너 쿼리와 미디어 쿼리 없는 레이아웃, 모바일 퍼스트, 해상도와 기기 픽셀 비율, 상대 단위로 화면 크기에 맞추는 법. rem과 :lang()으로 언어마다 글자 크기를 바꾸는 다국어 반응형 타이포그래피까지 다룬다.
Frontend › CSS
커서와 포인터 입력입력 장치에 맞춰 상호작용을 알리는 CSS. 상태를 알리는 cursor와 caret-color, 마우스·터치를 구분하는 pointer·any-pointer·hover 미디어 쿼리, 브라우저 기본 제스처를 고르는 touch-action, 상호작용을 끄는 pointer-events를 정리한다.
Frontend › Graphics
Animated Icon: 영상을 투명 배경 아이콘으로 쓰기Airbnb 스타일 3D 아이콘을 영상으로 만든 뒤, Lava 같은 투명 배경(알파 채널) 애니메이션 포맷으로 바꾸면 앱·웹에서 움직이는 아이콘으로 쓸 수 있다. 포맷별 선택지와 제작 흐름을 정리했다.
Frontend
Mobile웹 프론트엔드 지식을 모바일 앱 개발로 확장하는 방법과 프레임워크 선택.
Frontend › Mobile
모바일 앱 출시 과정모바일 앱은 스토어 심사를 거쳐야 사용자에게 닿기 때문에 웹 배포와 절차가 다르다. 개발자 등록, 빌드와 테스트, 내부·외부 베타와 회귀 테스트, 내부 승인과 정책 준수, 스토어 최적화(ASO), App Store Connect·Google Play Console 제출, 단계적 출시까지의 흐름을 정리한다.
Frontend › Mobile
모바일 앱 프레임워크 비교: 네이티브·하이브리드·크로스 플랫폼네이티브, 웹뷰 기반 하이브리드, 네이티브로 컴파일되는 크로스 플랫폼 앱의 원리와 장단점. PhoneGap·Cordova에서 Capacitor로 이어진 하이브리드 계보와 흔한 실수(deviceready, CDN 자산, 버전 고정, CSP, 웹사이트 감싸기)도 정리한다. 코딩 에이전트가 이중 구현 비용을 낮추며 네이티브로 돌아가는 판단 기준과 대규모 이전 원칙도 다룬다.
Frontend › Mobile
Android 핵심 개념: 앱 구성 요소, 생명 주기, 관찰 가능한 상태, Context, SDK 버전Android 앱의 네 가지 구성 요소와 인텐트, Activity 생명 주기와 구성 변경, 메인 스레드의 Looper·Handler와 ANR, 그리고 자주 헷갈리는 세 가지. UI 상태를 담는 LiveData와 이를 대체해 가는 Kotlin StateFlow, 스트림 처리의 RxJava·Flow, LiveData의 setValue와 postValue 차이, Application Context와 Activity Context의 수명과 쓰임, minSdk·targetSdk·compileSdk의 의미를 정리한다.
Frontend › Mobile
Dart 핵심 문법: final과 const, 널 안전성, Future와 StreamFlutter의 언어 Dart에서 처음 헷갈리는 세 가지. 런타임 상수 final과 컴파일 타임 상수 const, 타입에 ?를 붙여야만 null을 허용하는 건전한 널 안전성, 값 하나를 기다리는 Future와 여러 값을 흘려보내는 Stream·제너레이터(async*, sync*, yield)를 정리한다.
Frontend › Mobile
Flutter UI 실전 기법: 중첩 내비게이션, CustomPaint, 리치 텍스트, 네이티브 스플래시Flutter 앱을 만들다 자주 부딪히는 네 가지 화면 문제의 해법. 화면 일부만 전환하는 중첩 Navigator, 기본 위젯으로 안 되는 모양을 그리는 CustomPaint와 Path, 한 문장 안에 여러 스타일을 섞는 Text.rich, 앱 시작 때의 흰 화면을 없애는 네이티브 스플래시를 정리한다.
Frontend › Mobile
Flutter의 구조와 위젯 트리Flutter는 Dart 프레임워크·C++ 엔진·플랫폼 임베더의 세 층으로 이루어져, OS의 UI 컴포넌트를 빌리지 않고 화면을 직접 그린다. 프레임워크 라이브러리(Material, Cupertino, Widgets, Rendering 등)의 역할, Widget·Element·RenderObject 세 트리, StatefulWidget 순서를 바꿀 때 Key가 필요한 이유, 패키지·플러그인을 만들어 pub.dev에 배포하는 법을 정리한다.
Frontend › Mobile
iOS 앱 기본 개념: 생명 주기, 이벤트 전달, ARCiOS 앱의 실행 상태와 씬 기반 생명 주기, UIViewController의 뷰 생명 주기 메서드, 객체 사이에 이벤트를 전하는 델리게이트·클로저·NotificationCenter의 선택 기준, ARC와 강한 순환 참조를 weak·unowned로 끊는 법, frame과 bounds, 데이터 저장 방법을 정리한다.
Frontend › Mobile
React Native 기초와 스타일링React 코드를 네이티브 UI로 바꿔 주는 React Native의 동작 원리(브리지에서 New Architecture로), Expo로 시작하기, 코어 컴포넌트, StyleSheet와 Flexbox 레이아웃, onPress·onChangeText 이벤트와 ScrollView·FlatList 목록.
Frontend › Mobile
React Native 실무 팁: 키보드, 로컬 저장소, 실기기 디버깅입력창이 키보드에 가려질 때 KeyboardAvoidingView와 ScrollView를 함께 쓰는 법, AsyncStorage로 키-값 저장하기, ADB로 안드로이드 실기기 연결하기, Snackbar·전역 폰트 같은 자잘한 도구.
Frontend › Mobile
React Native OTA 업데이트와 CodePush스토어 심사 없이 React Native 앱의 JavaScript 번들만 교체하는 OTA 업데이트의 원리, 채널 배포 → 확인 → 승격 흐름, 도구 선택(EAS Update, 자체 호스팅 CodePush 서버). App Center CodePush는 2025년 3월 종료됐다.
Frontend › Mobile
Swift Codable: JSON 인코딩과 디코딩Swift에서 타입을 JSON 같은 외부 표현으로 바꾸고 되돌리는 Codable. Encodable과 Decodable을 합친 타입 별칭이라는 정체, 자동 합성 조건, JSONEncoder·JSONDecoder 사용법, CodingKeys로 키 이름 맞추기와 snake_case 변환 전략을 정리한다.
Frontend › Mobile
UICollectionView 커스텀 레이아웃채팅방처럼 셀 밖 요소(날짜 구분선, 읽음 표시)가 많은 iOS 목록을 UICollectionView와 커스텀 레이아웃으로 만드는 방법. 레이아웃 객체가 위치를 계산하는 구조, prepare()에서 속성을 미리 계산·캐시하는 법, 화면 영역 질의를 이진 탐색으로 빠르게 답하는 법, 보조 뷰와 증분 오토 레이아웃을 정리했다.
Frontend › UI Design
모바일 앱 UI 가이드라인: 한 손 조작, 내비게이션, 버튼, 입력모바일 화면 설계의 관례를 주제별로 모은 노트. 화면을 보는 영역과 조작 영역으로 나누고, 내비게이션은 얕고 중복 없이, 버튼은 위계와 행동 중심 레이블로, 입력은 맞는 키보드·실시간 피드백·실수 복구로 설계한다. 대화상자 버튼 배치, 선택 컨트롤 고르기, 터치 크기 기준까지.
Frontend › UI Design
반응형 UI 패턴: 내비게이션, 캐러셀, 데이터 표작은 화면의 디자인은 큰 화면을 줄인 것이 아니고, 큰 화면은 작은 화면을 늘린 것이 아니다. 좁은 화면에서 공간이 모자라면 먼저 숨기지 않고 보이게 다듬고, 다음은 가로로 넘겨 보는 오버플로 패턴, 마지막이 버튼으로 여닫는 점진적 공개다. 캐러셀은 좁은 화면에서만 가로 스크롤로 두고 넓은 화면에서는 그리드로 펼친다. 데이터 표는 첫 열 고정·카드로 쌓기·열 숨기기 중 사용 목적에 맞춰 고르고, 페이지는 Mostly Fluid·Column Drop 같은 레이아웃 패턴으로 바꾼다.
Frontend › UI Design
전자상거래 UI 디자인쇼핑몰 UI의 목표는 구매 여정(진입 → 탐색 → 상품 검토 → 옵션 선택 → 결제)에서 마찰을 없애는 것이다. 얕은 메뉴·필터·정렬·검색으로 찾게 하고, 상품 페이지 첫 화면에 가격·옵션·배송·반품을 담고, 옵션 종류에 맞는 선택 UI와 품절 표시를 쓰고, 가격 필터 슬라이더는 실제 범위와 재고 분포를 보여 줘 결과 0건을 막는다.
Frontend › UI Design
제스처 기반 인터페이스터치 기기에서는 스와이프·당기기·드래그 같은 제스처가 버튼과 바를 줄이고 화면을 콘텐츠에 내준다. 대신 제스처는 보이지 않아서 학습 곡선이 생기고, 운영체제 제스처와 충돌하며, 일부 사용자는 쓸 수 없다. 점진적 힌트로 가르치고, 같은 기능을 버튼으로도 제공하고, 시간과 애니메이션까지 프로토타입으로 검증한다.
Frontend › UI Design
Apple Human Interface Guidelines 요약: 원칙, 레이아웃, 바, 버튼, 알림Apple의 Human Interface Guidelines(HIG)에서 앱·모바일 UI 전반에 쓸 수 있는 지침을 모은 노트. 설계 원칙 여섯 가지, 적응형 레이아웃과 안전 영역·44pt 터치 영역, 내비게이션 구조, 계정 생성·삭제, 알림·배지, 평가 요청, 애니메이션·브랜딩·색·시작 화면·용어·타이포그래피·이미지 해상도·앱 아이콘, 내비게이션 바·검색 바·상태 바·탭 바·툴바, 경고창, 버튼(스타일·역할·토글·팝업·닫기), 진행 표시, 텍스트 필드까지 다룬다.
Frontend › Web
권한 모델과 기기 API브라우저가 기기 기능을 여는 방식. 보안 컨텍스트·Permissions-Policy·사용자 동작·권한 프롬프트를 묶어 보여 주는 Permissions API의 query()와 granted·denied·prompt 상태, 그리고 권한이 걸린 기기 API인 위치, 기기 방향·움직임(iOS의 requestPermission), 게임패드(폴링), 음성 합성·인식, 진동의 쓰임과 지원 범위를 정리한다.
Frontend › Web
반응형 이미지: srcset·sizes와 picture같은 이미지를 크기만 바꿔 줄 때는 srcset·sizes로 브라우저에 선택을 맡기고(서술형), 자르기·형식 대체처럼 규칙을 강제할 때는 picture를 쓴다(지시형). 크기만 맞춰도 작은 화면의 이미지 용량이 70% 넘게 준다. sizes는 레이아웃에서의 폭이라 도구가 알 수 없으니 근삿값을 주거나, 지연 로딩 이미지는 sizes="auto"에 맡긴다.
Frontend › Web
웹 앱 매니페스트웹 앱 매니페스트는 설치된 PWA의 이름·아이콘·시작 URL·표시 방식·색·바로 가기를 정하는 JSON이다. 앱을 식별하는 id, 내비게이션 범위 scope, 마스크 가능 아이콘, display와 display_override의 대체 순서, 설치 화면을 키우는 description·screenshots, iOS가 따로 쓰는 link·meta, 그리고 바뀐 메타데이터가 플랫폼마다 언제 반영되는지 정리한다.
Frontend › Web
AMP: 규칙으로 빠르게 만드는 모바일 페이지AMP(Accelerated Mobile Pages)는 HTML에 제약을 걸고(외부 JS 금지, 인라인 CSS 상한, 자원 크기 명시) 전용 런타임과 캐시 CDN으로 페이지를 빠르게 만드는 프레임워크다. 성능 원리는 일반 페이지에도 그대로 쓰이지만, URL 이원화와 플랫폼 종속 때문에 비판을 받았고 검색 우대가 사라진 뒤로는 Core Web Vitals를 직접 맞추는 쪽이 일반적이다.
Frontend › Web
PWA 기능과 OS 통합PWA가 운영 체제와 이어지는 기능을 지원 범위별로 정리한다. 웹 푸시와 알림(iOS는 16.4부터 홈 화면 웹 앱에서만, 18.4부터 선언적 웹 푸시), 앱 배지, 공유하기와 공유 대상, 파일 시스템 접근과 파일 핸들러, 프로토콜 핸들러, 링크 캡처, 연락처 선택기, 하드웨어 API, 그리고 Project Fugu·오리진 트라이얼로 새 기능을 시험하는 법과 기능 감지·권한 요청 원칙을 다룬다.
Frontend › Web
PWA 설치와 설치 유도설치 기준은 브라우저마다 다르다. Chrome은 HTTPS, name·아이콘(192·512px)·start_url·display를 갖춘 매니페스트와 최소한의 사용자 참여를 본다. 데스크톱 Chromium·Android(WebAPK와 바로 가기)·iOS 홈 화면·macOS Safari의 Dock 추가·Firefox의 Windows 작업 표시줄 웹 앱까지 플랫폼별 설치 방식, beforeinstallprompt로 직접 띄우는 설치 버튼, display-mode로 실행 방식을 알아내는 법, 앱 스토어 배포를 정리한다.
Frontend › Web
PWA 앱 경험 설계와 창 관리설치된 PWA는 브라우저 탭이 아니라 자기 창을 가진다. 200×100px 미니 모드까지 견디는 반응형·점진적 향상의 기초와 오프라인을 기본 상태로 보는 오프라인 우선 원칙(마지막 상태 지키기, 동작 큐, 충돌 해결) 위에, display-mode 미디어 쿼리, 창 제목, 선택·당겨서 새로고침·safe area 같은 앱다운 CSS를 더한다. 스코프 밖 링크가 여는 앱 안 브라우저와 OAuth 흐름, 창 이동·크기·새 창, 제목 표시줄 오버레이, 여러 화면 배치, 화면 꺼짐 방지, 가상 키보드 API까지 정리한다.
Backend › Architecture
알림 시스템 설계: 푸시·이메일·SMS와 실시간 메시지 전달여러 서비스가 보내는 알림을 게이트웨이 → 분배 서비스 → 메시지 큐 → 채널 서비스로 흘려 인앱·이메일·SMS·모바일 푸시로 전달하는 구조를 정리했다. 템플릿·채널 선호 저장소, 우선순위 큐, APNs·FCM 같은 플랫폼 푸시 서비스, 전달 추적, 그리고 채팅 메시지를 채널 서버와 지역 게이트웨이를 거쳐 웹소켓으로 밀어 주는 실시간 전달 경로까지 다룬다.
Computer Science › Programming Languages
위임 패턴과 Kotlin by객체가 받은 요청을 다른 객체에 넘겨 처리하는 위임 패턴과, 이를 언어 문법으로 지원하는 Kotlin의 by 키워드를 정리한다. 클래스 위임은 인터페이스 구현을 통째로 다른 객체에 맡기고, 프로퍼티 위임은 getter/setter를 맡기며, by lazy와 by viewModels()가 그 대표적인 쓰임이다.
Tools › Chrome DevTools
DevTools로 기기·환경 에뮬레이션하기기기 모드로 뷰포트·DPR·터치·기기 프리셋을, 네트워크 상태 패널로 사용자 에이전트를, 센서 패널로 위치·방향·유휴 상태를, 렌더링 탭으로 다크 모드·모션 감소·인쇄·색각 이상을 흉내 낸다. 흉내로 부족하면 Android 원격 디버깅·WebView 검사·포트 포워딩으로 실기기에서 확인하고, WebAuthn 패널로 가상 인증기를 만든다.