0010 속성(attribute)과 속성 작성방법


속성을 일일이 살펴볼 단계는 아니지만 일단 속성이라는 것이 있고 그것을 어떻게 작성하는지는 알아두어야 추후 속성이 나올 때 당황하지 않을 것 같으므로 미리 정리해두자.

    

다음은 앞에서 배운 <html> 요소에서 속성을 사용한 경우다.

     

<html lang="ko">내용</html>


위의 <html> 요소에서 lang속성명이고 ko는 한국어를 의미하는 속성값이다. <html> 요소에 lang 속성을 부여하여 이 문서가 한국어로 작성된 HTML 문서라는 것을 검색엔진에게 드러내고 있다.

      

우선, 속성(attribute)이란 HTML 요소(element)에 추가 정보를 부여하는 것으로 W3C 재단에서 표준으로 정의해 놓은 것을 사용한다. 개발자가 임의로 속성을 만들지 않는다.

      

속성을 작성하는 방법은 다음과 같다. 

    

1) 속성들은 반드시 시작태그에 명시한다.

아래와 같이 종료태그에 속성을 명시하는 것은 잘못된 사용례이다.

<html></html lang="ko">

    

2) 속성들은 보통 속성명="속성값" 형태로 다음과 같이 사용된다.

lang="ko"

title="header"

src="test.png"

속성명 다음에 공백없이 등호(=)가 오고 그 다음에 공백없이 속성값이 오는 것에 주의해야 한다.

속성명은 대소문자와 상관없지만 소문자(lowercase)로 쓰는 것을 권장한다.

※ 속성값은 큰 따옴표로 묶도록 하자. (큰 따옴표가 없어도 되지만 오류가 발생하는 경우가 많아 사용하는 것을 권장한다.)

    

3) 하나의 요소가 여러 개의 속성을 가질 수 있다. 속성과 속성 사이는 공백으로 구분한다. 

여러 개의 속성은 원하는 순서로 임의로 배치할 수 있다.

<태그명 속성명1="속성값1" 속성명2="속성값2" 속성명3="속성값3">내용(content)</태그명>


속성이 기입된 다음 사례들을 살펴보자.

    

<html> </html lang="ko">

→ 속성은 시작태그에 작성

    

<html lang=ko>내용</html>

→ 속성값은 큰 따옴표로 묶는 것을 권장함("ko")

    

<html LANG="ko">내용</html>

→ 속성명은 소문자(lowercase)를 권장함(lang)

    

<html lang ="ko">내용</html>

→ 속성명과 등호(=) 사이에 공백이 없어야 함

    

<태그명>내용</태그명 속성명="속성값"

→ 속성은 시작태그에 작성

    

<html lang= "ko">내용</html>

→ 등호(=)와 속성값 사이에 공백이 없어야 함

    

<태그명 속성명1="속성값1"속성명2="속성값2">내용</태그명>

→ 속성들 간은 공백으로 구분되어야 함

    

<html lang = "ko">내용</html>

→ lang과 등호(=) 사이의 공백과 등호(=)와 속성값 사이의 공백이 없어야 함


Anki 파일


아래는 본 포스팅의 내용을 갈무리하기 위한 Anki 파일입니다. 참고하시기 바랍니다. 


Ankilog 파일:  0010 속성(attribute)과 속성 작성방법.apkg






0009 <html></html> 요소와 속성


HTML 문서의 큰 틀은 다음과 같다. 

      

<!DOCTYPE html>

    

<html>

 <head>웹페이지 관련 정보들</head>

 <body>본문(웹페이지의 내용)</body>

</html>


문서유형선언(document type declaration) 바로 아래에 나오는 <html> 태그에서 HTML 문서가 시작되고 </html> 태그에서 HTML 문서가 끝난다. 즉, HTML 문서는 문서유형선언을 제외하면 하나의 <html> </html> 요소(element)인 셈이다.

     

요소(element) 안에 또 다른 요소를 넣는 것을 ‘중첩(nesting)’이라고 하는데, 하나의 HTML 문서는 <html> </html> 요소 내부에 <head></head> 요소와 <body></body> 요소가 중첩(nesting)되어 만들어진다. 

    

<html></html> 요소가 HTML 문서를 이루는 다른 모든 요소의 뿌리가 되므로 루트 요소(root element)라고도 한다.

     

<html> 요소는 lang 속성을 가질 수 있다. 이 lang 속성검색엔진이 웹 페이지를 검색할 때 어떤 언어로 작성되어 있는지를 검색엔진이 쉽게 인식할 수 있도록 지정하는 것이다. (lang 속성을 <html> 요소만 가질 수 있는 것은 아니다.)

    

만일, <html> </html> 요소가 한국어로 작성되었다고 명시하고 싶다면 시작태그를 아래와 같이 작성하면 된다.

     

<html lang="ko">


lang 속성은 검색을 위해서만 필요하고, 웹 브라우저가 웹 페이지를 게시하는데 어떠한 영향도 미치지 않는다.


Anki 파일


아래는 본 포스팅의 내용을 갈무리하기 위한 Anki 파일입니다. 참고하시기 바랍니다. 


Ankilog 파일:   0009 html 요소와 속성.apkg








0008 HTML 문서유형선언(document type declaration)


웹 브라우저 간 시장 점유율 싸움으로 HTML은 상당기간 부침이 있었기 때문에, 버전별로 조금씩 상이한 부분이 있고, 표준과 어긋나는 경우도 상당수 있다. 이런 경우 어떤 HTML을 버전을 사용하고 있는 문서인지 웹 브라우저에게 알려주어 웹 페이지가 정확하게 게시될 수 있게 해주어야 한다. 이를 문서유형선언(document type declaration)이라고 한다.

    

표준 HTML 문서는 최상단에 다음과 같은 선언으로 시작한다. (문서의 선언은 HTML 문서 최상단에 있어야 한다.)

     

<!DOCTYPE html>


따라서 실제 HTML 문서는 다음과 같이 작성되는 셈이다. 

    

<!DOCTYPE html>

     

<html>

 <head>웹페이지 관련 정보들</head>

 <body>본문(웹페이지의 내용)</body>

</html>


HTML5로 넘어오기 전에는 복잡하고 다양한 선언을 알아야 했지만 다행스럽게도 HTML5부터는 표준화가 이루어지면서 <!DOCTYPE html> 선언문만 알면 된다. 

    

<!DOCTYPE html> 선언은 표준 HTML을 사용하고 있다는 것을 웹 브라우저에게 제시하는 선언이고 더 이상 버전 번호를 표시하지 않는다. 그리고 앞으로도 HTML의 표준 명세는 하위 버전과 호환성을 갖추면서 새로운 기능을 지원하는 것을 원칙으로 하고 있어 표준이기만 하다면 더 이상 별도의 버전 표시가 필요 없게 되었다.

     

이 문서유형선언이 꺽쇠(<>)로 둘러싸여 있다고 해서 태그로 이루어진 요소(element)로 여길 수 있지만 왼쪽 꺽쇠(<) 다음에 느낌표(!)가 오면 요소(element)가 아니라는 뜻이다. 

     

HTML5 표준의 선언이 얼마나 간단한지는 다음과 같이 표준이 아닌 버전의 HTML 문서유형 선언을 보면 알 수 있다.

      

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">


Anki 파일


아래는 본 포스팅의 내용을 갈무리하기 위한 Anki 파일입니다. 참고하시기 바랍니다. 


Ankilog 파일:  0008 HTML 문서유형선언.apkg







그리스 알파벳을 외워 두면 의외로 소소하게 많은 도움이 된다. 


그리스 알파벳을 실생활에 언어에 쓰지는 않지만 표기법, 음성기호, 각종 수식에 사용하는 변수 등으로 사용하는 경우가 많기 때문에, 서구권의 학문에서는 수식의 변수나 지표 등으로 광범위하게 사용된다. 


따라서 해당 문자의 대문자와 소문자를 알고 읽는 법을 알아두면 그러한 문서를 읽는 것에 은연중 도움이 많이 되고, 언어학이나 문자 관련 자료를 읽을 때는 거의 필수적으로 알아두어야 한다.


그리스 문자 암기용 Anki 파일은 아래와 같다. 


외우려고 하기 보다는 카드를 보면서 한번씩 인상에 새기면 하루에 5분 정도로 3일이면 금방 익숙해질 것이다. 


그리스문자.apkg



Anki 파일의 구성 내용


Anki에서 내용 구성은 다음과 같다. 


그리스 문자 24개 각 문자별로 대문자와 소문자 그리고 읽는 법을 엮어 1개씩 노트를 만들어 총 24개의 노트를 만든다.


아래는 노트번호-대문자-소문자-읽는 법 순으로 배열했다. 


01 Α α alpha 알파

02 Β β beta 베타

03 Γ γ gamma 감마

04 Δ δ delta 델타

05 Ε ε epsilon 엡실론

06 Ζ ζ zeta 제타

07 Η η eta 에타

08 Θ θ theta 세타

09 Ι ι iota 요타

10 Κ κ kappa 카파

11 Λ λ lambda 람다

12 Μ μ mu 뮤

13 Ν ν nu 뉴

14 Ξ ξ xi 크시

15 Ο ο omicron 오미크론

16 Π π pi 파이

17 Ρ ρ/ς rho 로

18 Σ σ sigma 시그마

19 Τ τ tau 타우

20 Υ υ upsilon 업실론

21 Φ φ phi 피

22 Χ χ chi 키

23 Ψ ψ psi 프시

24 Ω ω omega 오메가



각 문자별로


대문자, 소문자, 읽는 법을 각각 빈칸으로 처리하여 각 노트마다 3개의 카드를 만들어 총 72개의 카드를 만든다.


만들어진 카드는 아래와 같이 나타난다. 


AwesomeTTS 구성 화면 개요


AwesomeTTS 구성 및 조정 개요 부분은 AwesomeTTS 홈페이지에서 이 부분을 참조한 내용이니 참조하시기 바랍니다. 


AwesomeTTS는 상당히 다양한 방식으로 구성할 수 있어 오디오를 즉석으로 재생하거나 MP3 파일을 컬렉션에 저장하여 재생하길 원하거나 하는 것 외에도 다양한 사용자들의 요구에 부합할 수 있다. 


구성(Configuration) 화면을 열려면 Anki의 메인 화면으로 가서 도구(Tools) → AwesomeTTS 를 클릭하면 된다. 


구성(Configuration) 화면을 여는 단축키는 기본적으로 Ctrl+T(Mac OS X는 Cmd+T)이다. 단축키를 누르면 현재 Anki의 메인 화면이 아니라고 해도 구성(Configuation) 화면이 바로 나타난다.



Anki의 메인 화면에서 도구(Tools) → AwesomeTTS 를 클릭하거나 단축키 Ctrl+T(Mac OS X는 Cmd+T)를 눌러 나타나는 구성 화면은 다음과 같다. 




그리고 주의할 점이 있다. Anki의 환경 설정의 경우와는 달리, 현재 버전의 AwesomeTTS의 설정 변경은 현재 AwesomeTTS가 설치된 컴퓨터에만 모든 카드뭉치에 일괄적으로 적용된다. 따라서 첫 번째로 어떠한 구성 변경을 해도 해당 조절이 다른 컴퓨터와는 동기화되지 않을 것이고 두 번째로는 현재까지는 카드 뭉치별로 서로 다른 AwesomeTTS설정을 적용할 수 있는 방법이 없다는 것이다.



구성 화면 세부 항목


구성 화면의 세부 항목은 아래에 정리된 것과 같다. 각 탭별 항목들이 매우 구체적으로 설정 사항을 제시하고 있어서 별도로 설명할 필요는 없을 것 같지만 상세한 내용이 궁금하다면 설명된 페이지 링크가 걸려있으므로 상세한 내용은 해당 링크를 따라 들어가 확인하기 바란다.


1. 재생(Playback) 환경 구성하기


단축키 설정, 자동 재생 활성화 여부, 자동 재생할 때 어느 정도의 지연(delay)를 두고 재생할지 설정하기를 구성한다. 아래가 재생(Playback) 환경 구성 화면이다.




2. 텍스트 및 빈칸 만들기(Text and Cloze Deletion Configuration) 환경 구성하기


재생하거나 녹음을 할 때 특정 텍스트를 필터링하여 무시하는 등을 조절하고 빈칸 만들기를 살짝 조정한다. 아래가 텍스트 및 빈칸 만들기 환경 구성 화면이다.





3. MP3 생성 환경 구성하기


생성된 파일명 바꾸기, LAME transcoder 전달 옵션(flags) 설정하기, 온라인 서비스 활용시 AwesomeTTS의 작업 일정 조절 등을 수행한다. 아래가 MP3 생성 환경 구성 화면이다.




4. 창(window) 환경 구성하기


창을 열 때 사용하는 단축키를 구성한다. 창(window) 환경 구성 화면은 아래와 같다.




5. 고급 설정(Advanced Configuartion)


서비스 사전 설정(presets)하기 사전 설정된 서비스 그룹(group)으로 묶기, 업데이트 확인하기, 캐쉬(Cache) 관리하기 등을 수행한다. 고급 설정(Advanced Configuartion) 구성 화면은 아래와 같다.






AwesomeTTS로 카드 탐색기에서 오디오 삭제하기


오디오 삭제하기 부분은 AwesomeTTS 홈페이지에서 이 부분 참조한 내용이니 참조하시기 바랍니다. 


AwesomeTTS를 이용하면 카드 탐색기에서 필요한 노트에 일괄적으로 한번에 많은 오디오 파일을 만들 수 있었다. (05 카드 탐색기(Browser)에서 AwesomeTTS 사용하는 방법 참조)


AwesomeTTS는 많은 양의 오디오 파일을 생성하는 것도 가능하지만 반대로 카드 탐색기에서 노트에 있는 [sound] 태그나 오디오 파일에 대한 경로 등을 일괄적으로 삭제하는 것도 가능하다. 



AwesomeTTS로 카드 탐색기에서 MP3오디오 삭제방법


1) 카드 선택


우선, 카드 탐색기(Browser)에서 오디오 파일을 삭제하고 싶은 노트에 해당하는 카드를 선택한다. 


아래는 카드 탐색기에서 카드를 확인하고 있는 모습이다. 


카드 뭉치 Listen Comprehension의 카드를 선택해보니 SOUND 필드 [sound] 태그가 삽입되어 있는 것을 확인할 수 있다.




오디오를 삭제할 카드로 school, girl, boy3개 카드를 선택했다. 선택된 카드는 파란색으로 하이라이트(highlight)되어 나타난다.




2) "Remove Audio from Selected..." 클릭


그리고 카드 탐색기(Browser) 상단의 "AwesomeTTS" 메뉴에서 "Remove Audio from Selected..."를 선택하여 클릭한다.


 

그러면 다음과 같이 선택된 노트에서 오디오 삭제(Remove Audio from Selected Notes) 대화상자가 나타나 선택한 카드의 노트에서 오디오를 삭제하는 각종 옵션을 제공한다. 




3) 필드 선택


선택된 노트에서 오디오 삭제 대화상자를 보면 우리가 선택한 노트에 있는 필드들이 스캔되어 나타난다. 이 중 오디오를 삭제하고 싶은 필드를 선택하면 된다. 


현재 실행 사례에서는 SOUND 필드[sound] 태그가 있으므로 SOUND 필드 앞에 있는 체크박스에 체크한다.





4) 오디오 선택


그러면 이제 어떤 오디오를 삭제하고 싶은지 선택한다. 선택된 노트에서 오디오 삭제(Remove Audio from Selected Notes) 대화상자에서는 3가지 옵션을 제공하고 있다. 


첫 번째 옵션인 only [sound] tags or paths generated by AwesomeTTS 옵션은 AwesomeTTS 추가 기능으로 만들어진 오디오만 제거한다. 


두 번째 옵션인 only [sound] tags not generated by AwesomeTTS 옵션은 AwesomeTTS 추가 기능으로 만들어지지 않은 오디오만 제거한다. 즉, 직접 제작한 오디오나 다른 추가 기능의 도움으로 만든 오디오 사운드들이 삭제된다.


세 번째 옵션인 all [sound] tags, regardless of origin, and paths generated by AwesomeTTS 옵션은 모든 오디오를 제거한다. 물론, AwesomeTTS가 오디오라고 인식할 수 있는 모든 오디오들이다.


따라해보고 있는 사례에서는 모든 오디오 파일이 앞서 실습하면서 AwesomeTTS로 만들어진 것이므로 첫 번째 옵션인 only [sound] tags or paths generated by AwesomeTTS 옵션을 선택한다. 




5) [Remove Now] 버튼 클릭


[Remove Now] 버튼을 클릭하여 오디오 파일 삭제를 시작한다.




그러면 다음과 같이 삭제되었음을 알리는 메시지가 나타난다. [확인]을 누른다. 



실제로 삭제되었는지 확인해보자. 앞서 [sound] 태그가 있는 것을 확인했던 카드 school을 클릭해본다. 앞서 [sound] 태그가 삽입되어 있던 SOUND 필드[sound] 태그가 삭제되어 더 이상 없음을 확인할 수 있다.




그 외 알아두면 좋은 힌트들


지금까지 설명한 방법은 AwesomeTTS를 써서 만든 오디오이든 개인적으로 만든 오디오든 간에 결국, 컬렉션에 저장되는 오디오를 나타내는 [sound] 태그를 제거하는 방법에 대한 것들이다. 따라서 별도의 파일을 만들어 컬렉션에 저장하지 않는 즉석 재생(On-the-Fly) 방식으로 생성되는 오디오는 제거할 수 없다. 즉석 재생(On-the-Fly) 방식의 오디오를 제거하고 싶다면 카드 템플릿을 편집해야 한다. 


만일, 실수로 오디오를 지웠다면 카드 탐색기에서 편집(Edit) 메뉴로 들어가 "AwesomeTTS Sound Removal 취소"를 누르면 된다. 




AwesomeTTS로 삭제하는 것은 [sound] 태그이지 실제 저장된 파일이 아니다. 따라서 컬렉션에서 사용되지 않는 미디어 파일들을 삭제하려면 Anki의 메인 메뉴에서 도구(Tools) → 미디어 검사(Check Media)를 눌러 사용하지 않는 미디어 파일들을 삭제해주면 된다. 


자세한 내용은 99_(미디어)_Media_Anki_2.0_유저_매뉴얼을 참조하길 바란다.




사전 설정된 서비스들을 그룹으로 묶어서 재생하거나 녹음하기


서비스 그룹 관련 부분은 AwesomeTTS 홈페이지에서 이 부분을 참조한 내용이니 참조하시기 바랍니다. 


사전에 설정된 서비스가 최소 두 개 이상 있으면 이러한 서비스들을 그룹으로 묶을 수 있다. 이렇게 그룹으로 묶인 서비스들은 두 가지 모드(mode)로 사용할 수 있게 된다. 


1) 무작위(randomized)

 AwesomeTTS는 재생하거나 녹음할 때 그룹으로 묶인 서비스들을 무작위로 골라 실행한다.


2) 순차(in-order) 

 AwesomeTTS는 재생을 하거나 녹음을 할 때 첫번째로 설정된 서비스로 먼저 시도해보고 해당 서비스가 작동하지 않으면 두 번째로 설정된 서비스로 시도하고, 또 작동하지 않으면 그 다음 서비스로 시도하는 과정을 순차적으로 반복한다. 


이 그룹으로 묶인 서비스들은 AwesomeTTS에서 오디오 사운드를 생성하는 모든 대화상자에서 하나의 서비스인 것처럼 사용 가능하고 즉석 재생(On-the-Fly) 방법에서는 <tts> 태그에 group 속성(attribute)을 부여하면 서비스 대신 사용할 수 있으며, 마찬가지로 마수으로 드래그한 영역을 마우스 우클릭 팝업메뉴로 즉석에서 TTS로 읽는 경우에도 사용할 수 있다. 


그룹으로 묶어서 사용하는 방법


1) 그룹 설정으로 들어가기


구성(configuration) 화면Advanced 탭에서 "Service Presets and Groups" 섹션을 찾아 [Manage Groups...] 버튼을 클릭하면 그룹을 설정할 수 있는 Manage Preset Groups 대화상자가 나타난다. 




다음이 나타난 Manage Preset Groups 대화상자다.




2) 새 그룹 더하기


나타난 Manage Preset Groups 대화상자에서 녹색의 플러스(+) 버튼을 누르면 새로운 그룹의 이름을 정하는 박스가 나타나고 해당 이름을 정하고 [확인]을 클릭하면 새 그룹을 구체적으로 설정할 수 있는 대화상자가 나타난다. 이 경우에는 새로운 그룹의 이름을 New Group으로 정한다.





3) 모드(Mode) 선택


새로운 그룹을 무작위 모드로 할지 순차 모드로 할지 선택한다. 


무작위 모드(randomized mode)

재생하거나 녹음할 때 그룹으로 묶인 서비스들을 무작위로 골라 실행


순차 모드(in-order mode)

재생을 하거나 녹음을 할 때 첫 번째 서비스로 시도하고 해당 서비스가 작동하지 않으면 두 번째로 설정된 서비스로 시도하고, 또 작동하지 않으면 그 다음 서비스로 시도하는 과정을 순차적으로 반복




4) 사전 설정된 서비스 추가


이제 그룹으로 묶으려는 서비스들을 추가할 차례다. 모드(Mode) 설정 아래쪽 큰 공란의 오른쪽에 있는 녹색의 플러스(+) 버튼을 클릭한다. 



그러면 다음과 같이 사전 설정된 서비스들을 선택할 수 있는 드롭다운이 나타난다. 원하는 서비스를 고르고 다시 오른쪽에 있는 녹색의 플러스(+) 버튼을 클릭하면 해당 서비스가 추가된다. 




원하는 그룹을 전부 골랐으면 [확인] 버튼을 눌러 최종적으로 새로운 그룹인 New Group을 저장한다. 




5) 그룹 사용하기


그룹으로 지정된 서비스들은 노트 추가창(Note Editor), 카드 탐색기, 카드 템플릿 등등에서 AwesomeTTS로 오디오 사운드를 추가할 때 서비스 구성에서 Generate using 드롭다운에 우리가 새로 지정한 그룹인 New Group이 서비스에 포함되어 있어 오디오 사운드 생성시 하나의 서비스처럼 사용할 수 있게 된다. 



또, 앞서 사전 설정(Preset)에서 설명한 것처럼 원하는 텍스트를 드래그하여 텍스트를 읽을 때, 마우스 우클릭으로 나타나는 팝업 메뉴에 역시 우리가 지정한 New Group이 하나의 사전 설정된 서비스처럼 나타나므로 자연스럽게 이를 사용할 수 있게 된다.




그 외에 알아두면 좋은 사항들...


하나의 그룹에 동일한 서비스를 여러 번 집어넣을 수 있다. 만일, 무작위 모드에서 동일한 서비스가 여러 번 들어가 있을 경우 그만큼 그 서비스가 선택될 확률에 가중치가 붙게 되는 것이므로 이를 이용하여 특정 서비스가 선택될 확률을 높일 수 있다


순차 모드는 제한된 어휘의 TTS 서비스를 제공해주는 사전류 서비스들을 사용할 때 특히 유용하다. 왜냐하면 우선 제한된 어휘만 TTS로 옮겨주는 사전 서비스들을 앞에 배치하고 뒤에는 어휘 제한이 없는 서비스들을 배치하여 우선적으로 사전에 해당하는 어휘들은 사전에서 TTS를 제공하고 사전에 없는 어휘에 대해서만 모든 어휘의 TTS를 제공하는 서비스를 이용하게 하는 것이다. 




사전 설정(Preset)된 서비스로 원하는 텍스트만 선택해서 듣기


서비스 사전 설정(Preset) 관련 부분은 AwesomeTTS 홈페이지에서 이 부분을 참조한 내용이니 참조하시기 바랍니다. 


가끔 전체 텍스트가 아니라 어떤 특정한 텍스트만 오디오 사운드를 재생해서 들을 필요가 있는 경우가 있다. 이런 경우에는 AwesomeTTS 설정에 들어가 오디오 사운드를 재생해줄 서비스들 중에서 원하는 것을 골라서 설정해두면 필요할 때마다 팝업메뉴를 통해서 해당 텍스트를 원하는 서비스에서 재생되게 할 수 있다. 


이 방법은 즉석 재생(On-the-fly) 방법과 마찬가지로 TTS를 데스크탑 환경에서만 사용하는 사람들에게 매우 유용하다. 하지만 모바일 기기(가령 AnkiDroid)나 AnkiWeb에서 Anki를 이용하는 사용자라면 [sound] 태그와 미디어 파일을 만들어 저장해서 데스크탑 외에서도 원활하게 공부하길 원할 수 있다. [sound] 태그를 생성하는 방법은 앞에서 노트 추가창(Note Editor)이나 카드 탐색기(Card browser)에서 [sound] 태그를 생성하고 저장하는 방법을 참조하기 바란다.



사전 설정(Preset)하여 사용하는 방법


1) 구성(Configuration) 화면 설정


도구 → AwesomeTTS 순으로 클릭하면 구성(Configuration) 화면이 나타난다.

구성(Configuration) 화면에서 Advanced 탭으로 이동하고

③ "Service Presets and Groups" 섹션을 찾아 [Manage Presets...] 버튼을 클릭한다. 




2) 서비스 구성


Manage Service Presets 대화상자가 나타난다. 


이번에는 앞서 배운 것과 마찬가지로 서비스와 해당 옵션들을 조정하여 원하는 서비스를 구성한다. 




3) 서비스 확인


Preview 아래의 공란에 간단한 샘플 문구를 넣고 [Preview] 버튼을 눌러 해당 사운드가 원하는 사운드인지 확인한다. 




4) 저장(Save)


오디오 사운드가 마음에 들었다면 Load Preset... 옆의 [Save] 버튼을 클릭하여 해당 서비스와 옵션을 저장한다. 




5) 사전 설정(Preset) 이름 설정


[Save] 버튼을 클릭하면 사전 설정(Preset)의 이름이 해당 서비스명과 목소리 등으로 자동으로 생성되어 기본적(Default)으로 제공된다. 만일 원하는 이름이 있다면 새로 이름을 짓고 제시된 사전 설정 이름이 마음에 들면 그대로 받아들이고 [확인]을 클릭한다. 



6) 사전 설정 화면 나오기


[확인]을 클릭하여 Manage Service Presets 화면에서 빠져나온다.




마찬가지로 [확인]을 클릭하여 구성(Configuration) 화면에서 빠져나온다. 




7) 사전 설정(Preset) 사용


이제, Anki의 카드를 열어서 다음처럼 듣고 싶은 문장을 지정하고 우클릭을 하면 팝업메뉴가 나타난다. AwesomeTTS → Say "Call me Please" w/ Microsoft Speech API COM (Microsoft Zira Desktop)을 클릭하면 해당 문장을 읽는 것을 들을 수 있다. 




그 외 알아둘만한 사항들... 



1) 사전 설정(Preset)은 어디서나 가능


사전 설정(Preset)을 구태여 꼭 구성(Configuation) 화면에서 할 필요는 없다. 서비스 구성을 할 수 있는 모든 대화상자에는 해당 사전 설정(Preset)을 구성할 수 있도록 [Save] 버튼이 달려 있으므로 AwesomeTTS를 노트 추가창, 카드 탐색기, 즉석 재생으로 추가할 때 해당 서비스 구성 화면에서 언제든지 사전 설정(Preset)을 구성할 수 있다.



2) 이 방법은 다른 곳에서도 사용 가능함

서비스를 사전설정 하고 원하는 텍스트만 선택해서 말하는 것 듣기는 꼭, 카드에서만 실행하는 것은 아니다. 노트 추가창에서 개별적으로 노트를 편집하면서 필드에 있는 텍스트를 지정해서 사정 설정된 서비스에 따라서 해당 텍스트를 들을 수도 있고, 카드 템플릿의 미리보기 부분의 텍스트를 지정해서 들을 수도 있다. 

아래는 노트 추가창에서 TEXT 필드에 있는 텍스트 color를 지정해서 사전 설정(Preset)된 서비스에 따라서 텍스트를 읽는 것을 듣는 모습이다. 



아래는 카드 템플릿의 미리보기에서 텍스트 color를 지정해서 사전 설정(Preset)된 서비스에 따라서 텍스트를 읽는 것을 듣는 모습이다. 



3) 사전 설정(Preset) 그룹화하기

최소 두 개의 서비스를 사전 설정(Preset)했다면 이를 그룹(Group)으로 묶어 사용할 수 있다. 


4) 즉석 재생(On-the-Fly)에 사용하기

즉석 재생(On-the-Fly)의 경우에도 서비스를 사전 설정해서 사용할 수 있다. 즉, 카드 템플릿에서 <tts> 태그에 속성(attribute)으로 preset을 붙일 수 있고 해당 preset 속성사전 설정된 서비스의 이름을 집어넣어주면 된다. 


카드 템플릿에서 즉석 재생(On-the-Fly)하기


이는 AwesomeTTS 홈페이지에서 이 부분을 참조한 내용이니 참조하시기 바랍니다.


카드에 TTS를 더하는 가장 쉽고 빠른 방법은 카드 템플릿에서 사운드로 재생되기를 원하는 텍스트를 HTML 태그인 <tts>로 감싸주는 것이다. <tts> 태그로 감싼 부분이 카드에서 즉석으로 재생되는데, 태그로 감싼 부분을 어떻게 보이게 할지에 대해서는, 일반적으로 Anki의 카드 템플릿에서 기본적으로 제공하는 상태로 보여줄 수 있고 또는 다른 힌트가 나타나게 하거나 아무것도 나타나지 않게 할 수도 있다. 이 방식을 잘 활용하면 영어 듣기 훈련용 카드에서 이를 잘 활용할 수 있을 것이다.

 

Anki를 데스크탑에서만 사용한다면 이 즉석 재생(On-the-Fly) 방법과 사전설정(Presets) 방법이 매우 유용하다. 하지만 모바일 기기(가령, AnkiDroid)AnkiWeb에서 Anki를 이용하는 사용자라면 [sound] 태그와 미디어 파일을 저장해서 데스크탑 외에서도 원활하게 공부하길 원할 수 있다. [sound] 태그를 생성하는 방법은 앞에서 노트 추가창(Note Editor)이나 카드 탐색기(Card browser)에서 [sound] 태그를 생성하고 저장하는 방법을 참조하기 바란다.

 


즉석 재생(On-the-Fly) 실행방법


1) 카드 템플릿창 열기


노트 추가창(Note Editor)을 열었거나 카드 브라우저에서 특정 카드를 선택한 경우 [카드...] 버튼을 클릭하여 해당 노트의 카드 템플릿 창으로 들어간다.

 

다음은 노트 추가창(Note Editor)에서 [카드...] 버튼을 클릭한 모습이다.


 

다음은 카드 탐색기(browser)에서 특정 카드를 선택한 후 [카드...] 버튼을 클릭한 모습이다.




2)  [Add TTS] 버튼을 클릭


앞에서 [카드...] 버튼을 클릭하면 해당 노트의 카드 템플릿이 나온다. 일단, 현재 카드 템플릿을 확인하고 아래의 버튼에서 [Add TTS] 버튼을 클릭한다.

 



3) 서비스와 옵션 선택


앞에서 [Add TTS] 버튼을 클릭하면 즉석 재생(On-the-Fly)을 위해 <tts> 태그를 템플릿에 더하는 다양한 옵션을 가진 대화상자가 나타난다 일단, 원하는 서비스와 옵션들을 선택한다.



4) 오디오 사운드 확인


서비스와 옵션을 선택했으면 Preview 아래의 공란에 간단한 문구를 작성하고 [Preview] 버튼을 클릭하여 생성될 오디오의 사운드가 원하는 것인지 확인한다.




 

5) 사운드로 전환할 텍스트 결정


AwesomeTTS가 특정 필드의 텍스트를 읽어 오디오를 만들기 원한다면 Field의 드롭다운 목록에서 해당 필드를 선택하라.

 

보통 customize the tag's content 항목은 <tts> 태그에 오디오 사운드로 전환하고 싶어하는 텍스트나 필드를 넣는 것이다. 하지만 특정 필드를 오디오 사운드로 전환하길 원할 경우에는 아래의 사진에서 Field 항목의 드롭다운 목록을 펼쳐 나타나는 현재 노트 유형이 가진 필드(Field)에서 원하는 필드를 선택하면 된다. 



6) visibility 선택


TTS 태그로 둘러싼 부분을 숨기고 싶다면(가령, 듣기 연습일 경우 소리를 듣고 단어를 떠올려야 하는데 텍스트가 화면에 보이면 당연히 공부가 되지 않을 것이다.) visibility의 드롭다운 목록에서 원하는 옵션을 선택하면 된다.




Hide just this tag w/ inline CSS 항목을 선택하면 지금 추가하고 있는<tts> 태그만 화면에 표시하지 말고 CSS로 스타일링을 한다. 당연히 이 카드에만 적용된다.

add rule to hide any TTS tag for note type 항목을 선택하면 현재 노트유형(Note type)에서 <tts> 태그로 감싼 부분은 전부 가려서 화면에 표시되지 않는다


7) 사운드를 재생할 카드의 앞뒷면 선택


카드의 어느 쪽(앞면이나 뒷면)에서 AwesomeTTS가 오디오를 재생할지 선택한다.


8) <tts> 태그를 카드 템플릿에 삽입


[Insert] 버튼을 클릭하여 <tts> 태그를 카드 템플릿에 삽입한다.


아래는 <tts> 태그가 카드 앞면에 삽입된 경우이다. 태그 내부에는 아직 텍스트나 필드가 있지 않으므로 원하는 필드나 텍스트를 우리가 직접 넣어야 한다. 




9) <tts> 태그 내에 넣을 텍스트와 필드 정리


카드 템플릿에서 <tts> 태그의 내부에 오디오 사운드로 소리가 나게 하려는 텍스트나 필드를 넣어 원하는 카드를 만든다. 아래의 사진에서는 앞면을 의미하는 {{Front}} 필드를<tts> 태그 내부에 집어넣어 Front 필드에 적힌 텍스트를 즉석 재생하도록 한 것이다.


 



특정 카드에서만 선택적으로 TTS로 송출되는 사운드를 수정하거나 사용하지 않을 수 있는가?


TTS를 하다보면 특정 노트에 적힌 구문이나 텍스트를 TTS로 전환한 사운드의 품질이 매우 좋지 않을 수 있다. 이 경우 해당 TTS를 사용하지 않거나 직접 만들어낸 사운드로 대체하는게 나을 수 있다. 


TTS를 더 이상 사용하고 싶지 않다면 노트 유형에 "No TTS" 필드를 추가하고 그 필드에 "1"을 기입한다. 그리고 템플릿을 다음과 같이 수정한다. 


{{^No TTS}}<tts service="espeak" voice="en">{{/No TTS}}

   {{Front}}

{{^No TTS}}</tts>{{/No TTS}}


또, 직접 생성한 사운드를 사용하려면 노트 유형에 "Sound" 필드를 추가하고 오디오 파일을 해당 필드에 [sound:xxx] 형식으로 삽입한다(페이퍼 클립 표시를 눌러 해당 파일을 첨부하면 된다.). 그리고 템플릿을 다음과 같이 수정한다. 


{{Sound}}


{{^Sound}}<tts service="espeak" voice="en">{{/Sound}}

   {{Front}}

{{^Sound}}</tts>{{/Sound}}


위와 같이 수정하다보면 템플릿이 너무 복잡해지므로 복잡해지는 것을 피하고 싶다면 즉석 재생의 <tts> 태그를 사용하지 않는 새로운 노트 유형을 만들어서 필요한 노트들은 새로운 노트 유형으로 옮기는 방식도 나쁘지 않다.



그 외 사항들(Other Hints)


1) 즉석 재생 기능이 제대로 작동하는지 앞면 미리보기나 뒷면 미리보기에서 테스트해볼 수 있다. 해당 창에 우클릭을 하면 해당 메뉴가 나오므로 그것을 눌러 사운드를 확인한다.




2) <tts> 태그를 자동으로 재생하는 것을 바꾸거나 단축키를 바꿀려면 구성(Configuration) 화면에서 재생(playback) 탭으로 가서 조절하면 된다. 


3) AwesomeTTS에서는 자동으로 특정한 텍스트를 필터해서 제외할 수 있다. 가령 괄호 속에 있는 텍스트는 오디오 사운드로 소리내지 않을 수 있다. 어떻게 필터링할지 조절하고 싶다면 구성(Configuration) 화면에서 Text 탭으로 가서 조절하면 된다. 


4) 만일, 즉석 재생(On-the-Fly) 방법에서 사전설정(Preset)된 서비스를 이용하고 싶다면 다음과 같이 TTS 태그에 preset 속성을 붙여서 사용하면 된다. 

   <tts preset="My eSpeak Preset">apple</tts>


5) 마찬가지로 그룹(Group)을 적용하고 싶다면 마찬가지로 다음과 같이 <tts> 태그group 속성을 붙여서 사용하면 된다. 

   <tts group="Male English">automobile</tts>


6) 템플릿에서 변수로 사용하는 필드들을 태그의 속성(attribute)처럼 사용할 수 있다. 

   <tts group="{{group}}">{{text}}</tts>


7) <tts> 태그를 중첩(nest)시켜 동일한 텍스트를 여러 개의 다양한 서비스를 이용하여 소리를 재생할 수도 있다.




영어 듣기 연습 카드 만들기


앞서 카드 탐색기에서 AwesomeTTS를 사용하는 방법을 포스팅했다. 그런데 단순히 사용법만 이야기하면 조금 뜬구름 잡는 이야기처럼 들릴 것 같아 구체적인 사례를 드는 편이 좋겠다는 생각이 들었다. 마찬가지 이유로 카드 형식을 스스로 만들어서 사용하는 것데 대한 실제 사례도 포스팅할 필요가 있다 싶어서 이번에는 영어 듣기 연습 카드라는 간단한 카드들을 만들어서 실제로 사용하는 사례를 포스팅해보려고 한다.


영어는 언어이므로 눈으로 글자를 보는 것보다 귀로 소리를 듣는 것이 더 영어공부에 필요한 과정인 것 같다. 따라서 영어 단어 공부도 귀로 들으면서 하는 편이 언어에 익숙해지는데 도움이 될 것 같다. , Anki로 영어 듣기를 훈련하고 싶은 것이다. 이런 경우라면 어떤 형식으로 학습이 이루어져야 할까?

 

일단, 떠오르는 것은 이런 것이다. 카드가 펼쳐짐과 동시에 어떤 영단어를 듣게 된다. 나는 속으로 들은 단어가 무엇인지 생각하고 정답확인을 누른다. 그리고 그 정답을 보고 스스로 제대로 영단어를 들었는지 확인하고 난이도를 평가한 후 다음 카드로 넘어간다. , 영단어를 듣고 이를 확인한다. 매우 기본적인 기능만 하지만 꽤 쓸만할 것 같다. 이런 형식의 카드들을 만들어 카드 뭉치에 넣고 공부를 해보자. 



1) 카드 뭉치(Deck) 만들기


우선 가장 먼저 영어 듣기 연습을 위한 카드뭉치를 만든다. 보통, 영어 듣기는 Listen Comprehension 이라고 하므로 카드 뭉치 제목도 Listen Comprehension이라고 하자. 


메인 화면에서 아래의 [뭉치 만들기] 버튼을 누른 후 카드 뭉치 이름에 Listen Comprehension 이라고 적고 확인을 누른다. 






2) 카드 뭉치에 노트 추가


만들어진 Listen Comprehension 카드 뭉치를 클릭하면 해당 카드 뭉치 화면으로 들어간다. 카드 뭉치에 아직 카드가 하나도 없으므로 모든 카드를 공부했다는 메시지가 떠 있는 상태다. 상단의 [추가]를 클릭해서 노트 추가창(Noet Editor)을 열어보자.




현재 노트 유형은 Basic으로 되어 있고 뭉치는 Listen Comprehension으로 되어 있다.

 

Basic 노트 유형은 오직 FrontBack의 두 가지 필드만 있어 영어 듣기 연습용으로 적합해 보이지 않는다. 영어 듣기에 사용하기 좋은 새로운 노트 유형을 만들 필요가 있다.(노트 유형 추가에 대해서는 08_(학습자료추가)_카드와_노트_추가하기_Anki_2.0_유저_매뉴얼 참조)

 

[노트 유형]을 클릭해서 노트 유형 선택 창으로 넘어가


[관리]를 클릭하여 노트 유형 관리 창을 연다




새로운 노트를 추가할 것이므로 [추가]를 클릭하여 노트 유형 추가창을 연다.

노트 유형 추가창에서 추가: 기본을 선택하고 확인을 클릭하면 새로운 노트유형의 이름을 기입할 수 있는 창이 열린다.

새로운 노트 유형의 이름으로 "영어 듣기 훈련"이라고 기입하고

[확인]을 클릭한다.



그리고 다시 노트 추가창으로 돌아와서 유형이 "영어 듣기 훈련"으로 되어 있는지 확인한다. 보면 알겠지만 기존의 Basic 노트와 크게 달라진 것이 없다.

 

이제 카드를 어떻게 만들지 생각해보아야 한다. 카드는 어차피 앞면과 뒷면만 있다. 그 앞면은 학습할 내용을 제시하므로 앞면에서는 영어 단어를 읽어줘야 한다. 그런데 아무것도 없이 영어단어만 읽어주게 되면 조금 생뚱맞을 수 있으므로 간단한 지시사항을 "방금 들은 단어를 맞추시오."와 같이 카드 앞면에 적어주어서 이 카드를 공부할 순서가 되면 영어단어를 듣고 지시사항에 따라서 문제를 풀 수 있게 한다. 그리고 정답 확인 버튼을 누르면 실제 영단어를 글자로 확인힐 수 있어야 한다.

 

그렇다면 몇 개의 필드가 필요할까? 일단, 3 정도가 필요해 보인다. 

 

하나는 우리가 공부할 단어를 텍스트로 기입한 "TEXT" 필드이고, 그 다음은 우리가 들을 영단어 오디오 사운드의 [sound] 태그를 삽입할 "SOUND" 필드다. 마지막으로 카드 앞면에 쓸 지시사항 문구를 적어놓을 "EXPLANATION" 필드를 만들려고 한다.

 

우선, [필드...] 버튼을 클릭하여 현재 노트 유형의 필드를 편집한다.

 

아직은 노트 유형 Basic과 동일하므로 현재는 "앞면""뒷면"의 두 개의 필드만 있다. 각각의 필드를 지정하고 [이름 변경] 버튼을 눌러 "앞면" 필드의 이름을 "TEXT"로 수정하고 "뒷면" 필드의 이름을 "SOUND"로 수정한다.





"앞면""뒷면" 필드를 "TEXT""SOUND"로 수정했으면 이번에는 [추가] 버튼을 눌러 "EXPLANATION" 필드를 추가하고 닫는다.



 

그럼, 이제 노트 유형이 영어 듣기 훈련인 노트에는 3개의 필드가 생겨나 있다. 이번에는 이 노트를 카드로 바꿔 보자. [카드...] 버튼을 눌러 템플릿 창을 연다.



그럼 다음과 같은 카드 템플릿이 나타난다.

 

이 템플릿은 이렇게 읽는다.

 

이 노트는 하나의 카드를 만든다.(카드 1 뿐이므로)

"TEXT" 필드의 내용이 카드 앞면에 나타난다.

뒷면에는 앞면에서 아래에 선을 하나 그어 "SOUND" 필드를 보여준다.




전혀 우리가 원하는 카드가 아니므로 이를 아래와 같이 수정해보자아래 템플릿의 모양은 미리보기를 통해 확인할 수 있다.



템플릿이 완성되었으니 이제 모든 준비가 완료되었다. 본격적으로 노트와 카드를 만들어보자.


color, boy, girl, student, school

 

이 다섯 단어에 대한 카드를 만들어 보자. 각각, "TEXT" 필드에 입력하면 된다. "EXPLANATION" 필드에는 "방금 들은 단어를 맞추시오."라고 입력해둔다. (필드 버튼을 눌러 "EXPLANATION필드에 이전에 입력한 내용 유지 체크 박스에 체크해 두면 해당 내용은 계속 유지된다.)

 


3) 카드 탐색기(Browser)로 들어가서 카드를 확인


왼쪽 사이드 바에 Listen Comprehension 카드 뭉치가 보인다color, boy, girl, student, school의 다섯 개의 단어가 카드로 만들어져 있는 것을 확인할 수 있다. 이 카드 뭉치의 노트에 있는 텍스트를 AwesomeTTS로 오디오 사운드로 전환해 [sound]태그를 "SOUND" 필드에 삽입할 것이다


 

4) 카드 탐색기에서 AwesomeTTS를 이용하여 오디오 사운드를 생성

 

카드 탐색기에서 오디오를 생성할 노트에 속하는 카드들을 선택한다.

 



브라우저 상단의 메뉴에 "AwesomeTTS메뉴에서 "Add Audio to Selected"를 선택


 

 원하는 서비스와 옵션을 구성한다.

 

 사운드 확인

Preview의 입력 필드에 간단한 문장을 타이핑하고 [Preview] 버튼을 클릭하여 원하는 오디오 사운드가 생성되는지 확인하라.

 

 소스필드(Source Field) 선택


이제 소스 필드(Source Field)의 드롭다운 목록에서 AwesomeTTS가 텍스트를 읽어 오디오 사운드로 바꿀 때 어떤 필드에서 텍스트를 읽어올지 선택하라.


 목적 필드(destination field) 선택


생성된 [sound] 태그나 파일경로가 입력될 목적 필드(destination field)를 드롭다운 목록에서 선택하라.


 목적 필드(dsetination field)에 생성될 오디오 사운드를 첨가(Append)할 것인지 덮어쓸(Overwrite) 것인지 선택


만일입력할 목적 필드에 있는 텍스트를 그대로 유지하길 원한다면 첨가(append)를 선택하고전체 텍스트를 지우고 사운드로 대체할 것이라면 덮어쓰기(overwrite)를 선택하면 된다. 


첨가(Append)할 경우,

기존에 있던 [sound] 태그를 지울지 말지를 "remove existing옵션을 체크하여 결정할 수 있다체크하면 기존의 [sound] 태그를 지우고 새로운 [sound] 태그를 첨가할 것이고체크를 해제하면 기존에 있던 [sound] 태그를 지우지 않고 거기에 추가적으로 [sound] 태그를 더한다.


덮어쓸(overwriting) 경우

"wrap the filename옵션의 체크를 해제하여 오디오의 [sound] 태그 대신 노출 경로를 저장하도록 할 수 있다.

 

 [Generate] 버튼을 클릭하여 처리과정을 시작한다필요하다면 중간에 처리과정을 중단할 수도 있다.




 

5) 실제 카드를 확인


실제로 카드를 열자마자 소리가 들리고 [답 보기] 버튼을 클릭하니 해당 단어가 나타난다잘 작동하는 것 같다.




6) 모바일(AnkiDroid)에서 잘 작동하는지 확인


모바일(안드로이드폰)에서도 잘 작동한다. 그리고 데스크탑에서와는 달리 플레이 버튼이 제공되어서 계속 반복해서 해당 소리를 들을 수 있게끔 되어 있다. 






+ Recent posts