이번 실습에서는 Claude와 Antigravity를 활용해 웹앱을 직접 만들어보는 경험을 하게 되었습니다.
처음에는 단순히 주어진 과제를 따라가는 마음으로 시작했지만, 막상 결과물이 나오고 나니 점점 욕심이 생겼습니다.
IT 교육을 진행하면서, 학습자들이 내용을 더 쉽게 이해하고 직접 참여할 수 있는 방법에 늘 관심이 많았습니다.
단순한 설명형 강의보다, 직접 눌러보고 체험할 수 있는 웹앱 형태의 교육 콘텐츠가 훨씬 효과적이라고 느껴왔기 때문입니다.
그런데 처음 완성된 화면을 보고는 솔직히 아쉬움이 남았습니다.
기능도 디자인도 아직 제 실력으로는 부족하게 느껴졌습니다.
지금도 여전히 "이 디자인이 맞는 걸까?" 고민하면서 수정 방향을 계속 찾고 있는 상태입니다.
오히려 이 과정에서 느낀 것은, 한 번에 완벽한 결과를 만드는 것이 아니라 계속 고쳐가며 완성도를 올리는 과정 자체가 중요하다는 점이었습니다.
또 하나 아쉬운 점은, 만든 웹앱을 어떻게 잘 공유할지, 특히 Netlify 활용까지는 아직 완전히 익히지 못했다는 것입니다. 단순히 링크를 만드는 것을 넘어서, 더 안정적으로 공유하는 방법까지는 아직 공부가 더 필요한 단계입니다.
이번 경험은 단순히 웹앱 하나를 만들었다는 의미보다, 내가 원하는 분위기와 목적에 맞게 결과물을 계속 다듬어 갈 수 있다는 것을 직접 체감한 과정이었습니다.
진행 방법
1. 사용한 도구
Claude: 전체 웹앱의 방향을 잡고, 문구 구성과 화면 구조를 정리하는 데 활용했습니다.
Antigravity: 실제로 웹앱을 구현하고 실행해 보는 핵심 도구로 사용했습니다.
Gemini: 프롬프트를 다듬거나 막히는 부분을 질문하면서 보조 도구로 함께 활용했습니다.
2. 처음 실습에 사용한 프롬프트
아래는 실제 실습의 출발점이 되었던 프롬프트입니다.
강사명을 넣으면 바로 교육용 웹앱 초안을 만들 수 있도록 구성되어 있어, 비교적 빠르게 결과물을 확인해 볼 수 있었습니다.
역할: 너는 교육 공학 전문가이자 구글 기술에 정통한 시니어 웹 프론트엔드 개발자야.
작업: 우리의 강사인 '[강사 이름 입력]' 님의 강의에 쓰일 "제미나이 마스터 실습 웹앱"을 만들어줘.
형식: HTML, CSS, Javascript가 모두 포함된 '단일 HTML 파일' 코드로 작성해줘.
<필수 조건 및 디자인 가이드>
1. 화면 디자인: 구글의 4가지 시그니처 색상(Blue, Red, Yellow, Green)을 포인트로 활용하고, 반짝이고 투명한 유리 질감(Glassmorphism) 트렌디한 디자인으로 설계해줘.
2. 기능 탭: [개념 정리], [활용 사례], [프롬프트 실습], [미니 빙고 퀴즈] 4가지 메뉴 탭을 만들어줘.
3. 텍스트 요소: 화면 헤더와 하단 푸터에 항상 "Designed for students by [강사 이름 입력]" 이라는 문구가 명확하게 나타나게 해줘.
4. 프롬프트 실습 탭: 역할, 작업, 형식을 입력하면 하단에 결과가 실시간으로 조합되며, '복사하기' 버튼이 작동해야 해.
5. 애니메이션: 탭을 전환하거나 버튼에 마우스를 올리면 부드러운 애니메이션이 있고, 퀴즈 정답을 맞추면 폭죽(canvas-confetti)이 터지게 해줘.
6. 환경: 외부 라이브러리는 Tailwind CSS와 Lucide Icons를 CDN 링크로 포함해야 해.
3. 실습 화면에서 확인한 구성
실제로 구현된 화면을 보면서, 단순히 코드만 만든 것이 아니라 학습자가 직접 눌러보고 이해할 수 있는 교육형 구조를 갖추는 것이 중요하다는 점을 체감했습니다.
상단 헤더에 Gemini 마스터 실습 제목과 강사명 표기
메뉴 탭: 개념 정리 / 활용 사례 / 프롬프트 실습 / 미니 빙고 퀴즈
본문 카드 영역에 개념 요약과 핵심 포인트 정리
RTF(Role, Task, Format) 구조를 한눈에 익힐 수 있는 실습 섹션
하단에 강사명 문구 삽입
이런 구성을 직접 눈으로 확인하니, 프롬프트 한 줄이 실제 학습용 화면으로 바뀌는 과정이 더욱 실감 났습니다.
4. 실습 중 방향을 바꾼 이유
처음에는 스터디장님이 주신 기본 프롬프트로 앱을 만들어 보았습니다. 기능적으로는 잘 구현되었지만, 화면을 보는 순간 "조금 더 바꾸고 싶다"는 마음이 들었습니다.
특히 디자인이 제 취향에는 조금 아쉬웠습니다. 단정하고 무난한 느낌은 있었지만, 제가 원한 것은 그보다 더 강렬하고 감각적인 분위기였습니다. 저는 웹앱도 단순히 정보만 담는 것이 아니라, 첫 화면을 보는 순간 "와" 하는 느낌이 드는 디자인이면 좋겠다고 생각했습니다.
그래서 디자인 수정 요청을 하면서 이런 방향을 더 분명히 잡았습니다.
제목과 전체 분위기를 Claude와 Antigravity 웹앱 느낌으로 정리하기
기존보다 더 세련되고 미래적인 무드로 바꾸기
밋밋한 느낌보다 컬러감이 살아 있고 팡팡 튀는 스타일로 요청하기
단순 실습 화면이 아니라, 브랜드가 느껴지는 대시보드형 웹앱처럼 보이게 만들기
이 과정을 거치면서, 결과물을 한 번에 정답처럼 받는 것이 아니라 내 취향과 목적에 맞게 계속 수정 요청하는 힘이 정말 중요하다는 것을 배웠습니다.
5. 다시 요청한 프롬프트
기본 실습을 해본 뒤에는 디자인 요청도 바꿔 보았습니다. 이때 중요했던 것은 기능 설명만 하는 것이 아니라, 어떤 무드와 감성을 원하는지 구체적으로 말하는 것이었습니다.
전체 디자인은 지금보다 더 세련되고 미래적인 느낌으로 만들어줘.
조금 더 팡팡 튀고, 시선을 확 끄는 스타일로 바꿔줘.
어두운 배경 위에 네온 포인트가 살아 있는 대시보드형 UI처럼 구성해줘.
이렇게 요청하니 결과물이 처음보다는 제가 원한 방향에 가까워졌습니다.
실제로 화면이 단순한 실습용 페이지보다, 전략 대시보드나 AI 인사이트 보드 같은 느낌으로 바뀌면서 만족도가 더 높아졌습니다.
6. 공유는 어떻게 하지?
웹앱을 만든 뒤에는 "이걸 어떻게 다른 사람에게 쉽게 보여줄 수 있을까?"라는 고민도 생겼습니다. 하지만 이 부분은 아직 충분히 시도해보지 못했습니다.
특히 Netlify를 활용한 배포와 공유는 아직 더 공부가 필요한 단계입니다.
지금은 결과물을 만드는 것에서 한 단계 더 나아가, 어떻게 하면 누구나 쉽게 접속하고 사용할 수 있게 만들 수 있을까를 앞으로 더 배워가야겠다고 생각하고 있습니다.
결과와 배운 점
1. 끝까지 가면 결과는 나온다
기능 하나하나가 낯설게 느껴졌습니다. 그래도 하나씩 따라가며 결국 결과물을 만들어냈다는 점에서 큰 의미가 있었습니다.
하지만 솔직히 말하면, 완성된 결과가 100% 만족스럽지는 않았습니다. 처음 나왔던 기능 중에는 "이건 정말 좋다" 싶었던 부분도 있었는데, 수정하는 과정에서 사라지기도 했고, 전체 아웃라인 역시 제가 원하는 흐름과는 조금 다르게 느껴졌습니다.
그래서 다시 처음부터 더 잘 만들어보고 싶다는 생각도 들었지만, 시간과 에너지의 한계로 인해 이번에는 여기까지 마무리하게 되었습니다. 그 대신 다른 스터디원분들의 결과물을 보면서 다시 동기부여를 얻고, 다음에는 더 완성도 높은 결과물을 만들어보고 싶다는 마음이 생겼습니다.
2. 남의 과제가 아닌, 내 취향과 목적을 넣는 순간 몰입이 달라졌다
기본 프롬프트로 실습할 때보다, 제가 원하는 방향과 디자인 감각을 함께 녹였을 때 훨씬 더 재미있고 집중이 잘 됐습니다.
이번 경험을 통해 AI 도구를 잘 활용하려면 단순히 정답을 받는 것이 아니라,
내 상황에 맞게 바꾸고,
내 언어로 다시 요청하고,
원하는 결과가 나올 때까지 스타일과 분위기까지 조정하는 과정이 중요하다는 것을 배웠습니다.
특히 디자인은 한 번에 마음에 들지 않아도 괜찮았습니다. "이건 조금 아쉽다"고 느끼는 지점들을 구체적으로 말할수록 결과물이 점점 더 좋아진다는 점도 배웠습니다.
3. 구글 교육자 자격증도 다시 도전해보고 싶어졌다
이번 과정을 통해 구글 교육 센터의 자격증 시스템이 있다는 것도 다시 관심 있게 보게 되었습니다. 접수 과정이 복잡해 보여 걱정되기도 했지만, 다시보기를 하며 차근차근 따라가 보면 충분히 도전해볼 수 있겠다는 생각이 들었습니다.
4. 이번 실습에서 얻은 작은 팁
처음 받은 프롬프트를 그대로 쓰기보다 내 수업 목적에 맞게 바꿔보기
막히면 혼자 오래 끙끙대기보다 AI에게 구체적으로 다시 질문해 보기
한 번에 완벽하게 하려 하기보다 작게 수정하며 완성도 높이기
5. 앞으로의 계획
사실 이번 글은 과제를 마무리하며 정리하는 사례글이기도 해서, 앞으로 어떤 방향으로 더 성장하고 싶은지는 저도 계속 고민해보려 합니다.
학습 목표: 구글 교육자 자격증 Level 1, Level 2 공부
실천 목표: 교육용 웹앱을 더 자연스럽게 설계하고 공유하는 방법 익히기
앞으로도 배움을 멈추지 않고, AI와 교육을 연결한 저만의 콘텐츠를 계속 만들어 보고 싶습니다. ✨
도움 받은 글
스터디 실습 자료
Claude, Gemini, Antigravity 실습 과정에서 참고한 안내 자료
다른 스터디원들의 사례와 결과물
