https://sossoh.github.io/Project/옷입히기/book/index.html
책을 고르고, 이야기를 나누고, 캐릭터를 꾸며보세요.
‘온라인 독서 만담회’는 사용자가 원하는 책을 선택하고,
책에 대한 이해를 확인하는 퀴즈를 풀고,
마지막엔 개성 있는 아바타로 자신을 표현하며 채팅 공간에 입장하는
🌿 감성 기반의 인터랙티브 웹 프로젝트입니다.
- 슬라이드 방식으로 책 표지 여러 권을 감성적으로 보여줌
- 마우스 오른쪽 클릭 또는 버튼으로 책 선택 가능
- 선택한 책 인덱스를
localStorage에 저장하여 다음 페이지에 전달
- 선택한 책 표지가 화면 왼쪽에 반만 보이도록 고정
- 책별 고정된 소개글 제공
- 댓글 기능 지원, 각 책별 댓글 저장 및 불러오기
- 댓글은
localStorage를 활용해 책별로 별도 저장
- 선택한 책에 맞는 2가지 퀴즈 자동 로드
- 사용자 정답 입력란 및 제출 기능 제공
- 답안은 기본값 ‘00’으로 통일 (테스트용)
- 캐릭터의 눈, 입, 머리, 상의, 하의, 겉옷 등 커스터마이징 가능
- 선택한 아바타 정보를
localStorage에 저장 - UI/UX 감성적인 버튼 스타일 적용
- 앞서 만든 아바타를 화면 좌측에 배치 (배경 아바타와 전면 아바타 2중 구조)
- 배경은 선택한 책에 따라 다른 배경 이미지 자동 세팅
- 배경음악(BGM)은 책별로 다른 mp3 파일 재생 및 ON/OFF 토글 버튼 제공
- 닉네임은 자동 생성 및 로컬 스토리지에 저장 후 유지
- 채팅 입력 시 닉네임 포함 메시지 출력
- 채팅창 배경은 약간 투명하게 처리하여 배경 이미지와 조화롭게 연출
- HTML / CSS / JavaScript (Vanilla)
localStorage를 이용한 데이터 전달 및 저장- CSS Flexbox 및 애니메이션 효과 적용
- Socket.io (서버 연동 가능 시 확장 용이)
project-root/ ├── index.html # 책 선택 페이지 ├── book.html # 책 소개 및 댓글 페이지 ├── quiz.html # 책별 퀴즈 페이지 ├── chat.html # 아바타 + 채팅 공간 ├── waering/ │ └── index.html # 옷 입히기 페이지 ├── styles.css # 공통 스타일 시트 ├── script.js # 슬라이드 기능 및 데이터 관리 JS ├── bgm/ # 배경음악(mp3) 폴더 (book1.mp3, book2.mp3 등) ├── assets/ │ ├── books/ # 책 표지 이미지(book1.png 등) │ ├── avatar/ # 아바타 이미지 폴더(눈, 입, 머리 등) │ └── backgrounds/ # 배경 이미지(bg-cat.jpg 등) └── 기타 리소스 파일들
책을 읽고 나누는 대화를 보다 개인화된 경험으로 풀어내고자 했습니다.
디지털 상에서 책을 매개로 감성적 소통이 가능하다는 점을 보여주는 프로젝트입니다.
각 단계별 사용자 선택을 통해 내러티브가 이어지며,
아바타와 배경음악, 채팅이 어우러져 몰입감 있는 경험을 제공합니다.