웹개발자가 처음으로 앱을 만드는 방법(vercel v0)

v0, zed 등 AI 의 도움을 받아 최초 앱 만들기

Dec 05, 2024

나는 웹 개발 경력이 10년이 좀 넘는다. 매 프로젝트 때마다 HTML, CSS 와 계속 씨름해왔으며, 올해에는 React + tailwindcss 로 제품개발을 했었다. 이번에 사이드 프로젝트로 만들어보고 싶은 앱이 있는데, 이것은 웹버전이 없는 스마트폰 앱의 형태이다. 그래서 어떻게 하면 좀 수월하게 앱개발을 공부해볼 수 있을까 고민하다가 아래와 같은 방법을 생각해냈다.

웹개발자의 앱개발 공부 전략

vercel v0 활용하기

만들고 싶은 앱의 기능을 text(프롬프트) 로 만든다. 그리고 그것을 react 코드로 만든다. (text to code)

내가 사용했던 프롬프트

나는 앱개발자야. 텍스트 기반의 일기작성 앱을 만들려고 해. 이 앱은 모바일과 데스크톱에서 모두 동작하도록 반응형디자인이 적용되어야 하고, 일기 목록, 일기 작성, 일기 상세 그리고 달력까지 총 4개의 화면이 필요해. React 와 tailwindcss 를 활용해서 프로토타입을 만들어줄 수 있어?

v0는 와이어프레임이나 디자인 결과를 이미지로도 넣을 수 있지만, 나는 디자이너도 아니고 와이어프레임도 익숙하지 않아서 그냥 텍스트로만 해봤다.
이 결과를 flutter 코드로 변경해달라고 v0에게 요청한다. 내가 만들 앱의 기능은 비교적 단순하기 때문에, 원소스 멀티유즈를 달성하기 위해서 flutter 를 사용해보기로 했다. v0가 아래와 같이 잘 변경해서 만들어준다.

Zed 에디터 활용하기

v0가 만들어준 flutter 코드를 빌드해 보았지만, 역시나 에러가 난다. 이 에러를 해결하기 위해서 zed 에디터 (with llama3.2) 를 사용하였다.
zed 는 클로드나 chatgpt 로도 사용할 수 있지만, 로컬에 설치한 Ollama 의 모델도 사용할 수 있다.
안드로이드 기기의 에뮬레이팅은 안드로이드 스튜디오(나의 경우는 intellij ultimate) 를 활용한다.
영어로 질문하고 답변하기는 하지만 llama3.2 가 생각보다 코드를 잘 고쳐준다. 내 랩탑 사양때문에 속도는 조금 느리지만.