Visual Engineering with Next.js: Crafting the Perfect Pitch Deck

Key Takeaways

💡 핵심 요약

1. 슬라이드 덱 현대화: Next.js와 Tailwind CSS를 활용해 정적인 PPT를 넘어선, 반응형 웹 기반의 'K-뷰티 무역 OS' 피치 덱을 구현했습니다.
2. 디테일한 레이아웃 제어: flexbox와 negative margin을 전략적으로 사용하여, 기존 프레임워크의 제약을 넘어 디자이너가 의도한 초정밀 간격을 구현했습니다.
3. 라이브 데모 경험 강화: 정적인 이미지 대신 39MB 고화질 GIF를 최적화하여 탑재함으로써, 단순 설명이 아닌 '실제 작동하는 제품'의 경험을 슬라이드에 담았습니다.

The Challenge: "PPT Quality, Web Interactions"

In the world of B2B SaaS, the pitch deck is your first product. For Beauty Inside Lab, our goal was to move away from static PDFs and build a dynamic, web-based presentation deck that could evolve as fast as our code. The challenge? Making HTML/CSS look as polished as a designer's Keynote while maintaining the flexibility of a React application.

Today, we focused on Visual Engineering—the art of fine-tuning code to achieve pixel-perfect design harmony.

1. How do you handle complex slide layouts in Next.js?

A "one-size-fits-all" component never works for a pitch deck. We needed a flexible engine that could render a "Hero Title" one second and a "Complex Demo" the next.

We refactored our SlideContent.tsx to utilize a Switch-Case Pattern, allowing vastly different render trees to coexist within the same state management system.

The Strategy: Centralized Alignment

We moved from justify-between (which often creates awkward gaps on tall screens) to justify-center with explicit gaps. This ensures that whether viewed on a laptop or a 4K monitor, the content remains cohesively grouped.

// Before: Content pushed to edges
<div className="flex flex-col justify-between p-16">
 
// After: Tightly grouped visual narrative
<div className="flex flex-col justify-center gap-12 p-16">

2. Why use negative margins for visual impact?

Sometimes, standard utility classes (mb-4, mb-0) aren't enough. To create a sense of continuity between a Headline and its supporting Visual, we need them to feel "magnetically attached."

We utilized Negative Margins in Tailwind to override the natural flow of the DOM. By applying -mb-20, we pulled the Title Block partially into the space of the Content Block, creating a unified visual element rather than two separate boxes.

// SlideContent.tsx - Visual Compression
<div className="text-center -mb-20 relative z-10">
    <h2 className="text-5xl font-bold mb-3">{data.title}</h2>
    <p className="text-xl text-blue-600">{data.highlight}</p>
</div>

3. How to integrate heavy assets like GIFs efficiently?

A picture is worth a thousand words, but a Live Demo GIF is worth a thousand meetings. We faced a challenge where our 39MB high-fidelity demo GIF wasn't rendering correctly due to path resolution issues in Next.js.

The Fix: Asset Pipeline Verification

Responsive web apps often struggle with large static assets. We ensured our deployment pipeline and local environment synced perfectly by structuring our public/assets directory explicitly.

// slide-data.ts - Data-Driven Asset Loading
{
    id: 'slide-8',
    layoutType: 'solution-demo',
    data: {
        demoGif: '/assets/localization.gif', // Explicit path mapping
        demoCaption: 'Live Demo: Auto-Localization Engine',
        // ...
    }
}

By coupling this data structure with conditional rendering in React, we enabled a system where slides can "gracefully degrade" to a spinner if the asset hasn't loaded, or instantly show the high-fidelity demo when ready.

Conclusion

Building a product is hard; selling it is harder. By treating our Pitch Deck as a software product rather than a static file, we gain the ability to iterate on our narrative as quickly as we iterate on our code.

This project is part of our journey to expand K-Beauty globally using AI.