인프런 커뮤니티 질문&답변
작성한 질문수
'Scroll To' 프로토타입 상세설정 'Offset' 플러스와 마이너스 설정 기준이 궁금합니다!
작성
·
12
0
안녕하세요 모멘트 강사님,
먼저 좋은 강의 만들어주셔서 감사합니다! :)
다름이 아니라 6강을 수강하는 와중에 'Scroll To' 액션에 대한 부분 중 'Offset' 수치의 음수와 양수를 선택하는 기준을 어떻게 이해하는게 가장 좋을지 궁금하여 질문 남깁니다.
강의 내에서는 스크롤하고자 하는 두번째 이미지가 상단 메뉴에 가려져 y축 기준으로 120px 내려보이게 하기 위해 y축의 offset 값을 '-120'으로 설정해야한다고 설명해주셨는데, 해당 부분이 직관적으로 이해되지가 않아서 다소 헷갈리는 것 같습니다.
관련 개념을 처음 접한 사람으로서 그동안 피그마 position 값을 y축 기준으로 +수치를 더할수록 아래로 내려간다고 이해하였는데, offset을 설정할 때는 이와 반대의 개념이어서 이에 대해 좀 더 쉽게 이해할 수 있는 방법이 없을까 궁금합니다.
긴 글 읽어주셔서 감사합니다!🙂
퀴즈
Figma에서 프로토타입 실행 시 가장 먼저 표시되는 화면을 지정하는 기능은 무엇일까요?
핫스팟
누들
플로우 스타트
디바이스 옵션
답변 2
0
안녕하세요, 좋은 질문입니다.
헷갈리는 이유가 자연스러운 부분입니다.position의 +/− 기준과 Scroll To의 offset 기준이 서로 다르기 때문입니다.
쉽게 말하면,
position의 y값은 객체 자체가 캔버스에서 어디 있느냐를 나타내는 값이고
Scroll To의 offset은 스크롤이 어디서 멈출지를 조정하는 값입니다.
즉, offset은 대상을 움직이는 값이 아니라 화면의 도착 위치를 보정하는 값이라고 이해하시면 훨씬 덜 헷갈립니다.
예를 들어 보면,
offset = 0
→ 스크롤 대상의 시작점이 화면 맨 위에 맞춰집니다.offset = -120
→ 화면이 목표 지점보다 120px 덜 내려가서 멈춥니다.
→ 그래서 대상은 화면 안에서 120px 더 아래에 보이게 됩니다.offset = +120
→ 화면이 목표 지점보다 120px 더 내려가서 멈춥니다.
→ 그래서 대상은 화면 안에서 더 위쪽에 보이게 됩니다.
질문 주신 사례에서는 상단 메뉴가 고정되어 있어서, 이미지가 정확히 맨 위에 오면 메뉴에 가려지게 됩니다.
그래서 메뉴 높이만큼(120px) 일찍 멈추게 해야 하고, 그 결과 y offset을 -120으로 주는 것입니다.
저는 이걸 보통 “객체를 움직이는 것”이 아니라 “카메라(화면)를 어디에 멈출지 정하는 것”으로 이해하면 쉽다고 생각합니다.
카메라가 조금 덜 내려가면, 같은 대상도 화면에서는 더 아래쪽에 보이기 때문입니다.
한 줄로 정리하면:
position의 +y는 객체를 아래로 보내는 값이고, Scroll To의 -offset은 스크롤 도착 지점을 위로 당겨서 객체가 화면에서는 아래로 보이게 하는 값입니다.
처음 접하면 헷갈리는 포인트가 맞아서,offset = 좌표 이동이 아니라 **스크롤 도착 위치 보정**이라고 기억하시면 이해가 훨씬 쉬우실 것 같습니다.
0
안녕하세요, 인프런 AI 인턴입니다. 두둥님,
Scroll To 기능의 Offset 설정에 대해 질문해주셔서 감사합니다. 피그마 같은 툴의 Offset 설정은 초보자에게는 약간 혼란스러울 수 있습니다. 피그마에서의 ‘Scroll To’ 기능은 사용자가 클릭했을 때 특정 위치로 스크롤할 수 있는 기능으로, 여기서의 ‘Offset’은 스크롤할 때 바로 이동할 위치를 약간 조정하는 데 사용됩니다.
- Offset의 의미: 스크롤 동작에서 Offset 값은 사용자가 선택한 위치로부터 얼마나 더 이동할지를 결정합니다.
- Offset이 음수일 때: 스크롤 목표보다 위쪽으로 이동합니다. 즉, 원하는 위치보다 더 위쪽을 보여주어야 할 때 유용합니다. 예를 들어, 위쪽에 메뉴바가 겹칠 경우 그 공간만큼 더 올라가야 하므로 음수 값을 사용합니다.
- Offset이 양수일 때: 스크롤 목표보다 아래로 이동하게 됩니다. 원하는 위치보다 아래쪽을 보여주고 싶을 경우입니다.
질문하신 상황에서는 상단 메뉴가 이미지의 상단 부분을 가리기 때문에, 해당 공간만큼 더 아래로 내려가 보여주어야 합니다. 그래서 Offset을 음수로 설정한 것입니다.
이해를 돕기 위한 심화 설명이나 예제는 피그마의 ‘Scroll To’ 기능 관련 공식 문서를 참고하시면 좋습니다. 그러나 피그마의 기본적인 좌표 시스템 이해는 추가적인 학습이 필요할 수 있습니다.
질문해주신 내용 이외에 더 궁금한 점이 있다면, 계속해서 질문해 주세요. 강사님께서 더욱 구체적인 예시와 설명으로 도움을 주실 것입니다.
저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.