디자인 엔지니어링
좋은 인터페이스는 사용자가 하나하나 알아차리지 못하는 수많은 작은 디테일로 이루어집니다. 아래 각 디테일에는 이유가 있습니다. 그 이유가 해당되는 곳에 적용하고, 당신이 감탄하는 인터페이스가 왜 그런 느낌을 주는지 연구하세요.
작업에 맞는 스킬 선택
- 하나의 애니메이션을 만들어야 할 때:
animate. - 모션이 포함된 diff에 대한 판단이 필요할 때:
review-animations. - 코드베이스의 모션을 감사하고 계획할 때:
improve-animations. 움직임이 필요한 곳을 찾을 때:find-animation-opportunities. 제거해야 할 모션이 있을 때:remove-animations. - 여러 요소가 함께 움직여야 할 때:
choreograph. 프레임 드롭이 발생하는 애니메이션:animation-performance. - 웹에서의 드래그, 스와이프, 시트:
gestures. - 최악의 데이터로 스트레스 테스트할 컴포넌트:
break-ui. - Apple 수준의 제스처, 스프링, 머티리얼, 타이포그래피:
apple-design. - 폰에서 동작이 어색한 웹 앱:
mobile-native. - 선택할 컴포넌트 라이브러리:
pick-ui-library. - 하나의 UI에 대한 여러 방향:
prototype.
이 스킬은 나머지 부분인 컴포넌트 폴리싱과 모션 이상을 살펴보는 UI 리뷰를 다룹니다.
대부분의 문제를 잡아내는 규칙
- 애니메이션을 적용할지 말지 먼저 결정하세요. 하루에 100번 이상 보거나 키보드로 시작되는 액션에는 애니메이션을 넣지 마세요.
- 정확한 속성 이름을 명시하세요. 절대
transition: all을 사용하지 마세요. - 진입과 종료는
ease-out또는 강력한 커스텀 곡선(예:cubic-bezier(0.23, 1, 0.32, 1))을 사용하세요. UI에ease-in은 사용하지 마세요. - UI 애니메이션은 300ms 미만으로 유지하세요. 드롭다운은 150
250ms, press 피드백은 100160ms가 적절합니다. - 모든 누를 수 있는 요소에
:active상태(예:transform: scale(0.97))를 제공하세요. scale(0)에서 진입하지 마세요.scale(0.95)에서 시작하고opacity: 0을 함께 사용하세요.- 팝오버는 트리거를 기준으로 크기가 조정되어야 합니다(Base UI의
transform-origin: var(--transform-origin)). 모달은 중앙에 고정됩니다. - 사용자가 동작 중 재트리거할 수 있는 요소에는 keyframes 대신 transition을 사용하세요. transition은 현재 값에서 다시 목표값을 향해 부드럽게 이어집니다.
transform과opacity만 애니메이션하세요. Motion을 사용할 때는x,y단축 속성 대신 전체transform문자열을 사용하세요.prefers-reduced-motion을 존중하여 모션을 완전히 없애지 말고 부드럽게 줄이세요. 호버 효과는@media (hover: hover) and (pointer: fine)안에 배치하세요.
느낌을 코드만으로 판단할 수 없을 때는 그렇게 말하세요. 애니메이션을 2~5배속 또는 DevTools에서 프레임별로 재생해보고, 실제 기기에서 제스처를 테스트한 후, 다음 날 다시 확인하세요.
리뷰 형식
UI 리뷰는 Before, After, Why 열로 구성된 하나의 마크다운 테이블이며, 이슈당 한 행으로 작성합니다. "Before:"와 "After:"를 별도 줄에 절대 쓰지 마세요.
| Before | After | Why |
|---|---|---|
transition: all 300ms | transition: transform 200ms ease-out | 속성을 명시하세요; all은 의도하지 않은 것까지 애니메이션합니다 |
transform: scale(0) | transform: scale(0.95); opacity: 0 | 현실에서 아무것도 없는 데서 나타나는 것은 없습니다 |
버튼에 :active 상태 없음 | :active에 transform: scale(0.97) | 누름에는 즉각적인 피드백이 필요합니다 |
참고 자료
흔한 증상(숫자 떨림, 찌그러진 아바타, "1명의 멤버")에 대한 빠른 수정은 먼저 references/ui-cheatsheet.md를 확인하세요.
각 규칙의 이유와 코드(애니메이션 결정 프레임워크, 스프링, 컴포넌트 원칙(툴팁, 크로스페이드 대신 블러, @starting-style), transform, clip-path 패턴(탭, 길게 눌러 삭제, 이미지 나타내기, 비교 슬라이더), 드래그 및 제스처 처리, 성능, 접근성, 사람들이 좋아하는 컴포넌트 원칙, 스태거, 디버깅, 리뷰 체크리스트)는 references/craft.md를 읽어보세요.