이 글은 2026년 11월 6일에 썼습니다.
AI 도구는 하루가 다르게 바뀝니다. 하지만 페이지가 감당해야 할 적절한 움직임의 양과 한계는 쉽게 변하지 않습니다. hover 시의 미세한 변화, 짧은 transition, 버튼을 눌렀을 때의 절제된 반응 정도면 충분히 훌륭합니다. 뒤 배경이 흐린 유리 효과, parallax 패널, 항목들이 시차를 두고 튀어나오는 연출, carousel 슬라이드, 화면에 찰칵 고정되는 scroll snap 기능은 명칭을 정확히 알고 거절할 수 있으면 됩니다. 이 글은 화려한 애니메이션 가이드가 아니라, 움직임의 절제와 한계에 관한 이야기입니다.
AI 모델이 화면에 온갖 움직임을 쏟아붓는 이유는, 효과를 빽빽하게 넣는 것이 마치 많은 노력을 들인 것처럼 보이기 때문입니다. 아무런 움직임 없이 가만히 있는 페이지는 데모 시연장에서는 미완성처럼 보일지 몰라도, 실제 이용자의 대기실에서는 완성도 높은 화면으로 느껴집니다. 이 시리즈를 읽는 독자들의 현실은 대기실에 훨씬 가깝습니다. 햇빛 비치는 길거리에서 모바일 기기를 들고, AI의 첫 번째 언어가 아닐 수도 있는 문맥 속에서, 수강료를 확인하려는데 자꾸 움직이는 화면을 느긋하게 기다려줄 여유가 없는 환경 말입니다. 움직임은 오직 상태의 변화를 설명할 때만 정당화될 수 있습니다. 내가 화려한 효과의 이름을 알고 있다는 것을 과시하기 위해 쓰여서는 안 됩니다.
제 역할을 다하는 세 가지 유용한 움직임
hover는 마우스 커서가 조작 버튼 위에 머물 때 일어나는 미세한 변화입니다. 색상이 살짝 바뀌거나 link 문구에 밑줄이 들어가는 식입니다. 마우스를 쓰는 사용자에게 이 요소가 클릭 가능하다는 점을 정직하게 알려줍니다. 하지만 터치로 조작하는 손가락 환경에는 hover 동작이 존재하지 않습니다. 오직 hover 상태에서만 노출되는 정보는 모바일 사용자에게는 전혀 보이지 않는 정보가 되어버립니다. 프롬프트에 동일한 단서가 키보드 focus 상태에서도 똑같이 나타나게 하거나, 아니면 아예 hover에만 의존하는 요소를 두지 말라고 명시하십시오.
transition은 상태 변화가 이루어지는 짧은 시간을 의미하며, 보통 0.2초(5분의 1초) 안팎이 가장 적당합니다. 아무런 애니메이션 없이 1프레임 만에 갑자기 툭 튀어나오는 drawer는 고장 난 것처럼 느껴집니다. 반대로 열리는 데 1초나 걸리는 drawer는 답답하고 늦게 느껴집니다. 패널이 열리고 닫힐 때 짧고 자연스러운 transition을 적용하도록 지시하십시오. 다만 문장의 글자 하나하나마다 시차를 두고 transition을 넣지는 마십시오. 글을 읽는 행위는 화려한 이벤트가 아닙니다.
microinteraction은 사용자의 작은 행동에 대해 화면이 돌려주는 정교하고 작은 응답입니다. 저장 버튼을 누르면 잠깐 체크 표시로 변하며 완료되었음을 알려주거나, 선택한 칩 요소가 확실히 선택된 상태로 보이는 식입니다. toast 알림이 주는 정직함을 더 작은 요소 단위로 구현한 셈입니다. 마스코트 캐릭터가 춤을 추거나, 색종이가 날리거나, 효과음이 나는 큰 연출을 의미하는 것이 아닙니다. 한 문장으로 간단히 설명할 수 없는 효과라면 그것은 이미 과도하게 큰 연출입니다.
이름만 정확히 알아두고 거절하면 되는 효과들
이 아래의 단어들은 실제로 쓰이는 디자인 용어들입니다. 하지만 첫 페이지를 구축할 때 반드시 통과해야 하는 필수 요소는 아닙니다. AI 모델이 이런 효과를 은근슬쩍 제안해 올 때, 정확한 영어 이름으로 거절할 수 있으면 됩니다.
- Glassmorphism — 뒤 배경이 흐릿하게 비치는 유리 형태의 패널입니다. 그 위에 올라가는 텍스트의 가독성과 대비를 떨어뜨립니다. 글자를 읽기 어렵게 만든다면 유리 효과를 즉시 제거하십시오.
- Parallax — 배경 이미지가 텍스트 스크롤 속도와 다르게 움직이는 효과입니다. 어떤 사용자들에게는 어지럼증과 멀미를 유발합니다. 또한 움직임을 줄여달라는 사용자의 OS 시스템 설정과도 충돌을 일으킵니다.
- Bento — 크기가 제각각인 상자들을 격자로 배치하는 레이아웃으로, 도시락 모양에서 유래한 명칭입니다. 나중에 복잡한 데이터 현황판(dashboard)을 만들 때는 유용할지 몰라도, 첫 페이지에서는 정작 어떤 사실 정보가 중요한지 숨겨버립니다. 상자의 크기가 서로 위계를 다투기 때문입니다.
- Stagger — 목록 항목들이 시간차 지연을 두고 하나씩 스르륵 나타나는 연출입니다. 사용자는 즉시 읽을 수 있었던 목록을 덧없이 기다려야만 합니다.
- Carousel — 여러 카드나 이미지가 옆으로 슬라이드되며 넘어가는 띠 형태입니다. 대다수의 사용자는 첫 번째 슬라이드 이상을 넘어가지 않습니다. 중요한 사실 정보라면 슬라이드 속에 숨기지 말고 페이지 본문에 정직하게 배치하십시오.
- Scroll snap — 스크롤을 내릴 때 화면이 다음 전체 영역으로 찰칵 고정되는 기능입니다. 모바일 기기에서 훑어보려던 사용자를 구역과 구역 사이에 갇히게 만듭니다.
이런 장식 용어들을 프롬프트로 만드는 연습을 할 필요는 없습니다. 불러오지도 않았는데 AI가 알아서 적용해 두었다면 명확히 거절하면 됩니다. “No glass, no parallax, no carousel, no scroll snap. Short transitions only.” 이 한 문장이면 완전한 거절 프롬프트가 됩니다.
야외 길거리에서 마주하는 진짜 비용
누군가 가게 밖에 서서 강한 햇빛 아래 모바일 화면으로, 가게 안으로 들어가기 전에 수업 가격을 확인하려 합니다. 하지만 그가 받은 웹페이지는 가격 정보를 한참 뒤에 슬라이드로 보여주고, 이를 거리 풍경 사진 위에 얹어두었으며, 뒤 배경을 글자보다 느리게 움직이게 만들어 두었습니다. 어두운 사무실 책상 위 모니터 시연에서는 꽤 공들인 페이지처럼 보였을지 모릅니다. 하지만 쨍한 햇빛 아래에서는 글자가 흔들려 정직하게 믿고 읽을 수 없는 화면이 됩니다. 결국 그 사람은 스마트폰을 넣고 가게 안으로 직접 들어가 물어보게 됩니다. 그 웹페이지는 자신이 수행해야 했던 단 하나의 본래 역할에 실패한 것입니다.
모바일 기기가 유일한 컴퓨터이고 길거리가 곧 사무실인 환경에서는 이런 실패가 훨씬 더 빠르게 나타납니다. 어두운 방과 커다란 모니터가 전제되어야만 근사해 보이는 애니메이션 효과들은 결코 중립적인 기본값이 아닙니다. 디자인 작업실의 환경을 그대로 복사해 온 편향된 기본값일 뿐입니다. 부품과 효과의 정확한 영어 이름을 대는 것은 바로 이러한 부적절한 복사를 단호히 거절하는 방법입니다. 그 스타일 자체를 비난할 필요는 없습니다. AI 모델이 이미 알아듣는 영어 명사로 원하지 않는 요소를 콕 집어 말해주면 됩니다. 그래야 “더 예쁘게 만들어줘”라는 모호한 지시 아래로 불필요한 장식이 다시 슬그머니 들어오지 못합니다.
이러한 혼란을 막는 거절 프롬프트는 짧고 명확해야 합니다. 그래야 AI 모델이 “더 차분하게 만들어줘”라는 표현을 또 다른 형태의 어색한 장식으로 재해석하지 못합니다. 가격 표시에는 carousel 금지. 숫자 뒤에 glass 효과 금지. parallax 금지. 수업 목록에 stagger 효과 금지. drawer가 열리고 닫힐 때만 짧은 transition을 적용하고, 스마트폰 설정에서 움직임을 줄여달라고 한 사용자에게는 transition조차 적용하지 말 것. 평평하고 밝은 배경 위에 진한 텍스트 배치. 가격은 section의 가장 첫 번째 사실 정보로 보여줄 것. 이 프롬프트 문단은 한 번 잘 작성해 두면 올 한 해 동안 제작하는 모든 웹페이지에 그대로 재사용할 수 있습니다. AI 모델을 유혹하는 일시적인 화려한 효과보다 훨씬 오랫동안 정답으로 남을 것입니다.
화려한 효과보다 우선하는 사용자 설정
최신 운영체제(OS)는 사용자가 기기 설정에서 ‘움직임 줄이기(reduced motion)’를 선택할 수 있게 지원합니다. 이러한 사용자 측의 요청을 무시하고 애니메이션을 강제하는 페이지는 활기찬 화면이 아니라, 사용자가 명시한 필요성을 무시하는 무례한 화면입니다. 프롬프트에 이 조건을 반드시 넣으십시오. 움직임을 줄이기로 설정한 사용자에게는 슬라이드나 stagger 연출 없이 최종 완료 상태의 화면을 즉시 보여줄 것. 정보는 그대로 전달하되, 불필요한 이동 애니메이션은 취소하는 것입니다.
명확한 대비(contrast)는 그 어떤 일시적 유행보다 오래 지속됩니다. 사진 위에 얹은 글자, 유리 효과 위에 올라간 글자, AI 모델의 작업창에서는 우아해 보이던 옅은 회색 글자들. 이 모든 것들은 강한 햇빛 아래, 저가형 스마트폰 화면, 그리고 피로한 눈 앞에서는 보기 좋게 실패합니다. 특별한 이유가 없다면 평평하고 밝은 면 위에 진한 색 글자를 배치하도록 지시하십시오. 배경 면의 디자인 방식은 선택일 수 있어도, 잘 읽히는 글자는 결코 선택 사항이 아닙니다.
이번 시리즈를 관통하는 핵심은 수십 개의 디자인 정의를 외우는 것이 아니었습니다. 다음의 네 가지 핵심 의사결정이었습니다. AI 모델이 엉뚱한 추측을 하지 않도록 부품의 정확한 영어 이름을 댈 것. label과 사실 정보는 읽는 사람의 언어로 채워 넣을 것. 이 순간의 개입이 사용자를 멈추게 하는지, 화면을 나누어 쓰는지, 단순히 알리기만 하는지 명확히 선택할 것. 그리고 페이지를 사람이 편안히 읽을 수 있을 만큼 가만히 정지시켜 둘 것. 이 네 가지를 실천할 수 있는 사람은 실무를 가로막던 어휘의 장벽을 이미 뛰어넘은 것입니다. 나머지 용어들은 향후 페이지에서 진정으로 필요해질 때, 정확한 영어 이름으로 찾아 열어보면 되는 카탈로그일 뿐입니다.