소개

ChordSticker 소개: 왜 만들었고, 어떻게 동작하는가

악보 사진에서 코드 기호를 찾아 기타 운지법 다이어그램을 얹어주는 도구 ChordSticker를 만든 배경, 실제 처리 구조, 현재의 한계와 개선 방향을 밝힙니다.

왜 만들었나

통기타로 반주를 하다 보면 이런 상황을 반복하게 됩니다. 악보 위에는 Cmaj7, F#m7b5, G/B 같은 코드 이름이 적혀 있는데, 그 코드를 어떻게 잡는지는 악보 어디에도 없습니다. 결국 연습 중에 휴대폰을 꺼내 코드를 검색하고, 흐름이 끊기고, 다시 악보로 돌아옵니다. 한 곡에 낯선 코드가 서너 개만 있어도 이 과정이 계속 반복됩니다.

합주 연습이나 레슨 현장에서는 더 번거롭습니다. 종이 악보를 나눠줬는데 초보자만 코드를 못 잡아서 진도가 멈추는 일이 자주 있습니다. 매번 손으로 코드표를 그려 넣기도 현실적이지 않습니다.

ChordSticker는 이 반복을 없애기 위해 만들었습니다. 악보를 사진으로 찍어 올리면, 악보에 적힌 코드 자리마다 운지법 그림을 붙여서 돌려주는 것. 목표는 이것 하나입니다.

무엇을 하는 도구인가

ChordSticker가 하는 일은 명확합니다.

  1. 업로드한 오선보 이미지에서 오선 다섯 줄 묶음(보표)을 찾습니다.
  2. 각 보표 위쪽의 코드 표기 영역을 잘라냅니다.
  3. 그 영역에 인쇄된 코드 이름 글자를 하나씩 인식해 코드 문자열로 조립합니다.
  4. 인식 결과를 화면에서 직접 고칠 수 있게 보여줍니다.
  5. 확정된 코드마다 6현 5프렛 운지법 다이어그램을 그려 원래 코드 글자 자리에 합성합니다.
  6. 완성된 이미지를 PNG로 내려받거나 바로 인쇄할 수 있게 합니다.

회원가입도, 설치도, 결제도 없습니다. 브라우저에서 파일 하나 올리면 끝입니다.

반대로, 하지 않는 일

ChordSticker는 음표를 읽어 멜로디를 추출하거나(OMR), 오디오에서 코드를 따거나, MIDI/MusicXML로 변환하지 않습니다. 이미 악보에 글자로 적혀 있는 코드 기호만 다룹니다. 코드 표기가 아예 없는 악보를 올리면 아무것도 붙지 않습니다.

어떻게 동작하는가

내부 동작을 숨기지 않고 밝히는 편이 결과를 이해하고 활용하는 데 도움이 된다고 생각합니다. 처리 과정은 크게 네 단계입니다.

1단계: 보표 찾기 (규칙 기반)

이미지를 가로줄 단위로 훑어 어두운 픽셀이 길게 이어지는 행을 찾습니다. 그런 행들을 묶어 후보 선을 만들고, 다섯 개의 선이 거의 일정한 간격으로 늘어선 묶음만 보표로 인정합니다. 간격 검사를 넣은 이유는 도돌이표, 가사 밑줄, 표 테두리 같은 것들이 오선으로 잘못 잡히는 일이 많았기 때문입니다.

2단계: 코드 표기 영역 잘라내기 (규칙 기반)

보표 바로 위쪽에서 글자로 보이는 픽셀 덩어리가 모여 있는 띠를 찾습니다. 이 띠의 높이에 상한을 두어, 가사 줄이나 다른 보표가 함께 끌려 들어오지 않게 합니다.

3단계: 코드 글자 인식 (YOLO 기반)

잘라낸 띠 안에서 글자 덩어리를 연결 요소 분석으로 분리한 뒤, 가로 방향으로 일정 폭 이상 공백이 생기는 지점을 기준으로 코드 단위를 나눕니다. 나뉜 조각을 일정한 크기의 흑백 이미지로 정규화해서 YOLO 기반 문자 검출 모델에 넣습니다.

이 모델은 단어를 통째로 읽는 대신 문자 하나하나를 위치와 함께 검출합니다. 인식 대상 문자는 다음과 같습니다.

검출된 문자를 x좌표 순으로 정렬해 이어 붙이면 Am7, Gsus4 같은 문자열이 나옵니다. 이때 대문자가 새로 나오면 새 코드가 시작된 것으로 간주해 분리합니다. 다만 바로 앞 문자가 /이면 분수 코드의 베이스 음이므로 분리하지 않습니다.

4단계: 다이어그램 렌더링과 합성

확정된 코드 이름을 근음과 접미어로 쪼개고, 내장된 코드 사전에서 운지 데이터를 찾습니다. 찾은 데이터로 6현 5프렛 격자를 그리고 X/O 마커, 너트선, 프렛 번호, 바레 바, 운지 점을 얹은 뒤, 원본 악보의 코드 글자 위치에 붙입니다.

코드 사전은 근음 12종(C, C#, D, Eb, E, F, F#, G, Ab, A, Bb, B)과 80종 이상의 접미어 조합을 담고 있습니다. 사전에 없는 표기는 몇 가지 정규화를 거칩니다.

기술 구성

구성 요소기술역할
웹 프런트엔드React 19, Vite업로드, 인식 결과 편집, 결과 표시
API 게이트웨이Node.js, Express파일 검증, 임시 저장, 서명 URL 발급
AI 분석 서버Python, Flask, Ultralytics YOLOv8보표 탐지, 코드 문자 인식
영상 처리OpenCV, NumPy, Pillow이진화, 연결 요소 분석, 다이어그램 렌더링
코드 사전JSON 데이터셋근음·접미어별 운지 포지션

보표 탐지와 글자 분리는 고전적인 영상 처리로, 글자 인식만 학습 모델로 처리하는 구조입니다. 전부를 딥러닝으로 처리하지 않은 이유는 두 가지입니다. 첫째, 오선과 글자 띠는 규칙성이 강해서 굳이 학습이 필요 없습니다. 둘째, 규칙 기반 부분은 결과가 이상할 때 왜 그런지 추적할 수 있습니다.

지금 못 하는 것들

도구의 한계를 미리 알고 쓰는 편이 훨씬 낫습니다. 현재 버전의 제약은 다음과 같습니다.

인식률을 실질적으로 끌어올리는 방법은 악보 사진 촬영 가이드에 따로 정리했습니다.

운영 원칙

업로드한 악보는 오래 두지 않습니다

원본 이미지는 AI 서버의 일회용 임시 디렉터리에서 처리된 뒤 즉시 삭제됩니다. 화면에 보여줘야 하는 결과 이미지만 게이트웨이에 임시 보관되며, 이마저도 서명된 주소로만 접근할 수 있고 보관 기간이 지나면 자동으로 지워집니다. 자세한 내용은 개인정보처리방침에 있습니다.

학습에 몰래 쓰지 않습니다

업로드된 악보를 모델 학습 데이터로 자동 수집하지 않습니다. 인식 품질 개선에 참고할 예시는 이용자가 직접 메일로 보내주신 것만 사용합니다.

확신 없는 결과는 붙이지 않습니다

애매한 인식 결과에 억지로 운지를 매칭하는 대신 건너뜁니다. 틀린 코드를 자신 있게 표시하는 것이 사용자에게 가장 나쁜 결과라고 보기 때문입니다.

결과는 반드시 사람이 검수해야 합니다

그래서 자동 변환 뒤에 바로 이미지를 내주지 않고, 중간에 편집 화면을 둡니다. 이 단계를 건너뛸 수 없게 만든 것은 의도적인 설계입니다.

앞으로의 계획

우선순위 순으로, 현재 검토 중인 항목입니다.

일정은 정해두지 않았습니다. 개인이 운영하는 프로젝트라 서버 비용과 시간이 허락하는 만큼 진행합니다.

만든 사람과 연락처

ChordSticker는 개인 개발자가 혼자 만들고 운영하는 비영리 성격의 프로젝트입니다. 사업자 등록 없이 개인 부담으로 서버를 운영하고 있습니다. 추후 에드센스 수익으로 서버 비용을 충당할 예정입니다.

기능 제안, 인식 실패 사례 제보, 오류 신고는 언제든 환영합니다. 특히 잘 안 되는 악보 사진을 보내주시면 개선에 직접적인 도움이 됩니다.