2026. 1. 2. 22:17ㆍ기록/UXUI 스터디
ASC 앱만들기 소모임에서 배운 것들을 실습하며 정리한 내용들이다.
안티그래비티에서 앱 개발을 위한 플로터 환경 설정 방법이다.
1. 안티그래비티 켜기 (폴더는 만들어 둬야함)
2. 오른쪽 상단에서 '...' 클릭 -> 'Customizations' 클릭 -> 'Workflows' 클릭 -> '+ Global' 클릭 -> 폴더명 입력(영문과 숫자만 가능) -> 'Content' 쪽에 환경설정 넣을 내용 입력 & Discpition에는 제목으로 쓸 타이틀 입력(한글 가능) md파일이 만들어짐(입력한 게 md 파일을 만든 것)
* '+ Global'은 안티그래비티의 모든 프로젝트에 적용할 룰을 설정할 때 사용.
* '+ Workspace'는 안티그래티에서 현재 오픈한 프로젝트에만 적용할 룰을 설정할 때 사용.
👇 Flutter 환경설정 요청 프롬프팅
When setting up the Flutter environment, include only iOS (Swift) and Android (Kotlin). Do not include Linux, Windows, macOS, or Web. [Project Setting] 1. Precautions** Change namespace and applicationId to the actual package name mentioned and the actual App ID. Remove the package attribute from AndroidManifest.xml (replaced by namespace). 2. pubspec.yaml Settings Important: Use Riverpod 3.x. ```yaml dependencies: flutter: sdk: flutter # State Management (Determines how screens change when events occur) flutter_riverpod: ^3.0.0 riverpod_annotation: ^2.3.0 # Data Serialization (Converts server data for app use, and vice versa) freezed_annotation: ^2.4.1 json_annotation: ^4.8.1 # Local DB & HTTP (Tools to help store data on the device) drift: ^2.14.1 drift_flutter: ^0.1.0 dio: ^5.4.0 # UI & Icons (Can be changed to use Lucide icons) fluentui_system_icons: ^1.1.229 # Utilities path_provider: ^2.1.2 url_launcher: ^6.2.5 flutter_displaymode: ^0.6.0 dev_dependencies: flutter_test: sdk: flutter build_runner: ^2.4.7 riverpod_generator: ^2.4.0 freezed: ^2.4.6 json_serializable: ^6.7.1 drift_dev: ^2.14.1 flutter_lints: ^3.0.0 ``` Riverpod 3.0 Key Changes New Features: - Support for riverpod_annotation and riverpod_generator (Code generation based) - Improved type safety - Better error messages - Providers can be created using the @riverpod annotation Backward Compatibility: - Existing Provider styles (Provider, FutureProvider, etc.) still work perfectly. - This boilerplate uses the existing style (more explicit and easier to understand). - You can switch to the @riverpod annotation if desired. Note: - riverpod_annotation is optional. - This project uses explicit Provider declarations (beginner-friendly). 3. Folder Structure Creation Script ```bash mkdir -p lib/core/constants mkdir -p lib/core/errors mkdir -p lib/core/utils mkdir -p lib/data/datasources/local mkdir -p lib/data/datasources/remote mkdir -p lib/data/models mkdir -p lib/data/repositories mkdir -p lib/domain/entities mkdir -p lib/domain/repositories mkdir -p lib/presentation/providers mkdir -p lib/presentation/screens mkdir -p lib/presentation/widgets ```
3. 'Back to Agent' 클릭 -> 생성된 md파일을 드래그로 오른쪽 대화창에 끌어다 놓고 아래 프롬프트 입력.
(md파일 첨부)
새로운 플러터 프로젝트를 생성하고 초기 설정을 진행해줘.
기획 및 구현은 프로젝트 세팅 후 진행할 거야. 프로젝트 정보
- 앱 이름: (영문으로만 원하는 앱 이름 적기-숫자,이모티콘,특수문자,띄어쓰기 없이 영문만 가능)
-> 여기서 입력한 앱 이름은 차후에 지정명으로 사용됨.
-> 예) 웹 주소/ID의 com.company.appname 에서 주황색 글씨가 앱 이름으로 들어가게 됨.
-> 나중에 변경도 가능함.
-> 중간에 오류가 날 경우엔, 오류를 고쳐달라고 프롬프트를 입력하면 됨.
-> 진행하면서 나오는 Accept 버튼과 접근 허용을 모두 허용으로 클릭해주면 됨.
이렇게 등록된 환결설정은 실제로 IOS와 안드로이드에서 돌아갈 수 있게 해 준다.
환경 설정이 잘 설치됐으면 왼쪽에 폴더들이 주르륵 나온다.
만약 안 보인다면 플러터 세팅이 잘 됐는지 확인하면 된다.
+ 왼쪽 폴더명이 빨간색 글씨인 경우엔 에러가 있다는 표시다.
0. flutter 세팅 버전 확인 프롬프팅
flutter --version
1. 프로젝트 생성 프롬프팅
flutter create --platforms android,ios --org com.[영어앱이름] my_app
2. 생성된 프로젝트 폴더로 이동하는 프롬프팅
cd my_app
3. 패키지 설치 확인하는 프롬프팅
flutter pub get
설치가 안 되어있으면 워크플로우를 실행할 지에 대해 물어보는데, 여기서 워크플로우를 진행해 달라고 하면 된다.
이후에 진행 시간이 좀 걸리는데, 중간 중간 나오는 Accpet를 모두 클릭해 주고, 나오는 권한들을 모두 허용해 주면 된다.
(상황에 따라 나오는 질문들이나 진행이 달라질 수 있음)
Flutter 설정 후 보여지는 폴더 의미들
- lib 폴더 : 앱의 실제 코드들이 모여있음. (앱의 진입점에 관련된 코드를 살펴보면 됨)
- assets : 앱에서 사용하는 이미지, 폰트, 로띠 등 자원을 모아두는 곳.
- IOS, 안드로이드의 기본적인 환경설정을 위한 코드들이 있음. 이게 있어야 테스트 할 때 정상적으로 돌아감.
- pubspec.yaml : 프로젝트 설정 및 의존성 관련을 모아두는 곳.
- .agent : #agent 참조 파일을 확인할 수 있음
- .dart_tool : Dart 도구 관련 파일을 확인할 수 있음
- .idea : IDE 설정(안드로이드 스튜디오)
- android : 안드로이드 특화 코드 모음
- ios : ios 특화 코드 모음
- main.dart : 앱 진입점.
- .gitignore : 깃헙에 올리지 않을 파일들
- .metadata : 플루터 메타데이터 모은 곳
- README.md : 프로젝트 설명
앱 버전 의미
예 : 4.2.1ver일 때
- 4: 메이저(major) 버전 / 강제 업데이트를 해야하거나 하위 버전과 호환되지 않는 변화가 있을 경우 숫자가 변경됨
- 2 : 마이너 버전 / 기능을 새롭게 추가하거나 UXUI를 개선했거나 등 하위 버전과 호환되는 경우 숫자가 변경됨
- 1 : 패치 버전 / 소소한 버그 등을 수정할 숫자가 변경됨
-> 모든 숫자는 1 -> 2처럼 숫자가 올라감.
-> 해당 버전의 숫자를 보고 어떤 것을 업데이트 했는지 알 수 있음.
빌드 번호는 자동화가 안 되어 있어서, 수정했을 때 내보내기(Export) 할 때는 빌드 번호를 바꿔줘야함.
-> AI한테 '빌드 번호를 빌드할 때마다 자동으로 올라가도록 설정해줘' 시킬 수도 있음.
-> 버전 관리는 AI에게 빌드를 할 때마다 version 숫자를 올려달라고 요구할 수 있음.
-> 심사 거절됐을 땐, 거절 당한 사유를 수정한 뒤 버전 변경 없이 재 배포해서 심사 진행
OS별 파일 확장자
- 안드로이드 : aab(구 apk)
- IOS : ipa
앱 제작 순서
- 기능이 어떻게 돌아가고 어떤 정보를 저장하고 특정 기능이 어떤 방식으로 돌아가고 화면은 어때야하는지 AI에게 요청해야 그나마 비슷한 화면이나 기능을 만들어줄 수 있다.
-> 명확하게 어디에 저장해야한다거나 구조를 안 알려주면 로컬에 저장하거나 AI가 멋대로 설계하게 됨.
이상적인 프로세스
기획(유저스토리 → 저장 정보&유즈케이스 정리 → 화면/플로우 정리) → 프롬프트 작성 → 구현 요청
1. 유저스토리 작성
예)
- 스토리1 : 사용자는 특정 날짜에 어디에 얼마를 썼는지 간단하게 기록하고 싶다.
- 스토리2 : 사용자는 지난 달에 어디에 얼마를 지출했는지 보고 싶다.
2. 서버에 저장할 정보, 사용자 입력 방식 정하기
예)
- 방법 1 : 2025.11.14 | 수입 | 월급 | 1,000,000원 | 메모
- 방법 2 : 2025.11.14 | 수입 | 월급 | 회사 | 1,000,000원 | 메모
3. DB에 저장해야하는 정보 정리하기
예)
a. 회원 정보(로그인 필요 시): 이메일, 닉네임, 생년월일
b. 거래 타입: 수입, 지출
c. 카테고리:
- 수입: 시스템(월급, 배당금, 보너스), 커스텀
- 지출: 시스템(식비, 교통비/차량, 구독비, 주거비, 공과금, 의료비, 문화/생활, 경조사), 커스텀
d. 결제수단: 현금, 카드, 계좌
e. 거래내역:
e 예시 1) 사용자가 월급(2백만원) 계좌로 입금된 것 입력 후 저장
e 예시 2) 사용자가 교통비(1만원) 카드로 지출한 것 입력 후 저장
여기까지 정리를 하면 유저스토리랑 정보가 나오게 된다.
이것을 기반으로 '유즈케이스'를 생성해야 한다.
4. 사용자가 입력할 정보 정리하기
예) 날짜, 거래 타입, 카테고리, 금액, 통화, 메모
- 시스템 입력: 통화, 날짜
- 사용자 입력: 거래 타입, 카테고리, 금액, 메모
5. 유즈케이스 설계하기
유즈케이스를 AI에게 전달해서 기능을 만들어달라고 해야한다.
유즈케이스란?
기능들이 어떤 상황에서 어떻게 동작을 해야하고, 어떤 정보를 입력 받아야 하고, 동작 이후엔 완료나 오류 발생 시엔 어떤 식으로 화면에 보여져야 한다(혹은 팝업이 노출되어야 한다 등) 등 '상황 별로 정리를 한 케이스' 이다.
-> AI에게 실제로 시키기 전에 유즈케이스를 검토 해야한다.
-> 유즈케이스 내에 있는 '사후 조건'은 완료 시킨 이후 어떤 상태가 되어야 하는지에 대한 내용을 다룬다.
예 1) UC-1 수입/지출 내역 작성 (Create)
1. [사용자] 거래타입(지출)을 선택한다.
2. [사용자] 날짜, 금액, 카테고리, 메모(선택)를 입력한다.
3. [사용자] '저장하기' 버튼을 누른다.
4. [시스템] 필수 입력값(카테고리, 금액)이 유효한지 검증한다.
5. [시스템] 데이터를 저장하고, 홈 화면으로 이동시킨다.
예 2) UC-2 수입/지출 내역 조회 (Read)
1. [시스템] 현재 설정된 '기준 월(Month)'을 확인한다.
2. [시스템] 서버로부터 해당 월의 수입/지출 데이터를 조회한다.
3. [시스템] 수입/지출 데이터 수신한 후, 총 수입/지출 계산 및 날짜순으로 정렬한다.
4. [시스템] 상단 영역에 요약 카드(합계 금액)를 표시하고, 하단 영역에 내역 리스트를 출력한다.
-> 유즈케이스 생성용 시스템 프롬프트를 AI에게 입력한다.
6. 테스크 생성하기
큰 기능을 만들기 전에는 AI에게 유즈케이스를 전달 -> 테스트 계획 규칙에 따라서 유즈케이스에 맞는 기능을 만들기 위한 테스크를 계획해줘. 라고 AI 요청 -> 이후 순차적으로 만들어달라고 하면 됨.
7. 구현하기.
부가 내용 - 스티치 프롬프트
1. 홈 화면 계부 앱 홈 대시보드 UI. 상단에는 '총 잔액'과 '월 지출'을 보여주는 신용카드 스타일 위젯. 그 아래에는 지출 카테고리를 시각화한 반원 도넛 차트. 하단부에는 작은 아이콘(커피, 교통, 음식)이 포함된 최근 거래 내역 리스트. 4개 아이콘이 있는 하단 내비게이션 바. 사용자 친화적 레이아웃, 명확한 데이터 시각화.
2. 수입/지출 입력 화면 금융 앱의 지출 입력 화면 UI. 상단에는 금액 입력을 위한 크고 굵은 숫자 표시. 그 아래에는 카테고리(음식, 쇼핑, 교통)를 나타내는 컬러풀한 둥근 아이콘 그리드. 최상단에는 '수입'과 '지출'을 오가는 토글 스위치. 하단에는 깔끔한 커스텀 숫자 키패드. 사용성과 큰 터치 영역에 집중.