청년들을 위한 웰다잉 경험, 설계 서비스 '다잉메이트'

📍 2023.11.25 한국게임학회 캡스톤 경진대회 우수 논문상 수상

기사자료
https://www.it-b.co.kr/news/articleView.html?idxno=72174

🌙 서비스 소개

DyingMate = Dying + Mate

Dying Mate는 죽음을 본인과는 상관없는 먼 미래로만 여기는 청년들이 죽음에 대해 고찰해볼 수 있는 인터랙티브 웹 서비스입니다.

죽음이라는 무거운 주제를 스토리와 기능에 자연스럽게 풀어내어 사용자는 죽음불안을 해소하고

삶과 죽음을 대하는 태도에 대한 긍정적인 변화를 경험할 수 있습니다.

🎇 서비스 특징

#페럴렉스 스크롤링

메인화면에서 스크롤을 통해 세 인물의 방을 방문할 수 있습니다.

#스토리텔링

세 인물이 각각 들려주는 삶과 죽음의 이야기를 들을 수 있습니다.

#인터렉티브 웹

세 인물의 방을 모두 방문하고 나면 나의 방에서 웰다잉 설계와 관련된 기능들을 수행할 수 있습니다.

구현 화면

⚒️ 기술 스택

📁 폴더 구조

+---public 💡 favicon, index.html
\---src
    |   App.css
    |   App.jsx
    |   Camera.jsx
    |   EndingCamera.jsx
    |   index.css
    |   index.js
    |
    +---api 💡 인스턴스, 기능별 api
    +---assets
    |   +---icons 💡svg->js 변환
    |   |   \---raw 💡svg 원본 파일
    |   \---img 💡 webp, svg 파일
    |       +---Map 
    |       +---PlayerRoom
    |       \---Profile
    |
    +---components
    |   +---common
    |   +---FriendRecord
    |   +---LoginSignup
    |   +---Map
    |   +---models 💡gltf->jsx로 변환한 3d 에셋 파일(by gltfjsx)
    |   |
    |   +---PlayerRoom
    |   |   +---Board
    |   |   +---Desktop
    |   |   +---Diary
    |   |   |
    |   |   \---FriendList
    |   +---SetUp
    |   +---Shelf
    |   \---ui
    |
    +---constants 
    |
    +---contexts 💡 전역 상태를 위한 context
    +---data 💡 스토리 스크립트 저장
    +---fonts
    +---hooks 💡 custom hooks 저장
    +---pages 💡 page 컴포넌트 저장
    +---styles
    |   \---theme
    \---utils