플러스프로젝트 배경
1) 예상 리스크 및 대응 계획 - 모바일 자동재생 제한을 우회하기 위해 배틀 시작 터치에서 AudioContext를 사전 초기화하고 Spotify Preview URL을 버퍼링해 즉각적인 무지연 재생 구조를 설계합니다. - Discord 자체 세션과 Firebase Auth 이중 상태를 Custom Token 교환으로 단일 레이어에 통합하고, Discord 프로필 데이터를 Firestore에 동기화하는
프로젝트 성과
Discord 소셜 로그인 원클릭 연동 구현
Discord OAuth2와 Firebase Custom Token을 연결해 Discord 아바타·닉네임·서버 역할 배지가 커뮤니티 프로필에 즉시 반영되는 인증 흐름을 설계합니다.
Web Audio API 투표-음원 제로 레이턴시 싱크
배틀 시작 터치에서 AudioContext를 미리 초기화하고 Spotify Preview URL을 사전 버퍼링해, 투표 선택 직후 음원이 지연 없이 재생되는 싱크 로직을 구현합니다.
모바일 퍼스트 크로스 브라우징 안정화
iOS Safari 100vh 버그와 Android Chrome 스크롤 관성 이슈를 Tailwind CSS 반응형 유틸리티와 터치 이벤트 통합으로 수정해, 주요 모바일 브라우저 호환성을 확보합니다.
실시간 투표 집계 Firebase 연동
Firebase Realtime Database 트랜잭션 atomic increment로 동시 투표 경합 없이 정확한 집계가 이루어지도록 설계하고, 낙관적 UI 업데이트로 응답성을 확보합니다.
핵심 기능
이상형 월드컵 투표 피드
K-pop 아티스트 1:1 배틀 카드를 실시간 피드 형태로 구성하며, 터치 스와이프 투표와 즉각적인 결과 애니메이션을 구현합니다
진행 단계
기존 소스코드 분석 및 모바일 레이아웃 진단
2026.06
데스크탑 소스코드 구조 파악, 모바일 화면 깨짐 원인 분류, 반응형 리팩토링 범위 정의 및 우선순위 설정
프로젝트 상세
1) 포트폴리오 소개 K-pop 아티스트 이상형 월드컵 투표 피드를 중심으로, Discord OAuth2 소셜 로그인 및 Spotify Preview 음악 미리듣기를 통합한 모바일 최적화 커뮤니티 플랫폼 데모를 구현합니다. 실시간 투표 스트림과 Discord 프로필 연동으로 팬덤 커뮤니티 경험을 설계합니다. 2) 작업 범위 - 이상형 월드컵 투표 피드: K-pop 아티스트 1:1 배틀 카드를 실시간
