스크롤 시 페이지를 따라 내려가는 Scroll Bar Buddy 개발

 (focusfurnace.com)
1P by GN⁺ | ★ favorite | 댓글 1개
  • Scroll Buddy는 기존 스크롤바를 페이지 옆을 걷는 애니메이션 캐릭터로 바꿔, 스크롤 자체를 작은 인터랙션으로 만드는 첫 프로토타입임
  • 현재 구현은 스크롤 위치에 맞춰 위아래로 움직이는 막대 인간 형태이며, 지루한 스크롤바를 재미있는 장식 요소로 바꾸려는 실험임
  • 다음 후보로 skateboarder, rock climber, squirrel이 제시됐고, 다른 캐릭터 아이디어도 받고 있음
  • 웹사이트에 적용하고 싶은 사용자를 위한 신청 폼이 제공됨
  • 페이지 측면 예시는 움직임이 있어 전정기관성 멀미가 있는 독자에게 부담이 될 수 있으며, reduce motion 설정이 켜진 대부분의 브라우저에서는 숨겨져야 함

스크롤바를 캐릭터로 바꾸는 프로토타입

  • Scroll Buddy는 스크롤바를 단순한 UI 요소가 아니라, 스크롤할 때 페이지 옆을 따라 움직이는 애니메이션 캐릭터로 바꾸는 실험임
  • 첫 프로토타입은 사용자가 스크롤할 때 위아래로 걷는 막대 인간 캐릭터를 사용함
  • 이후 버전 후보로 skateboarder, rock climber, squirrel 같은 다른 형태의 Scroll Buddy가 있음

웹사이트 적용 신청

움직임에 대한 접근성 주의

  • 페이지 측면의 임베디드 예시는 애니메이션과 움직임을 포함함
  • 전정기관성 멀미가 있는 독자는 애니메이션을 보기 전에 기기의 reduce motion 기능을 켜는 것이 권장됨
  • reduce motion 설정이 켜져 있으면 대부분의 브라우저에서 Scroll Buddy가 숨겨져야 함

구현과 페이지 구성 단서

  • 페이지에는 simple javascript로 만들었다는 섹션 제목이 있음
  • 이후 본문 대부분은 스크롤을 만들기 위한 lorem ipsum 더미 텍스트임

함께 보면 좋은 글 β

GN⁺   [-]
Hacker News 의견들

  • 좋네요! 아직 코드로 만들진 않았지만, 낙하산 탄 햄스터 아이디어가 있었음
    페이지 아래로 천천히 떨어지다가 빠르게 스크롤하면 낙하산을 펼쳐 다시 뷰포트 바닥에 착지하고, 마우스를 올리면 “Top” 팻말을 들고, 클릭하면 제트팩으로 위로 날아간 뒤 화면이 맨 위에 닿을 때 다시 낙하산을 펼쳐 부드럽게 내려오는 식

    • 이제 이걸 갖고 싶어짐. 왠지 햄스터가 Go 언어의 gopher랑 비슷하게 생겼을 것 같음, 물론 파란색은 아니고
    • 저장소 링크 기다리는 중. 햄스터가 너무 빨리 스크롤하면 낙하산을 다시 못 펼쳐서 사용자가 “패배”하는 포크를 추가하겠음
      스크롤을 억제하는 데 도움이 될지도?
    • https://gist.github.com/iamtomek/5d4a30c1a6765d695950c777e38...
      면책: 한 줄도 직접 쓰지 않았고, Claude 3.7을 Kagi assistant로 써서 한 대화 안에서 10번 정도 수정해 만든 것임. 프롬프트에 이모지를 붙여 넣은 정도가 전부임
      HTML과 JS로 의미 있는 걸 코딩해 본 적은 없음
      수정: AI 얘기가 그렇게 많은 곳에서 작동하는 AI 생성 코드를 붙였더니 처음 받은 게 비추천이라는 게 좀 웃김. 햄스터보다 AI를 미워하는 쪽을 더 좋아하는 듯
    • 위로 스크롤할 때는 제트팩/로켓 햄스터가 나오면 좋겠음

  • 이런 건 사용자가 prefers-reduced-motion을 설정했으면 비활성화하는 게 맞아 보임
    https://developer.mozilla.org/en-US/docs/Web/CSS/@media/pref...
    적절할 때 캐릭터를 숨기려면 CSS 규칙 하나만 추가하면 됨:
    @media (prefers-reduced-motion) { #scrollBuddy { visibility: hidden; } }

    • 작성자가 이걸 구현한 듯함. 이제 나 같은 사람은 의미 없는 lorem ipsum 페이지만 보게 됨
      데모는 이런 필터에서 예외여도 된다고 봄, 특히 명확한 링크를 통해서만 들어갈 수 있다면 더더욱
      사라지게 만든 같은 코드가 “왜 비활성화됐는지” 안내 문구도 추가할 수 있었을 것임. 내 경우는 Apple Menu > System Preferences > Accessibility > Display > Reduce motion 때문이고, 다른 OS는 https://developer.mozilla.org/en-US/docs/Web/CSS/@media/pref... 참고
      이 설정은 macOS의 작은 애니메이션을 없애서 더 빠릿하게 느끼게 해 줌. 이 댓글이 아니었다면 웹사이트에도 영향을 준다는 걸 몇 년 동안 모르고 지냈을 것
    • 아마 내가 “동작 줄이기”를 켜 둔 정확한 이유가 이런 종류일 텐데, 이번 구현은 꽤 무해해서 아쉽긴 함
    • 사이트 작성자가 이 댓글을 보지 않았으면 좋았겠음. 왜 어떤 브라우저에서도 안 보이는지 이해하는 데 한참 걸렸음
    • 잘 짚었음. 해당 설정을 켠 사용자에게는 이제 고쳐졌을 것임

  • 왜 아무도 이걸 Stroll Bar라고 불러야 한다고 안 했지?

    • 아쉽게도 그 이름은 이미 쓰이고 있어서 scrollbuddy.com을 샀고, 사람들이 곧 구현할 수 있게 준비할 예정임

  • 지루한 스크롤바 대신, 스크롤할 때 페이지 옆을 위아래로 걷는 애니메이션 막대인간이 있으면 재미있을 것 같았음
    이게 첫 프로토타입임
    다음에는 스케이트보더, 암벽등반가, 다람쥐를 만들 생각인데, 또 어떤 스크롤 친구를 만들면 좋을까?

    • 두 명이 레일카를 펌프질하는 모습
      또는 스크롤바 손잡이를 젓는 사람들, 손잡이가 길수록 노 젓는 사람이 많아지는 식
    • 몇 주 전에 이런 애벌레 버전을 봤음 -> https://x.com/trunarla/status/1893705260142657764
    • 아주 멋진 아이디어임. 제안하자면, 캐릭터가 뒤로 빵부스러기 흔적을 뿌리고 올라갈 때는 다시 주워 담거나 화면 밖으로 차내면 좋겠음
    • 이걸 ‘혁신’할 첫 두 아이디어는 페이지 아래로 달리는 자동차, 또는 드래그 레이싱 크리스마스 트리처럼 조명이 ‘풀 트리’ 방식으로 카운트다운하는 것이었음
    • 빗방울은 어떨까? 어릴 때 장거리 차 안에서 빗방울 경주 응원해 본 사람 없나?
      뉴턴 머리 위로 떨어지는 사과도 좋겠음
      생각하는 것만으로도 재밌음

  • 이걸 물어보려는 사람이 나뿐인 것 같아 놀랐는데, 대체 왜 구현 방법을 Google Form 뒤에 숨겨둔 건가?
    수정: 구현 세부사항은 사실 DOM에서 바로 접근 가능함. 이메일을 주고 싶지 않은 사람들을 위해 관련 내용을 뽑아낸 gist를 만들었음:
    https://gist.github.com/brysonreece/b15f33cda30af06b7b70788d...

    • 이해가 안 됨. 글을 쓰고 공유하기 싫은 건 그렇다 쳐도, 그걸 제공하는 대가로 이메일 주소 수집을 하겠다는 건 너무 이상함
    • 현재 상태로는 명시적 라이선스가 없는 코드는 사용할 수 없음. 올린 코드에도 라이선스가 없지만, 작성자에게 연락하면 받을 수도 있음
      링크된 코드를 쓰면 저작권 침해가 될 수 있음
    • 작업에 대한 대가를 돈이 아니라 관심으로 받으려는 것임. 꽤 합리적으로 보임

  • 내가 뭘 놓친 거지? Firefox와 Chrome 둘 다 스크롤바 말고는 아무것도 안 보임
    내가 설정한 사용자 지정 스크롤바 색상 때문인가?

    • OS에서 동작 줄이기를 켜 둔 것 아닌가? 그 설정을 존중해서 캐릭터가 비활성화됨
    • 아마 이것 때문일 수도 있음: https://news.ycombinator.com/item?id=43237747
    • Android Firefox와 Android Chrome에서는 안 보이고, Windows Chrome에서는 보임
    • 나도 같음, 아무 일도 안 일어남

  • 90년대 후반에 사람들이 웹사이트에 눈 내리는 효과나 마우스를 따라다니는 불꽃 꼬리 같은 시각 효과를 넣던 때가 떠오름

    • 맞음, DHTML Zone이 사용자의 브라우저를 마비시키는 몽환적 시각 효과를 가져다 쓰는 대표 장소였음. 웹사이트를 엄청 멋지게 보이게 하려고
    • 이제는 iOS 18의 iMessage도 떠올릴 수 있음. 방금 업그레이드했는데 새 이모지와 텍스트 효과에서 2000년대 감성이 느껴졌음

  • 이런 프로젝트는 옛 인터넷을 떠올리게 해서 좋음

    • 누군가 그냥 재미있고 멋진 걸 해 보려고 만든 느낌이라 같은 반응이었음
    • marquee를 더 많이!
    • 옛 HN 같음!

  • 왜 이게 Google Form 뒤에 있는 거지...? 이메일 주소를 수집하기 전에는 어떻게 생겼는지 스크린샷조차 없음
    이런 글이 프런트페이지에 오른 게 이상함

    • 그냥 페이지에 머물러 있으면 됨. “Get a scroll buddy for your website” 링크를 누르지 않으면 됨
    • 링크된 페이지에서 미리보기는 보이지만, 그래도 사용 방법을 이메일로만 받을 수 있다는 건 이상함
    • 그렇지 않음. 페이지를 열었더니 잘 작동했음
      아마 CSS를 비활성화했거나, 스크롤바 옆 구현을 놓친 듯함. 다른 댓글들을 확인해 보면 됨

  • 재미있고 영리함
    내가 개발자라면 위로 스크롤할 때 막대인간이 뒤로 움직이면서 문워크를 하는 버전을 만들 것임

    • 좀 둔한 질문일 수 있는데, 개발자가 아닌데 어떻게 HN에 오게 됐는지 궁금함
답변달기