마이크로인터랙션3 UI 모션 디자인 (이징 함수, 타이밍, spring 물리) 디자이너라면 한 번쯤 클라이언트에게 "좀 더 부드럽게 해주세요"라는 말을 들어봤을 겁니다. 저도 5년 차 프리랜서로 일하면서 이 한마디 앞에서 막막했던 적이 한두 번이 아니었습니다. '부드러움'은 감각이 아니라 수치입니다. 이징 함수와 타이밍 구간을 제대로 이해하고 나서야 저는 그 막막함에서 벗어났습니다.이징 함수, 숫자로 부드러움을 만드는 법일반적으로 모션 디자인에서 200ms 안팎의 트랜지션이면 충분하다고 알려져 있습니다. 저도 그렇게 믿고 핀테크 모바일 앱 외주를 진행했었는데, 실제 사용자 테스트 결과는 생각과 달랐습니다.디폴트로 적용해둔 linear 200ms 트랜지션을 ease-out 280ms로 바꿨을 뿐인데, NPS(Net Promoter Score)가 6점에서 8점으로 올랐습니다. NPS란.. 2026. 5. 2. 하단 탭바 설계 (발견성, 터치타겟, 마이크로인터랙션) 솔직히 고백하자면, 저도 한때 햄버거 메뉴가 "깔끔하다"고 생각했습니다. 메인 화면을 건드리지 않아도 되고, 아이콘 하나로 모든 기능을 숨길 수 있으니까요. 그런데 모바일 뱅킹 앱을 리디자인하면서 그 생각이 완전히 뒤집혔습니다. 주요 기능에 도달하는 평균 탭 수가 3.2회에서 1.4회로 줄고, 첫 사용일 기준 작업 완료 시간이 12.8초에서 7.1초로 단축되는 걸 숫자로 확인하고 나서야 하단 탭바가 단순한 디자인 선택이 아니라 사용성의 핵심 구조임을 실감했습니다.발견성을 결정하는 구조, 탭바에 무엇을 담을 것인가앱을 처음 켠 사람이 "이 기능이 어디 있지?"라고 헤매기 시작하면 그건 콘텐츠 문제가 아니라 네비게이션 문제입니다. 저는 이것을 발견성(discoverability)이라는 개념으로 정리합니다. .. 2026. 4. 27. 마이크로 인터랙션 (타이밍, 스마트애니메이트, 디자인토큰) 버튼을 눌렀는데 아무 반응이 없는 것 같아서 한 번 더 누른 경험, 다들 있으실 겁니다. 저도 결제 플로우를 담당하면서 딱 그 문제를 마주했습니다. 중복 결제 이슈가 주 12건씩 접수되던 시절 얘기입니다. 원인을 파고들수록 결론은 하나였습니다. 버튼이 눌렸다는 신호를 사용자가 인지하지 못했던 것입니다. 마이크로 인터랙션은 그래서 존재합니다.왜 지금 타이밍 설계가 다시 화두인가마이크로 인터랙션(Micro Interaction)이란 사용자의 단일 행동에 반응하는 아주 작은 단위의 피드백 애니메이션을 말합니다. 좋아요 버튼이 채워지거나, 토글이 넘어가거나, FAQ 항목이 펼쳐지는 것처럼 0.1초 남짓한 움직임입니다.일반적으로 이런 작업은 구현 난이도가 낮다고 보는 시각도 있는데, 제가 직접 써봤는데 실상은 완.. 2026. 4. 25. 이전 1 다음
