멋쟁이사자처럼 부트캠프 그로스마케팅 4기_260528_이메일마케팅(프레이머/재피어/Kit)

DAY 19 · 그로스마케팅 부트캠프

UX 설계의 양면:
다크패턴과 이메일 마케팅 실전

고객을 기만하는 인터페이스 설계의 이면을 파헤치고, Zapier + Kit + Framer로 완전 자동화된 Welcome Mail 시스템을 구축한다.

UX / UI 다크패턴 Retention Email Open Rate Kit (ConvertKit) Zapier 자동화 Framer 연동

📋 목차

1. UX vs UI — 마케터가 만드는 경험
2. 다크패턴 (Dark Patterns) 완전 정리
3. Retention이 AARRR의 시작점인 이유
4. 이메일 오픈율 올리는 5가지 전략
5. Kit (ConvertKit) 플랫폼 핵심 기능
6. Welcome Mail 자동화 시스템 구축 실습
7. 노코드 툴 Framer + Kit 연동
8. 오늘의 핵심 정리

SECTION 01

UX vs UI — 마케터가 만드는 경험

디자이너의 영역처럼 보이지만, 이메일·자동화 시나리오·CRM 응대 방식 모두 고객에게는 하나의 UX 경험이다.

구분	UI (User Interface)	UX (User Experience)
개념	사용자가 마주하는 시각적 요소	사용자가 느끼는 총체적인 과정과 감정
오프라인 비유	매장 인테리어, 간판, 진열대 디자인	문 열고 들어와서 계산하고 나갈 때까지의 편리함
마케팅 관점	버튼 색상, 폰트, 레이아웃	이메일 열고 → 클릭 → 구매 완료까지 막힘없는 흐름
핵심 질문	보기 좋은가?	쓰기 편하고 매끄러운가?

💡 핵심 인사이트

UI 디자인이 아무리 보기 좋아도 사용자의 원하는 액션을 유도하지 못한다면 실패한 UX (Bad UX)입니다. 마케터 관점에서 UX의 기준은 "이메일을 열고, 클릭하고, 구매까지 막힘 없이 도달하는가?"입니다.

Good UX

쿠팡 원클릭 결제

버튼 클릭 한 번으로 1초 만에 결제 완료 → 간편한 UX

Good UX

네이버페이 즉시 연결

인스타 광고 클릭 → 결제창 바로 연결 → Smooth UX

Good UX

생일 맞춤 쿠폰

생일날 적시에 맞춤 혜택 제공 → CRM의 Good UX

Bad UX

복잡한 비밀번호 규칙

영문 대소문자+숫자+특수문자 10자리 → 회원가입 포기 유발

---

SECTION 02 · 핵심

다크패턴 (Dark Patterns) 완전 정리

2010년 영국 UX 전문가 해리 브리그널이 처음 정의한 개념 — 사용자의 이익보다 서비스 운영자의 이익을 최우선에 두고 심리적 허점을 파고드는 UI/UX 기법.

정의

"Deceptive patterns (dark patterns) are tricks used in websites and apps that make you do things that you didn't mean to, like buying or signing up for something."
— Harry Brignull, 2010

다크패턴 (Dark Patterns) 유형 완전 정리

해리 브리그널(Harry Brignull)이 2010년 처음 정의한 사용자를 기만하는 UI/UX 설계 기법

🪲

Roach Motel

바퀴벌레 함정

이탈 방지형

가입은 쉽게, 탈퇴는 어렵게

📌 사례: 로그인 1번으로 가입 완료 → 탈퇴는 고객센터 직접 전화 필수. 해지 버튼을 배경색과 같은 색으로 숨겨두거나 결제 마지막 단계에 자동결제 조건 삽입.

💸

Hidden Costs

숨겨진 비용

매몰비용 이용

결제 직전 추가 금액 청구

📌 사례: 저렴하게 담은 장바구니 → 결제 직전 배송비·수수료 등장. "여기까지 온 시간이 아까우니 그냥 결제하자"는 매몰비용 심리 이용.

🚧

Obstruction

경로 방해형

경로 미로화

간단한 작업을 복잡하게

📌 사례: 해지 버튼이 설정 → 계정 → 고급 → 보안 메뉴 깊숙이 숨겨짐. 다단계 확인 팝업("정말 취소하시겠습니까?" 반복 노출).

😳

Confirm Shaming

확인 수치심

심리 압박형

취소 버튼에 죄책감 문구 삽입

📌 사례: "아니요, 저는 건강에 관심이 없습니다." / "아니요, 저는 똑똑한 소비자가 되고 싶지 않습니다." → 취소를 누르면 바보가 되는 느낌을 유발.

⏰

False Urgency

가짜 긴박함

FOMO 자극

거짓 카운트다운·재고 과장

📌 사례: "5분 뒤 할인 종료!" 타이머 → 새로고침해도 리셋됨. "현재 50명이 보고 있습니다" 조작 알림. "마지막 1개!" 문구 상시 노출.

🎭

Social Proof

가짜 사회적 증거

군중심리 이용

조작된 활동 알림 노출

📌 사례: "방금 김OO님이 구매했습니다" 팝업 / "이 상품 찜 1,200개" 과장 수치. 대세에 따라야 할 것 같은 심리적 압박을 가해 충동 구매를 유도.

⚠️ 마케터로서 인지해야 할 점: 다크패턴은 단기 전환율을 높일 수 있지만 브랜드 신뢰도를 심각하게 훼손합니다. 긴급성·희소성은 진짜여야 Good UX입니다.

각 유형 상세 설명

🪲 Roach Motel (바퀴벌레 함정)

원리: 체크인(가입)은 로그인 1번으로 쉽게, 체크아웃(탈퇴)은 고객센터 직접 전화나 복잡한 서류 제출이 필요하도록 설계합니다.

마케터 주의점: 해지 버튼을 배경색과 같은 색상으로 숨기거나, 수많은 메뉴를 거치도록 설계하는 행위. 결제 직전까지 무료인 것처럼 안내하다가 마지막 단계에서 자동결제 조건을 슬그머니 포함하는 것도 이 유형입니다.

💰 Hidden Costs (숨겨진 비용)

원리: 저렴한 가격에 이끌려 구매를 시작했다가 결제 완료 직전에 배송비·수수료·세금 등을 갑자기 추가 청구합니다.

심리 메커니즘: 매몰 비용 효과를 노립니다 — "여기까지 온 시간이 아까우니 그냥 결제하자"는 심리. 티켓 예매 수수료, 숙박 청소비, 배달 서비스 수수료 등이 대표 사례입니다.

🚧 Obstruction (경로 방해형)

원리: 간단하게 끝낼 수 있는 작업을 의도적으로 여러 단계를 거치게 하거나, 중요한 약관을 작고 흐릿하게 표기합니다.

주요 수법: 다단계 확인 팝업("정말 취소하시겠습니까?" 반복 노출), 탈퇴 버튼을 설정 메뉴 가장 깊숙한 곳에 숨기기, 고객센터 전화번호를 찾기 어렵게 배치하기.

😳 Confirm Shaming (확인 수치심)

원리: 취소 옵션을 선택할 때 그 문구에 죄책감이나 수치심을 유발하는 표현을 삽입합니다.

유형별 예시:

• 죄책감형: "아니요, 저는 건강에 관심이 없습니다."
• 조롱형: "아니요, 저는 제 돈을 전부 내는 것을 더 좋아합니다."
• 박탈 강조형: "아니요, 이 혜택을 포기하겠습니다."

⏰ False Urgency (가짜 긴박함)

원리: 실제와 다르거나 과장된 카운트다운 타이머를 배치하여 이성적인 판단을 흐리게 만듭니다.

대표 수법:

• 리셋 타이머: "5분 뒤 할인 종료!" → 새로고침 시 다시 5분으로 리셋
• 조작 활동 알림: "현재 50명이 이 상품을 보고 있습니다"
• 과장 재고: "마지막 1개 남았습니다" 문구 반복 노출

심리 메커니즘: FOMO(놓치고 싶지 않은 심리) 자극

⚠️

마케터 관점에서의 경계선: 긴급성·희소성은 정당한 마케팅 기법이지만, 허위·과장이 들어가는 순간 다크패턴이 됩니다. 실제 재고 소진 시 "품절 임박"은 Good UX, 재고가 충분한데 "마지막 1개"는 다크패턴입니다. 단기 전환율 상승을 위해 이를 남용하면 브랜드 신뢰도가 심각하게 훼손됩니다.

---

SECTION 03

Retention이 AARRR의 시작점인 이유

신규 고객 유치 비용은 기존 고객 유지 비용보다 약 5~25배 더 비쌉니다. — Harvard Business Review

📌 AARRR 퍼널 최적화 우선순위

많은 기업들이 Acquisition(광고비 증대)에만 집중하는 실수를 합니다. 제품/서비스 신규 런칭을 제외하면 아래 순서로 퍼널을 최적화해야 합니다:

Retention → Activation → Acquisition → Revenue → Referral

왜 Retention을 먼저인가?

이유 1

밑 빠진 독

Retention이 낮으면 Acquisition을 아무리 잘해도 사용자가 쌓이지 않습니다.

이유 2

핵심 가치 문제

Retention 문제는 보통 제품/서비스의 핵심 가치 문제이므로 우선 해결해야 합니다.

이유 3

LTV 상승 → 확장

Retention이 개선되면 LTV가 높아지고, 더 많은 Acquisition 예산 확장이 가능합니다.

MAU 비교	Retention 10%	Retention 40%
기준	매달 신규 유저 500명 획득, 광고비 500만원 동일
3개월차 MAU	635명	848명
6개월차 MAU	787명	1,372명
12개월차 MAU	1,060명	2,589명 (2.4배)

ℹ️

Retention Rate 공식: 특정 시점의 방문자 수 ÷ 최초 시점의 방문자 수 × 100
예) 1월 1일 신규 100명 → 1월 2일 30명 재접속 = Day 1 Retention 30%

구분	구간 리텐션 (Range Retention)	코호트 리텐션 (Cohort Retention)
정의	특정 기간 내 재방문 여부	동일 특성 집단의 유지율 추적
특징	서비스 전체 잔존율 파악 쉬움	어떤 그룹이 더 오래 남는지 원인 분석 가능
예시	Day 1, Day 7, Day 30 리텐션	3월 1주차 가입자의 1~4주 후 유지율 변화

---

SECTION 04 · 핵심

이메일 오픈율 올리는 5가지 전략

EMP(Email Marketing Platform)의 핵심 성과 지표인 오픈율(Open Rate)을 높이는 검증된 방법들.

01

개인화로 주목 끌기

수신자 이름·위치·관심사 반영. "[이름]님, 오늘만을 위한 혜택이 있어요!" 같은 맞춤화 제목은 오픈율을 평균 10~26% 높입니다. Merge Tag 활용

02

긴급성·희소성 활용

"오늘 자정까지 30% 할인", "단 10개 한정!" 등 FOMO(놓치고 싶지 않은 심리)를 자극. 단, 허위/과장은 다크패턴! FOMO 자극

03

명확하고 간결한 메시지

대부분의 메일 앱은 제목을 50자 이하로 잘라서 표시. 6~7단어, 30~50자 이내를 권장. 핵심 혜택을 제목에서 바로 드러냅니다. 제목 최적화

04

호기심 유발

"이 이메일을 열어보지 마세요", "왜 모두가 이 소식을 주목할까요?"처럼 답을 보고 싶은 심리를 자극합니다. 미스터리 기법

05

숫자·리스트·타겟 명확화

"실무자가 바로 쓰는 7가지 팁"처럼 숫자 활용. B2B는 "HR 매니저를 위한 2025 체크리스트"처럼 타깃을 명시하면 관련 독자의 반응률이 높아집니다. 타깃 명시

📅

발송 시점 팁: 해외 기준 목요일·화요일 오전 10시, 오후 2~4시가 오픈율이 높습니다. 국내는 출퇴근 시간대(오전 7~9시, 오후 6~8시)를 고려해서 발송 타이밍을 잡으세요.

---

SECTION 05

Kit (ConvertKit) 플랫폼 핵심 기능

2024년 ConvertKit에서 Kit으로 리브랜딩. 크리에이터·B2B 마케터·1인 사업자에 특화된 이메일 마케팅 플랫폼.

🎨

시각적 자동화 빌더

드래그&드롭으로 복잡한 이메일 시퀀스 설계 가능. Visual Automation으로 전체 흐름을 한눈에 파악.

🏷️

태그/세그먼트 기반 구조

태그를 기반으로 구독자를 세분화하여, 다른 그룹에 다른 시퀀스를 자동 발송할 수 있습니다.

🤖

AI 기능 탑재

AI 기반 이메일 제목 추천 및 발송 시간 최적화 기능 내장. Zapier 등 마케팅 자동화 툴과 연계성 높음.

💰

크리에이터 친화적

유료 뉴스레터, 디지털 상품 판매 기능 내장. 이메일 템플릿 + 자체 LP(랜딩 페이지) 구축 가능.

이메일 템플릿 선택: Text Only vs Grove

구분	Text Only	Grove (이미지 포함)
특징	디자인 요소 없는 심플한 형태	상단 헤더 이미지(배너) 포함 레이아웃
장점	개인적인 이메일처럼 보여 친근감, 스팸 필터 통과율 높음, 모바일 가독성 최고	브랜드 아이덴티티 표현, 시각적 주목도
단점	브랜딩 표현 한계	광고성 이메일처럼 보일 수 있음, 이미지 로딩 이슈
추천 상황	뉴스레터, 개인 소통, 강의 안내	브랜드 캠페인, 프로모션 메일
실무 결론	실제 오픈율·클릭률은 화려한 디자인보다 텍스트 중심이 더 높은 경우가 많음. 고민된다면 Text Only 먼저!

Merge Tag — 개인화 변수 삽입

Merge Tag 활용법

Kit 이메일 편집기에서 Personalization 버튼을 클릭하면 {{ subscriber.first_name }}와 같은 변수를 삽입할 수 있습니다.

제목에도 동일하게 적용 가능: "[이름]님, 오늘 특별한 소식이 있어요 🎉"
수신자의 실제 이름으로 자동 치환되어 발송됩니다.

⚠️

Kit 알려진 버그: CTA 버튼 위에 한글 텍스트를 입력하면 오류가 발생할 수 있습니다. 해결법: 편집기에서 나갔다가 다시 들어오면 해결됩니다.

---

SECTION 06 · 실습

Welcome Mail 자동화 시스템 구축 실습

구독자가 이메일을 입력하는 순간 자동으로 환영 메일이 발송되는 완전 자동화 파이프라인을 구축한다.

Welcome Mail 자동화 시스템 구축 플로우

Google Sheets + Zapier + Kit(ConvertKit) 연동으로 구독자 등록 즉시 환영 메일 자동 발송

STEP 1

입력 진입점

Framer
구독 폼 작성

• 랜딩 페이지의 이메일 입력폼
• 구독자가 이메일 기입 후
• Subscribe 버튼 클릭

→

STEP 2

데이터 수집

Google Sheets
자동 수집

• 구독자 정보 자동 기록
• 이름 / 이메일 / 날짜
• Zapier와 연동 대기

→

STEP 3

자동화 엔진

Zapier
Trigger 감지

• 구글시트 새 행 감지
• Kit에 Tag 부여 실행
• Add Tag to Subscriber

→

STEP 4

메일 발송

Kit Automation
실행

• Tag 감지 → 자동화 시작
• Visual Automation 실행
• Welcome Sequence 발송

→

GOAL

최종 목표

구독자
환영 메일 수신

• 개인화 이름 포함
• 브랜드 맞춤 디자인
• 오픈율·클릭률 분석

핵심 설정 포인트

🏷️ Merge Tag 활용

{{subscriber.first_name}} 변수로 개인화 인사 가능. 제목에도 적용 됩니다.

✉️ Text Only 추천

화려한 디자인보다 텍스트 이메일이 실제 오픈율·클릭률 더 높은 경우 많음.

✅ Auto Confirm 체크

Kit Form → Settings → Incentive에서 체크. 안 하면 이중 인증으로 이탈 증가.

⏱️ Zapier 딜레이 주의

구글시트 → Kit 반영에 약 10분 내외 서버 딜레이 존재. 스팸함도 확인 필수.

⚠️ 주의사항: Kit Subscriber는 한 번 등록 후 구글시트 행을 삭제해도 자동 삭제되지 않습니다. 같은 이메일로 재테스트 시 Kit Subscribers에서 직접 삭제 후 재시도해야 합니다.

단계별 구축 가이드

STEP 1 — Kit 시퀀스 생성

Welcome Mail 시퀀스 제작

Send 메뉴 → New Sequence → 이름 설정 → 템플릿 선택 (Text Only 권장) → Send Mail 0 Days 설정 → CTA 버튼에 UTM 링크 삽입 → Publish + immediately 확인 필수

STEP 2 — Zapier 연동

Google Sheets ↔ Kit 자동화

Zapier 접속 → Trigger: Google Sheets (새 행 추가 감지) → Action: Kit의 "Add Tag to Subscriber" 선택 → Tag 이름 선택 (WelcomeMail 태그) → Email 필드를 구글시트 이메일 컬럼에 매핑 → Zap Publish

STEP 3 — Kit Visual Automation

태그 감지 → 시퀀스 발송 자동화

Automate → Visual Automations → New Automation → Trigger: "Tag is added" 선택 → 해당 태그 지정 → Action: Email Sequence 연결 → 우상단 Active 토글 활성화

STEP 4 — 테스트

구글시트에 이메일 기입 후 확인

구글시트에 테스트 이메일 기입 → Zapier 히스토리 확인 (10분 내외 딜레이) → Kit Visual Automation의 Completed 카운팅 확인 → 스팸 메일함 필수 확인!

⚠️

중요 주의사항:
구글시트에 이메일을 기입하면 Kit의 Subscribers로 등록됩니다.
이후 구글시트의 행을 삭제해도 Kit Subscribers는 자동으로 삭제되지 않습니다.
같은 이메일로 재테스트 시: Kit Subscribers에서 직접 삭제 후 재시도해야 합니다.

---

SECTION 07

노코드 툴 Framer + Kit 연동

코딩 없이 웹사이트를 만들고, 그 안에 이메일 구독 폼을 삽입해 Kit과 직접 연동하는 실습.

Framer란?

노코드 기반 웹사이트 제작 도구로 디자인부터 배포까지 한 번에 가능한 올인원 웹 빌더입니다. 피그마와 유사한 UI로 디자이너·개발자 협업에 최적화되어 있으며, React 기반으로 커스텀 코드 삽입도 가능합니다.

토스 활용 사례: 프레이머 도입 후 프로토타입 제작률 120% 증가, UI 구현 시간 70% 단축, 디자인 툴 NPS 60점 → 85점 급상승

Framer Kit 폼 연동 설정값

항목명	입력 내용	필수 여부	찾는 방법
API Key	Kit 계정의 Developer API Key	필수	Kit → Settings → Advanced → Developer API Key 복사
Form ID	생성한 Form의 고유 숫자 ID	필수	Kit → Grow → Forms 편집창 URL의 숫자값 (forms/designers/XXXXXX/edit)
Redirect	구독 후 이동할 Thank you Page URL	선택	비워두면 기본 성공 메시지 표시
Tracking	Facebook Pixel, GA 등 추적 ID	선택	구독 완료 이벤트 추적 시 사용. 일반 상황은 비워도 무방

✅

Auto Confirm 설정 필수: Kit의 해당 Form → Settings → Incentive → "Auto confirm new subscribers" 체크. 이 설정을 하지 않으면 구독자가 이메일 인증을 한 번 더 거쳐야 해서 이탈률이 증가합니다.

ℹ️

Framer에서의 Kit 연동 자동화 흐름: Framer 구독 폼에서 이메일 입력 → Kit Form으로 수집 → Visual Automation의 "Joins a form" 트리거 감지 → 태그 부여(Add or Remove Tag) → Email Sequence 발송으로 연결됩니다.

---

📝 Day 19 핵심 정리

UX vs UI: UI는 "보기 좋은가?", UX는 "쓰기 편하고 매끄러운가?"입니다. 마케터가 만드는 이메일·자동화·CRM 모두 고객의 UX 경험입니다.

다크패턴: Roach Motel, Hidden Costs, Obstruction, Confirm Shaming, False Urgency 등 6가지 유형. 단기 전환율은 높이지만 브랜드 신뢰도를 치명적으로 훼손합니다. 긴급성·희소성은 진짜여야 합니다.

Retention 우선순위: AARRR 퍼널 최적화는 Retention → Activation → Acquisition 순. Retention 10% → 40%만 높여도 12개월 후 MAU가 2.4배 차이 납니다.

이메일 오픈율 전략: 개인화(Merge Tag), 긴급성/희소성, 50자 이내 명확한 제목, 호기심 유발, 숫자 활용. 텍스트 위주 이메일이 화려한 디자인보다 오픈율·클릭률이 높은 경우가 많습니다.

Welcome Mail 자동화: Google Sheets → Zapier(Tag 부여) → Kit Visual Automation → Email Sequence 발송. 핵심은 Zapier 딜레이 10분 내외 감안, Auto Confirm 체크, 동일 이메일 재테스트 시 Kit에서 직접 삭제 필요.

Framer + Kit 연동: API Key + Form ID 두 가지가 핵심 필수값. Form의 자동화 트리거 역할만 하므로 Form 형태는 무관. 연동 후 Visual Automation "Joins a form" 트리거로 시퀀스 발동.