30분 만에 저코드 드래그 앤 드롭 위젯으로 마케팅 페이지 만들기
2024-10-04 01:22:11서론
안녕하세요, 개발자 여러분! 👋
오늘은 모든 개발자나 소규모 비즈니스 오너들이 필요로 하는 빠르고 효율적인 마케팅 페이지 구축 방법을 소개해드리려 합니다. 특히, 개발자가 아닌 마케팅 팀도 쉽게 수정할 수 있는 방법이죠. 저희는 Sling.biz라는 저코드 콘텐츠 관리 시스템(CMS)을 활용해, 30분 안에 완전히 기능적인 마케팅 페이지를 구축하는 방법을 진행해볼 것입니다.
사이드 프로젝트를 진행하시거나 새로운 제품을 출시하거나 클라이언트를 도와줄 때 이 방법이 많은 시간을 절약해줄 것입니다. 또한, 마케팅 팀이 빠르게 변동 사항을 반영할 수 있도록 도와줄 수 있습니다.
단계별 가이드
이번에는 간단한 마케팅 페이지를 제작하는 것을 목표로 합니다. 아래와 같은 랜딩 페이지를 생각해봅시다: 히어로 배너와 동적으로 업데이트 가능한 콘텐츠가 포함된 페이지입니다.
1단계: 프로젝트 설정하기
페이지를 구축하기 위해서는 프로젝트를 먼저 설정해야 합니다. 다음 명령어를 실행해 프로젝트의 기초를 빠르게 마련할 수 있습니다.
yarn create sling-app my-marketing-page
그 다음 Hosted Solution을 선택해 Sling Studio를 직접 관리할 필요 없이 바로 사용합니다. 다음 단계에서 키를 추가할 필요는 없으며, 설치를 완료해줍니다.
2단계: Sling Studio 계정 생성하기
다음은 Sling Studio에서 무료 계정을 만들고 키를 얻는 과정입니다. 자가 호스팅이 가능하지만, 이번 포스트에서는 호스팅 솔루션을 사용할 것입니다.
Sling Studio의 회원가입 페이지로 이동하여 계정을 생성합니다. 온보딩 과정을 마친 후, 설정 페이지로 이동하여 키를 얻습니다.
이제 프로젝트의 .env 파일에 키를 업데이트하고 Sling 프론트엔드 앱을 다시 시작하면 샘플 제품 목록 페이지를 볼 수 있습니다.
3단계: 커스텀 리액트 위젯 생성하기
이제 다양한 기능을 가진 리액트 위젯을 생성해보겠습니다. 필요할 위젯은 다음과 같습니다:
- 응답형 헤더
- 동적으로 업데이트되는 히어로 배너 위젯
- 영상 재생 기능이 포함된 ShowcaseVideo 위젯
- JSON 배열로 제공되는 다양한 커피 종류를 보여주는 CoffeeTypes 위젯
위젯을 만드는 방법에 대한 코드는 YouTube 비디오나 GitHub 소스 코드를 참조해 주세요.
4단계: 위젯 드래그 앤 드롭하기
Sling Studio에서 위젯을 디자인 순서에 맞게 드래그 앤 드롭합니다. 이 CMS는 미리 정의된 위젯 세트를 제공하지만, 원하는 대로 새로운 위젯을 만들어 사용할 수 있습니다. 위젯을 추가하고 구성하는 간단한 방법은 다음과 같습니다:
- 히어로 블록을 페이지에 드래그합니다.
- 위젯 편집기를 사용해 텍스트, 이미지, CTA 버튼을 커스터마이즈합니다.
헤더의 props도 업데이트해줍니다.
마찬가지로, 모든 위젯의 props를 업데이트합니다. CoffeeOptions 위젯의 경우 JSON 타입을 선택하여 JSON 배열을 제공해야 합니다. 그 외에도 기능, 가격 및 VideoPlayer 위젯과 같은 다른 컴포넌트를 꾸소적으로 드래그합니다.
5단계: 미리보기 및 배포하기
마케팅 페이지의 디자인이 끝나면 미리보기하여 모든 것이 제대로 보이는지 확인합니다. 페이지를 직접 앱에서 배포하거나 원하는 호스팅 공급자에게 배포할 수 있도록 내보낼 수 있습니다.
6단계: 참고 자료
이렇게 간단한 단계들을 통해 누구나 손쉽게 마케팅 페이지를 구축할 수 있습니다. 더 궁금한 점이 있다면, 아래의 비디오 링크나 GitHub 자료를 참고하시길 바랍니다.
이제 여러분도 30분 만에 저코드 드래그 앤 드롭 방식으로 마케팅 페이지를 쉽게 구축할 수 있습니다! 마케팅 팀의 피드백을 신속하게 반영하고, 반응형 웹 디자인을 통해 사용자 경험을 개선해보세요. 이 방법을 활용하면 여러분의 비즈니스에 많은 도움이 될 것입니다!