클로드(claude)한테 Flutter 앱 개발 맡겨보기1

💜Dabo (개발자 다보)·2024년 4월 19일
6
post-thumbnail

얼마 전 아래 영상을 보게됩니다.

김승우님의 발표자료인데, 지피터스(GPTers)라는 커뮤니티에서 클로드를 전도 하고 계시는 영상이였어요.

영상이 꽤 긴데, 시간 가는 줄 모르고 조금 많이 감탄하며 봤습니다.

두 영상을 보고 느낀점은

  • 오.. 말씀 정말 잘하신다.. 영업왕이시네.. 클로드 당장 구매 갈겨
  • 앱 개발자 입장에서 잘 짜줬으면 하는 마음과 에러가 조금은 났으면 하는 충돌하는 마음이 절실히 공감 ㅋㅋㅋ큐ㅠㅠㅠㅠㅠ
  • 아니 저거까지 저렇게 메끄럽게 결과를 낸다고? 진짜 노코드 세상이 머지 않았다.
  • 항상 아이디어만 주절주절 노트에 적어놓고 시간없다는 핑계로 토이 프로젝트 앱 개발을 미뤄뒀는데, 이건 미뤄둘 필요가 없다 ;; (승우님이 입문 iOS 개발자 시절에 3개월 걸린 개발을 이친구를 이용하니깐 3시간 만에 개발을 끝내줬다고 하더라구요, 결과도 꽤 놀라울 정도였구요)
  • 정말 개발은 환경셋팅만 어느정도 알고나면, 앱 내는 속도가 정말 빨라지겠다 생각 (코딩에 ㅋ도 모르는 사람이 이젠 진짜 앱을 완결성있게 하루만에 만들수 있는 시대가 왔군)

자 그렇게 바로 호기롭게 결제를 하고 시작해봅니다.

내돈내산 인증 샷.. jpg..
오늘은 하늘이 흐리네요

자 이제 묵혀뒀던 아이디어를 갖고,
하루만에 앱출시를 목표로 달려봅니다.

클로드와 앱 개발 시작!

여행가J님의 글을 따라 진행해봤습니다.
https://www.gpters.org/c/claude3/_

1) 기능명세서 만들기

결제 후 첫 질문이였어요 (두근)

질문:

pain point: 술자리에서 대화 주제 고갈

주 기능:
- 토크쇼에서 할 법한 답변이 술술 나오는 질문들로 250개 구성
- 랜덤하게 카드 뽑기

비슷한 레퍼런스: 테이블톡과 같은 이미 있는 보드게임 참고
구매링크: https://oneroommaking.com/product/%ED%85%8C%EC%9D%B4%EB%B8%94%ED%86%A1-%EC%A7%88%EB%AC%B8-%EC%B9%B4%EB%93%9C/1669/

위 내용을 참고해서 앱의 기능명세서를 작성해줘

결과:

무료버전일 때 질문을 몇자 해봤었는데, 그 때와는 확연히 다른 퀄리티로 답을 하는 것 같습니다.
주요 기능, 사용자 인터페이스, 기술 요구사항, 디자인 요구사항까지도 디테일 하게 답을 해줍니다.

그러고선 기획에 관련된 내용인 시나리오도 함께 요청했어요.

질문:

위 페인포인트, 기능명세서를 참고해서 이 앱을 사용하는 사람의 가상의 시나리오를 작성해줘. 
시간순서대로 이야기의 흐름을 볼 수 있어야해

결과:

시나리오를 대충 읽어봤는데 꽤나 매끄러워서 "오호라" 했습니다.

커스텀 질문을 넣고 커뮤로 관리하게끔 하는 내용은 제 메모장에 next backlog로 적어놨던 기능인데, 그것마저 잘 적어줘서 놀랬어요.

앱개발을 할 땐 주요 기능을 정말 작게 먼저 검증하거든요.

리소스 차원에서도 품이 많이 드니깐 작게 여러번 내는데, 생각해보니 어차피 내가 짜는 것도 아닌데 ??? 하는.. 악덕 사장 마인드로 바뀌어서 클로드한테 조금 더 일 시키는게 죄책감도 안들고 부담도 안되고 (개이득) 검증해보고 싶은 만큼 리소스 걱정없이 만들어달라고하니 편했어요.

저는 일단 대충 읽어봤을 때, 얼추 오호라 까지 나왔고 꼼꼼히 다시 보면서 첨삭하는 그 리소스 조차 쓰기 귀찮아서 그냥 이대로 수정없이 기획은 마무리 지었습니다.


2) 이제 코드를 짜줄래?

자, 그러면 이제 코드 타임인데요

새 대화창을 만듭니다.

하하 저는 실수로 새 대화창을 만들고, 코드 요청없이 답 나왔던 내용 (질문+시나리오+기능명세서) 모두 합쳐서 엔터를 실수로 눌렀는데요 ..

지멋대로 평가를 하더라구요 ;;
(오히려좋아)

그래서 말한 걸 고려한 상태로 앱을 만들어달라고했어요!

yaml파일에 필요한 패키지도 깔끔하게 알려주고,
어느 폴더에 어느 파일명으로 들어가면 좋을지 짜주더라구요.

얘가 만들어준 결과물 그 ~~~ 대로 한번 개발을 시작해보겠습니다.

3) 진짜 개발 시작! 하기 전에.. 할 셋팅 New Flutter Project

자 vscode 설치와 flutter 설치가 되어있다는 가정하에 시작합니다!
(다루게 되면 너무 길 것 같아서 죄송죄송함니닷..)

  • cmd+P(커멘드 팔레트)를 열어 [New Project] 클릭




  • 주석 지우고 기본 counter 앱 실행

오른쪽 하단에 앱을 어느 디바이스에서 실행할지 나오는데, 일단 편하게 macOS로 실행하겠습니다


main.dar파일에 main() 함수 위에 있는 [Run] 버튼 클릭

쨔쟌~

여기서 나오는 주석 지우는 꿀팁

  1. "//" 시작 하는 부분을 대충 커서 잡아주고

  2. cmd+d 연타 (언제까지? 모든 //가 포커싱 다 될 때까지)

  3. cmd+K 줄삭제

  4. 그러면 에러가 68 라인에 한 곳 날 텐데

  5. 사진과 같이 아래 괄호 추가

),

4) 해볼게, 진짜 개발

자, 클로드가 말하는 대로 이제 개발을 합니다.

첫번째로 말한 패키지 추가

  • 필요한 패키지는 cmd+P(커멘드 팔레트)를 이용해 받아줍니다

    + provider

    + shared_preferences

  • pubspec.yaml 파일로 이동합니다 (cmd+p -> yaml)

    두 패키지가 잘 추가된 모습을 볼 수 있습니다
    이제 보니 클로드가 말한 버전이 더 낮긴 하네요 (쩝)

model 추가

  • lib 부분에 우클릭해서 [New Folder...]를 눌러 models 폴더를 만들어주고


  • question.dart 파일을 만들어줍니다 (똑같이 우클릭 후 New File)

  • 코드 붙혀넣기

이렇게 말한 파일 모두 New Folder, File이용해 복붙

... (생략)

마지막인 main.dart를 빼고 아무런 수정없이 다 붙혀봤는데요


ㅔ..?
37개의 잔소리를 획득했습니다.

자 해결해보러 가보죠 ..

5) 잔소리 해결하기 (linter 해결)

첫번째 유일한 에러

마우스 호버하면 에러 나옵니다
(사실 개발자는 보고 import 안됐네 라고 알아서 고칠 수 있지만,
이왕 맡기는거 클로드가 다 하게 맡겨봅니다)

질문:

question_viewmodel.dart 파일에서

Undefined name 'Math'.Try correcting the name to one that is defined, or defining the name.

라고 에러났어 해결해줘

답변:


자 에러가 해결 되었습니다 (굿)

unused_import


는 지우면 됩니다. 이런건 quick fix 버튼을 누르거나 cmd+. 을 눌러 해결해주셔도 됩니다


짜잔 (그리고 저장 잊지마세요)

prefer_const_constructors



자 많이 해결되었습니다 다음부터 클로드한테 const 키워드 까지 잘 추가해달라해야겠어요 ㅎ ㅜㅜ 귀찮..

나머지는 뭐.. todo빼고 수동으로 고쳐보겠습니다

아래 이런것들은 주석에서 적어준건데
이것도 어김없다 클로드에게 다 맡길거예요

6) 첫번째 나온 답변이 결과가 어떨지 실행

마지막에 알려줬던 main.dart 까지 적용시키고




.. 그럼 그렇지..
원하는 걸 제대로 못쓴 것 같다 ..
화면 명세서를 다시 써서 요청해야겠다..

7) 수정과 수정 ..






입체적으로 표현해달라니깐.. 동일한 결과물 줌 ..

그렇게 디테일 한 입체적으로 표현해줘 그대로잖아! 를 3번 반복하니..?

... 여기까지 ..
예.. 일단 Opus 할당량을 다썼네요..

오늘은 여기까지 하겠습니다 (만족스런 결과물이 나오지 않아 아쉽네요)

그래서? 결과물은?

AI가 혼자 만든 프로젝트입니다 (저는 정말 복붙만 했을 뿐..)
안에있는 컨텐츠도 앱도 클로드 혼자 다 만든 앱이예요!

결과물이 막 엄청 나이스하진않지만 확실한 건 초기 틀잡을 때 정말 빠르게 만들 수 있는 건 사실인 것 같습니다. 주니어 개발자 채용해놓고 수습하는 느낌 ?

아무튼 여기까지 마무리 짓고 개발을 조금 다듬어서 배포하는 과정까지 클로드와 함께해보겠습니다

그럼 안녕히~

profile
𝙸 𝚊𝚖 𝚊 𝚌𝚞𝚛𝚒𝚘𝚞𝚜 𝚍𝚎𝚟𝚎𝚕𝚘𝚙𝚎𝚛 𝚠𝚑𝚘 𝚎𝚗𝚓𝚘𝚢𝚜 𝚍𝚎𝚏𝚒𝚗𝚒𝚗𝚐 𝚊 𝚙𝚛𝚘𝚋𝚕𝚎𝚖. 🇰🇷👩🏻‍💻

2개의 댓글

comment-user-thumbnail
2024년 4월 20일

저도 플러터를 이용한 앱 개발을 공부중입니다.
아직은 AI가 짜는 코드에 불신을 가지고 있는 사람중 한명이지만 글을 보고 나서 생각이 조금 바뀌었네요.
기대 1도 안했는데 나름 괜찮은 퀄리티..!!
혹시라도 다음 글을 보게 된다면 클로드 관련 글이였으면 하는 작은 바람이 있네요,, :)
잘 읽었습니다 감사합니다 ^^7

1개의 답글