Skip to content
This repository was archived by the owner on Feb 11, 2026. It is now read-only.

Latest commit

Β 

History

History
103 lines (64 loc) Β· 3.71 KB

File metadata and controls

103 lines (64 loc) Β· 3.71 KB

English

Open Captions Overlay

Sample

Open Captions OverlayλŠ” μžλ§‰μ„ 방솑 μ†‘μΆœ ν”„λ‘œκ·Έλž¨(OBS, XSplit λ“±)에 ν‘œμ‹œν•˜κΈ° μœ„ν•œ μ„œλΉ„μŠ€μž…λ‹ˆλ‹€.

이 μ„œλΉ„μŠ€μ„ μ‚¬μš©ν•˜λ©΄ 마이크λ₯Ό 톡해 λ§ν•œ λ‚΄μš©μ„ 방솑 화면에 μ‹€μ‹œκ°„μœΌλ‘œ μžλ§‰μ²˜λŸΌ ν‘œμ‹œν•  수 μžˆμŠ΅λ‹ˆλ‹€.

이 ν”„λ‘œμ νŠΈλŠ” Closed Captions for Streamsμ—μ„œ μ˜κ°μ„ λ°›μ•„ μ œμž‘λ˜μ—ˆμŠ΅λ‹ˆλ‹€.

데λͺ¨ λ™μ˜μƒ

μ‚¬μš©λ°©λ²•

1. μŒμ„± 인식 μ„€μ •

  1. μŒμ„± 인식 μ‚¬μ΄νŠΈμ— "μ΅œμ‹  버전 크둬" 으둜 μ ‘μ†ν•©λ‹ˆλ‹€.
  2. μŒμ„± 인식 μ‚¬μ΄νŠΈμ— λ°©μ†‘ν•˜κ³ μž ν•˜λŠ” νŠΈμœ„μΉ˜ κ³„μ •μœΌλ‘œ λ‘œκ·ΈμΈν•©λ‹ˆλ‹€.
  3. μŒμ„± 인식 μ‚¬μ΄νŠΈμ˜ 인식 μ‹œμž‘ λ²„νŠΌμ„ ν΄λ¦­ν•˜κ³  마이크 μ‚¬μš© κΆŒν•œμ„ ν—ˆμš©ν•©λ‹ˆλ‹€.
  4. μŒμ„± 인식 μ‚¬μ΄νŠΈμ—μ„œ λ§ˆμ΄ν¬μ— λ§ν•œ λ‚΄μš©μ„ μΈμ‹ν•œ λ‚΄μš©μ΄ 좜λ ₯λ˜λŠ” 것을 ν™•μΈν•©λ‹ˆλ‹€.

λ§ˆμ΄ν¬μ— λ§ν•œ λ‚΄μš©μ΄ μ •μƒμ μœΌλ‘œ μΈμ‹λ˜μ–΄ μ‚¬μ΄νŠΈμ— 좜λ ₯λœλ‹€λ©΄, μŒμ„± 인식 섀정을 λͺ¨λ‘ μ™„λ£Œν•œ κ²ƒμž…λ‹ˆλ‹€.

2. 방솑 μ†‘μΆœ ν”„λ‘œκ·Έλž¨ μ„€μ •

3.1. OBS Studio

  1. μŒμ„± 인식 μ‚¬μ΄νŠΈμ—μ„œ ν‘œμ‹œλ˜λŠ” μ˜€λ²„λ ˆμ΄ μ£Όμ†Œλ₯Ό OBS에 "λΈŒλΌμš°μ €" μ†ŒμŠ€μ˜ URL둜 λ“±λ‘ν•©λ‹ˆλ‹€.
  2. μΊ”λ²„μŠ€ 크기 1280x720μ—μ„œ ꢌμž₯ν•˜λŠ” λΈŒλΌμš°μ € μ†ŒμŠ€ λ„ˆλΉ„μ™€ λ†’μ΄λŠ” 840, 210μž…λ‹ˆλ‹€.

3.1. XSplit Broadcaster

  1. μŒμ„± 인식 μ‚¬μ΄νŠΈμ—μ„œ ν‘œμ‹œλ˜λŠ” μ˜€λ²„λ ˆμ΄ μ£Όμ†Œλ₯Ό μ›Ή νŽ˜μ΄μ§€ μ†ŒμŠ€ μΆ”κ°€ μ°½μ—μ„œ URL둜 λ“±λ‘ν•©λ‹ˆλ‹€.
  2. μΊ”λ²„μŠ€ 크기 1280x720μ—μ„œ ꢌμž₯ν•˜λŠ” λΈŒλΌμš°μ € μ†ŒμŠ€ λ„ˆλΉ„μ™€ λ†’μ΄λŠ” 840, 210μž…λ‹ˆλ‹€.

4. μ„€μ • 마무리

ν•΄λ‹Ή 섀정을 μ™„λ£Œν•œ ν›„, μ‹€μ œ λ°©μ†‘μ—μ„œ μžλ§‰μ„ μ‚¬μš©ν•˜μ‹œκ³ μž ν•  λ•Œμ—λŠ” μŒμ„± 인식 μ‚¬μ΄νŠΈμ— μ ‘μ†ν•˜μ…”μ„œ 인식 μ‹œμž‘ λ²„νŠΌμ„ ν΄λ¦­ν•˜μ‹œλ©΄ λ©λ‹ˆλ‹€.

λ§Œμ•½ μ‚¬μš©μ„ μ’…λ£Œν•˜μ‹œλ €λ©΄ μŒμ„± 인식 μ‚¬μ΄νŠΈμ˜ 인식 μ’…λ£Œ λ²„νŠΌμ„ ν΄λ¦­ν•˜κ±°λ‚˜ 창을 μ’…λ£Œν•©λ‹ˆλ‹€.

μ»€μŠ€ν„°λ§ˆμ΄μ§•

1. μ˜€λ²„λ ˆμ΄μ— ν‘œμ‹œλ˜λŠ” ν”„λ‘œν•„ 이미지 λ³€κ²½

방솑 μ†‘μΆœ ν”„λ‘œκ·Έλž¨μ—μ„œ Open Captions Overlay λΈŒλΌμš°μ € μ†ŒμŠ€μ˜ CSS에 λ‹€μŒ λ‚΄μš©μ„ μΆ”κ°€ν•©λ‹ˆλ‹€.

:root {
    --profile-url: url(https://i.postimg.cc/Qtsn3rc7/profile.png);
}

μ—¬κΈ°μ„œ https://i.postimg.cc/Qtsn3rc7/profile.png 값을 λ³€κ²½ν•  ν”„λ‘œν•„ μ΄λ―Έμ§€μ˜ URL둜 λ³€κ²½ν•΄μ£Όμ„Έμš”.

(이미지 URL은 postimages.org와 같은 이미지 ν˜ΈμŠ€νŒ… μ„œλΉ„μŠ€λ₯Ό 톡해 생성할 수 μžˆμŠ΅λ‹ˆλ‹€.)

2. μ˜€λ²„λ ˆμ΄μ— ν‘œμ‹œλ˜λŠ” κ°•μ‘° 색상 λ³€κ²½

방솑 μ†‘μΆœ ν”„λ‘œκ·Έλž¨μ—μ„œ Open Captions Overlay λΈŒλΌμš°μ € μ†ŒμŠ€μ˜ CSS에 λ‹€μŒ λ‚΄μš©μ„ μΆ”κ°€ν•©λ‹ˆλ‹€.

:root {
    --accent-color: #95BBDF;
}

μ—¬κΈ°μ„œ #95BBDF 값을 λ³€κ²½ν•  κ°•μ‘° 색상 μ½”λ“œλ‘œ λ³€κ²½ν•΄μ£Όμ„Έμš”.

3. μ˜€λ²„λ ˆμ΄μ˜ 바탕이 투λͺ…ν•˜μ§€ μ•Šμ€ 경우

방솑 μ†‘μΆœ ν”„λ‘œκ·Έλž¨μ—μ„œ Open Captions Overlay λΈŒλΌμš°μ € μ†ŒμŠ€μ˜ CSS에 λ‹€μŒ λ‚΄μš©μ„ μΆ”κ°€ν•©λ‹ˆλ‹€.

body {
    background-color: rgba(0, 0, 0, 0);
    margin: 0px auto;
    overflow: hidden;
}

Development

μ΄ν•˜μ˜ λ‚΄μš©μ€ 일반 μ‚¬μš©μžκ°€ μ•„λ‹Œ 개발자λ₯Ό μœ„ν•œ λ‚΄μš©μž…λ‹ˆλ‹€.

Init project

docker-compose run --rm backend python manage.py db upgrade

Reinstall dependencies

docker-compose run --rm backend pipenv lock --pre
docker-compose build --force-rm

License

λ³Έ ν”„λ‘œμ νŠΈλŠ” MIT License ν•˜μ— μ œκ³΅λ©λ‹ˆλ‹€.