Skip to content
@TEAM-WEBEYE

TEAM-WEBEYE

πŸ‘“ KUSITMS 31th MEETUP PROJECT VOIM

μ‹œκ°μž₯애인이 온라인 μ‡Όν•‘ μ‹œ 이미지 정보λ₯Ό μ‰½κ²Œ νŒŒμ•…ν•˜κ³  개인 λ§žμΆ€ν˜• 접근성을 μ œκ³΅ν•˜λŠ” 크둬 ν™•μž₯ ν”„λ‘œκ·Έλž¨

보이지 μ•Šμ•„λ„,λ³΄μž„μ΄λ‹ˆκΉŒ.

α„‹α…°α†Έ α„Šα…₯α†·α„‚α…¦α„‹α…΅α†―

πŸ”§ 크둬 μ΅μŠ€ν…μ…˜ λ‹€μš΄λ‘œλ“œ : https://chromewebstore.google.com/detail/voim/iofbhhcbidmfcmpjndglaignlfdojpcm

πŸ‘Έ νŒ€ μ†Œκ°œ

πŸ“ γ€Šν˜Έκ³΅μ£Όμ™€ 일곱 ν”„λ¦°μ„ΈμŠ€γ€‹

μš°λ¦¬νŒ€μ˜ 청일점인 졜호λ₯Ό μœ„ν•΄ λͺ¨λ‘κ°€ 곡주가 λ˜μ—ˆλ‹€β€¦

μœ μΌν•œ 청일점 ν˜Έμ™€ 각자의 κ°œμ„±κ³Ό μ‹€λ ₯을 κ°€μ§„ 일곱 λͺ…μ˜ ν”„λ¦°μ„ΈμŠ€λ“€μ΄ ν•¨κ»˜ λ§Œλ“€μ–΄κ°€λŠ” μ‘°ν™”λ‘­κ³  μœ μΎŒν•œ νŒ€μ›Œν¬ λ₯Ό μƒμ§•ν•©λ‹ˆλ‹€.

탐소ᄀᅒ

KakaoTalk_Photo_2025-05-29-22-55-04

🧩 μ£Όμš” κΈ°λŠ₯

κΈ°λŠ₯ λͺ… μ„€λͺ…
초기 μ˜¨λ³΄λ”© νŒμ—… μ‚¬μš©μžκ°€ ν™•μž₯ ν”„λ‘œκ·Έλž¨μ„ 처음 μ„€μΉ˜ν–ˆμ„ λ•Œ, μ£Όμš” κΈ°λŠ₯을 λ‹¨κ³„λ³„λ‘œ μ•ˆλ‚΄ν•©λ‹ˆλ‹€.
λ‚΄ 정보 μ„€μ • μ‚¬μš©μžμ˜ μΆœμƒ 연도와 성별, μ•ŒλŸ¬μ§€ 정보λ₯Ό μž…λ ₯ν•˜μ—¬ κ°œμΈν™”λœ 정보 제곡의 κΈ°λ°˜μ„ λ§ˆλ ¨ν•©λ‹ˆλ‹€.
κ³ λŒ€λΉ„ λͺ¨λ“œ 배경색과 κΈ€μžμƒ‰μ„ μ„€μ •ν•˜μ—¬ 가독성을 높이고 눈의 ν”Όλ‘œλ₯Ό μ€„μ΄λŠ” λͺ¨λ“œμž…λ‹ˆλ‹€.
검은색 배경에 흰색 κΈ€μžλ₯Ό μ œκ³΅ν•©λ‹ˆλ‹€.
κΈ€μž 크기 및 λ‘κ»˜ λ°”κΎΈκΈ° ν…μŠ€νŠΈ 크기λ₯Ό 5단계(μ•„μ£Ό μž‘κ²Œ, μž‘κ²Œ, κΈ°λ³Έ, 크게, μ•„μ£Ό 크게)둜 μ‘°μ ˆν•˜μ—¬ μ‹œκ° 보쑰 κΈ°λŠ₯을 μ œκ³΅ν•©λ‹ˆλ‹€.
ν…μŠ€νŠΈμ˜ λ‘κ»˜λ₯Ό 'μ–‡κ²Œ', 'κΈ°λ³Έ', 'λ‘κ»κ²Œ' 쀑 μ„ νƒν•˜μ—¬ 가독성을 μ‘°μ ˆν•  수 μžˆμŠ΅λ‹ˆλ‹€.
이미지 λΆ„μ„ν•˜κΈ° (λͺ¨λ“  도메인) 이미지 μœ„μ— 마우슀λ₯Ό 올릴 μ‹œ, 이미지 뢄석 λ²„νŠΌμ΄ λ‚˜νƒ€λ‚˜ 이미지 뢄석을 μ‹€ν–‰ν•©λ‹ˆλ‹€.
AIκ°€ 이미지λ₯Ό λΆ„μ„ν•œ ν›„ ν•΄λ‹Ή λ‚΄μš©μ„ ν…μŠ€νŠΈλ‘œ λ³΄μ—¬μ€λ‹ˆλ‹€.
단좕킀 μ•ˆλ‚΄ μ„œλΉ„μŠ€μ—μ„œ μ‚¬μš© κ°€λŠ₯ν•œ 단좕킀 정보λ₯Ό μ•ˆλ‚΄ν•©λ‹ˆλ‹€.
상세정보 μš”μ•½ μ œν’ˆ νŽ˜μ΄μ§€μ— 접속 μ‹œ, μƒμ„ΈνŽ˜μ΄μ§€μ— μžˆλŠ” 이미지 정보λ₯Ό μžλ™μœΌλ‘œ λΆ„μ„ν•˜μ—¬ ν…μŠ€νŠΈλ‘œ μš”μ•½ν•΄ λ³΄μ—¬μ€λ‹ˆλ‹€.
4κ°€μ§€ μΉ΄ν…Œκ³ λ¦¬λ‘œ ꡬ쑰화해 ν•΅μ‹¬μ •λ³΄λ§Œ μ „λ‹¬ν•©λ‹ˆλ‹€.
μ„±λΆ„ μ•ˆλ‚΄ κΈ°λŠ₯ 성뢄이 μ€‘μš”ν•œ μ‹ν’ˆ, ν™”μž₯ν’ˆ, 건강기λŠ₯μ‹ν’ˆμ— ν•œν•˜μ—¬ λ‹€μŒκ³Ό 같은 정보λ₯Ό μ œκ³΅ν•©λ‹ˆλ‹€:

[μ‹ν’ˆ]
- μƒν’ˆμ˜ νŠΉμ • μ˜μ–‘μ„±λΆ„(ν•˜λ£¨ ꢌμž₯치 κΈ°μ€€ 40% 이상)이 ν¬ν•¨λ˜μ–΄ μžˆμ„ 경우 μ£Όμ˜ν‘œμ‹œλ₯Ό μ œκ³΅ν•©λ‹ˆλ‹€.
- μƒν’ˆμ— μ‚¬μš©μžκ°€ μž…λ ₯ν•œ μ•Œλ ˆλ₯΄κΈ°κ°€ μžˆμ„ 경우 κ°•μ‘°ν•΄ μ œκ³΅ν•©λ‹ˆλ‹€.

[ν™”μž₯ν’ˆ]
- μƒν’ˆμ— 20κ°€μ§€ μ£Όμ˜μ„±λΆ„ 및 μ•Œλ ˆλ₯΄κΈ° 유발 성뢄이 ν¬ν•¨λ˜μ–΄ μžˆμ„ 경우 μ•ˆλ‚΄ν•©λ‹ˆλ‹€.

[건강기λŠ₯μ‹ν’ˆ]
- ν•΄λ‹Ή 건강기λŠ₯μ‹ν’ˆμ˜ 성뢄이 μ œκ³΅ν•˜λŠ” 효λŠ₯에 λŒ€ν•œ 정보λ₯Ό μ œκ³΅ν•©λ‹ˆλ‹€.
μž₯λ°”κ΅¬λ‹ˆ μš”μ•½ μž₯λ°”κ΅¬λ‹ˆμ— λ‹΄κΈ΄ μƒν’ˆμ˜ 이름, μˆ˜λŸ‰, 가격 λ“± 핡심 정보λ₯Ό μš”μ•½ν•˜μ—¬ 정리해 λ³΄μ—¬μ€λ‹ˆλ‹€.

VOIM DEVELOPMENT

πŸ’½ ERD

erd

πŸ“ System Architecture

KakaoTalk_Photo_2025-05-29-21-49-52

πŸ“ API λͺ…μ„Έμ„œ

Swagger

πŸ› οΈ 기술 μŠ€νƒ

Frontend

기술 μŠ€νƒ μ„€λͺ…
React - λ³΅μž‘ν•œ UI와 μƒνƒœ 관리λ₯Ό 효율적으둜 처리 κ°€λŠ₯
- 크둬 μ΅μŠ€ν…μ…˜μ„ μ›Ή κ°œλ°œν•˜λ“―μ΄ κ΅¬ν˜„ κ°€λŠ₯
Typescirpt - 버그λ₯Ό 쀄이고, ν˜‘μ—…κ³Ό μœ μ§€λ³΄μˆ˜ μ‰½κ²Œ κ°€λŠ₯
Tailwind - λΉ λ₯Έ λ””μžμΈ 토큰 섀정을 톡해 λ””μžμΈ μ‹œμŠ€ν…œ κ΅¬ν˜„ κ°€λŠ₯
webpack - λ‹€μ–‘ν•œ 섀정을 톡해 μ»€μŠ€ν„°λ§ˆμ΄μ§•μ΄ κ°€λŠ₯ν•œ, μžμœ λ„κ°€ 높은 λͺ¨λ“ˆ λ²ˆλ“€λŸ¬

Backend

기술 μŠ€νƒ μ„€λͺ…
Spring Boot 3.X - μ΅œμ‹  기술 적용 κ°€λŠ₯ (μƒˆλ‘œμš΄ κΈ°λŠ₯ 및 μ„±λŠ₯ κ°œμ„ )
- μœ μ§€λ³΄μˆ˜μ„±κ³Ό ν™•μž₯μ„± κ³ λ €
- Java 21 μ§€μ›μœΌλ‘œ μ„±λŠ₯ μ΅œμ ν™” 및 μ΅œμ‹  κΈ°λŠ₯ ν™œμš© κ°€λŠ₯
Spring AI - Spring 기반 ν”„λ‘œμ νŠΈμ—μ„œ OpenAI의 ν˜ΈμΆœμ„ μ†μ‰½κ²Œ κ΅¬ν˜„ν•˜κΈ° μœ„ν•΄ λ„μž…
- κΈ°μ‘΄ μ—¬λŸ¬ DTOλ₯Ό μž‘μ„±ν•΄μ•Ό ν–ˆλ˜ 것과 달리, κ°„λ‹¨ν•˜κ³  κ°€λ…μ„±μžˆλŠ” κ΅¬ν˜„ κ°€λŠ₯
GitHub Actions + Docker - CI/CD μžλ™ν™”λ₯Ό ν†΅ν•œ 배포 νš¨μœ¨μ„± 증가
- μ»¨ν…Œμ΄λ„ˆν™”λ₯Ό ν†΅ν•œ ν™˜κ²½ 일관성 μœ μ§€ 및 배포 용이
Open API - 곡곡 데이터 OPEN APIλ₯Ό ν™œμš©ν•˜μ—¬ μ‹ν’ˆ μ˜μ–‘ μ„±λΆ„ 및 λΉ„μœ¨, λ ˆμ‹œν”Ό 데이터 ν™œμš©
Open AI - Open AIλ₯Ό ν™œμš©ν•œ μ œν’ˆ 정보 이미지 뢄석
CLOVA X - CLOVA Xλ₯Ό ν™œμš©ν•œ 리뷰 데이터 μš”μ•½ 및 긍뢀정 뢄석
- ν•œκ΅­μ–΄ νŠΉν™” λͺ¨λΈ 기반의 고정확도 μš”μ•½ 및 의미 μΆ”μΆœ
MySQL - μ•ˆμ •μ„±κ³Ό μ„±λŠ₯이 κ²€μ¦λœ μ˜€ν”ˆμ†ŒμŠ€ κ΄€κ³„ν˜• λ°μ΄ν„°λ² μ΄μŠ€
- Spring Bootμ™€μ˜ ν˜Έν™˜μ„±μ΄ λ›°μ–΄λ‚˜κ³  운영 ν™˜κ²½μ— 적합
JPA - 객체 μ§€ν–₯적인 λ°©μ‹μœΌλ‘œ λ°μ΄ν„°λ² μ΄μŠ€ μ ‘κ·Ό 둜직 κ΅¬ν˜„ κ°€λŠ₯
- 반볡적인 SQL μž‘μ„± 없이 생산성과 μœ μ§€λ³΄μˆ˜μ„± ν–₯상

ν˜‘μ—… 및 기타 도ꡬ

  • Git, GitHub, Notion, Figma

πŸ“ 폴더 ꡬ쑰

frontend

src/
β”œβ”€β”€ πŸ“‚ assets/ #img μ €μž₯ 폴더
β”œβ”€β”€ πŸ“‚ background/ #크둬 μ΅μŠ€ν…μ…˜μ˜ background.js κ΄€λ ¨ 둜직 폴더
β”œβ”€β”€ πŸ“‚ components/
β”œβ”€β”€ πŸ“‚ constants/ # enum λ“± μƒμˆ˜κ°’ μ €μž₯ 폴더
β”œβ”€β”€ πŸ“‚ content/ # 크둬 μ΅μŠ€ν…μ…˜μ˜ content.js κ΄€λ ¨ 둜직 폴더 
β”œβ”€β”€ πŸ“‚ contexts/ # ν…Œλ§ˆ 적용 context μ €μž₯ 폴더
β”œβ”€β”€ πŸ“‚ css/
β”œβ”€β”€ πŸ“‚ hooks/ # μ»€μŠ€ν…€ ν›…(useXXX)을 μ •μ˜ν•˜λŠ” 폴더
β”œβ”€β”€ πŸ“‚ iframe/  # 크둬 μ΅μŠ€ν…μ…˜μ„ 톡해 νŽ˜μ΄μ§€ DOM에 μ‚½μž…λ˜λŠ” iframeκ΄€λ ¨ μ½”λ“œ
β”œβ”€β”€ πŸ“‚ tabs/
β”‚   └── πŸ“‚ myInfo/ # λ‚΄ 정보 κ΄€λ ¨ UI 및 κΈ°λŠ₯을 λ‹΄λ‹Ήν•˜λŠ” 폴더
β”œβ”€β”€ πŸ“‚ types/ # λͺ¨λ“ˆ κ΄€λ ¨ μ „μ—­ νƒ€μž… μ •μ˜ 폴더
└── πŸ“‚ utils/ # λ²”μš© μœ ν‹Έ ν•¨μˆ˜λ“€μ„ λͺ¨μ•„λ‘” 폴더

backend

πŸ“¦ backend
   ┣━ πŸ“‚ domain
   ┃   ┣━ πŸ“‚ application         # λΉ„μ¦ˆλ‹ˆμŠ€ 둜직 μ„œλΉ„μŠ€ 계측
   ┃   ┣━ πŸ“‚ domain              # μ—”ν‹°ν‹°, VO, 도메인 λͺ¨λΈ
   ┃   ┣━ πŸ“‚ dto
   ┃   ┃   ┣━ πŸ“‚ request         # ν΄λΌμ΄μ–ΈνŠΈ μš”μ²­ DTO
   ┃   ┃   ┗━ πŸ“‚ response        # ν΄λΌμ΄μ–ΈνŠΈ 응닡 DTO
   ┃   ┣━ πŸ“‚ infrastructure      # AI Client, μ „μ²˜λ¦¬ λ“± μ™ΈλΆ€ μ‹œμŠ€ν…œ 연동
   ┃   ┃   ┗━ πŸ“‚ mapper          # DB λ§€ν•‘, μ—”ν‹°ν‹° ↔ DTO λ³€ν™˜ λ“±
   ┃   ┣━ πŸ“‚ persistent          # Repository λ“± DB μ ‘κ·Ό 계측
   ┃   ┗━ πŸ“‚ presentation        # Controller 계측 (API μš”μ²­ 처리)
   ┃       ┗━ πŸ“‚ swagger         # Swagger API λ¬Έμ„œ μ„€μ •
   ┣━ πŸ“‚ global                  # 곡톡 μœ ν‹Έλ¦¬ν‹°, μ˜ˆμ™Έ, μ„€μ • λ“±
   ┗━ πŸ“„ BackendApplication.java # Spring Boot 메인 클래슀 (μ•± μ§„μž…μ )

πŸ–₯️ Developer Members

λ°•μˆ˜λ―Ό 졜호 μž„μ—°μ§€ μ£Όμ •λΉˆ
frontend frontend backend backend`

Pinned Loading

  1. EXTENSION EXTENSION Public

    πŸ‘€ Kusitms 31st WEBEYE Extension Repository πŸ‘€

    TypeScript 3

  2. SERVER SERVER Public

    πŸ‘€ Kusitms 31st WEBEYE Server Repository πŸ‘€

    Java 1

Repositories

Showing 3 of 3 repositories

Top languages

Loading…

Most used topics

Loading…