본문 바로가기

티스토리 수익형 블로거의 황금알 CTA 버튼

큰손언니 발행일 : 2023-07-24

CTA버튼은 무엇입니까?

"CTA 버튼" "Call to Action 버튼"의 약자로, 웹사이트나 앱 등 디지털 플랫폼에서 사용자에게 특정 동작을 유도하는 버튼을 말합니다. 이 버튼은 주로 사용자가 원하는 동작을 취하도록 유도하거나, 특정 서비스를 이용하도록 유도하거나, 판매를 유도하는 등의 목적으로 사용됩니다. 일반적으로 CTA 버튼은 눈에 띄고 명확한 텍스트를 가지며, 사용자에게 눌러서 원하는 동작을 수행하도록 유도하는 역할을 합니다. 몇 가지 CTA 버튼의 예시로는 "지금 바로 시작하기", "무료로 등록하기", "구매하기", "더 알아보기" 등이 있습니다. 이 버튼들은 사용자 경험을 개선하고 원하는 결과를 이끌어내는 데 중요한 역할을 합니다. CTA 버튼을 만들고 사람들이 버튼을 클릭하게끔 유도하게끔 하는 것이 수익형 블로거의 실력이다.

CTA(Call to Action) 버튼을 만드는 방법 

1. 첫 번째 동작을 유도하는 설득력 있는 문구를 사용하자.

무조건 버튼을 클릭하게끔 만들자라고 해석을 하시면 됩니다. 버튼클릭으로 보는 사람이 결론을 바로 얻을 수 있게 해 줘야 마우스가 움직입니다.

2. 두 번째 꼭 맞는 색상으로 CTA 버튼을 만들자.

단순하게 적색, 황색을 추천한다. 신호등은 사람들 눈에 가장 각인이 잘 되고 연령에 상관없이 뇌가 교육이 되어있다. 우리도 버튼을 할 때는 빨간색을 해서 사람들 보고 이거 클릭해라고 눈에 더 잘 보이게 만들어 주는 것이다.

3. 세 번째 CTA  버튼의 배치는 고정적으로 배치하셔야 됩니다.

하단에 중복배치도 가능합니다. 그 이유는 100명이 들어왔을 때 상단에 100명 다 보지만 하단엔 글 읽다가 중간중간 나가고 마지막 남은 20명만 버튼을 보면 기회가 없어지기 때문이다.

4. 네 번째 CTA 버튼을 크게 하세요.

당연한 말이기도 하지만 미관상 디자인이 미워서 작고 심플하게 하는데 이것은 수익상 옳지 않습니다. 사람들 눈에 잘 띄게 버튼을 크게 하는 것입니다.

5. 다섯 번째 버튼의 모양이 너무 중요합니다.

직사각형 네모에서 동그라미로 바꾸면 수익률이 35% 더 클릭률이 좋아진다는 겁니다.

6. 여섯 번째 긴박한 분위기 만들자.

이것은 여러분 머릿속에 꼭 각인하셔야 됩니다. 홈쇼핑의 쇼호스트나 유튜브 어그로같이 조급함을 만들어서 그것을 활용하라는 겁니다. 사람은 조급함이 마음이 들 때 버튼을 클릭하게 되어 있습니다. 나쁘게 생각하지 말고 긍정적으로 영업한다고 생각합시다.

7. 일곱 번째 주위에는 여백의 미를 두어야 합니다.

글과 광고가 빽빽하고 정신없으면 일단 다른 곳으로 패스하게 됩니다. 잘 안 보여서 CTA버튼클릭을 안 합니다. 결국 우리의 수익주인공은 CTA버튼입니다. 사람들이 버튼을 잘 보게 만들려면 버튼 뒤에 싹 다 치워버려야 합니다.

문구도 소제목도 다 치워버립니다. 치우려면 줄 바꿈을 두 번 세 번 뛰어 놓으시면 됩니다. 클릭률이 더 좋아집니다.

CTA버틍의-예시용
출처 아로백강사님 강의용 티스토리, 사진클릭하면 바로 연결됩니다.

이러한 요소들을 고려하여 웹페이지나 앱 등에서 효과적인 CTA 버튼을 만들 수 있습니다. 디자인은 미리캔버스나 여러가지 앱에서 무료로 쉽게 만들 수 있습니다. 지금 당장 실행해 보세요.

CTA(Call to Action ) 버튼을 만드는 방법에 대해 설명드리겠습니다.

1) 티스토리 블로그에 로그인하고 관리하기 페이지로 이동합니다.

2) 왼쪽 메뉴에서꾸미기를 선택 합니다.

3) 스킨 편집을 클릭합니다.

4) 스킨 편집 페이지에서 HTML 편집기를 엽니다.

5) HTML 편집기에서 원하는 위치에 CTA 버튼을 추가하려면, 아래의 코드를 복사하여 붙여 넣습니다.

html Copy code

<a href="링크 주소" class="btn">버튼 텍스트</a>

6) 위 코드에서 "링크 주소"를 클릭 시 이동하길 원하는 페이지나 링크로 변경하고, "버튼 텍스트"를 실제 버튼에 표시할 텍스트로 변경합니다.

버튼의 디자인을 변경하고 싶다면, "class" 속성의 값을 수정하거나, 추가적인 CSS 스타일을 적용하여 디자인을 커스터마이징 할 수 있습니다.

변경된 내용을 저장하고 미리 보기를 통해 확인한 후에 적용하면 CTA 버튼이 생성됩니다.

 

위의 방법을 따라 하면 티스토리 블로그에 원하는 CTA 버튼을 쉽게 만들 수 있습니다. 버튼의 디자인은 CSS를 이용하여 스타일링할 수 있으므로, 블로그에 잘 어울리는 디자인으로 꾸며보세요!

버튼의 디자인은 CSS를 이용하서 정리된 것은 아래 사이트를 참고하세요.

https://record-than-remember.tistory.com/entry/CSS-%EB%B2%84%ED%8A%BC-%EC%8A%A4%ED%83%80%EC%9D%BC-%EB%AA%A8%EC%9D%8C

 

CSS / 버튼 스타일 모음 / 버튼 디자인 해주는 사이트

https://nanati.me/css-button-design/ css 버튼 디자인 모음 요즘에는 html, css, js등의 코드를 공개하여 모두가 함께 쓸 수 있도록 공유하는 사이트가 무척 많아졌습니다. 그 중에도 제가 자주 체크하는 사이

record-than-remember.tistory.com

 

댓글