Docs: Add feature part to README

Added feature part to README (work in progress)

Author: cw00h

README.md

@@ -6,53 +6,75 @@
 ## 프로젝트 소개
 **Handover**는 더 편리하고 똑똑한 인수인계를 위한 플랫폼입니다. 
 
-## 목차
-<ol>
- <li><a href="#features">기능 설명</a></li>
- <li><a href="#prerequisites">컴퓨터 구성 / 필수 조건 안내</a></li>
- <li><a href="#stacks">기술 스택</a></li>
- <li><a href="#install">설치 안내</a></li>
- <li><a href="#gettingstarted">프로젝트 사용법</a></li>
- <li><a href="#teaminfo">팀 정보</a></li>
- <li><a href="#license">저작권 및 사용권 정보</a></li>
-</ol>
 
-<h2 id="features"> 기능 설명 (Key Features) </h2>
+## 기능 설명 ✨
+Handover만의 **3가지 핵심 기능**과 함께 더 편리하고 똑똑한 인수인계를 진행해보세요!
+ - **`3단계 문서 구성`**(서랍 🗄️, 문서 📰, 카드 📇)으로 **쉽게 읽고, 작성하는** 인수인계 문서
+ - **`그룹 생성`**, **`북마크`**, **`댓글`** 기능들로 **함께 공유하는** 인수인계 문서
+ - **`보안 관리자 기능`** 으로 보안위반으로부터 **안전한** 인수인계 문서
 
-- 3단계 문서(서랍 🗄️, 문서 📰, 카드 📇) 구성으로 쉽게 관리하는 인수인계 문서
-- 그룹 생성, 북마크, 댓글 기능들로 함께 공유하는 인수인계 문서
-- 관리자 기능으로 보안위반으로부터 안전한 인수인계 문서
+<h3> 3단계 문서 구성 📋</h3>
 
-<h2 id="prerequisites"> 컴퓨터 구성 / 필수 조건 안내 (Prerequisites)</h2>
+<p align="center">
+ <img src='http://drive.google.com/uc?export=view&id=1uoMROdL5DH_qtouCaIKYWde_3wmi9pKq' width="800" height="500"/>
+</p>
 
+Handover 내의 모든 문서는 **서랍 🗄️, 문서 📰, 카드 📇** 의 3단계 구성을 갖습니다.
+- **서랍** 🗄️: 하나의 부서 또는 보직에 연관된 업무 파일들의 집합
+- **문서** 📰: 하나의 업무를 구성하는 카드들의 집합
+- **카드** 📇: 작은 업무를 수행하는 방법을 설명한 짧은 문서
+
+<p align="center"> 
+ <img src='http://drive.google.com/uc?export=view&id=1A4XxkjSMLXGl4dtebVH6KG0wfLqCMLMT' width="400" height="400" />
+</p>
+
+3단계로 구성된 문서에 더해, 미리 제공된 **카드 템플릿**들을 이용해 더 읽기 쉽고, 체계화된 문서를 작성해보세요!
+
+<h3> 그룹, 북마크, 댓글 기능을 통한 문서 공유 서비스 🤝 </h3>
+
+<p align="center"> 
+ <img src='http://drive.google.com/uc?export=view&id=1A4XxkjSMLXGl4dtebVH6KG0wfLqCMLMT' width="400" height="400" />
+</p>
+
+- 같은 보직, 같은 소속의 사용자들과 **그룹**을 형성하여 인수인계 문서를 공유하고, **댓글**을 통해 의견을 나누어보세요!
+- 마음에 드는 문서가 있다면, **북마크** 기능을 통해 언제든지 문서를 다시 열람할 수 있습니다.
+
+<h3> 보안 관리자 등록을 통한 기밀 유출 방지 🔐 </h3>
+
+<p align="center"> 
+ <img src='http://drive.google.com/uc?export=view&id=1A4XxkjSMLXGl4dtebVH6KG0wfLqCMLMT' width="400" height="400" />
+</p>
+
+- 그룹 별로 **보안 관리자**를 등록해 그룹 내 문서에서 보안 사항이 위반되고 있는지 확인하고, 관리할 수 있습니다.
+
+## 컴퓨터 구성 / 필수 조건 안내 (Prerequisites)
 * ECMAScript 6 지원 브라우저 사용
 * 권장: Google Chrome 버젼 77 이상
 
-<h2 id="stacks"> 기술 스택 (Key Tech Stacks)</h2>
-
+## 기술 스택 (Technique Used) 
 ### Server(back-end)
-- [`nodejs 14.17.6`](https://nodejs.org/en/)
-- [`expressjs`](https://expressjs.com/)
-- [`MongoDB`](https://www.mongodb.com/)
-- [`Docker`](https://www.docker.com/)
-- [`Algolia Search`](https://www.algolia.com/)
+ - [`nodejs 14.17.6`](https://nodejs.org/en/)
+ - [`expressjs`](https://expressjs.com/)
+ - [`MongoDB`](https://www.mongodb.com/)
+ - [`Docker`](https://www.docker.com/)
+ - [`Algolia Search`](https://www.algolia.com/)
 
 ### Front-end
-- [`react.js`](https://reactjs.org/)
-- [`MaterialUI`](https://mui.com/)
-
-<h2 id="install"> 설치 안내 (Installaltion Methods)</h2>
+ - [`react.js`](https://reactjs.org/)
+ - [`MaterialUI`](https://mui.com/)
 
+## 설치 안내 (Installation Process)
 ```bash
 $ git clone osamhack2021/App_Flutter_Web_Express_Handover_TeamName
 $ yarn install
 $ yarn start
 ```
 
-<h2 id="gettingstarted"> 프로젝트 사용법 (Getting Started) </h2>
--yet to do
+## 프로젝트 사용법 (Getting Started)
+- yet to do...
 
-<h2 id="teaminfo"> 팀 정보 (Team Info) </h2>
+## 팀 정보 (Team Information)
+
 <table width="788">
     <thead>
     <tr>
@@ -195,8 +217,7 @@ $ yarn start
     </tbody>
 </table>
 
-<h2 id="license"> 저작권 및 사용권 정보 (Copyleft / End User License) </h2>
-
+## 저작권 및 사용권 정보 (Copyleft / End User License)
  * [MIT](https://github.com/osam2020-WEB/Sample-ProjectName-TeamName/blob/master/license.md)
 
 This project is licensed under the terms of the MIT license.