우주 주제 노트 앱 개발: Vanilla JavaScript와 CSS로 만든 우주적 경험
카테고리
프로그래밍/소프트웨어 개발
서브카테고리
웹 개발
대상자
- 프론트엔드 개발자(중급~고급)
- 풀스택 개발자
- 웹 애니메이션 및 UI/UX 설계에 관심 있는 개발자
- Vanilla JavaScript와 CSS 기반 프로젝트 개발 경험이 있는 사람
핵심 요약
- 우주 테마 UI 구현:
generateStarField()함수를 사용한 애니메이션 스타필드 생성 및createParticle()함수를 통한 입자 효과 구현 - 노트 관리 기능:
notes배열 구조를 통해 제목, 내용, 색상, 태그 등을 포함한 노트 객체 관리 - 인터랙티브 UI/UX:
.actio-btn__add버튼 기반 모달 창, 실시간 검색(bindSearch()) 기능, 색상 선택기(initColorPicker()) 포함
섹션별 세부 요약
1. 프로젝트 구조
design/폴더: 모바일/데스크탑 디자인 참조 이미지 포함src/styles/폴더:main.css,variables.css등으로 구성된 CSS 아키텍처src/scripts/app.js: 앱의 핵심 로직 포함assets/폴더:Inter.ttf,Orbitron.ttf폰트 및preview.gif이미지 포함
2. 우주 배경 애니메이션
generateStarField()함수:- 100개의
요소 생성 left/top속성으로 랜덤 위치 배치animationDelay속성으로 애니메이션 지연 시간 설정startParticleEffects()함수:- 200ms 간격으로 입자(
div.particle) 생성 hsl()색상 함수로 랜덤 색상 적용- 4초 후 입자 제거
3. 노트 관리 시스템
- 노트 객체 구조:
```javascript
{
title: "Note Title", // 🌟
content: "Note content", // 📄
date: "Creation date", // 📅
color: "theme color", // 🎨
tag: "category", // 🏷️
completed: false // ✅
}
```
handleNoteCreation()함수:.actio-btn__add버튼 클릭 시 폼 입력 값으로 노트 생성notes.push(newNote)로 배열에 추가 후renderNotes()호출
4. 실시간 검색 기능
bindSearch()함수:.input__search입력 필드의input이벤트 리스너notes.filter()로 제목, 내용, 태그 중 검색어 포함 여부 확인- 결과를
renderNotes()에 전달
5. 색상 선택기 구현
initColorPicker()함수:.option요소 클릭 시active클래스 추가colorpictext입력 필드에 선택된 색상 클래스 값(option.classList[1]) 할당
6. UX 개선 사항
- 애니메이션: 노트 전환 시
transition속성 활용 - 토스트 알림: 사용자 액션 후
toast요소 생성 - 모달 창:
.modal클래스를 가진 요소를 통해 노트 생성/편집 가능 - 응답형 디자인:
@media쿼리로 모바일/데스크탑 기반 레이아웃 조정
7. 개선 제안
- 로컬 스토리지 활용:
localStorage로 노트 데이터 저장 - 드래그 앤 드롭 기능:
dragstart,dragover,drop이벤트 핸들러 추가 - 마크다운 지원:
marked.js라이브러리 활용 - 클라우드 동기화: Firebase 또는 AWS S3와 연동
결론
- 핵심 팁: Vanilla JavaScript와 CSS로 풍부한 애니메이션과 인터랙티브 UI를 구현 가능
- 실무 적용:
generateStarField()와createParticle()함수를 활용한 배경 애니메이션 구현 예시 참고 - 프로젝트 확장:
localStorage또는IndexedDB를 통해 노트 데이터 영속화 가능 - GitHub 저장소: Project Repository에서 전체 코드 확인 가능