즐거움을 코딩하다: MoaHub 개발기

🏗️ 구조 잡기 (Next.js 14)

MoaHub의 핵심은 **"빠른 반응성"**이다. 사용자가 버튼을 누르자마자 결과가 튀어 나와야 한다. Next.js 14의 App Router를 도입하고, 대부분의 테스트 로직을 클라이언트 사이드에서 처리하도록 설계했다.

🃏 타로 카드 구현의 난관

'오늘의 타로' 기능을 만들면서 가장 공들인 부분은 카드 뒤집기(Flip) 애니메이션이다. CSS 3D Transform을 사용하여 실제 카드를 뒤집는 듯한 쫀득한 느낌을 주려고 노력했다.

// 카드 뒤집기 효과의 핵심
<motion.div
  initial={false}
  animate={{ rotateY: isFlipped ? 180 : 0 }}
  transition={{ duration: 0.6, animationDirection: "normal" }}
  onAnimationComplete={() => setIsAnimating(false)}
>
  {/* Front & Back Content */}
</motion.div>

🧠 MBTI 로직 설계

25개 문항만으로 정확한 MBTI를 도출하기 위해 각 문항에 가중치(Weight)를 부여했다. 단순히 E/I 점수만 합산하는 게 아니라, 답변의 강도에 따라 점수를 차등 부여하여 정확도를 높였다.

테스트를 만들다 보니 내가 더 재밌다. 친구들에게 프로토타입을 보여줬더니 반응이 좋다. "이거 언제 오픈해?"라는 말을 들으니 힘이 난다.