😸 프로젝트명: 스마힐(Smaheal)

😇 팀명: 미찾사(미소를 찾는 사람들)

• 팀장: 이재인(Full Stack)
  • 팀원: 노휘종(Full Stack), 임도현(Full Stack), 정아영(Full Stack)
  • 주소: https://j3b108.p.ssafy.io

---

🌻 목차

1. 프로젝트 개요
    - 웃음의 효능
    - 기존 웃음기부 상황
    - 스마힐의 장점
2. 프로젝트 흐름
3. 기대효과
4. 구현된 기능
    - 회원 관리
    - 기부 요청 게시판
    - 웃음 기부
    - 공지 사항
    - 후기 게시판
    - 콘텐츠 제공
    - 기부된 사진 템플릿 제공
5. 사용된 API
    - face-api
    - 목소리 변조 API

---

✨ 프로젝트 개요

• 코로나 블루: 코로나19 바이러스와 우울감을 뜻하는 blue의 합성어.

  코로나 블루라는 신조어가 생길 만큼, 코로나로 인해 우울함을 느끼는 사람들이 많아지고 있습니다.
  비대면이 요구되는 사회에서 이런 어려움을 겪고 있는 사람들에게 모두가 쉽게 도와줄 수 있는 방법을 찾게 되었습니다.
  그래서 웃음을 주자! 라는 생각에 도달할 수 있었습니다.
  게다가 환자, 독거 노인 등과 같은 다른 힘든 사람들에게도 도움이 될 수 있습니다.
  모두가 행복한 삶을 살기 위한 마음으로 프로젝트를 시작했습니다.

• 웃음의 효능?

  • 면역력 상승
  • 다이어트
  • 우울증과 스트레스 감소
  • 엔도르핀 촉진

• 기존 웃음기부 상황

  • 사진을 전달하는 과정이 복잡
  • 동기 부족
  • 사진을 모으는 경로 부족
  • 직접 수집해야하는 불편함

• 스마힐의 장점

  1. 빠른시간내에 기부를 할 수 있다
     • 웹캠을 통하여 웃는 모습을 자동으로 캡쳐해 저장될 수 있습니다.
       • 스마힐에서는 유튜브 동영상, 목소리 변조, 웃긴 사진들을 보여주면서 사용자가 자연스러운 웃음을 짓도록 도와줍니다.
     • 사용자가 직접 이미지를 올려서 기부할 수 있습니다.
  2. 장소에 구애 받지 않는다
     • 웹을 통해서 웃음을 기부하고 기부를 요청할 수 있기 때문에 어디서든 기부에 참여할 수 있습니다.
  3. 누구나 기부를 요청할 수 있다
     • 누구든지 웃음 기부를 요청할 수 있습니다.
  4. 기부 하는 사람 받는 사람 모두가 즐겁다
     • 기부하는 사람은 스마힐에서 제공하는 콘텐츠들을 즐기면서 기부할 수 있습니다.
     • 기부받는 사람은 스마힐에서 제공하는 템플릿을 적용한 사진들을 통해 즐거움을 얻을 수 있습니다.

---

🌊 프로젝트 흐름

1. 기부가 필요한 사용자가 기부를 요청합니다.
2. 웃음을 기부하는 사용자는 마음에 드는 기부 게시물에 웃음을 기부합니다.
3. 웃음을 기부하는 사용자는 재밌는 콘텐츠(사진, 영상, 음성변조)를 통해 자연스럽게 웃을을 기부할 수 있고, 셀카모드를 통해 직접 캡쳐도 가능합니다.
4. 기부된 웃음 사진은 처음에 요청한 사용자에게 템플릿을 적용하여 보내줍니다.
5. 템플릿 종류: 타임라인, e-book, 하트모양

---

💡 기대효과

1. 쉽고 간편한 참여로 누구나 참여 가능
   • 간편한 회원가입 후 누구든지 웃음 기부, 기부를 요청할 수 있습니다.
2. 기부도 하고 재미도 얻는 일석이조의 효과
   • 기부를 할 때 제공되는 콘텐츠들(영상, 사진, 목소리변조)로 재미도 얻을 수 있습니다.
   • 기부를 받을 때 제공되는 템플릿으로 사진들을 예쁘게 받아볼 수도 있습니다.
3. 비대면 황동이 많아지면서 이용가능성의 증가
   • 웹사이트에서 기부를 모집하고, 기부를 하는 것이기 때문에 장소에 구애받지 않고 이용할 수 있습니다.
4. 공공의 이익을 위한 서비스로 전국민 캠페인으로 확장 가능
   • 사적인 이익을 추구하는게 아닌, 공공의 이익을 추구하기 때문에 전국민 캠페인으로 확장될 수 있습니다.

---

✔️ 구현된 기능

• 😀 회원관리
  • 로그인
    • 아이디와 비밀번호를 입력합니다.
  • 회원가입
    • 이름, 아이디, 별명, 비밀번호, 생일을 입력합니다.
  • 마이페이지
    • 이름, 아이디, 별명, 생일을 확인하고 수정할 수 있으며 탈퇴도 할 수 있습니다.
• 🙌 기부 요청 게시판
  • 기부 요청
    • 썸네일로 쓰일 이미지를 업로드 할 수 있습니다.
    • 제목과 카테고리를 입력하고 기부대상, 마감일, 주소, 내용을 입력할 수 있습니다.
    • 작성중인 게시물을 임시저장 할 수 있습니다.
  • 기부 요청 목록
    • 웃음 기부를 요청한 게시물 목록을 인피니티 스크롤로 볼 수 있습니다.
    • 게시물을 카테고리별로 간편하게 찾아볼 수 있습니다.
    • 현재 기부가 진행된 상태를 볼 수 있습니다.
    • 게시물을 검색해서 찾아볼 수 있습니다.
  • 기부 요청 상세정보
    • 기부를 요청하게 된 계기를 볼 수 있습니다.
    • 현재 기부가 진행된 상태를 자세히 볼 수 있습니다.
    • 사용자는 웃음기부 버튼을 통해서 기부를 할 수 있습니다.
    • 사용자는 응원메세지를 보낼 수 있습니다.
• 🤡 웃음기부
  • 얼굴 및 표정 인식
    • 컨텐츠 모드일 경우 웹캠으로 face-api와 OpenCV 를 이용해 얼굴을 인식하고 감정을 분석합니다.
    • 셀카 모드일 경우 서버로 보내서 감정분석을 하고 표정을 인식합니다.
    • 파일 업로드 모드일 경우 셀카모드와 동일합니다.
  • 웃을 시 캡쳐
    • 행복 퍼센트가 일정 이상일 경우 자동으로 캡쳐됩니다.
    • 셀카모드의 경우 브라우저에서 캡쳐를 합니다.
  • 캡쳐된 사진 저장
    • 캡쳐된 사진은 폴더에 저장됩니다.
• 🚨 공지사항
  • 공지사항 등록
    • 관리자는 공지사항을 등록할 수 있습니다.
  • 공지사항 목록
    • 사용자, 관리자가 등록된 공지사항을 볼 수 있습니다.
    • 제목으로 공지사항을 검색해서 목록을 볼 수 있습니다.
  • 공지사항 상세정보
    • 공지사항의 내용을 자세하게 볼 수 있습니다.
    • 관리자는 수정 및 삭제를 할 수 있습니다.
• 📝 후기 게시판
  • 후기등록
    • 썸네일에도 쓰이고 내용에도 보여질 이미지를 등록할 수 있습니다.
    • 제목과 내용을 입력할 수 있습니다.
  • 후기 목록
    • 기부를 받은 사용자가 후기를 쓴 게시물들을 페이징을 통해 볼 수 있습니다.
  • 후기 상세정보
    • 제목, 작성날짜, 작성자, 이미지, 내용을 자세히 볼 수 있습니다.
    • 좋아요 버튼을 누를 수 있습니다.
    • 본인이 쓴 게시물일 경우 수정, 삭제가 가능합니다.
• 🎶 콘텐츠 제공

  • 재미있는 사진

    • 크롤링 된 사진들을 보여줍니다.

  • 유튜브 동영상

    • 크롤링 된 동영상들을 보여줍니다.
    • 나이에 맞게 크롤링된 영상을 제공합니다.
    • 별도로 유아용 동영상도 제공합니다.

  • 목소리 변조

    1. 사용자 음성입력 신호를 MediaRecorder로 변환합니다.
    2. wev blob 배열로 소스를 만들고 audioBuffer로 변환합니다.
    3. audioBuffer의 음성신호를 변조합니다.
    4. 다시 wav blob 배열로 변환후 재생성합니다.
    • 본인의 목소리를 녹음 후 사용자가 선택해서 다양한 목소리로 출력되게 합니다.

  • 웃음사진 템플릿

    • 기부가 완료된 게시물에 대한 사진들을 템플릿화하여 다양한 느낌으로 즐길 수 있습니다.

📍 사용된 API

• 목소리 변조

  • audiobuffer-to-wav

• 얼굴 인식

  • face-api