바이브코딩을 통한 안드로이드 앱 만들기 준비 : mac에서 환경 세팅 중심으로

소개

안드로이드 스터디를 통해 바이브코딩으로 클로드 코드와 flutter를 활용하여 안드로이드 앱을 만들어보는 미니 사례를 만들어 보았습니다.

이번 과정을 통해 Mac 환경에서, 클로드 코드를 통해 환경세팅을 하고 flutter 기반의 안드로이드 앱을 만들어보았습니다. 그리고 Stitch를 활용하여 앱 디자인을 구축할 수 있었습니다. 이 글에서는 brew를 통한 환경 세팅과 진행 과정을 공유해보려 합니다.

환경 세팅에 시간이 많이 들어, 이 과정을 집중하여 정리해보았습니다.

진행 방법

1. 개발 환경 세팅 (Mac os)

• Homebrew

  • Mac에서 개발 도구를 설치할 때 가장 먼저 필요한 게 Homebrew입니다. 일종의 앱스토어라고 생각하면 되는데, 터미널 명령어 한 줄로 다양한 개발 도구를 설치하고 관리할 수 있습니다.

  • 설치 방법 ( https://brew.sh/ko/) : 터미널에 다음 명령어 실행

    사본

    /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

• Android Studio
  

  • brew를 통한 Android Studio 설치 : 터미널에 다음 명령어 실행
    

    사본

    brew install --cask android-studio

  • (선택사항) 설치 완료 후 More Actions → SDK Manager 클릭 → SDK Tools 탭 → Android SDK Command-line Tools (latest) 항목을 찾아 체크 → Apply 클릭 후 설치

  • 환경 변수 세팅 : ~/.zshrc 파일에 아래 내용 추가

    • 저는 터미널에 vi 명령어로 아래 내용 추가해주었습니다

    • 터미널에서 vi ~/.zshrc이후 아래 내용 붙여넣기

export ANDROID_HOME=$HOME/Library/Android/sdk
export PATH=$PATH:$ANDROID_HOME/emulator
export PATH=$PATH:$ANDROID_HOME/platform-tools

• Flutter (version : 3.38.7)

  • brew를 통한 flutter 설치 : 터미널에 다음 명령어 실행
    

    사본

    brew install flutter

  • 검증 : 터미널에 다음 명령어 실행

    사본

    flutter doctor

  

• Git 설치

  • brew를 통한 Git 설치 : 터미널에 다음 명령어 실행

    사본

    flutter doctor

• Xcode (선택사항) - 저는 안드로이드 환경 외에 ios에서도 추후에 앱을 만들어 보고 싶어 설치하였습니다.

2. 프로젝트 생성

   • AI 코딩도구 : Antigravity (https://antigravity.google) 에서 다운로드

     • vscode, cursor, codex 등 다른 도구 사용하셔도 좋습니다.

   • 폴더 생성 후 code 폴더와 design 폴더 생성

     

     ALT

     글쓰기 회의 앱이 설치된 휴대폰의 스크린샷

3. 앱 디자인 구축 (Stitch)

   • Stitch (https://stitch.withgoogle.com/) 에서 앱 디자인 생성

   • 프롬프트

     사본

     에세이를 쓰기 위한 글쓰기 모임을 지원하는 앱을 디자인해 줘. 현재는 naver cafe에서 운영되고 있기 때문에 일단 naver cafe와 연동이 되어야 해. 그리고 기본적으로 naver cafe에 올라온 글을 잘 큐레이팅해서 보여주고 reaction하는 과정을 지원해야 해. 팔로우하는 사람의 글을 큐레이팅해서 보여주고, 관심 해시태그의 글도 큐레이팅해서 보여줘야 해. reaction은 좋아요와 댓글 외에도 이모지 등 많이 할 수 있게 해 줘.

   • 결과

     

     ALT

     웹사이트를 위한 검정색과 녹색 UI 디자인

   • 결과물 PC 다운로드
     

     

     앱 디자인 클릭 → ... 클릭 → 다운로드 → 압축해제 → design 폴더로 이동
     

4. 앱 만들기 : 클로드 코드에 다음 프롬프트로 앱 구축 요청

   사본

   @design 폴더의 디자인대로 flutter 프로젝트를 @code 폴더에 구현을 해줘

5. 결과물 확인

저는 안드로이드 환경의 핸드폰이 없어서, 맥북에서 에뮬레이터로 앱을 확인하였습니다. 웹으로도 확인은 가능합니다

# 프로젝트 내 code 폴더로 이동
cd code

# 에뮬레이터 실행
flutter emulators --launch Medium Phone

# flutter 실행
flutter run

ALT

녹색 화면과 검은색 화면이 표시된 앱의 스크린샷

결과와 배운 점

• 간단한 프롬프트로 쉽게 앱을 만들 수 있다는 것을 경험했습니다.

• 특히 디자인 부분에서, stitch를 활용하여 좀 더 퀄리티 있는 디자인을 얻을 수 있었습니다

• 에뮬레이터(ios는 시뮬레이터)를 통해 여러가지 환경에서도 앱을 확인해 볼 수 있었습니다