매뉴얼

친절한 상담, 빠른 답변

견적문의, 기능상담 등 모든 궁금증을 해결해 드립니다.

Page : Home 고객지원 매뉴얼

총 201건, 6/21 페이지

[기타] 외부 데이타 베이스 MS-SQL 연동 방법

* 본 강좌는 php, ms-sql 을 다룰줄아는 개발자 위주로 작성 되었습니다.

 

굿웹에이전시 솔루션으로 홈페이지 운영시 불가피 하게 다른 프로그램을 개발해야하는 경우가 있습니다.

이때 굿웹에이전시 솔루션의 DB에 접속 할수 없으므로 별도의 ms-sql DB를 셋팅해서 연동 및 개발을 할 수 있습니다.

 

예를들어 타사 쇼핑몰에서 운영하다 굿웹에이전시로 이전시 이전 주문서를 조회할수 없게 됩니다.

이런경우 이전 사이트의 DB를  연동하여 주문서를 볼수 있게 해줘야 한다든지,

굿웹에이전시에서 제공되지 않는 게시판이라든지 메모장 등을 직접  개발 할수 있습니다.

 

 

1. 굿웹에이전시 솔루션의 관리자모드로 로그인 후 [프로그램 샵]에서 "외부 DB 연동 모듈"을 설치 합니다.

 

2. [프로그램 SHOP > 프로그램 환경설정 > 외부 DB 연동]에서  ms-sql DB 정보를 입력 합니다.

 

3. MS-SQL 에서 접근권한을 열어줘야 합니다.

이때 접근 가능한 IP주소는 위 도움말에서 제공되는 IP주소로 설정해줘야 합니다

(mysql 접근권한 설정은 생략하도록 하겠습니다.)

 

 

4. 이렇게 mssql 연결 정보를 등록 했다면 정상적으로 연동 되는지 테스트 해야 합니다.

[디자인관리 > 고급 디자인 관리 > 추가 페이지 관리 ] 에서  페이지를 생성 해서 아래와 같이 입력후 확인해보시기 바랍니다.

 

 

 

 

외부 mssql DB 연동 <Br>{@outside_mssql_connect();@}

 

 

실제 페이지로 접속해보면 아무런 응답이 없다면 정상적으로 연동이 된겁니다.

만약 에러가 있다면 에러메세지가 출력 되고 소스는 더이상 출력 되지 않고 exit 처리 됩니다.

 

 

5. 사용 가능한 MS-SQL 명령어

굿웹에이전시 솔루션에서는 보안상 모든 php문법과, ms-sql 명령어가 지원 되지 않습니다.

사용가능한 mssql 함수는 아래와 같습니다.

- mssql_query()

- mssql_fetch_array()

- mssql_fetch_row()

- mssql_free_result()

 

 

수고 많으셨습니다. ^^

 

 

[기타] 웹사이트에 나눔고딕 폰트 적용하기

웹사이트에 윈도우에서 지원하는 기본폰트 (굴림,돋움,바탕 등....)가 아닌 다른 폰트를 적용하고 싶은 경우, 해당하는 폰트파일을 업로드하여 추가해야 합니다.

 

다음을 따라하시면 간단히 나눔고딕 폰트를 적용하실 수 있습니다.

 

 

1. 첨부된 파일을 다운받아서 압축을 해제합니다.

 

 

2. FTP에 접속하여 'font' 폴더를 생성 후, 해당 폴더에 파일을 업로드 합니다.

 

 

 

3. 사이트에 적용되어있는 css 최상단에 다음을 추가 합니다.

 

/* Nanum Gothic Font */@font-face {  font-family: 'Nanum Gothic';  font-style: normal;  font-weight: 400;  src: url('/img_up/shop_pds/사이트아이디/design/font/NanumGothic-Regular.eot');  src: url('/img_up/shop_pds/사이트아이디/design/font/NanumGothic-Regular.eot?#iefix') format('embedded-opentype'),       url('/img_up/shop_pds/사이트아이디/design/font/NanumGothic-Regular.woff2') format('woff2'),       url('/img_up/shop_pds/사이트아이디/design/font/NanumGothic-Regular.woff') format('woff'),       url('/img_up/shop_pds/사이트아이디/design/font/NanumGothic-Regular.ttf') format('truetype');}@font-face {  font-family: 'Nanum Gothic';  font-style: normal;  font-weight: 700;  src: url('/img_up/shop_pds/사이트아이디/design/font/NanumGothic-Bold.eot');  src: url('/img_up/shop_pds/사이트아이디/design/font/NanumGothic-Bold.eot?#iefix') format('embedded-opentype'),       url('/img_up/shop_pds/사이트아이디/design/font/NanumGothic-Bold.woff2') format('woff2'),       url('/img_up/shop_pds/사이트아이디/design/font/NanumGothic-Bold.woff') format('woff'),       url('/img_up/shop_pds/사이트아이디/design/font/NanumGothic-Bold.ttf') format('truetype');}@font-face {  font-family: 'Nanum Gothic';  font-style: normal;  font-weight: 800;  src: url('/img_up/shop_pds/사이트아이디/design/font/NanumGothic-ExtraBold.eot');  src: url('/img_up/shop_pds/사이트아이디/design/font/NanumGothic-ExtraBold.eot?#iefix') format('embedded-opentype'),       url('/img_up/shop_pds/사이트아이디/design/font/NanumGothic-ExtraBold.woff2') format('woff2'),       url('/img_up/shop_pds/사이트아이디/design/font/NanumGothic-ExtraBold.woff') format('woff'),       url('/img_up/shop_pds/사이트아이디/design/font/NanumGothic-ExtraBold.ttf') format('truetype');}body {font-family:'Nanum Gothic';}

 

예시에는 body 에 font-fmily 를 적용하여 사이트 전체에 나눔고딕이 적용되었습니다.

특정 클래스에만 나눔고딕 폰트를 적용하고 싶으시면, 다음과 같이 추가해주세요.

 

 .class명 {font-family:'Nanum Gothic';} 
[기타] 아이폰 Safari 캐시 삭제하기

1. 설정으로 들어갑니다.

 

 

 

 

 

 

 

2. Safari 를 선택합니다.

 

 

 

 

 

 

 

3. 방문 기록 및 웹 사이트 데이터 지우기 를 누릅니다.

 

 

 

 

 

 

 

4. 방문 기록 및 데이터 지우기를 누릅니다.

 

 

 

 

 

 

 

5. 캐시가 정상적으로 삭제되었다면 글자가 회색으로 변하게 됩니다.

 

 

 

 

[기타] 폐쇄몰 및 성인전용 사이트로 설정시 특정 페이지만 접근가능하도록 허용 하는 방법

[폐쇄몰로 설정 한경우]

 

[성인 사이트로 설정한경우]

 

 

폐쇄몰 및 성인 사이트 운영시 경우에 따라  특정 페이지를 모두에게 보여줘야 할때가 있습니다.

예를들어 도움말 페이지나 공지사항등은 꼭 회원이 아니라  비회원 및 실명인증 받지 않은 비회원인경우 보여줘야 합니다.

하지만 폐쇄몰 및 성인 사이트로 설정 하게 되면 인트로 페이지를 제외한 모든 페이지가 자동 차단되기 때문에 소스수정을 통해서 열어줘야 합니다.

 

예를들어 특정 추가페이지 공개해야 하는 아래와 같이 소스 추가해보시기 바랍니다.

 

<php name="login_only_no_chk" value="1">

 

 

 

이와 같은 방식으로 게시판 및 전송폼등 특정 페이지만 모두에게 공개 할수 있습니다.

 

PS. 작업 편의상  회원가입, 로그인 페이는 자동으로 <php name="login_only_no_chk" value="1"> 소스가 들어가 있으므로 착오 없으시기 바랍니다.

 

[기타] 디바이스 정보 가져오기

반응형웹이나 모바일웹의 경우 해당사이트를 접속한 모바일기기에 따라서 화면이 다르게 보여질 수 있습니다.

특정 기기에서만 오류가 발생할 경우, 해당 기기의 종류를 확인하는 것이 중요합니다.

 

모바일기기 및 기타 정보를 쉽게 알아보려면,

다음과 같이 그룹디자인을 추가하신 후에 사이트를 확인해주세요.

 

 

 

 

1. 프로그램 마법사 기능을 이용하여 다음 그룹디자인을 설치합니다.

 

 

 

 

 

 

2. 스킨 페이지 상단에 그룹디자인을 추가합니다.

 

 

 

 

 

 

3. 모바일로 사이트를 접속하여 확인합니다.

 

 

ex) 삼성 갤럭시 S3

 

 

ex) 아이폰5

 

 

 

ex) 아이패드 에어2

 

 

ex) PC (크롬 브라우저)

 

 

 

 

mobile 스마트폰 및 테블릿PC에서 접속했다면 1을 반환 합니다.
app 하이브리드APP으로 접속했다면 1을 반환 합니다.
web 현재 접속한 홈페이지가 PC웹이라면 0을 반환, 모바일웹이라면 1을 반환 합니다
device 모바일 디바이스를 체크하여 반환 합니다. (android / ios)

 

상세정보

 

[기타] 템플릿에 적용된 아이콘 변경하기

아이콘 폰트란?

 

특수문자코드를 입력해서 다양한 아이콘을 사용할 수 있도록 해주는 기능입니다.

아이콘 폰트는 텍스트 형태로 되어있어서 크기 및 색상의 변경이 자유롭습니다.

 

다음과 같이 따라하시면 누구나 간편하게 아이콘을 변경 할 수 있습니다.

 

 

 

 

0. 아이콘 변경하기

 

- 샘플사이트의 전화하기 아이콘을 변경해보겠습니다.

http://ursmart112.good-web.co.kr/main

 

 

 

 

 

1. 아이콘 폰트 파일 다운 받기

 

1.1) 관리자모드에 접속합니다.

 

1.2) [디자인관리 > 고급 디자인 관리 > 웹디자인FTP]에서 PC웹 디자인 FTP에 접속합니다.

 

 

 

 

1.3) icomoon 폴더로 들어갑니다.

 

 

 

 

1.4) selection.json 파일을 다운받습니다.

(selection.jon 파일에는 해당템플릿에 사용된 모든 아이콘의 정보가 담겨져 있습니다.)

 

 

 

 

 

2. 아이콘 사이트 사용방법

 

2.1) icomoon.io 사이트에 접속합니다.

(icomoon 은 아이콘 폰트를 제공하는 서비스입니다.)

http://icomoon.io/

 

 

2.2) IcoMoon App 버튼을 클릭합니다.

 

 

 

 

2.3) Import Project 를 클릭합니다.

 

 

 

 

2.4) 다운받아둔 selection.json 파일을 선택합니다.

 

 

 

 

2.5) 추가된 Project 를 Load 합니다.

 

 

 

 

 

3. 아이콘 확인 후 추가하기

 

3.1) 현재 등록된 아이콘들이 보여집니다.

 

3.2) Add Icons From Library... 를 클릭합니다.

 

 

 

 

3.3) IcoMoon - Free 를 Add 합니다.

 

주의) Purchase 로 되어있는것은 유료이므로 사용하지 않도록 합니다.

템플릿에서는 다음 두종류를 사용하고 있습니다.

IcoMoon - Free (32 grid)

Entypo+ (40 grid)

 

 

 

 

3.4) 원하는 아이콘을 선택 한 후, Generate Font 를 클릭합니다.

(Generate Font 를 누르면 아이콘별 코드값을 알 수 있습니다.)

 

 

 

 

3.5) Download 합니다.

(새로 추가된 아이콘의 코드값을 확인합니다.) - e942

 

 

 

 

 

4. Font 파일 업데이트 하기

 

4.1) Download 받은 파일의 압축을 해제 합니다.

 

 

 

 

4.2) [디자인관리 > 고급 디자인 관리 > 웹디자인FTP]에서 PC웹 디자인 FTP에 접속합니다.

 

 

 

 

4.3) icomoon 폴더로 들어갑니다.

 

 

 

 

4.4) font 파일 4종 및 selection.jonstyle.css 파일을 업로드 합니다.

 

 

 

 

 

5. 전화하기 아이콘 변경하기    

 

5.1) 전화하기 아이콘에서 우클릭 후 검사(N)를 선택합니다.

 

 

 

 

5.2) 아이콘이 적용된 css를 찾습니다.

(적용된 class 명 tel:before)

(적용된 아이콘 코드 : e90f)

 

 

 

 

5.3) [디자인관리 > 고급 디자인 관리 > CSS 파일관리] 에서 layout_mobile 수정을 클릭합니다.

 

 

 

 

5.4)  검색기능(ctrl+f)을 사용하여 tel:before 를 찾습니다.

 

 

 

 

5.5) 아이콘의 코드 및 색상을 변경합니다.

 

 

 

 

 

6. 사이트 확인하기

- 사이트를 새로고침(F5)하여 아이콘이 정상적으로 변경되었는지 확인합니다.

 

 

 

[기타] 일반 사이트에서 특정 페이지만 실명인증하도록 설정하는 방법

사이트 운영시 성인콘텐츠 등으로 인해서 특정 페이지의 접근을 제한해야하는 경우가 있습니다.

솔루션에서는 페이지에 특정코드를 추가하여, 해당 페이지에 실명인증기능을 추가할 수 있습니다.

 

 

 

1. 페이지에 코드를 넣기 전, 휴대폰 인증 또는 ipin 인증 서비스를 사용하기 위해서 실명인증설정을 해야 합니다.

다음글을 참고하여 실명인증설정을 해주시기 바랍니다.

 

[공통/일반] 휴대폰 본인확인 및 ipin 서비스 설치 방법

 

 

 

2.  일반페이지에 실명인증을 추가해 보도록 하겠습니다.

 

 

 

 

 

 

- 해당 페이지의 소스를 다음과 같이 수정합니다.

<!--@if($_SESSION['adult_chk'])-->	{@	$siren_arr = program_load(SIREN_USE_CHK); // 프로그램 호출하여 배열변수에 저장 한다.	@}	<div style="width:730px;margin:30px auto;">		<div>			<img src="/img_up/shop_pds/aramfarm/design/lab/certification_img_01.png">		</div>		<div style="padding:20px;border:1px solid #ccc;background:#fafafa;font-size:0;text-align:center;" cond="$siren_arr[ipin_use_yn]||$siren_arr[pcc_use_yn]">			<a href="javascript:program_load_siren('ipin')" style="display:inline-block;padding:20px;" cond="$siren_arr[ipin_use_yn]"><img src="/img_up/shop_pds/aramfarm/design/lab/certification_button_11.png" onmouseover="this.src='/img_up/shop_pds/aramfarm/design/lab/certification_button_12.png'" onmouseout="this.src='/img_up/shop_pds/aramfarm/design/lab/certification_button_11.png'"></a>			<a href="javascript:program_load_siren('pcc')" style="display:inline-block;padding:20px;" cond="$siren_arr[pcc_use_yn]"><img src="/img_up/shop_pds/aramfarm/design/lab/certification_button_21.png" onmouseover="this.src='/img_up/shop_pds/aramfarm/design/lab/certification_button_22.png'" onmouseout="this.src='/img_up/shop_pds/aramfarm/design/lab/certification_button_21.png'"></a>		</div>	</div><!--@else-->	<!-- 원본소스가 들어가는 부분입니다. -->	<div class="about">		<figure>{$easy_design[abo_img]}</figure>		<h1>{$easy_design[abo_title]}</h1>		<p>{$easy_design[abo_text]}</p>	</div><!--@end--> 

 

 

 

3. 위와 같이 설정한 후 해당페이지에 접속하게 되면, 실명인증안내와 함께 버튼이 출력되게 됩니다.

버튼이 출력되지 않을 경우 실명인증설정이 제대로 되지 않은 것이므로 다음 페이지에서 다시 확인해보시기 바랍니다.

 

[공통/일반] 휴대폰 본인확인 및 ipin 서비스 설치 방법

 

  

 

 

 

4. 버튼이 정상적으로 출력된다면, 실명인증 세팅이 완료된 것입니다.

이후로는 고객이 아이핀인증 또는 휴대폰인증을 한 후에, 해당 페이지의 내용을 볼 수 있게 됩니다.

 

 

[기타] 페이지별 음성안내 도움말을 적용하는 방법 (스킨에 음성안내 아이콘 적용 방법 포함)

사이트를 제작하다 보면 페이지에 대한 설명을 글로 다 표현하지 못 하는 경우가 있습니다.

예를 들어 글자를 많이 넣을 수 없는 페이지 디자인이라던지 모바일 페이지처럼 공간이 협소하여 설명 글을 많이 넣을 수 없는 경우가 있습니다.

이런 경우에 페이지 음성안내를 넣으면 사용자가 눈으로 디자인을 보고 귀로 페이지를 들을 수 있는 장점이 있습니다.

이 기능을 활용하여 시각 장애인을 위한 사이트를 제작 할 수 있으며, 바쁜 생활 중에 사이트를 이용하는 고객들에게 빠른 안내가 가능합니다.

 

그래서 이런 장점을 살릴 수 있도록 페이지별로 해당 페이지의 설명을 음성으로 안내 할 수 있는 음성안내 기능이 추가 되었습니다.

페이지의 설명을 소스로 넣으면 입력된 설명을 음성으로 읽어주는 기능이며, 이 음성을 재생/정지 제어 할 수 있는 아이콘을 사용자가 직접 추가하실 수 있습니다.

음성안내 기능 사용시 모바일 버전에서는 자동으로 음성안내 재생/정지 아이콘이 출력이 되며, PC 화면에서는 디자인에 맞게 원하는 위치에 아이콘을 넣어주시면 됩니다.

그럼 페이지 설명을 넣고, 음성안내 재생/정지 아이콘을 PC화면 스킨에 적용하는 방법을 알려드리겠습니다.

 

 

[적용모습]

 

 

[주의사항]

본 페이지의 음성안내 소스는 페이지별로 한번만 사용이 가능하며, 중복 사용시 에러가 발생하여 제대로 작동이 되지 않습니다.

즉, 스킨에 한번만 적용해 주셔야 올바르게 작동이 됩니다. (스킨 상단에 소스를 넣고, 하단에도 소스를 넣는다면 작동이 제대로 되지 않음)

 

 

[변수설명]

음성안내 기능의 사용여부를 체크해주는 변수 : $voice_file_path

변수 사용 방법은 아래와 같습니다.

 

<음성안내 기능을 사용 중일 때 실행하도록 하는 소스>

 

<!--@if($voice_file_path-->음성안내 기능이 사용 중일 때<!--@end-->

 

 

<음성안내 기능을 사용하지 않을 때 실행하도록 하는 소스>

 

<!--@if(!$voice_file_path-->음성안내 기능을 사용하지 않을 때<!--@end-->

 

 

 

[적용방법]

1. 음성안내를 할 페이지에 페이지 설명 내용과 음성 설정을 한 소스를 넣어주세요. (음성안내 사용 설정)

- 음성안내 기능은 모든 페이지에 사용이 가능합니다. (추가 페이지, 세부화면디자인 페이지, 맞춤게시판, 맞춤전송폼 등)

- 음성안내를 원하시는 페이지의 소스 상단이나 하단에 아래의 음성안내 사용 설정 소스를 추가해 주세요.

- 예시로 추가 페이지에 음성안내 기능을 넣어보겠습니다.

 

 

<bg_voice text="이 곳에 페이지 설명을 입력해 주세요." lan="kr" sex="M">

 

 

<소스 설명>
text="" 출력될 음성 내용
lan="kr"  언어 (kr:한국어 / en:영어 / jp:일어 / cn:중국어)
sex="M" 음성 성별 (M:남자 음성 / F:여자 음성)

 

<적용 화면>

 

해당 소스를 넣은 페이지를 접속해 보면 입력한 페이지 설명의 음성안내가 나오는 것을 확인하실 수 있습니다. → 페이지 확인 링크

이 소스만 넣게 되면 설명 음성을 끄거나 다시 재생 할 수 있는 버튼없이 페이지 설명 음성만 출력이 되는 상태가 됩니다.

음성안내 재생/정지 아이콘을 넣는 방법은 다음 단계를 확인해 주세요.

 

2. [디자인관리 > 고급디자인관리 > 스킨관리] 페이지에서 아이콘을 넣고자 하는 위치에 아래의 소스를 넣어 주세요. (음성안내 아이콘 삽입)

- 아래의 소스를 전체 다 복사하여 스킨 html 소스의 원하시는 위치에 넣어주세요.
 (소스 중에 data-lan="kr" 과 |lan="kr" 은 음성안내 관련 소스가 아닌 글자의 다국어 지원과 관련된 자동번역 소스이니 다국어 지원이 필요없으시다면 data-lan="kr" 과 |lan="kr" 소스는 삭제하셔도 무방합니다.)

 

 

<!--@if(!$mobile_conn_yn && $voice_file_path)--> <script>  function bg_voice_on(onoff){   // 쿠키 저장   SetCookie('bg_voice_onoff',onoff);   if(onoff == 'off'){    document.getElementById('voice_guide_on').style.display = 'none';    document.getElementById('voice_guide_off').style.display = 'inline-block';   }else{    document.getElementById('voice_guide_on').style.display = 'inline-block';    document.getElementById('voice_guide_off').style.display = 'none';   }   if(document.getElementById('bg_voice_player')){    if(onoff == 'off'){     // 현재 재생 중이면 stop() 처리     document.getElementById('bg_voice_player').pause();     document.getElementById('bg_voice_player').currentTime = 0;    }else{     // 다시 paly() 처리     document.getElementById('bg_voice_player').volume = 0.3;     document.getElementById('bg_voice_player').play();    }   }  } </script> {@ if($_COOKIE[bg_voice_onoff] != "off"){  //음성안내 재생  $voice_on_style = "";  $voice_off_style = "display:none"; }else{  //음성안내 정지  $voice_on_style = "display:none";  $voice_off_style = ""; } @} <span id="voice_guide_wrap">  <span id="voice_guide_on" class="icon_voice_guide state_voice_on" style="{$voice_on_style}">   <a href="javascript:bg_voice_on('off')" title="음성안내 끄기"|lan="kr"><span data-lan="kr">음성안내</span> : ON</a>  </span>  <span id="voice_guide_off" class="icon_voice_guide state_voice_off" style="{$voice_off_style}">   <a href="javascript:bg_voice_on('on')" title="음성안내 켜기"|lan="kr"><span data-lan="kr">음성안내</span> : OFF</a>  </span> </span><!--@end-->

 

 

<적용 화면>

 

사이트를 확인하면 위와 같은 상태로 보일 것입니다. (간혹 해당 영역 css 적용 상태에 따라 글자가 안 보일 수도 있습니다.)
이 부분을 아이콘으로 변환하기 위해서 CSS를 적용할 차례입니다. 다음 단계를 확인해 주세요.

 

3. [디자인관리 > 고급디자인관리 > CSS 파일관리] 페이지에서 스킨 css 파일에 아래의 소스를 추가해 주세요.

- 아래의 CSS를 전체 다 복사하여 css 파일에 추가해 주세요.
- 아이콘은 수정이 편하도록 이미지가 아닌 아이콘 폰트를 사용하였습니다.
- 아이콘의 색상 및 사이즈 변경하는 부분은 css 옆에 주석으로 표시 되어 있습니다.

 

 

/* 음성안내 */@font-face { font-family: 'voice_icomoon'; src: url("/img_up/shop_pds/aramskin/design/skin/voice_guide/icomoon.eot"); src: url("/img_up/shop_pds/aramskin/design/skin/voice_guide/icomoon.eot?#iefix") format("embedded-opentype"),  url("/img_up/shop_pds/aramskin/design/skin/voice_guide/icomoon.woff") format("woff"),  url("/img_up/shop_pds/aramskin/design/skin/voice_guide/icomoon.ttf") format("truetype"),  url("/img_up/shop_pds/aramskin/design/skin/voice_guide/icomoon.svg#icomoon") format("svg"); font-weight: normal; font-style: normal;}#voice_guide_wrap {display:inline-block;}#voice_guide_wrap .icon_voice_guide {display:inline-block; vertical-align:top;}#voice_guide_wrap .icon_voice_guide a {display:inline-block; width:30px; height:30px; line-height:30px; font-size:0; text-align:center;}#voice_guide_wrap .icon_voice_guide a > span {position:absolute; top:-9999px; left:-9999px; text-indent:-9999px;}#voice_guide_wrap .icon_voice_guide a:before {font-family: 'voice_icomoon'; font-size:16px; /* 아이콘 폰트 크기 */ line-height:30px;}#voice_guide_wrap .icon_voice_guide.state_voice_on a:before {content:'\e903'; color:#168fff; /* 재생 중일 때 아이콘 색상 */}#voice_guide_wrap .icon_voice_guide.state_voice_off a:before {content:'\e902'; color:#87909c; /* 정지 중일 때 아이콘 색상 */}@media all and (max-width:1023px){ #voice_guide_wrap {display:none;}} 

 

 

<적용 화면>

 

※ 본 페이지의 음성안내 아이콘은 해당 페이지의 음성안내 기능이 사용 중일 때에만 출력이 됩니다.

스킨에 2번, 3번의 소스를 넣었더라도 해당 페이지에 1번 소스가 없다면 음성안내 아이콘이 출력이 되지 않으니 참고 바랍니다.

만약 아이콘이 출력이 되지 않는다면 1번 소스의 삽입 여부를 확인해 주세요.
 

[기타] 음성안내 컨텐츠를 제작하는 방법

[설명하기 앞서]

지금 설명드릴 내용은 앞서 작성된 페이지별 음성안내 도움말과는 조금 다른 내용입니다.

페이지 음성안내는 해당 페이지에 대한 전체적인 설명이었다면, 음성안내 컨텐츠는 컨텐츠별로 음성안내를 할 수 있는 기능입니다.

한 페이지 안에 여러 개의 음성안내 컨텐츠가 제작될 수 있으며, 페이지 음성안내와는 조금 다르게 소스가 적용되니 페이지별로 음성안내를 하고 싶으신 분들은 아래의 링크를 따라가 주시면 됩니다.

☞ 페이지별 음성안내 설정방법

 


 

사이트를 제작하다 보면 페이지에 대한 설명을 글로 다 표현하지 못 하는 경우가 있습니다.

예를 들어 글자를 많이 넣을 수 없는 페이지 디자인이라던지 모바일 페이지처럼 공간이 협소하여 설명 글을 많이 넣을 수 없는 경우 등이 있는데

이럴 때에 음성안내 컨텐츠를 사용하면 사용자가 눈으로 디자인을 보고 귀로 페이지를 들을 수 있기 때문에 해결책이 될 수 있습니다.

이 기능을 활용하여 시각 장애인을 위한 사이트를 제작 할 수 있으며, 바쁜 생활 중에 사이트를 이용하는 고객들에게 빠른 안내가 가능합니다.

이러한 음성안내 컨텐츠를 제작하는 방법에 대해 설명해 드리겠습니다.

(해당 설명의 전체 소스는 게시글 하단에 게시되어 있으니 설명을 다 읽어보신 후 [디자인관리>고급디자인>추가페이지] 에서 소스를 붙여넣어 확인해 보시기 바랍니다^^)

 

[적용모습]

☞ 적용 페이지 확인

 

 

[음성안내 mp3 파일을 생성하는 방법]

음성 안내 할 내용을 mp3 파일로 자동 생성해 주는 명령어 : voice_load

이 명령어의 사용방법은 voice_load('음성 내용', '언어', '성별') 로 설정을 하실 수 있습니다.

설정 설명 : 언어 (kr:한국어 / en:영어 / jp:일어 / cn:중국어), 음성 성별 (M:남자 음성 / F:여자 음성)

 

컨텐츠에 사용하기 위해서는 이 voice_load 명령어를 사용해 mp3 파일을 불러올 수 있는 변수를 만들어야 합니다.

변수를 만드는 소스는 아래를 참고해 주세요.

 

 

{@    $voice_info1_mp3 = voice_load('음성안내 컨텐츠 입니다. 현재 한국어로 안내를 해드리고 있으며, 여성의 목소리로 안내되고 있습니다.', 'kr', 'F');@}

 

 

이렇게 만든 변수를 페이지에 출력해 보면 mp3 파일 경로가 출력되는 것을 확인하실 수 있습니다.
 

<변수 사용>

 

<mp3 파일 주소><br>{$voice_info1_mp3}

 

 

<변수 출력 모습>

 

여기까지 하시면 mp3파일이 생성된 것을 확인하실 수 있습니다. 만들어진 mp3 파일은 <audio> 태그를 이용해 재생 할 수 있는데, 이제 이 mp3가 정상적으로 생성이 되었는지 확인을 해보도록 하겠습니다.

 

 

[음성안내 mp3 파일을 재생하는 방법]

아래의 소스를 추가 페이지에 입력해 주세요.

 

 

{@    $voice_info1_mp3 = voice_load('음성안내 컨텐츠 입니다. 현재 한국어로 안내를 해드리고 있으며, 여성의 목소리로 안내되고 있습니다.', 'kr', 'F');@}<audio autoplay>    <source src="{$voice_info1_mp3}"></audio>

 

 

<적용 화면>

 

mp3 파일이 정상적으로 잘 생성이 되었다면 페이지를 확인했을 때 mp3 파일이 자동 재생되고 있을 것입니다.

여기까지만 해도 음성안내 컨텐츠는 완성될테지만 음성이 자동재생 되기 때문에 사이트 이용자가 원할 때 재생 또는 정지를 할 수 있도록 버튼 기능을 제공하는 것이 더 좋은데, 이 기능을 지원해 주는 <audio> 의 오디오 플레이어 기능이 있습니다.

위의 소스에서 <audio autoplay> 되어 있는 부분에 autoplay 대신 controls 를 넣으면 mp3를 제어 할 수 있는 오디오 플레이어가 출력이 됩니다. 아래의 화면을 참고해 주세요.

 

<적용 화면>

 

<익스플로러 11에서 본 페이지 화면>

 

오디오 플레이어 기능을 적용하고 나면 재생/정지, 구간 선택, 음량 조절이 가능하게 됩니다.

하지만 플레이어가 다소 크고 투박한 디자인이기 때문에 다른 컨텐츠들과 조화를 이루지 못 하고 혼자 너무 튀어보이는 단점이 있습니다. (참고 : 브라우저 마다 기본 오디오 플레이어 모습이 다름)

그래서 보기에 깔끔하도록 재생/정지 버튼만 나타도록 스크립트로 설정하는 방법이 있는데 이제 본격적으로 음성안내 컨텐츠 제작 방법에 대해 설명해 드리겠습니다.

 

 

[음성안내 컨텐츠 제작 방법]

1. 음성안내 컨텐츠를 넣은 페이지에 설명 내용과 음성 설정을 한 소스를 넣어주세요.

- 음성안내 기능은 모든 페이지에 사용이 가능합니다. (추가 페이지, 세부화면디자인 페이지, 맞춤게시판, 맞춤전송폼 등)

- 예시로 추가 페이지에 음성안내 기능을 넣어보겠습니다. 추가 페이지의 html 소스 페이지에 아래의 소스를 넣어주세요. ( [디자인관리] > 고급디자인관리 > 추가페이지관리] )

 

 

{@    $voice_info1_mp3 = voice_load('음성안내 컨텐츠 입니다. 현재 한국어로 안내를 해드리고 있으며, 여성의 목소리로 안내되고 있습니다.', 'kr', 'F');@}<div class="voice_guide_cont_wrap">    <audio id="user_voice_cont_player1">        <source src="{$voice_info1_mp3}">    </audio>    <span id="voice_guide_cont_on1" class="icon_voice_guide state_voice_on" style="display:none;">        <a href="javascript:user_voice_cont_on('user_voice_cont_player1', 'voice_guide_cont_on1', 'voice_guide_cont_off1', 'off')" title="음성안내 끄기"|lan="kr"><span data-lan="kr">음성안내 끄기</span></a>    </span>    <span id="voice_guide_cont_off1" class="icon_voice_guide state_voice_off">        <a href="javascript:user_voice_cont_on('user_voice_cont_player1', 'voice_guide_cont_on1', 'voice_guide_cont_off1', 'on')" title="음성안내 켜기"|lan="kr"><span data-lan="kr">음성안내 켜기</span></a>    </span></div>

 

 

<소스 설명>

음성파일을 재생/정지 하려면 오디오 플레이어를 제어하기 위한 Javascript 가 추가됩니다.  그리고 이 스크립트는 재생/정지 버튼으로 사용 할 a 태그에서 호출해 실행시켜야 합니다.

※ 호출하는 Javascript의 값이 올바르게 입력 되어야 버튼이 정상적으로 작동하기 때문에 확실히 이해하고 넘어가야 하는 부분입니다. (중요)

이해하시기 다소 어려우실 수 있어 알기 쉽도록 이미지로 설명드리겠습니다. 아래의 이미지를 참고하시면 색깔별로 표시된 부분들이 있는데 이 색깔끼리의 값이 서로 일치해야 정상적으로 작동이 됩니다.

 

 

소스 입력을 하고 페이지를 확인해 보면 '음성안내 켜기' 라는 링크 버튼만 있고 버튼을 눌러도 아무런 반응이 없을 것입니다.

아직 재생/정지 관련 자바스크립트와 아이콘 관련 CSS가 추가되지 않았기 때문에 그런 것이니 당황하시지 마시고 다음 단계를 따라해 주시면 됩니다^^

 

2. 재생/정지 관련 스크립트를 추가해 주세요.

- 스크립트만 따로 모아놓은 JS 파일이 따로 관리되고 있다면 [디자인관리 > 고급디자인관리 > JS 파일관리]에서 추가해 주세요.

- 만약 JS 파일이 따로 없는 상태라면 음성안내 컨텐츠를 제작 할 페이지 안에 추가해 주세요.

- 소스 파일의 제일 하단 마지막에 추가해 주세요. 만약 페이지 내에 넣으신다면 <script type="text/javascript"></script> 사이에 넣어주세요. (아래에 있는 이미지 참고)

 

<스크립트 소스>

 

function user_voice_cont_on(player_id, btn_on_id, btn_off_id, onoff){    if(onoff == 'off'){        document.getElementById(btn_on_id).style.display = 'none';        document.getElementById(btn_off_id).style.display = 'inline-block';    }else{        document.getElementById(btn_on_id).style.display = 'inline-block';        document.getElementById(btn_off_id).style.display = 'none';    }    if(document.getElementById(player_id)){        if(onoff == 'off'){            // 현재 재생 중이면 stop() 처리            document.getElementById(player_id).pause();            document.getElementById(player_id).currentTime = 0;       }else{            // 다시 paly() 처리            document.getElementById(player_id).volume = 0.3;            document.getElementById(player_id).play();        }    }    document.getElementById(player_id).onended = function() {        document.getElementById(btn_on_id).style.display = 'none';        document.getElementById(btn_off_id).style.display = 'inline-block';    }; }

 

 

<페이지 내에 넣을 때>

 

스크립트를 추가하고 나면 아까 만들었던 버튼 링크가 작동되는 것을 확인하실 수 있을 겁니다.

이제 아이콘 디자인을 입히는 방법을 알려드리도록 하겠습니다.

 

3. 버튼 아이콘 관련 CSS를 추가해 주세요.

- CSS만 따로 모아놓은 CSS 파일이 따로 관리되고 있다면 [디자인관리 > 고급디자인관리 > CSS 파일관리]에서 추가해 주세요.

- 만약 CSS 파일이 따로 없는 상태라면 음성안내 컨텐츠를 제작 할 페이지 안에 추가해 주세요.

페이지 내에 넣으신다면 페이지 상단에 <style type="text/css"></style> 사이에 넣어주세요. (아래에 있는 이미지 참고)

 

<CSS 소스>

 

@font-face {    font-family: 'voice_icomoon';    src: url("/img_up/shop_pds/aramskin/design/skin/voice_guide/icomoon.eot");    src: url("/img_up/shop_pds/aramskin/design/skin/voice_guide/icomoon.eot?#iefix") format("embedded-opentype"),    url("/img_up/shop_pds/aramskin/design/skin/voice_guide/icomoon.woff") format("woff"),    url("/img_up/shop_pds/aramskin/design/skin/voice_guide/icomoon.ttf") format("truetype"),    url("/img_up/shop_pds/aramskin/design/skin/voice_guide/icomoon.svg#icomoon") format("svg");    font-weight: normal;    font-style: normal; } .voice_guide_cont_wrap .icon_voice_guide {display:inline-block; vertical-align:top;} .voice_guide_cont_wrap .icon_voice_guide a {display:inline-block; width:50px;/* 아이콘 가로 크기 */ height:50px;/* 아이콘 세로 크기 */ border-radius:50%; text-align:center; text-decoration:none; vertical-align:top;} .voice_guide_cont_wrap .icon_voice_guide a:before {font-family:'voice_icomoon'; font-size:50px;/* 아이콘 폰트 크기 */ line-height:50px;/* 아이콘 폰트 크기 */ color:#444444;/* 정지 아이콘 폰트 색상 */} .voice_guide_cont_wrap .icon_voice_guide a span {position:absolute; top:-9999px; left:-9999px; font-size:0; text-indent:-9999px;} .voice_guide_cont_wrap .icon_voice_guide.state_voice_on a:before {content:'\e900';} .voice_guide_cont_wrap .icon_voice_guide.state_voice_off a:before {content:'\e901'; color:#d00000;/* 재생 아이콘 폰트 색상 */}

 

 

<페이지 내에 넣을 때>

 

css를 추가하면 이제 버튼 링크가 아이콘 버튼으로 변경되어 있는 것을 확인하실 수 있습니다.

여기까지 완료되었다면 음성안내 컨텐츠 제작 완성입니다^^

 

 

[주의사항]

만약 한 페이지 안에 음성안내 컨텐츠가 여러 개 들어간다면 음성안내의 html 소스 중 id 값이 중복되지 않도록 id 값을 변경해 주셔야 올바르게 작동이 됩니다.

위에서 설명한 내용 중 버튼 a 태그에 Javascript를 호출하는 부분에 대해 알려드렸는데 이 id 값을 잘 매칭시켜주셔야 오류가 발생하지 않습니다.

그래서 위에 설명드릴 때 확실하게 이해하고 넘어가야 하는 부분이라고 말씀드린 것입니다^^

예를 들어 첫번째 음성안내 컨텐츠의 버튼과 두번째 음성안내 컨텐츠의 버튼이 있다면 이 버튼들의 오디오 플레이어와 버튼 id 값이 겹치면 오류가 발생하게 됩니다.

올바른 사용 방법은 아래 소스 이미지를 참고하시면 이해에 도움이 되실 겁니다.

 

 

 

설명을 위해 css, js, html을 따로 나눠 알려드리게 되었는데 혹시나 한번에 소스를 전체 다 넣어 사용하고 싶으신 분들은 아래의 전체 소스를 복사하여 사용하시면 됩니다^^

 

[전체 소스]

 

<style type="text/css">    @font-face {        font-family: 'voice_icomoon';        src: url("/img_up/shop_pds/aramskin/design/skin/voice_guide/icomoon.eot");        src: url("/img_up/shop_pds/aramskin/design/skin/voice_guide/icomoon.eot?#iefix") format("embedded-opentype"),        url("/img_up/shop_pds/aramskin/design/skin/voice_guide/icomoon.woff") format("woff"),        url("/img_up/shop_pds/aramskin/design/skin/voice_guide/icomoon.ttf") format("truetype"),        url("/img_up/shop_pds/aramskin/design/skin/voice_guide/icomoon.svg#icomoon") format("svg");        font-weight: normal;        font-style: normal;    }    .voice_guide_cont_wrap .icon_voice_guide {display:inline-block; vertical-align:top;}    .voice_guide_cont_wrap .icon_voice_guide a {display:inline-block; width:50px;/* 아이콘 가로 크기 */ height:50px;/* 아이콘 세로 크기 */ border-radius:50%; text-align:center; text-decoration:none; vertical-align:top;}    .voice_guide_cont_wrap .icon_voice_guide a:before {font-family:'voice_icomoon'; font-size:50px;/* 아이콘 폰트 크기 */ line-height:50px;/* 아이콘 폰트 크기 */ color:#444444;/* 정지 아이콘 폰트 색상 */}    .voice_guide_cont_wrap .icon_voice_guide a span {position:absolute; top:-9999px; left:-9999px; font-size:0; text-indent:-9999px;}    .voice_guide_cont_wrap .icon_voice_guide.state_voice_on a:before {content:'\e900';}    .voice_guide_cont_wrap .icon_voice_guide.state_voice_off a:before {content:'\e901'; color:#d00000;/* 재생 아이콘 폰트 색상 */}</style>{@    $voice_info1_mp3 = voice_load('음성안내 컨텐츠 입니다. 현재 한국어로 안내를 해드리고 있으며, 여성의 목소리로 안내되고 있습니다.', 'kr', 'F');@}<div class="voice_guide_cont_wrap">    <audio id="user_voice_cont_player1">        <source src="{$voice_info1_mp3}">    </audio>    <span id="voice_guide_cont_on1" class="icon_voice_guide state_voice_on" style="display:none;">        <a href="javascript:user_voice_cont_on('user_voice_cont_player1', 'voice_guide_cont_on1', 'voice_guide_cont_off1', 'off')" title="음성안내 끄기"|lan="kr"><span data-lan="kr">음성안내 끄기</span></a>    </span>    <span id="voice_guide_cont_off1" class="icon_voice_guide state_voice_off">        <a href="javascript:user_voice_cont_on('user_voice_cont_player1', 'voice_guide_cont_on1', 'voice_guide_cont_off1', 'on')" title="음성안내 켜기"|lan="kr"><span data-lan="kr">음성안내 켜기</span></a>    </span></div><script type="text/javascript">    function user_voice_cont_on(player_id, btn_on_id, btn_off_id, onoff){        if(onoff == 'off'){            document.getElementById(btn_on_id).style.display = 'none';            document.getElementById(btn_off_id).style.display = 'inline-block';        }else{            document.getElementById(btn_on_id).style.display = 'inline-block';            document.getElementById(btn_off_id).style.display = 'none';        }        if(document.getElementById(player_id)){            if(onoff == 'off'){                // 현재 재생 중이면 stop() 처리                document.getElementById(player_id).pause();                document.getElementById(player_id).currentTime = 0;            }else{                // 다시 paly() 처리                document.getElementById(player_id).volume = 0.3;                document.getElementById(player_id).play();            }        }        document.getElementById(player_id).onended = function() {            document.getElementById(btn_on_id).style.display = 'none';            document.getElementById(btn_off_id).style.display = 'inline-block';        };    }</script>

 

[기타] 외부 데이타 베이스와 연동 하는 방법 : curl_load()

현재 외부 데이타 베이스 my-sql 같은 경우는 자체 모듈이 지원되기때문에 연동이 가능 합니다.

[ my-sql 연동 매뉴얼 :  http://wdev.good-web.co.kr/bbs/faq/4472 ]

하지만 ms-sql 연동은 PHP7에서 더 이상 지원하지 않는 관계로 앞으로 사용할 수 없게 되었습니다.

ms-sql 을 사용 하시는 분들은 아래와 같은 방법으로 대체 하시기 바랍니다.

 

오라클, MS-SQL, 기타 모든 DB의 경우 당사 서버와 직접 적인 접속이 불가능 하므로 소캣방식으로 데이타정보를 주고 받는 방식으로 구현 해야 합니다.

소캣방식을 좀 더 쉽게 말씀드리면, 특정 URL의 웹페이지를  TEXT로 가져와서 원하는 값을 발취하는 방식을 말합니다.

 

예를들어 보겠습니다.

굿웹에이전시 솔루션에서 쇼핑몰을 운영하고 있으며, A사의 A포인트와 연동 되어 있다고 가정 하겠습니다.

회원이 자신의 마이페이지 접속시 A사의 A포인트를 보여 줘야 합니다. 

하지만 A포인트를 조회 하려면 A사의의 DB서버에 접속해야 하는데 연동이 불가능 하므로, A사 서버에 해당 정보를 조회 할수 있도록 별도 웹페이지를 만들어야 합니다.

해당 웹페이지의 정보를 아래와 같이 만들었다고 가정 하겠습니다.

 


A사 나의포인트 조회 URL : http://aaaaaaaaaa.com/api/mypoint.asp?mem_id=abcd

출력 값 : 25600


A사 나의포인트 내역 URL : http://aaaaaaaaaa.com/api/mypoint_list.asp?mem_id=abcd

출력 값 :
10,2017-06-01,25000^
9,2017-05-01,12000^
8,2017-04-01,32000^
7,2017-03-01,11000^
6,2017-02-01,9000^
.....(반복)....


A사 서버에 위와 같이 파일을 생성 했다면 굿웹에이전시에서 위 정보를 쉽게 가져 올수 있습니다.

{@
// 나의 포인트 가져오기

$mypoint = curl_load('http://aaaaaaaaaa.com/api/mypoint.asp?mem_id='.$_SESSION[mem_id]);
echo $mypoint;

@}

 

{@
// 나의 포인트 내역

$mypoint_info = curl_load('http://aaaaaaaaaa.com/api/mypoint_list.asp?mem_id='.$_SESSION[mem_id]);
$mypoint_arr = explode('^',$mypoint_info);

print_r($mypoint_arr);

@}

 

즉 DB에 바로 접속하는 방식이 아니라 별도의 파일을 생성해서 굿웹에이전시 솔루션에서 해당 웹페이지의 정보를 가져가는 방식 입니다.

주의 하실점은 해당 파일은 반드시 당사 서버 IP만 접근 가능하도록 꼭 막아두셔야 합니다. 

 

감사합니다.