Shopify 실시간 대시보드

 (bfcm.shopify.com)
2P by GN⁺ | ★ favorite | 댓글 1개
  • Shopify는 Black Friday Cyber Monday 기간의 전 세계 쇼핑 흐름을 실시간 통계로 보여주는 라이브 대시보드 경험을 제공함
  • Shopify x Black Friday 2025 구성은 2025년 Black Friday 쇼핑 활동을 지구본 형태의 시각화로 보여주는 데 초점을 둠
  • 제공 정보의 핵심은 Shopify 상점에서 발생하는 글로벌 쇼핑 통계를 실시간으로 확인할 수 있다는 점임
  • 이 경험은 WebGL 지원 브라우저가 필요해, 일부 브라우저나 제한된 환경에서는 바로 볼 수 없을 수 있음
  • WebGL을 사용할 수 없는 환경이라면 라이브 시각화 접근이 막히므로 브라우저 호환성 확인이 먼저 필요함

Black Friday Cyber Monday 라이브 쇼핑 시각화

  • Shopify의 bfcm.shop 페이지는 Black Friday Cyber Monday 기간의 글로벌 쇼핑 통계를 실시간으로 보여주는 경험을 제공함
  • 페이지 제목은 Shopify x Black Friday 2025: Watch The World Shop Live임
  • 소개 문구는 Shopify에서 이번 Black Friday Cyber Monday의 실시간 글로벌 쇼핑 통계에 접근할 수 있다고 안내함

WebGL이 필요한 실행 환경

  • 페이지 본문은 이 경험을 보려면 WebGL 지원 브라우저를 사용하라고 안내함
  • WebGL을 지원하지 않는 브라우저에서는 라이브 경험을 볼 수 없다는 조건이 명시돼 있음

함께 보면 좋은 글 β

GN⁺   [-]
Hacker News 의견들

  • 지난 10년 동안 BFCM 대시보드를 만들어 왔고, 이제 Shopify에서 가장 재미있는 프로젝트이자 전통이 됨
    인터넷 소프트웨어 회사를 운영한다는 건 꽤 추상적인데, 이런 시각화를 보면 여기서 일하는 사람들에게도 훨씬 더 실감남
    올해는 재미있는 디테일을 많이 넣었음(https://twitter.com/Shopify/status/1728040379163771020). 어떤 스토어가 첫 판매를 달성하면 폭죽이 보일 수 있고, GPT-4로 일부 생성한 도시 통계도 많음. 데스크톱에서는 nerd 메뉴를 열어 설정을 바꾸고, 만든 결과를 링크로 공유할 수도 있음

    • BFCM이 잘 알려진 약어인지 궁금함. Black Friday 관련이라는 건 알겠지만 CM이 뭔지 모르겠고, 어디에도 풀어 쓴 표현이 안 보임
    • 멋진 작업임. 개발 과정을 블로그 글로 풀어주면 좋겠음
    • 왜 Jerusalem, Israel 검색이 막혀 있는지 궁금함

  • 그런데, 그런데… Rails는 확장 안 된다면서!!!!!

    • 농담은 그렇다 치고, Shopify의 인프라를 더 알고 싶음
      이렇게 엄청난 부하 유입을 처리하는 방식이 꽤 대단함
    • 실제 힘든 일은 Java/Go/Rust 같은 게 하고 있을 수도 있음
    • 이 페이지는 그 질문에 답하지 못함. 이를 처리하는 데 서버가 몇 대 쓰이는지 나오지 않기 때문임
    • 대시보드상 지금 분당 2.5만 주문 정도, 즉 약 400건/초임
      최신 서버라면 이 정도를 처리하는 데 사용률 1%에도 못 미쳐야 할 수준임

  • 세계의 부가 얼마나 집중되어 있는지 놀라움

    • 시간대도 요인일 수 있음. 그리고 Black Friday는 원래 미국 현상으로 시작해 수출된 것임
      라틴아메리카에서 얼마나 많이 받아들였는지 놀랐음. 예를 들어 Mercado Libre 목록[0]의 아무 나라나 골라도 Black Friday를 진행함. “Viernes Negro”가 아니라 실제로 “Black Friday”라는 단어를 씀

      [0] https://mercadolibre.com/

    • 무엇보다 Shopify가 어느 나라에 가장 많이 퍼져 있는지를 보여주는 것 같음

    • Black Friday는 대체로 미국 문화이고, 미국 기업들이 이를 유럽으로 수출하려고 한 것임

    • 내가 본 시점(그리니치 표준시 18:00쯤)에는 영국 트래픽이 유럽 다른 지역보다 훨씬 많아서 흥미로움
      이미지 참고: https://i.imgur.com/2Les0QX.png

      Brexit이 이유라고 봐도 안전할까?

    • 반대로 보면 세계의 다른 지역이 얼마나 부패했고 반자본주의적인지도 말할 수 있음
      독재자들은 지배받는 사람들이 잠재력을 발휘하길 원하지 않음. 그렇게 되면 현상 유지와 자신들의 지위가 위협받기 때문임

  • “Carbon Removed” 통계의 기준이 뭔지 궁금함

    • 웃기긴 함. Shopify가 쉽게 만든 불필요한 소비 때문에 추가된 탄소라고 해야 할 것 같음

    • https://www.shopify.com/climate/bfcm 대시보드에서 해당 통계를 클릭하면 나오는 링크임

      All orders made through our platform over the Black Friday Cyber Monday shopping weekend will ship carbon neutral.

      Here's how it works: A rigorous formula built by Shopify data scientists calculates the estimated carbon emissions for each Black Friday Cyber Monday shipment. We then team up with Shopify Sustainability Fund partners to remove CO2 emissions equal to the BFCM shipping footprint.

      The result? You can ensure carbon-neutral shipping on all of your BFCM orders.

    • 기본적으로 다른 누군가에게 돈을 내고 “탄소 제거”를 하게 한 뒤, 그 마법 같은 숫자를 여기에 넣는 것임

    • 이 스레드와 다른 곳에서 Carbon Removed 통계에 대한 비판이 많은데, 그냥 이 정도 규모의 회사가 뭔가를 한다는 이유로 비판만 하기보다 어떻게 더 잘할 수 있는지 제안하는 생산적인 비판을 더 보고 싶음
      개인적으로는 실제로 배송 탄소 제거량을 두 배로 상쇄하는 게 아니라면 carbon removed라고 부르지 않았으면 함. 그리고 Shopify가 직접공기포집 파트너들에게서 전부 구매하는 게 아니라면, offset이라고 부르는 편이 맞음

    • 회사 웹사이트에 넣기 좋은 멋진 요소임

  • Shopify는 Ruby on Rails 모놀리스와 몇 개의 Go/Rust 서비스로 이 규모까지 확장해 왔음
    인상적임

  • 정말 멋지고, Stripe 쪽 것과 달리 브라우저가 죽거나 기기에서 버벅이지 않음
    도시 정보는 좋은 추가 요소지만, 추천 목록에는 뜨는데도 내가 검색한 대부분의 도시는 데이터가 충분하지 않아 짜증남. 그래도 커스터마이즈 옵션은 가지고 놀기 재미있고, 특히 airplane mode가 좋은 디테일임

  • 실제 결과물도 인상적이지만, 이게 2016년 iPhone SE에서 부드럽게 돌아간다는 점이 더 놀라움

  • 프런트엔드 지구본 렌더링에는 어떤 라이브러리를 썼는지 궁금함
    Chrome 브라우저에서 꽤 빠르고 버벅이지 않음

    • three.js 위에 만든 React 라이브러리인 React Three Fiber로 처음부터 만들었음. 아주 강력한 프레임워크임
      몇 주 안에 전체 기술 분석을 올릴 예정임
    • three.js일 것 같음
      아마 이런 것과 비슷할 듯함: https://github.com/vasturiano/three-globe

  • 지구본 자체를 빼면 이 애니메이션에서 움직임 대부분은 “sales per minute”, “unique shoppers”, “orders per minute”, “carbon removed” 숫자가 바뀌면서 숫자가 정신없이 튀는 효과임
    실제로 이 숫자들은 10초에 한 번만 갱신되는데, 바빠 보이게 하려는 이유 말고는 아무 의미 없이 10초 중 8초 동안 숫자가 뒤섞임

    그러지 말아야 함

    정보를 왜곡하지 말고, 읽기 어렵게 만들지 말고, 중요하지 않은 것에 사용자의 시각적 주의를 낭비하지 말아야 함. 의미 있는 것에 써야 함

  • 와, 이 커스터마이즈는 엄청남
    airplane mode로 날아다니면 전쟁터처럼 보임

답변달기