3. 일반적인 sound visualization : 소리 -> 그래픽
(but 우리의 프로젝트는 그래픽을 소리로 계산해 들려줌으로써 새로운 음악을 만들어내고자 한다.)
<기대하는 사용자 경험>
시각의 청각화 라는 새로운 공감각 체험과, 동시에 새로운 작곡 방식의 체험
가상의 그래픽을 생성하고 그것이 음악이 되는 프로세스 자체가 가상 공간에서의 실험적 놀이가 된다.
<타깃 유저>
1) 작곡은 모르지만 음악을 만들어보고 싶은 사람
2) 공감각 경험을 체험해보고 싶은 사람
3) 라이브 퍼포먼스로 visual -> sound 작업을 응용하고 싶은 준 전문가
결국 JADESCAPE는 일반인(음악 비전문가)을 대상으로 시각-청각 공감각을 경험할 수 있게 하는 것을 목적으로 한다.
4. 문제 상황
1. 작곡 (ex. EXA : the infinite instrument)
비전문가가 사용하기 어려워 진입장벽이 높음.
2. 사운드 (ex. incredible box)
주어진 소리만을 변화 없이 조합만 하는 방식
3. 디자인 (ex. electronaut, beat saber)
시간 축이 선형적으로 제시 및 인식됨.
솔루션
소리와 그래픽이 시각적으로 연계되어 직관적으로 파악 가능한 UI
사용자와의 Interaction을 통해 변화되는 사운드
극좌표를 사용하여 극대화한 공간감
5.
6. [ 협업 수단 ]
개발 : 유니티 & 깃허브(링크)
문서화 : 구글 스프레드시트(링크) & Sketch Cloud(링크)
정기 회의 수단 : 카카오톡 (2차례 오프라인)
프로젝트 전체 수행기간 8주
개발기간 6주
7. 핵심질문
그림을 어떤 방식으로 그릴 것인가?
그림을 그리는 행위가 음악과 어떻게 연결되는가?
결론 : 3DOF 환경에 맞추어 간략화
레이저 포인터로 그림을 그리듯
그림의 색깔이 음색
그림의 Y좌표가 음높이
그림의 X좌표가 좌우 음 편향
8. 순서 개요 화면 설명 화면 구성 사운드 유저 활동 인터랙션 비고
Start
Scene
0-0 Title Theremin / 제목 설명
0-1 Modes
기본 / 챌린지 / DJ
모드 선택
튜토리얼 / 기본 / 챌린지 / DJ 모드 선택 버튼 선택한 BPM의 메트로놈 재생 해당 모드 버튼 클릭
해당 버튼 클릭하면
해당 모드의 화면으로
제출 기간까지 메인모드
완료가 목표, 나머지 모드는
비활성화된 버튼.
Main
Mode
1-1
MainMode
setting
Basic Settings 설정
BPM 스크롤 + BPM에 따라 배경 채도 변화 선택한 비트 재생 해당 BPM 스크롤 & 선택
BPM 선택 시
다음 화면으로
비트/배경/분위기 선택 전주 fin. 비트 스와이프 & 선택
비트 선택 시
다음 화면으로
2-1
MainMode
start
암전
배경 펼쳐짐 녹화 버튼
2-2 Color Setup 음색 선택 팔레트 UI 팝업
컨트롤러 상부의 트랙패드
터치로 색상 선택
색상 변경
2-3 Draw
유저가 컨트롤러로 그린 선들이 공간에 나타남.
루프음의 경우 사용자 중심의 구형으로 빙글빙글
돌며 머무름
그려지는 선의 색, 위치, 높이 등에 따
라 그에 맞는 사운드가 재생됨. (루프
음의 경우는 사라지지 않고, 순간음
의 경우 n초 지속 후 사라짐.
컨트롤러의 트리거를 눌러
선 그리기
움직임에 따라 화면과
사운드 효과가 나타남
선을 유저의 뒤쪽에 그리는
경우 루프음, 유저의 앞쪽에
그리는 경우 순간음
2-4 Object
배경 오브젝트(행성 등)를 움직이거나 만지면 배
경 음의 변화가 나타남
변화되는 배경음 배경 오브젝트 선택, 이동
3-1 Ending
1안. 메인 화면으로 나가기
2안. 완성 파일 Export
9.
10.
11. 디자인 기획 Maya 디자인
유니티 익스포트 익스포트 문제 해결
+ 배경, 에셋 추가
1. 우주 컨셉
VR 기반 가상 환경에 적합한 공간 몰입도를
높일 수 있는 '우주'를 디자인 컨셉으로 설정.
우주환경(오로라, 행성, 회전)을 활용하여
인터랙션 구성
2. 극 좌표계
공간구성도 time linear한 직교좌표계가 아
닌 극좌표계를 설정하여 기존의 틀을 깨는 공
간축과 음악요소의 연결
12. • 디자인 컨셉 설정, 컨셉 드로잉 제작
• 공간축 - 음악요소 매핑
• Maya 기반 행성 디자인
• 행성 Export시 Material이 사라지는 문제 해결
• Unity 애셋스토어의 Material 애셋 적용
• Unity 환경에서 행성을 배치하고 행성 자전 구현
• 행성 별 효과음 매핑
• 선 디자인 레퍼런스 수집
• 배경 skybox 추가
• 실제 VR환경에서의 플레이 피드백을 바탕으로 행성 배치, 조명, 행성 효과음 등 전반적 조정
• VR환경에서 행성 배치(거리, 크기, 각도), 조명 수정
• 행성-효과음 매핑 수정
• usertest feedback
[5월 1주 - 2주차]
[5월 3주]
[5월 4주]
[5월 5주]
[6월 2주]
15. 2. Unity C# 스크립팅을 통한 구현
수학 식을 통한 파형 제작
멜로디: Additive Synthesis를 활용, 멜로디의 구성 배음의 양이 오로라의 색(0~360)에 따라 변화
코드(배경음): BPM에 따라서 입력된 4개의 코드를 순차적으로 재생
오디오 루프 구현
비트(오브젝트 클릭음): 각 오브젝트에 매핑된 오디오 샘플을 BPM에 맞춰 반복 재생하는 기능 켜기/끄기(토글)
16. • 프로그램 데모 제작: PC-평면 상의 이미지와 사운드 매핑 구현
• 프로그램 데모 제작: Unity상의 마우스 y 위치에 따라 달라지는 음 구현
• Pure Data 이용, 오실레이터 주파수 변화 패치 제작
• Pure Data 이용, 오브젝트 클릭음 예시 제작
• Pure Data 이용, 배경음 및 멜로디 시험 스크립팅
• Unity C#을 통한 음원 파일 generating 코드 작성
• 기초적인 배경음 및 멜로디 오실레이터 코드 생성
• 오로라에 멜로디 생성 오실레이터 적용
• 레이캐스트 구현 및 오브젝트 클릭음 루프 토글 코드 생성
• 푸리에급수 적용을 통한 멜로디 파형 변환 시도
• Additive Synth 적용을 통한 세부 음색 구현
[4월 3주차]
[5월 2주차-4주차]
[5월 5주차- 6월 1주차]
[6월 2주차]
17. [5월 3 - 4주차]
[5월 5주차 - 6월1주차]
[6월 2주차]
• VR 공간상에서 선을 그리는 기능 구현
• VR 기기에서 빌드하면 코드가 실행되지 않는 문제 원인 발견 (puredata)
• 선이 사라지는 기능, 공전하는 기능 구현
• 오로라 애셋을 구매함 (종류 : particle system, 가격 : 5$)
• 오로라를 마우스로 그리는 기능 구현
• 오로라를 무한히 길게 만들 수 있도록 particle system 개조
• 오로라를 만들 때 (0,0,0) 좌표에서 하얀 번쩍임이 있던 오류 해결
• 마우스의 이동속도와 상관없이 파티클 밀도를 균일하게 조정하는 기능 구현
• 오로라 색상 변경, 공전(사용자를 중심으로 회전), 사라짐 기능 구현
• 이미지 슬라이딩 방식의 튜토리얼 구현
• 오로라 색상 변경 인터랙션 구현
• 레이캐스트를 이용한 오브젝트 선택 구현
18. “사운드가 메인이 되는 컨텐츠인데, 비주얼에 밀려서 사운드가 잘 부각되지 않는다”
사운드를 풍성하게, 더 큰 폭의 변화가 가능하게끔 수정한다면 사운드와 비주얼이 적절히 어우러져서
공감각 경험을 더욱 직관적으로 표현할 수 있을 것.
“튜토리얼 글이 눈에 들어오지 않음”
텍스트를 줄이고, 직관적으로 디렉션을 주는 방향으로 해결할 것
“행성 효과음들이 서로 잘 구분이 되지 않음”
효과음들의 피치와 종류를 더 다양하게 가져올 것
“배경음이 상대적으로 너무 크다”
배경음, 오로라, 행성 효과음의 조화를 고려해서 전체적인 음량을 조절함.
19. 1. 개발 계획에 있었으나 만들지 못한 기능들
• 루프음 기능 추가
• 모드, 비트 선택 기능
• 프로젝트 저장기능 추가
• 프로젝트 녹화기능 추가
빙글빙글 돌아가는 오로라라는 시각적 즐거움과, 소리의 다양함을 준다
선택지를 넓혀서 더 많은 유저의 취향을 저격, 본격적으로 ’작곡한다’는 느낌이 들 수 있도록 한다
작업 중인 프로젝트를 저장하고 수정 가능하게 만들어서, 장기적으로 작곡이 가능한 시스템으로 만든다
사용자가 자신의 프로젝트를 손쉽게 다시 보고, 다른 사람들과 공유할 수 있도록 export 기능을 추가한다
2. 유저테스트 피드백
행성 오브젝트 선택의 어려움 (어떤 행성에 어떤 음이 나오는지 구분이 안됨)
플레이되고 있는 행성의 외곽선이 빛나면서, 그 효과음의 이름(트라이앵글 소리 등)이 떠오르는 기능 추가
vr만의 공간감이 잘 느껴지지 않음
오로라가 사라질 때 사용자에게서 멀어지면서 사라지도록 한다
20. 3. 추후 추가하고 싶은 기능들
• 리듬게임처럼 진행되는 Challenge Mode
유저들의 흥미를 불러일으켜서 지속적인 프로그램 사용이 가능하게 한다.
• 음악을 새로 작곡하는 것이 아닌, 이미 구현된 음악을 변형하는 형식의 DJ Mode
(그래픽을 변형시키면, 그에 따라 사운드가 변화하는 형식)
Jadescape 커뮤니티에서 서로의 작품을 편곡하는 방식으로 재생산이 가능하다.
21. 사운드 방면
• puredata와 연동 안됨 (사용 불가. libpd, hvcc 모두 사용불가)
• pico vr g2 4k 문제
내장 스피커 성능이 매우 떨어짐
가청주파수 조차 커버하지 못하는 부실한 스피커
additive synth를 통해 조절되는 배음 캐치가 전혀 안됨
CPU 비효율성으로 인해, DSP버퍼 최적화에도 불구하고 clicking노이즈 발생
• C# 언어 문제
푸리에 급수를 통해 파형 변환시 필요한 변수의 값이 너무 작아 실제 구현시 에러를 일으킴
시험 스크립팅때 사용했던 파형변환 구현 불가
• Unity 내부의 사운드 비친화적 기능들
개발 방면
• Ray casting 시 실제 콜라이더의 위치와 눈에 보이는 오브젝트의 위치 다름: 오브젝트 클릭음 루프 토글 개발이 늦어진 주 원인
22. 사용자 경험 방면
• 사용자는 인터페이스를 사용하면서 학습된 경험들을 통해 특정 피드백을 기대하고 행동하게 되는데, VR과 같은 경우 학습된 경험이
거의 없고 표준이라는 것이 (특히 웹 등과 비교하여) 많이 부족하다 보니, VR 환경에서의 문법에 대해 학부생의 레벨에서 제로베이스
부터 시작하여 온전히 합리적인 인터페이스를 설계하는 과정이 어려웠다.
23. • VR 이어야만 하는 이유, VR 을 사용함으로써 더 좋은 이유에 대해 많이 고민했다. 컨셉부터 디자인까지 가상현실의 장점을 최대한 활
용할 수 있도록 기획해 보면서, VR 만의 장점인 몰입감에 대해 연구해볼 수 있는 경험을 할 수 있었다.
• 공감각 체험의 영역과 작곡의 영역이 뒤섞이면서 개발과정에 난항이 있었다. 컨셉에 있어서도 우선순위를 확실히 두고 프로젝트를
진행하는 것이 중요
• VR 기기마다 그 용도와 성격이 다르기 때문에, 구현하고자 하는 프로젝트에 어울리는 기기를 적절히 선택하는 것이 중요하다.
Jadescape는 컨트롤러가 사용자의 모션을 다양하게 인식할 수록 다양한 소리를 만들어 낼 수 있기에, pico VR 에서의 활용도는 떨
어졌던 것 같다.
• 다른 기술들보다 기술 자체에 관한 정보들에 비해 사용자와의 인터랙션에 관련한 외부 자료가 없었다. 평소 기업들의 프로덕트를 기
반으로 케이스스터디하는데, VR과 같은 최신기술들의 인터랙션에 대해 찾아보기 위해서는 학술적인 정보를 우선시해서 찾아봐야겠
다는 생각이 들었다.
27. •컨트롤러를 통해 드로잉하는 그림들이 일정시간 더 유지되었으면 더욱 흥미로울 것
•튜토리얼 진행 시 X/Y축 이동에 따른 멜로디 및 코드 변화를 소개할 필요성 대두
•동일한 BGM이 계속 재생되어 지루함이 느껴짐
•별도의 모드나 시작/끝의 구분이 없어 Play시 애매하게 끝내야 하는 점이 아쉬움
•음악을 저장하는 기능으로 모드를 구분한다면 반복성을 높일 수 있을 것
•행성 선택 시 파동이 어우러지면 시각적으로 풍부할 것
•사운드가 컬러에 따라 달라지는 것과 같이 좀 더 다채로웠으면 함
•작곡 음악 저장 기능을 추가한다면 이용률을 높일 수 있을 것
•지속적으로 게임을 이용하고 도전하게 할 요소(챌린지 모드, DJ모드)가 부족하여
이를 해결하면 상용 서비스로 제공하기에 충분
지난 피드백 요약
UX
활용
활용
컨텐츠
UX
활용
활용
재미 요소
반복성
그래픽 사운드
총평
컨텐츠
컨텐츠
28. 업그레이드 방안
UI 2개 이상의 테마
(배경음악 및 모델링) 일반 모드 - 녹화 기능
(mp3 및 챌린지 모드 파일로 추출)
반복음 기능
챌린지 모드
(따라 그리기)
UX 보강 컨텐츠 추가 활용방법 추가
색상 변환에 따른
음색 변환
보다 구체적인 사용 설명
오브젝트 선택 피드백
(외곽선, 이름표, 미리듣기)
29. 진행 일정
UX기획
플로우차트/키맵핑
와이어프레임
그래픽디자인(UI, 프로덕트)
튜토리얼 디자인
1주차 레퍼런스 조사, 시안 제작
백그라운드&에셋 제작
맵핑될 사운드 선택
수정 보완
배경음악 방식
&사용 프로그램 결정
배경음악 제작
멜로디 음색 변화 로직 제작
비트 로직 제작
오브젝트 선택 피드백 구현
녹화 기능 구현
챌린지 모드 구현
UI 시스템 구현
2주차
3주차
4주차
5주차
6주차 마무리
개발 (이상규) 제너레이티브 사운드 (오채령) 3D 모델링 (송시영) 기획 / 디자인 (이찬우)
31. LOGO Design - IDEATION
JADESCAPE를 추후 다양한 곳에 런칭하는 것에 대해 이야기했기 때문에,
본 소프트웨어를 위한 로고를 디자인하는 것에 공을 많이 들였습니다.
사운드를 기반으로 하며 VR공간 속에 넓은 우주 공간이 존재한다는 것에
초점을 맞춰 아이디에이션 및 스케치를 진행하였습니다.
32. JADESCAPE
LOGO Design - IDEATION
그 중 팀원들과의 오프라인 회의에서 논의를 통해 세 개의 스케치를 기반으로
디지털 작업으로 옮겼고, 이 세 안을 기반으로 로고를 제작하였습니다.
33. LOGO Design - Development
Logotype structure
Logotype Refining
Logotype
그 중 기반이 되는 로고타입을 직접 제작하고 라틴 서체 특성에 맞게
가로획을 줄이는 등의 디테일을 손본 후 Landscape를 연상시키는
방식으로 로고를 완성하였습니다.
34. Interface Tone & Manner Design
JADESCAPE 내부에서 사용되는 인터랙션 윈도우들의 룩을 디자인하였습니다.
본 이미지는 로고가 만들어지기 전, 프로젝트의 초반에 전반적인 톤을 정하기 위해 제작한 시안들입니다.
본 회의에서 B안으로 결정되어 비슷한 디자인으로 다른 윈도우들이 디자인되었습니다.
35. Interface Wireframes & Mockups
초기에 A안으로 목업을 제작한 후 인터랙션을 넣은 프로토타입을 제작하였으나 전반적으로 프로젝트 방향성이 수정되며
기말 기간 내에 본 페이지를 제작할 시간이 되지 않아 디자인 및 수정이 이루어지지 않았습니다.
36. Interface Components
내부 커뮤니케이션과 튜토리얼에 사용할 용도로 제작된 이미지들입니다.
개발하시는 상규님과의 소통을 위해 2D, 3D 뷰 두 가지 버젼으로 제작되었고,
튜토리얼에서의 설명을 위해 측면에서 바라보는 컨트롤러 글리프를 제작하였습니다.
37. Tutorial Design
게임플레이 시작 후의 튜토리얼의 내용과 글리프, 이미지 등 전체를 제작하였습니다.
트리거를 눌러 다음 슬라이드로 넘어갈 수 있으며, 개발 과정의 편의성을 위해 앱버튼을 누르면 튜토리얼을 스킵할 수 있습니다.
38. Game Control Design
트랙휠 : 클릭-원형으로 스크롤-떼기 : 색 선택
트리거 : 음 그리기
앱버튼 : obj-선 루프 토글 / 홀드하면 PauseMenu
앱버튼+트리거 : 루프음 그리기
소프트웨어 실행 전반의 컨트롤러 사용을 설계하였습니다.
기본적으로 필요한 기능 수에 비해 버튼 수가 많이 부족하여 3번 정도 수정하였고,
팀원들과의 오프라인 회의에서 직접 컨트롤러를 사용해 보며 확정되었습니다.
41. Collect - Reference Management
WeTransfer의 Collect라는 서비스를 통해 레퍼런스를 공유하고 관리하였습니다.
https://boards.wetransfer.com/board/sbzvxlmqyd7mtcme820200607090213/latest
