
## 서론

사람들과 음악 이야기를 나누다 보면, 종종 “어떤 음악을 좋아해?”라는 질문을 듣게 된다. 가장 좋아하는 뮤지션이나 가장 좋아하는 노래는 비교적 쉽게 대답할 수 있지만, '어떤 음악'이라는 질문은 생각보다 모호하게 느껴진다.

장르를 얘기하면 되지 않느냐고 생각할 수 있지만, 그렇지도 않다. 예를 들어 Nirvana와 Radiohead는 모두 얼터너티브 록으로 분류되지만 음악적 성향은 상당히 다르다. 반대로 누군가가 '얼터너티브 록'을 좋아한다고 했을 때, 그것이 Nirvana 스타일인지, Radiohead 스타일인지, 아니면 Muse 스타일인지는 쉽게 알 수 없다.

사실 나 자신도 내가 정확히 어떤 음악을 좋아하는지 완전히 알고 있다고 말하긴 어렵다. 무의식적으로 따르고 있는 여러 기준들이 있겠지만, 그것을 말로 설명하고 수치화하는 일은 결코 쉬운 일이 아니다.

그럼에도 불구하고, 내 음악 취향을 더 깊이 이해하고 싶었고, 이를 다른 사람들에게도 명확하고 근거 있게 설명하고 싶었다. 그래서 이 사이트를 만들게 되었다.

## 프로젝트 소개

[music.hoojun.kim](https://music.hoojun.kim/)

이 사이트는 내가 심사숙고 끝에 정한 일곱 가지 기준을 바탕으로 곡을 평가하고, 각 기준에 평점을 매겨 평균을 낸 뒤 점수에 따라 노래들을 정렬하여 보여주는 형태로 구성되어 있다. 현재의 평가 기준은 다음과 같다:

- 구조적 흐름 (structure): 곡의 구성(도입→전개→클라이맥스→마무리)의 자연스러움
- 가사 (lyrics): 문학성, 공감도, 메시지 전달력
- 프로덕션 (production): 음향 품질, 밸런스, 믹싱
- 퍼포먼스 (performance): 연주의 완성도와 생동감
- 독창성 (originality): 참신하고 차별화된 요소
- 멜로디 & 리듬 (melody & rhythm): 중독성 있는 흐름
- 감정 깊이 (emotion): 감정의 전달력과 다양성

[https://github.com/jindun619/hoojun-music](https://github.com/jindun619/hoojun-music)

## 기술 소개

사용한 스택들은 다음과 같다:

![Next.js](https://img.shields.io/badge/Next.js-000000?style=for-the-badge&logo=next.js&logoColor=white)![TypeScript](https://img.shields.io/badge/TypeScript-3178C6?style=for-the-badge&logo=typescript&logoColor=white)![TailwindCSS](https://img.shields.io/badge/TailwindCSS-06B6D4?style=for-the-badge&logo=tailwindcss&logoColor=white)![DaisyUI](https://img.shields.io/badge/DaisyUI-5A0EF8?style=for-the-badge&logo=daisyui&logoColor=white)![Redis](https://img.shields.io/badge/Redis-DC382D?style=for-the-badge&logo=redis&logoColor=white)![Spotify](https://img.shields.io/badge/Spotify-1DB954?style=for-the-badge&logo=spotify&logoColor=white)![Vercel](https://img.shields.io/badge/Vercel-000000?style=for-the-badge&logo=vercel&logoColor=white)

### 프론트엔드

- Next.js는 서버 사이드 렌더링(SSR)을 지원하며, 검색엔진 친화적이고 사용자에게 빠른 초기 로딩을 제공할 수 있어 선택했다.
- TailwindCSS + DaisyUI 조합은 빠른 스타일링과 일관된 UI 구성 요소 활용에 유리하여 사용했다. 특히 admin 페이지 구축 시 많은 시간을 절약할 수 있었다.
- TypeScript를 도입해 코드의 안정성과 가독성을 확보했다.

### 백엔드 & 데이터 관리

- `Spotify Web API`를 활용해 곡 제목, 아티스트, 앨범 정보 등을 가져온다. 주로 사용한 endpoint는 `Get Track`, `Get Artist`, `Search` 등이다.
- 데이터베이스는 `Upstash Redis JSON`을 사용했다. 프로젝트 규모가 작고 데이터 변경도 자주 일어나지 않으며, 오직 관리자(나)만 데이터를 관리하기 때문에, 서버리스 환경에서 빠르고 간단하게 사용할 수 있는 Upstash Redis가 적합하다고 판단했다. 특히 Redis JSON은 트랙 정보처럼 구조화된 데이터를 그대로 저장하고 불러오는 데에 효율적이어서, 별도의 스키마 설계나 복잡한 ORM 없이도 유연하게 데이터를 다룰 수 있었다.
- Next.js의 `API Routes`를 통해 RESTful API를 구성했고, Redis와의 통신은 `@upstash/redis` 라이브러리로 처리했다.

### 관리자 기능

- `/admin` 경로를 통해 평가 기준별 점수 등록/수정/삭제가 가능하며, JWT를 이용한 간단한 인증 기능을 구현했다.
- 인증 토큰은 클라이언트 측 localStorage에 저장되며, Axios 인터셉터로 자동 전송된다.

## 소감

이번 프로젝트는 어떤 기술 스택을 사용할지 결정하는 것부터 시작해, 세부적인 구현 방식까지 미리 설계한 후에 코딩을 시작했다. 그 덕분에 전체 개발 과정이 훨씬 수월했고, 실제로 단 3일 만에 완성할 수 있었다. 이번 경험을 통해 ‘설계’가 프로젝트 완성도와 속도에 얼마나 큰 영향을 미치는지 몸소 느낄 수 있었다. 특히 기능 구현에만 집중했던 이전과 달리, 이번에는 내가 왜 이 프로젝트를 만드는지, 어떤 방향으로 나아가고 싶은지를 명확히 한 상태에서 작업할 수 있었다.

그 결과, 막연했던 음악에 대한 감상을 일곱 가지 기준으로 구체화하고, 각 항목을 수치화하면서 나만의 새로운 시각을 얻을 수 있었다. 주관적인 감정을 숫자로 표현한다는 것이 다소 모순처럼 느껴질 수도 있지만, 그 과정을 통해 오히려 나 자신을 더 깊이 이해할 수 있었고, 이 작업 자체가 매우 흥미롭고 의미 있는 경험이었다. 앞으로는 각 평가 항목에 가중치를 부여하는 기능도 추가할 예정이다. 예를 들어, 가사를 중요하게 생각한다면 가사 점수에 더 높은 비중을 두어 평균 점수에 더 큰 영향을 주도록 조정할 수 있다. 결국 이 사이트는, 내가 스스로에게 "나는 어떤 음악을 좋아하는 사람인가?"라는 질문에 조금 더 정직하게 답할 수 있도록 도와주는 도구라고 할 수 있다.


참고 자료