Gemini의 Canvas(캔버스) 기능을 활용한 바이브코딩(Vibe Coding)은 복잡한 프로그래밍 지식이 없어도, 내가 원하는 기능과 디자인의 느낌을 설명하여 즉석에서 실행 가능한 앱이나 도구를 만드는 방식입니다.
예를 들어, 아래와 같이 끝말잇기 게임도 만들 수 있습니다.
원하는 수정사항이나 기능 추가가 필요하면 Gemini에게 추가로 요청해보세요.
작업물 저장 및 공유 방법
캔버스(Canvas) 화면 우측 상단(또는 메뉴 바)의 버튼을 활용하면, 생성된 결과물을 영구적으로 저장하거나 타인에게 쉽게 전파하고, 전문적인 코드로 발전시킬 수 있습니다.
1. 다운로드 (Download)
- 캔버스에서 생성된 파일(HTML, CSS, JS 등)을 내 컴퓨터(로컬 디렉터리)로 직접 내려받는 기능입니다.
별도의 인터넷 연결 없이 개인 브라우저에서 오프라인으로 앱을 실행해 보거나, 완성된 코드를 내 작업 폴더에 보관하고 싶을 때 사용합니다.
2. 공유 및 내보내기 (Share & Export)
- 내가 만든 결과물을 다른 사람에게 보여주거나, 다른 작업 환경으로 쉽게 옮길 수 있는 기능입니다.
- Google Drive로 공유: 작업물을 내 Google Workspace(Drive, Docs 등)에 바로 저장하여 안전하게 보관하거나, 드라이브의 폴더 공유 기능을 통해 팀원들과 쉽게 협업할 수 있습니다.
- 복사하기 (Copy): 버튼 한 번으로 생성된 코드 전체를 클립보드에 복사한 뒤, 원하는 메모장, 코드 에디터, 메신저 등에 바로 붙여넣어 사용할 수 있습니다.
활용 예시
1. 개인 맞춤형 생산성 도구
포모도로 타이머: "심플하고 감성적인 디자인의 포모도로 타이머를 만들어줘. 집중 시간 25분, 휴식 5분 설정이 가능하고, 완료되면 귀여운 알림음이 나왔으면 좋겠어."
할 일 목록(To-Do) 관리 앱: "드래그 앤 드롭으로 우선순위를 변경할 수 있는 체크리스트 앱을 만들어줘. 완료한 항목은 파티클이 터지는 효과와 함께 사라지게 해줘."
D-Day 계산기: "시험 일정을 관리할 수 있는 D-Day 계산기를 만들어줘. 배경색을 파스텔 톤으로 랜덤하게 바꿀 수 있는 버튼도 추가해줘."
2. 인터랙티브 데이터 시각화
숫자로 된 데이터를 넣으면 즉시 시각적인 차트나 대시보드로 변환합니다.
가계부 대시보드: "내가 입력한 지출 내역을 기반으로 카테고리별 파이 차트를 그려주는 가계부 앱을 만들어줘. 이번 달 예산을 초과하면 빨간색 경고가 뜨게 해줘."
성적/목표 달성 그래프: "과목별 점수를 입력하면 방사형 그래프(Radar Chart)로 내 강점과 약점을 보여주는 시각화 도구를 만들어줘."
3. 미니 게임 및 엔터테인먼트
고전 게임 리메이크: "벽돌깨기 게임을 만들어줘. 공이 벽에 부딪힐 때마다 화면이 가볍게 흔들리는 타격감을 주고, 레벨이 올라갈수록 공의 속도가 빨라지게 설계해줘."
심리 테스트/퀴즈: "사용자의 선택에 따라 결과가 달라지는 '나와 닮은 동물 찾기' 심리 테스트 앱을 만들어줘. 마지막에 결과 이미지와 설명이 예쁘게 출력되어야 해."
반응속도 테스트: "화면이 초록색으로 변할 때 클릭하는 반응속도 측정기를 만들어줘. 최고 기록을 로컬 저장소에 저장하는 기능도 넣어줘."
4. 학습 및 창작 보조 도구
단어 암기 카드(Flashcards): "앞면에는 영어 단어, 뒷면에는 뜻이 나오는 플래시카드 앱을 만들어줘. 아는 단어와 모르는 단어를 분류해서 모르는 단어만 다시 볼 수 있게 해줘."
색상 팔레트 추출기: "클릭할 때마다 서로 잘 어울리는 5가지 색상 조합을 추천해주고, HEX 코드를 바로 복사할 수 있는 디자인 도구를 만들어줘."