chominsoo4245 / mjon_git star
Forked from hylee / mjon_git
ITN_디자인팀 2024-02-20
2024/02/20 카카오 알림톡 설정 및 발송 방법 총정리 > 랜딩페이지 퍼블리싱 추가
@3a5636d076fb12ef186b65c82dbc6074011877cc
 
3a5636d
src/main/webapp/publish/publish_adv/adv_template_v1_manuscript_16.html (added)
+++ src/main/webapp/publish/publish_adv/adv_template_v1_manuscript_16.html
@@ -0,0 +1,193 @@
+<!DOCTYPE html>

+<html lang="ko">

+

+<head>

+  <meta charset="UTF-8">

+  <meta http-equiv="X-UA-Compatible" content="IE=edge">

+  <meta name="viewport" content="width=device-width, initial-scale=1.0">

+  <title>카카오 알림톡 설정 및 발송 방법 총정리 - 문자온</title>

+

+  <meta name="Keywords" content="문자전송, 문자발송, SMS, LMS, MMS, 문자보내기, 단체문자, 단체문자전송, 단체문자발송,단체문자사이트,문자사이트, 대량문자">

+  <meta name="description" content="정보성 메시지를 카카오톡으로 발송할 수 있는 기업회원 전용 서비스이며, 카톡 채널ID를 추가하지 않은 이용자에게도 전화번호만 있으면 메시지 전송이 가능합니다.">

+  <meta property="og:type" content="website">

+  <meta property="og:title" content="카카오 알림톡 설정 및 발송 방법 총정리 - 문자온">

+  <meta property="og:description" content="정보성 메시지를 카카오톡으로 발송할 수 있는 기업회원 전용 서비스이며, 카톡 채널ID를 추가하지 않은 이용자에게도 전화번호만 있으면 메시지 전송이 가능합니다.">

+  <link rel="apple-touch-icon" sizes="57x57" href="/publish/images/favicon/apple-icon-57x57.png">

+  <link rel="apple-touch-icon" sizes="60x60" href="/publish/images/favicon/apple-icon-60x60.png">

+  <link rel="apple-touch-icon" sizes="72x72" href="/publish/images/favicon/apple-icon-72x72.png">

+  <link rel="apple-touch-icon" sizes="76x76" href="/publish/images/favicon/apple-icon-76x76.png">

+  <link rel="apple-touch-icon" sizes="114x114" href="/publish/images/favicon/apple-icon-114x114.png">

+  <link rel="apple-touch-icon" sizes="120x120" href="/publish/images/favicon/apple-icon-120x120.png">

+  <link rel="apple-touch-icon" sizes="144x144" href="/publish/images/favicon/apple-icon-144x144.png">

+  <link rel="apple-touch-icon" sizes="152x152" href="/publish/images/favicon/apple-icon-152x152.png">

+  <link rel="apple-touch-icon" sizes="180x180" href="/publish/images/favicon/apple-icon-180x180.png">

+  <link rel="icon" type="image/png" sizes="192x192" href="/publish/images/favicon/android-icon-192x192.png">

+  <link rel="icon" type="image/png" sizes="32x32" href="/publish/images/favicon/favicon-32x32.png">

+  <link rel="icon" type="image/png" sizes="96x96" href="/publish/images/favicon/favicon-96x96.png">

+  <link rel="icon" type="image/png" sizes="16x16" href="/publish/images/favicon/favicon-16x16.png">

+  <link rel="manifest" href="/publish/images/favicon/manifest.json">

+

+  <link rel="stylesheet" href="/publish/publish_adv/css/reset.css">

+  <link rel="stylesheet" href="/publish/publish_adv/css/style.css">

+  <link rel="stylesheet" href="/publish/css/font.css">

+

+  <script src="/publish/js/jquery-3.5.0.js"></script>

+  <script>

+    function topBtn() {

+      $("html").scrollTop("0");

+    }

+  </script>

+</head>

+

+<body>

+  <div class="template_v1_content content_eleven kakao_con">

+    <button type="button" class="top_btn" onclick="topBtn()">▲<br>TOP</button>

+    <header>

+      <div class="inner">

+        <a href="https://www.munjaon.co.kr">

+          <h1><img src="/publish/publish_adv/img/template_v1_header_logo.png" alt=""></h1>

+        </a>

+      </div>

+    </header>

+    <div class="visual">

+      <div class="inner">

+        <p class="keyword">keyword</p>

+        <h2>카카오 알림톡 설정 및 발송 방법 총정리</h2>

+      </div>

+    </div>

+    <div class="index">

+      <div class="inner">

+        <p>목&ensp;차</p>

+        <nav>

+          <ul>

+            <li><a href="#section01">알림톡이란?</a></li>

+            <li><a href="#section02">알림톡에서 발송 가능한 메시지 종류</a></li>

+            <li><a href="#section03">알림톡을 사용하는 이유</a></li>

+            <li><a href="#section04">알림톡 이용 방법 – 카카오톡 채널 가입 및 채널ID 등록</a></li>

+            <li><a href="#section05">알림톡 이용 방법 – 템플릿 등록</a></li>

+            <li><a href="#section06">자주 묻는 질문</a></li>

+          </ul>

+        </nav>

+      </div>

+    </div>

+    <section class="section section01" id="section01">

+      <div class="inner">

+        <h3>알림톡이란?</h3>

+        <p class="text">

+            정보성 메시지를 카카오톡으로 발송할 수 있는 기업회원 전용 서비스이며, 카톡 채널ID를 추가하지 않은 이용자에게도 전화번호만 있으면 메시지 전송이 가능합니다.

+        </p>

+      </div>

+    </section>

+    <section class="section section02" id="section02">

+        <div class="inner">

+          <h3>알림톡에서 발송 가능한 메시지 종류</h3>

+          <p class="text">

+            알림톡은 회원가입, 결제, 배송, 알림, 고지, 신청 등 수신자 액션에 기반한 정보성 메시지를 카카오톡으로 보낼 수 있으며 광고 및 영리성 메시지 전송은 불가하므로 카카오 검수 과정을 거쳐 승인된 메시지 내용에 한해서만 발송이 가능합니다.

+          </p>

+          <img src="/publish/publish_adv/img/template_v1_manuscript_16_section02_img01.png" alt="">

+        </div>

+      </section>

+      <section class="section section03" id="section03">

+        <div class="inner">

+          <h3>알림톡을 사용하는 이유</h3>

+          <p class="text" style="margin: 0 0 10px 0;">1. 1,000자 이내 텍스트 및 이미지(로고, 아이콘 등) 전송이 가능합니다.</p>

+          <p class="text" style="margin: 0 0 10px 0;">2. 문자 메시지 대비 65% 이상 저렴합니다.</p>

+          <p class="text" style="margin: 0 0 10px 0;">3. 카톡 채널ID를 추가하지 않은 이용자에게도 전화번호만 있으면 메시지 전송이 가능합니다.</p>

+          <p class="text" style="margin: 0 0 10px 0;">4. 발송 실패 시 자동으로 문자 대체 발송이 가능합니다.</p>

+          <p class="text" style="margin: 0 0 10px 0;">5. 카카오 인증마크를 통해 신뢰도 높은 메시지 발송이 가능합니다.</p>

+          <p class="text" style="margin: 0 0 10px 0;">6. 발신자 브랜드의 이미지 및 신뢰도 상승 효과가 있습니다.</p>

+        </div>

+      </section>

+      <section class="section section04 con_add" id="section04">

+        <div class="inner">

+          <h3>알림톡 이용 방법 – 카카오톡 채널 가입 및 채널<span class="id">ID</span> 등록</h3>

+          <div>

+            <p class="text">o 카카오비즈니스 회원가입</p>

+            <p class="small_text">- 카카오 계정으로 로그인 후 카카오비즈니스 통합 회원으로 전환 또는 신규 회원가입 진행</p>

+            <img src="/publish/publish_adv/img/template_v1_manuscript_16_section04_img01.png" alt="">

+          </div>

+          <div>

+            <p class="text">o 카카오비즈니스 채널 개설</p>

+            <p class="small_text">- 채널 이름 및 검색용 아이디 등 정보 작성 후 비즈니스 채널 신청 <br>(하나의 관리자 계정은 최대 10개의 채널을 개설할 수 있으며, 최초 등록 시 비공개로 개설되니 추후 [관리] > [상세설정] > 채널 공개 및 검색 허용 설정 “ON”으로 변경 필요)</p>

+            <img src="/publish/publish_adv/img/template_v1_manuscript_16_section04_img02.png" alt="">

+          </div>

+          <div>

+            <p class="text">o 채널ID 등록</p>

+            <p class="small_text">- 채널 개설 이후 문자온 홈페이지 내 [카톡발송] > [카카오톡 설정] > 채널ID 등록 바로가기 클릭을 통해 카카오채널 관리자센터와 동일한 정보 입력 후 등록</p>

+            <img src="/publish/publish_adv/img/template_v1_manuscript_16_section04_img03.png" alt="">

+          </div>

+        </div>

+      </section>

+      <section class="section section05 con_add" id="section05">

+        <div class="inner">

+          <h3>알림톡 이용 방법 – 템플릿 등록</h3>

+          <div>

+            <p class="text">o 템플릿 등록</p>

+            <p class="small_text">- 문자온 홈페이지 내 [카톡발송] > [카카오톡 설정] > 알림톡 템플릿 등록/관리를 통해 템플릿 작성 가능</p>

+            <img src="/publish/publish_adv/img/template_v1_manuscript_16_section05_img01.png" alt="">

+            <p class="small_text">- 템플릿 등록 이후 반드시 <span class="te_re">“템플릿 심사요청”</span> 버튼을 클릭하여 심사 필요(영업일 기준 2~3일 소요)</p>

+            <img src="/publish/publish_adv/img/template_v1_manuscript_16_section05_img02.png" alt="">

+          </div>

+        </div>

+      </section>

+      <section class="section section06" id="section06">

+        <div class="inner">

+          <h3>자주 묻는 질문</h3>

+          <dl>

+            <dt>

+              <p class="blue_text bold">1. 대체문자는 무엇인가요?</p>

+            </dt>

+            <dd>

+              <p class="text">

+                카카오 알림톡 전송이 실패한 경우 템플릿 내용을 문자 메시지로 대체하여 자동 전송하는 기능입니다. [카톡발송] 메뉴에서 [대체문자] 체크 시 해당 기능 사용이 가능합니다.

+              </p>

+            </dd>

+            <dt>

+              <p class="blue_text bold">2. 템플릿 심사가 반려되면 어떻게 수정해야 하나요?</p>

+            </dt>

+            <dd>

+              <p class="text">

+                카카오 템플릿 심사에서 반려된 템플릿은 반려사유도 함께 표시되오니 해당 반려사유를 참고하시어 템플릿의 내용을 수정하신 후 다시 등록하시길 바랍니다. 

+                반려된 템플릿 확인 및 템플릿 수정등록은 [카톡발송] > [카카오톡 설정] > [알림톡 템플릿 등록/관리] 메뉴를 통해 진행하실 수 있습니다.

+              </p>

+            </dd>

+            <dt>

+              <p class="blue_text bold">3. 부고, 청첩장 등 경조사 메시지도 알림톡으로 보낼 수 있나요?</p>

+            </dt>

+            <dd>

+              <p class="text">

+                부고, 청첩장 등 경조사 메시지는 사용자 행위에 기반한 정보성 메시지에 해당하지 않기 때문에 알림톡으로 보낼 수 없습니다. 문자온에서 제공하는 문자메시지를 통해 발송해주시기 바랍니다.

+              </p>

+            </dd>

+            <dt>

+              <p class="blue_text bold">4. 알림톡 템플릿 등록 시 글자수는 몇자까지 입력할 수 있나요?</p>

+            </dt>

+            <dd>

+              <p class="text">

+                한글, 영문 관계없이 띄어쓰기 포함하여 1,000자까지 입력이 가능합니다. 변수를 사용하시는 경우에는 변환 시 제한 글자 수를 고려하여 템플릿 내용을 작성해주시길 바랍니다.

+              </p>

+            </dd>

+            <dt>

+              <p class="blue_text bold">5. 카카오톡에서 수신자가 채널을 차단할 경우 알림톡도 차단되나요?</p>

+            </dt>

+            <dd>

+              <p class="text">

+                알림톡은 수신자의 동의가 필요하지 않은 정보성 메시지이므로 수신자가 채널을 차단하여도 메시지가 전송됩니다. 단, 카카오톡 채팅방에서 "알림톡 차단"을 할 경우에는 메시지 전송이 차단됩니다.

+              </p>

+            </dd>

+          </dl>

+          <p class="text">※ 추가 문의는 [카톡발송] > 카카오톡 설정 > 사용안내를 통해 확인 가능하며, 이외 확인이 필요한 문의는 1:1문의나 불편신고를 통해 접수 시, 빠른 답변 제공</p>

+        </div>

+      </section>

+    

+

+    <div class="btn_wrap">

+      <div class="inner">

+        <a href="https://www.munjaon.co.kr/web/mjon/alimtalk/kakaoAlimtalkMsgDataView.do">알림톡 보내기</a>

+      </div>

+    </div>

+  </div>

+

+</body>

+

+</html>(No newline at end of file)
b2d9f6a
3a5636d
src/main/webapp/publish/publish_adv/css/style.css
--- src/main/webapp/publish/publish_adv/css/style.css
+++ src/main/webapp/publish/publish_adv/css/style.css
@@ -227,6 +227,7 @@
 
 .template_v1_content .section03 h3::after{content: "3";}
 
 .template_v1_content .section04 h3::after{content: "4";}
 
 .template_v1_content .section05 h3::after{content: "5";}
 
+.template_v1_content .section06 h3::after{content: "6";}
 
 .template_v1_content section:nth-child(odd){background-color: #f2f2f4;}
 
 .template_v1_content img{margin: 53px 0 0 0; text-align: center;}
 
 .template_v1_content .top_btn{position: fixed; width: 71px; height: 71px; border-radius: 100%; background-color: #436dd9; color: #fff; font-family: 'GmarketSansBold'; border: 0; box-shadow: 0 0 8px rgba(0,0,0,0.5); right: 30px; bottom: 30px;}
@@ -305,6 +306,15 @@
 
 .template_v1_content .ass_con p{font-size: 18px; font-family: 'Noto Sans KR', sans-serif; line-height: 1.8;}
 
 .template_v1_content .ass_con p::after{width: 0;}
 
 .template_v1_content .ass_con p a{text-decoration: underline; font-weight: 500; color: #3c33ab;}
 
+
 
+/*템플릿1_16카카오 알림톡*/
 
+.kakao_con .index ul{line-height: 1.2;}
 
+.kakao_con .index ul li{margin-bottom: 10px;}
 
+.kakao_con .index ul li:last-child{margin-bottom: 0;}
 
+.kakao_con h3{line-height: 1.1;}
 
+.kakao_con .id{font-family: 'Noto Sans KR', sans-serif; font-weight: 700;}
 
+.kakao_con .small_text{font-size: 18px;}
 
+.kakao_con .section .small_text .te_re{font-weight: 500;}
 
 
 /*미디어쿼리 시작*/
 
 /*미디어쿼리_1340px*/
@@ -584,6 +594,9 @@
 
     /*발송*/
 
     .multi-text-wrap #send .con > img{width: 31px; height: 36px;margin-top: 20px;margin-left: 37px;}
 
     .multi-text-wrap #send .con > p{margin: -36px 0px 20px 40px;}
 
+    
+    /*템플릿1_16카카오 알림톡*/
 
+    .kakao_con .index ul{width: 52%}
 
 }
 
 
 /*미디어쿼리_915_/*템플릿1_6부고문자추가*/
@@ -958,6 +971,9 @@
 
     .template_v1_content .obituary li{width:calc(100%);}
 
     .template_v1_content .obituary .move_line02{margin: -230px 0 0 0;}
 
     .template_v1_content .obituary li:nth-child(2){margin: -230px 0 0 0;}
 
+    
+    /*템플릿1_16카카오 알림톡*/
 
+    .kakao_con .index ul{width: 72%}
 
 }
 
 
 /*미디어쿼리_570px*/
@@ -1086,6 +1102,9 @@
 
     .multi-text-wrap .banner img{height: 45vh;}
 
     .multi-text-wrap .banner .title{padding: 40px 30px; margin: 20px 0 0 0;}
 
     .multi-text-wrap .list ul{padding: 0 7% 0 23%;}
 
+    
+     /*템플릿1_16카카오 알림톡*/
 
+    .kakao_con .index ul{width: 80%}
 
 }
 
 
 /*미디어쿼리_414px*/
@@ -1288,11 +1307,11 @@
 
      /*템플릿1_9웹문자 사이트*/
 
     .send_limit_btn a{margin: 0;}
 
     
-     /*템플릿1_11문자 사이트*/
 
-    .content_eleven .visual .inner h2{font-size: 30px;}
 
+     /*템플릿1_11문자 사이트 + 템플릿1_16카카오 알림톡*/
 
+    .content_eleven .visual .inner h2{font-size: 30px; line-height: 1.1;}
 
     
-     /*템블릿1_3 pc에서 대량 문자 보내기 방법*/
 
-    .content_three h3{font-size: 25px;}
 
+     /*템블릿1_3 pc에서 대량 문자 보내기 방법 + 템플릿1_16카카오 알림톡*/
 
+    .content_three h3, .kakao_con h3{font-size: 25px;}
 
 }
 
 
 /*미디워쿼리_320px*/
 
3a5636d
src/main/webapp/publish/publish_adv/img/template_v1_manuscript_16_section02_img01.png (Binary) (added)
+++ src/main/webapp/publish/publish_adv/img/template_v1_manuscript_16_section02_img01.png
Binary file is not shown
 
3a5636d
src/main/webapp/publish/publish_adv/img/template_v1_manuscript_16_section04_img01.png (Binary) (added)
+++ src/main/webapp/publish/publish_adv/img/template_v1_manuscript_16_section04_img01.png
Binary file is not shown
 
3a5636d
src/main/webapp/publish/publish_adv/img/template_v1_manuscript_16_section04_img02.png (Binary) (added)
+++ src/main/webapp/publish/publish_adv/img/template_v1_manuscript_16_section04_img02.png
Binary file is not shown
 
3a5636d
src/main/webapp/publish/publish_adv/img/template_v1_manuscript_16_section04_img03.png (Binary) (added)
+++ src/main/webapp/publish/publish_adv/img/template_v1_manuscript_16_section04_img03.png
Binary file is not shown
 
3a5636d
src/main/webapp/publish/publish_adv/img/template_v1_manuscript_16_section05_img01.png (Binary) (added)
+++ src/main/webapp/publish/publish_adv/img/template_v1_manuscript_16_section05_img01.png
Binary file is not shown
 
3a5636d
src/main/webapp/publish/publish_adv/img/template_v1_manuscript_16_section05_img02.png (Binary) (added)
+++ src/main/webapp/publish/publish_adv/img/template_v1_manuscript_16_section05_img02.png
Binary file is not shown
Add a comment
List