2020년에 설립되어 오슬로와 런던을 기반으로 팀을 운영하고 있는 Findable은 건축 환경을 위한 AI 기반 문서 인텔리전스 플랫폼입니다. 이 회사는 부동산 소유자, 관리자 및 컨설턴트가 AI를 사용하여 건축 문서를 검색, 추출 및 분석할 수 있도록 지원합니다.

Findable의 플랫폼을 통해 사용자는 자연어를 사용하여 수천 개의 건축 문서에 걸쳐 질문하고, 비구조적 파일에서 구조적 데이터를 추출하며, 자동으로 규정준수 보고서를 생성할 수 있습니다. 이러한 AI 기반 기능에는 강력함과 단순함의 균형을 갖춘 인터페이스가 필요합니다.

그래서 회사가 앱 셸을 업데이트해야 했을 때, 디자인 팀은 이를 제품 개발 업무 흐름을 최적화할 기회로 보았습니다. 이전에도 Figma를 사용하여 앱 셸 디자인 개편을 수행한 적이 있었지만, 효율성과 실험을 강조하는 문화 속에서 Figma Make의 기능을 탐색하는 것이 다음 단계였습니다.

Findable은 Figma Make로 생성된 코드의 90%를 활용하여 앱 셸 구축을 50% 더 빠르게 완료했을 뿐만 아니라, 디자인과 개발 이외의 팀들을 프로세스에 참여시켜서 제품 구축 과정을 민주화했습니다.

과제: 앱 쉘을 세심하게 다루기

앱 셸은 웹 애플리케이션의 기본 구조를 제공합니다. 이는 가장 먼저 로드되며 전체적인 사용자 경험의 핵심 요소입니다. Findable의 제품 디자이너 Riccardo Busato가 프로젝트를 이끌었으며, 그의 업무 범위에는 탐색, 레이아웃 및 구조 디자인이 포함되었습니다. 이러한 요소들은 Findable의 나머지 제품들이 의존하는 토대를 형성합니다.

문제는 앱 셸이 취약할 수 있다는 것입니다. 작은 실수가 모든 곳으로 퍼져나갈 수 있고 향후의 유연성은 초기에 이루어진 구조적 결정에 따라 달라지며 이를 위해서는 광범위한 테스트와 반복이 필요합니다.

해결책: 정적 디자인을 생동감 있게 만들기

라이브 사이트의 복잡성을 정적 이미지에서 시뮬레이션하는 것은 어려우므로, Findable은 그동안 디자이너와 개발자 간의 일관성을 유지하기 위해 길고 세밀한 핸드오프 프로세스에 의존했습니다. 그리고 종종 디자인에서 코드로 이어지는 업무 흐름에서 해석 차이가 생겨났으며, 이는 제품 단계에 가서야 발견되었습니다.

그것이 바로 팀이 Figma Make를 선택한 이유였습니다. 처음에는 개발자에게 시작 단계부터 더 깊이 있는 이해와 명확성을 제공하기 위한 프로젝트로 시작되었으나, 이후 그 이상의 것으로 진화하게 되었습니다.

건축 구조와 디자인

Riccardo가 겪은 첫 번째 '깨달음의 순간'은 Figma Make가 단순히 시각적 요소만을 생성하는 것이 아니라, 앱 셸의 구조도 구축하고 있다는 것을 깨달았을 때였습니다.

프론트엔드와 디자인 시스템 경험을 활용하여, 그는 Findable 앱의 동일한 디자인 시스템, 컴포넌트, 테마 및 스타일을 Figma Make 내에서 모두 재현할 수 있었습니다.

이는 팀이 실제 아키텍처 골격 내에서 실제 탐색 및 라우팅 로직을 갖춘 Hi-Fi 앱 셸을 구축할 수 있음을 의미했습니다.

다시 말해서, 이해관계자들이 앱을 단순히 보는 것뿐만 아니라 느낄 수 있도록 하는 완벽하게 기능하는 작동 중인 프로토타입입니다.

프로토타입의 핸드오프화

Findable 팀은 아이디어를 더 빠르게 생성했을 뿐만 아니라, Figma Make가 디자인에서 코드로의 전환 과정에도 도움이 되었다는 것을 알게 되었습니다.

이전에는 세부적인 핸드오프 프로세스를 수행하려면 여러 차례의 회의를 해야 했고 종종 특정 핸드오프 도구가 필요했습니다. 이제 프로토타입이 핸드오프가 되었고, 디자인에서 코드로의 업무 흐름이 간소화되었습니다.

또한, Figma와 마찬가지로 Figma Make 파일은 간단한 링크로 쉽게 공유할 수 있으며, 디자이너와 개발자 간의 빠른 업무를 위한 실시간 협업이 여전히 가능합니다.

재사용 가능한 템플릿

이 시점에서, 이 프로토타입은 이미 팀이 이전에 구축했던 그 어떤 것보다 디자인, 테스트, 공유하거나 핸드오프하기 더 쉬웠습니다.

그 Riccardo는 자신이 훨씬 더 강력한 것을 만들었다는 것을 깨달았습니다. 디자인 시스템과 아키텍처 패턴이 이미 프로토타입에 코딩되어 있다는 점을 감안하면, 그것이 미래 디자인을 위한 재사용 가능한 템플릿이 될 수 있지 있을까?

이를 염두에 두고 팀은 이를 더욱 발전시켜 주요 기능 패턴과 데이터가 채워진 대표적인 흐름을 추가함으로써 앱 셸을 하나의 템플릿으로 전환했습니다. 이를 통해 이 템플릿은 Findable의 디자인 시스템, 레이아웃, 탐색 및 아키텍처 기반의 토대가 되었으며, 초기 프로젝트 범위를 넘어선 생명력을 얻게 되었습니다.

Figma Make 규칙 적용

팀은 견고한 기초에도 불구하고 가드레일이 정의되지 않는다면 시스템이 점점 일관성을 잃고 구조가 무너질 것이라는 점을 이해하고 있었습니다. 페이지들이 서로 달라지고, 패턴은 본래의 의도에서 벗어나며, 코드 품질이 저하되고 유지보수성이 악화될 것입니다.

이를 해결하기 위해, Findable은 Figma Make를 사용하여 앱 자체의 규칙을 결정하는 것으로 방향을 근본적으로 전환했습니다. 디자인 규칙, 레이아웃 패턴, 아키텍처 제약 조건, 코드 품질 지침, 심지어 Tailwind 사용 규칙까지 정의하는 것입니다.

결과적으로 팀은 예측 가능한 구조와 더 깔끔한 코드 기반으로 디자인을 일관되게 유지할 수 있었습니다.

"Figma Make로 규칙을 미리 정의함으로써 시스템이 성장하더라도 일관되고 예측 가능하며, 유연하게 유지되는 시스템을 만들었습니다"라고 시니어 디자이너인 Hans Christian Berge가 얘기합니다. "하지만 진정한 해방은 디자인이 민주화되었다는 것이죠.이제 Findable의 누구라도 기존의 것을 망치지 않고 제품에 기여할 수 있습니다."

프로토타입 제작 프로세스의 민주화

프론트엔드 엔지니어링 지식과 아키텍쳐적 사고의 결합이 프로토타입을 만드는 데 도움이 되었지만, 디자인 규칙의 도입이 Findable에 대한 모든 것을 바꾸었습니다. 이로 인해 다른 디자이너들이 문제를 일으키지 않고 템플릿을 사용할 수 있었으며, 또한 여러 사람이 프로젝트에 관여할 때 종종 발생하는 개별 디자이너의 편차를 피할 수 있었습니다.

하지만 진정으로 혁신적인 순간은 디자이너뿐만 아니라 그 누구라도 이 템플릿을 사용할 수 있다는 사실을 깨달았을 때였습니다. 템플릿 토대가 견고하고, 아키텍처가 인코딩되어 있으며, 규칙이 명확하다면 다른 팀들이 이 프로세스에 참여할 수도 있습니다.

이는 프로토타입 제작 과정을 민주화하였으며, Findable에게 전혀 새로운 예상치 못한 사용 사례를 이끌어냈습니다.

• 고객 성공 팀이 고객과 함께 아이디어를 실시간으로 스케치
• 영업 팀이 회의에서 기능 요청 사항에 대한 프로토타입 제작
• PM이 디자인에 구애받지 않고 흐름 살펴보기
• 전사적으로 더 빠르고 명확한 피드백 루프

"Figma Make를 통해 아이디어가 논의되는 즉시 프로토타입을 제작할 수 있습니다"라고 Hans는 말합니다. "고객 회의 중이든 직후이든, 제품 내에서 개념을 구체화할 수 있으며, 그 결과물이 Findable의 실제 작동 방식에 기반하고 있다는 점을 신뢰할 수 있습니다."

결과

Figma Make 코드 90% 활용으로 출시 속도 50% 향상

최종 앱 셸은 50% 더 빨리 제공되었으며, 최종 제품에 사용된 Figma Make의 코드가 90%를 넘게 차지했고, 코드는 하루도 되지 않아 구현되었습니다.

앱 셸 디자인 개편으로 시작된 일은 훨씬 더 거대한 결실을 맺었습니다. 최종적으로 Findable은 회사 전체를 위한 디자인-개발 엔진 역할에 템플릿, 핸드오프 도구, 역량을 증폭하는 수단, 혁신 가속기를 겸하는 프로토타입을 확보하게 되었습니다.