효과사전

AI에게 이름으로 말하는 웹 효과

홈페이지·카드뉴스·상세페이지·대시보드·발표자료를 만들 때 · 주제 10개, 효과 180개

  1. 1보고 · 움직이는 예시를 보고 원하는 효과를 찾아요
  2. 2고르고 · 카드에서 효과의 정확한 이름을 확인해요
  3. 3말하기 · 그 이름으로 AI에게 정확하게 시켜요
1글자 효과18개

글자가 써지고, 바뀌고, 빛나요

LOOP
랜

제목 한 줄로 첫인상이 달라져요. 카드뉴스 제목, 발표자료 표지, 홈페이지 첫 문장에 바로 써요.

대표 효과
타이핑 효과형광펜 효과오도미터로테이팅 텍스트
이럴 때 필요해요#카드뉴스#발표자료#웹페이지
2등장·전환18개

나타나고, 사라지고, 넘어가요

LOOP
✓무료 배송
✓오늘 주문, 내일 도착
✓30일 무료 반품
✓구매 시 포인트 적립

같은 내용도 차례로 보여주면 훨씬 잘 읽혀요. 발표 장면 넘김, 숫자 강조, 목록 등장에 써요.

대표 효과
페이드 인스태거카운트업슬라이드 인
이럴 때 필요해요#발표자료#웹페이지#대시보드
3스크롤18개

화면을 내릴 때 생기는 일

LOOP
travel.co.kr
2026 SUMMER
여름 휴가 기획전
추천 여행지
🏝️ 제주 3박 4일 · ₩389,000
⛰️ 강원 숲속 캠핑 · ₩129,000
🌊 부산 바다 호텔 · ₩159,000
여행 상품 더 보기 →

긴 상세페이지와 소개 페이지를 끝까지 읽게 만들어요. 따라오는 메뉴, 읽은 만큼 차는 바가 대표적이에요.

대표 효과
스티키 헤더스크롤 진행 바패럴랙스헤드룸
이럴 때 필요해요#상세페이지#웹페이지#문서
4호버·제스처18개

마우스를 올리고, 누르고, 밀 때

LOOP
🥞
좋아요 1,203

버튼이 반응해야 눌렀는지 알 수 있어요. 눌림, 좋아요, 끌어서 순서 바꾸기처럼 손맛을 정해요.

대표 효과
호버 이펙트리플드래그 앤 드롭호버 줌
이럴 때 필요해요#웹페이지#상세페이지#대시보드
5내비게이션18개

원하는 곳으로 찾아가는 길

LOOP
가벼운 러닝화
₩89,000
상품정보리뷰 128문의 4
· 무게 230g, 아주 가벼워요
· 푹신한 쿠션 밑창
· 사이즈 230~290

메뉴가 정리돼야 길을 잃지 않아요. 문서를 디지털로 옮길 때 목차·탭·단계 표시가 뼈대가 돼요.

대표 효과
탭브레드크럼목차GNB
이럴 때 필요해요#웹페이지#문서#대시보드
6입력·폼18개

적고, 고르고, 체크하는 칸

LOOP
푸시 알림
주문·배송 소식
마케팅 알림
할인·이벤트 소식

신청서·설문·검색창을 만들 때 칸 하나하나의 이름을 알아야 원하는 대로 시킬 수 있어요.

대표 효과
플로팅 라벨토글 스위치자동완성텍스트 필드
이럴 때 필요해요#웹페이지#문서#대시보드
7피드백·상태18개

기다려요 · 됐어요 · 잘못됐어요

LOOP
실시간 접속자LIVE
1,271명
방금 전 업데이트 · 1초마다 새로 받아와요

모니터링 대시보드의 핵심이에요. 실시간 표시, 상태 표시, 오르내림 화살표, 불러오는 중 표시를 골라요.

대표 효과
스켈레톤토스트증감 표시스피너
이럴 때 필요해요#대시보드#웹페이지
8오버레이·컨테이너18개

화면 위에 뜨고, 접었다 펴는 상자

LOOP

정보를 한 화면에 다 늘어놓지 않고 필요할 때만 꺼내 보여줘요. 팝업, 바텀시트, 펼치기·접기.

대표 효과
모달바텀시트아코디언확인 창
이럴 때 필요해요#웹페이지#상세페이지#문서
9레이아웃18개

화면을 어떻게 나누고 놓을지

LOOP
NEWAI 사진 보정
🔋 배터리 하루 종일
5G
무게168g
💧 방수

카드뉴스 비율, 발표 슬라이드 구성, 대시보드 칸 나누기를 말로 정확히 지시할 수 있어요.

대표 효과
벤토 그리드좌우 분할사이드바 레이아웃히어로 섹션
이럴 때 필요해요#카드뉴스#발표자료#대시보드#상세페이지
10비주얼 스타일18개

전체 분위기와 질감

LOOP
이번 달 지출
₩482,000
지난달보다 12% 덜 썼어요
내역 보기

'세련되게 해줘' 대신 '글래스모피즘으로'처럼 원하는 느낌을 한 단어로 전할 수 있어요.

대표 효과
글래스모피즘다크 모드뉴모피즘플랫 디자인
이럴 때 필요해요#카드뉴스#발표자료#웹페이지