2일차 프로젝트 특징
- 20~30분 MVP 가능
- HTML/CSS/Vanilla JS만 사용
- 로컬 실행만으로 확인 가능
- GitHub Pages 배포 가능
- AI 프롬프트로 기능 확장
추천 조합
BEST 3
| 난이도 | 프로젝트 | 추천 이유 |
|---|---|---|
| ★ | 명언 카드 생성기 | 가장 빠르게 완성 가능 |
| ★★ | 집중 타이머 | JS 핵심 개념 학습 |
| ★★ | AI 채팅 UI | 이후 AI 앱 확장 최적 |
1. AI 스타일 명언 카드 생성기
프로젝트 개요
사용자가 버튼을 누르면 랜덤 명언이 등장하고
배경 색상/폰트/스타일이 함께 변경되는 웹앱.
특징
- DOM 조작
- 배열 데이터 처리
- 랜덤 함수
- 이벤트 처리
- CSS 애니메이션
- 카드 UI 디자인
- 이미지 다운로드 기능 확장 가능
구현 기능
MVP
- 랜덤 명언 출력
- 배경색 변경
- 버튼 클릭 이벤트
- 카드 디자인
추가 기능
- 다크모드
- 카테고리 선택
- SNS 공유 버튼
- PNG 저장
학습 포인트
<button id="generateBtn">Generate</button>generateBtn.addEventListener("click", generateQuote)JS 이벤트 흐름 파악
2. 사이버펑크 타이머 / 집중력 타이머
프로젝트 개요
Pomodoro 스타일 집중 타이머.
- START
- STOP
- RESET
- 남은 시간 표시
장점
setInterval()
개념을 체험
확장 요소
- 알람 사운드
- 진행바
- 집중 통계
- 로컬스토리지 저장
3. 랜덤 밈(Meme) 생성기
프로젝트 개요
이미지 위에 텍스트를 입력해 밈 생성.
입문자 만족도가 높은 이유
- 결과물이 즉각적으로 웃김
- 친구들에게 바로 공유 가능
- CSS position 개념 학습 가능
핵심 기술
position: absolute;
텍스트를 이미지 위에 배치.
추가 기능
- 이미지 업로드
- 폰트 선택
- 다운로드 버튼
4. 채팅 UI 클론
프로젝트 개요
실제 AI 연결 없이:
- 채팅창 UI
- 메시지 입력
- 말풍선 출력
만 구현.
장점
이후 GPT API 연결 프로젝트로 자연스럽게 확장 가능.
- 오늘 → UI
- 다음 단계 → 실제 AI 연결
작업 흐름 확인 사항
1단계 — HTML 골격 만들기
<div class="container">
2단계 — CSS로 스타일 정의
- Flexbox
- 버튼
- 카드
- hover 효과
3단계 — JS 기능 추가
addEventListener()
4단계 — Cursor/Claude로 기능 확장
예시:
“다크모드를 추가해줘”
“애니메이션을 넣어줘”
“모바일 반응형으로 바꿔줘”
