프로젝트 설명 영상

소개 영상	가이드 영상

이미지 클릭 시 youtube 영상으로 이동합니다.

팀 소개

프로젝트 설명

국방프렌즈는 군 생활을 하는 용사 및 군무원분들을 대상으로 온라인 비대면 상담 서비스를 제공하고 자유롭게 소통을 할 수 있는 커뮤니티 웹/앱 플랫폼입니다. 또한 병영생활에 도움이 되는 정보를 다양한 방법으로 제공하여 하나의 커뮤니티 체계를 이루는 것을 목표로 한 프로젝트입니다.

국방프렌즈는 자율과제와 지정과제에 대한 내용을 모두 포함하고 있고 추가적으로 다양한 기능들을 완벽하게 구현하여 군 장병 및 군무원 여러분의 소통을 위한 커뮤니티 체계와 정보 격차 해소를 위한 플랫폼입니다.

국방프렌즈 메인화면

모바일 버전

기능 설계

※ 클릭시 확대된 원본 이미지를 확인할 수 있습니다.

ㆍ ☕ 온라인 비대면 상담 서비스
	최신 보안 기술 적용
	다양한 상담 서비스 지원
	전문상담관 선택 기능
	기존 국방헬프콜 단점 보완

ㆍ 💖 국방 SNS 서비스
	전군 통합 SNS 구축
	병영생활 노하우 / 고민 상담
	동아리 활동 / 중고 물품 거래
	좋아요/댓글 기능

ㆍ 📰 카드뉴스/정보 제공
	공모전 및 복지혜택 제공
	알기 쉬운 인포그래픽
	국방의 소식 홍보
	장병 간 정보격차 해소

ㆍ 🥳 로그인/회원가입 기능
	로그인 시스템
	회원가입 시스템
	썸네일 선택 및 업로드 기능

ㆍ 🍀 마이페이지 기능
	상담 내역 리스트 확인
	상담 내역 상세보기
	관심 커뮤니티 피드 확인
	상담관 전용 페이지 구축

ㆍ 🔧 체계지원 서비스
	공지사항 알림 및 조회
	건의 및 불편사항 접수
	24시 문의사항 접수
	자주묻는질문 조회

ㆍ 🤖 24시간 AI 챗봇 서비스
데스크탑 버전	모바일 버전	헬프데스크 지원
		서비스 가이드라인 제공
		카카오톡 채널 챗봇 연동
		기타 문의사항 24시간 접수

ㆍ 📱 모바일/앱 완벽 지원

서비스 플로우

국방프렌즈 기대효과

🔐 보안이 강화된 비대면 상담 서비스 제공

• 기존 국방헬프콜의 문제 보완
• 최신 보안 시스템 및 암호화 인증 적용
• 전문상담관 선택 기능 추가
• 편리한 상담내역 조회 및 관리
• 오픈소스 jitsi를 연동한 화상 상담 기대

🌐 국방 SNS를 통한 소통 매개채 형성

• 전군 통합 온라인 소셜 네트워크 서비스
• 비대면 동아리 활동 가능
• 스터디, 고민 상담, 중고물품 거래 가능
• 무분별한 국방망 체계 피해 해소

🖥 AI챗봇을 통한 강력한 업무 지원

• 챗봇시스템을 통한 24시간 헬프데스크 지원
• 머신러닝을 통한 인공지능 서비스
• 지원 업무에 맞게 쉽게 API 설정 가능
• 체계지원 시스템과 연동하여 질문 접수

🎙 카드뉴스를 통한 장병들의 정보 격차 해소

• 국방부 인포그래픽 제공
• 장병의 보직에 따른 정보 격차 해소
• 국방의 소식 제공 등

국방프렌즈가 가진 경쟁력

📘 개발문서의 구체성

구체적인 개발문서의 양호도 및 구체적 표현성

• Gitbook을 이용한 개발문서 정리
• Database ERD 제공
• OPEN API 제공

🌟 독창성

뚜렷한 독창성 유무 정도

• 자율과제 및 지정과제를 포함한 추가 기능 구현
• SNS 서비스를 통한 국방 소셜 네트워크 구축
• 카카오톡과 연동하여 새로운 플랫폼 활용도 기대
• 웹/모바일 완벽 지원 및 PWA를 이용한 앱 활용 가능

🌱 발전 가능성

커뮤니티, 비즈니스 등에 대한 발전 가능성

• 비대면 상담 서비스, 국방 SNS 기능을 통한 커뮤니티 구축
• 누구나 쉽게 서비스를 관리할 수 있도록 데이터 관리 페이지 구축
• 오픈소스로 이루어진 프로그램으로 플랫폼 구축 비용 절감
• 구체적인 개발문서 정리로 개발 관련 커뮤니티 발전도 가능

🚀 완성도(작품데모)

데모 결과에 대한 시현 능숙도 및 원활한 작동

• 즉시 서비스를 시행할 수 있도록 완성도 있게 제작
• 모든 기능들은 사용자별 권한 설정이 완료 되고 원활하게 구현되어짐
• 관리자 페이지를 제공하여 보다 체계적인 관리가 가능

⌨ 軍 공개SW 기여도

軍의 공개SW 기술내재화 가능성 정도

• 국방부의 소식을 오픈 API화 하여 다양한 이용가능
• 국방 SNS의 데이터는 빅데이터로 활용 가능
• AI 챗봇의 API 설계로 쉽게 기능 분리 및 타 군 체계에 활용 가능
  
  오픈 API 도큐먼트 바로가기

컴퓨터 구성 / 필수 조건 안내 (Prerequisites)

기술 스택 (Technique Used)

Infra

Git

docker

Back-end

Node.js

Express

Javascript

Strapi

Linux

Nginx

JWT

SSL

Front-end

React.js

Next.js

Typescript

Javascript

Html5

SCSS

GraphQL

Babel

Webpack

Apollo

Database

MongoDB

Web Skills

반응형 웹 (Responsive Web)

크로스 브라우징 (Cross Browsing)

웹 표준 (Web Standards)

SEO 검색엔진최적화 (Search Engine Optimization)

SSR (Server Side Rendering)

CSR (Client Side Rendering)

PWA (Progressive Web Apps)

서비스 이용법

1. WEB
https://friends.kookbang.kr/ 웹사이트 접속 후 서비스 이용

2. APP
안드로이드/IOS 기반 스마트폰에서 웹사이트 접속 후 [홈 화면에 사이트 추가 설정]을 하면 PWA 기반 웹앱 설치가 진행됩니다.
설치 후 어플리케이션으로 이용 가능합니다.

개발 프로젝트 사용법 (Getting Started)

step1. 국방프렌즈 저장소를 클론합니다.

$ git clone https://github.com/osamhack2020/WEB_KookbangFriends_Woowahan

step2. 클론한 폴더로 이동하고 패키지를 설치합니다.

// 클라이언트 패키지 설치
$ cd WEB_KookbangFriends_Woowahan/web/client
$ yarn install
$ yarn add next

// 서버 패키지 설치
$ cd ../api
$ yarn install

step3. docker-compose 설정을 진행합니다.

// web/docker-compose.yml 파일을 본인 환경에 맞게 수정합니다.
// 컨테이너 명, 포트 정보, DB 정보를 수정하시면 됩니다.
// 기본 포트 (클라이언트 : 3000, 서버 : 1337, DB : 27017) 
// 가이드 참조 : https://docs.docker.com/compose/gettingstarted/

step4. docker-compose로 컨테이너를 빌드합니다.

// web 폴더로 이동 후 docker-compose 빌드
$ cd ../
$ docker-compose build

step5. docker-compose로 컨테이너를 작동시킵니다.

// docker-compose 실행
$ docker-compose up

(현재 GitHub repository에는 기본적인 DB와 리소스 파일이 같이 업로드가 되어있어 API 및 DB 폴더는 초기화 후에 진행하는 것을 권장드립니다.)

팀 정보 (Team Information)

사진	성명	담당	기타 활동	깃허브	이메일
	이무열	프론트엔드 개발 서버 환경 구축 영상 작업 등
	김정훈	백엔드 개발 API 설계 문서화 작업 등