고객 인증 서비스 이용 시 회원가입/ 비밀번호 찾기 페이지에서 본인인증 수단을 노출하는 방법에 대해 알아보겠습니다.

* 고객 인증 서비스에 ‘통합인증’이 추가되면서 본인인증 기본 템플릿이 변경되었습니다.
* 현재 인증 서비스를 사용중인 상점도 새로운 디자인 적용을 원하시면 새로운 소스로 변경해주세요.

<< 기능 설정 >>
[쇼핑몰 구축 > 고객 인증기능 설정 > 고객 인증기능 신청] 에서 원하는 고객 인증 기능을 신청 한 후, 심사가 완료되면,
[쇼핑몰 구축 > 고객 인증기능 설정 > 고객 인증서비스 설정] 에서 “사용함” 설정 후 이용할 수 있습니다.



[ PC버전 ]

<< 회원가입 페이지 >>

1. 작업위치
중앙 디자인 > 회원관련 > 회원가입 화면 > 개인 회원가입/수정
중앙 디자인 > 회원관련 > 회원가입 화면 > BtoB 개인 회원가입

2. 가상태그
- 통합인증: <!--/auth_method/-->


3. 작업 방법

[디자인 편집 탭]
기존 소스의 빨간색 부분을 삭제하신 뒤, 변경 소스의 파란색 부분으로 변경해주세요.

기존 소스)

<!--/form_join/-->
<!--/if_use_auth/-->
<div class="ipin-confirm">
	<div class="chk-wrap">
		<!--/if_radio_auth_mobile/-->
		<span class="first">
			<!--/radio_auth_mobile/-->
			<label>휴대폰 인증</label>
		</span>
		<!--/end_if/-->
		<!--/if_radio_auth_ipin/-->
		<span class="first">
			<!--/radio_auth_ipin/-->
			<label>아이핀 인증</label>
		</span>
		<!--/end_if/-->
		<!--/if_radio_auth_naver/-->
		<span class="first">
			<!--/radio_auth_naver/-->
			<label>네이버 인증서</label>
		</span>
		<!--/end_if/-->
		<!--/if_radio_auth_pass/-->
		<span>
			<!--/radio_auth_pass/-->
			<label>본인 확인 없이 가입</label>
		</span>
		<!--/end_if/-->
	</div>
	<div class="info-wrap">
		<p class="ipin-info">
	             <strong>회원가입을 위해 본인인증이 필요합니다.</strong><br/>
                        아래 본인인증 수단 중 하나를 선택하여 인증을 진행해주세요.
		</p>
		<!--/if_link_mobile_info/-->
		<a class="info-link" href="<!--/link_mobile_info/-->">휴대폰 인증이란?</a>
		<!--/end_if/-->
		<!--/if_link_ipin_info/-->
		<a class="info-link" target="_blank" href="<!--/link_ipin_info/-->">아이핀 서비스란?</a>
		<!--/end_if/-->
		<!--/if_link_naver_auth_info/-->
		<a class="info-link" href="<!--/link_naver_auth_info/-->">네이버 인증서란?</a>
		<!--/end_if/-->
	</div>
	<div class="btnArea">
		<div class="center">
			<!--/if_link_mobile_auth/-->
			<a href="<!--/link_mobile_auth/-->" class="cbtn form">휴대폰 인증</a>
			<!--/end_if/-->
			<!--/if_link_ipin_auth/-->
			<a href="<!--/link_ipin_auth/-->" class="cbtn form">아이핀 인증</a>
			<!--/end_if/-->
			<!--/if_link_naver_auth/-->
			<a href="<!--/link_naver_auth/-->" class="cbtn form">네이버 인증서</a>
			<!--/end_if/-->
		</div>
	</div>
</div>
<!--/end_if/-->


변경 소스) - 파란 소스만 복사됩니다.

    <!--/form_join/-->
    <!--/if_use_auth/-->
    <div class="auth-confirm">
        <div class="auth-wrap">
	    <p class="auth-info">
               <strong>회원가입을 위해 본인인증이 필요합니다.</strong><br/>
               아래 본인인증 수단 중 하나를 선택하여 인증을 진행해주세요.
	    </p>
	</div>
	<div class="btnArea">
	    <div class="center">
                   <!--/if_auth_method/-->
                      <!--/loop_auth_method/-->
		     <a href="<!--/auth_method@link/-->"><span><img src="<!--/auth_method@image/-->"><br/><!--/auth_method@title/--></span></a>
                      <!--/end_loop/-->
                   <!--/end_if/-->
	    </div>
	</div>
    </div>
    <!--/end_if/-->


[베이직심플 - CSS탭]
/* 본인인증 서비스 영역 */
.auth-confirm { padding:40px 0 60px; text-align:center; }
.auth-confirm .chk-wrap { padding-bottom:10px; line-height: 20px; vertical-align: middle; }
.auth-confirm .chk-wrap i { display: inline-block; vertical-align: middle; }
.auth-confirm .chk-wrap label { font-size:14px; vertical-align: middle; line-height: 1.25; }
.auth-confirm .chk-wrap .first { margin-right: 20px; }
.auth-confirm .auth-wrap {}
.auth-confirm .auth-wrap .auth-info { color:#000; font-size:16px; line-height:20px; }
.auth-confirm .btnArea { padding: 28px 0 10px; }
.auth-confirm .btnArea a { display: inline-block; width: 98px; height: 98px; font-size: 12px; margin: 0 8px; border:1px solid #dedede; color:#000; text-align:center; letter-spacing:-1px; }
.auth-confirm .btnArea a span { display: inline-block; width:96px; height:96px; border:1px solid #fff; }
.auth-confirm .btnArea a img { width: 45px; height: 45px; margin: 14px 0 10px; }
.auth-confirm .btnArea a:hover,
.auth-confirm .btnArea a:hover span { border:1px solid #000; }
.auth-confirm .btnArea a.on,
.auth-confirm .btnArea a.on span { border:1px solid #000; }

[모던심플 - CSS탭]
/* 본인인증 서비스 영역 */
#join .auth-confirm { padding: 26px 0 30px; margin-bottom: 20px; border: 1px solid #d4d4d4; text-align: center; color:#000; }
#join .auth-confirm .chk-wrap { line-height: 20px; vertical-align: middle; }
#join .auth-confirm .chk-wrap i { display: inline-block; vertical-align: middle; }
#join .auth-confirm .chk-wrap label { vertical-align: middle; line-height: 1.25; }
#join .auth-confirm .chk-wrap .first { margin-right: 20px; }
#join .auth-confirm .auth-info { line-height: 20px; }
#join .auth-confirm .btn-area { text-align: center; margin-top:15px; }
#join .auth-confirm .btn-area a { display: inline-block; width: 98px; height: 98px; font-size: 12px; margin: 0 8px; border:1px solid #dedede; color:#000; text-align:center; letter-spacing:-1px; }
#join .auth-confirm .btn-area a span { display: inline-block; width:96px; height:96px; border:1px solid #fff; }
#join .auth-confirm .btn-area a img { width: 45px; height: 45px; margin: 14px 0 10px; }
#join .auth-confirm .btn-area a:hover,
#join .auth-confirm .btn-area a:hover span { border:1px solid #000; }
#join .auth-confirm .btn-area a.on,
#join .auth-confirm .btn-area a.on span { border:1px solid #000; }

[JS탭]
// 본인인증 선택
$('.auth-confirm .btnArea a').click(function(){
	$(this).addClass('on').siblings('a').removeClass('on');
});



5. 예시 이미지




<< 비밀번호 찾기 페이지 >>

1. 작업위치
중앙 디자인 > 회원관련 > 로그인 화면 > 아이디/패스워드 찾기
중앙 디자인 > 회원관련 > 로그인 화면 > BtoB 아이디/패스워드 찾기

2. 가상태그
- 통합인증:  <!--/auth_method/-->


3. 작업 방법

[디자인 편집 탭]
기존 소스의 빨간색 부분을 삭제하신 뒤, 변경 소스의 파란색 부분으로 변경해주세요.

기존 소스)
                        <!--/if_use_auth/-->
                        <!--/block_find_pw_auth/-->
                        <div class="info-ipin">
                            <div class="ipin-confirm">
                                <dl>
                                    <dt>
                                        임시 비밀번호 발급을 위해 본인인증이 필요합니다.<br/>본인인증 수단 중 하나를 선택하여 인증을 진행해주세요.
                                    </dt>
                                    <dd>
                                        <!--/if_link_mobile_info/--><a class="ipin-svc" href="<!--/link_mobile_info/-->">휴대폰 인증이란?</a><!--/end_if/-->         
                                        <!--/if_link_ipin_info/--><a class="ipin-svc" href="<!--/link_ipin_info/-->">아이핀 인증이란?</a><!--/end_if/-->
                                        <!--/if_link_naver_auth_info/--><a class="ipin-svc" href="<!--/link_naver_auth_info/-->">네이버인증서란?</a><!--/end_if/-->
                                    </dd>            
                                </dl>
                            </div>
                            <div class="btn-area">
                                <div class="inner">
                                    <!--/if_link_mobile_auth/--><a href="<!--/link_mobile_auth/-->" class="CSSbuttonWhite first">휴대폰 인증</a><!--/end_if/-->
                                    <!--/if_link_ipin_auth/--><a href="<!--/link_ipin_auth/-->" class="CSSbuttonWhite">아이핀 인증</a><!--/end_if/-->
                                    <!--/if_link_naver_auth/--><a href="<!--/link_naver_auth/-->" class="CSSbuttonWhite">네이버인증서</a><!--/end_if/-->
                                </div>
                                <a href="<!--/link_login/-->" class="CSSbuttonBlack">로그인</a>
                            </div>
                        </div>
                        <!--/end_block/-->
                        <!--/end_if/-->


변경 소스) - 파란 소스만 복사됩니다.

                        <!--/if_use_auth/-->
                        <!--/block_find_pw_auth/-->
                        <div class="info-ipin">
                            <div class="ipin-confirm">
                                <dl>
                                    <dt>
                                        임시 비밀번호 발급을 위해 본인인증이 필요합니다.<br/>본인인증 수단 중 하나를 선택하여 인증을 진행해주세요.
                                    </dt>
                                    <dd>
                                    
                                    <!--/if_auth_method/-->
                                        <!--/loop_auth_method/-->
 				        <a href="<!--/auth_method@link/-->" class="cbtn form"><span><img src="<!--/auth_method@image/-->"><br/><!--/auth_method@title/--></span></a>
                                        <!--/end_loop/-->
                                     <!--/end_if/--> 



[베이직심플 – CSS탭]
/* 본인인증 */
.find_idpw .ipin-confirm { margin-top:15px; padding: 17px 0 18px; border-top:1px solid #ddd; }
.find_idpw .ipin-confirm dt { margin-bottom:16px; color:#000; line-height:18px; }
.find_idpw .ipin-confirm dd { text-align:center; }
.find_idpw .ipin-confirm dd a { display: inline-block; width: 88px; height: 88px; font-size: 12px; margin: 0 0 0 5px; border:1px solid #dedede; color:#000; text-align:center; letter-spacing:-1px; }
.find_idpw .ipin-confirm dd a:first-child { margin-left:-1px; }
.find_idpw .ipin-confirm dd a span { display: inline-block; width:86px; height:86px; border:1px solid #fff; }
.find_idpw .ipin-confirm dd a:hover,
.find_idpw .ipin-confirm dd a:hover span { border:1px solid #000; }
.find_idpw .ipin-confirm dd a img { width: 45px; height: 45px; margin: 9px 0; }

[모던심플 – CSS탭]
/* 본인인증 */
.find_idpw .ipin-confirm { text-align: center; padding:20px 0; border-top:2px solid #384150; border-bottom:2px solid #384150; }
.find_idpw .ipin-confirm a { display: inline-block; width: 88px; height: 88px; font-size: 12px; margin: 0 4px; border:1px solid #dedede; color:#000; text-align: center; letter-spacing:-1px; }
.find_idpw .ipin-confirm a span { display: inline-block; width:86px; height:86px; border:1px solid #fff; }
.find_idpw .ipin-confirm a:hover,
.find_idpw .ipin-confirm a:hover span { border:1px solid #000; }
.find_idpw .ipin-confirm a img { width: 45px; height: 45px; margin: 9px 0; }

5. 예시 이미지






[ 모바일 버전 ]

<< 회원가입 페이지>>

1. 작업위치
중앙 디자인 > 회원관련 > 회원가입 화면 > 회원 가입 인증

2. 작업 방법

[디자인 편집 탭]
기존 소스의 빨간색 부분을 삭제하신 뒤, 변경 소스의 파란색 부분으로 변경해주세요.

기존 소스)
                <!--/if_use_auth/-->
                <div id="member_auth">
                    <div class="member_authTop">
                        <p class="cont-tit bold">본인인증</p>
                        <p>인증 수단을 선택하고 본인인증을 해주세요.</p>
                    </div>
                    <div class="member_authBottom">
                        <ul class="chk-wrap">
                            <!--/if_radio_auth_mobile/-->
                            <li>
                                <label><!--/radio_auth_mobile/--> 휴대폰 인증</label>
                            </li>
                            <!--/end_if/-->
                            <!--/if_radio_auth_ipin/-->
                            <li>
                                <label><!--/radio_auth_ipin/--> 아이핀 인증</label>
                            </li>
                            <!--/end_if/-->
                            <!--/if_radio_auth_naver/-->
                            <li>
                                <label><!--/radio_auth_naver/--> 네이버 인증서</label>
                            </li>
                            <!--/end_if/-->
                            <!--/if_radio_auth_pass/-->
                            <li>
                                <label><!--/radio_auth_pass/--> 본인 확인 없이 가입</label>
                            </li>
                            <!--/end_if/-->
                        </ul>
                        <div class="btns_auth">
                            <!--/if_link_mobile_auth/-->
                            <a href="<!--/link_mobile_auth/-->" class="btn_Red mobile-auth">휴대폰 인증</a>
                            <!--/end_if/-->
                            <!--/if_link_ipin_auth/-->
                            <a href="<!--/link_ipin_auth/-->" class="btn_Red ipin-auth">아이핀 인증</a>
                            <!--/end_if/-->
                            <!--/if_link_naver_auth/-->
                            <a href="<!--/link_naver_auth/-->" class="btn_Red naver-auth">네이버 인증서</a>
                            <!--/end_if/-->
                            <!--/if_link_next/-->
                            <a type="submit" onclick="<!--/link_next/-->" class="btn_Red no-auth" name="submit">본인 확인 없이 가입</a>
                            <!--/end_if/-->
                        </div>
                    </div>
                </div>
                <!--/end_if/-->
            </div>

변경 소스) - 파란 소스만 복사됩니다.
                <!--/if_use_auth/-->
                <div id="member_auth">
                    <div class="member_authTop">
                        <p class="cont-tit bold">본인인증</p>
                        <p>인증 수단을 선택하고 본인인증을 해주세요.</p>
                    </div>
                    <div class="member_authBottom">
                        
                        <ul class="btns_auth">
                            <!--/if_auth_method/-->
                            <!--/loop_auth_method/-->
             		         <li><a href="<!--/auth_method@link/-->"><span><img src="<!--/auth_method@image/-->"></span><!--/auth_method@title/--></a>
                            <!--/end_loop/-->
                            <!--/end_if/-->
                        </ul> 
                    </div>
                </div>
                <!--/end_if/-->


[모바일 2.0 – CSS탭]
#join .btns_auth li { margin-top:10px; list-style:none; }
#join .btns_auth li:first-child { margin-top:0; }
#join .btns_auth li a { display: block; font-size: 14px; border:1px solid #cdcdcd; color:#3e3e3e; line-height:44px; letter-spacing:-1px; background:#fff; font-weight:400; }
#join .btns_auth li a span { display: inline-block; width:44px; margin-right:10px; border-right:1px solid #cdcdcd; }
#join .btns_auth li a img { width: 44px; height: 44px; }

[모바일 4.0 – CSS탭]
#join .privercy #member_auth .member_authTop {background-color: #fff; padding:20px 10px; margin:0 5px;}
#join .privercy #member_auth .member_authTop .cont-tit {margin-bottom:10px;}
#join .privercy #member_auth .member_authBottom {background-color: #fff; padding:20px 10px; margin-top:20px;}
#join .privercy #member_auth .member_authBottom .chk-wrap {margin-bottom: 10px;}
#join .privercy #member_auth .member_authBottom .chk-wrap li {padding: 5px 0;}
#join .privercy #member_auth .member_authBottom .btns_auth li { margin-top:10px; list-style:none; }
#join .privercy #member_auth .member_authBottom .btns_auth li:first-child { margin-top:0; }
#join .privercy #member_auth .member_authBottom .btns_auth li a { display: block; font-size: 14px; border:1px solid #cdcdcd; color:#3e3e3e; line-height:44px; letter-spacing:-1px; background:#fff; font-weight:400; }
#join .privercy #member_auth .member_authBottom .btns_auth li a span { display: inline-block; width:44px; margin-right:10px; border-right:1px solid #cdcdcd; }
#join .privercy #member_auth .member_authBottom .btns_auth li a img { width: 44px; height: 44px; }


* 파워팩의 경우, 회원관련 > 회원가입 화면 > 회원 가입인증 페이지에 [본인인증 선택] 블록을 추가해 주시면 됩니다.



3. 예시 이미지




<< 비밀번호 찾기 페이지>>

1. 작업위치
중앙 디자인 > 회원관련 > 로그인 화면 > 아이디/패스워드 찾기
중앙 디자인 > 회원관련 > 로그인 화면 > BtoB 아이디/패스워드 찾기

2. 작업 방법

[디자인 편집 탭]
기존 소스의 빨간색 부분을 삭제하신 뒤, 변경 소스의 파란색 부분으로 변경해주세요.

기존 소스)

<!--/if_use_auth/-->
        <!--/block_find_pw_auth/-->
        <div class="loginBottom">
            <p>
                임시 비밀번호 발급을 위해 본인인증이 필요합니다.<br />
                본인인증 수단 중 하나를 선택하여 인증을 진행해 주세요.<br/>

                <!--/if_link_mobile_auth/-->
                <a href="<!--/link_mobile_auth/-->" class="btn_Red">휴대폰 인증</a>
                <!--/end_if/-->
                <!--/if_link_ipin_auth/-->
                <a href="<!--/link_ipin_auth/-->" class="btn_Red">아이핀 인증</a>
                <!--/end_if/-->
                <!--/if_link_naver_auth/-->
                <a href="<!--/link_naver_auth/-->" class="btn_Red">네이버 인증서</a>
                <!--/end_if/-->
                <a href="<!--/link_login/-->" class="btn_White">로그인</a>
            </p>
        </div>
        <!--/end_block/-->
        <!--/end_if/-->

변경 소스) - 파란 소스만 복사됩니다.
<!--/if_use_auth/-->
        <!--/block_find_pw_auth/-->
        <div class="loginBottom">
            <p>
                임시 비밀번호 발급을 위해 본인인증이 필요합니다.<br />
                본인인증 수단 중 하나를 선택하여 인증을 진행해 주세요.<br/>

            
            <!--/if_auth_method/-->
                <!--/loop_auth_method/-->
 		<a href="<!--/auth_method@link/-->" class="btn_auth"><span><img src="<!--/auth_method@image/-->"></span><!--/auth_method@title/--></a>
                <!--/end_loop/-->
            <!--/end_if/--> 
                <a href="<!--/link_login/-->" class="btn_Red">로그인</a>
            </p>
        </div>
        <!--/end_block/-->
        <!--/end_if/-->


[모바일 2.0 – CSS탭]
/* 본인인증 */
#findIdpw .loginBottom p { padding:18px 15px; text-align:center; font-weight:bold; background:#eaeaea; }
#findIdpw .loginBottom p a.btn_auth { display: block; margin-top:10px; font-size: 14px; border:1px solid #cdcdcd; color:#3e3e3e; line-height:44px; letter-spacing:-1px; text-align:left; background:#fff; font-weight:400; }
#findIdpw .loginBottom p a.btn_auth span { display: inline-block; width:44px; margin-right:10px; border-right:1px solid #cdcdcd; }
#findIdpw .loginBottom p a.btn_auth img { width: 44px; height: 44px; }
#findIdpw .loginBottom p a.btn_Red { margin-top:10px; font-size:14px; }

[모바일 4.0 – CSS탭]
#findIdpw .loginBottom { margin:0; }
#findIdpw .loginInput input {width:100%; display:block; margin-bottom:10px;}
#findIdpw .loginMiddle .btn_Red {font-size:1.167em; margin:10px 0;}
#findIdpw .loginMiddle .btn_White {font-size:1.167em;}
#findIdpw .loginBottom p { padding:18px 15px; text-align:center; font-weight:bold; background:#eaeaea; }
#findIdpw .loginBottom p a.btn_auth { display: block; margin-top:10px; font-size: 14px; border:1px solid #cdcdcd; color:#3e3e3e; line-height:44px; letter-spacing:-1px; text-align:left; background:#fff; font-weight:400; }
#findIdpw .loginBottom p a.btn_auth span { display: inline-block; width:44px; margin-right:10px; border-right:1px solid #cdcdcd; }
#findIdpw .loginBottom p a.btn_auth img { width: 44px; height: 44px; }
#findIdpw .loginBottom p a.btn_Red { margin-top:10px; font-size:14px; }

* 파워팩의 경우, 회원관련 > 로그인 화면 > 아이디/패스워드 찾기 페이지에 [회원정보 입력 폼] 블록을 추가해주시면 됩니다.


3. 예시 이미지