Featured Work
DASH
์์๊ณต์ธ์ ์ํ ์ฟ ํฐ ๋ฐ๊ธ ์๋น์ค
Project Gallery
๊ฐ๋ก ์คํฌ๋กค๋ก ๋ ๋ณด๊ธฐOverview
๋ํ๊ต ๊ฐ์์ฌ์ ๊ฐ ๋ฐ์ํ๋ ์ ๋ก์ฌํญ์ ํด๊ฒฐํ๊ธฐ ์ํด ์ฟ ํฐ ๋ฐ๊ธ ์๋น์ค DASH๋ฅผ ๊ฐ๋ฐํ์ต๋๋ค.
Responsibilities
- ยท UX/UI ๋์์ธ
- ยท ํ๋ก ํธ์๋ ๊ฐ๋ฐ
Tech Stack
Problem & Goals
Problem Context
- ๋ฐํ ์์ฒญ์ (์ํํ, ์ดํ์ํ ๋ฑ): ์ฟ ํฐ ์์ ์์ฒด์ ์ ํ์, ์
์ฅ์ ๊ฐ๋ณ์ ์ผ๋ก ์ฐ๋ฝ ํ ์ํด ํ์, ์ฟ ํฐ ์์ ๋ฏธ์ถฉ์กฑ ์ ์์ฐ์์ค ๋ฑ์ ๋ฌธ์
- ๋ฐํ์ (์์๊ณต์ธ): ์ฟ ํฐ ์์กฐ ์ฐ๋ ค, ๋ฐํ ํ ๊ทผ๋ฌด์ ๊ฐ ์ฌ์ฉ ์ง๊ณ ๋ฐ ์ธ์์ธ๊ณ ์ด๋ ค์
Solution Breakdown
Step 1
Discovery
์ง๋ฅ์ฟ ํฐ ํ์์ ์ ์งํ๋ฉฐ ์จ๋ผ์ธ ๋ฐฐ๋ถ ๋ฐ ์ฟ ํฐ ์ ํจ์ฑ ๊ฒ์ฆ ๋ฑ์ ๊ธฐ๋ฅ์ ํ๋ซํผ์์ ๊ด๋ฆฌํ ์ ์๋๋ก ๊ตฌ์ฑํ๋ ์์ด๋์ด๋ฅผ ๊ณ ์ํธ์ต๋๋ค.
โ๋ฑ๋ก๋ฒํธโ์ โ๊ฒฐ์ ๋ฒํธโ๋ฅผ ๋ถ๋ฆฌํ์ฌ ์์คํ
๋ด์์ ์ ํจ์ฑ์ด ํ์ธ๋ ์ฟ ํฐ์ ๋ํด์๋ง ๊ฒฐ์ ๋ฒํธ๋ฅผ ๋ฐ๊ธ/๊ฒฐ์ ํ์ฑํํ ์ ์๊ฒ ํ์ต๋๋ค.
์ค์ ํ์ํ, ์ํํ ์์๊ณผ ์ธํฐ๋ทฐํ๊ณ ๊ธฐ์กด ์ง๋ฅ ์ฟ ํฐ ํ๋ก์ฐ๋ฅผ ์ฌ์ ์ง๋๋ก ์ฌ๊ตฌ์ฑํ์ต๋๋ค.
์ฟ ํฐ ์์กฐ, ์น์ธ ์ง์ฐ, ์ ์ฐ ์ค๋ฅ๋ฅผ ํต์ฌ ํ์ธํฌ์ธํธ๋ก ์ ๋ฆฌํ๊ณ ์ด๋ฅผ ํด๊ฒฐํ ๊ธฐ๋ฅ ๋ฆฌ์คํธ๋ฅผ ๋์ถํ์ต๋๋ค.
Step 2
Architecture
[Front-end]
- React ์น์ฑ์ ํตํด ๊ด๋ฆฌ์ ๋ฐ ์ฌ์ฉ์์๊ฒ ์ค์๊ฐ ์ธ์ฆ ๋ฐ ์ฟ ํฐ ๊ด๋ฆฌ/ํต๊ณ ๊ธฐ๋ฅ์ ์ ๊ณตํฉ๋๋ค.
- HTML5-QRCode๋ฅผ ์ฌ์ฉํด ๋ชจ๋ฐ์ผ ์น์์ ๋น ๋ฅด๊ณ ์์ ์ ์ธ ์ค์๊ฐ QR ์ค์บ ๊ธฐ๋ฅ์ ๊ตฌํํฉ๋๋ค.
[Back-end]
- Spring & Java ๊ธฐ๋ฐ์ Rest API๋ฅผ ๊ฐ๋ฐํด ์ฟ ํฐ ๋ฐํ ๋ฐ ๊ฒฐ์ ํ์ฑํ๋ฅผ ๋ด๋นํฉ๋๋ค.
- AWS ํ๊ฒฝ์ Docker & k8s๋ฅผ ํ์ฉํด ์ปจํ
์ด๋ ๊ธฐ๋ฐ์ ์๋ํ ๋ฐฐํฌ ๋ฐ ๋ถ์ฐ ์ฒ๋ฆฌ ํ๊ฒฝ์ ๊ตฌ์ถํ์ต๋๋ค.
- Master ๋
ธ๋์๋ Argo๋ฅผ ํ์ฉํ CI/CD ํ์ดํ๋ผ์ธ๊ณผ ์ํฌ๋ก๋ ๊ด๋ฆฌ๋ฅผ ์ค์ ํ๊ณ , Worker ๋
ธ๋์์๋ ์ค์ API ๋ฐ ์๋น์ค๊ฐ ๊ตฌ๋๋๋๋ก ํฉ๋๋ค.
- MySQL์ ์ฌ์ฉํด ํต์ฌ ๋ฐ์ดํฐ๋ฅผ ์ ์ฅ/๊ด๋ฆฌํฉ๋๋ค.
[Blockchain Module]
- Solidity๋ฅผ ํตํด ์ฟ ํฐ ์ ํจ์ฑ ๊ฒ์ฆ ๋ฐ ์์ ๊ถ ๊ด๋ฆฌ๋ฅผ ์ํ ์ค๋งํธ ์ปจํธ๋ํธ๋ฅผ Ethereum ๋คํธ์ํฌ์ ๋ฐฐํฌํฉ๋๋ค.
Step 3
Implementation
[Front-end]
- Tailwind CSS๋ฅผ ํ์ฉํ์ฌ ์ง๊ด์ ์ด๊ณ ๋ฐ์ํ(Responsive)์ธ UI ์ปดํฌ๋ํธ๋ค์ ๊ตฌ์ถํ์ฌ, ๊ด๋ฆฌ์ ๋ฐ ์ฌ์ฉ์ ๊ฒฝํ(UX)์ ์ต์ ํํ์ต๋๋ค.
- Zustand๋ฅผ ์ฌ์ฉํ์ฌ ์ ์ญ ์ํ ๊ด๋ฆฌ๋ฅผ ๊ตฌํํจ์ผ๋ก์จ ๋์๋ณด๋์ ๋ณต์กํ ๋ฐ์ดํฐ ํ๋ฆ์ ํจ์จ์ ์ผ๋ก ๊ด๋ฆฌํ์ต๋๋ค.
- React Query๋ฅผ ๋์
ํ์ฌ API ์บ์ฑ ์ ๋ต์ ์๋ฆฝํ๊ณ , ์๋ฒ ์ํ๋ฅผ ํจ๊ณผ์ ์ผ๋ก ๊ด๋ฆฌํ์ฌ ๋ถํ์ํ API ํธ์ถ์ ์ค์ด๊ณ ์ฌ์ฉ์ ์ฒด๊ฐ ์๋๋ฅผ ํฅ์์์ผฐ์ต๋๋ค.
[Back-end & Infra]
- Spring Boot๋ฅผ ์ฌ์ฉํ์ฌ RESTful API๋ฅผ ๊ฐ๋ฐํ๊ณ , ๋ช
์ธ์ ๋ฐ๋ฅธ ์ผ๊ด์ ์ธ JSON ๋ฐ์ดํฐ ํ์ ์ฒ๋ฆฌ๋ฅผ ๊ตฌํํ์ต๋๋ค.
- Kubernetes ํ๊ฒฝ์ ๋ฐฐํฌ ๋งค๋ํ์คํธ๋ฅผ ์์ฑํ๊ณ , Argo CD๋ฅผ ํตํด GitOps ๊ธฐ๋ฐ์ ์๋ ๋ฐฐํฌ ํ์ดํ๋ผ์ธ์ ๊ตฌ์ถํ์ฌ ์๋น์ค์ ๋ฏผ์ฒฉ์ฑ(Agility)๊ณผ ์์ ์ฑ(Reliability)์ ํ๋ณดํ์ต๋๋ค.
- Docker Compose๋ฅผ ํ์ฉํ์ฌ ๊ฐ๋ฐ ํ๊ฒฝ๊ณผ ํ
์คํธ ํ๊ฒฝ์ ๋ก์ปฌ์์ ์ฝ๊ฒ ๊ตฌ์ถ ๋ฐ ํตํฉํ ์ ์๋๋ก ์ง์ํ์ต๋๋ค.
[BlockChain]
- Solidity ์ค๋งํธ ์ปจํธ๋ํธ๋ฅผ ์์ฑํ์ฌ ์ฟ ํฐ์ ๋ฐํ ๋ฐ ์๊ฐ ๋ก์ง, ์ ํจ์ฑ ๊ฒ์ฆ ๋ก์ง์ ๊ตฌํํ์ต๋๋ค.
- ์ ํจ์ฑ ๊ฒ์ฆ ๋ฐ ์๋ช
์ ์ฐจ๋ฅผ ์ค๋งํธ ์ปจํธ๋ํธ ๋ก์ง์ ์ถ๊ฐํ์ฌ, ์ฟ ํฐ ๊ฒฐ์ ๊ณผ์ ์์์ **๋ณด์์ฑ(์๋ณ์กฐ ๋ฐฉ์ง)**์ ๊ทน๋ํํ์ต๋๋ค.
Step 4
Launch & Measure
๋ฒ ํ ๋ฆด๋ฆฌ์ค ํ SOFTCON 2024 ์บก์คํค๋์์ธ ๊ฒฝ์ง๋ํ ๋น์ผ, ํ๊ต ์ ์์๊ณต์ธ๊ณผ ์ค์ ๋ก ํ์ ํด ์ฟ ํฐ์ ๋ฐ๊ธํ๊ณ , ์ค์ ๋ก ์๋น์ค๋ฅผ ์ด์ฉํด ์ํ์ ๊ตํํ ์ ์๋๋ก ํ์ต๋๋ค.
Architecture / Flow
๊ฐ๋จํ ์์คํ ๋ค์ด์ด๊ทธ๋จ ๋๋ ํ๋ก์ฐ ์ค๋ช ์ ๋ฃ์ ์์ญ์ ๋๋ค. Mermaid, ์ด๋ฏธ์ง, ํ ๋ฑ ์ํ๋ ํ์์ผ๋ก ๊ต์ฒดํ์ธ์.
flowchart TD
%% ์ธ๋ถ ์ํฐํฐ
User[๐ค ์ผ๋ฐ ์ฌ์ฉ์
User]
Vendor[๐ช ์ฟ ํฐ ๋ฐํ ์์ฒญ์
Vendor]
Partner[๐ข ์์๊ณต์ธ
Partner]
Blockchain[โ๏ธ ๋ธ๋ก์ฒด์ธ ๋ชจ๋
Blockchain Module]
%% ์ค์ ํ๋ก์ธ์ค
CouponSystem((์ฟ ํฐ ๊ด๋ฆฌ
์์คํ
0))
%% ๋ฐ์ดํฐ ์ ์ฅ์
UserDB[(D1 ์ฌ์ฉ์ ์ ๋ณด)]
RequestDB[(D2 ์ฟ ํฐ ๋ฐํ
์์ฒญ ๋ด์ญ)]
CouponIssueDB[(D3 ์ฟ ํฐ ๋ฐํ
๋ด์ญ)]
CouponDB[(D4 ์ฟ ํฐ ์ ๋ณด)]
NotificationDB[(D5 ์๋ฆผ)]
%% ์ธ๋ถ ์ํฐํฐ -> ์์คํ
Vendor -->|์ฟ ํฐ ๋ฐํ ์์ฒญ์| CouponSystem
Partner -->|์์ฒญ์ ์น์ธ/๊ฑฐ์ | CouponSystem
Partner -->|์ฟ ํฐ ์ ํจ์ฑ ๊ฒ์ฆ ์์ฒญ| CouponSystem
User -->|์ฟ ํฐ ๋ฑ๋ก| CouponSystem
User -->|์ฟ ํฐ ์ฌ์ฉ ์์ฒญ| CouponSystem
%% ์์คํ
-> ์ธ๋ถ ์ํฐํฐ
CouponSystem -->|๋ฐํ ์์ฒญ ์๋ฆผ| Partner
CouponSystem -->|์น์ธ/๊ฑฐ์ ๊ฒฐ๊ณผ| Vendor
CouponSystem -->|์ฟ ํฐ ๋ฐํ ์ ๋ณด| Vendor
CouponSystem -->|์ค์๊ฐ ๊ฒฐ์ ์ฝ๋| User
CouponSystem -->|์ฟ ํฐ ์ฌ์ฉ ์ฒ๋ฆฌ ๊ฒฐ๊ณผ| Partner
CouponSystem -->|์๋ฆผ| User
%% ์์คํ
<-> ๋ธ๋ก์ฒด์ธ
CouponSystem <-->|์ฟ ํฐ ์ ํจ์ฑ ๋ฐ์ดํฐ| Blockchain
%% ์์คํ
<-> ๋ฐ์ดํฐ๋ฒ ์ด์ค
CouponSystem <--> UserDB
CouponSystem <--> RequestDB
CouponSystem <--> CouponIssueDB
CouponSystem <--> CouponDB
CouponSystem <--> NotificationDB
%% ์คํ์ผ๋ง
classDef entity fill:#e1f5fe,stroke:#01579b,stroke-width:2px
classDef process fill:#f3e5f5,stroke:#4a148c,stroke-width:3px
classDef datastore fill:#e8f5e8,stroke:#1b5e20,stroke-width:2px
class User,Vendor,Partner,Blockchain entity
class CouponSystem process
class UserDB,RequestDB,CouponIssueDB,CouponDB,NotificationDB datastore