3편: 신비로운 UI를 코드로 — 다크 테마와 카드 애니메이션

 

시리즈: AI 협업 개발기: 타로 마스터 프로젝트
키워드: 프론트엔드 디자인, React 애니메이션, 다크 테마, CSS Grid, UX 설계

---

타로 앱의 UI는 일반 앱과 다르다

대부분의 웹 앱 UI 설계에서 가장 중요한 건 "명확함"이다. 사용자가 원하는 것을 빠르게 찾고, 쉽게 조작할 수 있어야 한다. 하지만 타로 앱은 다르다. 타로의 본질은 "경험"이다. 카드를 고르고, 뒤집고, 해석을 읽는 일련의 과정이 하나의 의식(ritual)처럼 느껴져야 한다.

이 점에서 UI 설계의 우선순위가 바뀌었다. 효율성보다 분위기가, 직관적 내비게이션보다 몰입감이 더 중요했다. 이 인식이 이후의 모든 디자인 의사결정을 이끌었다.

다크 테마를 선택한 이유

밝은 테마와 어두운 테마 사이에서 고민은 없었다. 타로의 신비로운 분위기를 살리려면 다크 테마가 필수였다. 하지만 "그냥 어두운 배경에 흰 글씨"는 아니었다.

색상 팔레트를 잡는 과정에서 Claude와 함께 핵심 컬러를 정의했다. 배경은 단순한 검정이 아닌 깊은 남색(#0a0a1a)으로 잡았다. 순수한 검정은 화면이 "죽어" 보이지만, 남색 계열은 밤하늘의 깊이감을 준다. 주 강조색은 골드(#d4a853)로, 타로카드의 금박 테두리에서 가져온 컬러다. 보조색으로 퍼플(#7b5ea7)을 사용해 신비로운 분위기를 더했다.

텍스트 컬러도 순수 흰색(#ffffff) 대신 따뜻한 톤의 아이보리(#e8e0d4)를 사용했다. 어두운 배경에서 순백색 텍스트는 눈이 피로하고, 무기질적인 느낌을 준다. 아이보리 톤은 양피지 위의 글씨 같은 느낌을 만들어준다.

별이 흐르는 배경: CSS 라디얼 그라데이션의 활용

배경에 움직이는 별을 넣기로 했다. 캔버스(Canvas)나 WebGL 같은 무거운 기술 대신, 순수 CSS로 구현하는 방식을 택했다. 성능 부담 없이 분위기를 만들 수 있기 때문이다.

핵심 기법은 radial-gradient의 중첩이다. 1~2픽셀 크기의 미세한 원형 그라데이션을 여러 개 겹치면 별처럼 보인다. 이걸 background-size로 패턴화하고 @keyframes로 천천히 이동시키면 별이 흘러가는 느낌이 된다.

세 개의 레이어를 겹쳐 깊이감을 만들었다. 첫 번째 레이어는 밝고 빠르게, 두 번째는 중간 밝기로, 세 번째는 어둡고 느리게 움직인다. 패럴랙스 효과의 CSS 버전인 셈이다. 골드색 별을 몇 개 섞으면 타로의 신비로운 분위기가 한층 살아난다.

이 아이디어는 Claude가 제안했고, 직접 CSS 코드까지 생성해줬다. 개발자가 "별이 흐르는 배경을 넣고 싶어"라고 의도를 말하면, AI가 구현 방법을 제시하는 전형적인 협업 패턴이었다.

카드 뒤집기 애니메이션: 3D transform의 세계

타로 앱에서 가장 중요한 인터랙션은 카드를 뒤집는 순간이다. 이 순간의 기대감과 설렘이 앱의 핵심 경험이다. 단순히 이미지를 교체하는 것으로는 부족하다.

CSS 3D transform과 Framer Motion을 조합했다. 카드의 앞면(카드 뒷면 디자인)과 뒷면(실제 카드 이미지)을 transform-style: preserve-3d로 묶고, 클릭 시 rotateY(180deg)를 적용한다.

여기서 중요한 디테일이 있다. 뒤집기 속도다. 너무 빠르면(0.3초 미만) 뒤집는 느낌이 안 나고, 너무 느리면(1초 초과) 답답하다. 0.8초에 cubic-bezier(0.4, 0, 0.2, 1) 이징을 적용한 것이 가장 자연스러웠다. 초반에 빠르게 가다가 마지막에 살짝 감속하는 곡선이다.

역방향 카드의 처리도 고민이 필요했다. 뒤집힌 후 이미지가 180도 회전된 상태로 보여야 하는데, 뒤집기 애니메이션과 역방향 회전이 겹치면 시각적으로 혼란스럽다. 해결책은 뒤집기가 완료된 후에 역방향 회전을 적용하는 것이었다. 두 애니메이션의 시간차를 두는 간단한 방법이지만, 체감 차이는 컸다.

세 가지 레이아웃: 원카드, 쓰리카드, 켈틱 크로스

각 리딩 모드마다 카드 배치가 다르다. 원카드는 화면 중앙에 크게, 쓰리카드는 수평으로 나란히, 켈틱 크로스는 전통적인 십자형 배치다.

원카드와 쓰리카드는 Flexbox로 간단하게 처리했다. 문제는 켈틱 크로스였다. 10장의 카드가 특정 위치에 배치되어야 하는데, 이 배치는 전통적인 규칙이 있다. 중앙에 현재 상황과 도전 카드가 십자로 겹치고, 위아래좌우에 4장, 오른쪽에 세로 4장이 놓인다.

CSS Grid가 이 문제를 깔끔하게 해결했다. 4×4 그리드를 잡고, 각 카드에 grid-column과 grid-row를 직접 지정하는 방식이다. 십자형 배치에서 두 번째 카드(도전/장애물)가 첫 번째 카드 위에 겹치는 문제도 Grid의 같은 셀 배치와 z-index로 처리했다.

반응형 대응은 카드 크기를 줄이는 것으로 해결했다. 데스크톱에서 120px 너비인 켈틱 크로스 카드를 모바일에서는 70px로 축소했다. 카드 이미지의 가독성이 떨어지지만, 레이아웃의 구조는 유지된다. 타로에서 카드의 "위치"가 의미를 가지기 때문에 레이아웃 자체를 바꾸는 것은 피했다.

폰트 선택: Cinzel과 Noto Sans KR의 조합

타이포그래피도 분위기에 큰 영향을 미쳤다. 본문은 Noto Sans KR로 가독성을 확보하고, 제목과 장식적 요소에는 Cinzel 계열을 사용했다.

Cinzel은 로마 비문에서 영감을 받은 세리프체로, 타로의 고전적인 분위기와 잘 어울린다. 특히 Cinzel Decorative는 더 장식적인 변형으로, 앱 타이틀 "타로 마스터"에 사용했다. 이 폰트에 text-shadow로 골드빛 글로우 효과를 주면 마법서의 제목 같은 느낌이 난다.

한 가지 주의한 점은 한글과 영문 폰트의 크기 차이다. Cinzel은 라틴 문자 기준으로 디자인되었기 때문에 같은 font-size에서 한글보다 작아 보인다. 모드 선택 버튼의 영문 부제(예: "One Card")는 font-size를 0.75rem으로 줄이고 letter-spacing을 넓혀 한글 제목과의 시각적 균형을 맞췄다.

화면 전환: 시작 → 리딩 → 결과

앱의 전체 흐름은 세 화면으로 구성된다. 시작 화면(모드 선택), 리딩 화면(카드 뒤집기), 결과 화면(해석 표시).

화면 전환에 Framer Motion의 AnimatePresence를 사용했다. 각 화면이 사라질 때 페이드아웃, 새 화면이 나타날 때 페이드인하는 기본 전환이다. 여기에 약간의 translateY 움직임을 더해 화면이 아래에서 올라오는 느낌을 줬다.

리딩 화면에서 결과 화면으로의 전환 타이밍도 중요했다. 마지막 카드가 뒤집힌 직후 바로 결과 화면으로 넘어가면 뒤집기 애니메이션을 제대로 감상하지 못한다. 1초의 딜레이를 둔 것은 사소하지만 체감 경험에 큰 차이를 만든다.

결과 화면의 정보 설계

결과 화면은 카드 이미지와 해석을 보여주는 곳이다. 정보의 양이 많기 때문에(켈틱 크로스의 경우 10장 × 해석 텍스트) 시각적 계층 구조가 중요했다.

각 카드 결과는 카드 이미지, 카드 이름, 위치 레이블, 키워드 태그, 해석 텍스트, 아르카나 뱃지로 구성된다. 카드 이미지를 왼쪽에, 텍스트 정보를 오른쪽에 배치하는 미디어 오브젝트 패턴을 사용했다. 역방향 카드의 이미지는 180도 회전시키고, 빨간색 "역방향" 뱃지를 표시해 시각적으로 구분했다.

키워드는 필(pill) 형태의 태그로 표시했다. 배경은 퍼플의 15% 투명도, 테두리는 퍼플의 30% 투명도로 잡았다. 이 수치는 별도로 의미가 있는 건 아니고, 다크 테마에서 눈에 편안하면서도 구분이 가능한 수준을 Claude와 반복 조정하며 찾은 것이다.

카드 뒷면 디자인: CSS로 그리는 신비로운 패턴

카드 뒷면(뒤집기 전 상태)도 디자인이 필요했다. 외부 이미지를 쓸 수도 있지만, 배경과 일체감 있는 디자인을 CSS만으로 만들기로 했다.

남색 바탕에 골드 보더, 중앙에 별 이모지와 "TAROT" 텍스트를 배치했다. 모서리는 둥글게(border-radius: 10px), 전체에 미세한 내부 그라데이션을 적용했다. 화려하진 않지만 통일감 있고 깔끔한 뒷면이 되었다.

이 결정은 의도적이었다. 카드 뒷면이 화려하면 뒤집기에 대한 기대감이 분산된다. 절제된 뒷면 → 화려한 앞면(실제 카드 이미지)의 대비가 뒤집기 순간의 임팩트를 높인다.

마이크로 인터랙션: 작은 것들의 힘

아직 뒤집지 않은 카드는 미세하게 위아래로 떠다니는(floating) 애니메이션이 적용된다. "나를 클릭해"라는 시각적 힌트이자, 카드가 살아있는 느낌을 준다.

뒤집을 수 있는 카드에 hover하면 scale이 1.05로 살짝 커진다. 클릭 시에는 0.95로 눌리는 듯한 피드백을 준다. 이 세 가지(float, hover scale up, click scale down)가 합쳐져 카드와 상호작용하는 실체감을 만든다.

결과 화면에서 각 카드 결과의 등장도 순차적이다. 첫 번째 카드 결과가 나타난 후 0.1초 간격으로 다음 카드가 나타난다. 이 스태거(stagger) 효과는 Framer Motion의 delay 속성으로 간단히 구현되지만, 정보가 "쏟아지는" 느낌 대신 "하나씩 밝혀지는" 느낌을 준다.

이 과정에서 배운 것

첫째, 분위기 중심의 UI 설계에서는 "무엇을 안 넣을 것인가"가 "무엇을 넣을 것인가"만큼 중요하다. 과도한 장식은 오히려 분위기를 해친다. 카드 뒷면의 절제, 별 배경의 투명도 조절, 텍스트 컬러의 따뜻한 톤 모두 "빼기의 미학"이었다.

둘째, CSS만으로도 상당한 수준의 시각적 효과가 가능하다. 별 배경, 카드 뒤집기, 글로우 효과 모두 라이브러리 없이 구현했다. 무거운 의존성 없이 분위기를 만들 수 있다면 그게 최선이다.

셋째, AI에게 "분위기"나 "느낌"을 전달하는 것도 가능하다. "밤하늘 같은 깊이감", "양피지 위의 글씨 같은 따뜻함"이라는 추상적 표현이 구체적인 색상 코드와 CSS 속성으로 변환됐다.

다음 편 예고

UI가 완성되었지만, 78장의 카드에는 이미지가 필요하다. 무료 이미지를 찾아 적용하는 과정이 생각보다 순탄치 않았다. 깨진 URL, 저작권 함정, 호스팅 불안정성과 싸운 이야기를 4편에서 다룬다.

---

이 글은 "AI 협업 개발기: 타로 마스터 프로젝트" 시리즈의 3편입니다.