4P by GN⁺ | ★ favorite | 댓글 1개
  • 드럼 머신 패턴을 빠르게 참고하려는 사용자에게 생성·탐색·검색·댓글 흐름을 한곳에 모은 공유 웹사이트임
  • 탐색은 장르·템포·드럼킷 기준으로 나뉘며 Breakbeat, Electro, Hip Hop, House, Rock, Techno 같은 장르 링크를 바로 찾을 수 있음
  • 각 패턴은 “How to make”식 배치 설명과 16비트 그리드를 함께 보여줘, 악기별 시퀀스를 눈으로 확인하기 쉬움
  • drum rolling, Oh Yeah, 8OBit - ElectroWerk66, 2 Step Chill 같은 예시에는 BPM과 변형 패턴 번호가 함께 붙어 있음
  • 사이트 하단 기준 8,000 patterns, 1,47,166 beats 규모라 드럼 패턴 레퍼런스와 공유 저장소로 활용 가능함

드럼 패턴을 만들고 찾는 기본 흐름

  • Drum Patterns는 “Discover & share drum machine patterns”를 표방하는 드럼 머신 패턴 공유 웹사이트임
  • 사용자는 패턴을 Create, Browse, Search할 수 있고, 댓글 페이지도 따로 있음
  • 계정 기능으로 RegisterLog in 링크를 제공함

장르·템포·드럼킷 중심 탐색

  • 패턴 탐색은 여러 기준으로 나뉨
    • Genre: Breakbeat, Electro, Electro Funk, Electro Pop, Hip Hop, House, Miami Bass, Pop, R&B, Reggae, Rock, Techno, Uncategorized
    • Tempo: 예시로 90 BPM 탐색 링크가 있음
    • Drumkit: 예시로 Roland TR-808 탐색 링크가 있음
  • 정렬 또는 모음 링크로 Recent, Popular, Liked, Discussed, Random을 볼 수 있음

패턴을 읽는 방식

  • 각 항목은 “How to make” 제목 아래에 단계별 제작 방법을 붙임
  • 단계 설명은 특정 악기를 특정 beat에 배치하는 방식임
    • 예: drum rolling은 snare drum을 4, 5, 13, 14 beat에 배치하고 high tom과 low tom을 추가함
    • 예: Oh Yeah는 bass drum, snare drum, closed hi-hat, clap 배치를 단계별로 보여줌
  • 패턴 본문은 악기 약어별 행과 X 위치로 구성된 시퀀스 그리드를 사용함
    • 예: CH, OH, CY, CB, CP, SD, BD 같은 행이 표시됨
  • 각 패턴에는 Play BPM 값과 패턴 변형 번호가 함께 붙어 있음

화면에 보이는 패턴 예시

  • drum rolling: 160BPM, snare drum과 tom 중심 패턴
  • oof lala: 90BPM, cowbell, maraca, clave, conga 배치를 포함함
  • Oh Yeah: 90BPM, bass drum·snare drum·closed hi-hat·clap 구성
  • Arpeggio Pattern: 90BPM, bass drum과 conga 계열을 반복적으로 배치함
  • 8OBit - ElectroWerk66: 129BPM, 1~6번 변형 패턴을 제공함
  • 2 Step Chill: 90BPM, 1~5번 변형 패턴을 제공함

등록 규모와 항목 정보

  • 사이트 하단 기준 등록 규모는 8,000 patterns, 1,47,166 beats
  • 패턴마다 작성자 링크, 카운트 값, 댓글 수로 보이는 숫자가 함께 표시됨

댓글과 토론

Hacker News 의견들
  • Funklet이 떠오름. Jack Stratton(Vulfpeck)과 Rob Stenson이 오래전에 만든 것인데, 펑크와 미디 드럼을 좋아하면 진짜 보석 같은 도구임
    https://goodhertz.com/funklet/
    • 백비트, 드럼 사운드, 그리고 리버스 신호 같은 걸 만지다 보면 꽤 펑키한 느낌이 남
  • 몇몇 패턴을 Glicol로 옮겨보고 싶음: https://glicol.org/
    한 가지 제안은 https 지원임
    • 드럼 패턴을 보는 것처럼 보안이 필요 없어 보이는 것에도 왜 요즘 https에 집착하는지 궁금함
    • Glicol이 헷갈렸는데, 데스크톱 버전 사이트가 모바일보다 훨씬 많은 정보를 보여준다는 걸 알고 이해됨
      적어도 Android용 Chrome에서는 데모 재생 선택과 GitHub 링크 클릭만 가능했고, GitHub는 glicol.org 방문을 권해서 왜 다들 Glicol을 좋아하는지 의문이었음
      Sonic-Pi의 몇몇 기능이 좋아서 IDE 같은 기능을 추가할 계획이 있는지도 궁금함. VS Code 플러그인을 만들려는 시도도 보였음
    • SSL 인증서를 다시 생성해야 했고, OVH에서는 완료됐다고 하지만 적용되기까지 시간이 좀 걸릴 듯함
  • 셋잇단음표를 지원해주면 좋겠음. 기본 셔플이 없으면 큰 부분을 놓치는 셈임
    정렬에 대한 다른 의견에도 동의함. 심벌은 위, 스네어와 탐은 가운데, 베이스와 다른 페달은 아래가 좋음
    hh |x-x-x-x-x-x-x-x-|
    S |----o-------o---|
    B |o-------o-o-----|
    • CH, OH, CY, CB, MA, CL, HC, MC, LC, SD, BD, AC 순서면 괜찮은지, 아니면 더 조정이 필요한지 궁금함
      셋잇단음표 지원은 곧 들어갈 예정임
    • 3x16 패턴을 만들고 4x12처럼 해석하면 각 박자가 세 단계가 되므로 가능해 보임
  • iOS 사용자는 소리를 들으려면 작은 측면 토글로 무음 모드를 꺼야 한다고 알려주면 좋겠음
    iOS 특유의 동작이라 알아내는 데 정말 몇 년이 걸렸고, 그전에는 Web Audio API를 지원하지 않는 줄 알고 넘겼음
    • 개발자라면 `` 요소로 백그라운드에서 무음 오디오를 재생할 수도 있음: https://github.com/donbrae/onscreen-piano-keyboard/blob/main...
      이렇게 하면 ‘무음’ 스위치가 켜져 있어도 Web Audio API가 소리를 냄
    • 하드웨어 슬라이드 토글을 말하는 건지 궁금함. iOS가 올라간 iPad에서는 무슨 방법을 써도 소리가 안 나고, iPad에는 음소거 토글도 없음
    • 조언이 없었다면 볼륨만 만지다가 포기했을 텐데 도움이 됐음
      이 웹 앱은 아이디어와 구현 모두 부러울 정도로 멋짐
  • 몇 년 전에 만든 리듬 시각화 도구가 조금 떠오름
    https://michaelmior.github.io/rhythm-wheel/
    • 만져보는 재미가 큼. 버그를 찾은 것 같은데, https://imgur.com/BRwst17 이 설정에서는 킥이 초록색이 아니라 빨간색에서 트리거되는 듯함. 착각인지 모르겠음
    • 리듬을 보여주는 방식이 정말 멋짐
  • PWA 지원을 추가해서 모바일 앱처럼 설치할 수 있게 해주면 좋겠음
    manifest.json 파일만 추가하면 돼서 아주 쉽고, 여기서 생성할 수 있음: http://pwabuilder.com/
    드럼 키트를 더 추가할 계획이 있는지도 궁금함. 아니면 HN에서 헤더 색을 바꾸듯 사용자가 자기 샘플을 로컬에 저장해 쓰게 할 수도 있어 보임
    • PWA는 할 일 목록에 추가했음
      다른 드럼 키트는 할 일 목록 최상단에 있고, 지금은 Yamaha RX5Oberhiem DMX를 작업 중임. 하루이틀 안에 제공될 듯함. 추천할 드럼 머신이 있으면 궁금함
  • 괜찮은 사운드를 가진 독립형 Android 드럼 머신이 있음. 패턴을 옮길 수 있는지는 모르겠음
    Drum On이고 apk가 작음
    https://f-droid.org/en/packages/se.tube42.drum.android/
    • 이런 보석 같은 앱이 있는 줄 몰랐음. 인터페이스는 조금 투박하지만 제 역할은 함
  • https://drumpatterns.onether.com/doofusbeatz666s-yowzah-2/
    이건 제대로 꽂힘
  • 사이트가 좋음
    아직 안 보인 피드백을 하나 덧붙이면, iPhone 문제일 수 있지만 시각 요소가 오디오보다 4분의 1박 정도 앞서 보임. 60 BPM 기준으로 약 200~250ms 어긋남
    큰 문제는 아니지만 살짝 어색하게 느끼기엔 충분함. iPhone Safari의 오디오 특성일 수도 있음
  • 가지고 놀기 좋았음. 만드는 데 얼마나 걸렸는지 궁금함
    비슷한 프로젝트 몇 개에 참여해봤는데, TypeScript와 Next.js를 썼고 생각보다 훨씬 오래 걸려서 놀랐음
    • 전체적으로는 아마 3~4주 정도 걸렸지만 몇 달에 걸쳐 나눠 작업했음
      웹 아카이브된 808.pixll.de용 맞춤 크롤러를 만들고, 크롤링한 데이터에서 패턴을 추출하는 도구를 만들었음. 그다음 패턴 플레이어를 작업했고 마지막으로 웹사이트를 만들기 시작함
      원래는 사이트를 처음부터 만들 계획이었지만 결국 WordPress를 쓰기로 했음. 이미 사이드 프로젝트가 너무 많음 :)