Part 3-5. CTA 버튼과 팝업

웹사이트를 왜 만드나요? 대부분은 방문자에게 뭔가를 하게 하려는 거잖아요.

연락 받기, 상담 신청, 뉴스레터 구독, 포트폴리오 다운로드... 이런 행동을 유도하는 게 CTA(Call to Action)입니다.

Oopy에서는 CTA 버튼과 팝업을 쉽게 만들 수 있어요. 사실 Oopy에서 가장 인기 있는 기능 중 하나입니다.

Oopy 콘솔에서 "스타일 설정" → "CTA"로 들어갑니다.

버튼 텍스트: 버튼에 표시될 문구입니다. "무료 상담 신청", "지금 시작하기", "문의하기" 같은 거요.

링크 URL: 버튼을 클릭하면 이동할 주소입니다.

위치: 버튼을 어디에 표시할지 정합니다. 보통 화면 오른쪽 하단에 고정으로 두는 경우가 많아요.

배경색: 버튼 색상을 바꿀 수 있습니다. 사이트 메인 컬러와 맞추거나, 눈에 띄는 색으로 설정하세요.

텍스트 색상: 버튼 안의 글자 색상입니다.

모서리: 둥글게 할지, 각지게 할지 설정합니다.

화면 위에 뜨는 팝업도 만들 수 있습니다.

Oopy 콘솔에서 "스타일 설정" → "팝업"으로 들어갑니다.

제목: 팝업 상단에 표시되는 제목입니다.

내용: 팝업 본문입니다. 공지사항, 이벤트 안내, 할인 코드 같은 걸 넣을 수 있어요.

버튼: 팝업 안에 버튼을 추가할 수 있습니다. "자세히 보기", "닫기" 같은 거요.

팝업은 효과적이지만, 남용하면 역효과입니다.

들어가자마자 팝업, 스크롤하면 팝업, 나가려고 하면 팝업... 이러면 방문자가 짜증나서 그냥 나가버려요.

정말 중요한 공지나 기간 한정 이벤트에만 쓰세요. 평소에는 CTA 버튼으로 충분합니다.

베이직 플랜에서는 팝업 1개만 설정할 수 있습니다.

프로 플랜에서는 팝업 3개까지 가능하고, YAML을 이용해서 페이지별로 다른 팝업을 설정할 수도 있어요.

여러 페이지에서 각각 다른 팝업을 보여주고 싶다면 프로 플랜이 필요합니다.

구체적으로: "문의하기"보다 "무료 상담 신청하기"가 낫습니다.

혜택 강조: "다운로드"보다 "무료 가이드북 받기"가 클릭을 더 유도해요.

긴급성: "지금 신청하면 30% 할인" 같은 문구가 효과적입니다. 단, 거짓말은 안 돼요.

눈에 띄는 색상: 배경과 대비되는 색으로 설정하세요. 하지만 너무 촌스럽지 않게.

CTA와 팝업까지 설정했으면, 방문자를 행동하게 만드는 준비가 된 겁니다.

다음은 코드를 직접 써서 더 세밀하게 꾸미는 방법을 알아볼게요. 걱정 마세요, 복붙만 하면 됩니다.

후기 작성(클릭)하고 내 홈페이지 SEO 피드백 보고서 받아보세요!