BUFI의 새 보금자리

BUFI의 웹사이트가 새로워졌습니다. 목표는 하나였습니다. 제품을 실제로 쓸 때의 느낌 그대로, 이 제품이 필요한 사람들에게, 그들이 생각하는 언어로 보여 주는 것입니다.

#읽지 말고, 만져 보세요

대부분의 금융 사이트는 스크린샷을 보여 주고 나머지는 상상하라고 합니다. 저희 사이트는 실제로 작동하는 제품 조각들로 만들어졌습니다. 히어로의 워크스페이스 창은 실제 워크스페이스 레이아웃입니다. AI 섹션에서는 Bu의 시트를 열고, 컨트롤 메뉴를 넘겨 보고, 다이내믹 아일랜드를 끌어 볼 수 있습니다. 워크스페이스 카드는 팀이 하나에서 여러 개로 늘어나는 모습에 맞춰 눈앞에서 트리를 만들어 갑니다.

실제 자금은 전혀 건드리지 않습니다. 그래도 모든 것이 앱과 똑같이 작동합니다.

#첫날부터 12개 언어

영어, 스페인어, 포르투갈어, 프랑스어, 독일어, 이탈리아어, 네덜란드어, 튀르키예어, 인도네시아어, 일본어, 한국어, 중국어. 저희는 여러 나라를 오가며 사는 사람들을 위해 만듭니다. 그래서 국경 없는 돈에 대한 이야기를 번역해 읽게 하는 대신, 사이트가 그들의 언어로 다가갑니다.

#기능마다 소개 글이 있는 블로그

이제부터 모든 기능, 새로운 자산, 파트너마다 이곳에 따로 글을 올리고, 영상이 있으면 함께 소개합니다. 기능은 베타 환경에서 처음부터 끝까지 작동한 뒤에야 모두에게 공개되므로, 이 블로그는 실제로 운영 중인 기능의 기록이기도 합니다.

Discord, Telegram, X에서 소식을 받아 보시거나, 블로그 하단의 RSS 피드를 구독하세요.

#어떻게 만들었나

이 사이트는 스튜디오가 Awwwards 출품작을 만들듯이 만들었습니다. 한 장면씩 쌓아 올렸고, 모든 움직임이 그 자리에 있어야 할 이유를 갖도록 했습니다.

• 스크롤이 이야기를 들려줍니다. 페이지를 내려갈수록 섹션이 나타나고, 제자리에 고정되었다가 다음 섹션으로 이어집니다. 이야기가 한꺼번에 쏟아지는 대신 여러분의 속도에 맞춰 흘러갑니다.
• 실크. 배너 뒤에서 부드럽게 움직이는 천은 BUFI에 로그인할 때 보이는 것과 같은 애니메이션 배경이며, 브라우저에서 실시간으로 그려집니다.
• 반응하는 작은 디테일. 레이어는 커서를 따라 움직이고, Bu의 말풍선은 어디로든 끌어다 놓을 수 있으며, 코인은 회전합니다. 동작 줄이기를 켜면 모든 것이 멈춥니다.

#고마워요, basement

basement.studio와 그들의 오픈소스 라이브러리 scrollytelling이 없었다면 이 모든 것은 존재하지 않았을 것입니다. 스크롤에 따라 이 페이지가 움직이는 방식은 이 도구 덕분이며, 이를 구동하는 애니메이션 엔진을 만든 GSAP 팀에게도 감사드립니다. Motion과 three.js를 만든 분들, 그리고 자신의 창작물을 공개적으로 나누는 모든 분들께도 감사합니다.

basement는 저희에게 라이브러리 이상의 의미가 있습니다. 저희 창업자가 2024년에 Buenos Aires로 이주한 큰 이유 중 하나가 바로 그들의 작업이었습니다. 당시 이 도시에는 세계 최고 수준의 크리에이티브 JavaScript 개발자들이 모여 있었고, 저희는 그들 곁에서 만들고 싶었습니다. 이 사이트는 저희의 감사 편지입니다.

#그리고 라디오도

사이트에는 사운드 토글과 저희만의 로파이 방송국 BUFI Radio가 있습니다. 트레저리에 대해 읽는 동안 배경음악이 필요하신 분들을 위해서요. 직접 켜기 전까지는 모두 꺼져 있습니다.