Daily Work Report: Slide Deck Polish & Hybrid Layout Strategy

Date: 2026-01-18
Author: Beauty Insight Editor (Yongrak Park)
Tweak & Polish Focus: Visual Hierarchy, Layout Refactoring, Asset Management

1. Executive Summary (요약)

• 슬라이드 덱 현대화: 고품질 디자인(Big Bang 스타일)을 공개용 /slides 덱으로 성공적으로 이관하고, 오프닝 및 레이아웃 구조를 개선했습니다.
• 시각적 엔지니어링: 정밀한 레이아웃 제어(수직 중앙 정렬, 네거티브 마진, 고정 높이)를 구현하여 "컨설팅 펌 수준의 품질"을 달성했습니다.
• 인터랙티브 데모 강화: 프레젠테이션에 라이브 GIF 데모 기능을 통합하고, 에셋 경로 문제를 해결하여 끊김 없는 재생을 보장했습니다.
• 피치 덱 복원: 피치 덱 진입점을 원래대로 복원하고, 향후 확장성을 위해 하이브리드(16:9/스크롤) 반응형 전략을 수립했습니다.

2. Technical Implementation (구현 상세)

Frontend (Next.js/TypeScript)

• Slide Content Engine (SlideContent.tsx):
  • Layout Refactoring: Refactored three-columns and team-vision layouts to support justify-center and vertical grouping, eliminating excessive whitespace.
  • Visual Tuning: Implemented items-center and specific gap controls to align fixed-height elements (500px Demo Box) with dynamic text blocks.
  • Negative Margin Hack: Utilized -mb-20 property to forcefully reduce perceived visual gap between headers and content blocks for a tighter narrative flow.
  • GIF Integration: Added conditional rendering logic for demoGif in solution-demo layout, replacing static placeholders.
• Data Management (slide-data.ts):
  • Content Migration: Ported Big Bang Slide 1 data ("K-Beauty Trade OS Strategy") to the public deck.
  • Slide Reordering: Moved 'Business Opportunity' (Slide 4) to follow 'Our Solution' (Slide 8) to optimize the storytelling arc (Problem -> Solution -> Opportunity).
  • Asset References: Updated demo data to point to /assets/localization.gif.

Backend & Assets

• Asset Pipeline: Established public/assets directory structure and managed large media files (39MB GIF) for reliable serving.

3. Troubleshooting Log (문제 해결 로그)

[Visual Bug] Images (GIF) Not Loading

• Error Type: 404 Not Found for /assets/localization.gif.
• Root Cause: The file existed in public/ but the code referenced public/assets/, and the subdirectory did not exist.
• Solution: Created public/assets directory and executed a file copy command to move the GIF to the correct serving path. Validated using dir command.

[UI/UX] Excessive Vertical Whitespace

• Error Type: Visual/Design Flaw.
• Root Cause: Default mb-4 or mb-6 margins combined with justify-between spread content too far apart on high-resolution screens.
• Solution:
  1. Switched container alignment to justify-center.
  2. Applied mb-0 and subsequently negative margins (-mb-20) to the title block to visibly connect it with the content below.

4. Key Learnings & Decisions (배운 점 및 의사결정)

• Storytelling via Layout: The order of slides significantly impacts the narrative. Moving "Business Opportunity" after "Solution" reinforces the value of the solution rather than just stating market facts early on.
• Hybrid Responsive Strategy: For pitch decks, strictly adhering to "Mobile First" can compromise the desktop presentation experience. A hybrid approach (Fixed Aspect Ratio for Desktop, Scrolling for Mobile) is superior for dense information density.
• Negative Margins in Tailwind: While not always best practice, negative margins are a powerful tool for visual fine-tuning in rigid presentation layouts where default flow creates unwanted gaps.