소개
16기 화요일 첫 강의를 듣고 실습으로 파이어베이스 스튜디오로 버킷리스트 달성을 돕는 간단한 웹 서비스를 만들려고 했어요
진행 방법
꿀팁1. 먼저 만들라고 시키기 전에 Readme를 먼저 만드세요!
파이어베이스 스튜디오에 바로 만들어 달라고 던지기 전에 일단 클로드로 Readme를 만들어 달라고 했어요
이유는 생성형 특성상 요구사항에 적히지 않는 것들도 알아서 코드를 추가하는 경향이 있어서 나중에 코드 규모가 커지면 결함의 발생 위치도 못찾고 재대로 수정도 못하는 엉망진창의 상황에 빠질 수 있어요.
"사용자가 운동 관련 버킷리스트를 주면 달성 가능성을 예측해주고 달성하기 위한 조언을 제공해는 웹서비스를 만들고 싶은데 일단 readme md 파일을 만들어줄래"
꿀팁2. Readme는 영어로 바꿔서 영문본으로 파이어 베이스에 던지세요
이유는 번역을 잘하긴 하지만 그래도 가끔 한글을 잘못 해석해서 엉뚱한 결과물을 만드는 경우가 있기 때문이에요.
"readme 파일을 영어로 바꿔줄래"
꿀팁3. 구체적인 인풋, 아웃풋 내용을 명시하고 Readme 파일을 참고해서 프로토타입을 만들어달라고 하세요
이유는 처음에 아주 작은 인풋 아웃풋을 만드는 것을 성공해서 테스트해보고 잘 되면 점진적으로 기능을 늘려가는 방식이 바이브 코딩에서는 더 효과적이기 때문이에요. 이걸 개발용어로 TDD라고 부른다고 합니다.
꿀팁4. Tailwind CSS로 프로토타입의 디자인을 개선하세요
"Tailwind CSS를 이용해서 모던하고 세련된 느낌으로 만들어줘"
아무래도 처음 만드는 GUI는 투박할 수 밖에 없는데 이 프롬프트로 디자인 결과물의 품질을 바로 업그레이드할 수 있기 때문이에요.
결과와 배운 점
강사님의 알려주신 꿀팁대로 진행해보니 확실히 말끼를 한방에 잘 알아먹고 시행착오 없이 첫 프로토타핑을 만들어낼 수 있었습니다.
Firebase Studio를 쓰면 Genkit과 Gemini가 자동으로 연동되어서 프로토타입에 필요한 AI 기능들을 위한 API Key도 알아서 자동 생성하고 알아서 구현해준다는 점이 정말 유용했습니다.
도움 받은 내용
16기 Firebase studio 강의 내용