← 목록으로

Before/After 비교 캔버스

Side-by-side, 슬라이더 비교, 주석 기능

비교 뷰 #1 - 카드 디자인 개선

히어로 섹션 재디자인

Before

이전 디자인

기존 히어로 섹션입니다. 단순한 그라데이션과 기본적인 레이아웃을 사용했습니다.

문제점:

시각적 계층이 약함
CTA 버튼이 눈에 띄지 않음
텍스트 가독성 낮음

After

새로운 디자인

개선된 히어로 섹션입니다. 더 나은 타이포그래피와 명확한 시각적 계층을 적용했습니다.

개선사항:

✓ 명확한 시각적 계층
✓ 눈에 띄는 CTA 버튼
✓ 향상된 타이포그래피

주석 도구:

성과 비교

전환율

3.2%

+1.4% ↑

평균 체류 시간

2m 45s

+45s ↑

이탈률

42%

-12% ↓

접근성 점수

95/100

+18 ↑

비교 뷰 #2 - 슬라이더 방식

네비게이션 바 개선

Before

Logo

메뉴1 메뉴2 메뉴3

이전 디자인 문제점

모바일 친화적이지 않음
현재 페이지 표시 없음
접근성 부족

After

Logo

메뉴1 메뉴2 메뉴3

개선된 기능

✓ 반응형 디자인
✓ 활성 상태 표시
✓ ARIA 라벨 추가

⇄

주석 기능 예시

주석 목록

#1 여백 조정 필요

김디자이너 • 2024-01-29

#2 색상 대비 개선

이개발자 • 2024-01-29

## 97. Before/After 비교 캔버스 ``` Design a before/after comparison canvas for design reviews: **Layout Options**: **Option A: Side-by-Side**: ``` ┌─────────────────┬─────────────────┐ │ BEFORE │ AFTER │ │ (v1.0.0) │ (v1.1.0) │ ├─────────────────┼─────────────────┤ │ │ │ │ [Design A] │ [Design B] │ │ │ │ │ │ │ └─────────────────┴─────────────────┘ ``` - 50/50 split with labels - Synced zoom/pan - Same viewport dimensions **Option B: Slider Comparison**: ``` ┌─────────────────────────────────────┐ │ │◀─────────────▶│ │ │ BEFORE │ AFTER │ │ [Design A] │ [Design B] │ │ │ │ │ │ │ └─────────────────────────────────────┘ ◀══════[Drag Handle]══════▶ ``` - Draggable divider - Reveals before/after on drag - Touch-friendly handle **Option C: Toggle/Flip View**: ``` ┌─────────────────────────────────────┐ │ [Before ○] [After ●] │ ├─────────────────────────────────────┤ │ │ │ [Design B] │ │ (with fade animation) │ │ │ └─────────────────────────────────────┘ ``` - Toggle button switches view - Fade or flip animation - Keyboard: arrow keys to switch **Option D: Overlay Diff**: ``` ┌─────────────────────────────────────┐ │ Opacity: [────●────] 50% │ ├─────────────────────────────────────┤ │ │ │ [Before at 50% over After] │ │ Differences highlighted │ │ │ └─────────────────────────────────────┘ ``` - Opacity slider for overlay - Highlight pixels that differ - Color-coded changes **Annotation System**: ``` ┌─────────────────────────────────────┐ │ BEFORE AFTER │ │ ┌─────────┐ ┌─────────┐ │ │ │ Old │ ──▶ │ New │ [1] │ │ │ Button │ │ Button │ │ │ └─────────┘ └─────────┘ │ │ │ │ [1] Changed: padding 12px → 16px │ │ Reason: Better touch targets │ └─────────────────────────────────────┘ ``` **Annotation Marker Types**: | Type | Color | Icon | Use Case | |----------|--------|------|-----------------------------| | Added | Green | + | New elements | | Removed | Red | - | Deleted elements | | Modified | Blue | ~ | Changed properties | | Moved | Purple | ↔ | Repositioned elements | | Note | Yellow | ! | General callouts | **Change Description Panel**: ``` ┌─────────────────────────────────────┐ │ Changes Summary │ ├─────────────────────────────────────┤ │ [+] Added hero illustration │ │ [~] Modified: Button padding │ │ - Before: 8px 16px │ │ - After: 12px 24px │ │ [~] Modified: Heading size │ │ - Before: 32px │ │ - After: 40px │ │ [-] Removed: Decorative border │ │ │ │ Rationale: │ │ Improved visual hierarchy and │ │ accessibility (larger touch targets)│ └─────────────────────────────────────┘ ``` **Metadata Display**: - Befo ... (내용이 길어 일부만 표시됩니다)