웹톡스 TTS 홈페이지적용을 위한 매뉴얼

웹톡스 홈페이지적용을 위한 매뉴얼

1 개요

본 문서는 웹톡스를 웹 페이지에 적용하기 위한 개발자용 매뉴얼입니다.
웹톡스는 웹톡스 서버에서 배포된 자바스크립트 파일 기반으로 작동됩니다. 따라서 웹톡스를 홈페이지에 적용하기 위해선 별다른 서버 설정이나 파일이 필요 없습니다.
웹톡스를 적용하고자 하는 웹 페이지에서 웹톡스 서버에서 배포된 자바스크립트 파일을 호출할 수 있도록 구성하시면 됩니다.

  1. 홈페이지에 웹톡스를 적용하기 위한 방법

웹톡스는 아래의 예시 코드처럼 한 줄의 자바스크립트 호출 코드를 삽입함으로써 작동됩니다. 웹톡스가 웹 페이지에서 정상적으로 작동하기 위해서는 몇 가지 기준만 지켜주시어 웹 페이지를 작성하시면 됩니다.

기본적으로 웹 페이지는 웹 표준에 맞게끔 제작이 되면 좋습니다. 그리고 웹톡스가 작동하여 음성으로 변환하고자 하는 영역의 텍스트에 id 값을 주어야 합니다. 그 id 를 기준으로 음성으로 변환하고자 하는 텍스트를 추출하게 됩니다. 최소한 위의 조건이 맞아야 웹톡스가 웹 페이지에서 최적으로 작동하게 됩니다.

[웹톡스 자바스크립트 호출 코드 기본 예시 – 기본 음성듣기 아이콘버튼 사용 시].
기본형 :

커스텀형:

=> 특정 페이지에서 콘텐츠 영역 id값이 다르고 영어 발음으로 음성이 나와야 할 경우 등

다음과 같은 단계로 웹톡스를 적용하시기 바랍니다.

1단계 : 웹 페이지를 제작할 때 음성으로 변환되어야 하는 콘텐츠 영역의 id값 주기

콘텐츠 영역의 id값을 웹 페이지 전체적으로 일관되게 유지하면 웹톡스를 적용하기가 한결 쉽습니다. 웹사이트 전체가 콘텐츠 영역의 id값이 같게 유지되면 삽입될 [웹톡스 자바스크립트 호출 코드]는 모든 웹 페이지에서 같게 됩니다. 따라서 공통영역에 [웹톡스 자바스크립트 호출 코드]를 삽입함으로써 한 번에 적용이 완료됩니다.

만약 웹 페이지마다 콘텐츠 영역 id값이 다를 경우 해당 웹 페이지마다 [웹톡스 자바스크립트 호출 코드]를 삽입하여야 합니다.
그리고 삽입되는 [웹톡스 자바스크립트 호출 코드]의 파라메터를 수정하여 적용 하셔야 합니다. 위의 예시의 커스텀형태로 구성하여야 합니다.

[웹 페이지 소스 코드 예시]


안녕하십니까?
… 내용들..

위의 소스 코드 예시에서 콘텐츠 영역의 id값은 “mainContents”입니다. 모든 웹 페이지가 동일한 콘텐츠 영역의 id값을 유지하시는 것이 좋습니다.

만약 콘텐츠 영역의 id값이 없는 경우는 웹 페이지 전체를 대상으로 음성으로 변환되어 의도되지 않은 결과가 발생합니다. 반드시 웹 페이지에는 콘텐츠 영역의 id값이 있는 것이 좋습니다.

2단계 : 웹 페이지에 [웹톡스 자바스크립트 호출 코드] 삽입하기

[웹톡스 자바스크립트 호출 코드] 는 당사가 전달해 드리거나 웹톡스 서버 관리자 페이지에서 확인하실 수 있습니다.
전달 받으신 [웹톡스 자바스크립트 호출 코드]를 “음성듣기” 아이콘이 출력되고자 하는 위치에 넣어 주시면 됩니다. 아이콘이 출력될 위치는 웹 페이지 디자인과 css 설정에 따라 결정됩니다.
예를 들어 기본적은 음성듣기 아이콘 배너는 다음과 같은 형태가 됩니다.<<