Hacker News 의견

• Sheet music 소프트웨어 개발자로부터 CSS 그리드를 이용한 악보 렌더링 방식에 대해 찬사가 있음
  • Soundslice라는 웹 기반 악보 렌더링 서비스를 10년 넘게 개발해 왔으며, 2014년에 최초로 "반응형" 웹 악보 렌더링을 구현했음
  • 관련 기술 상세 내용은 발표 영상 링크 참고: https://www.youtube.com/watch?v=XH5EtQge_Bg
  • Soundslice의 반응형 악보 예시 링크: https://www.soundslice.com/slices/zzNlc/
  • 웹 기반 편집기, 연습 기능, 사진/PDF에서 악보 데이터 추출하는 스캔 기능 등 다양한 툴을 제공함
  • CSS 그리드 방식은 가벼운 프로젝트에는 유용할 수 있지만, 풀 스코어의 복잡하고 미묘한 표현을 다 구현하기는 어려울 것임
• JavaScript 없이 CSS만으로 구현할 수 있도록 CSS 커뮤니티에 제안해보는 것도 좋을 듯함
  • 예를 들어 줄바꿈 시 음자리표 반복 표시는 sticky table header와 유사한데, 악보 외에도 활용될 수 있음
• CSS의 attribute selector([...]) 문법이 인상 깊었음. 예: .stave > [data-pitch^="A"][data-pitch$="5"] { grid-row-start: A5; }
• 음악 조판사 입장에서는 시각적으로 개선이 많이 필요해 보임. CSS만으로는 정밀도에 한계가 있어 어려울 듯함
  • 음표 기둥, 활, 붙임줄 등의 표현에 문제가 있음
  • 대부분의 브라우저 악보는 SVG나 Canvas로 벡터 렌더링하여 핀포인트 정밀도를 구현함
  • CSS 외에 이미 Soundslice, Sibelius Cloud Publishing 등 브라우저에서 스케일러블한 악보를 구현하는 다른 도구들이 있음
• 처음에는 CSS로 악보를 표현하는 게 잘 안 될 것 같았는데, 간단한 방식으로 타이포그래피 품질이 인상적임. 작성자에게 찬사를 보냄
  • 다만 화음, 8/16분음표 간격, 파트 간 정렬 등 특수한 경우 잘 작동할지 우려됨. Lilypond는 이런 복잡한 표현에서 유연성이 입증됨
• CSS 그리드가 흥미로움. 예전에 가구 디자이너를 pure frontend JS로 CSS 그리드 활용해 구현한 적 있음: https://alnvdl.github.io/2023/01/07/designing-furniture-using-the-css-grid.html
• <scribe-music> 커스텀 엘리먼트도 기대됨
  • 몇 년 전 인턴이 VexFlow를 웹 컴포넌트로 래핑한 프로젝트 진행했었는데 유지보수 안 됨: https://github.com/PolymerLabs/vexflow-elements/blob/web-components/demo/index.html
  • 잘 관리되고 사용하기 쉬운 라이브러리가 웹 음악 표기법에 큰 도움이 될 것임
• Lilypond(lilypond.org)의 대안이 나온 것은 좋지만, 표기법이 매우 복잡해서 간결성의 이점은 오래가지 않을 듯함
  • Asciidoc 매니아라면 Lilypond를 Asciidoc 툴체인에 통합하기 쉬움. DocBook PDF 파이프라인에서 사용 중이며, 출력물이 꽤 괜찮음. TeX과 유사함
• https://www.musicxml.com과 https://opensheetmusicdisplay.org 를 상기시켜 줌. 훨씬 큰 비용이 들지만 완전한 솔루션임
• Impro-Visor(https://github.com/Impro-Visor/Impro-Visor)의 어설픈 악보 기능을 이것으로 대체할 수 있을지 궁금함
• CSS 벤치마크 같은 느낌