Day 29 - TIL

📘 Day 29 - Today I Learned

🔍 Today’s Error or Issue

AutoLayout을 SnapKit으로 잡을 때 inset과 offset의 차이를 헷갈리곤 한다.

🛠️ Troubleshooting

그래서 SnapKit의 inset과 offset을 이해하기 위해 내가 떠올린 개념은 바로 “붙인다”와 “당긴다”이다.

한국어를 읽는 흐름처럼 왼쪽에서 오른쪽, 위에서 아래로 레이아웃을 구성한다고 생각해보면,

• top과 leading을 기준으로 뷰를 붙인다는 개념은 자연스럽게 양의 값이 되고,
• 반대로 bottom이나 trailing을 기준으로 당겨온다는 개념은 음의 값이 된다.

예를 들어 새로운 뷰를 기존 뷰의 아래에 붙이려면 → top 기준, 양수
기존 뷰의 위쪽에 뷰를 배치하려면 → bottom 기준, 음수

이 개념으로 생각하면 inset과 offset이 언제 필요한지도 훨씬 명확해졌다.

구분	의미	방향 감각 기준
inset	같은 방향의 anchor 끼리 제약	ex. top to top, leading to leading
offset	다른 방향의 anchor 끼리 제약	ex. bottom to top, trailing to leading

• 탑 / 리딩 기준
  → 새로운 뷰를 기존 뷰에 붙인다 → 양수
  (ex. 위에서 아래로, 왼쪽에서 오른쪽으로 덧붙이는 느낌)

• 바텀 / 트레일링 기준
  → 새로운 뷰를 기존 뷰 쪽으로 당긴다 → 음수
  (ex. 아래에서 위로, 오른쪽에서 왼쪽으로 끌어당기는 느낌)

간혹 밑에서 위로 개발을 해야하는 경우도 있지만…그런 경우를 제외하고는

📝 Learning Summary

💡 SnapKit 코드 기준 이해

$0.top.equalTo(view.snp.top).offset(20)        // 아래로 20만큼 붙이기 (top 기준 → 양수)
$0.bottom.equalTo(view.snp.bottom).offset(-20) // 위로 20만큼 당기기 (bottom 기준 → 음수)

anchor 기준	방향	양/음수 값 해석
top	아래 ⬇️	양수
bottom	위 ⬆️	음수
leading	오른쪽 ➡️	양수
trailing	왼쪽 ⬅️	음수

💡 TIP: leading과 trailing은 왼쪽/오른쪽의 위치가 아닌 글을 읽는 흐름을 기준으로 한것이다.

• leading은 글을 읽기 시작하는 방향 (시작점)
• trailing은 글이 끝나는 방향 (끝점)

언어 방향	leading	trailing
한국어, 영어 (LTR)	왼쪽	오른쪽
아랍어, 히브리어 (RTL)	오른쪽	왼쪽

📘 Lesson Learned

결론적으로,

• anchor가 같은 방향일 땐 inset을 쓰고,
• 방향이 다를 땐 offset을 쓰면 된다.

👉 개인적으로는 레이아웃 설계 시 위에서 아래, 왼쪽에서 오른쪽으로 배치하는 흐름을 유지하려고 한다.
그리고 가능한 한 음수 offset은 피하려고 한다.
왜냐하면 음수 값이 들어가면 가독성이 떨어지고 흐름을 해석하는 데 헷갈릴 수 있기 때문이다.