오디오 캔버스: 사운드 드로잉 공방

GAME 028

오디오 캔버스: 사운드 드로잉 공방은 그림을 그리며 소리를 만들고, 완성한 그림을 약 35초 선율로 감상하는 창작형 음악 웹게임입니다. 여섯 가지 도구와 열 가지 악기 음색, 굵기·농도를 조절하고 작품을 저장하거나 PNG로 내려받을 수 있습니다.

게임 기본 정보

  • 장르: 음악·창작·그리기
  • 난이도: 쉬움
  • 예상 플레이 시간: 제한 없음
  • 플레이 인원: 1명
  • 지원 환경: 데스크톱·태블릿 권장, 모바일 플레이 가능
  • 조작 방식: 마우스·터치·키보드
  • 저장 방식: 그림·프리셋·소리 설정을 현재 브라우저에 자동 저장
  • 네트워크 연결: 최초 게임 로딩 시 필요
  • 현재 버전: v1.0.0

회원가입은 필요하지 않습니다. 게임은 브라우저에서 실행되며 개인정보를 수집하지 않습니다. 저장 데이터는 다른 기기와 공유되지 않습니다.


게임 플레이

종이에 선을 그려 보세요. 색은 악기 음색, 위아래 위치는 음높이에 영향을 줍니다. 화면이 표시되지 않으면 페이지를 새로고침하고 JavaScript와 iframe 실행을 확인해 주세요.

실제 테스트 화면

PC는 Chrome 100% 화면과 전체 UI가 보이는 80% 화면을 캡처했습니다. 모바일은 iPhone 12 mini 세로 화면에서 촬영했으며, 아래쪽 설정은 스크롤해 확인할 수 있습니다. 80% 화면은 축소 배율 캡처이며 권장 배율을 뜻하지 않습니다.

PC Chrome 100%에서 오디오 캔버스의 그림판과 도구를 표시한 화면
PC · Chrome 100% — 캔버스와 그리기 도구, 현재 그림 연주 영역입니다. 전체 UI가 한 화면에 들어오지 않아 상단 작업 화면을 담았습니다.
PC Chrome 100%에서 붓 설정과 색상별 악기, 프리셋 영역을 표시한 화면
PC · Chrome 100% — 아래쪽의 붓 설정, 색상별 악기 선택과 프리셋 영역입니다.
PC Chrome 80% 축소 배율에서 오디오 캔버스 전체 UI를 표시한 화면
PC · Chrome 80% — 전체 UI 개요입니다. 브라우저 축소 배율에서 촬영했으며 일반적인 권장 배율은 아닙니다.
iPhone 12 mini 세로 화면에서 캔버스와 그리기 도구를 표시한 화면
iPhone 12 mini · 세로 화면 — 캔버스와 그리기 도구가 배치된 모습입니다.
iPhone 12 mini에서 스크롤해 재생 설정과 악기 및 프리셋을 표시한 화면
iPhone 12 mini · 아래로 스크롤한 화면 — 연주 설정, 악기 선택과 프리셋을 확인할 수 있습니다.

플레이 방법

  1. 종이에 마우스나 손가락을 누른 채 움직여 선을 그립니다.
  2. 도구와 색을 고르고, 굵기·농도를 조절해 그림과 소리를 바꿉니다.
  3. 현재 그림 연주로 완성작의 선율을 듣거나, 프리셋을 불러와 감상합니다.
  4. 작품은 브라우저에 저장되며, 그림 저장으로 PNG를 내려받을 수 있습니다.

승패나 점수 목표 없이 그림과 소리 조합을 탐색하는 도구입니다. PNG에는 그림만 저장되고 소리는 포함되지 않습니다.

조작 방법

  • 마우스 누르고 움직이기: 선택한 도구로 그림 그리기
  • 캔버스 초점 후 방향키: 키보드 붓 위치 이동
  • Space: 키보드 붓 위치에 점 찍기
  • Ctrl+Z 또는 Cmd+Z: 마지막 붓질 실행 취소
  • Ctrl+Y 또는 Ctrl+Shift+Z: 취소한 붓질 다시 실행

모바일에서는 캔버스를 누르고 드래그해 그리며, 도구·색상 버튼과 슬라이더를 터치해 조절합니다. 세로·가로 화면을 모두 이용할 수 있고, 좁은 화면에서는 도구와 설정이 여러 줄로 재배치됩니다.

주요 버튼

  • 소리·도움말·새 종이·그림 저장: 음소거, 사용법 확인, 새 작업 시작, PNG 다운로드
  • 실행 취소·다시 실행: 마지막 붓질을 취소하거나 복구
  • 현재 그림 연주·붓질 과정 재생: 완성 그림의 선율 또는 그린 순서 재생
  • 무한 반복: 재생을 반복하도록 설정
  • 프리셋 버튼: 기본 작품을 불러오거나 사용자 슬롯에 저장·삭제

저장: 그림은 붓질 완료 시, 설정은 변경 시, 사용자 프리셋은 저장할 때 현재 브라우저에 보관됩니다. 브라우저 데이터를 지우면 저장 내용도 사라질 수 있으니 중요한 작품은 PNG로 내려받아 주세요.


게임 소개

색은 악기 음색, 캔버스의 세로 위치는 음높이, 좌우 위치는 소리의 방향감에 반영됩니다. 붓질할 때 즉시 소리가 나며, 완성한 그림은 약 35초 선율로 재생할 수 있습니다. 지운 부분은 연주에서 제외됩니다.

그림과 소리의 연결 방식

색으로 음색 선택

산호색 건반, 파란색 유리 종, 초록색 피리 등 열 가지 색마다 서로 다른 악기 느낌의 합성음이 연결되어 있습니다.

세로 위치와 붓질로 음 만들기

위쪽에 그리면 높은 음, 아래쪽에 그리면 낮은 음이 납니다. 도구와 붓질 농도는 음의 질감과 세기에 영향을 줍니다.

직접 연주와 붓질 재생

현재 그림 연주는 완성작의 색과 위치를 선율로 들려주고, 붓질 과정 재생은 그린 순서와 움직임을 보여 줍니다. 무한 반복을 켜면 재생이 반복됩니다.


게임 난이도

시간 제한이나 점수 목표가 없어 원하는 만큼 그릴 수 있습니다. 음악 지식이 없어도 색과 위치를 바꿔 소리를 탐색할 수 있으며, 별도의 승패 판정은 없습니다.

초보자 플레이 팁

먼저 한 가지 색으로 짧은 선을 그어 소리를 들어 보세요

색을 고르고 캔버스의 위쪽과 아래쪽에 선을 하나씩 그려 보면 음색과 음높이의 차이를 바로 확인할 수 있습니다. 간단한 선부터 시작하면 각 조작이 그림과 소리에 어떻게 반영되는지 익히기 쉽습니다.

초보자 플레이 팁 더 보기

그림의 높낮이로 선율을 만들어 보세요

캔버스 위쪽은 높은 음, 아래쪽은 낮은 음에 대응합니다. 위아래를 오가는 선을 그려 음의 높낮이가 바뀌는 짧은 멜로디를 만들어 보세요.

색과 도구를 한 번에 하나씩 바꿔 보세요

색은 악기 음색을, 도구는 선의 모양과 소리의 여운을 바꿉니다. 한 번에 여러 설정을 바꾸기보다 하나씩 시험하면 원하는 조합을 찾기 쉽습니다.

현재 그림 연주와 붓질 재생을 구분해 활용하세요

현재 그림 연주는 완성된 그림의 색과 위치를 바탕으로 선율을 만들고, 붓질 과정 재생은 실제로 그린 순서를 따라갑니다. 작품의 음악을 듣고 싶을 때와 그리는 과정을 다시 보고 싶을 때 각각 사용하세요.

마음에 드는 작품은 프리셋과 PNG로 남기세요

내 프리셋 슬롯은 세 개이며 브라우저에 저장됩니다. 다른 기기에서도 보관하거나 공유하고 싶다면 그림 저장 버튼으로 PNG를 내려받으세요. PNG 파일에는 소리가 포함되지 않습니다.


자주 묻는 질문

무료로 플레이할 수 있나요?

네. 게임 코드에는 결제 기능이나 유료 콘텐츠가 포함되어 있지 않습니다.

회원가입이 필요한가요?

아니요. 회원가입이나 계정 로그인 없이 바로 그리기를 시작할 수 있습니다.

모바일에서도 플레이할 수 있나요?

네. 손가락으로 캔버스를 드래그하고 도구와 색상 버튼, 슬라이더를 터치해 사용할 수 있습니다. 화면 너비에 따라 도구와 설정 패널이 재배치됩니다.

그림과 사용자 프리셋이 저장되나요?

네. 그림은 붓질 후 자동 저장되며, 사용자 프리셋은 현재 그림 저장을 눌러 세 슬롯 중 하나에 보관할 수 있습니다. 모두 현재 브라우저에만 저장됩니다.

색과 위치는 소리에 어떤 영향을 주나요?

색은 악기 음색을 선택하고, 캔버스의 위아래 위치는 음높이에 반영됩니다. 좌우 위치는 소리의 방향감에 반영되며, 도구와 붓질의 농도도 소리의 질감과 세기에 영향을 줍니다.

현재 그림 연주와 붓질 과정 재생은 무엇이 다른가요?

현재 그림 연주는 화면에 보이는 작품을 바탕으로 약 35초 선율을 만듭니다. 붓질 과정 재생은 그린 순서와 움직임을 다시 보여 주며, 각각 별도로 실행할 수 있습니다.

무한 반복은 어떤 기능인가요?

무한 반복을 켜면 현재 그림 연주와 붓질 과정 재생이 반복됩니다. 끄면 현재 진행 중인 재생을 마친 뒤 멈춥니다.

PNG 이미지에도 소리가 저장되나요?

아니요. PNG에는 종이와 그림만 저장되며 소리는 포함되지 않습니다.

인터넷 연결이 필요한가요?

블로그와 게임 파일을 처음 불러올 때는 인터넷 연결이 필요합니다. 게임이 로드된 뒤 그림과 소리는 브라우저에서 처리되며 외부 서버로 전송되지 않습니다.

새 종이를 누르면 저장한 프리셋도 삭제되나요?

아니요. 새 종이는 현재 캔버스의 그림을 지우지만 사용자 프리셋은 별도로 보관됩니다. 프리셋을 지우려면 해당 슬롯을 선택한 뒤 슬롯 비우기를 사용하세요.

브라우저 데이터를 삭제하면 어떻게 되나요?

자동 저장된 그림과 사용자 프리셋, 소리 설정이 삭제될 수 있습니다. 보관할 작품은 미리 PNG 파일로 내려받아 주세요.

소리가 나지 않으면 어떻게 하나요?

게임의 소리 설정과 전체 볼륨, 기기 음량을 확인해 주세요. 현재 그림 연주 버튼은 소리가 켜져 있어야 동작하며, 브라우저가 오디오 재생을 제한하면 화면을 한 번 직접 조작한 뒤 다시 시도해 주세요.

게임이 실행되지 않으면 어떻게 하나요?

페이지를 새로고침하고 최신 버전의 Chrome, Edge, Safari 또는 Firefox에서 다시 시도해 주세요. JavaScript와 iframe이 차단되지 않았는지 확인하고, 저장이 되지 않는다면 브라우저 저장 공간이 제한되었는지도 살펴봐 주세요.


제작자 노트

오디오 캔버스는 그림을 그리는 움직임이 곧 소리가 되는 경험을 만들기 위해 구성했습니다. 색과 높낮이를 바꿔가며 소리를 발견하고, 완성한 그림을 짧은 선율로 감상할 수 있도록 그리기와 음악 재생을 연결했습니다.

마우스·터치·키보드 입력과 반응형 캔버스, 실행 취소와 다시 실행, 자동 저장, 사용자 프리셋을 지원합니다. 외부 음원 파일 대신 브라우저의 오디오 기능으로 악기 느낌의 소리를 합성해 재생합니다.

업데이트 내역

현재 배포 중인 버전은 v1.0.0이며, 최초 공개일은 2026년 10월 10일입니다.

v1.0.0 — 2026년 10월 10일

  • 마우스·터치·키보드로 그리는 사운드 드로잉 캔버스
  • 붓·번짐 붓·연필·마커·분사 붓·지우개 6종
  • 색과 연결된 10가지 악기 음색 선택
  • 그림의 위치·색·농도를 바탕으로 약 35초 선율 연주
  • 붓질 과정 재생과 무한 반복 기능
  • 기본 그림 프리셋 3개와 사용자 프리셋 저장 슬롯 3개
  • 실행 취소·다시 실행 및 그림 자동 저장
  • 완성작 PNG 다운로드
  • 효과음·전체 음량·반복 설정 저장
  • PC·태블릿·모바일 반응형 화면

알려진 문제

  • 브라우저 저장 공간이 부족하면 그림이나 프리셋 자동 저장이 실패할 수 있습니다. 이때 중요한 그림은 PNG로 내려받아 주세요.
  • PNG 파일에는 그림만 저장되며 재생되는 소리는 포함되지 않습니다.
  • 시크릿 모드나 브라우저 데이터 삭제 후에는 저장된 작품과 설정이 유지되지 않을 수 있습니다.

현재 확인된 치명적인 실행 오류는 없습니다. 소리 재생은 브라우저와 기기의 오디오 설정에 따라 달라질 수 있습니다.

오류 제보 및 의견 보내기

게임 이용 중 문제가 발생했다면 다음 정보를 함께 남겨 주세요.

  • 사용한 기기와 운영체제
  • 사용한 브라우저와 버전
  • 문제가 발생하기 전에 수행한 행동
  • 화면에 표시된 오류 메시지
  • 가능한 경우 오류 화면 캡처
  • 플레이한 게임 버전

게임에 관한 오류 제보와 의견은 댓글로 문의해 주세요.

제작 및 기술 정보

  • 게임 기획·편집·검수: 상 스튜디오
  • 게임 구현: 생성형 AI 도구를 활용하여 제작
  • 반응형 화면 구성 및 최종 검수: 상 스튜디오
  • 글 작성·검수: 상 스튜디오
  • 대표 이미지: 생성형 AI 도구를 활용하여 제작
  • 외부 구성 요소: 외부 라이브러리·폰트·음원 사용 없음 (소리는 브라우저에서 합성)
  • 게임 서버 사용 여부: 게임 계산과 진행은 브라우저에서 실행
  • 개인정보 수집 여부: 게임 자체에서 개인정보를 수집하지 않음

게임 공유하기

재미있게 플레이했다면 친구에게 이 게임을 공유해 보세요.

본 게임은 생성형 AI 도구를 활용해 제작했으며, 운영자가 기획·편집·테스트 및 최종 검수를 진행했습니다.

함께 보면 좋은 글

답글 남기기

이메일 주소는 공개되지 않습니다. 필수 필드는 *로 표시됩니다