Position vs Offset 예시와 함께 비교 분석하기

[rriver2]

안녕하세요 ! 1기 리버입니닷 포럼 소식은 여름에 처음 들었었는데 겨울에서야 열었네요 ㅎㅎ

KWDC24 때 Animation 세션 듣고 영감을 받아 Animation 공부 중에 있는데, Position과 Offset을 명확하게 알지 못한다는 생각에 오늘 하루 종일 삽질을 해봤습니닷 !! 제 블로그에서 가지고 온 거라 반말인 점 죄송합니다.. 그럼 재밌게 봐주세요 ~!

🔮 우선 알아야 하는 개념

1) 무엇을 기준으로 이동하는가

공홈에서 설명하는 것처럼 View의 위치를 미세하게 조정하는 방법은 2가지가 있다.

바로 Offset과 Position!

설명하는 바에 따르면 아래로 정리할 수 있다.

Offset: 뷰의 렌더링된 콘텐츠를 현재 위치에서 이동
Position: 부모 내에서 명시적 위치를 설정

Offset은 원래 있어야 하는 자리 기준으로 이동, Position은 부모 뷰의 자리를 기준으로 이동한다.

1) 이동은 어디서 어디로 하는가

일반적으로 우리가 쓰는 수학 좌표계랑 좀 다르게 우측으로 이동할 수록 X는 증가하고, Y는 아래로 갈 수록 증가한다.

🔮 기본 단계

우선 이 뷰를 기준으로 Offset과 Position의 차이를 알아보려 한다.

        ZStack {
            Crosshairs()
            Rectangle()
                .stroke(Color.primary)
            Image(systemName: "circle")
        }
        .frame(width: 160, height: 160)

이런 과녁 모양에서 Circle이 이미지를 이동시킬 것이다.

자 그럼 본격적으로 하나는 Offset이고 하나는 Position !!으로 코드를 수정해보자.

        ZStack {
            Crosshairs()
            Rectangle()
                .stroke(Color.primary)
            Image(systemName: "circle")
                .offset(x: 40.0, y: -40.0) // Offset을 사용
        }
        .frame(width: 160, height: 160)
        
        
        ZStack {
            Crosshairs()
            Rectangle()
                .stroke(Color.primary)
            Image(systemName: "circle")
                .position(x: 144, y: 80)  // position 사용
        }
        .frame(width: 160, height: 160)

위에서 이야기했던 대로

Offset: 뷰의 렌더링된 콘텐츠를 현재 위치에서 이동
Position: 부모 내에서 명시적 위치를 설정한다. 

따라서 Offset의 기준점과 Position의 기준점은 다음과 같다.

👇🏻 이 기준점을 생각하면서 보면 이해가 되는 Offset과 Position의 차이

🔮 심화 단계

다시 이 코드를 보고 어떻게 그려져야 하는 지 알 것 같으면 넘어가셔도 됩니다.

사실 공홈에서 저 예시보고 뭐야 쉽네 했는데, 실험을 하기 위해 코드를 작성하다보니까 또 어려움 봉착...

아는 줄 알았는데 모르겠...^_^

당황하지 않고 정의 다시 읽어보기.

Offset: 뷰의 렌더링된 콘텐츠를 현재 위치에서 이동
Position: 부모 내에서 명시적 위치를 설정

뭘 모르는 지 가만히 생각해보면, Offset에서는 현재 위치를 알아야지 이 뷰가 어디 그려지는 지 알 수 있고,
Position에서는 부모뷰가 어떻게 그려져야 하는지 이 뷰가 어디 그려져야 하는 지 알 수 있다.
그런데 어떤 기준으로 해야 하는지 순서도 잘 모르겠고 당황스러운 ..게 문제..

모르겠는 마음에 답답해서 서칭을 계속 하다가 엄청난 WWDC 영상을 발견했다.

Building Custom Views with SwiftUI 라는 영상인데, 스유에서 뷰가 어떻게 그려지는 지에 대한 내용을 담은....

Hstack이나 Vstack과 관련한 내용들도 설명되어 있다. 솔직히 처음 Hstack이나 Vstack을 공부할 때 이 영상을 보면 더 머리가 아플 거 같기는한데,,, 조금 이해도가 있고 영상을 보니까 뭔 말인지 알 것 같았다. (0번부터 차례대로 읽어보면 됩니다..!)

이렇게 View가 그려질 때 RootView에서 위치를 잡는 게 사실은 마지막에 일어나는 일임을 알 수 있다. 그니까 위치잡는 것을 알아보고 있는 우리가 헷갈리수밖에 ^^
그래서 머릿속에 해당 뷰의 위치를 떠올릴 때 폰에서 어디다! 라는 생각은 잠시 버리고 해당 뷰를 떼어서 생각해보는 것을 추천합니다..

WWDC에서 그렸던 View랑 비슷하게 나도 내가 짰던 예시코드를 그려봤다.
우선 Offset부터 처리해보자.
0번부터 차례대로 읽어보면 됩니다..!

Offset

Position

그리고 Position....

글로 설명하는 것보다 그림으로 같이 설명하는 게 나을 거 같아서,... 열심히 그렸습니다..
혹시 이해가 안 되시는 부분이 있다면 댓글로 알려주세요 !!

이건 젤 처음 물어봤던 것에 대한 정답 !!

---

ps. 나름 열심히 준비해서 왔다구 생각했는데 다른 분들 포스팅에 놀라며 갑니다....!!
다들 오늘도 빡코딩 하시어요 !!!

[Jaehwa-Noh]

@rriver2
좋은 자료 감사합니다. 한 가지 의문이 드는 것은
Yellow가 100 x 100 Frame으로 그려지는 것은 알겠는데, 왜 Green까지 100 x 100 Frame으로 그려지는 걸까요?