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

누구나 코딩 아티스트 7

김성일 지음

코딩북스 2022년 09월 01일 출간

작품소개

책소개

전공 불문 코딩 입문자, 음성으로 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 기본

01 P5.js: 시작
1.1 p5.js란? 16
1.2 p5.js 설정 18
1.3 p5.js 코딩 환경 19
1.4 기본 표현: 캔버스 22
1.5 기본 표현: 점과 선 24
1.6 기본 표현: 원과 사각형 26
1.7 기본 표현: 문자 28
1.8 기본 표현: 색상 29
【심화1.1】 2진수 & 16진수 30

02 P5.js: 변수

2.1 변수 선언, 초기화 및 연산 36
【심화2.1】 유니코드(Unicode) & 아스키코드(ASCII Code) 44
【심화2.2】 데이터형(Data Type) 총정리 46
2.2 변수 기반 움직임 표현 50
2.3 전역변수와 지역변수 55
2.4 시스템 변수와 다양한 움직임 구현 58

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

04 P5.js: 배열, 함수
4.1 1차원 배열 95
4.2 2차원 배열 105
4.3 함수 유형 1,2 108
4.4 함수 유형 3,4 114
4.5 이벤트 함수 120

Ⅱ 음성인식 & 음성합성

05 P5.js: 음성합성
5.1 p5.speech 라이브러리 설치 128
5.2 음성합성 (캔버스 미사용) 132
【심화5.1】 p5.Element 클래스 148
5.3 음성합성 (캔버스 사용) 153
【심화5.2】 합성음성의 속성(→Volume, Rate, Pitch) 변경 167
5.4 음성합성 응용 (캔버스 사용) 172

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

07 P5.js: 텍스트 & 음성인식/합성
7.1 복수 행의 텍스트 입력 231
【심화7.1】 createElement() 235
7.2 구글 웹폰트 245
7.3 눈누 웹폰트 251
7.4 구글 아이콘 257
【심화7.2】 “객체 리터럴” 기반 객체 생성 265
7.5 이모지 272

Ⅲ 아두이노 기본

08 아두이노: 시작
8.1 아두이노란? 280
8.2 아두이노 설치 282
8.3 아두이노 코딩 환경 285
8.4 아두이노 실행 286
8.5 실습 입·출력 부품 291

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

10 아두이노: 조건, 반복
10.1 조건: if문, if-else문 331
10.2 조건: <if-else if>문, 중첩 if문 339
10.3 반복: for문, 중첩 for문 342

11 아두이노: 배열, 함수
11.1 1차원 배열 347
【심화11.1】 p5.js와 아두이노의 차이: map() 350
11.2 2차원 배열 352
11.3 함수 유형 1,2 354
【심화11.2】 p5.js와 아두이노의 차이: random() 358
11.4 함수 유형 3,4 358

12 아두이노: 시리얼통신
12.1 시리얼 통신 363
12.2 문자 송·수신 367
12.3 문자열 송·수신 369
12.4 정수 송·수신 371

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

13 P5.js(음성인식)→아두이노
13.1 연동 실습을 위한 준비 377
【심화13.1】 연동 실습 절차 및 주의사항 379
13.2 정수 송·수신 382
13.3 문자열 송·수신 398
13.4 복수 데이터 송·수신 404

14 아두이노→P5.js(음성합성)
14.1 정수 송·수신 415
14.2 문자열 송·수신 429
14.3 복수 데이터 송·수신 439
【심화14.1】 시리얼 통신 관련 메소드 정리 455

15 아두이노↔P5.js(음성인식/합성)
15.1 P5.js(음성인식)→아두이노 핸드쉐이킹 459
15.2 아두이노→P5.js(음성합성) 핸드쉐이킹 475
15.3 아두이노↔P5.js(음성인식 & 음성합성) 핸드쉐이킹 481

Ⅴ 종합 프로젝트

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

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

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

마무리
마무리 556

출판사 서평

[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공학과에 재직 중입니다.