BibleCardAI 랜딩 페이지 리뉴얼

BibleCardAI의 첫 페이지가 Hero 텍스트 + 기능 소개 카드 3장이 전부였다. 서비스가 뭔지 한눈에 안 보이고, 실제 결과물을 보려면 갤러리까지 들어가야 했다.

리뉴얼 목표는 단순하다. 들어오자마자 “이 서비스는 이런 카드를 만든다”가 보이게 하는 것.

구조

1. Hero — CTA 버튼 2개 (만들기 / 갤러리 둘러보기)
2. 인기 카드 무한 슬라이드 — 좋아요 많은 공개 카드
3. How it works — 3단계 (묵상 → AI 이미지 → 카드)
4. 스타일 갤러리 — 수채화, 바로크 등

Pinterest나 Midjourney처럼 masonry 그리드도 고려했지만, 카드 수가 아직 적고 모바일에서 가로 슬라이드가 더 임팩트 있어서 이 방식으로 갔다.

무한 슬라이드 구현

라이브러리 없이 requestAnimationFrame으로 구현했다. 핵심은 카드 배열을 2배로 복제해서 이어 붙이고, 절반 지점에서 offset을 0으로 리셋하는 것.

const doubled = [...cards, ...cards];

useEffect(() => {
    let offset = 0;
    const halfWidth = el.scrollWidth / 2;

    const tick = () => {
        if (!paused) {
            offset += 0.5; // px per frame
            if (offset >= halfWidth) offset = 0;
            el.style.transform = `translateX(-${offset}px)`;
        }
        requestAnimationFrame(tick);
    };
    requestAnimationFrame(tick);
}, []);

• transform: translateX로 GPU 가속 (will-change: transform)
• hover/터치 시 paused 상태로 일시정지
• 카드 클릭하면 /gallery?card=ID로 갤러리 모달이 열림

인기 카드 API

갤러리 API에 sort=popular 파라미터를 추가했다.

if sort == 'popular':
    query = query.order_by(CardModel.likes_count.desc(), CardModel.created_at.desc())

랜딩에서 ?sort=popular&per_page=20으로 호출해서 좋아요 많은 카드를 가져온다.

Tailwind 동적 클래스 주의

처음에 이렇게 썼다가 스타일이 안 먹었다:

// 안 됨 — Tailwind은 빌드 타임에 클래스를 추출하므로 동적 문자열 인식 불가
<div className={`bg-${color}-100`}>

이렇게 바꿔야 한다:

// 됨 — 전체 클래스명을 미리 선언
{ bg: 'bg-purple-100 dark:bg-purple-900/30', fg: 'text-purple-600' }
<div className={item.bg}>

결과

텍스트만 있던 페이지가 실제 카드가 흘러가는 페이지로 바뀌었다. 첫 방문자가 갤러리까지 들어가지 않아도 어떤 카드가 만들어지는지 바로 보게 됐다.

두 줄 무한 슬라이드 — 터치 스와이프, 마우스 드래그, 클릭 피드백

YouTube에서 보기