제목

카테고리

프로그래밍/소프트웨어 개발

서브카테고리

웹 개발

대상자

• 웹 개발자, 특히 HTML/CSS/JavaScript 기반 프로젝트에 관심 있는 중급자
• 애니메이션 팬 및 프론트엔드 기술 학습자
• 난이도: 중간 (프레임워크 없이 Vanilla JS와 Tailwind CSS 사용)

핵심 요약

• Jikan API와 Tailwind CSS를 활용한 반응형 애니메이션 정보 웹 앱 개발
• Vanilla JavaScript로 DOM 동적 생성 및 검색/테마 전환 기능 구현
• MIT 라이선스로 오픈소스 배포 및 자유 재사용 가능

섹션별 세부 요약

1. 프로젝트 개요

• AnimeForge는 Jikan API를 사용해 애니메이션 정보를 제공하는 웹 앱
• HTML5, Tailwind CSS, Vanilla JavaScript 기반의 프레임워크 없이 구현
• 모바일/데스크탑 대응 가능한 반응형 UI

2. 기술 스택

• HTML5 및 Tailwind CSS로 UI 구성
• Vanilla JavaScript로 DOM 조작 및 API 요청 처리
• Jikan API (MyAnimeList 비공식 API)를 통해 데이터 수집

3. 핵심 기능

• 탑 애니메이션/영화 리스트 표시 (/top/anime, /top/movies)
• 라이브 검색 기능 (/search 엔드포인트 활용)
• 테마 전환 (다크/라이트 모드) 및 세부 정보 페이지 (anime.html?id=XXXX)

4. 프로젝트 구조

• index.html (탑 애니메이션), movies.html (영화), anime.html (세부 정보)
• theme_change.js (테마 전환 로직), README.md (설명서)
• 로컬 실행 가능: git clone 후 index.html 열기

5. API 활용 방식

• REST API를 통해 데이터 동적으로 로드
• 카드형 UI 자동 생성 (JavaScript DOM 조작)
• anime.html에서 id 파라미터로 세부 정보 요청

6. 배포 및 사용

• Netlify를 통해 라이브 배포 (https://animeforge.netlify.app/)
• MIT 라이선스로 오픈소스 배포: 수정, 공유 가능

7. 개발자 정보

• Ashish Prajapati (GitHub: @Anticoder03, Instagram: @ashiah03_prajapati)
• 인도 출신의 풀스택 학습자 및 애니메이션 팬
• "Anime taught me never to give up. Code made me unstoppable."

결론

• Vanilla JS와 Tailwind CSS로 간단한 웹 앱 개발 실습 가능
• Jikan API 활용법 학습 및 반응형 디자인 적용
• MIT 라이선스로 자유롭게 재사용 가능하며, 애니메이션 팬에게 유용한 프로젝트 예시