← 모든 프로젝트

ARTSYBUCKET

고객사는 포스터와 액자를 판매하는 이커머스 스토어를 신속히 오픈하기를 원했습니다. WordPress와 WooCommerce가 비용 효율적이고 사용하기 쉬운 솔루션으로 선택되었으나, UI 테마는 처음부터 제작해야 했고 일부 맞춤 개발도 필요했습니다.

  • React JS
  • React Native
ARTSYBUCKET

프로젝트 목표

고객사는 포스터와 액자를 판매하는 이커머스 스토어를 신속히 오픈하기를 원했습니다. WordPress와 WooCommerce가 비용 효율적이고 사용하기 쉬운 솔루션으로 선택되었으나, UI 테마는 처음부터 제작해야 했고 일부 맞춤 개발도 필요했습니다.

프로젝트 설명

저희는 풀스택 개발자로서 사이트 코드베이스, 맞춤 UI 테마 개발, 배포 및 서버 관리, 맞춤 기능 개발까지 이 프로젝트의 모든 구성을 지원했습니다. 수행한 기능은 다음과 같습니다.

– Savoy 테마 설치 및 쇼핑 페이지, 카테고리 페이지, 상품 상세 페이지 커스터마이즈

– WooCommerce Product Bundle 플러그인 설치 및 상품 번들 상세 페이지 커스터마이즈

– SEO 및 프론트엔드 성능 최적화

– Akeneo(제품 정보 관리 시스템) 연동: WooCommerceConnector를 사용해 PIM에서 WooCommerce로 상품을 가져옵니다. WooCommerceConnector가 지원하지 않는 추가 속성을 가져오기 위한 맞춤 훅도 구현했습니다.

– Unsplash API 연동: Unsplash API에서 무료 이미지를 다운로드하고 이를 바탕으로 포스터 상품을 자동 생성합니다. 편집자는 가져온 상품 중 원하는 항목을 수동으로 선택해 게시할 수 있습니다.

– 개인화 포스터 개발: 방문자가 이름, 생일 등 정보를 제출하면 포스터에 그려지고, 동적으로 생성된 포스터를 미리 본 뒤 주문할 수 있습니다. 백그라운드에서는 주문 프로세스에 훅을 걸어 고품질 인쇄용 PDF를 동적으로 생성한 뒤 이메일로 인쇄 업체에 전송합니다.

– 최상의 성능을 위해 사이트가 CloudFront에서 완전히 동작하도록 WooCommerce와 Savoy 테마 내부에 깊이 있는 커스터마이즈를 구현했습니다. 프론트엔드 리소스에 대한 모범 사례와 최적화도 모두 적용했습니다.

사용 기술

– 데이터베이스: MySQL

– 웹 앱: WordPress, WooCommerce, Akeneo, WooCommerceConnector plugin

– 웹 프론트엔드: WordPress, jQuery, jQuery UI

– 배포 모델 및 도구: AWS EC2, Nginx, Cloudfront.

스크린샷