코드로 우주평화

누구나 자기만의 앱을 출시할 수 있다

비전공자가 앱 개발을?많은 사람들이 앱 개발을 ‘개발자만 할 수 있는 일’로 여긴다. 심지어는 같은 개발 직군이라 할지라도 앱 개발을 해보지 않았다는 이유로 쉽게 도전하지 못한다.  사실 나도 그랬다. 백엔드 개발자이긴 했지만 앱 개발에 대해서는 아무것도 몰랐다. 다시 말해 앱 서비스에 대한 기획부터, 디자인, 개발까지 제대로 할 수 있는 게 하나도 없었다. 디자인을 하기 위해 피그마 강의를 듣고, 앱을 개발하기 위해 플러터 강의를 들었다. 처음에는 강의를 따라 하며 이렇게 하는구나 싶었지만, 반년 동안 앱 하나 출시하지 못하고 결국 포기하고 말았다.   반년 넘게 개발만 하다 포기한 이유처음 만들려는 앱은 모닝페이지 앱이었다. 매일 아침 노트 3페이지를 의식의 흐름대로 채우는 것을 모닝페이지라고 한다...

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

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

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

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

'간단한 노트 앱을 만들자' 시리즈 첫 번째 글에서 우리가 컬러 팔레트를 정의했던 걸 기억하시나요? 당시에는 기본적인 색상 몇 가지만 정의를 했었습니다만, 이제는 다양한 요소들이 추가되었기 때문에 더 상세한 컬러들을 팔레트에 정의하고 테마로서 쉽게 view 화면에 적용할 수 있도록 구현해보겠습니다.  목차1. 컬러 팔레트 정의하기2. 테마 정의하기3. 테마를 앱 전체에 적용하기4. 테마 적용 UI 컴포넌트 예시    1. 컬러 팔레트 정의하기컬러 팔레트는 앱의 색상 설계를 한 곳에서 관리하도록 미리 정의해둔 파일입니다. 이번 글에서는 색상을 카테고리별로 나누어 추가하여 재사용성을 높여보겠습니다. color_palette.dartimport 'package:flutter/material.dart';clas..

지난 글까지 노트 앱의 주요 기능들을 모두 구현하였습니다. 이제 실제 앱 출시 전에 마지막으로 설정 메뉴를 구현해 보겠습니다. 설정 메뉴에는 고객 제안과 앱 정보, 개발자 이야기 메뉴를 담아보겠습니다. 이 노트앱은 회원가입이 따로 없기 때문에 개인 정보와 계정 관리에 대한 메뉴는 추가하지 않겠습니다. 먼저 최종 결과를 영상으로 보겠습니다. 참고로, UI 컬러 변경 작업이 함께 진행되어 이전의 어두운 색이 아닌 밝은 색으로 변경되었습니다. 컬러 변경에 대해서는 다음 글에서 다루겠습니다.  목차1. 설정 메뉴 추가하기2. 고객 제안 설문 링크 연결하기3. 앱 정보 페이지 추가 및 오픈소스 명시4. 개발자 이야기 웹뷰 추가하기  1. 설정 메뉴 추가하기기존 설정 메뉴는 아무것도 없는 화면이었습니다. 여기에 L..

더이상 간단하지 않기 때문에 '멋진' 시리즈로 이어서 연재합니다.이번 글에서는 이전 노트 목록을 무작위로 불러오는 랜덤 노트 기능을 추가해 보겠습니다. 이 기능은 이전에 작성한 노트를 랜덤 하게 표시하여 다시 한번 내용을 복기하고 오랫동안 기억하게 도와주는 기능입니다. 랜덤 노트 기능에서 필요한 요구사항은 다음과 같습니다.1. 사용자는 하단 네비게이션 바에 '랜덤 노트' 탭을 통해 랜덤 노트 화면으로 이동할 수 있다.2. 사용자는 랜덤 노트 카드에 있는 중요, 수정, 삭제 버튼을 이용하여 노트를 관리할 수 있다.3. 사용자는 랜덤 노트 카드를 위아래로 슬라이드 하여 다음, 이전 노트를 다시 볼 수 있다. 랜덤 노트 기능을 구현한 결과는 다음과 같습니다. - 랜덤 노트 탭을 누르면 랜덤 노트 화면이 보입니..

이번 글에서는 노트 목록 화면에 ‘노트 쓰기’ 플로팅 버튼을 추가해 사용자가 보다 쉽게 새로운 노트를 작성할 수 있도록 해보겠습니다.플로팅 버튼은 UI 디자인에서 화면 위에 떠 있는 형태로 배치되는 버튼을 말합니다. 보통 앱 화면의 가장자리에 둥둥 떠 있는 느낌으로 배치돼서 사용자들이 쉽게 접근할 수 있죠. Flutter 에서는 FloatingActionButton 위젯이 있어서 쉽게 구현할 수 있습니다. 우리가 만들 '노트 쓰기' 플로팅 버튼의 요구사항은 다음과 같습니다. 1. 사용자는 노트 목록 화면에 표시된 플로팅 버튼을 통해 노트 작성 화면으로 이동할 수 있다.2. 노트 카드 액션(중요, 수정, 삭제) 버튼이 나타날 때는 플로팅 버튼이 자동으로 사라져 사용자가 혼란스럽지 않도록 한다. 플로팅 버튼..

이전 글에서 우리는 노트 목록 화면에 필요한 대부분의 기능을 구현했습니다. Flutter로 간단한 노트 앱을 만들어보자 ⑦ - 노트 정렬 기능 구현하기하지만 기능 구현에 초점을 맞추다 보니 사용성이나 UI는 크게 고려하지 않았는데요. 이번 글에서는 노트 목록 화면의 UI를 리팩터링 하여 사용성을 높이고 눈에도 보기 좋은 UI로 수정해 보겠습니다. 이번 글에서 수정할 UI의 결과는 다음과 같습니다. 기존 화면과 비교하여 보여드리겠습니다. - 기존에는 하나의 노트 카드에 모든 정보가 담겨있어 어떤 내용이 중요한지 알기 어려웠습니다.- 새롭게 수정한 화면에서는 노트 내용이 가장 상단에 그리고 수정 날짜만 하단에 표시합니다.- 사용자가 노트 카드를 꾹 누르면 중요, 수정, 삭제 버튼이 표시되도록 했습니다.- 추..