2026/02/25 - 사용자가 있는 Gemini 웹앱 출시하기

JuHyeong424/gemini-canvas-mission at step1

GitHub - JuHyeong424/gemini-canvas-mission: 우테코 level 1 미션 - 사용자가 있는 Gemini 웹앱 출시하기

---

유틸리티 프롬프트

Google Gemini

초기 프롬프트

안녕. 유틸리티 앱을 만들거야.
우테코를 시작한 만큼 오늘 하루 있었던 일을 회고하는 서비스를 만들고 싶어.
오늘 한 일, 아쉬운 점, 이모지 등을 이용하고 싶어.
실제 사용자는 우아한 테크 코스에 참여하는 사람들이야.
하루가 지나면 이전 기록은 수정할 수 없어. 하루 있었던 일을 적는 시간은 다음날 오전 6시까지 가능해.
계속 저장하면서 이전 기록이 삭제되지 않았으면 좋겠어. 이를 위해서는 로그인 기능이 있었으면 좋겠어.
기록한 것들은 달력에 표시되도록 해줘. 기록을 저장한 다음에 달력으로 넘어가서 기록을 볼 수 있도록 하면 좋겠어.
이미 오늘 하루 기록이 있다면 바로 달력으로 넘어가주었으면 해.
html, css, js로 만들어줘.

 

회고를 작성했는데 원하는 회고 앱이 나왔다. 

이전 회고가 없으니 설렁해서 이전 회고는 목데이터로 넣어달라고 했다.

해당 날짜에 기분이 어땠는지 편하게 알기 위해서 달력에 오늘의 기분 이모지를 표시해달라고 했다.

추가 프롬프트

실제로 데이터가 저장되는지 확인해보고 싶어.
이전 날짜는 목데이터를 넣어줘. 달력에는 오늘의 상태가 어떠했는지 내가 표시한 이모지로 간단히 표시되었으면 좋겠어.

 

이렇게 요청을 하니 원하는 대로 나왔다.

처음에 달력 부분이 나오지 않아 맨 처음 만들 때 달력 부분을 자세하게 설명했다.

오늘 회고가 없으면 회고 작성 부분이 나오고, 있으면 달력이 나오도록 요청했다.

요청을 자세히 넣으니 달력이 언제 어떻게 나오는지 알 수 있었다.

---

게임 프롬프트

Google Gemini

초기 프롬프트

안녕. 게임 앱을 만들거야.
2D 카트라이더 게임을 만들고 싶어. 카트라이더를 조종하면서 다가오는 장애물을 피하게 만들고 싶어.
장애물은 랜덤으로 나오게 해야해. 장애물 종류에는 구멍, 빙판길, 움직이는 자동차, 바위, 갑자기 나오는 동물을 넣고 싶어. 
구멍에 들어가면 빠지는 모션, 빙판길에 들어가면 미끄러지는 모션, 움직이는 자동차, 바위, 갑자기 나오는 동물에 부딪히면 부딪히는 모션이 나오게 해줘. 이러한 모션 후, 게임이 끝나고 점수와 시간은 기록 페이지에 입력되게 해줘. 다음 게임에서도 이전 기록이 남아있어야 하고, 게임이 끝나면 기록 순위를 매기면 좋겠어.
카트라이더 속도는 점점 빨라지도록 해줘. 초반에는 점수를 적게 주지만 점점 이동 거리가 멀수록 점수가 더 빨리 올라가는 형식으로 만들어줘. 점수와 시간은 오른쪽 상단에 표시해줘.
조작키는 키보드 방향키로 조작할 수 있게 해줘. 해당 방향키 외에는 카트라이더가 움직이면 안돼.
사용자는 짧은 쉬는 시간을 재미있게 보낼 수 있는 사람들을 대상으로 하고 있어.
html, css, js를 이용하여 만들어줘.

 

원하는 게임이 나왔다. 자신의 기록 닉네임을 남기도록 했다.

게임에서는 잔디를 밟으면 죽는 기능 추가, 속도 조절, 점프 기능을 추가했다.

추가 프롬프트

잘 만들었어. 일부 수정 사항이 있어. 기록 등수는 5위까지 보여줘. 그리고 기록할 때 원하는 닉네임을 적는 칸이 있으면 좋아.
자동차를 조종할 때 양쪽 끝에 있는 잔디 부분을 밟으면 경주가 끝나도록 수정해줘.
초반 자동차 속도가 더 빠르면 좋아.

 

더 재미를 주기 위해서 스페이스를 누르면 자동차가 점프해서 장애물을 넘으면 좋아. 그대신 스페이스 쿨타임은 8초이고, 쿨타임 표시는 위쪽 중앙에 표시해주면 좋겠어.

 

기능을 추가해주니 더 재미있다.

---

학습 프롬프트

Google Gemini

초기 프롬프트

안녕. 학습 앱을 만들거야. 
웹 프론트엔드 공부를 하기 위해서 필요한 웹 기초 개념 퀴즈를 내고 싶어.
매일 풀어야 하는 문제는 총 5문제로 객관식 3문제와 주관식 2문제가 있어.
객관식 문제는 웹의 여러 기술이 있어야 하며, 선지가 서술식이어야 해.
주관식 문제는 웹에서 무조건 알아야 하는 용어나 기술을 작성해야 해.
각 문제를 풀면 해당 문제에 대한 풀이가 나와야 해. 풀이는 그림이나 사진으로 시각화하면서 자세하게 설명해줘.
문제를 다 풀면 결과창을 띄우고, 다시 풀기와 저장하기 버튼이 나왔으면 좋겠어.
다시 풀기를 누르면 다시 풀고, 저장하기를 누르면 결과가 저장되고 홈으로 돌아오게 해줘.
홈에는 내가 푼 문제가 해당 날짜에 저장되게 해줘. 데일리 문제 뿐만 아니라 웹 지식을 목차별로 나누어서 목차에 맞는 문제가 나오게 해주었으면 좋겠어. 각 목록마다 문제를 얼마나 풀었는지, 문제 통계가 나왔으면 좋겠어.
문제는 Gemini AI에서 내줘. 문제 난이도도 설정해줘. 어려움으로 갈수록 문제 수준이 어려워져.
대상은 프론트엔드를 공부하는 웹 개발자를 대상으로 해.
중복 문제와 비슷한 문제가 없어야해. 너무 성의없는 문제는 내지 말았으면 해.
html, css, js로 만들어줘.

 

문제는 잘 내주었는데 문제와 해설 곳곳에서 가독성 부족, 엔터 문제 등의 오류가 발생했다.

이를 해결하기 위해 추가 프롬프트를 작성했다.

추가 프롬프트

문제를 만드는데 약 3 ~ 5초가 걸린다고 하는데 1분 정도 걸린다고 수정했으면 좋겠어.
코드 문제가 나오는 경우에는 가독성 좋게 박스 안에 코드를 작성하면 좋겠어.
해설에서 선지가 0부터 시작하는 1부터 시작하게 해줘.
문제 선지와 해설이 없는 경우가 있어. 없는 경우 다시 문제를 내주어야 해. 줄바꿈 등 글 양식에도 신경 써줘.

 

문제 모달 설명 부분이 검은색 흰색이어서 가독성이 떨어져. 가독성 좋게 문제를 내줘.
문제 선지에서 동그라미 번호가 있는데 그 안에 다시 선지 번호가 있어. 동그라미 번호는 놔두고 안에 있는 선지 번호는 지워줘.

 

해설이나 선지에서 ` ` 이런 식으로 줄바꿈 되면서 내용이 안보일 때가 있어. 이러한 것을 내용이 보이도록 수정해줘.

 

ai로 문제를 제공하는 서비스는 많이 접해본 서비스여서 익숙했다.

---

페어 프롬프트 릴레이

‎Gemini - Google AI를 활용하는 방법

초기 프롬프트

나는 "친해지길 바래" 서비스를 만들고 싶어.
이 서비스는 특정 모임에 있는 인원들이 서로 알게 만들고 친해지는 것을 목표로 해.
서비스에 참여하고 싶은 사람은 자신의 이름을 적고, n명 이상 모일 때 게임이 실행이 될꺼야.
게임은 핀볼 형식의 랜덤 뽑기 게임으로 팀을 그룹핑을 해야해. 그룹핑 된 그룹은 시각화가 되어야 해.

우리 서비스의 목표 사용자는 특정 모임에 처음 참여하는 구성원이야.
그룹의 개수와 그룹당 인원수가 최대한 균등하게 분배되어야해. 

구현할 때에는 html, css vanilla js로 만들어줘

 

짝을 지어서 한 명은 나레이터, 한 명은 작성자로 하면서 만들어 봤다.

우리 조는 3명이서 했다.

여러 아이디어를 주고 받다 우테코를 처음 시작하는 우리에게 서로를 알 기회가 있으면 좋겠다 싶어서 랜덤 그룹 매칭 서비스를 만들기로 했다. 

그냥 하는 것은 식상하다고 판단해서 핀볼로 재미를 주고자 했다.

핀볼을 만들었는데 핀볼이 끼어 버리는 경우가 생겼다. 그런 경우 흔들기 기능을 만들어 공이 흘러가도록 수정했다.

추가 프롬프트

조금더 사용자에게 재미를 주기 위해서 판을 흔들 수 있는 기능이 있으면 좋을 것 같아
중간에 공이 끼거나 그룹 입구가 막혀서 들어가지 못하는 공도 생기는 것 같아. 
이런 경우에도 흔들기를 쓸 수 있을 것 같아

 

공이 들어가지 않아도 팀으로 배정되는 경우가 있는 것 같아. 이 부분을 수정해줘

 

혼자서도 한 일을 3명이서 하니 새롭다.

협력하는 방법을 기르는 건데 실제로 서로 의견을 말하는 방법을 배우고 있는 과정이다.