App 02몰입형 사운드 앱 · 집중 · 수면

roomtone
룸톤

roomtone

좋았던 곳의 공기를, 지금 여기로

좋았던 장소의 소리를 30초 녹음하면 이음매 없는 루프가 되고, 그 소리를 내 주변 원하는 방향·거리에 놓아 집중하거나 잠듭니다. 프로토타입에서 실제로 소리가 나고(Web Audio · HRTF 공간 음향), 실제 마이크로 녹음됩니다.

공간 음향 · HRTF셰이더 사운드 오브젝트녹음 → 루프밤 · 낮

분야: 사운드 · 웰니스
대상: 주변 소리로 집중하거나 잠드는 사람, 좋았던 장소의 소리를 간직하고 싶은 사람
작업 범위: 서비스 기획 · 리서치, UX/UI 디자인, 인터랙티브 HTML 프로토타입, 디자인 시스템(토큰 · 아이콘 · 서체), 자동 QA, Flutter 이전 가이드
구분: 자체 기획 컨셉 프로젝트 · 모바일 앱(iOS · Android)

Overview

무엇을 풀었나

대상 — 주변 소리로 집중하거나 잠드는 사람, 좋았던 장소의 소리를 간직하고 싶은 사람

01문제

녹음 앱은 소리를 다시 틀어 주기만 하고, 앰비언트 재생 앱에는 내가 녹음한 소리를 넣을 수 없습니다. 좋았던 장소의 공기는 사진처럼 남지 않습니다.

02해결

30초 녹음 → 이음매 없는 루프 → 내 주변 공간에 배치. 소리 하나하나를 손으로 끌고 던지는 물체로 만들어, 듣는 경험을 만지는 경험으로 바꿨습니다.

03디자인 언어

Organic Sonic Matter. 거의 검은 차콜 위에 반투명한 젤리·유리 같은 소리 오브젝트가 앰버색 ‘나’를 둘러쌉니다. 가이드 링은 끄는 동안에만 나타납니다.

Key features

핵심 기능

roomtone을(를) 다르게 만드는 4가지

01

Living Sound Canvas

각 소리 레이어는 셰이더로 그리는 반투명 연성체입니다. 실제 재생 신호의 저·중·고역과 어택에 반응하고, 손으로 끌어 방향·거리를 바꾸거나 트레이에서 끌어다 놓습니다.

WebGL2 셰이더 · 프레임당 CPU 0.26–0.53ms
저사양 품질 단계 · 움직임 줄이기 대응

02

내 녹음을 이음매 없는 루프로

30초 녹음에서 가장 고른 구간을 골라 1·2·4초 크로스페이드로 잇습니다. 녹음 중에는 실제 마이크 입력 레벨이 화면에 그려집니다.

보안 컨텍스트가 아니면 데모 입력으로 자동 전환
대화가 감지되면 목소리 흐림을 기본으로 켬

03

톤 스탬프 — 소리의 얼굴

실제 FFT(48밴드)로 분석한 결과를 등고선 스탬프로 그립니다. 라이브러리의 모든 소리가 서로 다른 얼굴을 갖고, 앱 아이콘도 담양에서 녹음한 소리의 스탬프입니다.

톤 스탬프 29종 SVG
스탬프 읽는 법 안내 시트

04

공간에 놓고, 세션으로 쓰기

필드 화면에서 소리를 내 주변 원하는 위치에 놓으면 헤드폰에서 실제로 방향과 거리가 바뀝니다. 집중·듣기·잠들기 세션은 타이머와 함께 소리를 서서히 줄입니다.

HRTF 공간 음향 필드
집중 · 듣기 · 잠들기 세션

All screens

전체 화면 64장

모든 화면은 실제로 동작하는 HTML 프로토타입에서 자동 촬영했습니다. 화면을 누르면 크게 볼 수 있어요.

크게 보기에서 ← → 키 또는 좌우로 밀어 넘기기

지금 · 사운드 캔버스

13

01지금
02지금 · 재생 중
03지금 · 레이어 선택
04지금 · 오후
40지금 · 끌어 옮기기
41지금 · 끌어서 빼기
42지금 · 소리 트레이
43지금 · 트레이에서 끌어 놓기
44지금 · 장면 전환
45지금 · 음소거 레이어
46지금 · 빈 상태
47지금 · 움직임 줄이기
48지금 · 저사양 품질

필드 · 공간 배치

4

16필드
17필드 · 재생 중
18필드 · 소리 선택
19필드 · 프리셋

담기 · 녹음

4

20담기 · 준비
21담기 · 녹음 중
22담기 · 루프 다듬기
23담기 · 저장

소리 · 장소

5

05소리
06소리 · 미리 듣기
07소리 · 내 녹음만
08장소 · 시간순
09장소 · 지역별

톤 스탬프

3

14톤 · 내 녹음
15톤 · 라이브러리
39톤 · 매미(실제 녹음)

세션

4

24세션 · 집중
36세션 · 잠들기(서서히 줄임)
37세션 · 듣기
38세션 · 집중 일시정지

나 · 설정

4

10나
11오디오 설정
12개인정보 · 목소리 흐림
13저장한 방

시트

8

25시트 · 레이어 추가
26시트 · 타이머
27시트 · 공유
28시트 · 플러스
29시트 · 방 저장
30시트 · 스탬프 읽는 법
31시트 · 세션 끝
49시트 · 믹서

온보딩

4

32온보딩 1
33온보딩 2
34온보딩 3
35온보딩 4

Design system

디자인 시스템

색 · 서체 · 아이콘을 DTCG 토큰 JSON과 SVG 에셋으로 정리해 그대로 개발에 넘깁니다.

색 라이트 · 다크 토큰

밤

canvas#0B0B0D

raised#151517

raised-2#232326

fg#EEE9E1

fg-2#B5B2B3

accent#EFAA55

accent-text#F4C27E

rec#F2604F

낮

canvas#EDEAE4

raised#F7F5F1

fg#121214

fg-2#4B4A4F

accent-text#85521A

rec#B83A2A

소리 재질

물#86B8D6

바람#ABA2D8

생물#98B28B

불#E8955A

도시#DF8A75

실내#CDB490

톤#D9D3C9

서체 OFL 라이선스

roomtone 24:00

Space Grotesk라틴 디스플레이 · 로고 · 숫자

연남동 골목의 밤

Pretendard한글 본문 · UI

-18.4 dB · 48 BANDS

IBM Plex Mono수치 · 계측 표시

브랜드 · 에셋

앱 아이콘담양 녹음의 스탬프 등고선과 앰버 코어

워드마크밤 · 낮 두 가지 버전

톤 스탬프실제 소리를 FFT로 분석해 그린 등고선 · 29종 중 12종

Deliverables & QA

산출물과 품질 검수

보기 좋은 시안에서 멈추지 않고, 개발자가 바로 옮길 수 있는 기준본을 만듭니다.

20+화면 · 시트
(탭 4 · 푸시 4 · 모달 3 · 시트 9)

64스크린샷
밤 49 · 낮 15

82SVG 아이콘

29톤 스탬프 SVG

20/20인터랙션 플로우
자동 검증 통과

56WCAG 대비 검사
전 항목 통과

524터치 영역 검사 요소
미달 0

13화면별 명세 문서

소리가 나는 HTML 프로토타입

Web Audio HRTF 공간 음향, 실제 마이크 녹음, WebGL2 셰이더 오브젝트까지 실제로 동작합니다. 성능 HUD와 품질 단계(고·균형·저)로 기기별 동작을 확인할 수 있습니다.

Flutter 이전 가이드

flutter_soloud · FragmentProgram(셰이더) · record · fftea 기반 이식 설계, 토큰 → 위젯 대응, 실제 녹음 루프의 반응용 엔벨로프 데이터까지 준비했습니다.

기술 스택

프로토타입 · 자동 검수

React 19TypeScriptViteTailwind CSS v4MotionZustandPlaywright