Skip to content
@NineSixNineNine

NineSixNineNine

๐ŸŽต Andante - ์•…๊ธฐ ์—ฐ์Šต์„ ์œ„ํ•œ SNS ํ”Œ๋žซํผ

๐Ÿ“Œ ์†Œ๊ฐœ

Andante๋Š” ์Œ์•… ์—ฐ์Šต์„ ์ง€์†ํ•  ์ˆ˜ ์žˆ๋„๋ก ๋•๋Š” ์•…๊ธฐ ์—ฐ์Šต ๊ธฐ๋ฐ˜์˜ SNS ํ”Œ๋žซํผ์ž…๋‹ˆ๋‹ค.
์‚ฌ์šฉ์ž๋Š” ์ž์‹ ์˜ ์—ฐ์ฃผ ์˜์ƒ์„ ์—…๋กœ๋“œํ•˜๊ณ , ์›๊ณก๊ณผ ๋น„๊ตํ•˜์—ฌ ์ ์ˆ˜๋ฅผ ์ œ๊ณต๋ฐ›์œผ๋ฉฐ, ์ด๋ฅผ ๊ณต์œ ํ•˜๊ณ  ํ”ผ๋“œ๋ฐฑ์„ ๋ฐ›์„ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.
๊ฒŒ์ด๋ฏธํ”ผ์ผ€์ด์…˜ ์š”์†Œ(๋ฑƒ์ง€, ๋ ˆ๋ฒจ, ์ฑŒ๋ฆฐ์ง€ ์‹œ์Šคํ…œ)๋ฅผ ํ†ตํ•ด ์„ฑ์ทจ๊ฐ์„ ๋†’์ด๊ณ , ๊พธ์ค€ํ•œ ์—ฐ์Šต์„ ์œ ๋„ํ•ฉ๋‹ˆ๋‹ค.

๐Ÿง ๊ธฐํš ๋ฐฐ๊ฒฝ

๐ŸŽผ "๋‚˜๋„ ์•…๊ธฐ ํ•˜๋‚˜์ฏค์€โ€ฆ" ํ•˜์ง€๋งŒ ๊พธ์ค€ํ•œ ์—ฐ์Šต์€ ์–ด๋ ต๋‹ค.
๐ŸŽผ ์ฆ‰๊ฐ์ ์ธ ์„ฑ์ทจ๊ฐ์„ ๋А๋ผ๊ธฐ ํž˜๋“ค๊ณ , ์„ฑ์žฅ ๊ณผ์ •์„ ์‹œ๊ฐ์ ์œผ๋กœ ํ™•์ธํ•˜๊ธฐ ์–ด๋ ต๋‹ค.
๐ŸŽผ ๋น„์Šทํ•œ ์ˆ˜์ค€์˜ ์—ฐ์Šต์ž๋“ค๊ณผ ๊ต๋ฅ˜ํ•  ๊ธฐํšŒ๊ฐ€ ์ ๋‹ค.

Project ๊ธฐ๊ฐ„ : 25. 01. 06. ~ 25. 02. 21.

Andante๋Š” ์ด๋Ÿฌํ•œ ๋ฌธ์ œ๋ฅผ ํ•ด๊ฒฐํ•˜๊ธฐ ์œ„ํ•ด ์—ฐ์Šต ๊ณต์œ  & ํ”ผ๋“œ๋ฐฑ, ๊ฒŒ์ด๋ฏธํ”ผ์ผ€์ด์…˜, ๋งž์ถคํ˜• ํ๋ ˆ์ด์…˜ ๊ธฐ๋Šฅ์„ ์ œ๊ณตํ•ฉ๋‹ˆ๋‹ค.





๐Ÿ“น์˜์ƒ ํฌํŠธํด๋ฆฌ์˜ค

YouTube ์˜์ƒ



๐Ÿ‘จโ€๐Ÿ’ป ํŒ€์› ์†Œ๊ฐœ

์ด์žฌ๋ฐฑ ๋ฐฐ์„ฑํ›ˆ ๋ฐ•์„ฑ๋ฌธ
์ด์žฌ๋ฐฑ ๋ฐฐ์„ฑํ›ˆ ๋ฐ•์„ฑ๋ฌธ
FE(Leader) FullStack
Infra
FullStack
Principal Research Engineer
GitHub GitHub GitHub
์ด์ฃผํ˜„ ์œค๋ณ‘ํฌ ์˜ค์ƒํ•˜
์ด์ฃผํ˜„ ์œค๋ณ‘ํฌ ์˜ค์ƒํ•˜
BE
Development Team Leader
BE
Video Editor
BE
DBA
GitHub GitHub GitHub

๐Ÿ”ฅ ํ•ต์‹ฌ ๊ธฐ๋Šฅ

๐ŸŽฏ 1. ์ฑŒ๋ฆฐ์ง€ ๊ธฐ๋Šฅ

  • ์—ฐ์ฃผ ์˜์ƒ ์—…๋กœ๋“œ ํ›„ ์›๊ณก๊ณผ ๋น„๊ตํ•˜์—ฌ ์ ์ˆ˜ ๋ถ€์—ฌ
  • AI ๊ธฐ๋ฐ˜ ์Œ์› ๋ถ„์„ (Librosa) ์„ ํ†ตํ•ด ํ…œํฌ, ํ”ผ์น˜, ์Œ์ƒ‰ ์œ ์‚ฌ๋„ ์ธก์ •
  • ์ฑŒ๋ฆฐ์ง€ ์„ฑ๊ณต ์‹œ ์ŠคํŠธ๋ฆญ ์œ ์ง€ ๋ฐ ๊ฒฝํ—˜์น˜/๋ฑƒ์ง€ ํš๋“

๐Ÿ“ 2. ํ”ผ๋“œ ์‹œ์Šคํ…œ

  • ์—ฐ์ฃผ ์˜์ƒ์„ ํ”ผ๋“œ์— ๊ณต์œ ํ•˜๊ณ , ๋Œ“๊ธ€ & ์ข‹์•„์š”๋กœ ์†Œํ†ต
  • ์ธ๊ธฐ ์ฑŒ๋ฆฐ์ง€ ๋ฐ ๋งž์ถคํ˜• ์ถ”์ฒœ ๊ธฐ๋Šฅ

๐Ÿ† 3. ๊ฒŒ์ด๋ฏธํ”ผ์ผ€์ด์…˜

  • ์ŠคํŠธ๋ฆญ(Streak) ์‹œ์Šคํ…œ: ์—ฐ์† ์—ฐ์Šต ์‹œ ๋ณด์ƒ
  • ๋ ˆ๋ฒจ & ๋ฑƒ์ง€ ์‹œ์Šคํ…œ: ์„ฑ์ทจ๋„์— ๋”ฐ๋ฅธ ์‹œ๊ฐ์  ๋ณด์ƒ ์ œ๊ณต

๐Ÿ“ข 4. ์ถ”์ฒœ ์‹œ์Šคํ…œ

  • AI ๊ธฐ๋ฐ˜ ์„ ํ˜ธ๋„ ๋ถ„์„์„ ํ™œ์šฉํ•˜์—ฌ ๋งž์ถคํ˜• ์ฑŒ๋ฆฐ์ง€ ์ถ”์ฒœ

๐Ÿ› ๏ธ ๊ธฐ์ˆ  ์Šคํƒ

๋ถ„์•ผ ์‚ฌ์šฉ ๊ธฐ์ˆ 
Frontend React, TypeScript
Backend Spring Boot, JPA
Database MySQL, Redis
AI ๋ถ„์„ Python Librosa (์Œ์› ๋ถ„์„)
Storage AWS S3 (Presigned URL)
Messaging Redis Stream (Message Queue)
Communication Server-Sent Events (SSE)

๐ŸŽฎ ์‹œ์—ฐ ์˜์ƒ

UpLoding
Andante_์—…๋กœ๋“œ

๐Ÿ—๏ธ ์‹œ์Šคํ…œ ์•„ํ‚คํ…์ฒ˜

๐Ÿ”— 1. ์‚ฌ์šฉ์ž(User)์™€ ์ธ์ฆ ์‹œ์Šคํ…œ

  • ๋„ค์ด๋ฒ„, ์นด์นด์˜ค ์ธ์ฆ ์—ฐ๋™
    • ์‚ฌ์šฉ์ž๋Š” ๋„ค์ด๋ฒ„, ์นด์นด์˜ค ์†Œ์…œ ๋กœ๊ทธ์ธ์„ ํ†ตํ•ด ์ธ์ฆ ๊ฐ€๋Šฅ.
    • ์ธ์ฆ๋œ ์‚ฌ์šฉ์ž๋Š” React ํ”„๋ก ํŠธ์—”๋“œ์™€ ์ƒํ˜ธ์ž‘์šฉํ•˜์—ฌ ์„œ๋น„์Šค๋ฅผ ์ด์šฉ.

๐ŸŽจ 2. ํ”„๋ก ํŠธ์—”๋“œ (React)

  • ์ฃผ์š” ๊ธฐ์ˆ  ์Šคํƒ

    • React: UI ํ”„๋ ˆ์ž„์›Œํฌ
    • TypeScript: ์•ˆ์ •์ ์ธ ํƒ€์ž… ๊ธฐ๋ฐ˜ ๊ฐœ๋ฐœ
    • Redux (or Zustand ๋“ฑ): ์ƒํƒœ ๊ด€๋ฆฌ
    • Axios: API ํ†ต์‹ 
    • Styled-components ๋˜๋Š” Tailwind: UI ์Šคํƒ€์ผ๋ง
  • ์—ญํ• 

    • ์‚ฌ์šฉ์ž ์ธํ„ฐํŽ˜์ด์Šค๋ฅผ ์ œ๊ณตํ•˜๊ณ , ๋ฐฑ์—”๋“œ API์™€ ํ†ต์‹ .
    • AWS S3์— ์˜์ƒ ํŒŒ์ผ์„ ์—…๋กœ๋“œํ•  ์ˆ˜ ์žˆ๋„๋ก Presigned URL ์‚ฌ์šฉ.

๐Ÿ›  3. ๋ฐฑ์—”๋“œ (Spring Boot)

  • ์ฃผ์š” ๊ธฐ์ˆ  ์Šคํƒ

    • Spring Boot: ์ „์ฒด ์„œ๋ฒ„ ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์„ ๊ด€๋ฆฌ.
    • Spring Security: ์ธ์ฆ ๋ฐ ๋ณด์•ˆ ๊ด€๋ฆฌ.
    • JPA (Hibernate): MySQL๊ณผ ๋ฐ์ดํ„ฐ ์—ฐ๋™.
    • JWT: ์‚ฌ์šฉ์ž ์ธ์ฆ ๋ฐ ์„ธ์…˜ ์œ ์ง€.
  • ์—ญํ• 

    • ํ”„๋ก ํŠธ์—”๋“œ ์š”์ฒญ์„ ์ฒ˜๋ฆฌํ•˜๊ณ , ์œ ์‚ฌ๋„ ๋ถ„์„ ์š”์ฒญ์„ ๋ฉ”์‹œ์ง€ ํ(Redis Stream)๋กœ ์ „๋‹ฌ.

๐Ÿ—„ 4. ๋ฐ์ดํ„ฐ ์ €์žฅ์†Œ (AWS S3 & MySQL)

  • AWS S3

    • ์‚ฌ์šฉ์ž๊ฐ€ ์—…๋กœ๋“œํ•œ ์—ฐ์ฃผ ์˜์ƒ์„ ์ €์žฅ.
    • Presigned URL์„ ํ™œ์šฉํ•˜์—ฌ ํŠธ๋ž˜ํ”ฝ์„ ์ตœ์ ํ™”.
  • MySQL

    • ์‚ฌ์šฉ์ž ์ •๋ณด, ์ฑŒ๋ฆฐ์ง€ ๊ธฐ๋ก, ์ ์ˆ˜ ๋ฐ์ดํ„ฐ๋ฅผ ์ €์žฅ.

๐Ÿš€ 5. ์œ ์‚ฌ๋„ ๋ถ„์„ ์‹œ์Šคํ…œ (Redis Stream & AI ๋ถ„์„)

๐Ÿ”ด Redis Stream (Message Queue)

  • Spring Boot์—์„œ Redis Stream์œผ๋กœ ์œ ์‚ฌ๋„ ๋ถ„์„ ์š”์ฒญ์„ ์ „์†กํ•˜๋ฉด, ์—ฌ๋Ÿฌ ๊ฐœ์˜ AI ๋ถ„์„ ์„œ๋ฒ„๊ฐ€ ์ด๋ฅผ ์†Œ๋น„(Consume)ํ•˜์—ฌ ๊ฒฐ๊ณผ๋ฅผ ์ƒ์„ฑ.

  • ํŠน์ง•

    • ์š”์ฒญ์„ ๋น„๋™๊ธฐ ์ฒ˜๋ฆฌํ•˜์—ฌ ์„œ๋ฒ„ ๋ถ€ํ•˜๋ฅผ ์ค„์ž„.
    • ์—ฌ๋Ÿฌ ๊ฐœ์˜ Consumer(์œ ์‚ฌ๋„ ๋ถ„์„ ์„œ๋ฒ„) ๊ฐ€ ๋ณ‘๋ ฌ๋กœ ์ž‘์—…ํ•˜์—ฌ ์„ฑ๋Šฅ ์ตœ์ ํ™”.

๐Ÿ”ต ์œ ์‚ฌ๋„ ๋ถ„์„ AI (Python)

  • Librosa, Numpy ๋“ฑ์˜ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ์œ ์‚ฌ๋„ ๋ถ„์„ ์ˆ˜ํ–‰.

  • ๋น ๋ฅธ ์‹ค์‹œ๊ฐ„ ์ฒ˜๋ฆฌ, ๊ตฌ๊ฐ„ ๋ณ„ ์œ ์‚ฌ๋„ ๋“ฑ์„ ํ†ตํ•ด ์œ ์ € ๊ฒฝํ—˜์„ ๊ฐœ์„ 

  • ์œ ์‚ฌ๋„ ๋ถ„์„ ๋ฐฉ๋ฒ•๋ก 

    1. Onset Detect: ํ…œํฌ ๋ถ„์„.
    2. Chroma, Piptrack: ํ”ผ์น˜ ๋ถ„์„.
    3. DTW(Dynamic time warping), Overlap: ์‹œ๊ฐ„ ์ถ• ๋ณด์ •.
  • ๋ถ„์„ ๊ฒฐ๊ณผ๋Š” Redis Stream์„ ํ†ตํ•ด ์ „๋‹ฌ๋˜๊ณ , ์ดํ›„ ๋ฐฑ์—”๋“œ(Spring Boot)๊ฐ€ ์ตœ์ข… ๊ฒฐ๊ณผ๋ฅผ ํด๋ผ์ด์–ธํŠธ(React)๋กœ ์ „์†ก.


๐ŸŽฏ ์•„ํ‚คํ…์ฒ˜์˜ ๊ฐ•์ 

โœ… ๋น„๋™๊ธฐ ์œ ์‚ฌ๋„ ๋ถ„์„: Redis Stream์„ ํ™œ์šฉํ•˜์—ฌ ๋น ๋ฅธ ์‘๋‹ต ์ฒ˜๋ฆฌ.
โœ… ํ™•์žฅ์„ฑ ๋†’์€ ์„ค๊ณ„: AI ๋ถ„์„ ์„œ๋ฒ„๋ฅผ ๋Š˜๋ ค ๋ถ€ํ•˜ ๋ถ„์‚ฐ ๊ฐ€๋Šฅ.
โœ… ํด๋ผ์šฐ๋“œ ์Šคํ† ๋ฆฌ์ง€ (AWS S3) ํ™œ์šฉ: ์•ˆ์ •์ ์ธ ์˜์ƒ ์—…๋กœ๋“œ.
โœ… ์‚ฌ์šฉ์ž ์นœํ™”์  ์ธ์ฆ ์‹œ์Šคํ…œ: ๋„ค์ด๋ฒ„/์นด์นด์˜ค ๋กœ๊ทธ์ธ ์ง€์›.


๐Ÿ“ˆ ๊ธฐ๋Œ€ ํšจ๊ณผ

โœ… ์„ฑ์ทจ๊ฐ์„ ํ†ตํ•œ ์—ฐ์Šต ์ง€์†์„ฑ ํ–ฅ์ƒ
โœ… ์Œ์•… ์ปค๋ฎค๋‹ˆํ‹ฐ ํ˜•์„ฑ & ์‚ฌ์šฉ์ž ๊ฐ„ ๊ต๋ฅ˜ ํ™œ์„ฑํ™”
โœ… AI ๊ธฐ๋ฐ˜ ๋ฐ์ดํ„ฐ ์ถ”์ฒœ์œผ๋กœ ๊ฐœ์ธ ๋งž์ถคํ˜• ์ฑŒ๋ฆฐ์ง€ ์ œ๊ณต


๐Ÿš€ ํ–ฅํ›„ ๊ฐœ์„  ๋ฐฉํ–ฅ

๐Ÿ“Œ ์œ ์‚ฌ๋„ ๋ถ„์„ ์•Œ๊ณ ๋ฆฌ์ฆ˜ ๊ฐœ์„ 
๐Ÿ“Œ ๋‹ค์–‘ํ•œ ์•…๊ธฐ ์ถ”๊ฐ€ ์ง€์›
๐Ÿ“Œ ๋Œ€์ค‘ ๊ฐ€์š” ์ฑŒ๋ฆฐ์ง€ ๋„์ž… (์ €์ž‘๊ถŒ ๊ณ„์•ฝ ์ง„ํ–‰)
๐Ÿ“Œ ์‚ฌ์šฉ์ž ํ”ผ๋“œ๋ฐฑ์„ ๋ฐ˜์˜ํ•œ UI/UX ๊ฐœ์„ 
๐Ÿ“Œ ๊ธ€๋กœ๋ฒŒ ์‹œ์žฅ ์ง„์ถœ ๊ณ ๋ ค


๐Ÿ“ข Q&A

Q. ์œ ์‚ฌ๋„ ๋ถ„์„ ์ •ํ™•๋„๋Š”?
A. ์Œ์› ์—…๋กœ๋“œ ์‹œ 3050%, ์—ฐ์ฃผ ์˜์ƒ ์—…๋กœ๋“œ ์‹œ 6090% ์ •ํ™•๋„๋ฅผ ๊ฐ€์ง‘๋‹ˆ๋‹ค.

Q. ์ˆ˜์ต ๋ชจ๋ธ์€?
A. ์œ ์‚ฌ๋„ ๋ถ„์„ ์š”์ฒญ ์‹œ ๊ด‘๊ณ ๋ฅผ ์‹œ์ฒญํ•˜๋„๋ก ํ•˜๋Š” ๋ฐฉ์‹์ž…๋‹ˆ๋‹ค.

Q. ์—…๋กœ๋“œ ์šฉ๋Ÿ‰ ์ œํ•œ์€?
A. ์ตœ๋Œ€ 500MB๋กœ ์„ค์ •๋˜์–ด ์žˆ์œผ๋ฉฐ, 8๋ถ„ ๊ธธ์ด์˜ ์—ฐ์ฃผ๋„ ์ง€์›๋ฉ๋‹ˆ๋‹ค.

Popular repositories Loading

  1. Back-end Back-end Public

    Java 2

  2. Front-end Front-end Public

    TypeScript 2

  3. .github .github Public

Repositories

Showing 3 of 3 repositories

People

This organization has no public members. You must be a member to see who’s a part of this organization.

Top languages

Loadingโ€ฆ

Most used topics

Loadingโ€ฆ