---

📢 프로젝트 소개

멜론 클론 프로젝트로 반응형 구현, 웹접근성 개선, 플레이어 설치 없이 웹에서 음악 청음 구현을 목표

💻 실행방법

npm install
npm start

🛠️ 담당 업무

• 차트 페이지 반응형 구현

• 접근성을 위해 이미지로 구현된 기존 네비게이션을 텍스트로 구현

• 로그인 버튼으로 바로 이동 가능하도록 스킵 네비게이션 개선

• 비디오 재생시간 스크린리더 환경에서 올바르게 읽어주도록 개선

💼 회고

웹 접근성

음악은 누구나 즐길 수 있는 컨텐츠 임에도 스크린 리더 사용자를 위한 웹 접근성이 많이 아쉬웠다. 오타로 인해 따옴표라고 읽어 혼란을 야기하는 부분도 있었고 위의 개선 사례에 나왔던 비디오 재생시간이 분과 초로 제공되는 컨텐츠를 몇 대 몇으로 읽기도 하고 시와 분으로 읽기도 하여 완전 잘못된 정보를 제공하는 경우도 있었다.

시멘틱 마크업

div 위주의 마크업에서 시멘틱한 마크업에 대한 많은 고민을 하며 학습할 수 있었다.
스크린 리더 사용자들에게 보다 나은 접근성을 제공하고 SEO 측면에서 시멘틱 태그를 중요 키워드로 크롤링함을 알게 되었다.
또한 유지보수 및 가독성의 측면에서 보더라도 훨씬 직관적으로 유리함이 있음을 느꼈다.