Mason 및 Front-End as a Service가 제품 개발의 판도를 바꾸는 이유

(이 기사는 후원을 받은 기사입니다.) 정기적으로 사용하는 앱과 소프트웨어를 둘러보세요. 저마다 독특한 디자인이 있죠? 그러나 그들 각각에 대해 비슷한 점이 있습니다. 탐색 모음, 연락처 양식, 기능 상자, CTA — 어디를 가든지 특정 요소가 존재하는 경향이 있습니다.

이러한 요소는 사용자가 구축한 제품에 참여하는 방식에 중요한 역할을 하기 때문입니다. 사용자 입장에서 이것은 좋은 일입니다. 이러한 인식 가능하고 예측 가능한 요소를 애플리케이션의 프론트엔드 구조에 포함함으로써 사용자는 그 앞에 있는 콘텐츠에 집중하게 됩니다. UI의 미스터리를 풀려고 하는 것이 아닙니다.

그러나 소프트웨어 개발자 입장에서 이것은 고통스러운 일입니다. 어떤 종류의 구성 요소가 제품에 포함되어야 하는지 알고 있습니다. 그러나 지금까지는 처음부터 다시 빌드해야 했습니다. 설상가상으로 업데이트가 필요할 때마다 업데이트를 구현하고 라이브 사이트에 푸시해야 하며, 이러한 변경을 즉시 수행할 수 있는 대역폭이 있는 경우가 많지 않습니다.

이것이 Mason이 FEaaS(front-end-as-a-service)로 하는 일 이 매우 흥미로운 이유입니다. 이 기사에서는 FEaaS가 누구를 위한 것이며 제품 및 마케팅 팀이 FEaaS로 권한을 부여하는 것이 큰 문제인 이유를 자세히 살펴보겠습니다.

FEaaS란?

SaaS(Software-as-a-Service)가 무엇인지 알고 있습니다. 그러나 SCaaS(Software-Components-as-a-Service)에 대해 들어본 적이 있습니까?

몇 년 전 SCaaS에 대해 약간의 불평이 있었습니다. 기본 아이디어는 소프트웨어에 재사용 가능한 UI 구성 요소와 위젯을 만들고 쉽게 유지 관리할 수 있다는 것이었습니다. 그러나 그것은 실제로 주목받지 못했습니다. 아마도 개발자가 수행할 수 있는 작업이 너무 제한적이기 때문일 것입니다.

그러나 FEaaS를 사용하면 훨씬 더 가치 있고 강력한 솔루션을 갖게 됩니다. 기본적으로 Mason의 서비스로서의 프론트엔드 솔루션을 사용하면 소프트웨어의 시각적 측면 과 기능을 빠르고 효과적으로 구축할 수 있습니다.

이는 복잡한 기능을 구축하고 API와 통신하게 하는 것을 의미합니다. Airtable에 데이터 소스로 연결된 다양한 디자인의 복잡한 양식의 예는 여기에서 찾을 수 있습니다.

게다가 Mason으로 구축한 각 기능은 나머지 제품과 동일한 코드베이스에 있습니다. Mason으로 만든 맞춤형 Apixu 기반 챗봇을 살펴보겠습니다.

그리고 이것은 Mason 템플릿을 사용하여 eBook 경품을 위해 만든 영웅 배너입니다.

실수하지 마십시오. 이것은 웹사이트 빌더가 아닙니다 . Mason은 귀하와 귀하의 팀이 개별 구성 요소와 완전한 기능을 구축할 수 있도록 권한을 부여합니다. 전체 관리 호스팅 웹 사이트 또는 제품이 아닙니다. 이렇게 하면 사이트 빌더 솔루션의 기능에 더 이상 제한을 받지 않습니다.

선택한 도구에서 웹사이트, 앱 또는 기타 소프트웨어 제품을 구축할 수 있습니다. 그런 다음 Mason에서 코드 기반에 통합할 정말 복잡한 기능을 설계하고 내보내십시오. 귀하와 귀하의 고객 데이터를 가두는 플랫폼과 달리 Mason은 제품 팀이 현재 제품을 보강하고 모든 것을 소유할 수 있도록 합니다(대신 귀하의 전체 웹사이트와 비즈니스를 소유하는 일부 웹사이트 구매자와는 다름).

누구를 위한 메이슨인가?

Mason을 사용 하면 이미 완전히 개발된 소프트웨어 제품 또는 최소한 이를 구축할 솔루션이 있어야 합니다. Mason은 제품의 기능(및 기능)을 구축 및 설계하고 쉽게(즉, 코딩 없이) 수행하는 데 사용할 도구입니다.

그런 다음 이러한 기능은 자체 포함되어 사용할 수 있을 때 제품에 포함됩니다.

Mason의 CEO인 Tom McLaughlin은 Mason이 만들어진 실제 사람들에 대해 다음과 같이 설명합니다.

"오늘날 전체 제품이 코드베이스에 있으므로 제품을 구성하는 많은 기능이 지구상의 다른 모든 코드베이스에서 찾을 수 있지만 사실상 엔지니어링 팀의 영역이 됩니다. 그렇게 독특하지 않습니다. Mason을 사용하면 제품 팀이 이러한 공통 기능을 더 빠르게 구축할 수 있지만 더 중요한 것은 조직의 모든 사람(기술자 여부에 관계없이)이 프로덕션 단계에 있는 경우에도 관리할 수 있다는 것입니다.”

귀하의 제품 팀(소프트웨어 개발자 및 디자이너)은 Mason을 사용하여 소프트웨어를 구축할 팀입니다. 그러나 마케팅 및 콘텐츠 팀은 모든 새로운 편집 또는 조정을 배포하기 위해 엔지니어링을 기다릴 필요 없이 배포된 후 Mason에 구축한 기능을 업데이트할 수 있는 기능을 얻게 됩니다.

이는 프론트 엔드 기능의 유지 관리가 더 이상 개발자에게 전적으로 의존하지 않는다는 것을 의미합니다. 디자이너, 마케터, 콘텐츠 제작자 등 팀의 누구나 Mason의 FEaaS 플랫폼을 사용하여 소프트웨어 기능을 구축하고 업데이트할 수 있습니다.

따라서 제품에 대한 강력한 기능을 보다 효율적으로 구축할 수 있을 뿐만 아니라 팀에서 업데이트가 열려 있는 티켓 목록에 쌓이는 대신 실시간으로 업데이트를 배포할 수 있습니다.

FEaaS가 중요한 이유

소프트웨어 개발자 병목 현상으로 인해 소프트웨어 개발, 배포 또는 업데이트 일정이 과거에 (완전히 이해할 수 있음에도 불구하고) 어려움을 겪었습니까? 그렇다면 FEaaS는 꿈처럼 들릴 것입니다.

지금까지는 소프트웨어 엔지니어에게 다른 선택지가 없었습니다. 웹용 제품을 구축하려면 모든 것이 처음부터 구축되어야 했고 그렇게 하려면 상당한 시간이 필요했습니다. 특히 목표가 본질적으로 더 복잡한 경우라면 더욱 그렇습니다. 그 동안 나머지 팀원들은 당신이 맡은 역할을 수행하기를 기다리고 있었습니다.

Mason이 FEaaS 솔루션으로 주도권을 잡고 있는 가운데 Mason의 기능이 제품 개발 워크플로를 어떻게 혁신할지 살펴보고 싶습니다.

시각적으로 UI 구성 요소 디자인

FEaaS는 엔지니어와 개발자를 제품의 코드 기반에서 시각적 빌드 인터페이스로 끌어들입니다. 따라서 코드와 배포 후 표시되는 시각적 미리 보기 간에 전환할 필요 없이 빌드 중인 내용을 정확히 볼 수 있습니다.

Mason의 비주얼 빌더를 사용하면 컨테이너, 열, 레이어 및 텍스트, 양식 필드, 버튼 등과 같은 사전 구성된 요소 시스템을 사용하여 복잡하지만 필수적인 UI 구성 요소를 디자인할 수 있습니다.

다른 최신 빌더 도구가 작동하는 방식과 마찬가지로 코드를 작성하지 않고도 더 많은 작업을 수행하는 데 도움이 되는 풍부한 옵션이 있습니다. 또한 데스크톱, 모바일 및 태블릿 보기 간의 편리한 전환 덕분에 반응형 디자인도 문제가 되지 않습니다.

또한 Mason은 가장 일반적인 UI 구성 요소에 대한 다양한 템플릿을 포함하는 완전한 기능을 갖춘 UI 키트와 함께 제공됩니다. 또는 필요한 항목을 직접 선택할 수 있습니다.

기능 카드. 로그인 화면. 블로그 콘텐츠 차단. 영웅 이미지. CTA 버튼. 방문자가 제품에 참여하고 조치를 취하는 데 필요한 모든 핵심 구성 요소는 이미 구축되어 있습니다.

빌드하는 모든 제품에서 처음부터 새로 만드는 것이 지겹다면 이 템플릿이 큰 도움이 될 것입니다. 상상할 수 있듯이 이러한 방식으로 제품 구성 요소를 설계하고 사용자 정의할 수 있는 기능이 있으면 팀 생산성에 큰 도움이 될 것입니다.

구성 요소 및 기능을 보다 빠르게 구축

이제 시각적으로 구성 요소의 스타일을 지정할 수 있다는 것은 Mason과 같은 FEaaS 플랫폼을 사용하는 이점 중 하나일 뿐입니다. 예상대로 이와 같은 도구는 속도를 위해 제작되었습니다.

실제로 Mason을 사용 한다는 점에서 이것은 엄청나게 빠르게 로드되는 도구입니다 . 과거에 도구가 실행되거나 변경 사항을 저장하거나 한 보기에서 다른 보기로 이동할 때까지 기다리느라 시간을 허비했던 모든 사람에게 이 도구는 매우 유용할 것입니다.

워크플로에 어떤 영향을 미치는지 면에서도 속도를 얻을 수 있을 것으로 기대합니다 .

Mason 빌더로 다음을 수행할 수 있습니다.

• 간단한 드래그 앤 드롭으로 새 컨테이너, 열, 행, 콘텐츠 블록 또는 사용자 정의 코딩 요소를 추가하십시오.

• 이 시각화된 요소 계층을 사용하여 구성 요소의 레이어를 검토, 편집, 복제, 이동 또는 삭제합니다.

• 단순화된 것은 UI 디자인 부분만이 아닙니다. API를 통해 구성 요소를 다른 소스에 쉽게 연결할 수도 있습니다.

Mason의 "구성" 탭을 사용하면 다음과 같은 다른 응용 프로그램과 빠르게 통합할 수 있습니다.

• 오티
• 페이스북
• 허브스팟
• 줄무늬
• 트윌리오
• 그리고 더.

따라서, 단순히 리드를 수집하는 대신 영웅 배너에서 홍보된 eBook을 판매하고 싶다고 가정해 보겠습니다. 가장 먼저 할 일은 Stripe 통합을 설정하는 것입니다.

Stripe의 개발자 대시보드에서 공개 가능한 키와 비밀 키만 있으면 됩니다.

그런 다음 Mason의 해당 필드에 각 키를 입력합니다.

"디자인" 탭으로 돌아가서 신용 카드 양식 요소를 구성 요소로 끌어옵니다.

페이지에 양식이 추가되면 이 통합을 설정하기 위해 수행해야 할 마지막 단계가 있습니다.

구성 탭으로 돌아갑니다. 이제 사이드바에 "양식"이라는 새 옵션이 표시됩니다.

모든 관련 세부 정보가 이미 여기에 추가되었고 양식에 이미 연결되었음을 알 수 있습니다.

다시 말하지만, Mason은 소프트웨어 엔지니어가 처음부터 구성 요소를 구축하는 경우 일반적으로 시간이 걸리는 작업을 가볍게 만듭니다. 대신, 이제 제품의 새로운 기능을 빠르게 설계하고 프로그래밍하는 데 필요한 모든 도구를 갖게 되었습니다.

손쉬운 새 기능 배포

확실히 새로운 기능을 신속하게 디자인할 수 있는 능력은 제품 팀에게 중요합니다. 그러나 여전히 배포 문제가 해결되지 않습니다.

병목 현상은 제품 개발의 다양한 지점에서 발생할 수 있습니다. 그리고 엔지니어만 쉽게 시작하거나 업데이트를 배포할 수 있을 정도로 복잡한 소프트웨어를 구축하면 파이프라인에서 추가 지연이 발생할 수 있습니다.

Mason은 이에 대한 솔루션을 개발했습니다. 시작하려면 구성 요소를 Mason의 라이브러리에 게시하는 것이 간단합니다. 빌더의 오른쪽 상단 모서리에 있는 "게시" 버튼을 클릭하기만 하면 Mason이 나머지를 처리합니다.

하지만 제품이나 앱 내부에 구성 요소를 가져오려면 개발자가 참여해야 하지만 한 번만 참여하면 5분 이상 걸리지 않습니다.

이렇게 하려면 빌더의 오른쪽 상단 모서리에 있는 “< > 배포” 버튼을 사용합니다. 그러면 다음을 수행하라는 메시지가 표시됩니다.

본질적으로, 여러분이 하고 있는 일은 Mason이 구축한 기능에 대해 생성한 고유 식별자를 가져와서 코드베이스에 추가하는 것입니다. 올바르게 설정되면 제품이 Mason API를 호출하여 구성 요소를 앱 측으로 렌더링합니다. 그리고 사이트의 최전선에 있는 사람들은 더 현명하지 않을 것입니다.

새 구성 요소와 모든 기능을 라이브로 푸시하는 것은 그만큼 간단합니다.

모든 사람이 변경을 수행하고 업데이트를 푸시할 수 있는 권한 부여

여기에서 FEaaS의 이점에 대해 언급한 모든 요점은 이 최종적이고 거대한 이점을 중심으로 이루어졌습니다.

FEaaS는 모든 사람이 기능을 변경하고 라이브 애플리케이션에 푸시할 수 있도록 합니다.

그것에 대해 잠시 생각해보십시오.

엔지니어가 필요한 변경 사항을 구현할 때까지 팀에서 얼마나 많은 시간을 보냈습니까? 방문자의 참여를 유도하고 전환시키는 앱의 능력을 저해하는 측면에서 무엇을 했습니까? 인상적인 UI 없이, 제대로 작동하는 기능 없이, 방문자가 행동을 취하도록 만드는 데 필요한 모든 중요한 요소 없이.

소프트웨어를 인질로 잡아 궁극적으로 비즈니스 비용을 낭비하게 됩니다. 지금까지는 소프트웨어 제품 팀이 도울 수 없는 일이었습니다. 그것은 단지 그들의 일의 본질이었습니다. 그러나 Mason의 FEaaS를 사용하면 이것이 마침내 바뀝니다.

(1) 구성 요소를 게시하고 (2) 응용 프로그램에 배포하면 해당 기능이 제품에 나타납니다. 그러나 변경이 필요하다고 가정해 보겠습니다. 예를 들어:

• 디자이너가 양식의 스타일을 변경하여 개선된 방문 페이지 디자인을 반영하려고 합니다.
• 마케팅 관리자에게 홈페이지 영웅 이미지를 대체해야 하는 새 브랜드 이미지가 있습니다.
• 편집자가 최신 잠재 고객 제안 문구를 수정하기로 결정했으며 CTA를 업데이트하려고 합니다.

구성 요소를 변경하기 위해 누가 Mason 빌더 내부에 들어가느냐는 중요하지 않습니다. 두 번째로 발생하면 빌더의 오른쪽 상단 모서리에 있는 희미한 "저장됨" 버튼이 녹색 "게시로 이동" 버튼으로 바뀝니다.

그리고 무엇을 추측? 클릭하는 데 기술적 경험이 필요하지 않습니다.

Mason은 변경 사항의 게시 및 배포를 처리하므로 앱과 Mason 간에 이미 연결이 설정되어 있는 한 이러한 업데이트는 방문자가 볼 수 있도록 즉시 라이브로 제공되어야 합니다.

당신과 당신의 제품 팀이 새로운 구성 요소를 만들거나 기존 구성 요소를 조정해야 하는 수많은 티켓으로 수렁에 빠진 ​​경우 이를 효과적으로 막을 수 있습니다.

마무리

웹용 제품을 구축할 때 놀라운 점 중 하나는 누군가가 항상 우리가 더 적은 작업을 하면서 더 많은 것을 성취할 수 있도록 돕는 새로운 방법을 개발한다는 것입니다.

일반적으로 소프트웨어 응용 프로그램의 경우 오랜 시간이 걸렸습니다. 고맙게도 FEaaS는 여기에 있으며 Mason이 소프트웨어 개발 속도를 높이고 출력을 개선하며 더 많은 팀이 참여할 수 있는 매우 가치 있는 도구를 개발한 것처럼 보입니다.