우아한테크코스 8기 프론트엔드 LEVEL1 Gemini 웹앱 출시하기

우아한테크코스 8기 첫 미션으로 Gemini 웹앱 출시하기를 진행했다.
Gemini 웹앱 미션의 목표는 유틸리티, 게임, 학습, 페어 프롬프트릴레이 네 가지의 웹앱을 만드는것이다.
단 코드수정없이 Gemini 프롬프트만으로 제작해야한다.

이전에 django admin 재작성을 논의하면서 Emma가 작성한 프로젝트인 django-admin-duex를 본적이 있다.
해당 라이브러리는 아직 PoC단계이지만 대부분의 코드를 바이브코딩을 통해 생성한거 같았다.
이외에도 최근에 django에서 인기를 얻는 라이브러리중 하나인 django-bolt 의 경우에도 AI코드가 많이 포함되어있다.

웹 프로젝트를 생각하면 필자가 아는 프로젝트중에 django에서 진행하는 djangonauts라는 프로그램이 존재한다.
(참고로 djangonauts의 목표는 신규 django 기여자를 양성하는것이다.)
여기서 djangonauts 프로그램의 웹 사이트는 django steering council인 Tim이 관리하고 있고 Tim또한 AI를 사용한 바이브코딩을 통해 웹 사이트의 기능을 추가하고 유지보수 하고있다.

위 프로그램들을 보며 "나도 한 번 바이브코딩을 해보고 싶다!" 라는 생각이 들었다.
어쩌면 우테코에서 하게되는 Gemini 웹앱을 통해 AI 사용을 딥다이브하기전 준비단계를 할 수 있지 않을까?

컨텍스트 작성

필자가 예시로 위에서 언급한 프로젝트들은 전부 .claude폴더가 존재한다.

• https://github.com/djangonaut-space/wagtail-indymeet/tree/develop/.claude
• https://codeberg.org/emmaDelescolle/django-admin-deux/src/branch/main/.claude
• https://github.com/dj-bolt/django-bolt/tree/master/.claude/

해당 폴더에는 RADEME.md와 비슷한 형식으로 프로젝트에 대한 설명이 담겨있다.
django-bolt의 경우에는 특이하게 퍼포먼스와 관련된 내용이 서술되어있다.
아마도 rust를 기반으로 만든만큼 "속도"가 가장 중요하게 생각되는 부분이지 않을까 싶다.
가장 일반적인 사용 케이스는 djangonauts의 CLAUDE.MD로 볼 수 있다.

Djangonaut Space - Shared Claude Context
Project Overview
Djangonaut Space is a mentoring program platform built with Django and Wagtail CMS. While it includes a Wagtail-based blog, the primary application is a Django system that manages:

Recurring application and ranking processes for cohort selection
Session management (cohorts/mentoring sessions) with participants, navigators, and captains
Application workflows including surveys, review, scoring, and team formation
Team formation and management with availability matching and project assignments
Email notifications throughout the application and acceptance process
Important: This is NOT primarily a meetup site - that was the original vision but is no longer accurate. The focus is on managing cohort-based mentoring programs.

Project Structure
wagtail-indymeet/
├── accounts/          # User authentication and profiles (CustomUser model)
├── home/              # Main Django app + Wagtail pages
│   ├── models/
│   │   ├── session.py     # Session and SessionMembership models
│   │   ├── event.py       # Event models
│   │   └── resource.py    # Resource models
│   ├── management/
│   │   └── commands/      # Django management commands
│   └── puput_migrations/  # Blog-specific migrations
├── indymeet/          # Django project settings
│   ├── settings/
│   │   ├── base.py       # Shared settings
│   │   ├── dev.py        # Local development
│   │   ├── test.py       # Test settings
│   │   └── production.py # Production settings
│   └── templates/
├── theme/             # Tailwind CSS theme app
├── docs/              # Project documentation (currently sparse)
├── tests/             # Project-level tests
└── scripts/           # Utility scripts (e.g., local.sh)
Technology Stack
Backend: Django 5.2, Wagtail CMS, PostgreSQL
Frontend: Tailwind CSS, Alpine.js
Package Management: uv (fast Python package installer)
Deployment: Dokku (Heroku buildpacks)
Testing: pytest, pytest-django, playwright
Email: django-anymail
Blog: Puput (integrated with Wagtail)
Development Workflow
Setup Commands
# Install dependencies (creates venv automatically)
uv sync --extra dev --extra test

# Database setup
uv run python manage.py migrate
uv run python manage.py createsuperuser

# Tailwind setup
uv run python manage.py tailwind install

# Run development servers
uv run python manage.py runserver        # Django server
uv run python manage.py tailwind start   # Tailwind watcher (separate terminal)

# Or use the convenience script (non-Windows)
./scripts/local.sh
Testing Commands
# Run standard tests
uv run pytest

# Run Playwright tests (browser-based)
uv run playwright install --with-deps
uv run pytest -m playwright
uv run pytest -m playwright --headed  # See browser
Common Tasks
Adding Django functionality (most common contributor task)
Creating Wagtail page models and StreamField blocks (currently limited, needs improvement)
Writing tests (both standard pytest and Playwright for UI)
Frontend work with Tailwind CSS
...

실제 위 내용을 보면 프로젝트의 데이터베이스 셋업, 테스트 실행방식, 서버를 실행하는 방식, 프로젝트 구조가 담겨있는걸 확인할 수 있다.
위 내용을 토대로 우리는 .claude폴더에 담긴 파일들의 목적에 대해서 예측할 수 있다.
.claude폴더에 담긴 파일들은 claude에게 프로젝트에 대한 설명(컨텍스트)을 제공한다.
claude가 이 프로젝트를 이해하고 더 적절하고 좋은 코드를 작성하기 위한 하나의 가이드인 셈이다.
(어쩌면 AI사용은 문서화와의 싸움이 아닐까?)

Gemini 웹앱 미션

이번 우테코 미션은 프롬프트만으로 간단한 프로그램을 만드는 과제이기 때문에 위 프로젝트처럼 복잡한 컨텍스트를 제공할 필요없다.
하지만 간단한 프로그램일지라도 AI에게 컨텍스트를 어느정도 제공하냐에 따라 사용자가 의도한 방향과 맞게 진행되지 않을까?
필자는 이번 미션에서 WCAG 색상 대비 체크 앱을 만들었다.
실제로 필자가 만든 WCAG 색상 대비 체크 앱과 간단한 프롬프트를 전달하여 만든 WCAG 색상 대비 체크앱을 비교해보겠다.

색상 대비 체크 앱(간단한 프롬프트)

WCAG 색상대비 체크앱을 만들어줘.

앱을 만드는데 위와 같이 프롬프트를 전달하였다.

Gemini는 빠르게 앱을 만들어주었다.(사용해보기)
앱은 필자가 전달한 메시지처럼 WCAG 색상대비를 체크하는데는 문제없는 수준이다.
하지만 여기서 조금 개선할점을 생각해볼 수 있다.

1. 색상을 HEX뿐만아니라 다른 방식으로도 편하게 전환할 수 있다면 UX면에서 더 좋을거 같다.
2. 배경색과 텍스트색 입력란 하위에 빈공간이 존재한다. 해당공간을 활용할 수 없을까?
3. 버그가 존재한다 색상을 변경했을때 왼쪽 미리보기 색상이 잘못된 색상을 렌더링한다.
4. 색맹 사용자가 바라보는 시각의 색상을 볼 수 있게 만드는건 어떨까?

이처럼 간단한 프롬프트 메시지를 전달한만큼 메시지 의미에 충실한 앱을 Gemini는 빠르게 개발해주었다.
문제는 여기서 더 개선할점이 많다고 느껴지고 버그가 존재한다는 것이다.
물론 현재 프롬프트를 작성해나가면서 앱을 수정할 수 있다.
하지만 필자가 경험이 부족해서 그런걸 수도 있지만 프롬프트 재입력을 통해 수정하는게 난이도가 높다고 느껴졌다.
오히려 큰 틀의 수정은 쉽지만 디테일한 수정을 들어갔을때 어떤 디테일한 메시지를 전달할지 어렵다.
또한 많은 재입력이 동반될 수록 점점 예상하지 못한 범위의 수정이 이루어질때가 있다고 느꼈다.

색상 대비 체크 앱(나의 프롬프트)

## 프로젝트 개요

두 가지 색상(배경색과 전경색)이 WCAG(웹 콘텐츠 접근성 지침) 색상 대비 기준에 부합하는지 즉시 확인하는 웹 앱을 만듭니다. 이 앱은 별도의 설정 없이 실행 버튼만 누르면 바로 동작해야 합니다.

## 핵심 기능

- 색상 입력 및 실시간 미리보기

사용자가 배경색과 전경색의 HEX 코드를 직접 입력할 수 있습니다. 입력과 동시에 해당 색상으로 구성된 텍스트와 배경을 화면에 실시간으로 보여줍니다.

- WCAG 대비율 계산 및 결과 표시

입력된 두 색상 간의 WCAG 대비율을 정확하게 계산하고, WCAG AA 및 AAA 기준(일반 텍스트, 큰 텍스트) 통과 여부를 명확하게 보여줍니다.
확인할 WCAG 규약은 다음과 같습니다.

1. 일반 시각 (삼색형) 세 가지 원색을 모두 구별할 수 있으며, 흐림 현상이 거의 없음
2. 제1색약 (Protanomaly) 빨간색에 대한 민감도 저하 - 빨간색과 초록색 구별에 어려움
3. 제1색맹 (Protanopia) 적색맹 - 빨간색을 전혀 볼 수 없음
4. 제2색약 (Deuteranomaly) 초록색에 대한 민감도 저하 - 빨간색과 초록색 구별에 어려움
5. 제2색맹 (Deuteranopia) 녹색맹 - 초록색을 전혀 볼 수 없음
6. 제3색약 (Tritanomaly) 파란색과 초록색, 노란색과 빨간색 구별에 어려움

- 부적합 시 개선 색상 제안

만약 현재 색상 조합이 WCAG 기준에 부합하지 않을 경우, 기준을 충족할 수 있는 대체 배경색 또는 전경색을 제안합니다.
대비율이 부족할 경우, 현재 전경색에 맞춰 AA/AAA를 통과할 수 있는 몇 가지 배경색 HEX 코드 후보를 자동으로 생성하여 보여주거나, 반대로 현재 배경색에
맞춰 적합한 전경색 HEX 코드 후보를 제안해주세요. 이 제안은 사용자에게 선택지가 될 수 있도록 여러 개 보여주세요.

## 기술 스택

HTML, CSS, Javascript 만으로 만들어주세요.
이외 라이브러리, 프레임워크는 사용할 수 없습니다.

## UI

사용자가 입력한 배경색이 홈페이지의 배경색으로 만들어주세요.
사용자가 입력한 전경색이 홈페이지에 존재하는 텍스트의 색상으로 만들어주세요.
페이지는 상위 `flex컨테이너`를 사용하고 하위에는 두개의 `flex: 1`컨테이너를 사용하여 왼쪽과 오른쪽을 분리합니다.

### 왼쪽 컨테이너

사용자가 전경색과 배경색을 입력할 수 있는 입력란과 색상 조합이 WCAG 기준에 부합하지 않을 경우 추천하는 색상을 보여주세요.
입력란은 HEX코드를 통해 입력해야합니다.
입력란 하위에 Hue, Saturation, Lightness를 조절할 수 있는 바를 만들어주세요.
입력란 하위에 존재하는 색상 조절 바(전경색, 배경색)는 사용자가 드래그하여 색상을 자유자제로 변경하게 만들어주세요.

### 오른쪽 컨테이너

가장 상위에는 현재 입력된 배경색과 전경색의 색상대비 결과값(수치)과 WCAG 등급결과를 표시해주세요.
WCAG 등급결과는 Normal만 표시해주세요.
하위에는 두 색상의 색상대비 결과를 통해 WCAG 대비율 계산 및 자세한 결과를 수직으로 표시해주세요.
각 자세한 결과 박스는 등급, 규약명, 규약설명, Preview 블럭이 포함되어야 합니다.

#### Preview 블럭

Preview 블럭은 사각형으로 현재 색상이 해당 규약에 색맹이 존재하는 사람들에게 보이는 색상으로 만들어주세요.

### 애니메이션

HEX코드를 통해 색상을 변경하거나 Hue, Saturation, Lightness값을 변경할때마다 배경색과 전경색또한 반영되도록 만들어주세요.
색상 변경은 부드럽게 전환되도록 만들어주세요.

필자가 우테코 미션에서 WCAG 색상 대비 체크 앱을 만들때는 위와같은 프롬프트 메시지를 사용했다.
이전과 달리 개요를 통해 프로젝트에 대해 설명하고 핵심 기능, UI, 기술 스택을 명시하여 더 디테일한 요구사항을 제안했다.
위 초기 프롬프트 이후에 2회에 사소한 프롬프트를 거친후 Gemini가 생성한 앱은 다음과 같다.
(사용해보기)

# 추가 전달 내역(프롬프트 수정)

Preview 블럭내부에 적절한 패딩을 추가해 주세요.
Preview 블럭내부 텍스트를 "Example"로 만들어 주세요.
입력란의 초기값은 다음과 같이 만들어 주세요.
- 배경색(#092E20)
- 전경색(#FFFFFF)

이전 간단한 프롬프트를 입력하여 만든 앱과 달리 더 좋은 앱이 만들어졌다고 생각한다.
사용자는 HSL 을 통해 색상을 바로 수정할 수 있으며 만약 WCAG 색상 대비에 적합하지 않을때 적절한 bg 색상을 추천한다.
그리고 일반시각, 1색약, 제1색맹 등등 색각 이상자의 시선에서 실제로 어떻게 보이는지 관찰할 수 있다.
이 모든 정보들은 필자의 초기 프롬프트에 전달한 내용덕분이라고 생각된다.

고민

초기 프롬프트는 프로젝트의 뼈대를 담당한다고 느껴진다.
그 만큼 중요한 과정이라고 생각된다.

이번 과제를 진행하면서 느꼈던 고민들이 있다..
대부분 어떻게 하면 AI를 통해 더 나의 의도에 알맞는 앱을 만들 수 있는지에 중점되어있다.

1. 초기 프롬프트는 어느정도로 작성하는게 적절할까?
2. 복잡한 레이아웃을 설계해야할때 어떤 형식으로 전달하는게 좋을까?
3. AI가 만든 앱을 빠르게 검수할 수 있는 방법이 있을까(실제 코드를 확인하는것과 별개로..)
4. 프롬프트 재입력을 통해 앱을 수정해나가야할때 어떤식의 메시지 형태를 전달하는게 좋을까?
5. 재입력을 했을때 의도와 다른 영역에 수정이 이루어졌을때 어떤 메시지를 전달하여 내 의도와 정확한 방향으로 향할 수 있을까?

후기

평소에 AI를 공부해보고 싶은 마음은 있었지만
맨날 미루었다.
이번 기회를 통해 AI로 앱을 네개나 만들어보면서 AI랑 아주조금(?) 친해진거 같다.
실제로 대형 오픈소스 프로젝트들에서도 AI를 직접적으로 사용하고 있다.
내가 느끼기에 보수적이라고 생각하는 django또한 AI를 통해 생성한 코드를 허용하고 있다.(물론 아무런 코드나 되는건 아니다)

현재 AI에서 인기있는 토픽들이 많다.
오픈클로, 오 마이 오픈 코드, 오픈 코드, 주변 사람들의 참신한 아이디어를 통해 만든 프로젝트 등등 ...

더군다나 올해에 나만의 django admin 라이브러리를 제작하게 된다면 AI에게 도움을 많이 받으려고 한다.
하지만 놀랍게도 필자는 아직도 이 인기있는 토픽들을 실제로 접해보지 않았다.
뭔가 코딩을 안할때 내가 뒤처진다는 생각을 하지는 않았지만 오히려 AI를 공부하지 않을때 내가 뒤처진다고 생각된다.
그 만큼 AI의 변화가 정말 빠르고 영향력이 크다고 느껴진다.

AI.... 공부 해야겠지?
🫠

리뷰

PR을 올린지 이틀만에 리뷰를 받을 수 있었다.

(모든 내용이 궁금하다면 PR 링크를 참고하기 바란다.)

리뷰어분은 굉장히 친절했고 내용또한 굉장히 맘에 들었다.
리뷰 관점을 실제 Production으로 바라봐주셨고
가장 인상깊은 부분은 VSCode 커맨드 입력게임이 VSCode뿐만 아니라 다른 IDE도 사용해볼 수 있다면 사용자 풀을 더 늘릴 수 있다는게 가장 인상깊었던

프로그램을 제작하면서 사용자 풀까지 고려하지 않았던거 같다.
단지 내가 지금당장 사용하는 IDE는 VSCode니까... 라고만 생각한거 같다.

또한 이번 프롬프팅에서 UI와 관련해서 너무 디테일하게 요구한걸까? 라는 생각을 하게 되었다.
이번과제는 실제 코드 수정이 불가피해서 그런 의도도 있었지만
AI로 큰틀을 만들고 디테일한 부분은 추가 프롬프트나 아니면 직접 수정하는 방식도 좋을거 같다.

기존에 내가 걱정했던 AI로 만든 툴이 정상적으로 작동하는걸까?
라는 고민에 대해서도 어느정도 해결됐다.
핵심적인 기능을 실제로 확인하고 내가 프로젝트에 대한 이해도를 높인다면 해결할 수 있지 않을까란 생각이 들었다.

페어로 만든 프로그램인 데일리미팅 주제 선정 프로그램에서 그날 이야기했던 내용을 기록하는 기능과 관련된 제안도 너무 좋았다.
실제로 그 기능이 구현되었다면 이전 기록들을 보면서 그날의 형태와 감정을 조금 느껴볼 수 있지 않을까?