Popick

라부부로 알아보는 나의 성격 유형 😈

https://github.com/MAS-MIRIM/Popick_Frontend

• 담당 : 기획, FE 개발 (React Native)
• 25.07.26 ~ 25.07.27, U/THON 25

📢 소개

Popick은 인기 아트토이 '라부부' 캐릭터를 활용한 퍼스널리티 테스트 서비스입니다. 사용자들이 10개의 간단한 질문에 답하면, 자신과 가장 잘 맞는 라부부 캐릭터를 매칭해주는 모바일 애플리케이션입니다.

본 프로젝트는 U/THON 25 해커톤에서 2일간 진행되었으며, MZ세대의 트렌드인 아트토이 문화와 성격 테스트를 결합하여 재미있고 직관적인 사용자 경험을 제공합니다. React Native를 활용하여 iOS와 Android 플랫폼을 동시에 지원하는 크로스 플랫폼 앱으로 개발되었습니다.

특히 성격 테스트 결과를 바탕으로 맞춤형 유튜브 쇼츠를 추천하고, 다양한 라부부 캐릭터들을 수집할 수 있는 도감 기능을 통해 지속적인 사용자 인게이지먼트를 유도합니다.

📱 주요기능

1. 회원 관리

• 이메일 기반 회원가입 및 로그인
• JWT 토큰 기반 인증 시스템
• 자동 로그인 및 세션 유지

2. 성격 유형 테스트

• 10개의 이진 선택형 질문으로 구성
• 각 답변에 따른 라부부 캐릭터 포인트 계산
• 실시간 진행률 표시 및 애니메이션 효과

3. 테스트 결과 분석

• 8가지 라부부 캐릭터 중 최적 매칭
• 캐릭터별 상세 성격 설명 제공
• 결과 이미지 저장 및 SNS 공유 기능

4. 홈 피드

• 인기 라부부 캐릭터 트렌딩 표시
• 캐릭터별 좋아요 기능
• 배너 슬라이드 및 검색 기능

5. 유튜브 쇼츠 추천

• 성격 테스트 결과 기반 맞춤형 쇼츠 추천
• WebView를 통한 인앱 동영상 재생
• 무한 스크롤 및 페이지네이션

6. 캐릭터 도감

• 수집한 라부부 캐릭터 갤러리
• 캐릭터별 상세 정보 모달
• 수집 진행률 표시

7. 마이페이지

• 프로필 정보 관리
• 성격 테스트 재진행
• 좋아요한 캐릭터 목록
• 로그아웃 기능

🤲🏻 기여한 부분

• 아이디어 구체화 : 팀에서 제안한 아이디어를 정리하고, 기능으로 세분화하는 과정에 참여했습니다.
• 전체 FE 개발 : React Native를 활용한 크로스 플랫폼 모바일 앱 전체 개발
  • 컴포넌트 아키텍처 설계 및 구현
  • React Navigation 기반 화면 전환 로직
  • AsyncStorage를 활용한 로컬 데이터 영속성 관리
  • API 서비스 레이어 구현 및 타입 정의
  • styled-components를 활용한 스타일링
  • 성격 테스트 알고리즘 구현 및 결과 계산 로직
  • WebView 기반 유튜브 쇼츠 통합

💥 트러블슈팅

1. iOS 빌드 환경 설정 및 CocoaPods 의존성 충돌

문제 상황

• iOS 빌드 시 pod install 과정에서 지속적인 실패
• Ruby 버전 불일치로 인한 CocoaPods 실행 오류
• React Native 0.70.10과 호환되는 Pod 라이브러리 버전 충돌

해결 과정

1. rbenv를 통해 프로젝트별 Ruby 버전 관리 (3.2.2로 고정)
2. pod repo update 및 pod install --repo-update 명령으로 저장소 동기화
3. Podfile.lock 삭제 후 클린 빌드로 의존성 재구성
4. fix-android-manifests.js 스크립트 작성으로 Android 빌드 이슈 동시 해결

결과

• 안정적인 iOS/Android 동시 빌드 환경 구축
• 팀원들도 동일한 환경에서 빌드 가능하도록 문서화

2. TypeScript 환경에서 API 응답 타입 불일치

문제 상황

• 백엔드 팀과 별도로 개발 진행으로 인한 API 스펙 불일치
• 런타임에서 예상치 못한 undefined 에러 발생
• 성격 테스트 결과 계산 시 타입 에러로 앱 크래시

해결 과정

1. utils/api.ts에 타입 가드 함수 구현
2. Zod 스키마 검증 도입 검토 후 시간 제약으로 수동 타입 체크 구현
3. Mock 데이터와 실제 API 응답 간 전환 가능한 추상화 레이어 구축
4. 옵셔널 체이닝과 nullish coalescing으로 방어적 코딩

결과

• API 응답 불일치에도 앱이 크래시하지 않고 우아하게 처리
• 개발 중 Mock 데이터로 독립적인 프론트엔드 개발 가능

3. 성격 테스트 중복 제출 및 상태 관리 이슈

문제 상황

• 마지막 질문에서 "다음" 버튼 연속 클릭 시 결과가 중복 제출
• 비동기 상태 업데이트로 인한 race condition 발생
• 10개 질문 완료 후 11개, 12개의 답변이 서버로 전송되는 버그

해결 과정

1. useRef를 활용한 즉각적인 처리 상태 플래그 구현
2. 버튼 클릭 핸들러에 중복 클릭 방지 로직 추가
3. 답변 배열 길이 검증으로 추가 방어 로직 구현
4. 디바운싱과 쓰로틀링 기법 적용 검토

코드 예시

const processingRef = useRef(false);

const handleNext = async () => {
  if (processingRef.current || answers.length >= 10) return;
  
  processingRef.current = true;
  // ... 처리 로직
  processingRef.current = false;
};

결과

• 중복 제출 버그 완전 해결
• 사용자 경험 개선 및 서버 부하 감소

4. 짧은 개발 기간 내 MVP 구현

문제 상황

• 2일간의 해커톤에서 기획부터 배포까지 완료 필요
• 8명의 팀원 간 효율적인 협업 체계 구축 필요
• 완성도 있는 제품과 시간 제약 간의 균형

해결 과정

1. 핵심 기능 우선순위 정의 (성격 테스트 > 결과 표시 > 도감 > 쇼츠)
2. 컴포넌트 재사용성 극대화로 개발 속도 향상
3. styled-components 테마 활용으로 일관된 디자인 시스템 구축
4. Git Flow 간소화 및 실시간 코드 리뷰 진행

결과

• 계획한 모든 핵심 기능 구현 완료
• 안정적인 MVP 버전 해커톤 시연 성공