나만의 그림 일기장, 직접 만들어 쓰자! 바이브코딩으로 웹앱 만들기
“오늘 있었던 일을 그림과 함께 기록하는 웹앱을 직접 만들 수 있을까?”
바이브코딩을 활용하면 코딩을 처음 배우는 사람도 나만의 그림일기 웹앱 만들기 프로젝트에 도전할 수 있습니다.
날짜를 선택하고, 오늘의 기분을 고르고, 그림과 글을 저장하는 기능부터 시작하면 됩니다.
처음부터 로그인, 클라우드 저장, 복잡한 그림판까지 만들 필요는 없습니다.
일기 작성 → 그림 넣기 → 저장 → 다시 보기라는 가장 중요한 흐름부터 완성하는 것이 좋습니다.
그림일기 웹앱은 초등학생의 바이브코딩 프로젝트로도 재미있고, 비전공자가 HTML·CSS·JavaScript의 역할을 익히기에도 좋은 예제입니다.
먼저 그림일기 웹앱의 핵심 기능을 정하세요
바로 AI에게 코드를 만들어 달라고 하기보다 무엇이 필요한지 먼저 정리해 보세요.
첫 번째 버전은 다음 정도면 충분합니다.
- 날짜 선택
- 오늘의 기분 선택
- 일기 제목 입력
- 오늘 있었던 일 작성
- 그림 추가
- 일기 저장
- 작성한 일기 목록 보기
이 정도만 정상적으로 작동해도 하나의 그림일기 웹앱이 됩니다.
처음부터 회원가입, 친구 공개, 댓글, AI 그림 생성 같은 기능까지 넣으면 프로젝트가 빠르게 복잡해집니다.
첫 번째 목표는 기능이 많은 앱이 아니라 실제로 일기 한 편을 저장하고 다시 볼 수 있는 앱입니다.
화면부터 단순하게 만들어 보세요
처음 화면은 예쁘게 꾸미지 않아도 괜찮습니다.
위에서부터 다음 순서로 배치하면 이해하기 쉽습니다.
- 오늘의 그림일기
- 날짜 선택
- 기분 선택
- 제목 입력
- 그림 영역
- 일기 내용 입력
- 저장 버튼
- 지난 일기 목록
AI에게는 이렇게 요청할 수 있습니다.
“초등학생도 사용할 수 있는 그림일기 웹앱을 만들고 싶습니다. 먼저 기능 없이 HTML 화면만 만들어 주세요. 날짜, 기분, 제목, 그림 영역, 일기 입력창, 저장 버튼, 지난 일기 목록이 필요합니다. 복잡한 디자인은 아직 넣지 마세요.”
화면 구조를 먼저 확인한 뒤 기능을 하나씩 연결하는 편이 오류를 찾기 쉽습니다.
기분 선택 기능을 넣으면 더 재미있습니다
그림일기에는 글만 있는 것보다 오늘의 기분을 함께 남길 수 있으면 좋습니다.
예를 들어
😊 신나요
😌 편안해요
😢 속상해요
😡 화나요
🤩 최고예요
처럼 선택하게 만들 수 있습니다.
처음에는 버튼이나 선택 메뉴를 활용하면 됩니다.
AI에게
“기분을 하나 선택하면 선택된 기분이 눈에 보이게 표시되도록 만들어 주세요.”
라고 요청해 보세요.
이 과정에서 선택한 값을 저장하는 방법도 자연스럽게 배우게 됩니다.
그림은 가장 쉬운 방식부터 시작하세요
그림일기라고 해서 처음부터 웹 그림판을 만들 필요는 없습니다.
가장 쉬운 첫 번째 방법은 사용자가 그림 파일이나 사진을 선택해서 넣는 방식입니다.
직접 종이에 그린 그림을 사진으로 찍어 넣어도 되고, 컴퓨터에서 만든 그림을 선택해도 됩니다.
그다음 프로젝트에 익숙해지면 두 번째 버전에서 마우스로 직접 그림을 그리는 캔버스 기능에 도전할 수 있습니다.
초보자라면
- 1단계: 이미지 선택
- 2단계: 이미지 미리보기
- 3단계: 직접 그림 그리기
순서로 확장하는 것이 좋습니다.
처음부터 어려운 그림판 기능을 넣지 않는 것이 완성 확률을 높입니다.
저장 기능은 그림일기의 핵심입니다
화면이 만들어졌다면 이제 입력한 내용을 저장해야 합니다.
저장할 정보는 다음과 같습니다.
- 날짜
- 기분
- 제목
- 일기 내용
- 그림 정보
처음 연습하는 프로젝트라면 복잡한 데이터베이스보다 간단한 저장 방식으로 구조를 익힐 수 있습니다.
AI에게는 다음처럼 요청해 보세요.
“현재 입력 화면은 정상입니다. 저장 버튼을 누르면 날짜, 기분, 제목, 일기 내용을 하나의 기록으로 묶어서 저장하고 아래 목록에 표시해 주세요. 기존 HTML 구조는 변경하지 마세요.”
중요한 점은 한 번에 저장과 수정, 삭제까지 모두 요청하지 않는 것입니다.
저장한 일기를 카드 형태로 보여 주세요
일기가 저장되고 아래쪽에 지난 기록을 보여주면 앱다운 느낌이 생깁니다.
각 카드에는
날짜
기분
제목
일기 일부
그림
을 표시할 수 있습니다.
처음에는 최근 일기가 위에 보이도록 만들어도 좋습니다.
카드를 클릭했을 때 전체 내용을 보는 기능은 다음 단계에서 추가하면 됩니다.
입력한 데이터가 화면에 다시 나타나는 과정을 이해하면 웹앱의 기본 흐름이 훨씬 잘 보입니다.
삭제 기능을 추가해 보세요
저장이 정상적으로 작동했다면 삭제 기능에 도전합니다.
각 일기 카드에 작은 삭제 버튼을 추가합니다.
AI에게는
“각 일기 오른쪽 아래에 삭제 버튼을 추가해 주세요. 누르면 해당 일기만 삭제되어야 합니다. 저장 기능과 다른 기록은 변경하지 마세요.”
라고 요청할 수 있습니다.
삭제 버튼을 테스트할 때는 일기 세 개 정도를 만든 뒤 가운데 기록만 삭제해 보세요.
첫 번째나 마지막 기록만 테스트하면 숨은 오류를 놓칠 수 있습니다.
수정 기능은 삭제 다음에 만드는 것이 쉽습니다
일기를 잘못 작성했을 때 다시 고칠 수 있으면 훨씬 편리합니다.
수정 버튼을 누르면 기존 내용이 입력창에 다시 나타나고, 내용을 변경한 뒤 저장하면 기존 기록이 바뀌도록 만들 수 있습니다.
수정 기능은 저장 기능보다 조금 복잡합니다.
새로운 일기를 추가하는 것인지 기존 일기를 바꾸는 것인지 프로그램이 구분해야 하기 때문입니다.
그래서 저장과 삭제가 완전히 정상인 상태에서 수정 기능을 추가하는 것이 좋습니다.
기능이 끝난 뒤 디자인을 꾸며 보세요
이제 그림일기다운 분위기를 만들어 봅니다.
예를 들어
연한 노란색이나 하늘색 배경
둥근 카드
큰 글씨의 날짜
스티커 느낌의 기분 아이콘
공책 같은 일기 입력 영역
을 적용할 수 있습니다.
AI에게 디자인을 요청할 때는 다음 조건을 함께 넣어 주세요.
“현재 저장, 수정, 삭제 기능은 모두 정상입니다. JavaScript와 기존 id는 변경하지 말고 CSS만 수정해 주세요. 초등학생 그림일기장처럼 밝고 따뜻한 느낌으로 꾸며 주세요.”
기능과 디자인을 분리하면 디자인 변경 때문에 정상 기능이 깨지는 일을 줄일 수 있습니다.
완성 후에는 이런 기능으로 확장할 수 있습니다
기본 그림일기가 완성됐다면 조금씩 발전시켜 보세요.
월별 일기 보기
기분별 검색
가장 자주 선택한 기분 확인
일기 제목 검색
직접 그림을 그리는 캔버스
PDF로 일기 저장
한 달 그림일기 모아 보기
오늘의 질문 보여 주기
같은 기능을 추가할 수 있습니다.
한 번에 모두 만들지 말고 새 기능 하나 → 테스트 → 정상 버전 저장 순서로 진행하세요.
그림일기 웹앱을 만들 때 확인할 체크리스트
- 날짜를 선택할 수 있는가?
- 기분 하나를 선택할 수 있는가?
- 제목과 일기를 입력할 수 있는가?
- 그림을 추가할 수 있는가?
- 저장 버튼이 정상적으로 작동하는가?
- 저장한 기록이 목록에 나타나는가?
- 일기 하나만 정확하게 삭제되는가?
- 수정한 내용이 올바른 기록에 반영되는가?
- 새로고침 후 저장 방식이 의도대로 동작하는가?
- 모바일에서도 입력하기 편한가?
한 기능을 만들 때마다 이 목록을 확인하면 오류가 쌓이는 것을 줄일 수 있습니다.
처음 시작할 때 사용할 바이브코딩 프롬프트
아래 문장을 그대로 활용할 수 있습니다.
“저는 바이브코딩 초보자이며 나만의 그림일기 웹앱을 만들고 싶습니다. HTML, CSS, JavaScript로 시작하고 첫 버전에서는 로그인과 데이터베이스를 사용하지 않습니다. 필요한 기능은 날짜 선택, 기분 선택, 제목 입력, 그림 추가, 일기 작성, 저장, 지난 일기 목록입니다. 전체 기능을 한꺼번에 만들지 말고 먼저 HTML 화면 구조부터 만들어 주세요. 제가 확인한 뒤 다음 단계로 넘어가고, 한 번에 기능 하나만 추가해 주세요. 기존에 정상 작동하는 기능은 변경하지 말고 각 단계가 끝날 때 제가 테스트해야 할 항목도 알려 주세요.”
이렇게 요청하면 AI가 처음부터 지나치게 복잡한 프로젝트를 만드는 것을 줄일 수 있습니다.
그림일기는 바이브코딩을 배우기 좋은 생활 프로젝트입니다
그림일기 웹앱은 단순히 예쁜 웹페이지를 만드는 프로젝트가 아닙니다.
입력 → 데이터 처리 → 저장 → 목록 출력 → 수정 → 삭제
라는 웹서비스의 기본 구조를 한 프로젝트에서 경험할 수 있습니다.
무엇보다 내가 직접 사용해 볼 수 있다는 장점이 있습니다.
하루 한 편씩 기록하다 보면 “월별로 보고 싶다”, “기분으로 검색하고 싶다”처럼 새로운 기능도 자연스럽게 떠오릅니다.
처음에는 날짜와 글만 저장되는 단순한 버전이어도 괜찮습니다.
작은 버전 완성 → 직접 사용 → 불편 발견 → 기능 하나 추가
이 과정을 반복해 보세요.
바이브코딩의 재미는 AI에게 완성품을 한 번에 받는 데 있는 것이 아니라 내 아이디어가 작은 기능 하나씩 실제 서비스로 바뀌는 과정을 경험하는 데 있습니다.