코드로 우주평화

2024.04.12. 제 11회 유니톤 대상 후기, 그리고 배운 것들 올해 4월, 해커톤에 나가 대상을 받았던 적이 있습니다. 그때 만들었던 서비스가 '대화 평화상'이었습니다.   '대화 평화상'은 카카오톡 대화내용을 바탕으로 톡방의 평화를 이끈 사람을 뽑아주는 서비스입니다. 우리 팀은 이 서비스를 실제 대중에게도 공개하고 싶었지만, 당시에는 LLM 요청 건당 100원이 넘는 무시무시한 비용이 들었기에 잠시 보류할 수밖에 없었습니다. 그러다 여름의 끝자락 우리 팀은 다시 모였습니다.  다시 해보자!'대화 평화상'이 그대로 사라지는게 아쉬웠던 우리는 다시 시작해 보기로 했습니다.  다행히도 그 사이에 LLM 비용은 많이 낮아져 우리가 감당할 수 있을만한 수준이 되었고, 새로운 디자이너 분도 영입하여 차근차..

이번 글에서는 작성한 노트를 백업할 수 있는 노트 내보내기/가져오기 기능을 구현해 보겠습니다. 우리가 만드는 노트 앱은 데이터를 따로 데이터베이스에 저장하거나 외부에서 데이터를 수집하지 않고 있습니다. 그렇기 때문에 노트 백업 또한 사용자 기기 저장소에 파일 형태로 저장하도록 구현해 보겠습니다. 노트 내보내기/가져오기의 주요 요구사항은 다음과 같습니다. 노트 내보내기 - 사용자는 저장된 모든 노트를 파일로 내보낼 수 있습니다.노트 가져오기 - 사용자는 파일로부터 노트를 가져올 수 있습니다.  목차노트 내보내기 구현노트 가져오기 구현SnackBar 유틸 함수 분리설정 화면에 메뉴 추가 1. 노트 내보내기 구현NoteService 클래스에 노트를 CSV 파일로 내보내는 exportNotesToCsv 메서드를..

지난 글에서는 알림의 데이터 모델과 기본 로직을 구현했습니다. 노트 알림 로직 구현하기 이번 글에서는 알림 기능 구현을 최종 완성해 보겠습니다. 이전에 구현해 둔 알림 UI에 알림 로직을 적용하고, 알림 설정 업데이트, 여러개의 알림을 한 번에 켜고 끌 수 있는 다중 선택 모드, 그리고 알림 클릭 시 노트 상세 화면으로 이동하는 기능까지 구현하겠습니다. 최종 결과 이미지는 다음과 같습니다. 구현 순서는 다음 목차 순서대로 진행합니다.목차알림 로직 적용알림 설정 변경 및 업데이트다중 선택 모드 구현알림 클릭 시 노트 상세 화면으로 이동 1. 알림 로직 적용먼저, 노트 알림 화면(NoteAlarmView)에서 각 개별 알림에 대한 UI와 데이터는 알림 카드(NotificationCard) 컴포넌트로 분..

지난 글에서는 노트 알림 UI를 구현했었습니다. 이번 글에서는 이어서 노트 알림 로직을 구현해 보겠습니다. 제가 만드는 노트 알림 기능은 크게 두 가지, 예약 알림과 반복 알림을 지원합니다. 사용자는 각각의 알림을 활용하여 자신이 작성한 노트를 원하는 시간에, 정기적으로 받아 볼 수 있습니다. 구현 순서는 다음 목차 순서대로 진행합니다.목차필요한 패키지 설치Notification 모델 정의알림 저장소 구현알림 서비스 구현  1. 주요 패키지 설치알림 로직을 구현하기 위해 필요한 패키지는 다음과 같습니다. 1. flutter_local_notifications: 로컬 알림을 처리하기 위한 주요 패키지입니다.2. timezone: 알림 스케줄링을 위한 시간대 관리에 사용됩니다. 아래 명령어를 입력하여 패키지..

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

지난 글 마지막 말에 앱 출시를 다룬다고 했었습니다. 현재는 앱 출시를 위해 검수 및 비공개 테스트 중입니다. 비공개 테스트의 경우 2주 동안 진행되기 때문에 해당 기간 동안 노트 알림 기능을 추가로 구현해 보겠습니다. 노트 알림 기능은 작성한 노트를 다시 리마인드 하는 기능입니다. 제가 만들고 있는 노트 앱은 단순히 기록하는 것뿐만 아니라 자신의 노트를 다시 발견하고, 과거 아이디어를 재활용할 수 있도록 돕는 것이 목표입니다. (그래야 멋진 노트 앱이죠~😉) 알림 기능은 크게 두 가지 기능을 기획했습니다. 하나는 예약 알림으로 특정 날짜와 시간에 특정 노트를 사용자에게 띄워주는 것입니다. 다른 하나는 반복 알림입니다. 특정 노트를 일정한 간격으로 반복적인 알림을 주는 기능입니다.  예약 알림은 특정 ..

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. 앱 빌드하기키스..