Qdio | 순간을 모아, 음악으로 만들다
일상의 맥락으로 음악을 만들고, 음악으로 다시 일상을 돌아보는 AI 라이프로깅 서비스
Overview
Qdio는 사진 속 상황과 감정을 분석해 그 순간에 어울리는 음악을 만들고, 음악과 함께 일상을 기록하는 AI 음악 서비스입니다.
우리는 음악을 들었던 순간에는 장소와 상황, 감정이 함께 존재하지만 플레이리스트에는 결국 곡만 남는다는 점에 주목했습니다. 이미 존재하는 음악을 상황에 맞춰 찾는 대신, 지금의 상황에서 음악을 만들고 그 맥락까지 함께 기록할 수 있다면 어떨까? 라는 질문에서 프로젝트를 시작했습니다.
사진을 촬영하면 AI가 당시의 상황과 감정을 분석하고, 이를 음악을 만들기 위한 데이터로 변환합니다. 만들어진 음악은 사진과 함께 하나의 기록으로 쌓이고, 사용자는 시간이 지난 뒤 음악을 통해 당시의 순간을 다시 돌아볼 수 있습니다.
Context to Music
사진 한 장을 음악의 조건으로 바꾸기
사진을 바로 음악 생성 모델에 전달하는 것만으로는 일관된 경험을 만들기 어려웠습니다. 그래서 사진과 음악 사이에 상황과 감정을 구조화하는 데이터 레이어를 만들었습니다.
감정을 색으로 표현하는 시대: ‘무드 미터’의 등장과 확산 - 메이커스저널
상황은 출퇴근, 휴식, 운동, 업무, 여행, 공부, 창작 등 일상에서 반복되는 12가지 맥락으로 분류했습니다. 감정은 메이커스저널에 소개된 감정 좌표평면을 참고해 Qdio의 사용 맥락에 맞는 세부 감정과 그룹으로 재구성했습니다.
AI가 사진을 분석하면 이 체계 안에서 상황과 감정을 선택합니다. 분석 결과는 사용자가 직접 확인하고 수정할 수 있으며, 최종 값은 음악을 만드는 조건인 동시에 이후 일상을 돌아보기 위한 기록 데이터가 됩니다.
기술 프로토타입에서 제품 경험으로
디자인을 구체화하기 전, 먼저 핵심 경험이 기술적으로 가능한지 확인했습니다. 초기 functional prototype에서는 사진을 업로드하면 Keywords, Embedding, Music Prompt를 추출하고, 이를 Suno에 전달해 실제 음악을 생성하는 전체 파이프라인을 구현했습니다.
제품으로 발전시키면서는 이러한 기술적 중간값을 인터페이스에서 제거했습니다. 사용자에게 필요한 것은 embedding이나 prompt가 아니라 현재의 상황과 감정이었기 때문입니다.
또한 사진만으로 추론한 감정이 실제 사용자의 감정과 다를 수 있기 때문에, AI가 분석한 Situation과 Emotion을 직접 확인하고 수정할 수 있도록 했습니다.
Design × Development
디자인이 끝난 뒤 개발을 시작하지 않기
Qdio는 UX/UI 디자이너와 개발이 가능한 디자이너인 제가 함께한 2인 졸업 프로젝트입니다.
둘 다 이전 협업에서 디자인이 완성된 뒤에야 구현의 제약을 발견해 작업을 다시 수정하거나 포기해야 했던 경험이 있었습니다. 그래서 Qdio에서는 디자인을 완성하고 개발로 넘기는 방식 대신, 구현의 재료를 처음부터 함께 공유하는 방식을 시도했습니다.
디자인을 시작하기 전부터 실제 사용할 스타일과 모션 라이브러리, API, 구현 사례를 공유했습니다. 정적인 화면만으로 판단하기 어려운 기능은 작은 prototype으로 먼저 구현해 디자이너가 직접 사용해볼 수 있도록 했습니다.
같은 규칙에서 디자인하고 구현하기
스타일 역시 디자인과 개발에서 서로 다른 기준을 만들지 않으려고 했습니다. Tailwind CSS의 typography와 color scale을 Figma Style의 기준으로 가져오고, 실제 디자인에 필요한 gradient, opacity, blur 등의 규칙을 그 위에서 확장했습니다.
공통된 값이 변경되면 Figma Style과 Tailwind config를 같은 기준에서 함께 조정했습니다. 이를 통해 디자인에서 결정된 값이 구현 과정에서 다시 임의의 값으로 해석되는 영역을 줄이고자 했습니다.
움직여봐야 알 수 있는 것은 먼저 만들어보기
3D 인터페이스나 모션처럼 Figma만으로 동작을 판단하기 어려운 요소는 실제 코드로 먼저 확인했습니다. 반복되는 UI 역시 /showroom에 모아 컴포넌트의 상태와 동작을 실제 브라우저에서 확인했습니다.
이 과정에서 프로토타입은 완성된 디자인을 재현하기 위한 결과물이 아니라, 디자인을 함께 결정하기 위한 도구로 사용되었습니다.
Building Qdio
생성과 기록을 하나의 데이터 구조로 연결하기
Qdio에서 하나의 순간은 음악 한 곡이 아니라 사진, 상황, 감정, 메모와 여러 곡이 함께 묶인 기록입니다. 이를 Queue라는 단위로 구성하고, 각 Queue가 여러 Song을 가질 수 있도록 데이터 구조를 설계했습니다.
생성 과정에서 저장된 Queue는 이후 History와 날짜 필터, 3D 인터페이스에서도 다시 사용됩니다. 음악을 만들기 위해 생성된 데이터가 곧 일상을 돌아보기 위한 데이터가 되는 구조입니다.
기록을 다시 탐색하는 3D 인터페이스
음악을 생성하며 쌓인 기록은 Home의 3D 공간에서 다시 탐색할 수 있도록 했습니다. 각각의 기록을 하나의 구로 표현하고, 감정에 따라 색을 구분해 여러 순간이 쌓여가는 모습을 하나의 공간 안에서 보여주었습니다.
기록은 감정과 상황을 기준으로 다시 정렬할 수 있으며, 연·월·주 단위로 특정 기간을 선택하면 해당 기록만 공간의 중앙으로 모이도록 설계했습니다. 음악을 시간순 목록으로만 나열하는 대신, 축적된 일상의 패턴을 탐색하고 특정 시기의 기록으로 들어갈 수 있는 인터페이스를 만들고자 했습니다.
Outcome
제약 안에서 핵심 경험 유지하기
초기에는 사진을 촬영할 때마다 Suno를 통해 음악을 실시간으로 생성하는 방식을 실험했습니다. 하지만 당시 안정적으로 사용할 수 있는 공식 API가 없었고, 음악 생성 비용과 전시 환경에서의 대기 시간도 고려해야 했습니다.
최종 전시에서는 상황과 감정의 조합에 맞는 음악을 미리 생성해두고, AI의 분석 결과에 해당하는 음악을 선택하는 방식으로 범위를 조정했습니다. 구현 방식은 달라졌지만 사진 → 상황과 감정 → 음악 → 기록이라는 핵심 경험은 유지했습니다.
완성된 Qdio는 졸업전시에서 실제로 체험할 수 있는 형태로 공개했습니다. 관람객은 현장에서 사진을 촬영하고, 분석된 상황과 감정을 확인한 뒤 그 순간에 연결된 음악을 들을 수 있었습니다.
Qdio는 제가 디자인과 개발의 협업 방식을 처음부터 다시 설계해본 첫 프로젝트이기도 합니다. 가능한 기술을 먼저 시험하고, Figma와 코드가 공유할 규칙을 만들고, 움직임이 필요한 것은 실제로 구현해보며 디자인했습니다. 이후에도 구현을 디자인 이후의 단계가 아니라 디자인을 함께 결정하는 도구로 다루게 된 계기가 되었습니다.
가능한 기술을 먼저 시험하고, Figma와 코드가 공유할 규칙을 만들고, 움직임이 필요한 것은 실제로 움직여본 뒤 디자인했습니다. 이후에도 구현을 디자인 이후의 단계가 아니라, 디자인을 함께 결정하는 도구로 다루게 된 계기가 되었습니다.
QDIO is a web application that allows users to create and share music in a 3D environment.
https://qdio.vercel.app/
Qdio is a web application that allows users to create and share music in a 3D environment.
https://helloqdio.vercel.app/
