Shopify 애플리케이션이란 무엇이며 어떻게 구축합니까?

개발자나 엔지니어링 리더와 우리가 하는 일에 대해 이야기할 때 자주 받는 질문 중 하나는 Shopify 애플리케이션이 정확히 무엇이며 이를 구축하는 데 필요한 도구와 기술은 무엇입니까? 또 다른 자주 묻는 질문은 Shopify 앱 구축 경험이 없는 경우 문제가 되나요?

Shopify 애플리케이션 개발의 다양한 기술적 측면을 자세히 설명하여 이러한 질문에 답해 보겠습니다.

Shopify 앱과 웹 앱 비교

이 주제에 대한 우리의 관점은 Shopify 애플리케이션이 표준 웹 애플리케이션과 거의 비슷하게 작동하지만 API를 통해 Shopify 플랫폼과 밀접하게 연결되어 있다는 것입니다. 여기에는 다음과 같은 몇 가지 의미가 있습니다.

• Shopify 앱을 구축하기 위해 웹 앱과 동일한 기술을 사용할 수 있습니다. 특정 기술에 국한되지 않습니다(일부 특정 기술을 사용하면 삶이 더 쉬워질 수 있지만 나중에 다시 설명하겠습니다).
• 일반적으로 백엔드와 프론트엔드를 모두 빌드해야 합니다.
• 귀하는 애플리케이션의 호스팅 및 운영에 대한 책임이 있습니다.
• Shopify에서 애플리케이션을 승인하면 릴리스 프로세스도 완전히 제어할 수 있습니다.

‍

판매자 관점에서 Shopify는 SaaS(Software-as-a-Service)이자 Shopify 앱이라고 말할 수 있습니다. 이는 판매자가 애플리케이션을 설치하기 위해 어떤 유형의 코드와도 상호 작용할 필요가 없음을 의미합니다.

Shopify 애플리케이션 구성 요소

Shopify 애플리케이션에 일반적으로 포함되는 세 가지 논리적 구성 요소를 식별합니다.

• 판매자 관리자
• 웹훅 처리
• 고객 대면 애플리케이션(매장 UI)

이 세 가지 중 마지막 것이 반드시 필요한 것은 아닙니다. 판매자에게 제공하려는 기능에 따라 다릅니다. 예를 들어 앱 Candy Rack은 세 가지 구성 요소로 구성되어 있는 반면 Loyal은 처음 두 부분으로만 구성되어 있습니다.

판매자 관리자

판매자 관리자는 판매자가 애플리케이션을 설정 및 구성하는 대시보드입니다. Shopify는 Shopify 인터페이스(소위 임베디드 애플리케이션) 내에서 판매자 관리자에게 서비스를 제공할 것을 권장합니다. 즉, iframe을 사용하여 앱을 Shopify 관리에 포함합니다.

임베디드 애플리케이션에는 다음과 같은 몇 가지 제한 사항이 있습니다.

• 인증이 작동하는 방식 때문에 단일 페이지 애플리케이션 아키텍처로 어느 정도 제한됩니다(Turbolinks 또는 Inertia.js의 도움으로 부분적 해결이 가능하지만).
• Shopify에서 제공하는 라이브러리가 있으므로 프론트엔드를 작성하는 데 React를 사용하는 것이 효율적일 수 있습니다. Polaris UI 라이브러리는 UX가 나머지 Shopify 관리자와 일치하는지 확인하고 App Bridge는 Shopify 컨텍스트 데이터를 애플리케이션에 제공하는 프론트엔드 브리지 역할을 합니다. iframe에서 실행 중입니다.

판매자 관리자는 앱과 판매자 사이의 첫 번째 접점이기도 하며 설치 프로세스를 처리하는 곳이기도 합니다. 설치는 기본적으로 OAuth를 통해 판매자의 스토어 데이터에 접근할 수 있는 권한을 얻는 것을 의미합니다.

또한 애플리케이션이 무료가 아닌 경우 청구를 처리하는 애플리케이션의 일부입니다.

웹훅 처리

Webhook은 Shopify가 설치된 상점에서 발생하는 다양한 이벤트(예: 새 주문 생성 또는 제품 업데이트)에 대해 애플리케이션에 알리는 방법입니다. 구독할 이벤트를 결정합니다.

수신된 이벤트를 기반으로 실행해야 하는 비즈니스 로직은 반드시 백그라운드 작업자가 처리해야 합니다. 그렇지 않으면 애플리케이션에 쉽게 과부하가 걸릴 수 있습니다. 또한 애플리케이션 외부에서 이벤트 수신을 위임하는 것을 고려할 수도 있습니다.

‍

고객 대면 애플리케이션(매장 UI)

애플리케이션이 Shopify Storefront를 확장하는 경우(즉, 매장 고객에게 새로운 기능을 제공함을 의미), 이를 전면 매장에 "삽입"해야 합니다. 이렇게 하려면 API를 통해 Shopify에 JavaScript 리소스를 프런트 스토어에 삽입하도록 지시해야 합니다. 이를 위해 가장 많이 사용되는 두 가지 방법이 있습니다. 스크립트 태그 및 앱 포함 차단입니다. 앱 블록(앱 섹션이라고도 함)을 사용하여 일부 시각적 구성 요소로 상점 첫화면 테마를 직접 확장할 수도 있습니다.

고객 대면 애플리케이션의 개발은 전체 프로세스에서 가장 어려운 부분일 수 있습니다. 일반적으로 프런트 스토어의 기본 동작을 확장하거나 재정의합니다. 이 작업을 수행할 때 다양한 스토어 설정과 함께 다양한 Shopify 테마에서 작동하며 예상치 못한 상황에서 아무 것도 손상시키지 않는 방식으로 작동하는지 확인해야 합니다. 이 외에도 앱을 방해하는 다른 타사 응용 프로그램이 항상 있을 수 있습니다.

Front Store UI는 앱의 성능과 크기에 주의를 기울여야 하는 곳이기도 합니다.

Shopify 앱 개발의 진화

전에 Shopify 애플리케이션을 구축하는 것은 기본적으로 웹 애플리케이션 개발이라고 말했지만 이 진술은 실제로 부분적으로만 사실입니다. 2021년에 Shopify는 체크아웃 확장 개념을 도입했습니다. 그 전에는 Shopify 앱으로 결제 기능을 확장할 수 없었습니다. 이 측면에서 개발자 경험은 웹 앱과 다릅니다. 매우 제한된 환경(예: 미리 준비된 React 구성 요소의 지정된 세트만 사용할 수 있음)에서 발생하고 빌드 및 릴리스 프로세스가 Shopify에서 처리되기 때문입니다.

앞으로 Shopify는 타사 응용 프로그램을 더 많이 제어하기 위해 다른 영역에서 이 접근 방식으로 이동할 가능성이 있습니다. 결과적으로 Shopify 앱 개발은 웹 앱 개발에서 더 멀리 이동할 것입니다.

Digismoothie 테크 스택

‍

이 기사에서 우리가 사용하는 기술에 대해 자세히 알아볼 수 있습니다.

결론

기술적인 관점에서 Shopify 애플리케이션을 구축하는 것이 무엇을 의미하고 어떤 기술을 사용할 수 있는지 배웠기를 바랍니다.

마지막으로 처음에 던졌던 질문으로 돌아가 보겠습니다. 웹 개발에 대한 배경 지식이 있는 엔지니어가 Shopify 애플리케이션 작업 팀에 합류하는 것이 문제입니까? 나는 확실히 아니라고 말할 것입니다. 엔지니어가 최신 웹 애플리케이션 개발에 사용되는 개념과 기술을 잘 이해하고 있다면 매우 빠르게 이동할 수 있습니다. Shopify 생태계 및 API에 대한 지식은 단계별로 제공됩니다.