i-hate-scales(3)-사이트-소개
2023-05-21
앞서 만들었던 slider와 메트로놈은 하나의 사이트를 만들기 위해 만들었는데
평소 기타 연주를 즐겨하는데 외우기 힘든 스케일표를
웹에서 좀더 편하게 보고싶었으나 보기 편하게 모아놓은 사이트가 없어
직접 만들기로 결정 하였고 만드는김에 평소에 만들고 싶었던
메트로놈 기능도 같이 넣어 만들어 넣었다
사이트 소개
사이트 제작에는 Next.js 를 사용했지만 서버에서 데이터를 가져와 통신하는 부분은 필요 없었기에
많은 기능을 사용하지는 않았으며 만들 당시 App라우터가 stable 버전이 아니었기에
Pages 라우터를 사용해 만들었다
Home
사이트의 홈 View는 최대한 이 사이트가 어떤 사이트인지 알려주고 싶었다
배경의 이미지와 문구를 통해 적어도 기타와 관련된 사이트인걸 알려주고 싶어
이러한 형식으로 제작하였다
메트로놈
메트로놈은 최대한 직관적으로 보이게 만들고자 노력했다
현재 BPM과 동그란 인디케이터를 통해 현재 몇번째 박자인지를 표시해주고
비트 설정도 개별로 가능하고록 해주었으며 색배치는 사이트 로고에 맞게 만들어 주었다
이 기능은 이전 포스트에 저장소 링크와 함께 어떤식으로 구현 되었는지 더 자세하게 적혀있다
스케일 슬라이더
이 사이트를 만들게된 계기가된 기능으로 이전 포스팅했던 슬라이더 라이브러리를 그대로
적용한 기능이다 현재는 마이너 스캐일을 제외한 메이저 스케일만 추가된 상태이며
슬라이더 안의 스케일들은 이미지가 아닌 하나하나가 HTML요소 이므로 슬라이더가 이동될때
즉 상태값이 업데이트 될때의 재렌더링으로 인한 성능저하가 체감될 정도였기에
최적화를 많이 신경써서 만들었던 라이브러리이다
마치며
이 사이트는 단순히 내가 필요하고 만들고 싶어서 시작한 프로젝트였다
이미 있는 라이브러리들을 하나하나 붙여넣기에는 아쉬웠기에 이 사이트에 들어갈 모든 기능들은
직접 만들었으며 slider의 경우 npm에 오픈소스로 처음 공개도 해본 프로젝트였기에
만들면서 고민도 많이 했던만큼 즐거웠던 프로젝트였다
다만 내 디자인 능력의 한계와 기능 자체가 많지 않아 Next.js 의 기능들을 충분히 할용치 못한것이
아쉬웠던 점이기도 했다 이 사이트의 코드는 github에 전부 공개되어있으니 링크를 남겨두겠다
