Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/osamhack2020/web_inpendansim_inpendansim

국군 인터넷 편지 개선 프로젝트 2020, ‘인편단심’
https://github.com/osamhack2020/web_inpendansim_inpendansim

firebase material-design scss-framework vue vue-router

Last synced: about 1 month ago
JSON representation

국군 인터넷 편지 개선 프로젝트 2020, ‘인편단심’

Awesome Lists containing this project

README 

        




 

 

 

 





 







로고는 '단순함'을 뜻하는 simple의 'S' 형태를 띄며, 육 · 해 · 공 · 해병대를 상징하는 4색이 어우러져 **인터넷 편지 서비스로 전군을 하나로 연결시킨다**는 의미를 담고 있습니다.








# 📝 프로젝트 소개 및 설명(Introduction & Explanation)



 poster




**인편단심**은 훈련소에 인터넷 편지를 보내는 지인들이 보다 **쉽고 간편하게 편지를 작성**할 수 있도록 디자인된 웹 서비스입니다.



기존 인편 서비스의 **복잡한 절차를 개선**하고, 사용자들이 편지에 담는 내용과 작성 패턴을 기반으로 **다양한 컨텐츠와 편의기능**을 제공하고 있습니다.



또한, 사용자들에게 쉽고 편리한 서비스에서 나아가 **군과 민간이 소통할 수 있는 전군통합 플랫폼**을 목표로 하고 있습니다.







 

* __[데모 페이지 보기](https://osamhack2020.github.io/WEB_InpenDansim_INPENDANSIM/)__



* __[발표영상 보러가기](https://youtu.be/mg5sbkWaqNY)__



 




  Download Link

  


  PPT Link



 

* __[시연영상 보러가기](https://www.youtube.com/watch?v=Li7epsTU2LI)__





 




  Download link









# 📐 구상 과정(Design Process)

 

 

###  초기 인편단심 컨셉 구상 스케치

 > 여러번의 컨셉 수정 끝에 탄생한 인편단심

 ![design](documents/design_process/design1.jpg)


![design](documents/design_process/design2.jpg)



 ###  Google Jamboard를 사용하여 원거리 회의로 디자인 구상

> 단순, 심플이라는 인편단심의 컨셉을 구체화 시키기 위한 노력들


![design](documents/design_process/jamboard.jpg)






 

### 목업 프레임워크인 Figma를 사용하여 데스크톱, 모바일 프로토타입 제작

> 그림으로 그렸던 요소들을 최대한 최종 완성본에 가깝게 디자인 후 프로토타입으로 제작

![design](documents/design_process/figma-desktop.PNG)

![design](documents/design_process/figma-mobile-prototype.PNG)







 ### 데스크탑 버전

 desktop

 ![desktop2](img/desktop2.png)

 

### 모바일 버전

 ![mobile](img/mobile.gif)



 






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

* ECMAScript 6 지원 브라우저 사용

* 권장: Google Chrome 버젼 77 이상

* __IE환경에서 작동이 안될 수도 있습니다.__

### 사용가능 브라우저

![Chrome](https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png) | ![Firefox](https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png) | ![Edge](https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png) | ![Opera](https://raw.githubusercontent.com/alrra/browser-logos/master/src/opera/opera_48x48.png) | ![Safari](https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png)

--- | --- | --- | --- | --- |

 56+ ✔ | 32+ ✔ | 16+ ✔ | 42+ ✔ | 8+ ✔ |

 








# 💡 기술 스택 (Technique Used)



 

  

   


 git 
Git


  

  

   


 Firebase 
Firebase


  

  

   

   


 nodejs 
Node.js


  

  

   


 express 
Express


  

  

   


 npm 
npm


  

 

 

  

   


 javascript 
Javascript


  

  

   


 linux 
Linux


  

  

   


 html5 
Html5


  

  

   


 sass 
SCSS


  



 

     

   


 babel 
Babel


  

  

   


 webpack 
Webpack


  

  

  

   


 Vue.js 
Vue.js


  

  

   


 Bootstrap 
Bootstrap


  

 

 








# ✍ 설치 및 실행 안내 (Installation & Execution Process)

1. 인편단심 원격 저장소를 클론합니다.

```bash

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

```

2. 생성된 로컬 저장소로 이동 후 필요한 라이브러리를 설치합니다.

```bash

$ cd WEB_InpenDansim_INPENDANSIM

$ yarn install

```

3. 테스트 서버를 실행합니다.

```bash

$ yarn run

yarn run v1.17.3

info Commands available from binary scripts: acorn, ansi-html, atob,

...

question Which command would you like to run?: serve

```

4. 브라우저에 http://localhost:8080/ 를 입력하여 사이트에 접속 할 수 있습니다.



# 👨‍👨‍👦‍👦 팀 정보 (Team Information)

- 김태윤(팀장) ([email protected]), Github Id: Chokoty

- 이은상(팀원) ([email protected]), Github Id: jxchlee

- 유정호(팀원) ([email protected]),   Github Id: WebPr0grammer

- 지우석(팀원) ([email protected]),     Github Id: woosukji



# 저작권 및 사용권 정보 (Copyleft / End User License)

 * [MIT](https://github.com/osam2020-WEB/Sample-ProjectName-TeamName/blob/master/license.md)