[주간 자기 계발] whitmem 음악 작곡 기록 사이트 개발

Whitmem 음악 작곡 기록 사이트

이번 프로젝트는 whitmem.xyz 의 사이트를 새 단장한 것으로, whitmem의 보조 취미인 음악 작곡에 대한 기록을 남기고자 별개의 포트폴리오 사이트를 개발 하였다.

사이트 구성

모바일 뷰

PC 버전 뷰

메뉴바

구성요소

1. 나눔고딕 폰트를 사용하였음

2. Material Design Icon을 사용하였음

동적인 페이지 요청

메뉴바의 동적 요청

곡 목록은 페이지가 로드될 때 동적으로 가져와 처리되고, 동적으로 화면에 표시 됨. 페이지의 새로고침이 필요 없음

플레이어 구성

플레이어

플레이어 요청이 들어오면 플레이어는 별개의 타임 UI를 동기화하기 위한 쓰레드를 시작하고, 그 쓰레드에 따라 화면 UI 를 갱신함. Progress를 별개 클릭하는 경우, 그 클릭된 좌표 위치를 바탕으로 퍼센트를 계산하여 그 퍼센트에 해당하는 음악 위치로 변경함으로써 재생 시간 변경을 할 수 있도록 하였음

데이터 베이스 구성

Mariadb Server을 기반으로 하며, 각 곡의 카테고리를 먼저 order by 로 로드 한 뒤, 그 목록에 대한 세부 항목들을 쿼리하여 모든 곡의 리스트를 가져옴, 그 곡의 데이터는 http request로 로드하여, 화면상에 동적으로 표시함. 이상적으로는 json 등을 사용하여 출력하는 것이 좋으나, 간단하게 개발하는 용도였기에, split 으로 구분자를 사용하여 데이터를 로드하였음.

기술적인 소프트웨어 라이선스 정보
https://whitmem.kr/?type=license