질문사항
안녕하세요 오카방 여러분! 최근에 제가 오토레이아웃 기본간격에 대한 질문에 답을 드렸는데요. 어제 비슷한 회사에서 비슷한 질문을 받아서 관련 내용을 정리해보았습니다!
답변
Nudge는 상단 메뉴 Preferences > nudge amount에서 설정할 수 있습니다.
Small nudge와 big nudge?
둘을 간단하게 정의하면 small nudge는 키보드 방향키를 한번 눌렀을 때 객체가 움직이는 px, big nudge는 Shift + 방향키를 움직이는 px이라고 생각하면 이해하기 편합니다. 기본값이 1과 10으로 되어 있어 shift+방향키를 누를때 10px씩 움직입니다. small nudge는 0.1이 최소값입니다.
오토레이아웃 패딩의 기본값
big nudge의 값은 오토레이아웃을 만들 때 자동으로 생성되는 패딩값이기도 합니다. big nudge의 기본값이 10이기 때문에 오토레이아웃을 만들면 상하좌우에 10으로 패딩이 들어갑니다.디자인 시스템 spacing을 기준으로 값 정의하기
Nudge값을 활용해서 작업 효율을 극대화하려면 만들고 있는 프로덕트의 디자인 시스템에서 정의한 기본값을 big nudge로 설정해주면 됩니다.
예시로 ant design의 spacing을 보면 8배수로 설정되어 있는 것을 알 수 있습니다. 이제 big nudge의 값을 8로 바꾸면 오토레이아웃을 만들거나 객체끼리 간격을 벌릴때 shift+방향키로 움직이면 8px로 값들이 떨어지게 됩니다! 오토레이아웃 배딩값을 *N으로 곱하기도 자동으로 가능하니 8을 기준으로 *0.5=4 / *1.5=12 / *2=16 등등 편하게 8배수 처리할 수 있게 됩니다.
여러분도 작업하는 프로젝트의 nudge값을 바꿔서 활용해보세요 :)