Page History
...
| Note |
|---|
다운로드
Pencil 앱에서 .pen 파일을 열어 각 카드를 확인하고, 필요한 컴포넌트를 자신의 프로젝트에 복사하여 사용할 수 있습니다. 이 스킬은 모던하고 심플한 애니메이션 효과를 지원합니다. |
...
5. 실전 적용 —
...
노리의 여행 에필로그 홈페이지
축적한 애니메이션 템플릿의 실전 활용을 검증하기 위해, “AICC 전화상담 도입” 테마의 랜딩페이지를 “여행하는 노리의 에필로그” 테마의 개인 홈페이지를 제작했습니다. Pencil 디자인 파일을 참조하여 가능한 한 많은 컴포넌트와 애니메이션 효과를 파일의 22개 애니메이션 이펙트를 하나의 페이지에 적용하는 것이 목표였습니다.
Hero — 첫인상의 모든 것
적용된 13개 애니메이션 매핑
첫 화면에서 6가지 이펙트가 동시에 작동합니다: Animated Gradient BG(배경 그라디언트 흐름), Floating Particles(컬러 파티클 25개 부유), Rotating Spinner(3중 회전 링), Pulsing Glow(“노리” 이름 펄스), Typewriter Text(여행 문구 타이핑), Glass Effect Button(CTA 2종).
About — 아코디언과 컬러 필
Accordion Sections(CAT8)로 자기소개를 3단 접기/펼치기로 구현하고, Color-Animated Pills(CAT1)로 스킬 태그가 자동 순환하며 하이라이트됩니다. 스크롤 시 Scroll Reveal과 Elastic/Spring(CAT5) 진입 애니메이션이 적용됩니다.
Travels — 3D 플립 카드
Flip Card 3D(CAT5)가 핵심입니다. 4개 여행지 카드에 마우스를 올리면 Y축 180° 회전하며 뒷면의 여행 스토리가 나타납니다. CSS perspective + backface-visibility로 구현했으며, Elastic/Spring 진입 애니메이션과 결합됩니다.
Gallery — 순차 등장 그리드
Staggered List Entrance(CAT7)로 6개 사진 카드가 스크롤 시 순차적으로 등장합니다. IntersectionObserver로 뷰포트 진입을 감지하고, 각 아이템에 index×80ms 지연을 적용하여 캐스케이드 효과를 만듭니다.
Statistics — 원형 차트와 바 차트
데이터 시각화 카테고리(CAT9)의 3가지를 모두 적용했습니다: Circular Progress(SVG stroke-dashoffset으로 원형 진행률 4개), Animated Bar Chart(대륙별 방문 횟수 5개 바 캐스케이드), Parallax Scrolling(CAT6, 배경 레이어 0.15x 속도 차이).
Journey — 타임라인 슬라이드
Sliding Expandable Panel(원본 CAT)을 타임라인에 적용했습니다. 각 연도 아이템이 스크롤 시 왼쪽에서 슬라이드인하며, 색상이 다른 Breathing Pulse(CAT10) 도트가 시간의 흐름을 표현합니다.
Contact — 플로팅 라벨과 축하 효과
Floating Label TextBox(CAT1)로 3개 입력 필드를 구현하고, 전송 시 Toast/Snackbar(CAT2)가 우하단에서 슬라이드인합니다. 동시에 Confetti Burst(CAT11)가 60개 컬러 파티클을 터뜨려 축하 효과를 연출합니다.
적용된 22개 애니메이션 매핑
# | .pen 이펙트 | HTML 적용 위치 | 카테고리 | |
|---|---|---|---|---|
1 | Animated Gradient BG | 전체 배경 그라디언트 흐름 | CAT4 | |
2 | Floating Particles | 배경 25개 컬러 파티클 부유 | CAT4 | |
3 | Rotating Spinner | Hero 3중 회전 링 | 원본 | |
4 | Pulsing Glow | “노리” 이름 펄스 이펙트 | CAT4 | |
5 | Typewriter Text | Hero 여행 문구 타이핑 | CAT7 | |
6 | Glass Effect Button | Hero CTA 버튼 (primary + glass 배경 + hover 시 glow) | ||
Rotating Spinner | Hero 배경 3중 회전 링 | |||
원본 | ||||
7 | Ripple Effect | 버튼 클릭 시 ripple | CAT8 | |
8 | Marquee Ticker | 여행 명언 무한 스크롤 | CAT7 | |
9 | Accordion | About Me 3단 접기/펼치기 | CAT8 | |
10 | Sliding Expandable Panel | Feature 카드 hover 시 상세보기 슬라이드 | Color-Animated Control | 4단계 프로세스 필(pill) 자동 순환 |
Floating Label TextBox | CTA 폼 입력 필드 | |||
Material Toggle Switch | 구축 탭 내 전환 토글 | |||
Snackbar/Toast | “데모 신청” 클릭 시 슬라이드인 알림 | |||
Animated Progress Bar | 통계 섹션 & AI 정확도 바 | |||
Badge Counter Pop | 숫자 카운트업 애니메이션 | |||
Tab Control Slide | 도입과정 탭 슬라이더 | |||
Animated Gradient BG | 전체 배경 그라디언트 애니메이션 | |||
Floating Particle Dots | 배경 파티클 30개 부유 | |||
Pulsing Glow | Hero 태그라인 키워드 펄스 이펙트 | |||
Pills | 스킬 태그 순환 하이라이트 | 원본 | ||
11 | Flip Card 3D | 여행지 4개 카드 뒤집기 | CAT5 | |
12 | Staggered List | 갤러리 사진 순차 등장 | CAT7 | |
13 | Circular Progress | 여행 통계 원형 차트 4개 | CAT9 | |
14 | Animated Bar Chart | 대륙별 방문 횟수 바 차트 | CAT9 | |
15 | Parallax Scrolling | 통계 섹션 배경 패럴랙스 | CAT6 | |
16 | Elastic/Spring | 카드/통계 엘라스틱 등장 | CAT5 | |
17 | Sliding Expandable | 타임라인 아이템 슬라이드 | 원본 | |
18 | Breathing Pulse | 네비 온라인 도트 + 타임라인 도트 | CAT10 | |
19 | Floating Label | 컨택트 폼 3개 필드 | CAT1 | |
20 | Toast/Snackbar | 메시지 전송 시 슬라이드인 알림 | CAT2 | |
21 | Confetti Burst | 폼 전송 시 축하 파티클 | CAT11 | |
22 | Scroll Reveal | 모든 섹션 스크롤 진입 애니 | 공통 |
11개 카테고리 중 9개 카테고리의 이펙트가 단일 페이지에 적용되었습니다. 기존 원본(4개) + CAT1~11에서 18개를 활용하여 총 22개 애니메이션이 자연스럽게 통합됩니다13개 이펙트를 단일 페이지에 적용한 결과, Pencil에서 정적으로 설계한 애니메이션 의도가 실제 CSS/JS 애니메이션으로 충실하게 변환될 수 있음을 확인했습니다.
| Tip |
|---|
데모 확인: 첨부된 index nori-homepage.html 파일을 브라우저에서 열면 모든 애니메이션을 직접 확인할 수 있습니다. |
...