구글 AI 스튜디오 build 실습1

소개

내 할 일 목록을 만들었습니다.

일을 하더라도 일의 순서를 정해주면 효율적일 것 같아 실습했습니다.

진행 방법

제미나이에서 "구글 AI 스튜디오 build에서 할 일 관리 앱을 만들거야. 기획을 해줘"라고 했어요

한국어 텍스트가 포함된 페이지의 스크린샷

위 나온 결과물을 바탕으로 슬로건을 바꾸고
이미지를 첨부해서 디자인을 참고해 달라고 했어요.

배경음악을 넣고 싶었어요.

"App.tsx에 배경음악 재생 기능을 추가해줘. 오디오 파일은 'background-music.mp3'라고 가정하고, 사용자가 볼륨을 조절할 수 있는 UI도 함께 만들어줘."

"배경음악 재생 UI에 '재생' 및 '일시정지' 버튼을 추가하고, 볼륨 조절 슬라이더와 함께 표시되도록 개선해주세요."

처음엔 재생 버트과 볼륨 조적 슬라이더 표시가 나왔는데 음악은 업로드 되지 않았어요

_____

구글 제미나이에서

"구글 AI 스튜디오 build에서 소리나 음악을 나오게 하려면 어떻게 해야해"라고 질문
"실제로 작동하는 오디오 재생용 자바스크립트 코드를 짜줘"
"실제로 API에서 받아온 데이터를 처리하는 전체적인 fetch 흐름까지 짜줘"

계속적인 오류가 발생해서 다시 질문

"집중 모드 배경음을 앱에 넣고 싶어. 어떻게 하면 되지?"

"음악 파일을 구글 드라이브(공유 링크)나 GitHub, 혹은 무료 음원 호스팅 사이트에 올린 뒤 그 전체 주소(https://...)를 src에 넣습니다.

위 방법 자세히 알려줘"

"파일 업로드: focus-music.mp3 파일을 업로드합니다.

파일 업로드는 어떻게 해?"

한국어 페이지 스크린샷

"복사한 주소를 실제 코드의 어디에 넣는지 알려줘"

결과와 배운 점

제미나이에 질문하면서 고쳤어요. build에서 수정하는 데 에러가 자주 발생했어요.
자연어로 앱을 만드는 과정을 쉽게 접근할 수 있어 재미있었지만 완벽에 욕심부리면 안됨을 느낍니다.

마지막 단계를 마친 후, 작업 완료 시 박수 소리와 함께 축하하는 메시지를 표시하도록 애니메이션을 추가하는 것과 초기화 버튼이 활성화 되지 않아서 여기까지 하고 멈췄습니다.

앞으로의 계획은

어르신들의 인지능력 향상을 위한 게임앱을 만들 계획입니다.

스터디장님의 쉬운 설명으로 흥미있게 접근할 수 있어 좋았습니다.
기대감에 들뜹니다.

감사합니다

뉴스레터 무료 구독

👉 이 게시글도 읽어보세요