🌐 N:ear ?

N:ear 프로젝트는 지문자 및 수어 게임을 통한 학습 프로젝트입니다. 또한 모바일 및 웹 서비스를 제공하고 있습니다. 주요 기획 의도는 개발진의 역량 향상과 인공지능 영상처리 및 학습 서비스 개발 경험이였습니다. 그래서 클론 코딩을 하기보다는 자체적으로 개발을 하고 다양한 학습 서비스를 분석하면서 최대한 사용자의 편의성을 생각한 지문자 및 수어 서비스를 제공하고자 하였습니다.

N:ear : '가까운'을 의미하는 'Near' 그리고 '소리를 듣는 기관인 귀'를 의미하는 'ear'의 합성어

🖥 Fornt-End

📱 Android

💡 Description

프로젝트 기획 배경

프로젝트 기획 배경은 다음과 같습니다.

✔️언택트 시대의 대표 서비스, 인공지능 영상처리 및 지문자/수어 학습 서비스 개발 경험
✔️역량 향상 : React, Kotlin, Spring Security, Spring JPA, Docker, Jenkins, NGINX
✔️게임을 통한 쉽고 재미있는 지문자/수어 학습 기회 제공
✔️동작인식으로 맞는 동작인지 아닌지 정확한 학습 가이드 제공
✔️애니메이션 동영상과 이미지, 그리고 뜻 제공까지 한큐에 학습 가능하게 처리

프로젝트 서비스 요약

서비스를 간단히 요약하자면, "지문자 및 수어 게임을 통한 학습 프로젝트"입니다. 학습 서비스의 구조를 최대한 따라가되, 리액트 등 좀 더 진보된 기술들을 활용함으로써 역량 향상 및 학습 서비스를 개발하고자 하였습니다. 기존에 존재하는 지문자/수어 학습 서비스와 달리 게임이라는 방식을 도입해 학습자는 좀 더 쉽고 재미있는 '학습게임', '동작 인식'을 제공하여 비대면이지만 학습자가 옳은 방향으로 학습을 진행할 수 있도록 가이드라인을 제공해주고자 하였습니다.

주요 서비스 기능

프로젝트의 대표 서비스는 다음과 같습니다.

⭐️지문자/수어 학습을 위한 서비스 자체 이미지/애니메이션 동영상 시스템
⭐️지문자/수어 학습한 내용을 좀 더 쉽고 재밌게 복습하고자 만든 게임 시스템
⭐️마이 캐릭터 시스템을 도입한 게임 학습 활성화

🧩 Design

WireFrame

🖥 Fornt-End

📱 Android

ERD

🔗 [Functional Specification](https://www.notion.so/280683b15ad84c9eb85ca17cf6f159d2?v=0cd541c3a61e44ce8ba64f2404d5b602)

🌎 Browser Support

Chrome	Internet Explorer	Edge	Safari	Firefox
Yes	No	Yes	Yes	Yes

📦 Packages (M)

Front-end

Name	Description
axios	Promise based HTTP client for the browser and node.js
http-proxy-middleware	Node.js proxying made simple.
react	React is a JavaScript library for building user interfaces.
react-redux	React Redux is the official React UI bindings layer for Redux.
react-router-dom	DOM bindings for React Router.
redux	Redux is a predictable state container for JavaScript apps.
redux-persist	Persist and rehydrate a redux store.
sockjs-client	SockJS is a browser JavaScript library that provides a WebSocket-like object.
styled-components	`styled-components` allows you to write actual CSS code to style components
typescript	TypeScript is a language for application-scale JavaScript.
use-count-up	React/React Native component and hook to animate counting up or down to a number

Back-end

Name	Description
QueryDSL	SQL 등의 쿼리를 생성해주는 프레임워크
jpa	구현된 클래스와 매핑을 해주기 위해 사용되는 프레임워크
Spring Security	Spring Security는 Spring 기반의 애플리케이션의 보안(인증과 권한, 인가 등)을 담당하는 스프링 하위 프레임워크
freemarker	템플릿 엔진이며 템플릿을 사용하여 (어떠한 포맷이라도)텍스트를 출력하는 역할
Lombok	메소드를 Annotation을 사용해서 자동으로 작성해주는 라이브러리
SockJS	브라우저에서 사용되는 클라이언트 라이브러리
Stomp	웹소켓 구현 라이브러리
WebSocket	웹 상에서 쉡게 소켓통신을 하게 해주는 라이브러리

AOS

Name	Description
Retrofit	HTTP 통신을 도와주는 라이브러리
Coroutine	비동기 처리 라이브러리
ViewModel	UI 컨트롤러에서 데이터를 다루는 로직을 분리하기 위해 사용한 라이브러리
LiveData	관찰 가능한 데이터 홀더 클래스
Glide	이미지 로딩 라이브러리
ExoPlayer	미디어 재생 라이브러리
Lottie	애니메이션 라이브러리
CameraX	Camera API 기능을 쉽게 사용할 수 있도록 도와주는 JetPack 지원 라이브러리
Tensorflow Lite	모바일과 임베디드 환경에 적합한 머신러닝 모델 학습, 테스트 및 배포 라이브러리
Stomp	웹소켓 구현 라이브러리
rxJava	반응형 프로그래밍 라이브러리

📚 준비하기

Git clone 받기

git clone https://lab.ssafy.com/s06-webmobile4-sub2/S06P12D203.git

데이터베이스 준비
[Backend] application.properties 설정
[Frontend] 모듈 다운로드

# frontend 폴더로 이동
cd frontend/

yarn install
-------------------
npm install

🏁 실행하기

Back-end

[Backend] (Option) Spring boot를 build(jar 파일 생성)

# backend 폴더로 이동해서
cd backend/
mvn -B -DskipTests -f backend

백엔드 실행
- 생성한 jar 파일 실행
```
java -jar [filename].jar
```
- 혹은 war 파일 생성하지 않고 demon으로 로컬에서 실행하고 싶다면 STS와 같은 IDEA에서 Spring boot Run을 실행하거나 아래 명령어를 통해 실행
```
mvn spring-boot:run
```

Front-end

# frontend 폴더로 이동
cd frontend/

yarn run serve
-------------------------
npm run start

Android

./app-release.apk 파일을 휴대폰에 다운받아서 사용

💻 서비스 주요 기능

로그인 회원가입 관리
학습 서비스

수어 단어 카테고리, 상세 페이지를 누르면 학습 가능

OX 게임

주어진 문제에 해당하는 동작을 하면 영상인식을 통해 해당 동작이 맞는지 검사
결과와 함께 본인의 동작을 다시 확인할 수 있으며 점수를 합산하여 최종 결과로 보여줌

단어 퀴즈 게임

지문자(자음, 모음)로 이루어진 글자들이 주어지며 이를 조합한 단어를 맞추는 게임
온라인상에서 실시간으로 유저들과 만나 멀티플레이 가능

🛠 Dev Skills

👨‍👦‍👦 Team. E-gemmerce

인공지능 영상처리 및 지문자/수어 학습 모바일 및 웹 서비스 'N:ear' 프로젝트의 개발진들을 소개합니다

김주환

개발 파트 : Android
MBTI : ENFP
담당 개발 : 수어 및 지문자 API와 UI 구현, 영상처리, 인공지능
팀내 역할 : 팀장 / 분위기 메이커
개발 각오 : 저는 스스로를 팔로워에 가깝다고 생각하기 때문에 리더십과 카리스마가 있으신 분들이 존경스러워요... 아이러니하게도 제가 팀장이지만 😅 열심히 해보겠습니다!
후기 : 개발자로써 그리고 팀의 한 일원으로써 진~~짜 많이 성장할 수 있는 기회였고 팀장으로 부족한 모습 많이 보였는데 잘 도와주고 끝까지 같이 노력해 준 팀원들 진심으로 고맙습니다

김도연

개발 파트 : Android
MBTI : INFP
담당 개발 : 회원관리 구현(로그인, 회원가입, 회원정보수정, 유효성 검사 API 및 UI 구현), 소켓통신을 이용한 멀티 게임모드 구현, 도커 컨테이너로 배포
팀내 역할 : 분석가
개발 각오 : 사람들에게 “쓰기 편한 친절한 프로그램이다”는 말을 듣는 게 목표에요. 이번 프로젝트의 개발과정을 꾸준히 기록하며 성장의 증거 남기기!
후기 : 이렇게 많은 사람들과 개발한 경험은 처음인데 즐겁게 마무리한 거 같아 기쁩니다! 우리팀 다음에 또 같이 개발해요!

김영훈

개발 파트 : Backend
MBTI : ESTJ
담당 개발 : REST API 개발, DB 설계 및 구축, JPA 처리 (유저,이메일,비밀번호,변경 수어/지문자 API 구현,Socket 통신 구현)
팀내 역할 : 도라에몽
개발 각오 : 프로젝트를 하면서 여러 가지 문제들을 겪을 텐데 이 문제를 해결하기 위해 끊임없이 학습하고, 새로운 시도와 개선을 하며 팀과 함께 하루하루 성장하고 싶어요
후기 : 6명이 팀이 되어서 팀 활동을 해본 적이 없었습니다. 이번에 좋은 팀원들을 만나서 협업을 해보았고, 이견을 조율하는 것이 어렵다는 것을 느꼈습니다. 또한, JAP Spring Security, JWT 들을 배우며 성장했고 더 나아가 Web Socket을 사용해서 게임방을 구현하면서 실력을 늘렸습니다.

박유정

개발 파트 : Frontend
MBTI : ENTP
담당 개발 : 회원관리 구현 및 proxy-middleware, 메인 UI구현 , 영상처리, WebRTC , 인공지능 ,Tensorflow
팀내 역할 : 추진력
개발 각오 : 프로젝트나 여러 명과 함께 하면서 가장 중요하다고 생각하는 건 소통을 잘 하고 그것을 잘 정리하고 기록해 놓는 것이라고 느껴서 해당 부분을 함께 잘 해나가 보겠습니다!
후기 : 화기애애한 분위기에서 여러명과 서로 의사소통하며 프로젝트 완료해서 좋았습니다. 새로운 라이브러리와 기술 스택을 배우고 적용하는 경험이었습니다! 다음에 또 함께해요!!

고우영

개발 파트 : Frontend
MBTI : INFP
담당 개발 : 회원관리 구현, socket.io 및 express를 통한 소켓통신연결, REST API로 데이터 통신 및 처리, 수어 및 지문자 구현, 단어장 API와 UI 구현, token 처리로 사용자 인증 허가 처리
팀내 역할 : 고PD
개발 각오 : 열심히 소통하는 게 결국 프로젝트의 결과로 이어지는 것 같아요. 많이 소통할 수 있는 사람이 되고자 노력하겠습니다!
후기 : 협업으로 개발하는 과정은 처음이었는데 이 과정을 통해 많이 성장할 수 있었습니다.

💬 Documents

Notion 바로가기

juhwankim-dev / near

🌐 N:ear ?

🖥 Fornt-End

📱 Android

💡 Description

프로젝트 기획 배경

프로젝트 기획 배경은 다음과 같습니다.

프로젝트 서비스 요약

주요 서비스 기능

프로젝트의 대표 서비스는 다음과 같습니다.

🧩 Design

WireFrame

🖥 Fornt-End

📱 Android

ERD

🔗 [Functional Specification](https://www.notion.so/280683b15ad84c9eb85ca17cf6f159d2?v=0cd541c3a61e44ce8ba64f2404d5b602)

🌎 Browser Support

📦 Packages (M)

📚 준비하기

🏁 실행하기

💻 서비스 주요 기능

🛠 Dev Skills

👨‍👦‍👦 Team. E-gemmerce

김주환

김도연

김영훈

박유정

고우영

💬 Documents

🏷License

About