기억력 카드 게임 피셔-예이츠 셔플 수식과 CSS 3D 플립 가이드

직접 해보기 →

뇌의 단기 기억력(Short-term Memory)과 작업 기억(Working Memory)을 훈련하고 집중력을 끌어올리는 가장 흥미진진한 고전 퍼즐 게임이 바로 **기억력 카드 뒤집기(Card Memory Matching Game)**입니다.

보드 대지 위에 짝을 이루는 이모지나 그림 카드를 뒤집어 놓은 뒤, 한 번에 두 장의 카드를 클릭하여 짝을 맞추고 일치하지 않을 경우 다시 엎어두는 심플한 규칙이지만, 프론트엔드 관점에서는 피셔-예이츠 셔플(Fisher-Yates Shuffle) 알고리즘과 CSS 3D preserve-3d 카드 뒤집기 플립 애니메이션이 결합된 훌륭한 웹 어플리케이션 예제입니다. 본 글에서는 무작위 카드 짝 셔플 알고리즘과 3D 카드 플립 연출법을 해설합니다.

---

1. 피셔-예이츠(Fisher-Yates) 셔플 및 매칭 판정 수식 공식

카드 게임이 매번 공정하고 불규칙한 초기 보드 배치를 생성하기 위해 무작위 셔플을 수행하는 시간 복잡도 O(N)의 피셔-예이츠 알고리즘 수식은 다음과 같습니다:

[ \text{Swap}\left(A[i], A[j]\right), \quad \text{where } j = \lfloor \text{Math.random}() \times (i + 1) \rfloor, \ i = N-1 \text{ down to } 1 ]

게임 상태 매칭 조건식:

• 선택 카드 C1, C2 비교: 두 카드가 동일한 심볼(C1.value === C2.value)이면 isMatched = true로 고정하고, 다르면 0.8초 후 transform: rotateY(0deg)로 복원 렌더링합니다.
• 이동 횟수(Moves) & 소요 시간(Timer) 평가: 짝을 맞추는 최단 턴 수를 보존하여 플레이어의 단기 기억 오차율을 점수로 판정합니다.

---

2. CSS 3D 카드 뒤집기 플립 인터랙션 소스

다음은 마우스 클릭 시 카드가 입체적으로 180도 회전하며 앞뒷면이 전환되는 모던 3D CSS 플립 소스입니다:

<div class="memory-card-grid">
  <div class="card-item flipped">
    <div class="card-inner">
      <div class="card-front">❓</div>
      <div class="card-back">🚀</div>
    </div>
  </div>
</div>

.memory-card-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  perspective: 1000px; /* 3D 공간 원근감 설정 */
}

.card-item {
  width: 90px;
  height: 120px;
  cursor: pointer;
}

.card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d; /* 자식 3D 변형 보존 */
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.card-item.flipped .card-inner {
  transform: rotateY(180deg);
}

.card-front, .card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden; /* 뒷면 가리기 */
  border-radius: 12px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 32px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.card-front {
  background: linear-gradient(135deg, #3b82f6, #1d4ed8);
  color: #ffffff;
}

.card-back {
  background: #ffffff;
  transform: rotateY(180deg); /* 초기 180도 회전 상태 */
}

[!NOTE] 매번 복잡한 3D 카드 뒤집기 자바스크립트 스크립트를 작성하여 테스트할 필요 없이, 기억력 카드 뒤집기 게임 도구를 직접 플레이해 보세요. 4x4 및 6x6 난이도 선택과 실시간 턴 수 기록을 통해 본인의 작업 기억력을 재미있게 테스트하고 측정할 수 있습니다.

---

3. 실무 퍼즐 개발 시 상태 관리 주의 수칙

1. 연속 클릭(Double-click) 버그 차단 방어막: 카드가 뒤집히고 매칭을 검사하는 0.8초 애니메이션 대기 시간 동안 세 번째 카드가 연속 클릭되어 게임 상태가 꼬이는 사고를 차단해야 합니다. isBoardLocked = true 플래그를 두어 매칭 판정이 완료될 때까지 터치 입력을 임시 차단하는 락(Lock) 처리가 필수적입니다.
2. backface-visibility: hidden cross-browser 대응: 사파리 모바일 및 일부 안드로이드 브라우저에서 3D 회전 시 뒷면 그래픽이 앞면을 뚫고 나오는 잔상 현상이 생길 수 있습니다. -webkit-backface-visibility: hidden 벤더 프리픽스와 transform: translateZ(1px)를 추가하여 고르게 보정해야 합니다.