메인 콘텐츠로 건너뛰기

Flipster가 24시간 연중무휴 암호화폐 시장에서 속도, 확장성, 안정성을 위해 디자인하는 방법

Flipster 거래 플랫폼 모바일 앱

Flipster는 트레이더에 의해, 트레이더를 위해 구축된 글로벌 암호화폐 거래 플랫폼입니다. 세계적인 퀀트 트레이딩 기업의 팀이 설립한 이 플랫폼은, 깊이 있는 시장 전문성과 24시간 연중무휴 시장을 위해 설계된 고성능 인프라를 결합했습니다.

Flipster는 전 세계 약 200개 시장에 걸쳐 수백만 명의 사용자에게 서비스를 제공하며, 고객 자산 규모가 2억 3천만 달러 이상으로 역대 최고치를 기록했습니다. 이 회사는 완전 원격 글로벌 팀으로 운영되며 무기한 선물, 현물 시장, 수익형 상품, Web3 기능 전반에 걸쳐 제품군을 지속적으로 확장하고 있습니다.

팀 규모가 230명을 넘어서면서, Flipster는 배포 속도를 따라갈 수 있는 시스템이 필요했습니다. 플랫폼은 서비스하는 시장의 속도에 맞춰 움직입니다. 매주 새로운 기능을 출시하고, 1~2일 이내에 핫픽스를 배포합니다. 이로 인해 익숙한 도전 과제가 형성됩니다. 바로 스타트업 수준의 민첩성을 유지하면서 엔터프라이즈급 안정성, 일관성, 확장성을 제공하는 것입니다.

이에 대응하기 위해 Flipster는 제품 디자인 및 실행을 위한 단일 진실 공급원으로 Figma 엔터프라이즈를 도입했습니다. 팀은 이제 Figma를 핵심 인프라로 사용하여 글로벌 규모의 빠른 반복 개선을 지원하는 통합 디자인 시스템을 구현하고 있습니다.

Flipster는 AI 기능 탐색, 커스텀 플러그인 개발, 핸드오프 시간 40% 단축, 지역별 현지화 간소화를 통해 전 세계 운영 일관성을 강화하며 Figma 엔터프라이즈로 실현 가능한 것의 한계를 계속 확장하고 있습니다.

암호화폐 업계에서는 모든 것이 국경을 넘어 빛의 속도로 움직입니다. Figma는 우리의 단일 진실 공급원이 되었습니다. 디자인부터 엔지니어링, 현지화에 이르기까지 분산된 팀들이 정렬을 유지하는 곳입니다. 사용자들이 암호화폐에 기대하는 것과 같은 투명성과 신뢰를 제공하지만, 이는 우리가 제품을 만드는 방식에 적용됩니다.

Christian Park, 디자인 리드, Flipster

도전 과제: 세계에서 가장 변동성이 크지만 널리 퍼져 있는 고객들을 위한 서비스 제공

암호화폐에서는 지연이 발생하면 즉시 비용이 유발됩니다. 시장은 멈추지 않고 움직이며, 변화는 예고 없이 발생합니다. 규제 변화, 트윗 게시물 하나, 또는 갑작스러운 가격 변동으로 인해 몇 주가 아닌 몇 시간 안에 제품 관련 의사결정을 내려야 할 수도 있습니다. Flipster 입장에서, 빠른 속도는 최신 상태를 유지하기 위한 필수 요건입니다.

하지만 이들이 의존하던 도구들은 이를 따라가지 못했습니다. 디자이너들은 Sketch나 Abstract 같은 다양한 도구를 사용했습니다. 엔지니어들은 스크린샷을 보고 구축했습니다. QA는 스프레드시트에 버그를 표시했습니다. 문서화는 실제 디자인과 분리된 채 Google Docs와 Notion에 흩어져 있었습니다.

팀이 운영을 전 세계로 확장함에 따라, 이러한 구성의 허점은 무시하기 어려워졌습니다. 파일들은 최신 상태가 아니게 되었습니다. 스펙은 유실되었습니다. 시간대를 넘나들며 논의를 반복해야 했습니다. 동시에 제품 요구사항마저 점점 복잡해지고 있었습니다. DOGE와 같은 토큰은 소수점 넷째 자리 단위로 거래되는데, 값 표시 방식에 실수가 있으면 혼란을 야기하거나, 최악의 경우 사용자 신뢰를 훼손할 수 있었습니다.

결국 Flipster는 기존의 디자인 스택이 팀의 확장에 적극적인 방해 요소라는 사실을 깨달았습니다.

우리는 엉성한 암호화폐 거래 경험을 넘어 고객에게 새로운 기준을 제시하기 위해 강력한 숫자 규칙을 원했습니다. Figma를 도입하기 이전까지는 플랫폼 전반에 걸쳐 소수점이 네 가지 다른 방식으로 표시되고 있었습니다. Figma 기반 문서화로 이동한 후, 우리는 다양한 숫자와 소수점에 대해 100% 일관성을 달성했습니다.

Christian Park, 디자인 리드, Flipster

flipster 디자인 시스템 내의 여러 컴포넌트가 표시된 화면 세 개flipster 디자인 시스템 내의 여러 컴포넌트가 표시된 화면 세 개
Figma상의 Flipster 디자인 시스템

솔루션: Figma를 통해 부서 간 효율성 50% 향상

Flipster는 같은 규모의 대부분의 회사가 고려하기도 전에 일찌감치 Figma 엔터프라이즈를 도입했습니다. 팀은 올바른 기반이 갖춰져야만 급속한 성장을 지속할 수 있다는 것을 알고 있었습니다. 이들에게는 분산된 팀을 하나로 모으고, 의사결정 속도를 높이며, 속도 저하 없이 끊임없는 반복 개선을 지원할 수 있는 플랫폼이 필요했습니다.

단 3주 만에 디자인 팀은 전체 시스템을 Figma에서 재구축했습니다. 디자인 주도 이니셔티브로 시작된 것이 빠르게 전사적 제품 구축 방식의 기반이 되었습니다.

오늘날 Figma는 Flipster 제품의 중추적인 역할을 합니다. 14명의 디자이너, 6명의 제품 관리자, 50명 이상의 엔지니어들이 매일 사용하며, 마케팅, QA, 데이터, 현지화, 운영팀도 함께 사용합니다.

Figma 엔터프라이즈의 시트 정액 요금제 덕분에 새로운 컨트리뷰터를 망설임 없이 추가할 수 있게 되었습니다. 완전한 편집자 접근 권한 덕분에 모든 팀이 동일한 파일 내에서 작업할 수 있게 되었습니다.

“회사 전체에서 직원들에게서 전체 액세스 권한을 요청받고 있었습니다. 연간 고정 가격의 엔터프라이즈 요금제 덕분에 걱정 없이 모두에게 사용 권한을 줄 수 있게 되었습니다”라고 Christian Park는 말합니다.

즉각적으로 성과가 보이기 시작했습니다. 중복되는 스펙 시트들이 사라졌습니다. QA 엔지니어들은 디자인에 직접 테스트 ID를 태그하기 시작했습니다. 데이터 분석가들은 Excel을 더 이상 사용하지 않고, 제품 팀이 작업하는 것과 동일한 파일에 클릭 로깅 포인트를 표시했습니다. 그래픽 디자인과 제품 디자인 간의 에셋 관리 또한 단일 진실 공급원으로 통합되었습니다.

“프로세스가 자리 잡자 데이터 분석가와 엔지니어 간의 토론 시간이 약 50% 단축되었습니다”라고 Flipster의 디자인 리드 Christian Park는 말합니다.

현지화 작업도 훨씬 더 효율적으로 진행할 수 있게 되었습니다. Flipster는 이제 Crowdin Figma 플러그인을 사용하여 디자인 레이어에서 바로 번역을 관리합니다. UX 문자열은 자동으로 동기화되며, 새로운 기능의 현지화 버전은 글로벌 버전과 동일한 일정으로 출시됩니다. 언어가 다르다고 해서 별도의 업무 흐름이 필요하지도 않게 되었습니다.

리더십 정렬에서도 큰 성과를 보았습니다. Figma 이전에는 기능을 배포하기 위해 최종 디자인 검토에만 두세 번의 회의가 필요했을 것입니다. 이제 이해관계자들은 라이브 파일을 훑어보고, 댓글을 남기며, 비동기적으로 의사결정을 내립니다. 매주 업데이트를 배포하는 원격 근무 우선 기업에서 그러한 종류의 정렬을 유지하기란 어렵습니다. 하지만 Figma 엔터프라이즈를 통해 Flipster는 이를 표준 업무 방식으로 확립했습니다.

이해관계자의 의견을 정리하기 위해 부서당 전 세계적으로 회의가 2~3회씩 필요했습니다. 하지만, 이제 관리진은 원할 때 파일을 탐색할 수 있습니다. 경영진과 개별 컨트리뷰터 사이의 격차가 크게 줄어들었습니다.

Christian Park, 디자인 리드, Flipster

Dev Mode로 핸드오프 마찰 40% 감소

Flipster의 엔지니어들 입장에서는 Dev Mode 덕분에 핸드오프 방식에 큰 변화가 일어났습니다. 이전에는 디자이너들이 모든 화면에 간격, 크기, 타이포그래피 세부 정보를 주석으로 달아야 했습니다. 각 플랫폼마다 특성이 있어, iOS는 포인트를 사용하고 Android는 다른 단위를 사용했기에, 종종 값 비교를 위해 나란히 정렬된 테이블을 작성해야 했습니다.

“Dev Mode 이전에는 디자이너가 모든 세부 사항을 설명해야 했습니다. 우리는 종종 플랫폼 간 치수를 비교하는 테이블을 만들었습니다”라고 Christian은 말합니다. “이제 개발자들은 우리가 모든 것을 명시하지 않아도 자동으로 정보를 가져옵니다. 그것만으로도 핸드오프 시간의 40%가 절약됩니다.”

이렇게 대대적으로 효율성을 개선함으로써 매주 배포하는 팀은 인원 추가 없이 개발 역량을 증대하는 것과 동일한 효과를 보았습니다. 또한, 덕분에 플랫폼 전반으로 오류가 줄어들었으며, 첫날부터 더욱 빠르게 빌드할 수 있게 되었습니다.

dev mode 내에서 요소 토글이 있는 컴포넌트 플레이그라운드 모달dev mode 내에서 요소 토글이 있는 컴포넌트 플레이그라운드 모달
Flipster의 Dev Mode 화면

다음 단계를 위한 실험

도입과 지속적인 개선을 지원하기 위해 Flipster는 ‘디자인 챕터(Design Chapter)’를 만들었습니다. 이는 새로운 기능 테스트, 동료 교육, 회사의 디자인 표준 개선에 집중하는 도메인별 디자이너 그룹입니다.

회의실 벽면 화면에 Figma와 Zoom 통화 멤버들이 띄워져 있고 그 앞에 있는 Flipster 팀원회의실 벽면 화면에 Figma와 Zoom 통화 멤버들이 띄워져 있고 그 앞에 있는 Flipster 팀원
Figma의 Flipster ‘디자인 챕터’ 팀

또한 그 그룹은 원격 리뷰를 더 인터랙티브하고 즉각적으로 느끼게 하기 위해 커스텀 Cursor-Figma 플러그인을 개발했습니다. 또한 이 동일한 플러그인이 Figma 레이어 이름을 CrowdIn과 동기화하여 현지화를 자동화합니다. 디자이너가 컴포넌트를 업데이트하면 해당 번역 키가 자동으로 업데이트됩니다. 덕분에 수동 라벨링 작업을 할 필요가 없어지고, 왔다 갔다 하는 과정을 줄이며, 현지화 작업이 디자인과 동일한 속도로 진행되도록 유지합니다.

우리는 효율성과 효과를 더욱 개선하기를 원했으며, 따라서 Figma의 새로운 기능들을 검토하고 있습니다. 우리는 레이어 이름을 변경할 때 CrowdIn을 업데이트하는 Cursor-Figma 플러그인을 만들었습니다. 덕분에 수동 라벨링 단계가 사라졌습니다.

Christian Park, 디자인 리드, Flipster

입력 필드가 있는 현지화 플러그인이 위에 떠 있는 Flipster 화면입력 필드가 있는 현지화 플러그인이 위에 떠 있는 Flipster 화면
CrowdIn, Figma상의 Flipster 현지화 플러그인

Figma의 AI 도구들도 큰 영향을 미쳤습니다. 이미지 기반 검색 기능은 일상적인 업무 흐름을 빠르게 변화시킨 기능 중 하나였습니다. 개발자와 제품 관리자는 이제 스크린샷을 Figma에 끌어다 놓아 몇 초 만에 일치하는 화면을 찾습니다. 5분 걸리던 일을 이제 1분이면 완료할 수 있게 되었으며, 그렇게 절약된 시간은 주간 배포 주기를 맞추는 데 도움이 됩니다.

신뢰가 핵심인 산업에서 정밀함과 거버넌스는 속도만큼이나 중요합니다. Figma 엔터프라이즈를 통해 Flipster는 모든 팀 전반에 걸쳐 규정 준수, 현지화, 디자인 정확성을 일관적으로 정렬하면서 시장 속도에 맞춰 배포합니다.

“암호화폐 시장에서는 반드시 매주 배포해야 합니다. Figma 덕분에 이렇게 빠른 속도로 배포할 수 있습니다. Figma는 230명 규모의 저희 팀이 10배 큰 회사의 민첩성과 산출물을 가지고 운영할 수 있게 해주는 원동력이 됩니다”라고 Christian은 말합니다.

Figma로 디자인을 효과적으로 확장하는 방법

위대한 디자인에는 제품과 브랜드를 차별화할 수 있는 잠재력이 있지만, 혼자서는 위대한 디자인을 만들 수 없습니다. Figma는 빠르고 보다 포용적인 디자인 업무 흐름으로 제품 팀을 하나로 모읍니다.

Figma가 조직의 디자인 확장에 어떻게 도움이 되는지 자세히 알아보려면 양식을 입력하세요.

Figma가 제공하는 지원은 다음과 같습니다.

  • 아이디어 구상부터 제작, 디자인 구축까지 디자인 작업의 모든 단계를 한 곳에서 해결
  • 전사적으로 공유되는 디자인 시스템으로 디자인 업무 흐름 속도 향상
  • 접근성 높은 웹 기반의 간편한 플랫폼으로 제품팀 작업 과정에서 포용성 강화

Figma와 소통하기

“제출”을 클릭하면 서비스 이용 약관개인정보 처리방침에 동의하는 것으로 간주됩니다.