Help Center

카페24 소식

[스마트디자인] 아이핀 인증 확대적용!

2013-01-24


안녕하세요, 카페24 운영도우미 입니다.

 

스마트디자인에도 아이핀 인증 서비스가 확대 적용되어
성인인증 및 14세 미만 비회원 구매제한에 적용 방법을 안내드립니다.

*참고 : 아이핀 서비스 오픈공지 보기


자세한 내용은 아래를 참조해 주세요.



1. 제목 : 스마트디자인 아이핀 인증 확대적용!

2. 적용일자 : 2013-01-23 (수)

3. 업데이트 내용


  - 14세 미만 비회원 구매제한 팝업
  - 성인인증 페이지 적용


  나이확인 및 성인인증이 필요한 위의 영역에 아이핀 인증이 적용되었으며,
  정상 동작을 위하여 Html 디자인 수정 및 설정이 필요하므로 하단의 상세안내를 확인하시기 바랍니다.
  * 아이핀 인증 서비스는 유료 부가서비스이므로 신청/결제 완료 후 사용 가능합니다.


  [아이핀 인증 서비스 신청]
    - '어드민 > 부가서비스 > 운영지원 서비스 > 아이핀인증 서비스 > 서비스 신청' 메뉴에서
       아이핀 인증 서비스 신청이 완료되어 신청 상태가 사용 중이어야 다음 설정을 진행할 수 있습니다.
       ('어드민 > 상점관리 > 상점 운영관련 설정 > 본인인증 서비스 설정' 메뉴에서 신청 상태 확인 가능)


    


  [14세 미만 비회원 구매제한 팝업에 적용]
    1) '어드민 > 상점관리 > 상점운영 관련설정 > 상점운영방식 설정 > 구매권한' 메뉴로 이동하여
       다음과 같이 14세 미만 비회원 구매차단 설정을 합니다.

   


    2) '어드민 > 디자인관리 > 스마트디자인 > 디자인 편집 > 14세미만 구매제한 확인 절차
        (member/check_under_fourteen.html)'
페이지로 이동하여 아래와 같이 소스를 수정합니다.


      - 빨간색으로 표시된 부분은 삭제, 파란색으로 표시된 부분은 해당 위치에 추가합니다.

<!--@layout(/layout/basic/popup.html)-->

<div module="member_checkunderfourteen">

<div class="xans-member-checkunderfourteen" module="member_checkunderfourteen">

<!--@css(/css/module/member/checkunderfourteen.css)-->

<h1><span>14세미만 구매 제한 확인 절차</span></h1>

<div class="layInner">

<p class="info">

14세 미만 사용자는 <span>구매가 제한되어, 확인이 필요</span>합니다. <br />

주민등록번호는 14세미만 여부 확인을 위한 용도로만 사용되고, 별도로 수집되지 않습니다.

</p>

<div class="check">

<p><strong>{$form_label.name}</strong><span>{$form.name}</span></p>

<p><strong>{$form_label.ssn}</strong><span>{$form.ssn} <input type="image" class="btn" src="http://img.echosting.cafe24.com/design/skin/mono/member/btn_14chk.gif" alt="확인하기" /></span></p>

 

<p class="select"><label id='ipinAuthselect' {$typeIpinUse}><input type="radio" name='AuthType' value='i' {$typeAuthIpin} /> 아이핀(i-Pin) 인증</label> <label><input type="radio" name='AuthType' value='s' {$typeAuthRealName} /> 주민번호 인증</label></p>

 

<div class="ipin" id='ipin' {$typeIpinUse}>

 <a href="#none" onclick="{$ipinpopup}"><img src="http://img.echosting.cafe24.com/design/skin/mono/member/btn_memJoin2.gif" alt="아이핀 인증" /></a>

<p>

아이핀이란, 회원님의 개인정보 보호를 위해 웹사이트에 주민등록번호를 제공하지 않고 <br />

본인임을 확인하는 인터넷상의 개인식별번호 서비스입니다.<br />

아이핀을 통한 가입을 원하시면 아이핀 인증 버튼을 눌러 진행해 주십시오.

</p>

</div>

 

<div class="agreement">

입력하신 고유식별정보는 별도 저장되지 않으며, 본인확인용으로만 이용됩니다.<br>

이에 동의하지 않으실 경우, 서비스 이용이 제한됩니다.

<p>{$form.check_fourteen}</p>

 

<div class="realname" id='realname'>

<div class="check">

<p><strong>{$form_label.name}</strong><span>{$form.name}</span></p>

<p><strong>{$form_label.ssn}</strong><span>{$form.ssn} <input type="image" class="btn" src="http://img.echosting.cafe24.com/design/skin/mono/member/btn_14chk.gif" alt="확인하기" /></span></p>

</div>

<div class="agreement" id='check_fourteen_box'>

입력하신 고유식별정보는 별도 저장되지 않으며, 본인확인용으로만 이용됩니다.<br>

이에 동의하지 않으실 경우, 서비스 이용이 제한됩니다.

<p>{$form.check_fourteen}</p>

</div>

</div>

 

 

<!-- -->

<div class="btnArea">

 <p><a href="#none" onclick="self.close();"><img src="http://img.echosting.cafe24.com/design/skin/mono/btn_linkCancel.gif" alt="취소하기" /></a></p>

</div>

 

</div>

</div>

 



   ▼ 화면1. 14세미만 구매 제한 팝업 적용화면
   



  [성인인증 페이지에 적용]
    1) '어드민 > 디자인관리 > 스마트디자인 > 디자인 기능설정 > 인트로화면' 메뉴로 이동하시면
        아이핀 인증으로 성인인증이 가능한 새로운 유형의 인트로화면이 추가되었습니다.
        원하시는 화면을 선택해주세요.

    ▼ 화면1. 성인인증 추가된 페이지
   


    2) 새로 추가된 인트로 페이지를 위한 HTML 파일, CSS 파일을 추가합니다.
       
      ① CSS 파일 추가
         - 경로 : /css/module/member/adultHead.css
         - 파일 명 : adultHead.css
   

.xans-member-adulthead { width:754px; margin:30px auto; }

.xans-member-adulthead h1 { height:23px; margin:30px 0; border-bottom:1px solid #dedcdc; }

.xans-member-adulthead h1 span { float:left; height:23px; padding:0 23px 0 0; border-bottom:1px solid #272823; font-size:18px; color:#272823; }

.xans-member-adulthead .under19 { margin:0 0 20px; border:1px solid #d2d2cf; background:#f5f5f5; }

.xans-member-adulthead .under19 .msg { width:363px; margin:0 auto; padding:70px 0 70px 117px; font-size:11px; line-height:18px; color:#8f8f91; }

.xans-member-adulthead .under19 .msg h2 { height:80px; margin:0 0 0 -117px; padding:20px 0 0 117px; background:url(http://img.echosting.cafe24.com/design/skin/mono/intro/bg_under19ipin.gif) 0 0 no-repeat; color:#333; font-size:22px; line-height:1.3em; }

.xans-member-adulthead .under19 .msg .info { padding:0 0 42px; }

.xans-member-adulthead .under19 .msg .info span { display:block; padding:24px 0 0; }

.xans-member-adulthead .under19 .msg .info span em { color:#34a7b3; font-style:normal; }

.xans-member-adulthead .member { overflow:hidden; zoom:1; margin:-1px 0 0; padding:40px 38px; border:1px solid #d2d2cf; background:#f5f5f5; }

.xans-member-adulthead .member h2 { float:left; width:260px; }

.xans-member-adulthead .member .inner { float:left; width:390px; }

.xans-member-adulthead .member .login { overflow:hidden; }

.xans-member-adulthead .member .login .inputType { float:left; width:195px; }

.xans-member-adulthead .member .login .inputType span { overflow:hidden; display:block; padding:0 0 3px; }

.xans-member-adulthead .member .login .inputType span strong { float:left; width:60px; padding:3px 0 0 0; }

.xans-member-adulthead .member .login .inputType span input { width:120px; padding:3px; }

.xans-member-adulthead .member .login .btn { float:left; }

.xans-member-adulthead .member .security { padding:0 0 0 60px; }

.xans-member-adulthead .member .join { padding:7px 0 0 60px; }

.xans-member-adulthead .member .join a,

.xans-member-adulthead .member .join a:hover { padding:0 0 0 7px; font-size:11px; color:#8f8f91; background:url(http://img.echosting.cafe24.com/design/skin/mono/intro/ico_joinus.gif) 0 50% no-repeat; }

.xans-member-adulthead .member .ipin { padding:10px 0 0; font-size:11px; line-height:16px; color:#8f8f91; }

.xans-member-adulthead .member .ipin span { display:block; padding:0 0 5px; }

 



      ② HTML 파일 추가 1
        - 경로 : /intro/adult_im.html (본인인증+회원로그인 인트로)
        - 파일 명 : adult_im.html

<!--@layout(/layout/basic/intro.html)-->

<div module="Member_AdultHead">

<!--@css(/css/module/member/adultHead.css)-->

<h1><span>로그인</span></h1>

<div class="under19">

<div class="msg">

<h2>19세 미만의 미성년자는 <br />출입을 금합니다.</h2>

<p class="info">

이 정보내용은 청소년 유해매체물로서 <br />

정보통신망 이용촉진법 및 정보보호 등에 관한 법률 및 청소년 보호법의 <br />

규정에 의하여 19세 미만의 청소년은 사용할 수 없습니다. <br />

<span>미성년자 차단을 위하여 <em>로그인 또는 본인인증 절차</em>를 거치셔야 합니다.</span>

</p>

<a href="{$outlink}"><img src="http://img.echosting.cafe24.com/design/skin/mono/intro/btn_under19ipin.gif" alt="19세 미만 나가기" /></a>

</div>

</div>

<div class="member" module="Member_Login">

<h2><img src="http://img.echosting.cafe24.com/design/skin/mono/intro/h2_ipinMember.gif" alt="회원 로그인" /></h2>

<div class="inner">

<p class="login">

<span class="inputType">

<span class="name"><strong>아이디</strong> {$form.member_id} </span>

<span class="number"><strong>비밀번호</strong> {$form.member_passwd}<br /></span>

</span>

<span class="btn"><a href="#none" onclick="{$action_func_login}"><img src="http://img.echosting.cafe24.com/design/skin/mono/intro/btn_login.gif" alt="로그인" /></a></span>

</p>

<p class="security">

<input id="check_secret_connect0" name="check_secret_connect" fw-filter="" fw-label="check_secret_connect" fw-msg="" value="T" type="checkbox" /><label for="check_secret_connect0" > 보안 접속</label>

</p>

<p class="join">

<a href="/member/id/find_id.html{$skip_intro}">아이디</a>

<a href="/member/passwd/find_passwd_info.html{$skip_intro}">비밀번호 찾기</a>

<a href="/member/join.html{$skip_intro}">회원 가입 하기</a>

</p>

</div>

</div>

<div class="member" {$display_auth}>

<h2><img src="http://img.echosting.cafe24.com/design/skin/mono/intro/h2_ipinNoMember.gif" alt="비회원 성인인증" /></h2>

<div class="inner">

<label><input type="radio" name='AuthType' checked /> 아이핀(i-PIN) 인증</label>

<p class="ipin">

<span><a href="#none" onclick="{$ipinpopup}"><img src="http://img.echosting.cafe24.com/design/skin/mono/member/btn_memJoin2.gif" alt="아이핀 인증" style="vertical-align:middle" /></a></span>

아이핀이란, 회원님의 개인정보 보호를 위해 <br />

웹사이트에 주민등록번호를 제공하지 않고,<br />

본인임을 확인하는 인터넷상의 개인식별번호 서비스입니다.<br />

아이핀을 통한 가입을 원하시면 아이핀 인증 버튼을 눌러 진행해 주십시오.

</p>

</div>

</div>



      ③ HTML 파일 추가 2
         - 경로 : /intro/adult_i.html (본인인증 인트로)
         - 파일 명 : adult_i.html

 <!--@layout(/layout/basic/intro.html)-->

<div module="Member_AdultHead">

<!--@css(/css/module/member/adultHead.css)-->

<h1><span>로그인</span></h1>

<div class="under19">

<div class="msg">

<h2>19세 미만의 미성년자는 <br />출입을 금합니다.</h2>

<p class="info">

이 정보내용은 청소년 유해매체물로서 <br />

정보통신망 이용촉진법 및 정보보호 등에 관한 법률 및 청소년 보호법의 <br />

규정에 의하여 19세 미만의 청소년은 사용할 수 없습니다. <br />

<span>미성년자 차단을 위하여 <em>로그인 또는 본인인증 절차</em>를 거치셔야 합니다.</span>

</p>

<a href="{$outlink}"><img src="http://img.echosting.cafe24.com/design/skin/mono/intro/btn_under19ipin.gif" alt="19세 미만 나가기" /></a>

</div>

</div>

<div class="member" {$display_auth}>

<h2><img src="http://img.echosting.cafe24.com/design/skin/mono/intro/h2_ipinNoMember.gif" alt="비회원 성인인증" /></h2>

<div class="inner">

<label><input type="radio" name='AuthType' checked /> 아이핀(i-PIN) 인증</label>

<p class="ipin">

<span><a href="#none" onclick="{$ipinpopup}"><img src="http://img.echosting.cafe24.com/design/skin/mono/member/btn_memJoin2.gif" alt="아이핀 인증" style="vertical-align:middle" /></a></span>

아이핀이란, 회원님의 개인정보 보호를 위해 <br />

웹사이트에 주민등록번호를 제공하지 않고,<br />

본인임을 확인하는 인터넷상의 개인식별번호 서비스입니다.<br />

아이핀을 통한 가입을 원하시면 아이핀 인증 버튼을 눌러 진행해 주십시오.

</p>

</div>

</div>

</div>


   ※ 게시판 성인인증 페이지에도 적용하려면, 인트로 본인인증(adult_i.html) 및 인트로 본인인증+회원(adult_im.html)
       페이지 내 소스를 전체복사하여 게시판(board.html) 페이지에 넣고 수정하시면 됩니다.


    ▼ 화면1. 성인인증 적용 후 화면
   


4. 예외 사항

   - 사용 도중 아이핀 인증이 만료되거나 일시중지되면, 성인인증/14세 미만 비회원 구매제한 팝업 내에서
      아이핀 인증 관련 영역은 자동으로 비노출됩니다.


 


카페24 는 쇼핑몰 운영을 보다 편리하고 쉽게 할 수 있도록 기능 업데이트를 지속적으로 진행하고 있습니다.
더 좋은 서비스가 되기 위해 노력하겠습니다. 끊임없는 애정과 관심 부탁 드립니다.

궁금하신 사항은 언제든지 고객지원센터 1:1게시판으로 문의해주세요. [문의하기]