매뉴얼

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

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

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

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

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

 

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

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

음성안내 기능 사용시 모바일 버전에서는 자동으로 음성안내 재생/정지 아이콘이 출력이 되며, 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번 소스의 삽입 여부를 확인해 주세요.
 

게시글 공유 URL복사 cyworld
댓글작성

열기 닫기

댓글작성
top