📍 기여 포인트

1. 3D 및 인터랙션 구현

• React-Three-Fiber와 Three.js로 3D 공간 및 오브젝트 구현
• 3D씬과 React 렌더링 간극을 학습하고 동기화 및 성능 최적화 적용
• Blender로 low-poly 모델링 제작 및 최적화 적용
• Framer Motion으로 UI 레벨 애니메이션 구현, 3D 씬과 자연스럽게 연결

2. UI/UX 설계 전반 및 리소스 제작

• 서비스 전체 화면 흐름과 사용자 여정 직접 설계
• Figma로 와이어프레임 및 시각 디자인 가이드 제작
• Illustrator와 Blender를 활용해 커스텀 아이콘, 텍스처, UI 그래픽 제작

3. 담당 기능

메인 페이지	방 페이지	공통 UX	인증/인가	콘텐츠 페이지
랭킹, 프리뷰	방 테마 설정, 가구 설정, 방명록	로딩 애니메이션, 가이드 애니메이션	소셜 로그인 리팩토링	CD 랙 페이지, CD 페이지

📍 리팩토링

1. 소셜 로그인 보안 강화

구분	Before	After
토큰 저장 방식	Access Token을 클라이언트 측 쿠키에 저장	인메모리 저장 방식으로 전환
토큰 전달 방식	URL로 토큰 전달	OAuth 로그인 후 토큰 대신 tempCode로 전달
최종 인증 흐름	클라이언트 중심 인증 처리	클라이언트는 서버의 임시 토큰과 교환해 최종 JWT 발급
보안 리스크 개선	인증 흐름 노출 위험이 크고 XSS / CSRF 취약점 존재	클라이언트가 직접 소셜 Access Token을 다루지 않아 토큰 노출 가능성 감소

2. CD Rack 리팩토링

비교	Before	After
화면
UI 구조	Swiper 기반 2D 슬라이더	3D CD Rack 구조로 전환
탐색 방식	좌우 전환 중심의 단순 탐색	스크롤/휠 기반의 회전·이동 인터랙션
데이터 처리	비효율적인 요청 로직으로 불필요한 렌더링 및 API 호출 발생	중복 API 호출 제거 및 로딩/에러 상태 관리 개선
코드 구조	UI, 데이터, 렌더링 로직이 한 컴포넌트에 혼재	3D 모델 로딩, 재질 설정, 유틸 함수 분리로 모듈화
사용자 경험	호버/라벨, 시각적 피드백 부족	호버 라벨, 모달, 애니메이션으로 피드백 강화
결과	단순한 2D 목록형 UI	몰입감 있는 3D 인터랙션 기반 탐색 경험

3. CD 리팩토링

비교	Before	After
화면
레이아웃	고정된 레이아웃 구조	드래그 가능한 창 UI 도입
사용 방식	창 이동 및 위치 조정 불가	사용자가 직접 CD 플레이어 창 이동 가능
반응형 대응	모바일/태블릿 확장에 불리한 구조	PC에서는 자유 이동형 창, 모바일에서는 하단 시트 형태 적용
레이아웃	고정 배치 중심 구조	Grid/Flex 기반으로 재구성
결과	사용성 및 확장성 부족	반응형 대응 및 사용성 향상

📍 RoomE 주요 기능 한 눈에 보기

진입 가이드 애니메이션	메인 프리뷰
방 테마 설정	방 가구 설정
방 포인트	방 방명록
도서 책장	도서 서평 작성
음악 CD Rack	음악 플레이
소셜 알림	소셜 친구 목록