요약

National Australia Bank(NAB)는 호주와 뉴질랜드에서 가장 고객 중심적인 기업이 되겠다는 명확한 목표를 세웠습니다. 850만 명 이상의 고객과 여러 부서에 걸쳐 200명 이상의 디자이너를 보유한 엔터프라이즈 규모의 조직인 NAB는 65개의 온보딩 경로, 여러 컴포넌트 라이브러리, 단일 변경 사항에도 며칠이 걸리는 수동 업데이트 등 복잡한 과제를 안고 있었습니다.

규제 요구 사항 또한 일관성과 통제 수준에 대한 기준을 높였으며, 이에 NAB는 팀이 디자인 한 번으로 어디서나 재사용할 수 있도록 Figma 기반의 통합 디자인 시스템인 Elevate를 구축해 대응했습니다.

그 결과로, 고객에게는 더 간단한 온보딩 경험을, NAB에게는 더 큰 효율성을 제공할 수 있었습니다.

• 간소화된 온보딩을 통해 가입 속도 50% 향상
• 양식 필드 수 70% 감소로 고객 불편 최소화
• 게시되고 사전 승인된 컴포넌트를 통해 중복 제거
• 단일 진실 공급원으로서 Figma를 활용해 더욱 원활한 디자인-개발 핸드오프 구현

도전 과제: 성장으로 인해 발생한 분산 문제

NAB의 디자인 팀 규모가 커지면서 제품 경험도 점점 분산되기 시작했습니다. 조직 전반의 제품 팀들은 동일한 고객 문제를 서로 다른 방식으로 해결하고 있었습니다. 예를 들어, 신용카드 신청 프로세스는 여러 버전으로 존재했으며, 유사한 질문을 하더라도 문구, 순서, 상호작용 방식에는 차이가 있었습니다. "NAB는 대규모 엔터프라이즈에서 흔히 발생하는 문제를 겪고 있었지만, 우리는 최고를 목표로 하고 있습니다. 따라서 가장 단순하고 고객 중심적인 경험을 제공할 때에만 만족할 수 있습니다."라고 NAB 디자인 총괄인 Daniel Fisher는 말합니다.

서로 분리된 컴포넌트 라이브러리가 사용되고 있었으며, 일부는 거의 10년 가까이 된 것도 있었습니다. 단순한 변경 사항 하나도 여러 라이브러리와 파일에 영향을 미칠 수 있었습니다. 진행 표시기를 여러 화면에 걸쳐 업데이트하고 모든 변형을 추적하는 작업조차 며칠이 걸릴 수 있었습니다.

여러 온보딩 경로는 일관성 문제와 위험 증가를 초래했으며, 그 결과 컴플라이언스 검토 및 감사 과정도 복잡해졌습니다. 기존 도구는 엔터프라이즈 규모에서의 안전한 협업을 지원하지 못했습니다. 파일은 이메일로 공유되었고, 이해관계자들은 맥락 속에서 검토할 수 없었으며, 접근 제어 기능도 엔터프라이즈 요구 사항을 따라가지 못했습니다.

해결책: 어디서나 작동하는 디자인 시스템 구축

NAB는 최고 디자인 책임자(CDO)인 Lance Thornswood의 단순한 원칙, 즉 "하나의 일을 수행하는 하나의 방식"을 중심으로 뜻을 모았습니다. 이러한 명확한 방향성은 Figma Enterprise 기반의 통합 디자인 시스템인 Elevate로 이어졌으며, 이를 통해 패턴을 한 번 만들고 어디서나 재사용할 수 있게 되었습니다.

'머신'은 재사용이 대규모 환경에서도 효과적으로 작동하도록 하는 데 중요한 역할을 합니다. 이러한 스마트하고 재사용 가능한 컴포넌트는 가능한 모든 변형을 고려해 설계되었습니다. 각 컴포넌트에는 검증, 오류 상태, 반응형 동작을 위한 로직이 내장되어 있어 어떤 제품에도 바로 적용할 수 있습니다.

Figma의 게시된 라이브러리는 이러한 모델이 대규모 환경에서도 작동할 수 있도록 지원합니다. 팀이 핵심 컴포넌트를 업데이트하면, 이를 사용하는 모든 파일에 변경 사항이 반영됩니다. 지난 1년 동안만 해도 이러한 라이브러리는 NAB 전반에서 10만 회 이상 사용되었습니다.

Figma Enterprise를 통한 디자인 일관성은 컴플라이언스 리스크도 줄여줍니다. Elevate의 모든 상호작용은 사전 승인되고 표준화되어 있으며, 제품과 브랜드 전반에서 감사 추적이 가능합니다. 역할 및 권한 관리 기능은 민감한 작업이 통제된 상태로 유지되도록 합니다. 버전 기록과 라이브러리 게시 기능은 무엇이, 언제, 누구에 의해 변경되었는지에 대한 명확한 이력을 제공합니다.

Figma 엔터프라이즈로 확장하는 아토믹 디자인

NAB는 Brad Frost의 아토믹 디자인 방법론에서 영감을 받아 재사용 가능한 빌딩 블록으로 일관된 경험을 구축했으며, 이후 이를 '머신'과 '팩토리'라 불리는 스마트하고 유연한 컴포넌트 시스템으로 더욱 확장했습니다. 아토믹 디자인은 Elevate의 기반이 되었습니다. 하지만 그것만으로는 비즈니스 전반의 모든 고객 상호작용을 통합하기에 충분하지 않았습니다. 팀은 외부 및 내부 사용자 여정, 오류 경로, 브랜딩 변형, UI 상태 등 모든 사용 사례에 대응할 수 있는 기능형 컴포넌트가 필요했습니다.

예를 들어 NAB는 Figma의 변수, 모드, 중첩 인스턴스를 활용해 모든 상황에 맞게 동작하는 전화번호 컴포넌트를 만들었습니다. 25명의 디자이너가 이 컴포넌트를 새로 만들지 않고 재사용할 경우, 약 25일 분량의 디자이너 작업 시간을 절감할 수 있습니다. 이러한 효과를 수십 개의 컴포넌트에 적용하면, 그 절감 규모는 수백만 달러에 이를 수 있습니다.

"이미 존재하는 것을 다시 디자인하는 데 시간을 쓰는 대신, 이제 우리는 지속적으로 개선하고 더 창의적인 작업에 집중할 수 있게 되었습니다."라고 Daniel은 말합니다.

변수를 활용한 대규모 테마 및 화이트 라벨 운영

변수는 작업을 중복하지 않고도 Elevate를 다양한 제품과 브랜드 전반으로 확장할 수 있게 해줍니다. 각 머신은 색상, 타이포그래피, 모서리 반경을 위한 소규모 토큰 세트를 참조하므로, 단순한 토큰 교체만으로 동일한 플로를 NAB, Kogan Money, Qantas Money, Bank of Queensland 같은 다양한 브랜드에 적용할 수 있습니다. 팀은 파일 내에서 변경 사항을 미리 확인한 뒤 한 번만 게시하면, 이를 사용하는 모든 플로에 즉시 업데이트가 반영됩니다.

변수는 게시된 라이브러리 내에서 관리되기 때문에 거버넌스가 기본적으로 내장되어 있습니다. 역할 및 권한 관리를 통해 수정 권한이 있는 사용자를 제어할 수 있습니다. 버전 기록은 무엇이, 언제, 누구에 의해 변경되었는지를 기록합니다. 디자인 팀과 엔지니어링 팀은 동일한 토큰을 같은 맥락에서 검토할 수 있어 불필요한 커뮤니케이션을 줄이고, 화이트 라벨 출시 일정도 차질 없이 유지할 수 있습니다.

Dev Mode로 더 빠르고 간소화된 온보딩 구현

Figma 도입 이전에는 디자인-개발 핸드오프가 팀의 작업 속도를 늦추곤 했습니다. 디자이너들은 파일을 이메일 첨부로 전달하고, 스펙은 별도의 문서에 관리했습니다. 예외 사례는 쉽게 누락될 수 있었습니다. 팀 작업 역량의 약 50%는 구현 결과를 디자인과 대조하고 차이점을 기록하는 데 사용되고 있었습니다.

프로세스를 Figma로 옮긴 이후에는 엔드투엔드 흐름 파일이 단일 진실 공급원이 되었으며, 최대 80명이 동시에 해당 파일에서 작업할 수 있게 되었습니다. 개발자들은 동일한 파일을 열어 브랜치를 검토하고, 맥락 안에서 바로 피드백을 남깁니다. Dev Mode에서는 마우스를 올리기만 해도 간격, 토큰, 컴포넌트 속성을 확인할 수 있으며, 바로 코드에 사용할 수 있는 값을 복사할 수 있습니다. 오류 상태, 예외 사례, 조건부 경로도 디자인과 함께 관리되며, 작업이 진행됨에 따라 지속적으로 최신 상태로 유지됩니다.

이러한 방식은 NAB의 고객 여정 온보딩 재디자인을 가능하게 했습니다. 이제 고객 여정은 신원 확인 단계에서 시작됩니다. 여권이나 운전면허증을 스캔하면, 은행이 검증할 수 있는 신뢰된 정보 출처에서 세부 정보를 가져와 자동으로 입력되므로 고객이 직접 입력해야 하는 작업이 줄어듭니다.

빅토리아주 운전면허증에 이니셜만 표시되는 경우에는 전체 중간 이름을 입력하도록 양식이 안내합니다. 공유 컴포넌트를 사용하기 때문에 개선 사항은 즉시 반영됩니다. 예를 들어, 국제 전화번호 선택기는 04로 시작하는 현지 번호를 인식하고 자동으로 형식을 맞춰 입력할 수 있습니다.

Figma를 통해 NAB는 온보딩을 간소화하고 팀 생산성을 다음과 같이 향상시켰습니다.

• 양식 필드 수를 최대 70% 줄이고 온보딩 시간을 최대 50% 단축하여, 더 빠르고 매끄러운 경험을 제공했습니다.
• 얼굴 인식 및 신분증 스캔을 통해 보안을 강화하며, 속도와 안전성이 함께 구현될 수 있음을 입증했습니다.
• 사전 승인된 컴포넌트를 게시하고 한 번 만든 것을 여러 제품에서 재사용함으로써 중복을 제거했으며, 엔지니어들은 단일 진실 공급원을 기반으로 개발할 수 있게 되었습니다.

고객 중심 문화를 이끄는 디자인

NAB의 디자인 시스템은 계속해서 발전하고 있습니다. Code Connect와 Figma MCP 같은 기능을 통해 팀은 디자인과 엔지니어링을 연결하고 있으며, 컴포넌트를 코드와 연동하고, 피드백 루프를 간소화하며, 실제 고객 피드백을 기반으로 전달 속도를 높이고 있습니다. 또한 핵심 흐름에서의 마찰 요소를 파악하기 위해 Figma Make와 AI 기반 도구도 활용하고 있습니다.

"'특정 경험에서의 마찰 요소를 계산해줘'라고 프롬프트를 입력했을 때 정확한 점수를 제공해준다는 것은 정말 놀라운 일입니다."라고 Daniel은 말합니다. "수작업을 자동화해주는 기능은 정말 인상적입니다."

프로세스의 중심에 Figma를 도입함으로써 NAB는 구조와 창의성이 어떻게 조화를 이루며 함께 작동할 수 있는지를 보여주고 있습니다. 신뢰를 기반으로 하는 고도로 규제된 산업에서 NAB는 대규모 환경에서의 고객 중심 문화가 어떤 모습이어야 하는지에 대한 새로운 기준을 제시하고 있습니다.