[우아한테크코스 8기] 레벨 1 Gemini Canvas 웹앱 만들기 회고

필자는 우테코의 첫 미션으로 Gemini Canvas를 통해 웹앱을 '프롬프트'로만 만드는 기회를 가질 수 있었다.

즉, 코드에 관한 직접적인 필자의 수정은 금지되는 제한사항이었다.

총 4개의 앱을 만들어야 했는데 아래와 같다.

1. 유틸리티 앱 - 본인이 실제로 사용할 생산성/유틸리티 앱 만들기.
예시: 할일 관리, 타이머, 메모장, 습관 트래커, 지출 기록, 계산기, 단위 변환기, 랜덤 선택기, 일정 관리 등

2. 게임 - 재미있게 사용할 수 있는 간단한 게임 만들기.
예시: 숫자 맞추기, 가위바위보, 퀴즈 게임, 기억력 게임, 타이핑 게임, 반응 속도 테스트, 간단한 퍼즐 게임 등

3. 학습 앱 - 웹 프론트엔드 학습에 도움이 되는 인포그래픽/퀴즈가 포함된 앱 만들기.
웹 프론트엔드 예시: JavaScript 개념 인터랙티브 인포그래픽, 웹 기초 개념 퀴즈 (DOM, 이벤트, 비동기 등), CSS Flexbox/Grid 시각화 도구

4. 페어 프롬프트 릴레이 앱 - 페어와 함께 프롬프트를 번갈아 입력하며 둘 다 사용할 만한 앱을 만들기.
AI 버전 페어 프로그래밍.

 

아래 Gemini Canvas 공식문서에서도 확인해 볼 수 있듯이 정말 유용한 도구라고 생각했다. (직접 사용해보아도 프롬프트 기반으로 빠른 속도로 프로토타입을 생성해준다.)

개발자가 아닌 비개발자여도 기획과 MVP를 빠르게 만드는 데에 있어서 Gemini Canvas를 사용하여 여러 프로토타입을 최대한 빠르게 만들고 프로토타입을 통해 기획의 방향과 서비스의 방향을 빠르게 잡을 수 있는 협업에서 정말 중요한 역할을 할 수 있는 강력한 도구라고 생각이 들었따.

Gemini Canvas - 하나의 공간에서 AI를 활용한 글쓰기, 코딩, 창작

 

---

먼저 필자는 LLM을 사용하지 않고 혼자 아이디어를 만드는 데에 많은 시간을 썼다.

근본적으로 '나' 자신이 평소 불편했거나 사용할 것 같은 앱 뿐만 아니라 '사용자' 또한 사용할 만한 필요한 웹앱을 만들기 위해 LLM 보다는 나 혼자만의 생각과 지식으로 기획을 해야겠다는 생각밖에 들지 않았기 때문이다.

 

그렇게 4개의 아이디어와 초기 프롬프트를 작성해보았다.

1. 유틸리티 앱 - 프레임샷

내가 찍은 사진의 EXIF 정보를 자동으로 추출해 배경색, 폰트, 위치까지 내 마음대로 꾸밀 수 있는 커스텀 EXIF 프레임 생성기이다.

 

초기 프롬프트는 아래와 같았다.

## 초기 프롬프트
"사진에 커스텀 가능한 EXIF 프레임을 추가하는 생성기"를 만드려고 해.
이 서비스는 자신이 찍은 사진의 EXIF 내용을 추출하여 사진 테두리에 영역을 추가하여 추출된 정보와 함께 흰색 배경에 검정 텍스트, 혹은 검정 배경에 흰색 텍스트를 포함하게 하고,
완성된 후엔 배경색, 텍스트 색, 텍스트 위치 등 여러 요소를 커스터마이징 할 수 있게 하려해.

서비스의 목표 사용자는 카메라로 사진 찍는 것을 취미로하는 사람들이고,
EXIF 정보를 포함하는 추가된 영역은 사진의 맨 위 또는 맨 밑에만 추가될 수 있게 해야돼.

"HTML, CSS, JavaScript만 사용해서 만들어줘.
React나 다른 프레임워크는 사용하지 마."

 

사실 필자는 카메라로 찍은 사진을 SNS 계정에 올리는 취미가 있다.

찍은 사진을 올릴 때 EXIF 프레임을 넣어주는 사이트들이 이미 있지만 배경색과 텍스트 색을 내 마음대로 바꾸거나, 텍스트 위치를 조절하거나, 프레임 두께를 조절하는 기능이 없었다.
결국 남들과 똑같이 생긴 프레임만 쓸 수 있었고, 내 사진 분위기에 맞게 커스터마이징할 수 없다는 점이 불편했다
따라서 내가 직접 만들어야겠다는 생각을 하게 되었다.

2. 게임 - 핑거노트

카메라 하나로 손가락을 접어 피아노를 연주하고, AI 평론가에게 실력을 평가받는 핸드 트래킹 리듬게임이다.

 

초기 프롬프트는 아래와 같았다.

## 초기 프롬프트
"카메라에 오른손을 보여주고 손가락으로 도레미파솔 피아노를 연주할 수 있는 게임"을 만드려고 해.
이 서비스는 카메라를 통해 오른손을 비추고 손가락을 접으면서 피아노를 연주할 수 있게 하는 서비스야.
게임 서비스인데 제미나이 AI를 사용해서 떴다 떴다 비행기 (미 레 도 레 미 미 미 레 레 레 미 솔 솔 미 레 도 레 미 미 미 레 레 미 레 도)를 연주시키고,
연주 타이밍과 여러 음악적 요소로 사용자의 연주를 평가해서 스코어를 매기고 사용자마다 랭킹 대결을 하게 만들고 싶어.

서비스의 목표 사용자는 실제 피아노 또는 디바이스를 구비할 여건이 안되는 사람들이고,
이 사람들이 피아노를 연습하면서도 게임으로 재미있게 접할 수 있게 할 목표가 있어.
건반은 화면의 밑에 위치되어야만 해.

"HTML, CSS, JavaScript만 사용해서 만들어줘.
React나 다른 프레임워크는 사용하지 마."

피아노를 배우고 싶어도 실물 피아노나 건반 디바이스를 구비할 여건이 안 되는 사람들이 많다고 생각한다

앱이나 게임으로 피아노를 접할 수 있는 서비스는 있었지만, 결국 화면을 터치하거나 키보드를 두드리는 방식이라 실제 피아노 연주 감각과는 거리가 있다.
카메라 하나만 있으면 손가락을 접는 동작만으로 연주할 수 있게 만들고 싶었다.

3. 학습 앱 - CSR vs SSR 렌더링 시각화 학습기

CSR과 SSR의 렌더링 흐름을 브라우저 시뮬레이션으로 직접 체험하며 FCP와 TTI 차이를 눈으로 확인하는 웹 학습 도구이다.

 

초기 프롬프트는 아래와 같았다.

## 초기 프롬프트
"CSR / SSR 렌더링 차이를 시각화 하여 확실하게 학습할 수 있게 하는 앱"을 만드려고 해.
이 서비스는 웹 프론트엔드 개발자가 CSR과 SSR로 개발된 웹사이트를 직접 체험하고 렌더링 원리나 시간에 어떤 차이가 있는지 시각적 인포그래픽으로 보여주는 학습 서비스야.

서비스의 목표 사용자는 웹개발을 배우고 공부하는 웹프론트엔드 개발자이고,
시각화된 인포그래픽에 너무 많은 내용이 들어가서 학습하기 어려워지면 안돼.

"HTML, CSS, JavaScript만 사용해서 만들어줘.
React나 다른 프레임워크는 사용하지 마."

CSR과 SSR의 차이를 글로만 읽었을 때는 머릿속에 잘 그려지지 않을 수 있다.
FCP, TTI 같은 개념이 실제로 어떤 시점에 일어나는지 텍스트로는 체감하기 어려울 수 있고,
특히 SSR의 Hydration 전후 차이는 직접 겪어보지 않으면 이해하기 힘든 개념이라고 생각해서 시각화 해보고 싶었다.

4. 페어 프롬프트 릴레이 앱 - 친해지길 바래

처음 만난 사람들과 핀볼 게임으로 랜덤 그룹을 뽑아 어색함을 없애주는 모임 아이스브레이킹 서비스이다.

 

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

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

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

처음 만나는 사람들끼리 어색하게 서 있는 상황, 누구나 한 번쯤 경험해봤을 것이다.
특히 새로운 모임이나 행사에서 "자유롭게 팀을 짜세요"라고 하면 결국 아는 사람끼리만 뭉치게 되는 문제가 있었다
이 앱은 그 어색함을 게임으로 풀어내서, 랜덤 그룹핑 자체가 하나의 재미있는 경험이 되도록 만들었다.

페어가 3명으로 이루어져 있어 3명에서 개발하는 부분이 어색한 점들이 있었다.
하지만 네비게이터와 프롬프터를 번갈아가면서 개발한 부분이 오히려 서로의 피드백을 통해 개선시키고
내가 생각하지 못한 부분들을 다른 페어들로부터 들으며 기획의 방향을 잡아가고 프롬프트 수정이 이뤄질 수 있었던 부분이 너무 재미있었고, 충분히 효과적이다라는 생각을 많이 하게 되었다.

위 4개의 서비스는 아래 레포지토리 리드미에서 사용해볼 수 있다.

GitHub - hjkim0905/gemini-canvas-mission: [우테코8기] 사용자가 있는 Gemini 웹앱 출시하기

---

회고

이번주를 돌이켜보면 내 자신의 프레임을 깰 수 있는 발판이 되었던 것 같다.

사실 프론트 개발자로서 AI와 협업하면서 하나의 웹앱을 개발하는 부분을 납득하고 싶지 않았던 부분이 있었다.

이렇게 생각하면서도 AI와 협업할 수 밖에 없다는 현실이 많이 안타까운 상황이었다.

이번주 미션을 진행하며 Gemini Canvas로 앱을 만드는데 들었던 생각은, 결국 프롬프트를 짜는 것은 개발자라는 것이다.

개발자가 아닌 사람들도 프롬프트를 짜고 하나의 서비스를 만들 수 있는 건 분명한 사실이다.

하지만 개발자가 자신이 배운 지식들과, 자신의 경험들을 기반으로 프롬프트를 만들고 서비스를 만드는 과정 자체는 서비스 자체의 퀄리티를 높이는 데에 큰 도움이 된다는 생각이 들었다.

그래서 AI 시대에 AI와의 협업과 도움을 부정했던 나의 프레임을 확실히 깨고 한스텝 내딛을 수 있는 한 주가 된 것 같다.

앞으로의 미션도 진행하며 AI 시대에서 영향력 있는 개발자가 되기 위해 우테코에서 여러 시도와 공부를 해야겠다는 다짐을 하게된 한주였다.