전공 불문 코딩 입문자, 음성으로 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를 통해 실현하는 것을 최종 목표로 삼고, 이에 초점을 맞추어 코딩 입문자 및 하드웨어를 모르는 초보자도 따라올 수 있도록 점진적으로 설명하였습니다. 그러므로 본서를 통해서 코딩 능력뿐만 아니라 아이디어를 실제 물리적인 작품으로 구현할 수 있는 하드웨어 구성 능력도 덤으로 얻을 수 있습니다.

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
02 P5.js: 변수
2.1 변수 선언, 초기화 및 연산 36
2.2 변수 기반 움직임 표현 50
2.3 전역변수와 지역변수 55
2.4 시스템 변수와 다양한 움직임 구현 58
03 P5.js: 조건, 반복
3.1 조건: if문, if-else문, 문 69
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.3 음성합성 (캔버스 사용) 153
5.4 음성합성 응용 (캔버스 사용) 172
06 P5.js: 음성인식
6.1 p5.SpeechRec 기반 음성인식 181
6.2 음성인식 (캔버스 미사용) 189
6.3 음성인식 (캔버스 사용) 193
6.4 음성인식 & 음성합성 응용 223
07 P5.js: 텍스트 & 음성인식/합성
7.1 복수 행의 텍스트 입력 231
7.2 구글 웹폰트 245
7.3 눈누 웹폰트 251
7.4 구글 아이콘 257
7.5 이모지 272
08 아두이노: 시작
8.1 아두이노란? 280
8.2 아두이노 설치 282
8.3 아두이노 코딩 환경 285
8.4 아두이노 실행 286
8.5 실습 입·출력 부품 291
09 아두이노: 변수
9.1 시리얼 통신으로 변숫값 확인 296
9.2 변수 기반 각종 부품의 특성 확인 304
9.3 전체 회로도 328
10 아두이노: 조건, 반복
10.1 조건: if문, if-else문 331
10.2 조건: 문, 중첩 if문 339
10.3 반복: for문, 중첩 for문 342
11 아두이노: 배열, 함수
11.1 1차원 배열 347
11.2 2차원 배열 352
11.3 함수 유형 1,2 354
11.4 함수 유형 3,4 358
12 아두이노: 시리얼통신
12.1 시리얼 통신 363
12.2 문자 송·수신 367
12.3 문자열 송·수신 369
12.4 정수 송·수신 371
13 P5.js(음성인식)→아두이노
13.1 연동 실습을 위한 준비 377
13.2 정수 송·수신 382
13.3 문자열 송·수신 398
13.4 복수 데이터 송·수신 404
14 아두이노→P5.js(음성합성)
14.1 정수 송·수신 415
14.2 문자열 송·수신 429
14.3 복수 데이터 송·수신 439
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