프로그래밍 허브

✅ nvm (Node Version Manager) 설치

nvm 이란?

• 여러 버전의 Node.js를 손쉽게 설치·전환할 수 있는 도구
• Node.js 프로젝트마다 다른 버전 쓰는 경우 필수
• macOS, Linux, Windows 모두 사용 가능

✅ macOS / Linux 설치

터미널에서 아래 명령어 실행:

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash

설치 후 쉘 설정파일 추가:

• . bashrc
• . zshrc
• . profile

export NVM_DIR="$([ -z "${XDG_CONFIG_HOME-}" ] && printf %s "${HOME}/.nvm" || printf %s "${XDG_CONFIG_HOME}/nvm")"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"

터미널 재시작 후 버전 확인:

nvm --version

✅ Windows 설치

Windows는 nvm-windows라는 별도 프로젝트를 사용

1. 아래 사이트 접속
   → nvm-windows Releases
2. nvm-setup.zip 파일 다운로드
3. 설치 마법사 실행

설치 후:

nvm list available

원하는 버전 설치:

nvm install 18.17.0
nvm use 18.17.0

✅ 비유

• nvm = “여러 버전의 Node.js 신발장”
• 프로젝트마다 딱 맞는 버전의 신발(노드 버전) 꺼내 신으면 된다!

✅ 얕은 복사 vs 깊은 복사

✅ 얕은 복사 (Shallow Copy)

• 객체나 배열을 복사할 때 주소(reference)만 복사
• 내부 값은 여전히 같은 메모리를 가리킴
• 복사본 수정 → 원본도 영향받음

예시

const original = { name: "Alice" };
const copy = original;

copy.name = "Bob";

console.log(original.name); // Bob

✅ 깊은 복사 (Deep Copy)

• 객체 내부 값까지 모두 새로 복사
• 복사본과 원본이 완전히 분리됨

깊은 복사 방법

JSON 방법 (간단하지만 한계 존재)

const original = { name: "Alice" };
const copy = JSON.parse(JSON.stringify(original));

copy.name = "Bob";

console.log(original.name); // Alice

• 단점:
  • 함수, undefined, Symbol은 복사 안됨

structuredClone (ES2021)

const original = { name: "Alice" };
const copy = structuredClone(original);

copy.name = "Bob";

console.log(original.name); // Alice

lodash cloneDeep

import cloneDeep from "lodash/cloneDeep";

const original = { name: "Alice" };
const copy = cloneDeep(original);

copy.name = "Bob";

console.log(original.name); // Alice

✅ 비유

• 얕은 복사 → “복사본도 같은 집 주소에 살고 있음”
• 깊은 복사 → “복사본은 새 집에 이사 간 것”

✅ 정리

• nvm은 Node.js 버전 관리 필수 도구
• Windows는 nvm-windows 설치 필요
• 얕은 복사(shallow copy)는 reference만 복사 → 원본과 연결
• 깊은 복사(deep copy)는 새로운 객체 생성 → 완전히 분리

웹 애플리케이션 배포의 흐름

• 웹 애플리케이션 개발 → 웹 서버에 배포 → 브라우저가 접속
• 현대 웹 앱은 수십~수백 개의 자바스크립트 모듈로 나뉨
• 개발할 땐 쪼개서 관리하기 쉽도록 분리
• 하지만 배포할 땐:
  • 파일 수가 많으면 → HTTP 요청 많아져서 느려짐
  • 파일 관계 관리가 복잡해짐

→ 그래서 모듈 번들러가 등장!

✅ 모듈 번들링이란?

번들링이란?

여러 개로 나눠놓은 JS 파일들을 → 하나(또는 소수)로 합치는 것

✅ 왜 번들링할까?

• 네트워크 요청 최소화 → 성능 개선
• 의존 관계를 자동으로 해결
• ES Module, CommonJS 등 모듈 시스템을 브라우저가 이해할 수 있도록 변환

비유

• 개발 중 → 각자 A4 용지에 코드를 적음
• 배포 → A4 수백 장을 복사해서 배포하면 너무 비효율적
• → “모든 내용을 한 권의 책으로 묶어 배포”하는 게 번들링!

✅ Webpack (웹팩)

웹팩이란?

• 자바스크립트, CSS, 이미지 등 모든 리소스를 모듈처럼 관리
• 번들링뿐 아니라:
  • 압축(minify)
  • 코드 분할(code splitting)
  • 트리 쉐이킹(tree shaking)
  • 로더(loader)로 다른 파일 처리

네트워크에서 번들링 확인하기

• 개발자 도구 → Network 탭
• 각각의 JS 파일이 별도로 로드되는지, 혹은 하나로 합쳐졌는지 확인 가능
  • 번들링 전: /utils.js, /api.js 등 각각 요청
  • 번들링 후: /bundle.js 하나만 요청

✅ 웹팩 설치하기

설치 명령어

npm install --save-dev webpack webpack-cli

웹팩 실행 방법

1) 기본 실행 (npx)

npx webpack --entry ./src/index.js --output-path ./dist

• --entry: 진입 파일
• --output-path: 결과물 경로

2) webpack.config.js 사용

보통 설정 파일을 따로 둔다.

webpack.config.js 예:

const path = require('path');

module.exports = {
  mode: 'development', // or 'production'
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  }
};

실행:

npx webpack

✅ production vs development

production 예

webpack.config.js

module.exports = {
  mode: 'production',
  entry: './src/index.js',
  output: {
    filename: 'bundle.js'
  }
};

빌드 실행:

npx webpack

결과:

• 코드가 minify(압축)
• 주석 제거
• 파일 용량 작아짐

✅ 번들링 없으면 어떻게 될까?

• 수많은 JS 파일 각각 서버 요청
• 네트워크 비용 ↑
• 성능 저하
• 의존관계 꼬일 위험

→ 그래서 반드시 번들러 필요!

✅ 한 줄 정리

“개발할 땐 쪼개고, 배포할 땐 합친다.
그것이 번들링!”

Node.js 란?

• Node.js = 구글 V8 자바스크립트 엔진으로 빌드된 자바스크립트 런타임 환경
• 브라우저 밖에서도 자바스크립트를 실행할 수 있게 만들어줌
• 서버 개발, CLI 툴, 빌드 도구 등 범용적으로 활용 가능

NPM 이란?

• Node Package Manager의 약자
• Node.js 생태계의 패키지 관리 도구
• 필요한 라이브러리를 검색, 설치, 관리할 수 있음
• npm 공식 사이트 → https://www.npmjs.com/

✅ NPM 기본 사용법

1. 라이브러리 설치

프로젝트 로컬 설치

npm install 라이브러리이름

• 예:

npm install express

→ 설치된 라이브러리는 node_modules/ 폴더에 들어감

2. 특정 버전 설치

npm install 패키지명@버전

• 예:
•  

npm install express@4.18.1

3. 전역 설치

npm install -g 패키지명

• CLI 툴(ex: nodemon, eslint)을 설치할 때 주로 사용
• 전역 설치된 패키지들은 시스템 어디서든 명령어로 실행 가능
• 관지라 권한(root 권한) 필요할 때도 있음 (특히 macOS, Linux)

4. nodemon 이란?

• Node.js 애플리케이션 개발 중 자동으로 서버 재시작해주는 툴
• 코드 변경 → 자동 감지 → 앱 재시작
• 개발자 필수템

nodemon 설치

로컬 설치:

npm install nodemon --save-dev

전역 설치:

npm install -g nodemon

nodemon 실행

nodemon index.js

✅ npm init

• 프로젝트의 package.json 파일을 생성
• 아래 명령어로 시작:

npm init

• 빠르게 생성하고 싶으면:

npm init -y

package.json 주요 요소

예:

json
{
  "name": "my-app",
  "version": "1.0.0",
  "description": "테스트 프로젝트",
  "main": "index.js",
  "scripts": {
    "start": "node index.js"
  },
  "dependencies": {
    "express": "^4.18.1"
  },
  "devDependencies": {
    "nodemon": "^3.0.0"
  }
}

• name: 프로젝트 이름
• version: 버전 (시맨틱 버저닝)
• description: 설명
• main: 진입 파일
• scripts:
  • 커맨드 단축어 등록
  • 예: 

npm run start

• • 또는 단축형:

npm start

• dependencies:
  • 실제 서비스에 필요한 패키지
• devDependencies:
  • 개발용 도구 (ex. nodemon, eslint)

package-lock.json

• 의존성 트리를 정확히 기록
• 설치된 패키지들의 버전 고정 역할
• 팀 프로젝트에서 동일한 환경 유지할 때 중요

✅ node_modules 관리

• node_modules는 설치된 라이브러리들의 모음
• 용량 큼 → 보통 Git에 올리지 않음
• . gitignore에 꼭 추가:
   

node_modules 재설치

• 다른 컴퓨터에서 프로젝트 복사했을 때:→ package.json 기반으로 다시 설치

npm install

버전 꼬임, 오류 해결

• 아래 두 폴더 삭제 후 다시 설치:

rm -rf node_modules
rm package-lock.json
npm install

✅ 시맨틱 버저닝 (Semantic Versioning)

패키지 버전은 보통 세 자리로 구성됨:

• major → 호환 깨질 정도의 큰 변화
• minor → 새로운 기능 추가 (기존과 호환)
• patch → 버그 수정

✅ 비유

^, ~ 기호 의미

• ^1.2.3 → major는 고정, minor/patch는 업그레이드 가능
• ~1.2.3 → major/minor 고정, patch만 업그레이드 가능

✅ 정리

• Node.js는 자바스크립트를 어디서든 돌릴 수 있게 해주는 환경
• NPM은 라이브러리 설치, 관리의 표준 도구
• package.json은 프로젝트의 설명서 + 설치 목록
• node_modules는 버전 꼬이면 지우고 재설치
• CLI 툴은 전역 설치, 라이브러리는 로컬 설치
• 시맨틱 버저닝은 버전 관리의 필수 규칙!

자바스크립트 모듈이 뭐야?

• 모듈(Module) = 코드를 여러 파일로 나눠서 관리하기 위한 기능
• 큰 프로젝트일수록 파일 분리가 필수
• ES6 이전 → 자바스크립트엔 공식 모듈 시스템이 없었음
• 지금은 대표적으로 CommonJS와 ES Module 두 가지가 많이 쓰임

✅ CommonJS

특징

• Node. js에서 사용하기 위해 만들어짐
• 동기적으로 동작 (require 시점에 파일 읽음)
• 파일마다 scope가 분리됨
• .js 확장자 생략 가능

CommonJS 코드 예제

math.js

const perfectSore = 100;

function sum(a, b) {
  return a + b;
}

function subtract(a, b) {
  return a - b;
}

module.exports = {
  perfectSore,
  sum,
  subtract,
};

index.js

const math = require('./math.js');

console.log('perfectSore', math.perfectSore);
console.log('sum', math.sum(10, 20));
console.log('subtract', math.subtract(10, 20));

실행 방법

• Node.js 환경에서 바로 실행 가능
• package.json 없어도 OK
• 예:

node commonjs/index.js

✅ ES Module (ESM)

특징

• ES6(ECMAScript 2015)에서 공식 표준으로 도입
• 비동기적으로 동작 가능
• 파일 간 의존 관계가 명확해짐
• 브라우저와 Node.js 둘 다 사용 가능 (Node.js에서는 설정 필요)
• Node.js에서는 package.json에 설정해야 함:

{
  "type": "module"
}

ES Module 코드 예제

math.js

export const perfectSore = 100;

export function sum(a, b) {
  return a + b;
}

export function avege(a, b) {
  return (a + b) / 2;
}

export default {
  subtract(a, b) {
    return a - b;
  }
};

index.js

import { perfectSore, sum, avege } from './math.js';
import math from './math.js';

console.log('perfectSore', perfectSore);
console.log('sum', sum(10, 20));
console.log('avg', avege(10, 20));
console.log('subtract', math.subtract(10, 20));

import 문법 종류

• 개별 import

import { sum } from './math.js';

• default import

import math from './math.js';

• 모든 export 한 번에 가져오기

import * as math from './math.js';
console.log(math.sum(10, 20));

실행 방법

Node.js에서 ES Module 사용하려면:

• package.json 추가

{
  "type": "module"
}

• 실행:

node module/index.js

✅ CommonJS vs ES Module 비교

✅ 비유로 이해하기

• CommonJS → 즉석 전화: “전화해 보고 바로 대답 듣기” (동기적)
• ES Module → 메일: “보내놓고, 답 오면 처리” (비동기 가능)

✅ 정리

• 작은 파일로 나누고 import/export 하는 습관은 유지보수 필수
• Node.js에서는 CommonJS도 여전히 많이 쓰지만, 최신 프로젝트는 ES Module로 점점 이동
• 브라우저에서 모듈 쓸 땐 <script type="module"> 꼭 확인!

1. 이벤트 전파: 버블링 vs 캡처링

✅ DOM 중첩 구조 예시

네가 올린 이미지처럼 DOM은 아래처럼 중첩된 박스처럼 되어 있어:

body
└─ main
    └─ div
        └─ p
            └─ span

이벤트는 이렇게 안쪽 ↔ 바깥쪽으로 흘러간다.

캡처링 (Capturing Phase)

• 이벤트가 가장 바깥쪽 → 가장 안쪽으로 전파
• 예: body → main → div → p → span
• 흔히 캡처 단계라고 부름

타깃 단계 (Target Phase)

• 이벤트가 실제로 발생한 요소에서 실행
• 예: span에서 클릭 발생

버블링 (Bubbling Phase)

• 이벤트가 안쪽 → 바깥쪽으로 전파
• 예: span → p → div → main → body
• 디폴트 동작은 대부분 버블링

✅ event.eventPhase 값

event.eventPhase로 현재 단계 알 수 있음

✅ 버블링/캡처링 코드 예시

HTML

<div id="outer">
  <div id="inner">클릭해보세요!</div>
</div>

document.getElementById("outer").addEventListener(
  "click",
  (e) => {
    console.log("outer div 캡처링 단계", e.eventPhase);
  },
  true // 캡처링
);

document.getElementById("inner").addEventListener(
  "click",
  (e) => {
    console.log("inner div 버블링 단계", e.eventPhase);
  },
  false // 버블링
);

2. JS 모듈 import/export

✅ ES6 모듈 기본 문법

1) export

파일 math.js

export const add = (a, b) => a + b;
export const multiply = (a, b) => a * b;

2) import

파일 main.js

import { add, multiply } from "./math.js";

console.log(add(2, 3)); // 5
console.log(multiply(2, 3)); // 6

default export

math.js

export default function subtract(a, b) {
  return a - b;
}

main.js

import subtract from "./math.js";
console.log(subtract(5, 2)); // 3

✅ 모듈 사용 시 주의

• import/export는 브라우저에서 type="module" 필요
• html
   

<script type="module" src="main.js"></script>

3. Array API

✅ map

• 배열의 각 요소를 변환 → 새로운 배열 반환

const nums = [1, 2, 3];
const doubled = nums.map(n => n * 2);
console.log(doubled); // [2, 4, 6]

✅ some

• 배열 중 하나라도 조건 만족하면 true

const nums = [1, 2, 3];
console.log(nums.some(n => n > 2)); // true

✅ reduce

• 배열 요소를 하나의 값으로 누적

const nums = [1, 2, 3, 4];
const sum = nums.reduce((acc, curr) => acc + curr, 0);
console.log(sum); // 10

✅ filter

• 조건에 맞는 요소만 추출 → 새로운 배열

const nums = [1, 2, 3, 4];
const even = nums.filter(n => n % 2 === 0);
console.log(even); // [2, 4]

✅ 마무리

오늘은 프런트엔드 개발자가 꼭 알아야 할

• 이벤트 전파 (버블링/캡처링)
• ES6 모듈 시스템
• Array API (map, some, reduce, filter)
  를 정리했어.

작은 차이를 이해하면 코드가 더 깔끔하고 효율적해질 수 있으니 꼭 익혀두자!

1. script 로드 해결 방법

HTML에서 script를 언제, 어떻게 불러오냐에 따라 페이지 성능과 동작이 크게 달라져.
아래처럼 크게 3가지 방식이 있어.

1) body 최하단에 script 넣기

• HTML 태그들 다 그린 후 JS 실행
• 가장 기본적이고 안전한 방식
• 단점: JS가 많아지면 로드 느림
• 예시:

<body>
  <h1>Hello</h1>
  <script src="main.js"></script>
</body>

2) load 이벤트 리스너 등록

• window.onload → 모든 리소스(img, css 등) 로딩 완료 후 실행

window.onload = function() {
  console.log("모든 리소스 로드 완료!");
};

• DOMContentLoaded → HTML 파싱 완료 시점에 실행 (이미지, css는 기다리지 않음)

document.addEventListener("DOMContentLoaded", function() {
  console.log("DOM 준비 완료!");
});

• 비유:
  • window.onload → 집 짓고 가구까지 다 들어온 후 집에 들어감
  • DOMContentLoaded → 집은 다 지었는데, 가구는 아직 옮기는 중

3) HTML5 script 속성

✅ defer

• HTML 파싱과 JS 다운로드 동시에 진행
• 단, 실행은 HTML 파싱 끝난 뒤
• 여러 개 defer 스크립트 → 작성 순서대로 실행
• 비유: “집 짓는 동안 가구 주문해 두고, 집 완공되면 가구 설치 시작”

예시:

<script src="main.js" async></script>

✅ async

• HTML 파싱과 JS 다운로드 동시에 진행
• 다운로드가 끝난 순간 바로 실행 (HTML 파싱 멈춤)
• 여러 개 async 스크립트 → 실행 순서 보장 안 됨
• 비유: “누가 먼저 도착하든 바로 가구 들이밀기 → 순서 뒤죽박죽”

예시:

<script src="main.js" async></script>

✅ defer vs async 한눈에 정리

2. this 개념 정리

this는 “누가 불렀냐”에 따라 달라진다

• 기본적으로 this는 호출하는 주체를 가리킨다
• this가 가리키는 대상은 상황별로 달라진다

✅ this의 여러 예시

1) 전역에서 this

console.log(this); // window (브라우저 기준)

• 비유: “밖에서 혼자 말하면, 집 전체(윈도우)가 들음”

2) 함수 안에서 this

• 엄격 모드(use strict) 여부에 따라 다름
  • strict 모드 → undefined
  • 비 strict 모드 → window

function foo() {
  console.log(this);
}

foo(); // window (비 strict)

3) 객체의 메서드에서 this

• this → 해당 객체

const user = {
  name: "Alice",
  sayHello: function() {
    console.log(this.name);
  }
};

user.sayHello(); // Alice

4) 이벤트 리스너에서 this

• 기본적으로 this → 이벤트가 걸린 HTML 요소

<button id="btn">클릭</button>

<script>
  document.getElementById("btn").addEventListener("click", function() {
    console.log(this); // <button> 요소
  });
</script>

5) 화살표 함수에서 this

• 화살표 함수는 자신만의 this를 가지지 않는다 → 바깥 스코프의 this를 물려받음

const user = {
  name: "Alice",
  sayHello: () => {
    console.log(this.name);
  }
};

user.sayHello(); // undefined

• 비유: 화살표 함수는 “나는 this를 새로 안 만들고, 부모님 따라갈래~”

✅ this의 디폴트는 window

• 전역에서 this는 window
• 하지만 함수나 객체 안에서 상황에 따라 달라지니 주의!

✅ 마무리

script 로딩 전략을 잘 선택하면 웹페이지 속도가 달라지고,
this 개념을 이해해야 자바스크립트를 제대로 다룰 수 있다!
defer와 async, this는 프런트엔드 개발 필수 개념이니 꼭 정리해 두자.

🌳 DOM Tree (Document Object Model)

DOM은 웹 문서를 트리(Tree) 형태로 표현한 구조야. **HTML 문서 안의 모든 요소(태그, 텍스트, 속성)**를 객체처럼 다룰 수 있게 해주지.

DOM Tree 예시 다이어그램

<!DOCTYPE html>
<html>
  <head>
    <title>My Page</title>
  </head>
  <body>
    <h1>Hello</h1>
    <p>Welcome!</p>
  </body>
</html>

나무 모양 다이어그램:

DOM 이해 비유

• document → 전체 나무
• html → 큰 가지
• head, body → html 아래 두 갈래 큰 가지
• 태그들 → 잎사귀
• 텍스트 → 잎사귀에 적힌 글자

🌐 BOM (Browser Object Model)

DOM은 “문서”를 다루고, BOM은 브라우저 자체를 다루는 개념이야.

• BOM은 DOM보다 더 “바깥쪽”에 있음
• 웹 페이지가 아닌, 브라우저 환경 자체를 다루는 객체들이 BOM에 포함됨
• 대표적인 BOM 객체:
  • window
  • navigator
  • screen
  • history
  • location

✅ 주요 BOM 객체 설명

1. window

• 최상위 객체 (DOM, BOM 둘 다 포함)
• 비유: 브라우저 창 전체
• 예시:

window.alert("Hello!");
console.log(window.innerWidth);

2. document

• DOM의 진입점
• HTML 문서를 표현
• 예시:
   

document.getElementById("title");

3. navigator

• 브라우저 정보
• 예시:

console.log(navigator.userAgent);
console.log(navigator.language);

4. screen

• 사용자 화면 해상도 정보
• 예시:

console.log(screen.width);
console.log(screen.height);

5. location

• 현재 URL 정보 + 이동 기능
• 예시:

console.log(location.href);
location.href = "https://www.google.com";

6. history

• 사용자가 방문한 페이지 이력
• 예시:

history.back();
history.forward();

✅ DOM vs BOM

✅ 비유로 정리

• DOM → 웹페이지의 설계도
• BOM → 브라우저라는 집 전체의 컨트롤러
• window → 집 전체
• document → 집 안의 설계도
• navigator → 집의 신분증
• screen → 집의 창문 크기
• location → 집 주소
• history → 집 방문 내역

들어가며

• 사람은 소리를 들으면 곧잘 단어를 알아듣고, 다시 소리를 낼 수 있습니다.
• 그런데 컴퓨터에게 “소리를 듣고 글자로 바꿔라(STT)”, 혹은 “글자를 읽고 자연스럽게 말해라(TTS)” 라고 하면, 이게 생각보다 엄청 복잡한 일입니다.
• 그 이유는 소리 신호가 시간에 따라 계속 변하고, 말소리는 단순한 신호가 아니기 때문이죠.
• 오늘은 AI 음향 모델이 소리를 어떻게 이해하고 처리하는지, 대표적인 기술들과 함께 쉽게 설명해보겠습니다.

왜 음향 모델이 필요한가?

• 소리는 파도와 같다.
  → 소리는 파형(waveform). 하지만 AI는 “이 파형이 무슨 글자인지” 모르죠.
• 음향모델은 이 파형 속에서 ‘발음 단위(phoneme)’ 라는 기본 단위로 신호를 쪼개고 분석합니다.
• 예: “she” → /sh/ + /iy/
• 즉 음향모델은 파형 → 음소 → 단어 로 가는 다리 역할을 합니다.

MFCC: 소리의 DNA 뽑아내기

• 사람이 목소리를 구별하듯, AI도 소리의 ‘특징’을 뽑아야 합니다.
• 여기서 등장하는 게 MFCC(Mel-Frequency Cepstral Coefficients).
• 비유: 소리를 “색깔 스펙트럼”으로 나누어 특징 벡터로 만드는 것.
• 음성 신호 → 작은 시간 단위로 자르기 → 스펙트럼 뽑기 → 로그와 DCT로 변환 → MFCC 벡터 추출.
  

  

GMM (Gaussian Mixture Model)

• MFCC 벡터를 보고 이게 어떤 소리일지 확률적으로 판단하는 모델.
• 비유: 여러 개의 종(鐘)을 울려보고 “지금 울린 소리는 어느 종 소리랑 가장 비슷한가?”를 확률로 따지는 것.
• GMM은 “이 소리가 어느 음소에 속할 확률”을 계산합니다.
• 수식적으로 각 feature vector는 여러 Gaussian 분포의 혼합으로 모델링.

HMM (Hidden Markov Model)

• GMM이 “순간”을 잘 본다면, HMM은 “흐름”을 본다.
• 말은 이어지기 때문에, 앞 음소가 뭐였느냐가 다음 음소에 영향을 미침.
• HMM은 숨겨진 상태(음소) → 관찰값(MFCC) 의 관계를 모델링.
• 비유: 문장 읽기 게임 → 눈으로 본 글자(관찰값)는 보이지만, 머릿속 생각(숨겨진 상태)은 안 보이는 것과 같음.
• HMM은 상태 전이 확률, 방출 확률로 음성 시퀀스를 모델링.

GMM-HMM의 결합

• GMM + HMM → 음향모델의 전통적 조합.
• GMM은 각 프레임의 음소 분포를 계산.
• HMM은 음소들의 시퀀스를 모델링.
• 비유: GMM은 단일 사진을 분석, HMM은 사진들을 이어붙여 영화로 보는 것.

하이브리드 모델 (DNN-HMM, LSTM-HMM)

• GMM-HMM보다 더 똑똑한 게 필요해졌다!
• GMM은 선형적 가정, 단순한 분포라 한계가 있음.
• 그래서 GMM 대신 DNN, LSTM을 쓰기 시작:
  • DNN-HMM: GMM 대신 DNN이 분포를 학습
  • LSTM-HMM: 시간 흐름을 더 잘 기억
• 비유: GMM은 수학적 공식으로만 소리를 구분, DNN은 소리를 보고 “느낌적으로” 구분 가능.

Viterbi 디코더

• HMM-HMM 또는 Hybrid Model의 필수 도구.
• 가장 높은 확률의 음소 시퀀스(숨겨진 상태)를 찾아내는 알고리즘.
• 비유: 미로에서 가장 가능성 높은 길을 찾는 네비게이션.

최근 트렌드

• Deep Learning으로 Acoustic Model 완전 대체 → End-to-End 모델(LAS, CTC)도 뜨고 있음.
• 하지만 Hybrid Model도 여전히 많이 쓰인다 (실제 상용 STT 엔진들).

정리

• 소리의 파동 → MFCC
• MFCC → GMM 혹은 DNN으로 분류
• 시간 흐름 → HMM
• HMM + GMM = GMM-HMM
• GMM 대신 DNN/LSTM → 하이브리드 모델
• End-to-End 모델(LAS, Transformer 등)로도 발전 중

✅ 이해를 돕는 비유 정리

들어가며
음성 인식(STT), 음성 합성(TTS), 음성 스타일 변환(STS) 같은 딥러닝 음성 처리 작업을 하려면 가장 먼저 해야 할 일은 ‘오디오 데이터를 불러오고 다루는 법’을 익히는 것입니다. 오늘은 Python 라이브러리인 Librosa를 사용해 오디오를 로드하고, 직접 재생하거나 파형을 시각화하는 과정을 소개합니다.

Librosa로 오디오 불러오기

import librosa
train_audio_path = 'input/'
file_path = 'pop.wav'
y, sr = librosa.load(str(train_audio_path)+file_path, sr=22050)
print(y.shape, sr)

• y: 오디오의 amplitude 신호 배열
• sr: sampling rate

주피터에서 바로 듣기
Jupyter Notebook에서 음성을 바로 들어볼 수 있습니다.

import IPython.display as ipd
ipd.Audio(y, rate=sr)

파형 시각화하기
오디오 신호를 파형으로 시각화하면 데이터 전처리나 이상 탐지에 매우 유용합니다.

import matplotlib.pyplot as plt
import numpy as np
import librosa.display

%matplotlib inline
fig = plt.figure(figsize=(14, 5))
librosa.display.waveplot(y, sr=sr)
plt.show()

활용 예시
이렇게 전처리한 오디오 데이터는:

• STT (Speech to Text): HMM, RNN, Attention 모델 등에 입력
• TTS (Text to Speech): 음성 합성 파이프라인에 활용
• STS (Speech Style Transfer): 스타일 변환, 목소리 변조 등에 사용

앞으로 음성 데이터를 다룰 계획이라면 반드시 거쳐야 하는 기본 과정이니 꼭 익혀두시길 권합니다.

마무리
오늘은 Librosa로 오디오를 불러오고, 재생하고, 파형으로 시각화하는 법을 정리했습니다. 다음에는 MFCC 추출이나 Spectrogram 변환 등 더 심화된 전처리로 이어가겠습니다.

1. 전시회 개요

3월 코엑스에서 열린 2025 스마트팩토리 자동화산업전에 다녀왔습니다.
이번 전시회는 스마트팩토리, 공장자동화, 산업용 로봇, AI·IoT 솔루션 등
최신 제조업 트렌드와 기술을 한자리에서 볼 수 있는 행사였어요.

규모가 상당했고, 특히 자동화와 로봇 부문 부스가 크게 주목받는 분위기였습니다.

2. 눈길 끈 트렌드 & 솔루션

이번 전시회에서 가장 인상 깊었던 키워드들을 꼽자면 아래와 같아요:

✅ AI 기반 품질검사 시스템

• 머신비전 카메라와 딥러닝으로 불량품 자동 검출
• 실제 데모 시연 영상이 관람객들에게 인기

✅ 협동로봇(Cobot) 기술

• 로봇팔과 사람의 협업을 강화한 스마트 솔루션
• 좁은 공간에서도 작업 가능해 중소기업 문의 많음

✅ 디지털 트윈 (Digital Twin)

• 생산라인을 가상 시뮬레이션으로 구현해 생산성 분석
• 여러 부스에서 디지털 트윈을 접목한 솔루션 소개

✅ 스마트 물류 자동화

• AGV(무인운반차) 시연 부스 관람객 몰림
• IoT 센서+AI로 물류 동선 최적화

3. 개인적인 관람 소감

스마트팩토리는 더 이상 거창한 미래기술이 아니라
이미 중소기업도 적극 도입 가능한 현실적 솔루션으로 자리 잡고 있다는 걸 크게 느꼈습니다.

또한, AI와 로봇 기술이 기존 제조 현장의 문제를
효율적으로 해결해주는 모습이 인상적이었어요.

기술 트렌드를 빠르게 캐치하고 싶은 분들은
내년에도 꼭 가보시길 추천합니다!

4. 현장 사진 모음

협동로봇 시연 부스

• 정교하게 나사를 조립하던 모습이 굉장히 인상적이었어요!

스마트 물류 솔루션

• 실제 공장 환경처럼 꾸며놓은 AGV 시연존

디지털 트윈 시연 화면

• 가상으로 공장 설비를 제어하는 모습