New 음성으로 제어하는 P5.js & 아두이노

누구나 코딩 아티스트 12

김성일 지음

코딩북스 2023년 10월 06일 출간

작품소개

책소개

전공 불문 코딩 입문자, 음성으로 S/W 및 H/W를 제어하고 싶은 자를 위한 책

최근, 인공지능 기반의 스마트 스피커와 같은 음성인식 가상비서는 편리한 음성 UX(사용자 경험)를 장점으로 소프트웨어 및 하드웨어와의 연계를 통해 스마트홈 서비스의 활성화에 기여하고 있습니다. 이러한 음성 UX의 핵심은 음성인식(STT: Speech to Text)과 음성합성(TTS: Text to Speech) 기술을 기반으로 합니다.

본서는 음성인식과 음성합성의 원리보다는 기초 실습부터 응용 실습까지 다루며 그 활용성에 초점을 맞추고 있습니다. 즉, P5.js를 기반으로 p5.speech 라이브러리를 사용하여 음성인식과 음성합성 기능을 활용하는 방법에 대해 기초부터 응용까지 다루고 있습니다. 특히, P5.js와 아두이노와의 연동을 통해 음성인식과 음성합성을 하드웨어 제어와 자연스럽게 접목시키고 있습니다. 컴퓨터 가상세계(→p5.js)의 시각적 결과물과 실세계(→아두이노)의 결과물을 음성 UX를 통해 연동함으로써 코딩의 원리와 더불어 인간에 보다 자연스러운 음성 인터페이스 방식을 직접 실습 및 응용해 볼 수 있습니다.

p5.js는 자바스크립트, 아두이노는 C/C++ 언어로 되어 있지만 본서에서는 특정 언어에 국한하지 않고 C, C++, 자바, 자바스크립트, 파이썬 등과 같은 다양한 코딩 언어들의 공통분모 다섯 가지(→변수, 조건, 반복, 배열, 함수)에 집중함으로써 코딩의 원리를 빠르게 학습할 수 있도록 구성하였습니다. 또한, 가상(p5.js)과 현실(아두이노)의 두 세계를 넘나드는 시리얼 통신을 기반으로 둘 사이의 소통(연동)을 음성 UX를 통해 실현하는 것을 최종 목표로 삼고, 이에 초점을 맞추어 코딩 입문자 및 하드웨어를 모르는 초보자도 따라올 수 있도록 점진적으로 설명하였습니다. 그러므로 본서를 통해서 코딩 능력뿐만 아니라 아이디어를 실제 물리적인 작품으로 구현할 수 있는 하드웨어 구성 능력도 덤으로 얻을 수 있습니다.

본서는 “음성으로 제어하는 P5.js & 아두이노”와 전반적인 내용은 동일하지만, 추가 및 수정된 부분이 있고 아두이노와의 연동 관련 내용(13장∼18장: 보다 쉬운 연동으로 변경)이 크게 변경되었습니다.

목차

Ⅰ P5.js 기본

01 P5.js: 시작
1.1 p5.js란? 16
1.2 웹 에디터에서 코딩 18
1.3 비주얼 스튜디오 코드에서 코딩 23
1.4 기본 표현: 캔버스 28
1.5 기본 표현: 점과 선 30
1.6 기본 표현: 원과 사각형 32
1.7 기본 표현: 문자 33
1.8 기본 표현: 색상 34
【심화1.1】 2진수 & 16진수 36

02 P5.js: 변수
2.1 변수 선언, 초기화 및 연산 41
【심화2.1】 콘솔창 사용 47
【심화2.2】 콘솔창 사용 시 유의점 및 사용 예 49
【심화2.3】 유니코드(Unicode) & 아스키코드(ASCII Code) 51
【심화2.4】 데이터형 총정리 53
2.2 변수 기반 움직임 표현 56
2.3 전역변수와 지역변수 62
2.4 시스템 변수와 다양한 움직임 구현 65

03 P5.js: 조건,반복
3.1 조건: if문, if-else문, <if-else if>문 75
【심화3.1】 비교 연산자 보충 77
3.2 조건: 시스템 변수, 중첩 if문 83
3.3 반복: for문, 중첩 for문 92

04 P5.js: 배열,함수
4.1 1차원 배열 99
4.2 2차원 배열 109
4.3 함수 유형1,2 112
4.4 함수 유형3,4 117
4.5 이벤트 함수 123

Ⅱ 음성인식 & 음성합성

05 P5.js: 음성합성
5.1 p5.speech 라이브러리 설치 132
【심화5.1】 라이브러리 파일(p5.speech.js) 업로드 방법 135
5.2 음성합성 (캔버스 미사용) 138
【심화5.2】 p5.Element 클래스 154
5.3 음성합성 (캔버스 사용) 159
【심화5.3】 합성음성의 속성(→Volume, Rate, Pitch) 변경 173
5.4 음성합성 응용 (캔버스 사용) 178

06 P5.js: 음성인식
6.1 p5.SpeechRec 기반 음성인식 188
6.2 음성인식 (캔버스 미사용) 196
6.3 음성인식 (캔버스 사용) 199
【심화6.1】 복수 개의 키워드 인식 223
6.4 음성인식 & 음성합성 응용 227

07 P5.js: 텍스트 & 음성인식/합성
7.1 복수 행의 텍스트 입력 238
【심화7.1】 createElement() 242
7.2 구글 웹폰트 251
7.3 눈누 웹폰트 256
7.4 구글 아이콘 263
【심화7.2】 Material Symbols 270
【심화7.3】 “객체 리터럴” 기반 객체 생성 273
7.5 이모지 280

Ⅲ 아두이노 기본

08 아두이노: 시작
8.1 아두이노란? 288
8.2 아두이노 설치 290
8.3 아두이노 코딩 환경 292
8.4 아두이노 실행 294
8.5 입·출력 부품 299

09 아두이노: 변수
9.1 시리얼 통신으로 변숫값 확인 303
【심화9.1】 p5.js와 아두이노의 비교: 기본 데이터형 309
9.2 변수 기반 각종 부품의 특성 확인 312
【심화9.2】 팅커캐드(Tinkercad) 314
【심화9.3】 초음파센서로 거리 구하기 333
9.3 전체 회로도 334

10 아두이노: 조건,반복
10.1 조건: if문, if-else문 337
10.2 조건: <if-else if>문, 중첩 if문 345
10.3 반복: for문, 중첩 for문 348

11 아두이노: 배열,함수
11.1 1차원 배열 353
【심화11.1】 p5.js와 아두이노의 차이: map() 356
11.2 2차원 배열 358
11.3 함수 유형1,2 360
【심화11.2】 p5.js와 아두이노의 차이: random() 364
11.4 함수 유형3,4 364
【심화11.3】 P5.js와 아두이노의 함수 유형 비교 367

12 아두이노: 시리얼통신
12.1 시리얼 통신 372
12.2 문자 송·수신 376
12.3 문자열 송·수신 378
12.4 정수 송·수신 380

Ⅳ 음성인식/합성 기반 P5.js & 아두이노 연동

13 P5.js(음성인식)→아두이노
13.1 연동 실습을 위한 준비 386
【심화13.1】 연동 시 주의사항 및 실행 순서 388
13.2 정수 송·수신 390
【심화13.2】 아두이노의 폴링(Polling) & 인터럽트(Interrupt) 401
13.3 문자열 송·수신 415
13.4 복수 데이터 송·수신 424

14 아두이노→P5.js(음성합성)
14.1 정수 송·수신 436
【심화14.1】 p5.js의 폴링(Polling) & 인터럽트(Interrupt) 441
14.2 문자열 송·수신 455
14.3 복수 데이터 송·수신 464
【심화14.2】 p5.WebSerial과 아두이노의 송·수신 메소드 비교 483

15 아두이노↔P5.js(음성인식/합성)
15.1 P5.js(음성인식)→아두이노 핸드쉐이킹 488
15.2 아두이노→P5.js(음성합성) 핸드쉐이킹 514
【심화15.1】 핸드쉐이킹 방식에서 port.readLine() 사용 시 유의점 526
15.3 아두이노↔P5.js(음성인식 & 음성합성) 핸드쉐이킹 531

Ⅴ 종합 프로젝트

16 프로젝트1: 아이콘 랜덤 이동
16.1 마우스로 랜덤 이동하는 사각형 맞추기 550
16.2 음성합성을 이용한 랜덤 이동하는 아이콘 출력 552
16.3 음성인식을 이용한 아이콘 랜덤 이동 555
16.4 음성인식과 음성합성을 이용한 아이콘 랜덤 출력 558
16.5 음성합성과 버튼을 이용한 아이콘 랜덤 이동 561
16.6 음성인식과 부저를 이용한 아이콘 좌우 반사 564

17 프로젝트2: 이모지 랜덤 출력
17.1 마우스를 누를 때마다 토글되는 주사위 571
17.2 음성합성을 이용한 이모지 랜덤 출력 572
17.3 음성인식을 이용한 이모지 랜덤 출력 574
17.4 음성인식과 음성합성을 이용한 이모지 랜덤 출력 576
17.5 음성합성과 초음파센서를 이용한 이모지 랜덤 출력 579
17.6 음성인식과 LED를 이용한 이모지 랜덤 출력 582

18 프로젝트3: 택시를 따라가는 자전거
18.1 아이콘을 이용한 “택시를 따라가는 자전거” 588
18.2 음성합성을 이용한 “택시를 따라가는 자전거” 590
18.3 음성인식을 이용한 “택시를 따라가는 자전거” 593
18.4 음성인식과 음성합성을 이용한 “택시를 따라가는 자전거” 596
18.5 음성합성, 버튼, 가변저항 두 개를 이용한 “택시를 따라가는 자전거” 600
18.6 음성인식/합성, RGB LED 및 버튼을 이용한 “택시를 따라가는 자전거” 604

마무리
마무리 611

출판사 서평

[1] 음성인식과 음성합성을 이용한 P5.js 및 아두이노 제어
P5.js 및 아두이노 코딩의 핵심 다섯 가지(변수, 조건, 반복, 배열, 함수)와 더불어 음성인식과 음성합성 라이브러리를 활용한 인터페이스로 상상을 현실로 연동합니다.

[2] 음성 입·출력을 통한 자연스러운 인터페이스 구현
가상(p5.js)과 현실(아두이노)의 두 세계를 넘나드는 시리얼 통신을 기반으로 둘 사이의 소통(연동)을 음성 UX(→즉, 음성인식과 음성합성)를 통해 실현합니다. 또한, 기존의 S/W 코딩과 H/W 코딩의 한계를 뛰어넘어 초보자도 S/W 및 H/W 코딩에 친숙해질 수 있도록 도와줍니다.

[3] 쉬운 코딩 환경, 간결한 코딩 문법
쉬운 코딩 환경과 간결한 문법을 이용해 동적, 시각적, 물리적 결과물을 쉽게 도출함으로써 코딩하는 재미가 살아있습니다!

[4] 실전 코딩이 우선! 이론은 따라오는 것
[질문] → [설명] → [수정] 기존 대다수의 코딩 서적들이 따르는 방식인 이론 설명 후 코드를 소개하는 방식이 아니라, [질문]의 예제를 우선 실행해 보고 코드 [설명]으로 의미를 확인한 후, 예제를 [수정]해 보며 코딩의 원리를 재확인할 수 있도록 설계하였습니다.

[5] 블랜디드 러닝에 최적화된 구성
전체적인 흐름을 빠르게 파악하고 싶다면 [질문]→[설명] 순으로 실습합니다. 전체적인 흐름을 파악한 후 내실을 다지고 싶다면 [수정]→[심화]→[종합프로젝트] 순으로 실습합니다!

소스코드 다운로드: www.codingbooks.co.kr
관련 동영상: YouTube “코딩아티스트”

작가정보

저자(글) 김성일

자연언어(일본어, 중국어, 영어, 한국어)와 컴퓨터언어(C, C++, Java, JavaScript, Python, Processing, P5.js 등), 그리고 S/W와 H/W 연계 교육에 관심이 많습니다. 음성인식 관련 논문으로 박사 학위를 받았으며 현재 경남대학교 전자SW공학과에 재직 중입니다.