DDOKBUN은 스마트 화분을 통해 식물 관리 서비스를 제공하고, 식물, 화분을 판매하는 E커머스 플랫폼입니다.
사용자는 본인의 LIFE 스타일에 맞게 식물을 추천받을 수 있으며, 화분 관리 시스템을 통해 효율적으로 식물을 관리할 수 있습니다.
- 2022.10.10(월) ~ 2022.11.18(금)
팀장, Frontend | Frontend | Frontend | Backend | Backend | Backend |
신혜원 | 김채리 | 허건녕 | 손광진 | 이동욱 | 이재환 |
-
스마트 화분(Ddokbun)
- 아두이노, 라즈베리파이로 자체 제작한 스마트 화분
- 자동물주기, 데이터 관리, 추천 등의 기능 제공
-
데이터 수집 / 데이터 시각화
- 이용자의 스마트 화분 환경에 대한 토양 습도, 광량, 온도, 습도 데이터 수집
- 분산처리 ?
- 수집된 데이터를 Chart.js를 활용하여 이용자가 한눈에 보기 쉽게 시각화
-
자동 물주기
- Kafka Broker에 메시지를 발행
- Topic에 대한 레코드로, 아두이노와 통신
- FCM을 이용해 사용자의 기기에 알림 전송
-
스마트화분 기반 추천
- 이용자의 스마트 화분 데이터를 활용한 데이터 분석을 통하여 사용자 환경에 적합한 식물 추천
- 분석 기법 적어주면 좋을듯
-
디지털 트윈
- Three.js 를 활용하여 이용자의 식물을 디지털 트윈화
- 물 주는 동작을 애니메이션화하여 식물에게 물을 줄 때 사용자와 상호작용 증가
-
필터링 / 설문조사 기반 추천
- 네가지 키워드를 바탕으로 적합한 식물 정보를 제공
- 초보집사 / 집꾸미기 /
- 설문조사 내용을 바탕으로 필터링하여 사용자에게 적합한 식물 추천
-
관리자페이지
- 관리자 페이지를 통해서 이용자 배송상태 관리
- 유저 권한 관리 및 유저 정보 관리
- 판매 현황 제공 및 판매량 데이터 시각화
-
결제(카카오페이)
- 카카오 페이 API를 활용한 결제 시스템
- 모바일 / 웹을 구분하여 디바이스에 적합한 시스템으로 결제
-
FrontEnd
-
JavaScript ES6
-
Typescript
-
React 18
-
Next.js 12
-
Next PWA
-
Next SEO
-
Redux-toolkit / Redux-wrapper / Redux-persist
-
Styled-Components
-
Tailwind
-
Three.js
-
Chart.js
-
Framer-motion
-
Axios
-
Firebase
-
ESLint
-
Prettier
-
-
BackEnd
- Spring Boot 2.7.5
- Spring Data JPA
- Spring Security
- Java 11
- QueryDSL
- Firebase
- Redis
- Kafka
- MySQL
- Spark
- Yarn
- YOLO v5
- Scikit Learn
- Pytorch
-
IoT
- Rasbian
-
CI/CD
- AWS EC2
- Docker
- Jenkins
- nginx
- certbot
-
IDE
- VS Code
- IntelliJ
- MySQL Workbench 8.0
frontend
├── apis
├── assets
│ ├── commerce
│ ├── fonts
│ ├── icon
│ └── onboarding
├── common
│ ├── Button
│ ├── Cards
│ ├── Carousel
│ ├── DatePick
│ ├── Dot
│ ├── GetPostsModal
│ ├── Graph
│ ├── Input
│ ├── Labels
│ ├── Login
│ ├── Modal
│ ├── NavCard
│ ├── Navbar
│ ├── PageTitle
│ └── Spinner
├── components
│ ├── Flower
│ ├── admin
│ ├── commerce
│ ├── manage
│ ├── mypage
│ ├── search
│ └── welcome
├── pages
│ ├── admin
│ ├── commerce
│ ├── login
│ ├── manage
│ ├── manage/[userseq]
│ ├── search
│ ├── test
│ └── welcome
├── public
│ ├── icons
│ └── models
├── store
├── styles
│ ├── animations
│ ├── commerce
│ ├── manage
│ ├── manage/[userseq]
│ ├── search
│ ├── temp
│ └── welcome
├── types
│ ├── admin
│ ├── commerce
│ └── search
└── utils
backend
├── ddokbun-batch
│ ├── conf
│ └── run
├── ddokbun
│ ├── api
│ ├── config
│ ├── domain
│ │ ├── ai
│ │ │ ├── dto
│ │ │ └── service
│ │ ├── alarm
│ │ │ ├── dto
│ │ │ ├── entity
│ │ │ ├── repository
│ │ │ ├── res
│ │ │ └── service
│ │ ├── auth
│ │ │ ├── dto
│ │ │ └── service
│ │ ├── cart
│ │ │ ├── dto
│ │ │ ├── entity
│ │ │ ├── repository
│ │ │ └── service
│ │ ├── order
│ │ │ ├── dto
│ │ │ ├── entity
│ │ │ ├── repository
│ │ │ └── service
│ │ ├── plant
│ │ │ ├── dto
│ │ │ ├── entity
│ │ │ ├── repository
│ │ │ └── service
│ │ ├── product
│ │ │ ├── dto
│ │ │ ├── entity
│ │ │ ├── repository
│ │ │ └── service
│ │ ├── s3
│ │ │ ├── dto
│ │ │ └── service
│ │ ├── survey
│ │ │ ├── dto
│ │ │ ├── entity
│ │ │ ├── repository
│ │ │ └── service
│ │ └── user
│ │ │ ├── dto
│ │ │ ├── entity
│ │ │ ├── repository
│ │ │ └── service
│ ├── exception
│ ├── schedule
│ └── utils
│ ├── auth
│ ├── fcm
│ └── string
└── ddokbun_consumer
├── env
└── config
iot
├── arduino
└── raspberry
- 똑분 서비스만의 차별점과 사용 방법을 파악할 수 있도록 하였습니다.
- SEO 타이틀 페이지로서, 처음 유저와의 접점 시 긍정적인 인식을 줄 수 있도록 서비스 이미지에 대한 시각자료를 제공하며, 플랫폼 브랜딩을 기획하였습니다.
- 배너를 활용하여 커머스의 다양한 기능에 이용자들이 쉽게 접근할 수 있도록 하였습니다.
- 조회수 기반 인기식물을 보여주어 이용자들이 인기있는 식물을 확인할 수 있도록 하였습니다.
- 카테고리 바로가기 외에도 추천 상품을 보여주며 플랫폼이 유기적으로 연동될 수 있도록 하였습니다.
- 약 200여종의 식물을 초보집사 / 집꾸미기 / 반려동물 / 공기정화 네가지 카테고리로 분류하여 사용자들이 자신의 목적에 맞는 상품을 구매할 수 있도록 유도하였습니다.
- 애니메이션을 활용하여 부드러운 효과를 주었습니다.
- 상품카드에 마우스가 올라갈 시 애니메이션 효과를 주어 상호작용을 추가하였습니다
- 카드를 활용하여 식물에 대한 요약정보를 제공하였습니다
- 상품 디테일 화면에서 바로구매하거나 장바구니에 담을 수 있도록 하였습니다.
- 유사 상품을 캐러셀 형태로 사용자에게 제공하여 다른 상품도 추천할 수 있도록 했습니다.
- 설문조사를 바탕으로 필터링하여 사용자에게 맞는 식물을 추천하였습니다.
- forwardRef.focus를 활용해 다음질문으로 넘어가게 하여 UX를 향상시키고자 하였습니다.
- 필터링한 정보를 바탕으로 식물을 추천하였고, 카드를 재사용하여 생산성을 높였습니다.
- Redux를 활용하여 새로고침 없이도 장바구니 정보가 갱신되도록 하였습니다.
- 장바구니 페이지에서 수량을 조절하고, 삭제할 수 있도록 하였습니다.
- 유효성검사를 통해 사용자가 올바른 결제정보를 입력하도록 하였습니다.
- 사용자가 웹으로 접속했는지, 모바일로 접속했는지 구분하여 모바일일 경우는 카카오페이를 바로 실행할 수 있도록, 웹일 경우 QR / 인증번호 결제를 할 수 있도록 구분하였습니다.
- 결제를 진행할 때 DB에 결제 대기상태를 올린 후, 결제가 성공적으로 끝나면 결제상태를 결제완료로 변경합니다.
- 커머스의 나의 결제정보와 배송정보를 확인할 수 있고, 나의 식물정보를 확인할 수 있는 페이지입니다.
- 테이블을 활용하여 결제 및 배송 상태별 식물들을 조회할 수 있게 하였고, 컴포넌트를 재사용하여 생산성을 높였습니다.
- 태그별 식물 검색이 가능하도록 하였습니다.
- 검색어 필터링을 활용하여 현재 검색어와 유사한 상품이 결과창에 나올 수 있도록 하였습니다
- AI 딥러닝을 활용하여 이미지 검색을 할 수 있도록 하였습니다. 사용자가 카메라나 이미지 파일을 활용하여 식물 사진을 검색한다면 그와 가장 유사한 식물이 결과값으로 나오도록 하였습니다
- 내가 가진 화분을 캐러셀 형태로 확인할 수 있으며 내가 가진 화분의 정보를 바탕으로 새로운 식물을 추천받을 수 있습니다.
- 화분데이터가 충분하지 않을 경우 설문조사 / 카테고리 기반 추천으로 새로운 식물을 추천받을 수 있도록 유도하였습니다
- 식물 검색기능을 활용하여 내가 가진 식물의 정보를 불러올 수 있도록 하였습니다.
- 자신만의 식물이름을 지정하여 식물 닉네임기반으로 관리 할 수 있도록 하였습니다.
-
디지털 트윈
- Suspense와 Lazy Loading을 활용하여 Three.js의 성능을 개선하여 UX를 향상시키고자 하였습니다.
- Three.js를 활용하여 나의 식물을 3D식물 캐릭터로 렌더링했고, 사용자와 인터랙션 할 수 있도록 하였습니다.
- 물주기 버튼을 활용하여 IoT 식물에게 물을 줄 수 있도록 하였고, 물 주는 동안 애니메이션을 실행하여 사용자에게 물을 주고 있다는 것을 확인할 수 있도록 하였습니다.
- 자동 물주기 설정 시 DB에 저장되어 있는 식물 정보 바탕으로 물을 주도록 할 수 있고, 또는 사용자가 설정한 날짜에 맞춰 물을 줄 수 있도록 하였습니다.
-
데이터 시각화
- 내가 키우고 있는 식물의 정보를 보여주어 사용자가 식물을 기를 때 도움이 될 수 있도록 하였습니다.
- 기록보기를 통해 IoT화분을 통해 언제 물을 주었는지 달력으로 확인할 수 있도록 하였습니다.
- IoT화분을 활용하여 온도 / 조도 / 습도 / 토양습도에 데이터를 시각화 하였고, 사용자가 볼 수 있도로 하였습니다.
- 화분에 물 주기가 완료 됐을 때, 물 줄 시간이 지났을 때, 화분 물통에 물이 부족할 때 이용자에게 푸쉬알람 제공합니다
- Firebase를 활용하여 백그라운드에서 실행되고 있지 않을때에도 작동하여 식물관리에 도움을 줄 수 있도록 하였습니다.
- 커머스 이용자들의 구매내역을 관리하고 배송상태를 관리 할 수 있도록 하였습니다.
- 결제 상태를 버튼을 활용하여 쉽게 배송상태를 변경 할 수 있도록 하였습니다.
- 전체 대시 보드 중, 주문 건수에 대한 차트를 제작해 주문량을 한 눈에 볼 수 있습니다.
- 유저들의 정보를 테이블로 관리하여, 파악이 용이하도록 하였습니다.
- 유저별 접근 권한을 다르게 부여하고, 이를 변경할 수 있는 기능을 제공합니다.
- 보유한 상품에 대해 테이블로 관리 할 수 있도록 하였습니다.
- 상품의 남은 재고를 확인하고, 삭제할 수 있습니다.