워드프레스] 글을 잘 이해했는지 확인할 수 있는 폼(form) 만들기

연애를 하다보면 상대방이 정말 날 사랑하는지 확인하고 싶을 때가 있다. 기념일에 주고 받는 선물에서부터 연인의 작은 행동 하나까지를 살펴보며 연인이 변했는지를 가늠하고 체감할 수도 있다. 하지만 내가 인터넷에 쓰는 글 들은 어떨까? 독자들이 내 글을 얼마나 읽을지, 조금만 읽다가 벗어나는 건 아닌지, 내 글을 어떻게 생각할지, 내 글이 그들에게 어떤 도움이 될 지에 대해 전혀 생각도 안하면서 글을 써왔던 것 같다. 즉, 퍼주기식 사랑만 한 것이다. 그리고 퍼준 사랑이 가장 좋고 최고라는 방심을 하면서 말이다.

​

독자의 사랑을 확인하는 방법에 대해서 고민하던 중 알아낸 방법중에 하나는 Scroll Depth였다. 어느정도의 스크롤을 내린 후에 이탈을 하는지에 대해 Google tag manager를 통해서 확인할 수 있도록 설정을 완료하였다. 하지만 정량적인 데이터만 얻는 것에 대해 '저 숫자가 정말 의미가 있는 것일까?'라는 것에 대해 늘 고민이 많았다.

​

우연히 발견한 내용.

그러다 우연히 구글 Analytics campaign과 관련해서 학습할 내용이 있어서 구글링을 하던 중에 괜찮은 사이트를 알게 되었다. Analyticsmarketing 이라는 곳이었는데, 글도 깔끔하고 설명도 깔끔했다. 글 내용보다 내 눈에 와닿은 것은 최하단부에 있는 이해도를 확인을 위한 설문이었다. 평소 작성하던 '댓글 혹은 좋아요'가 아닌 설문을 통해서 업데이트를 계속 해줄 것이라는 믿음이 생겼고, 왜인지 모르게 설문에 참여하고 싶은 느낌이 들었다. 일종의 그로스해킹이 아닐까 생각도 들었다.

 

분석마케팅

구글애널리틱스(Google Analytics) & 구글태그관리자(Google Tag Manager)

analyticsmarketing.co.kr

Analyticsmarketing.co.kr 의 글을 읽고 나면 하단부에 나오는 설문

글이 마음에 드셨나요?

상품을 사용하다 마음에 들면 상품후기를 남긴다. 그러한 후기나 댓글을 작성하는 것은 글자 수에 상관없이 거부감을 주는 행위이다. 그런 거부감을 없애는 방법 중에 하나가 '좋아요' 버튼이다. '좋아요'는 소통이 기본이 되면서 큰 거부감을 주지 않는 행위이다. 간단한 콘텐츠 하단부에 설치된 설문항은 거부감이 '후기(댓글)'과 '좋아요 버튼'에 비해 중간 정도인 것 같다.

후기 혹은 댓글	매우 부담	운영자에게 활용성 있음 해당 상품 및 콘텐츠의 가치를 높여줌
익명 후기 혹은 댓글	부담	운영자에게 활용성 높음
설문 (익명)	부담 적음	운영자 의도대로 활용할 수 있음 추후 정리 편집 가능
좋아요 버튼	부담 없음	숫자만 활용할 수 있음

배움의 기본은 모방

위 홈페이지에 적용된 내용은 Ninja Forms 였다. 크롬(Chrome) 요소검사를 시행해보았더니, class 며 Id 모두 'ninja-form'이라는 단어가 있음을 확인하였고, Ninja-form은 워드프레스의 유명한 'Form 플러그인'이었다. 그래서 어떤게 좋은지 모르고 Ninja Forms로 사용하려고 마음먹었으나, 검색해보니 Jetpack에도 Contact form 이 있다는 것을 알게 되었다. 사실 글을 쓸때마다 보고는 있었지만 1년 반 동안 연락 폼(Contact form)을 활용할 생각을 전혀 못했던 것이다.

이미 너무 무거운 당신

포해피우먼닷컴은 워드프레스닷컴으로 운영하고 있기도 하고 이것저것 설치를 너무 많이 해둔 관계로 너무 무겁다. 이미 느린 홈페이지를 굳이 더 무겁게 바꾸고 싶은 의향은 전혀 없었고, 아무도 안 쓸지도 모르는 설문조사에 너무 에너지를 쏟는건 아니다 싶어서 Jetpack 에 포함된 기능을 사용하기로 하였다. 기능은 Ninja Form이 좋겠지만, 무조건 좋다고 덕지덕지 붙여놓은 플러그인들을 잘 관리할 자신이 없기도 해서이다.

수 많은 아름다운 장신구를 많이 한다고 그 아름다움이 배가 되는 것은 아닐 것이다. 출처: https://hub.bloomjoy.com/pizzabottle/small-outfit-problems-make-look-like-hot-mess/

이제 설문조사 Form을 만들어보자.

워드프레스 에디터에 들어갔더니, 연락 폼(Contact Form) 추가하기가 있었다. 예전부터 계속 보던 내용이지만, 쓸 일이 없을 것이라 생각하고 전혀 관심을 주지 않았다. 클릭하면 연락 기본 폼이 형성된다.

워드프레스 에디터

기본 폼 형태로는 설문조사를 진행할 수 없어서 편집을 하기로 한다. 해당 폼을 클릭하면 편집할 수 있다. 원하는 형태로 작성을 하고 나면 아래와 같이 형성이 된다.

라디오 버튼을 키우자

위 처럼 작성된 Form 은 아래의 이미지처럼 나오는데, 뭔가 마음에 들지 않는다. CSS를 손 보았다. 내 홈페이지 방문객의 85%는 모바일을 통해서 접속을 하는데, 컴퓨터 마우스로 클릭하기 좋은 디자인의 '라디오버튼'은 너무나도 작았다. 그래서 라디오버튼을 키우기로 결심하였다.

.grunion-field-wrap input[type=radio]{ font-size:17px; width:23px; height:23px } /*라디오 버튼의 크기를 키운다*/

Input[type=radio]를 통해 라디오 버튼의 크기를 조절할 수 있었으나, Vertical align이 안 맞다. 은근히 눈에 거슬렸다. 다른 방법을 검색해보았다. scale을 바꾸는 방법인데, 평면에서 요소를 확대/축소를 할 수 있는 css의 Scale을 사용하였다. 해당 내용은 아래와 같다. 그리고 간격을 조절하기 위해 margin을 삽입하였다.

.grunion-field-wrap input[type=radio]{ /* Double-sized Checkboxes */ -ms-transform: scale(2); /* IE */ -moz-transform: scale(2); /* FF */ -webkit-transform: scale(2); /* Safari and Chrome */ -o-transform: scale(2); /* Opera */ margin: 10px; }

결과가 다소 마음에 들었다. 하지만, 모든 Label 마다 bold 처리 된 것이 마음에 안들어서 추가로 font-weight도 변경해주었다.

최종 변경

Jetpack css를 변경하는게 사실은 더 좋을텐데, 그러다 또 사고칠까 싶어서 그냥 추가 css로 작성하였다. 결국 css 코드가 훨씬 더 늘었다.쩝...

/*설문조사 -Jet pack 기능 20190322 */ label.grunion-radio-label { font-weight: 500!important; } .grunion-field-wrap input[type=radio]{ /* Double-sized Checkboxes */ -ms-transform: scale(2); /* IE */ -moz-transform: scale(2); /* FF */ -webkit-transform: scale(2); /* Safari and Chrome */ -o-transform: scale(2); /* Opera */ margin: 10px; } .grunion-field-text-wrap input[type=text] { border: grey 1px solid; width: 100%; }

매번 저 내용을 입력하자니 너무 노가다...

고로 늘 하듯이 Ad insert plugin을 이용해서 모든 글에 삽입!!

걱정과 달리 너무 잘 되고, 이 곳에서 작성된 내용들은 wp-admin에서 피드백 항목을 통해서 살펴볼 수 있었다. 조금 부족한 점이 많은 Form인듯 하지만 현재 홈페이지 댓글을 아무도 안달듯이 아무도 사용하지 않을 Form에 너무 많은 에너지를 사용하고 싶지 않았다. 많은 사람들이 Form을 이용하게 되면 추후 다른 유료 플러그인도 고려해봐야겠다.

작성된 폼을 확인하고 싶은 분은 아래 링크('임신 9주차, 약 먹어도 되나요?'라는 글을 이용하시면 확인할 수 있습니다.

산모의 약물 복용, 임신 중인데… 약 먹어도 괜찮아?

먹는 식품, 누워 자는 침대, 숨 쉬는 공기까지 걱정하며 살아야 하는 시대에 살고 있습니다. 아기와 함께 하기 때문에 더욱 더 신경이 쓰이는 것은 어쩔 수 없는 일이지요.특히나 약물을 복용하는 것은 산모에게 늘 고민과 걱정이 됩니다. '산모의 약물 복용' 이야기하겠습니다.

 

2019.04.01워드프레스-피드백 중간 결과 확인

이전에 만들어 놓았던 form에 대한 피드백이 꾸준하게 들어오고 있다. 글이 끝나는 부위에 작성해둠으로서 '사용자'에게 큰 불편은 유도하지 않았다. "진화된 그로스해킹"이라는 책에도 설문조사에 대한 내용이 나오는데, 해당 내용은 아래와 같다.

질문은 하나 혹은 최대 두 개로 할 것을 권한다. 주관식이어도 좋고 몇 개의 보기가 있는 객관식이어도 좋다. 우리는 고객이 자유롭게 대답을 할 수 있는 개방형 질문을 선호한다. ...(중략)...

가능한 질문 유형에는 다음과 같은 것들이 있다.

- 이 페이지에서 어떤 것을 찾고 계셨습니까?

- 이 페이지에 고객님이 찾는 정보가 있습니까?

- 오늘 어떤 일을 하기 위해 우리 사이트 혹은 앱에 들어오셨습니까?

진화된 그로스해킹 챕터6 활성화 해킹하기 272page

현재까지 모인 설문 조사는 25개였다. DAU가 그리 크지 않기 때문에 꽤 많은 수치라고 생각된다. 그리고 설문폼이 위치한 곳은 콘텐츠의 가장 하단부였던 점을 고려해보면 글을 끝까지 읽은 사람들은 재부분 만족했음을 느낄 수 있었다.

​

그런데 이 내용을 보았을 때 크게 얻어지는 내용은 없었다. 가장 유용했었던 의견은 '대개'라고 써야할 내용을 '대게'라고 썼다고 알려주신 것이다. 그 외에는 쓸 만한 인사이트가 없었고, 설문조사에 답을 하고 간 사람은 이미 글에 대해 만족을 한 사람이기 때문에 글에 대한 만족도는 매우 높았다.

​

25개 설문 결과에서 모두 '도움이 되었다-매우 도움이 되었다'라는 결과를 적어주었다. 글의 난이도 또한 '보통-매우 쉬움'으로 답변하여서 글을 읽고 만족한 사람을 대상으로는 글이 크게 어렵게 쓰이지 않았구나라는 결론을 내릴 수 있었다.

하지만... 문제는?

글을 조금 읽고 이탈한 사람들에 대한 설문이 진행되지 않는다는 점. 글을 끝까지 읽고도 설문조사에 응해주지 않는 사람들에 대해서 파악할 수 없다는 점이다.

​

그럼 지금부터 준비해보아야할 내용은 무엇인가? 이탈할 때 설문조사를 하는 것은 개발적 요소가 들어가야한다. 조금 더 간단하게 수정할 수 있는 내용은 '설문조사 내용'을 수정하는 것이다. 아래와 같이 수정해볼까 한다.

​

- 이 페이지를 어떻게 알게 되셨나요?(객관식)

- 이 페이지에서 어떤 것을 찾고 계셨습니까?

- 이 페이지에 고객님이 찾는 정보가 있습니까? (객관식)

​

첫 번째 질문을 통해서 트래픽 소스별 설문조사에 대한 반응도를 파악해보려고 하고, 두 세번째 질문을 통해서는 어떤 내용을 원해서 검색했는지, 실제 그 내용이 있는지 확인하여 콘텐츠의 내용 추가를 고려해보려 한다.

 

2019.04.18 폼 형태 내용 추가 

메일링 리스트를 만들 수 있도록 메일 주소를 남겨달라는 메시지를 넣었다. 하지만 아마도 아무로 신청하지 않을 것 같다.