소개
만들어보고 싶었던 앱 아이디어가 하나 있었는데, 20기에 안드로이드 앱 제작 스터디가 열려서 참여하게 되었습니다 🙂
Rose 스터디장님의 사례글과 1주차 강의를 보며 따라해보았습니다.
https://www.gpters.org/dev/post/android-app-design-installation-X3uFwxSHeIO0k3n
앱을 직접 디자인해보고
Flutter를 사용해 APK 파일을 만든 뒤
실제 제 안드로이드 폰에 설치해보는 것까지 진행해보았습니다.
진행 방법
🛠 사용한 도구 정리
앱 디자인
Stitch (by Google) https://stitch.withgoogle.com/
코드 제작
앱 빌드 & 테스트
Flutter
Android Studio
실제 안드로이드 스마트폰에 APK 직접 설치
⚙️ 전체 흐름은 이렇게 진행했어요
Stitch를 사용해 앱 화면 디자인 https://stitch.withgoogle.com/
초등학생용 받아쓰기 앱을 디자인 해달라고 했습니다.
지피티에서 앱 디자인 프롬프트 생성 후 제작했습니다.
흑인 소년 > 동양인으로 바꿨어요
소년과 연필의 그림이 있는 모바일 앱
zip 다운로드 받기
image 폴더 생성 후 다운로드
디자인을 바탕으로 Codex로 Flutter 코드 생성
이미지 생성했었던 프롬프트 추가하여 플러터 앱제작 프롬프트를 생성 후 코드제작해봤습니다.
codex 안써봐서 일부러 사용해봤는데 plan 기능 써보려니 환경 어쩌고 오류가 떠서 플랜인 척 프롬프트 만들어서 코드생성해봤습니다 ㅠ
개발 환경 세팅 (Android Studio + Flutter) + @
APK 파일 생성
1) 새 플러터 프로젝트 만들기
2) 위에서 생성해둔 코드로 플러터 프로젝트 파일 내 코드 교체
3) apk 제작
내 폰에 직접 설치해서 실행
build\app\outputs\flutter-apk/폴더 안의 app-release.apk 파일을 압축해서
zip 파일 형태로 카톡으로 전송 > 폰에서 설치
😅 가장 힘들었던 부분 – 개발 환경 세팅
앱 개발보다 어려웠던 건 사전 개발 환경 설치였습니다.
설정해야 할 게 생각보다 많았어요.
Android Studio 설치 후 세팅
Git 설치
VS Code 설치 후 Flutter 확장 추가
시스템 환경 변수 설정
Flutter 경로 등록
PATH 설정 등등
결과와 배운 점
✅ 결과
아주 간단한 화면 이동 기능만 구현된 앱이었지만 일단 폰에 설치 해봤다는 점에서 만족.
스티치 디자인이 예뻐서 다양한 앱을 만들어보고 싶어졌어요.
다음에는
본격적인 기능 추가를 해보고 싶어졌어요 🔥
마무리 한마디 💬
생각보다 훨씬 재밌어서 앞으로의 스터디가 매우 기대됩니다. 😊
늦게까지 고생많으셨던 로즈님 감사합니다 :)
