X2BEE Store Front System 소개

X2BEE는 최근 Store Front 시스템을 개발하여, 솔루션에 포함을 시켰습니다. 이에 따라서 X2BEE의 표준 Store Front 시스템을 사용하면 보다 빠르게 다양한 Store Front (Frontend shop)을 구성할 수 있습니다. X2BEE는 mobile-first 전략에 따라서 모바일 기준의 반응형으로 제작되어 PC와 동시에 지원하도록 구현되어 있습니다.

최신 기술스택을 활용하고 X2BEE의 장점인 MACH 아키텍처에 적합하도록 개발이 되었습니다. 각각의 특징에 대해서 살펴보도록 하겠습니다.

최신 기술스택의 적용

X2BEE의 Store Front는 React 프레임웍 기반으로 Next.js, TypeScript, Tailwindcss로 구현이 되었습니다. React는 META가 개발하여 배포하는 오픈소스로 전세계 개발자 커뮤니티의 강력한 지원을 받고 있습니다.

또한 Next.js를 사용하여 UI 컴포넌트를 라이브러리화 시켜서 재사용성을 극대화하였습니다. TypeScrip와 Tailwindcss를 사용하여 개발 생산성을 높이고, 개발자가 UI 라이브러리를 재사용하여 빠르게 수정 및 배포가 가능하도록 구현을 했습니다.

Next.js의 특징

Feature	Description

Feature	Description
라우팅	레이아웃, 중첩 라우팅, 로딩 상태, 오류 처리 등을 지원하는 서버 구성 요소 위에 구축된 파일 시스템 기반 라우터입니다.
렌더링	클라이언트 및 서버 구성 요소를 사용한 클라이언트 측 및 서버 측 렌더링. Next.js를 사용하여 서버에서 정적 및 동적 렌더링으로 더욱 최적화되었습니다. Edge 및 Node.js 런타임에서 스트리밍합니다.
데이터 페칭	서버 구성 요소의 async/await를 사용하여 데이터 가져오기를 단순화하고 요청 메모, 데이터 캐싱 및 유효성 재검사를 위한 확장된 가져오기 API를 제공합니다.
스타일링	CSS 모듈, Tailwind CSS, CSS-in-JS 등 선호하는 스타일 지정 방법 지원
최적화	애플리케이션의 핵심 웹 바이탈 및 사용자 경험을 개선하기 위한 이미지, 글꼴 및 스크립트 최적화.
타입스크립트	더 나은 유형 검사, 더 효율적인 컴파일, 사용자 정의 TypeScript 플러그인 및 유형 검사기를 통해 TypeScript에 대한 지원이 향상되었습니다.

개발자들은 플래티어의 X2BEE Techhub에서 제공하는 개발가이드를 따라서 X2BEE를 이용하여 Store Front를 쉽고 빠르게 구축할 수 있습니다. (개발가이드 바로가기)

표준화된 스토리보드, 디자인 시스템, 컴포넌트/퍼블리싱 시스템 제공

일반적으로 커머스의 Store Front를 구현하기 위해서는
기획 > 디자인 > 퍼블리싱 > 개발 단계를 거치게 됩니다.

이에 따라서 기획에서는 스토리보드를 작성하고, 디자인에서는 디자인툴을 이용하여 디자인을 하게 됩니다. 이후 퍼블리셔가 UI 컴포넌트를 만들고 웹 페이지를 퍼블리싱합니다. X2BEE는 이러한 과정에 필요한 각 산출물들을 제공하고 있으며, 커머스에서 많이 사용하는 기능과 컴포넌트를 구현하여 표준화된 시스템으로 제공하고 있습니다.

표준 스토리보드 제공

X2BEE가 분류한 각 모듈별도 커머스에서 필요한 일반적인 기능과 화면에 대해서 정의된 스토리보드를 제공해드립니다. 고객은 이를 기본으로 고객에게 특화된 기능이나 커스터마이징, 화면 배치 등을 수정하셔서 사용하시면 됩니다.

피그마로 제작된 디자인 시스템 및 화면 디자인 제공

디자인은 figma를 이용하여 디자인 시스템을 작성하고, 이에 따라서 화면이 디자인되어 있습니다. 디자이너는 폰트의 종류를 수정하면 전체 디자인에 폰트가 자동으로 변경되어 적용이되고, Primary, Secondary Color 들 원하시는 컬러를 변경하면 전체 디자인에 적용되도록 구성되어 있습니다. 이를 통해 브랜드만의 아이덴티티를 빠르게 적용할 수 있습니다.

컴포넌트 라이브러리 및 퍼블리싱 파일 제공

Next.js를 이용하여 Store Front에 사용하는 다양한 UI 컴포넌트를 라이브러리화 시켜서 제공해드립니다. 또한 개별 페이지에 대한 화면도 동시에 제공하고 있습니다. Tailwindcss를 사용하여 공통 요소를 관리하고 있으며, 디자인과 마찬가지로 브랜드의 아이덴티티에 적합한 색상, 아이콘 등을 수정하면 전체 페이지에 적용될 수 있도록 구성이 되어 있습니다.

Store Front 소스코드 포함

X2BEE는 이러한 표준화된 Store Front 개발 단계를 거쳐서 최종적으로 화면에 표시되는 웹 사이트에 대한 소스코드를 동시에 제공합니다. 표준화된 Store Front 개발 프로세스에 따라서 고객은 보다 빠르고 쉽게 커머스 사이트를 개발하고 서비스를 시작하실 수 있습니다.