코드로 우주평화

Flutter로 안드로이드 앱을 개발할 때에는 '뒤로 가기 버튼'의 동작을 핸들링하는 것이 중요합니다.   안드로이드에서는 위 이미지와 같은 '뒤로 가기 버튼'을 통해 현재 화면을 종료하고 이전 화면으로 돌아가는 기능을 제공합니다. 문제는 앱을 실행 중일 때에 뒤로 가기 버튼을 누르면 앱이 그대로 종료될 수 있다는 것입니다.  만약 앱 내에서 무언가 열심히 진행하다가 손이 미끄러져서(?) 뒤로 가기 버튼을 누르게 된다면??? 그 순간 앱이 곧바로 꺼지면서 휘발성 상태 값들이 사라지게 됩니다. 그렇기 때문에 안드로이드 앱을 개발할 때에는 사용자가 실수로 앱을 종료하지 않도록 뒤로 가기 버튼을 제어할 필요가 있습니다. Flutter에서는 WillPopScope 위젯을 사용하여 이러한 동작을 제어할 수 있습니..

이번 글에서는 Flutter 프로젝트에서 안드로이드 13(API 33) 이상의 이미지 권한을 어떻게 처리하는지 정리해 보겠습니다. 문제의 시작저는 현재 Facepop 이라는 사진 편집 앱을 개발하고 있습니다. Facepop - Google Play 앱재치있는 단체사진 Facepop으로 만들고 안전하게 공유하세요!play.google.com 앱을 완성하고 나서 제 안드로이드 폰으로 앱이 정상 동작하는 것을 확인하고 기쁜 마음으로 플레이스토어 출시를 했습니다. 그런데 앱을 다운받은 다른 사용자들에게서 '갤러리' 탭이 동작하지 않는다는 제보를 받았습니다. Facepop은 사진 편집 앱이기에 갤러리 탭에서 사진을 선택하는 과정이 필수적이었고 사진을 불러올 수 없는 것은 매우 치명적인 상황이었습니다. 하지만 확인..

이번 글에서는 Flutter 앱에서 iOS 알림 동작을 세밀하게 설정하는 방법을 다뤄보겠습니다. 특히, 앱 실행 중 알림 표시, 알림음 재생, 앱 아이콘 배지 표시와 같은 기능을 설정하고 iOS 버전에 따라 알림 스타일이 다르게 동작하도록 처리하는 방법을 알아보겠습니다. 먼저 변경 전 코드와 변경 후 코드를 보여드리겠습니다. 변경할 파일은 AppDelegate.swift 입니다.  변경 전, 기존 코드import UIKitimport Flutter@UIApplicationMain@objc class AppDelegate: FlutterAppDelegate { override func application( _ application: UIApplication, didFinishLaunching..

Flutter 앱에서 TextField를 사용해 한글을 입력할 때, 간혹 자음과 모음이 분리되는 현상이 발생합니다. 예를 들어 "안녕하세요"를 입력하려고 하면 "ㅇㅏㄴㄴㅕㅇㅎㅏㅅㅔㅇㅛ"처럼 입력되는 경우입니다. 이 문제는 입력기(IM)가 한글을 조합하는 과정에서 Flutter가 TextField의 값을 바로 수정하도록 구현했을 때 발생합니다. 이번 글에서는 이 문제를 어떻게 해결할 수 있는지 알아보겠습니다.  자음과 모음이 분리되는 이유한글은 자음, 모음, 자음을 조합하여 한 글자를 만듭니다. 예를 들어 "안"은 "ㅇ + ㅏ + ㄴ"이 결합된 글자입니다. Flutter에서 onChanged 이벤트를 사용하다 보면 텍스트를 수정하는 과정에서 입력기(IME)가 이 조합 과정을 끝내기도 전에 TextField..

문제 상황Flutter에서 FloatingActionButton을 사용할 때, 버튼을 터치하면 사각형 모양의 ripple effect(물결 효과)가 보이는 경우가 있습니다. 버튼은 원형인데 터치 효과가 사각형으로 보이면 UI가 어색해 보이죠. 문제의 화면 원인이 현상이 발생하는 이유는 Material Design의 터치 피드백 처리 방식 때문입니다. FloatingActionButton이 Container 안에 직접 들어있을 때는 기본적으로 사각형 영역에 대해 ripple effect가 적용됩니다. 아래 코드는 FloatingActionButton이 Container 안에 직접 들어있을 코드 예제입니다.Container( decoration: BoxDecoration( gradient: Linea..

Flutter 앱을 개발했지만 앱의 아이콘이 기본 Flutter 아이콘이거나, 앱을 실행했을 때 기본 Flutter 스플래시 화면이 뜨는 경우가 있습니다. 이것은 아직 앱 아이콘과 스플래시 화면을 설정하기 않았기 때문입니다. 이번 글에서는 앱의 아이콘과 실행 시 나타나는 스플래시 화면을 어떻게 변경하고 커스터마이징할 수 있는지 알아보겠습니다.  1. 준비 단계1.1. 필요한 이미지 준비하기앱 아이콘 이미지: 정사각형 이미지 (권장 크기: 1024x1024 px, PNG 형식)스플래시 이미지: 앱 실행 중 나타나는 이미지를 준비 (배경이 투명한 PNG 추천)1.2. 이미지 경로 지정이미지를 프로젝트 내 assets 디렉터리에 저장합니다. 예제 구조는 다음과 같습니다.root/├── assets/│ └─..

Flutter로 앱을 개발했습니다. 그렇다면 출시를 해야겠죠? 이 글은 Flutter로 개발한 앱을 Google Play 스토어에 출시하는 과정을 정리했습니다. 목차1. 계정 생성2. 앱 빌드하기3. 앱 생성 및 등록정보4. 내부 테스트5. 비공개 테스트6. 프로덕션 검수  1. 계정 생성Google Play 개발자 계정 생성- Google Play Console에 접속합니다.- Google Play 개발자 계정 등록합니다.    - 계정 등록비는 25 달러 인데, 한 번만 결제하면 됩니다.    - 결제 후 본인 확인 및 계정 활성화 과정을 진행합니다. 본인 확인이 완료되면 이메일로 알림을 받는데요. 이 과정이 며칠 걸린다고 합니다. 본인 확인을 기다리면서 앱 빌드를 준비합니다.  2. 앱 빌드하기키스..

까먹방지를 위해 적는 글. 1. gtag 적용하기gtag 적용하는 방법은 아래 링크 참고해주세요. (이 글에서는 생략!) https://coyo-hm.github.io/post/nextjs-gtaghttps://kimyanglogging.tistory.com/3 다만, 위 글은 Next.js 14 이전 버전인듯 합니다. Next.js 14 에서는 _app.tsx 파일이 없으므로 Script 선언은 layout.tsx 에서 해주시면 됩니다.  2. gtag config 에 user_id 넣기저의 경우 authenticate.ts 파일을 만들어 로그인 로직을 이곳에 두었습니다. // authenticate.ts import { GA_KEY } from "./gtag";export async function ..

SVG 색상 변경 문제개발을 하다 보면 SVG 파일의 색상을 상황에 따라 바꿔야 할 때가 있습니다. 아이콘이나 로고 색상을 테마에 맞춰 변경하거나, 사용자 인터랙션에 따라 유연하게 조절하고 싶은 경우도 있을 거예요. 저의 경우 종이비행기 SVG 이미지를 만들었는데요. 배경색과 그림자색을 동적으로 할당하여 사용자에게 시각적인 즐거움을 주고 싶었습니다.   하지만 그렇다고 매번 SVG 코드를 수정하는 것은 번거로운 일이죠.🥵 한 번 생각해보세요. 프로젝트에서 SVG를 사용하고 있고, 그 색상을 자주 변경해야 한다면 어떻게 하시겠어요? SVG 파일을 열어서 직접 fill 속성을 바꿔주나요? 아니면 특정 상황마다 다른 색상으로 변환된 이미지를 새로 준비하나요? 이 글에서는 SVG의 색상을 동적으로 변경하는 방..

제가 최근에 만든 서비스는 홈 화면에 사용자들의 이용 수 보여주고 있습니다.이처럼 사용자의 이용 수를 카운트하여 보여주고 흥미를 끄는 방식이 있는데요. 이런 카운트 기능을 어떻게 구현할까 고민하다 supabase의 RPC를 이용해 구현해 보았습니다. 이 글은 그 과정에 대해 설명하는 글입니다. 이 글을 끝까지 읽으면 꼭 카운터가 아니더라도 비슷한 상황에서 적절히 사용하실 수 있을 겁니다.  사용자가 버튼을 클릭하면 숫자를 올려줘처음에는 이 기능을 이용 중에 생성된 DB row의 수를 기준으로 숫자를 카운트했습니다. 하지만 이 row는 서비스를 끝까지 이용했을 때에만 생성되기 때문에 중간에 이탈한 사용자의 수는 숫자로 카운트되지 않았죠.. 그래서 버튼을 클릭하자마자 숫자가 올라가도록 수정했습니다. 먼저 ..