yunkogong

환경: Vue 3 + Ionic + Capacitor / iOS 실기기들어가며iOS 실기기에서 앱을 돌리면 Xcode 콘솔이 빨갛게 물드는 경험, 한 번쯤 있으실 겁니다. 그런데 모든 경고가 "고쳐야 하는 문제"는 아닙니다. 이 글은 Ionic 앱에서 자주 보이는 두 경고 — iOS 키보드 Autolayout 경고와 Vue 런타임 컴파일 경고 — 를 예로, 시스템이 내는 양성 경고와 내 코드가 내는 경고를 구분하는 기준을 정리합니다.1. 마주친 현상 — 키보드 Autolayout 경고입력 화면에 들어가면 콘솔에 이런 로그가 뜹니다.Unable to simultaneously satisfy constraints. ...accessoryView.bottom == _UIKBCompatInputView.top..

환경: Ionic (Vue) / MutationObserver / 웹 접근성(a11y)들어가며Ionic의 오버레이 컴포넌트(ion-modal, ion-popover, ion-alert 등)는 열릴 때 배경 콘텐츠에 aria-hidden="true"를 자동으로 붙여 스크린리더가 뒤쪽 요소를 읽지 못하게 합니다. 의도 자체는 올바릅니다.문제는 이 처리가 엉뚱한 곳에 붙는 경우입니다.포커스를 가진 조상 요소에 aria-hidden="true"가 붙어, 그 안의 입력 필드가 스크린리더에서 통째로 무시됨오버레이 자기 자신에 aria-hidden="true"가 붙어 내용이 안 읽힘최근 Chrome·Edge는 WAI-ARIA 규칙을 엄격히 적용해, 포커스를 가진 요소(또는 그 조상)에 aria-hidden이 걸리면 ..

환경: Vue 3 + Pinia / Ionic / SCSS들어가며고령층이나 저시력 사용자를 위한 접근성 기능으로 "큰 글씨 모드" 가 필요했습니다. 요구사항은 단순했지만 전역에 걸쳐 있었습니다.사용자가 한 번 설정하면 모든 페이지에 동일하게 적용새로고침·페이지 이동 후에도 설정 유지컴포넌트마다 분기하지 않고 SCSS 레벨에서 자동으로 글씨 크기 전환이 글은 Pinia(상태) + localStorage(영속화) + DOM data 속성(스타일 트리거)을 조합해 이 요구를 깔끔하게 푸는 방법을 정리합니다.1. 아키텍처Pinia Store (textMode) │ watch ▼localStorage 에 'text-mode' 저장 │ 동시에 ▼document.documentElement 에 'data-te..

환경: Vue 3 + Ionic + Capacitor / Android (targetSdkVersion 35, Android 15)들어가며잘 돌아가던 하이브리드 앱을 Android 15(API 35) 기준으로 빌드했더니, 갑자기 상단 헤더가 상태바(노치) 영역에 파묻혀 버리는 현상을 만났습니다. 버튼이 시계·배터리 아이콘과 겹치고, 화면 맨 위 메뉴를 누를 수 없게 되는 식이죠.원인은 코드 버그가 아니라 Android 15부터 바뀐 기본 동작이었습니다. 이 글에서는 왜 이런 일이 생기는지, 그리고 StatusBar 플러그인 설정만으로 안 풀릴 때 네이티브 레이어에서 어떻게 안정적으로 해결하는지 정리합니다.1. 무슨 일이 일어난 걸까 — Edge-to-EdgeAndroid 15부터는 앱이 Edge-to-E..