Update readme.md

readme.md

@@ -1,3 +1,175 @@
+![header](https://capsule-render.vercel.app/api?type=waving&color=auto&height=300&section=header&text=Smart%20Us&fontSize=90&animation=fadeIn&fontAlignY=38&desc=Together%20Smart%20Team%20HYME!&descAlignY=51&descAlign=62)
+
+# 🌟 Product Link 
+
+### 🔥 모바일 웹앱입니다. <br/><br/> 모바일로 접근하거나 , <br/>PC 접속후 f12 > iphone 12 모드로 보시면 완전한 SMARTUS 를 즐기실 수 있습니다. <br/><br/>https://kkyh12180.github.io/HYME_Hackathon/
+
+<br/>
+<br/>
+
+# 👩🏻 Team Name
+
+![transparent](https://capsule-render.vercel.app/api?type=transparent&fontColor=703ee5&text=HYME&height=150&fontSize=60&desc=To%20Live%20Well%20Together&descAlignY=75&descAlign=60)
+
+<br>
+</br>
+
+<p align="center"><img src="./readme_img/ppt/index.png" width="800"/></p>
+
+
+# 📚 Theme
+<p>🌟 특별 세션 - 스마트 기술 교육 부재</p>
+
+<br>
+</br>
+
+# 💡Intro
+
+<p align="center"><img src="./readme_img/ppt/intro.PNG" width="800"/></p>
+
+<br>
+</br>
+
+# 💡Explain
+<p align="center"><img src="./readme_img/ppt/index_problem.PNG" width="800"/></p>
+<br>
+</br>
+
+<p align="center">대한민국 사회는 고령화 사회를 넘어 초고령화 사회를 바라보고 있습니다.<br/>
+또 코로나 19가 심화되는 과정에서 대면 접촉을 최소화하기 위해 대다수의 점원이 서있던 자리를 키오스크가 대신했습니다. <br/>
+  이러한 이유로 셀프 키오스크 성장세가 12.2%에 도달할 동안, <br/>점원 대신 키오스크를 선호하는 사람은 고작 35% 에 머무르고 있다는 통계가 존재합니다. <br/>
+  이런 사실을 바탕으로 팀 HYME은, <br/>초고령화 사회로 달려가는 대한민국의 ‘디지털 문맹’들을 위한 교육 서비스의 필요성에 주목했습니다.<br/></p>
+<br>
+</br>
+<p align="center"><img src="./readme_img/ppt/problem.PNG" width="800"/></p>
+<p align="center"><img src="./readme_img/ppt/solution.PNG" width="800"/></p>
+<br/>
+<p align="center">이 중에서 저희가 특히 집중하고자 했던 부분은 평가항목과 방법의 개발입니다. <br/>
+이 솔루션에 가장 포커스를 맞춘 이유로 하나의 격언을 인용할 수 있을 것 같습니다. <br/>
+‘너 자신을 알라.’입니다. <br/>내가 무엇을 모르는지 알아야 새로운 것을 배워나갈 수 있고, <br/>배워나가는 자세가 되어야 익숙해지고 즐길 수 있을 것입니다.<br/>
+때문에 저희는 스마트 기기에 대한 부담감을 줄이고 재미있게 배워나갈 수 있는 서비스를 고안하고자 했고, <br/>
+목적에 가장 부합하는 서비스 형태로 ‘게임’을 차용했습니다.<br/></p>
+<br/>
+
+<br>
+</br>
+
+<h2>📎메인 메뉴 선택 화면</h2>
+
+<p align="center"><img src="./readme_img/ppt/demo_main.PNG" width="500" /></p>
+
+<br>
+</br>
+
+<p align="center"><img src="./readme_img/menu.png" width="200" height="450"/></p>
+<h4 align="center">💡 - 키오스크 외의 다양한 스마트 기기들을 선택할 수 있습니다.</h4>
+
+<br>
+</br>
+
+<h2>📎키오스크 브랜드 선택 화면</h2>
+<p align="center"><img src="./readme_img/brand.png" width="200" height="450"/></p>
+<h4 align="center">💡 - 키오스크의 여러 브랜드를 선택하고, 'Game (연습하기)' & 'Guide (배우기)' 두 가지 모드로 실행할 수 있습니다.</h4>
+
+<br>
+</br>
+
+<h2>🎮 Game Mode : 미션 안내</h2>
+<p align="center"><img src="./readme_img/mission.png" width="200"/></p>
+<h4 align="center">💡 - 미션 탭이 상단에 등장하게 되고 제한 시간 타이머가 실행됩니다.</h4>
+
+<br>
+</br>
+
+<h2>🎮 키오스크 게임 진행</h2>
+<p align="center"><img src="./readme_img/select.png" width="200" height="450"/></p>
+<h4 align="center">💡 - 실제 키오스크와 똑같은 Ui/Ux 를 직접 만져보며 실행할 수 있습니다.</h4>
+
+<br>
+</br>
+
+<h2>🎮 키오스크 게임 최종 화면</h2>
+<p align="center"><img src="./readme_img/ppt/demo_final.PNG" width="500" /></p>
+<p align="center"><img src="./readme_img/final.png" width="200" height="450"/></p>
+<h4 align="center">💡 - 잔여 시간과 달성률을 기반으로 미션 수행도를 평가하고, 일정 점수에 따라 평가 코멘트를 작성합니다.</h4>
+
+<br>
+</br>
+
+<h2>📚 키오스크 가이드 (배우기) 화면</h2>
+<p align="center"><img src="./readme_img/guide.png" width="200" height="450"/></p>
+<h4 align="center">💡 - 키오스크를 아예 처음 접하는 사람을 위해 수행해야하는 액션을 가르쳐주는 가이드 모드가 존재합니다.</h4>
+
+<br>
+</br>
+
+<p align="center"><img src="./readme_img/ppt/index_update.PNG" width="800"/></p>
+<p align="center"><img src="./readme_img/ppt/update.PNG" width="800"/></p>
+</br>
+<p align="center">스마트 어스는 총 세가지의 BM방향성을 가집니다.<br/>
+첫째, 정부 기관 협력을 통한 지원금 확보</br>
+둘째, CSR, 사회적 책임 경영을 원하는 기업이 사회적 약자를 배려하기 위해 스마트 기기 교육과 복지에 힘쓰려할 때의 외주</br>
+셋째 고객의 UI 사용 데이터를 키오스크 제작 업체로 판매하는 형태의 수익금 확보입니다.</br></p>
+</br>
+<p align="center"><img src="./readme_img/ppt/index_effect.PNG" width="800"/></p>
+<p align="center"><img src="./readme_img/ppt/effect.PNG" width="800"/></p>
+<p align="center">드라마 스타트업 중에서는 이런 대사가 나옵니다.<br/><br/>
+이 세상에 혁신이라는 게 아주 빠르게 올 겁니다,<br/>
+근데 너무 빠르면 못써요, 그 속도에 치여 많은 사람들이 다칩니다.<br/>
+사람들이 적응하고 같이 살아갈 속도, 그 속도를 위해 난 계속 싸울 겁니다.<br/>
+내 아들은 미래를 향해서 나아가고, 난 내 현재를 지키기 위해 싸울 겁니다. <br/>
+아마 그 사이 어디쯤에 그 혁신의 속도라는 게 결정되겠죠.<br/>
+ <br/>
+ <br/>
+상상해봅시다. <br/><br/>
+쇼핑을 마치고 택시 정류장으로 가서 당연하다는 듯이 휴대폰을 꺼내 카카오 택시를 부르는 여러분을요.<br/> 
+주변의 모두도 폰을 보고 있고 정류장에 오는 택시는 죄다 예약일 겁니다.<br/> 
+그러던 도중 한 노부부가 왔습니다.<br/>
+빈 차는 없고 죄다 예약인 택시를 보며 하염없이 빈차가 오기만을 기다립니다.<br/>
+이것이 더는 익숙한 풍경이 아니기를 바랍니다.<br/><br/><br/></p>
+
+# 🔧Tech
+<p align="center"><img src="./readme_img/ppt/work_flow.PNG" width="800"/></p>
+<br/>
+
+<h3>✦ 자바 스크립트 활용</h3>
+- 배열 사용 , timer 사용한 시간 제한 기능<br/>
+- bootstrap 활용 <br/>
+- json 활용, 음식 db 구축 후 반복문으로 활용 <br/>
+
+<br/>
+<h3>✦ 배포 및 호스팅</h3>
+- git.io 를 통한 배포로 모든 사람이 손쉽게 접근 가능한 프로덕트 구현<br/>
+<br/>
+
+<h3>✦ [추가예정]</h3>
+- Apps Script 활용해 사용자의 기본 정보 체크 <br/>
+- 업데이트 일괄 알림 (메일 or 전화번호로)<br/>
+
+<br>
+</br>
+
+# 💻Video
+
+### 🔥 데모 영상입니다. [Watch Video - SMARTUS](https://youtu.be/K0PAryFDTk8)
+<br>
+</br>
+
+# 🙆‍♀️ Team Info
+<h2> 🫠 Team Leader - 컴퓨터학부 20학번 김민주 </h2>
+<br/>
+<h2> 🔧 Team Member - 컴퓨터학부 20학번 김영효 </h2>
+<br/>
+<h2> 🏆 Team Member - 컴퓨터학부 20학번 김현지 </h2>
+<br/>
+<h2> 🥰 Team Member - 컴퓨터학부 20학번 이은지 </h2>
+<br/>
+
+
+![footer](https://capsule-render.vercel.app/api?type=wave&color=auto&height=200&section=footer&text=Now%20Use%20me!&fontSize=90)
+
+
+
 https://green-pebble-0f3e30300.4.azurestaticapps.net/
 
 # Vanilla JavaScript App