๐Ÿ’ญ Minji's Archive

Featured Work

DASH

์†Œ์ƒ๊ณต์ธ์„ ์œ„ํ•œ ์ฟ ํฐ ๋ฐœ๊ธ‰ ์„œ๋น„์Šค

FrontEnd Developer, UI/UX Design
2024.11 โ€” 2025.06
์บก์Šคํ†ค๋””์ž์ธ ์šฐ์ˆ˜์ƒ ์ˆ˜์ƒ

Project Gallery

๊ฐ€๋กœ ์Šคํฌ๋กค๋กœ ๋” ๋ณด๊ธฐ

Overview

๋Œ€ํ•™๊ต ๊ฐ„์‹์‚ฌ์—… ๊ฐ„ ๋ฐœ์ƒํ•˜๋Š” ์• ๋กœ์‚ฌํ•ญ์„ ํ•ด๊ฒฐํ•˜๊ธฐ ์œ„ํ•ด ์ฟ ํฐ ๋ฐœ๊ธ‰ ์„œ๋น„์Šค DASH๋ฅผ ๊ฐœ๋ฐœํ–ˆ์Šต๋‹ˆ๋‹ค.

Responsibilities

  • ยท UX/UI ๋””์ž์ธ
  • ยท ํ”„๋ก ํŠธ์—”๋“œ ๊ฐœ๋ฐœ

Tech Stack

React TypeScript Figma

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