움직임(애니메이션)
버튼이 눌리는 느낌, 메뉴가 스르륵 열리는 것. 화면의 움직임이에요. 과하면 느려 보이고 없으면 싸 보여요. 어디에 얼마나 넣을지 기준을 잡아요.
쉽게 말하면
가게 자동문을 생각해 보세요. 자동문이 좋은 이유는 화려해서가 아니라, 손님이 다가갔을 때 열려 주기 때문이에요. 문이 너무 천천히 열리면 손님은 문 앞에 서서 기다려야 해요. 아예 안 열리면 무거운 유리문을 손으로 밀어야 하죠. 화면의 움직임이 딱 이거예요. 손님이 뭔가 했을 때 화면이 답하는 방식이에요.
그래서 움직임의 일은 예쁘게 보이는 게 아니에요. 방금 내가 한 일이 먹혔는지 알려주는 것이 일이에요. 버튼을 눌렀는데 화면이 아무 반응도 안 하면 손님은 고장 났다고 생각하고 한 번 더 눌러요. 그러면 주문이 두 번 들어와요.
판단 기준은 하나예요. 손님이 답을 기다리는 순간에만 움직여요. 손님이 기다리지 않는데 움직이면 그건 서비스가 아니라 방해예요. 이 한 줄로 이 문서의 거의 모든 판단이 끝나요.
지금 이 증상으로 오셨을 거예요
화면을 보다가 뭔가 이상해서 찾아오셨을 거예요. 증상별로 무슨 일이 벌어진 것이고, AI에게 뭐라고 말하면 되는지 정리했어요. 기술 용어를 외울 필요 없어요. 보이는 대로 말하면 돼요.
| 보고 계신 증상 | 실제로 벌어진 일 | 이렇게 말하세요 |
|---|---|---|
| 글씨가 스르륵 나타나는데 자꾸 기다려야 해요 | 등장 효과가 너무 길어요. 0.5초만 넘어도 사람은 답답해져요 | "나타나는 효과가 너무 느려요. 훨씬 짧고 빠르게 해주세요" |
| 스크롤을 내려야 글이 나타나요. 안 내리면 빈 화면이에요 | 스크롤에 반응하는 등장 효과가 첫 화면까지 덮었어요 | "첫 화면 내용은 스크롤 없이 바로 보이게 해주세요. 등장 효과는 아래쪽만요" |
| 폰에서 화면이 뚝뚝 끊겨요 | 한 화면에 움직이는 게 너무 많아요. 폰은 컴퓨터보다 힘이 약해요 | "폰에서 화면이 끊겨요. 움직이는 걸 줄이고 가볍게 해주세요" |
| 배경이 계속 움직여서 글을 못 읽겠어요 | 멈추지 않는 반복 움직임이 시선을 계속 끌어가요 | "배경 움직임을 멈춰주세요. 글 읽는 데 방해돼요" |
| 버튼을 눌렀는데 눌린 것 같지가 않아요 | 반응이 없는 거예요. 이건 과한 쪽이 아니라 없는 쪽 문제예요 | "버튼을 누르면 눌린 느낌이 나게 해주세요" |
| 메뉴가 툭 하고 튀어나와서 놀라요 | 닫힘에서 열림으로 한 번에 튀어요. 중간이 없어요 | "메뉴가 부드럽게 열리게 해주세요. 아주 짧게요" |
| 화면이 번쩍번쩍해서 눈이 아파요 | 빠른 깜빡임이에요. 취향 문제가 아니라 안전 문제일 수 있어요 | "번쩍이는 효과는 전부 빼주세요" |
| 글자가 한 자씩 타이핑되듯 나와서 오래 걸려요 | 타이핑 효과예요. 한 번 보기엔 재밌지만 두 번째부터는 장애물이에요 | "타이핑 효과를 빼고 글이 바로 보이게 해주세요" |
말할 때 요령이 하나 있어요
"움직임 다 빼주세요"라고 말하지 마세요. 그러면 버튼 반응까지 사라져서 화면이 죽어 버려요. 어느 부분이 문제인지 짚어서 말해요. "첫 화면 등장 효과가 느려요"처럼요. 한 번에 하나씩 말하는 요령은 프롬프트 문서에 더 있어요.
- 1먼저 폰에서 봐요. 대부분의 손님이 폰으로 봐요. 컴퓨터에서 매끈했던 효과가 폰에서 끊기는 일은 아주 흔해요.
- 2어느 부분인지 짚어요. "화면"이 아니라 "첫 화면 제목", "예약 버튼", "배경"처럼요.
- 3증상 그대로 한 문장으로 말해요. 원인을 짐작해서 말하지 않아도 돼요. 짐작이 틀리면 엉뚱한 데를 고쳐요.
- 4고친 뒤에 다시 폰에서 봐요. 한쪽을 고치면 다른 쪽이 어색해지는 일이 있어서, 눈으로 확인하는 게 제일 빨라요.
움직임은 크게 네 종류예요
다 같은 움직임처럼 보이지만 하는 일이 달라요. 이 넷만 구분되면 증상이 생겼을 때 어디를 짚어야 할지 바로 보여요.
| 종류 | 언제 움직이나 | 예 | 판단 |
|---|---|---|---|
| 반응 | 손님이 만졌을 때 | 마우스를 올리면 버튼이 밝아지고, 누르면 살짝 들어가요 | 거의 항상 넣어요. 가장 값싸고 가장 이득이 커요 |
| 전환 | 화면이 바뀔 때 | 메뉴가 열리고, 팝업이 뜨고, 다음 장으로 넘어가요 | 넣어요. 대신 짧게요 |
| 등장 | 화면에 처음 나타날 때 | 스크롤을 내리면 사진이 흐린 상태에서 또렷해져요 | 아래쪽만 골라서요. 첫 화면은 빼요 |
| 주목 끌기 | 저절로, 계속 | 배경이 흐르고 배너가 알아서 넘어가요 | 대부분 불편의 범인이에요. 없어도 되는지 먼저 물어요 |
범인은 대개 넷째예요
화면이 어수선하거나 어지럽다는 느낌은 거의 저절로 계속 움직이는 것에서 나와요. 손님은 아무것도 안 했는데 화면만 혼자 바쁜 상태요. 이런 걸 하나만 멈춰도 화면 전체가 갑자기 차분해지는 걸 보실 거예요. 반대로 첫째인 반응은 부족해서 문제가 되는 쪽이에요.
어디에 넣고 어디에 안 넣나
넣을 자리와 안 넣을 자리가 꽤 또렷하게 갈려요. 손님이 답을 기다리는 자리에는 넣고, 손님이 읽고 있는 자리에는 안 넣어요.
| 자리 | 어떻게 | 왜 |
|---|---|---|
| 버튼과 링크 (마우스를 올릴 때, 누를 때) | 넣어요 | 여기는 눌러도 된다는 신호이자, 눌렸다는 답이에요. 없으면 고장 난 화면처럼 보여요 |
| 메뉴와 팝업이 열리고 닫힐 때 | 넣어요 | 어디서 나와서 어디로 들어갔는지 보여줘요. 갑자기 튀어나오면 놀라요 |
| 저장과 전송처럼 시간이 걸리는 일 | 넣어요 | 처리 중이라는 표시예요. 자세한 건 로딩 표시 문서에 있어요 |
| 첫 화면 (제일 먼저 보이는 부분) | 아껴요 | 손님이 제일 급한 순간이에요. 여기 효과는 멋짐이 아니라 느림으로 느껴져요 |
| 본문 글, 가격표, 설명 | 안 넣어요 | 읽으러 온 자리예요. 글이 움직이면 읽는 걸 방해해요 |
| 배경 (계속 도는 것) | 안 넣어요 | 멈추지 않는 움직임은 시선을 계속 빼앗고, 폰 배터리와 열도 먹어요 |
| 자동으로 넘어가는 배너 | 다시 생각해요 | 손님이 읽는 속도와 맞지 않아요. 다 읽기 전에 넘어가면 화가 나요 |
정리하면 움직임은 손님의 행동 옆에 붙어요. 손님이 뭔가 하지도 않았는데 저절로 움직이는 게 많다면 그건 줄여야 하는 쪽이고, 손님이 만지는 자리에 아무 반응이 없다면 그건 늘려야 하는 쪽이에요. 화면을 위에서 아래로 한 번 훑으면서 이 두 가지만 세어 봐도 고칠 목록이 그대로 나와요.
얼마나 넣나
넣는 자리를 정했으면 남은 결정은 길이 하나예요. 그리고 길이가 사실상 품질을 결정해요. 같은 효과라도 0.2초면 매끈하고 1초면 답답해요.
| 무엇 | 적당한 길이 | 느낌 |
|---|---|---|
| 버튼 색이 변하고 눌린 표시가 나기 | 0.1초에서 0.2초 | 거의 못 느끼지만, 없으면 뻣뻣해요 |
| 메뉴와 창이 열리고 닫히기 | 0.2초에서 0.3초 | 어디서 나왔는지 보이는 정도 |
| 페이지가 바뀔 때 | 0.3초에서 0.4초 | 넘어갔다는 걸 알려주는 정도 |
| 그보다 긴 것 | 0.5초를 넘어가면 | 손님은 멋지다고 안 하고 느리다고 해요 |
0.2초가 얼마나 짧은지 감이 안 오실 거예요. 사람이 눈을 한 번 깜빡이는 데 대략 0.1초에서 0.4초가 걸려요. 그러니까 잘 만든 움직임은 눈 한 번 깜빡이는 사이에 끝나요. 눈 깜빡이는 것보다 오래 걸리는 효과라면 그건 손님을 붙잡고 있는 거예요.
사장님과 손님이 보는 횟수가 달라요
사장님은 이 화면을 100번 봐요. 그래서 심심하게 느껴져요. 손님은 한 번 보고 살지 말지 결정해요. 사장님이 "좀 밋밋한가" 싶은 정도가 손님에게는 딱 맞는 경우가 많아요. 처음 볼 때 멋진 효과는 스무 번째에는 장애물이 돼요.
예약이 네 건 들어와요. 손님은 고장 났다고 생각하고 나가요. 전화로 사과하는 일까지 생겨요.
한 번 눌렀고 먹혔다는 걸 알아요. 그래서 기다려 줘요. 중복 예약도 없어요.
사장님이 실제로 겪는 장면
장면 1 · 외주 개발자가 말했다
“모션은 최소화하는 방향으로 갈게요. 트랜지션은 200으로 통일하겠습니다.”
200은 200밀리초, 즉 0.2초예요. 통일하겠다는 건 화면마다 속도가 다르면 어수선하니 같은 값으로 맞추겠다는 뜻이고, 좋은 판단이에요. 다만 "최소화"가 "아무것도 없음"이 되면 안 돼요. 버튼 반응은 남겨 주세요라고 한마디 보태면 돼요.
장면 2 · 가족에게 폰으로 보여줬다
“저는 멋있었는데 어머니는 화면이 자꾸 움직여서 어지럽다고 하시네요.”
취향 차이가 아니에요. 큰 화면 움직임은 사람에 따라 실제로 멀미와 어지럼을 일으켜요. 그래서 폰과 컴퓨터에는 "동작 줄이기" 같은 설정이 있고, 웹 화면은 그 설정을 읽을 수 있어요. AI에게 "동작 줄이기 설정을 켠 손님에게는 움직임을 빼주세요"라고 말해 두면 돼요. 접근성 문서와 이어지는 이야기예요.
장면 3 · 손님 후기를 읽었다
“폰으로 열었는데 글씨가 안 보여서 그냥 닫았어요. 로딩이 오래 걸리는 것 같더라고요.”
손님은 효과와 로딩을 구분하지 못해요. 화면에 아무것도 없는 시간은 이유가 무엇이든 느린 가게로 기억돼요. 등장 효과 때문에 첫 화면이 잠깐 비어 있다면, 그 효과는 손님을 내보내는 값을 치르고 있는 거예요. 멋을 포기하는 게 아니라, 멋을 첫 화면 아래로 옮기는 게 답이에요.
자주 묻는 것
- Q. 그럼 움직임을 다 빼는 게 안전한가요?
- 안전하지 않아요. 반응이 없는 화면은 싸 보이기도 하고, 고장 난 것처럼 보이기도 해요. 특히 버튼은 눌린 표시가 없으면 손님이 여러 번 눌러요. 빼는 게 아니라 자리와 길이를 정하는 것이 답이에요.
- Q. 화려하게 하고 싶은데 느려질까 걱정돼요
- 화려함과 느림은 같은 데서 오지 않아요. 무거운 건 큰 사진, 자동 재생 영상, 멈추지 않는 배경이에요. 짧은 반응 효과는 거의 공짜예요. 화려함은 오히려 색과 글꼴과 사진 품질에서 더 크게 나와요. 브랜드와 글꼴 쪽을 손보는 게 효과가 커요.
- Q. 스크롤할 때 나타나는 효과, 요즘 다 하는데 쓰면 안 되나요?
- 써도 돼요. 규칙 두 개만 지키면 돼요. 첫 화면은 건드리지 않기, 그리고 위로 다시 올렸을 때 사라지지 않기. 올렸다 내렸다 할 때마다 다시 나타나면 손님은 화면이 불안하다고 느껴요.
- Q. 컴퓨터에서는 괜찮은데 폰에서만 끊겨요. 왜 그래요?
- 화면은 1초에 60번씩 다시 그려져요. 한 번 그릴 때 쓸 수 있는 시간이 0.016초쯤이에요. 움직이는 게 많으면 그 시간을 못 지키고 몇 번을 건너뛰는데, 그게 눈에는 끊김으로 보여요. 폰은 컴퓨터보다 여유가 적어서 먼저 티가 나요. 속도 문서와 같은 뿌리예요.
- Q. 효과가 마음에 안 드는데 뭐라고 말해야 할지 모르겠어요
- 기술 이름을 찾지 마시고 느낌을 말하세요. "튀는 느낌 없이 차분하게 멈추게 해주세요", "통통 튀지 말고 스르륵 나오게 해주세요", "전체적으로 조금 더 빠르게요". 이런 말이 용어보다 더 잘 통해요.
- Q. 손님이 어지럽다고 하면 어떻게 해야 하나요?
- 큰 움직임부터 찾아요. 화면 전체가 밀리거나 확대되거나 회전하는 것들이요. 그걸 흐려지면서 나타나는 정도로 바꾸면 대부분 해결돼요. 그리고 동작 줄이기 설정을 켠 손님에게는 효과를 빼도록 한 번 요청해 두세요.
- Q. 게임이나 영상 같은 건 다르지 않나요?
- 달라요. 게임이나 놀이 화면에서는 움직임 자체가 상품이라 기준이 반대로 갑니다. 여기서 말한 기준은 손님이 정보를 얻고 결정하러 오는 화면, 즉 가게 소개, 예약, 주문, 가격표에 해당해요. 놀러 오는 화면과 사러 오는 화면은 규칙이 달라요. 사장님이 만드는 게 어느 쪽인지 먼저 정하세요.
- Q. 직접 손으로 조절할 수도 있나요?
- 네, 화면 요소를 눌러서 직접 고치는 방법도 있어요. 다만 움직임은 눈으로 보면서 조금씩 줄이는 작업이라, 말로 시키고 결과를 보는 쪽이 보통 더 빨라요. 직접 고치기는 캔버스 편집 문서를 보세요.
확인해 보세요
제일 먼저 보이는 첫 화면에 1초짜리 등장 효과를 넣었어요. 손님은 어떻게 느낄까요?
하나 더
예약 버튼을 눌렀는데 화면에 아무 변화가 없어요. 가장 흔하게 벌어지는 일은?
직접 해보기
폰 모양 미리보기로 확인해 보세요
스튜디오에서는 만든 화면을 폰 모양 화면으로 볼 수 있어요. 컴퓨터에서 매끈했던 효과가 폰에서 끊기는지 여기서 먼저 걸러요. 끊기면 그 자리에서 "폰에서 끊겨요"라고 말하면 돼요.
스튜디오 열기더 깊이 (안 읽어도 괜찮아요)
왜 어떤 움직임은 무겁고 어떤 건 가벼운가 · 화면을 움직이는 방법이 크게 두 갈래예요. 하나는 요소의 자리와 크기를 실제로 바꾸는 방식인데, 이러면 브라우저가 주변 것들의 배치를 전부 다시 계산해요. 옆 칸도 밀리고 아래 줄도 내려가니까요. 다른 하나는 이미 그려 둔 그림을 그대로 옮기거나 투명도만 바꾸는 방식이고, 이건 계산이 거의 없어요. 그래서 같은 0.2초인데 하나는 매끈하고 하나는 끊겨요. 사장님이 이 구분을 외울 필요는 없어요. "폰에서 끊기니까 가벼운 방식으로 바꿔주세요"라고 말하면 AI가 가벼운 쪽으로 다시 짜요.
동작 줄이기 설정이라는 게 있어요 · 폰과 컴퓨터에는 화면 움직임을 줄여 달라는 시스템 설정이 있어요. 아이폰은 설정의 손쉬운 사용 안에, 윈도우는 접근성의 시각 효과 안에 있어요. 이 설정을 켜는 사람은 취향으로 켜는 게 아니라 어지럼이나 멀미 때문에 켜는 경우가 많아요. 웹 화면은 이 설정을 읽을 수 있어서, 켠 손님에게만 효과를 줄여 줄 수 있어요. 만든 화면에 큰 움직임이 있다면 이 대응을 넣어 달라고 한 번 말해 두는 게 좋아요. 손님을 잃지 않는 아주 값싼 배려예요.
깜빡임에는 넘지 말아야 할 선이 있어요 · 1초에 세 번을 넘겨 번쩍이는 화면은 빛에 예민한 사람에게 발작을 일으킬 수 있어서, 국제 웹 접근성 지침이 선을 그어 두고 있어요. 국내 웹 접근성 지침에도 같은 취지의 항목이 있어요. 취향이 아니라 안전 문제라는 뜻이에요. 눈길을 끌고 싶으면 깜빡임 대신 색, 크기, 여백으로 끌어요. 그게 더 세련되게 보이는 건 덤이고요. 손님 중 누가 여기에 해당하는지는 사장님이 알 수 없어요. 그래서 아예 선 근처에 가지 않는 쪽이 안전해요.
이것만 기억하세요
- ·움직임의 일은 예쁘게 보이는 게 아니라 반응했다고 알려주는 거예요
- ·버튼, 메뉴, 기다림에는 넣고 첫 화면, 본문 글, 배경에는 아껴요
- ·길이는 0.1초에서 0.3초. 0.5초를 넘으면 느리다고 느껴요
- ·용어 대신 증상으로 말해요. "폰에서 끊겨요", "나타나는 게 너무 느려요"
- ·사장님이 100번 볼 화면을 손님은 한 번 보고 결정해요