저는 비개발자이며, 코딩을 잘 모릅니다.
항상 동경만 해 오던 앱을 개발하려고 노력해 보았으나 번번히 실패 하였습니다. No Coding/Low Coding방식으로 진행하려 했으나 이것도 번번히 실패였습니다.
말이 노코딩, 로우코딩이지 그래도 어느정도 기본적인 코딩지식은 있어야 하더라구요.
그러다 AI서비스인 GenSpark의 개발자 모드에서 드디어 코드하나 없이 성공했습니다.
제 경험기를 살짝 정리해서 올려 봅니다.
음악 커뮤니티에서 사용할 앱 이었습니다.
주요 기능은 회원들 소수가 사용할 수 있는 것들로 일단은 AI에게 제시했습니다. 간단한 설명과 함께.
회원가입 & 로그인 - 이메일/비밀번호 방식
연습 일정 관리 - 시작/종료 시간, 장소, 참석 여부
공지사항 - 중요한 밴드 소식 공유
자유게시판 - 글 작성, 수정, 삭제, 댓글
투표 - 다중 선택, 실시간 결과
악보 공유 - PDF/이미지 업로드 및 다운로드
앱의 디자인은 제가 선호하는 형태를 일단 텍스트로 제시해 주었습니다.
다크 모드 - 고급스럽고 세련된 느낌
색상 - 진 네이비 + 퍼플 + 골드
스타일 - 빈티지/노스탤직 감성
Genspark AI에게 원하는 앱의 목적과 기능을 자세히 설명했습니다.
예: “밴드 멤버들을 위한 연습 일정 관리, 공지사항, 자유게시판, 투표, 악보 공유 기능이 필요해요. 다크 모드로 고급스럽게 만들고 싶어요.”
� 핵심 팁
구체적으로 설명할수록 좋습니다 (색상, 분위기, 필수 기능)
참고할 만한 앱이 있다면 함께 언급하세요
“누가 사용하는지” 명확히 하세요 (밴드 멤버, 소규모 그룹 등)
⚠️ 주의사항
너무 많은 기능을 한 번에 요구하면 복잡해집니다
먼저 핵심 기능(로그인, 게시판 등)부터 시작하세요
AI가 3가지 다른 앱 화면 디자인을 생성해 보여 주었습니다.
마음에 드는 디자인을 선택합니다
� 핵심 팁
앱의 "느낌"이 가장 중요합니다 (밝은 톤 vs 어두운 톤)
색상 조합이 앱의 정체성을 결정합니다
나중에 수정 가능하니 일단 가장 마음에 드는 것을 선택하세요
⚠️ 주의사항
너무 복잡한 디자인은 나중에 수정이 어렵습니다
모바일 화면에서 보기 편한지 고려하세요
데이터를 저장하고, 회원과리, 로그인 등을 위한 계정 관리를 위해 데이터 베이스를
연결해야 합니다.
저는 웹에서 쉽게 관리 가능하고 무료 서비스인 구글에서 운영하는 'Firebase'를 선택했습니다.
Firebase (구글의 무료 클라우드 서비스)를 연결했습니다
데이터 저장, 사용자 인증, 파일 업로드 기능 활성화
구체적인 작업
Firebase 콘솔(console.firebase.google.com)에서 프로젝트 생성
Firestore Database 생성 (데이터 저장소)
Authentication 활성화 (이메일/비밀번호 로그인)
Storage 활성화 (악보 파일 저장)
google-services.json 파일 다운로드 → AI에게 업로드
� 핵심 팁
Firebase는 무료 플랜으로 충분합니다 (소규모 앱)
Database는 테스트 모드로 시작하세요
설정 파일(google-services.json)은 반드시 안전하게 보관하세요
⚠️ 주의사항
Database 생성을 먼저 해야 앱이 작동합니다
프로젝트 이름을 명확히 하세요 (나중에 찾기 쉽게)
이 단계에서는 항상 그렇듯이 AI와 티키타카를 지속적으로 해야 합니다.
계속 오류가 나거든요. 그럴때마다 오류 나는 부분을 화면 캡쳐해서 업로드하고 수정을 지속적으로
요청해야 합니다. 미안해 하실 필요 절대 없습니다. 사람이 아니니까요...ㅎㅎ
AI가 자동으로 Flutter 코드를 생성합니다
화면 레이아웃, 버튼, 데이터 연결 등 모든 기능 구현
AI가 만든 것들
로그인/회원가입 화면
연습 일정 등록/조회/삭제 화면
공지사항, 게시판, 투표 화면
악보 업로드/다운로드 기능
다크 모드 디자인 적용
� 핵심 팁
이 단계는 기다리기만 하면 됩니다
AI가 작업 중 질문하면 명확히 답변하세요
중간에 미리보기 URL이 제공되면 테스트해 보세요
⚠️ 주의사항
급하게 서두르지 마세요 - AI가 단계별로 진행합니다
에러 메시지가 보이면 AI에게 알려주세요
웹 브라우저로 앱을 테스트했습니다
문제점 발견 → AI에게 수정 요청 → 즉시 반영
실제 수정 사항들
❌ 문제: 일정에 시작/종료 시간 입력이 없음 ✅ 해결: 시간 선택 기능 추가
❌ 문제: 자신이 등록한 일정을 삭제할 수 없음 ✅ 해결: 삭제 버튼 추가 (관리자 + 작성자)
❌ 문제: 일정 상세보기가 빈 화면으로 나옴 ✅ 해결: 다이얼로그 레이아웃 단순화
❌ 문제: 게시판 글 수정/삭제 기능이 없음 ✅ 해결: 자신의 글에 수정/삭제 버튼 추가
❌ 문제: 모바일에서 악보 파일 업로드 안 됨 ✅ 해결: 파일 선택 방식 변경 (모바일 호환)
� 핵심 팁
스크린샷을 찍어서 AI에게 보여주면 이해가 빠릅니다
구체적으로 설명하세요: “이 버튼을 눌렀을 때 ~가 나와야 해요”
한 번에 하나씩 수정하는 게 안전합니다
⚠️ 주의사항
수정 후 반드시 새로고침(Ctrl+F5)하세요
모바일과 PC에서 둘 다 테스트하세요
브라우저 콘솔(F12)에서 에러 메시지 확인하세요
완성된 앱 코드를 GitHub에 저장했습니다
나중에 수정하거나 다른 개발자와 공유 가능
구체적인 작업
GitHub 계정 생성 (github.com)
AI가 생성한 백업 파일(.tar.gz) 다운로드
GitHub Desktop 설치
백업 파일 압축 해제 → flutter_app 폴더 얻기
GitHub Desktop에서 저장소 생성 → 코드 업로드
� 핵심 팁
Private 저장소로 설정하세요 (비공개)
정기적으로 백업하세요 (수정할 때마다)
README 파일에 앱 설명을 작성하세요
⚠️ 주의사항
Firebase 설정 파일은 절대 공개하지 마세요
저장소 이름을 명확하게 하세요 (예: no-return-diary-2025)
웹 브라우저에서 앱을 테스트할 수 있는 URL 생성
KakaoTalk 등으로 링크 공유 → 멤버들이 바로 접속
� 핵심 팁
웹 버전은 베타 테스트용으로 완벽합니다
모바일 브라우저에서도 잘 작동합니다
초기 피드백을 빠르게 받을 수 있습니다
⚠️ 주의사항
임시 URL이므로 나중에 변경될 수 있습니다
정식 배포는 Android APK 파일이 필요합니다
실제 Android 앱 파일(.apk) 생성
Google Play Store에 등록하거나 직접 배포
예상 작업
AI에게 “Android APK 빌드 요청”
앱 아이콘, 이름, 버전 설정
APK 파일 다운로드
테스트 기기에 설치
(선택) Play Store 등록 (개발자 계정 필요, $25)
� 핵심 팁
APK 파일은 KakaoTalk으로 직접 공유 가능
Play Store는 심사에 며칠 소요
먼저 직접 배포로 테스트하는 게 빠릅니다
⚠️ 주의사항
APK 파일은 안전한 곳에서만 다운로드하세요
“출처를 알 수 없는 앱” 설치 허용 필요
1. AI는 명확한 지시를 좋아합니다
“이 버튼을 눌렀을 때 ~가 나와야 해요” (구체적 ✅)
“이거 좀 고쳐주세요” (모호함 ❌)
2. 스크린샷은 최고의 의사소통 도구
문제 화면을 캡처해서 보여주면 이해가 10배 빨라집니다
3. 한 번에 하나씩 수정
여러 기능을 동시에 수정하면 문제 추적이 어렵습니다
4. 모바일과 PC는 다릅니다
웹에서 작동해도 모바일에서 안 될 수 있습니다 (특히 파일 업로드)
5. 백업은 자주, 자주
작동하는 버전은 항상 GitHub에 백업하세요
6. Firebase는 강력하지만 설정이 중요
Database를 먼저 생성해야 합니다
테스트 모드로 시작하고 나중에 보안 규칙 설정
코딩 지식 없이도 AI의 도움으로 실제 작동하는 앱을 만들 수 있습니다!
가장 중요한 것은:
명확한 목표 - 무엇을 만들고 싶은지 구체적으로 설명
꾸준한 테스트 - 자주 테스트하고 문제를 빠르게 발견
인내심 - AI도 완벽하지 않으니 수정을 반복하세요
백업 - 작동하는 버전은 꼭 저장하세요
여러분도 할 수 있습니다! 화이팅!