요약 슬라이드
고속도로 진입 — 인터랙션 추가하기
정적인 페이지에 버튼 클릭, 스크롤 반응, 애니메이션 등 사용자의 행동에 반응하는 '동적 요소'를 추가합니다.
정적(Static) vs 동적(Dynamic)
- 정적 웹사이트: 걸려 있는 액자처럼 보기만 하는 페이지 (시내 주행)
- 동적 웹사이트: 액셀을 밟으면 전진하듯 행동에 반응하는 페이지 (고속도로 주행)
인터랙션(Interaction)을 추가하면 사이트가 살아있는 것처럼 느껴집니다.
실전 1: 버튼과 호버 효과
작은 움직임만으로도 사용자 경험이 확 달라집니다.
- 부드러운 스크롤
메인 페이지에 "프로젝트 보기" 버튼을 추가하고, 클릭 시 프로젝트 섹션으로 부드럽게 스크롤되게 해줘. - 마우스 호버 효과
프로젝트 카드에 마우스를 올리면 살짝 떠오르면서 그림자가 생기는 효과를 넣어줘.
실전 2: 입력 폼 만들기 (방명록)
사용자의 입력을 직접 받아 화면에 출력해 봅니다.
실행 프롬프트
연락처 페이지에 방명록 폼을 만들어줘. 이름과 메시지를 입력하고 [남기기] 버튼을 누르면 아래 목록에 즉시 추가되게 해줘.
- 주의사항: 현재 단계에서는 새로고침 시 데이터가 사라집니다. '저장 장치(데이터베이스)'가 아직 없기 때문입니다. 이 한계는 3부에서 해결합니다.
실전 3: 생동감을 더하는 애니메이션
| 종류 | 프롬프트 예시 | 효과 |
|---|---|---|
| 스크롤 등장 | "스크롤 시 섹션들이 아래에서 위로 나타나게 해줘." | 콘텐츠 몰입도 향상 |
| 타이핑 효과 | "내 이름이 타이핑되듯 한 글자씩 나타나게 해줘." | 시각적 재미 추가 |
운전 요령: 한 번에 한 가지씩만
고속도로에서 갑작스러운 차선 변경이 위험하듯, AI에게도 너무 많은 효과를 동시에 시키면 충돌이 발생합니다.
- 나쁜 예: "스크롤 효과랑 타이핑 효과랑 배경 그라데이션 다 넣어줘."
- 좋은 예: 하나를 요청하고, 결과 확인 후 다음 효과를 추가합니다.
마일스톤 정리
- 클릭/스크롤 반응형 요소 추가 완료
- 입력 폼(방명록) 인터랙션 구현 완료
- 애니메이션을 통한 생동감 부여 완료