HTMLJavaScriptCSS
[JS] 레트로 포켓몬 도감(Pokemon Pokedex)
Chae-hyeon Kim
2025년 9월 1일
목차
프로젝트 소개
-
GitHub URL(상세 내용 확인 가능)
-
배포 주소
구현 화면 및 기능
-
데스크톱
-
모바일
프로젝트명
레트로 게임보이 스타일의 포켓몬 도감 웹 애플리케이션입니다. PokeAPI를 활용하여 포켓몬 정보를 실시간으로 조회하고, 로딩 애니메이션과 배경음악 기능을 제공합니다.
사용 기술 및 기술 스택
Frontend
- HTML5: 시맨틱 마크업
- CSS3: Flexbox, Grid, 애니메이션, 반응형 디자인
- JavaScript: 클래스, 비동기 프로그래밍, DOM 조작
API & 외부 서비스
- PokeAPI: 포켓몬 데이터 제공
- Project Pokemon: 고화질 GIF 이미지
- YouTube: 배경음악 소스
개발 도구
- yt-dlp: YouTube 동영상 다운로드
- ffprobe: 미디어 파일 분석
주요 특징
📱 핵심 기능
- 포켓몬 정보 조회: 1,000마리의 포켓몬 정보 실시간 조회
- 네비게이션: 이전/다음/랜덤 포켓몬 이동
- 검색 기능: ID, 정확한 이름, 부분 검색 지원
- 타입 표시: 포켓몬 타입을 한국어로 표시
- 포켓몬 목록: 클릭 가능한 포켓몬 카드 목록
- 실시간 검색: 디바운스 적용으로 성능 최적화
🎨 UI/UX 기능
- 레트로 디자인: 게임보이 스타일의 복고풍 인터페이스
- 로딩 애니메이션: 이미지 로딩 중 스피너 표시
- 반응형 디자인: 다양한 화면 크기에 대응
🎵 멀티미디어 기능
- 배경음악: 플로팅 버튼으로 포켓몬 테마곡 재생/일시정지
- GIF 이미지: 고화질 포켓몬 GIF 이미지 표시 || GIF 이미지가 없을 경우 일반 이미지 표시
- 아이콘 변경: 재생/일시정지 상태에 따른 아이콘 변경
개발 배경
약 5일간의 짧은 프로젝트로, Vanilla JS 학습을 위해 스터디원들과 함께 각자의 포켓몬 도감을 제작했습니다. API 연동을 통해 데이터를 불러오며, 어린 시절의 추억을 프로그래밍으로 직접 구현해보는 경험을 했습니다.
추가 참고사항
PokeAPI 기본 정보
- API URL:
https://pokeapi.co/api/v2/pokemon - 총 데이터 수: 1,302개
- 이 중 사용한 데이터 수: 1000개
- 사용 가능한 키: 20개
웹 접근성 관점
WCAG 준수:
- 1.4.2 오디오 제어: 자동 재생되는 오디오는 사용자가 중지할 수 있어야 함
- 2.1.1 키보드: 모든 기능이 키보드로 접근 가능해야 함
- 2.2.2 일시정지: 자동으로 시작되는 콘텐츠는 일시정지 가능해야 함
UX 개선사항
- API 연동 시 데이터 로딩 대기 시간을 시각적으로 줄이기 위해 로딩 스피너를 도입
- 사용 편의성을 위해 플로팅 버튼을 추가하여 포켓몬 도감 사용법 안내 기능 제공