-->

피아노 건반으로 악보 만들기 초등 선생님과 아빠가 만든 무료 악보 편집기 (abcjs 기반)

선생님이 노트북으로 악보를 만드는 모습

초등학교 선생님 딸을 위해 아빠가 직접 만든 '피아노 건반 악보 메이커' 🎹

제 딸은 초등학교에서 학생들을 가르치는 선생님입니다. 수업 시간에 아이들에게 나눠줄 간단한 동요 악보나 계이름 자료를 만들 일이 종종 있는데, 매번 무거운 전문 악보 프로그램을 켜거나 일일이 손으로 그리는 모습이 참 번거로워 보였습니다.

외국 사이트들에 텍스트로 악보를 그리는 'ABC 표기법' 툴이 있긴 했지만, 키보드로 복잡한 코드를 쳐야 해서 비전공자가 쓰기엔 진입장벽이 무척 높았습니다. 그러다 딸이 "화면에 피아노 건반이 있어서 그걸 누르면 바로 악보가 그려지는 프로그램은 없을까?"라는 아이디어를 냈고, 그 말에 영감을 받아 딸과 함께 머리를 맞대고 이 프로그램을 직접 만들게 되었습니다.

🔒 안심하고 사용하세요! 이 도구는 외부 서버로 데이터를 전송하거나 개인정보, 쿠키를 일절 수집하지 않습니다. 입력하신 모든 악보 데이터와 재생 기록은 사용하시는 기기(컴퓨터/스마트폰)의 브라우저에만 안전하게 저장되니 안심하고 마음껏 사용하셔도 됩니다.

건반을 마우스나 터치로 누르기만 하면 실시간으로 악보가 그려지고, 직접 들어볼 수도 있으며, 완성된 악보는 깔끔한 이미지(PNG)나 PDF로 바로 다운로드할 수 있습니다. 스마트폰 화면에도 완벽하게 맞춰져 있으니 언제 어디서든 편하게 나만의 악보를 만들어보세요! (사용법은 우측 상단의 [❓ 도움말] 버튼을 누르시면 자세히 볼 수 있습니다.)

🎹 피아노 → 악보

건반으로 악보 만들기

🔒 개인정보나 쿠키를 수집하지 않으며, 모든 악보는 사용자 기기에만 안전하게 저장됩니다.

제목
조성
박자
♩=
조옮김
✨ 실시간 자동 적용
옥타브
0
+
C4–B4 · 키↑↓ 옥타브이동
음표 길이 현재: ⏱ 자동
기호 삽입
녹음 버튼 후 건반을 연주하세요
ABC NOTATION (z=쉼표, Z=마디쉼표)
악기 선택
🔎 줌 100%
📏 1줄 마디수
악보가 여기에 표시됩니다
✏️ 선택 음표: 건반 누르면 바로 교체 · Esc 닫기
길이
키보드 매핑 & 사용법
① 녹음/메트로놈 박자에 맞춰 건반 연주 → 악보 보기
② 되돌리기 단축키 Ctrl+Z (취소), Ctrl+Y (재실행) 지원
③ 재생 컨트롤러 오디오 적용 버튼 클릭 후 재생바를 통해 원하는 위치 탐색 가능
④ 저장/공유 PNG 이미지 저장, MIDI 파일 다운로드, 공유 링크 생성
⑤ 뷰어 조절 악보 줌 조절, 한 줄 마디수, 플로팅 창(실시간 편집) 기능 탑재
⑥ 숫자키 1~6 음표길이 고정  7=자동  8=32분  9=점8분
⑦ Z~B키 소문자 Z=4분쉼표 X=2분쉼표 C=8분쉼표 V=온쉼표 B=점4분쉼표
흰건반 A~L (도4~레5) · K=도5 · L=레5
검은건반 W=도#4 E=레#4 T=파#4 Y=솔#4 U=라#4 O=도#5 P=레#5
쉼표 Z=4분 X=2분 C=8분 V=온 B=점4분
음표길이 숫자키 1~9

📖 ABC 표기법 도움말

ABC 표기법으로 할 수 있는 주요 기능들을 정리했어요. 더 자세한 내용은 공식 문서를 참고하세요.

헤더 (곡 정보)

모든 곡은 헤더로 시작해요. 헤더는 대문자: 형태로 씁니다.

항목예시설명
X:X: 1곡 번호 (항상 첫 번째 줄)
T:T: 나비야곡 제목 (악보 위에 크게 표시)
C:C: 작자미상작곡가 (제목 오른쪽에 표시)
L:L: 1/4기본 음표 길이 (1/4=4분음표, 1/8=8분음표)
M:M: 4/4박자표 (4/4, 3/4, 6/8 등)
Q:Q: 1/4=120빠르기 (4분음표=120 BPM)
K:K: C조성 (헤더의 마지막 줄)
X: 1 T: 나비야 M: 4/4 L: 1/4 Q: 1/4=120 K: C c c g g | a a g2 |
💡 이 편집기에서는 위 헤더를 자동으로 생성해줘요. 상단의 제목, 조성, 박자, BPM 입력칸을 이용하세요!
음높이 (옥타브)

음표 이름은 알파벳으로 써요. 대문자는 낮은 옥타브, 소문자는 높은 옥타브예요.

표기음이름설명
C,도2대문자 + 쉼표 = 한 옥타브 더 낮게
C도3대문자 = 3옥타브
c도4 (가온도)소문자 = 4옥타브 (Middle C)
c'도5소문자 + 어포스트로피 = 한 옥타브 더 높게
c''도6어포스트로피 두 개 = 두 옥타브 더 높게
z쉼표쉬는 음 (길이는 같은 방식으로 지정)

임시표 (조표에 없는 변화음):

표기의미예시
^올림표 (샤프 ♯)^c = 도#4
_내림표 (플랫 ♭)_e = 미♭4
=제자리표 (♮)=B = 시♮3
💡 이 편집기의 건반을 클릭하면 자동으로 올바른 음표가 입력돼요!
음표 길이

음표 뒤에 숫자나 분수를 붙여 길이를 지정해요. L: 1/4 (4분음표 기준)일 때:

표기길이설명
c/// 또는 c/832분음표
c// 또는 c/416분음표
c/ 또는 c/28분음표
c4분음표기본값 (L: 1/4일 때)
c3/2점4분음표4분음표의 1.5배
c22분음표
c4온음표

쉼표도 동일한 방식: z=4분쉼표, z/=8분쉼표, z2=2분쉼표, z4=온쉼표

셋잇단음표: (3A B c → A, B, C 세 음을 2박에 나눠서

💡 이 편집기에서는 숫자키 1~9로 음표 길이를 미리 선택할 수 있어요!
마디줄 (Bar Lines)
표기의미
|일반 마디줄
|]끝 마디줄 (얇은-굵은 이중선)
||이중 마디줄 (얇은-얇은)
[|굵은-얇은 이중선
|:반복 시작 (도돌이표 시작)
:|반복 끝 (도돌이표 끝)
::반복 시작+끝 동시
|11번 괄호 시작
:|22번 괄호 시작
c d e f | g2 e2 |: c4 :| g2 f2 |1 e4 :|2 c4 |]
붙임줄 · 이음줄 (Ties & Slurs)
구분표기설명
붙임줄 (Tie)c-c같은 음 두 개를 이어서 하나처럼 (하이픈)
이음줄 (Slur)(c d e)다른 음들을 부드럽게 연결 (괄호)
(c d e f) g- g | (a g f e) d4 |
💡 붙임줄은 마디를 넘어갈 때도 사용할 수 있어요: c2- | c2 d2
꾸밈 기호 (Decorations)

음표 앞에 !로 감싼 기호를 붙여요.

표기의미
.스타카토 (짧게)
!fermata!페르마타 (늘임표 𝄐)
!p!여리게 (piano)
!mf!조금 세게
!f!세게 (forte)
!crescendo(!크레셴도 시작 (점점 세게)
!crescendo)!크레셴도 끝
.c .d .e .f | !f! g2 !p! e2 | !fermata! c4 |]

댓글 쓰기

0 댓글