궁수의 전설 UI 수직 수평 스크롤 뷰 완벽하게 만들기

예전부터 궁수의 전설 UI가 정말 궁금했는데, 만들었습니다!
UI가 굉장히 세련되고 움직이는 게 신기해서 열심히 연구해 봤는데요
수직 수평 스크롤 뷰를 이용하면 많은 분야에서 멋진 UI를 만드실 수 있습니다
탭 버튼 움직이는 것도 만족스러워요~
보너스로 초간단 탭 메뉴도 이 영상에 포함했습니다
아래 탭 클릭시 수직으로 올라가는 것은 블로그와 스크립트 수정되었습니다.
스크립트 보기
goraniunity2d.blogspot.com/20...
프로젝트, 리소스 다운받기
drive.google.com/file/d/1QL3u...

[@asd10asdasdhb231]

너무 필요한 거였어요! 감사합니다

[@user-ij2ms7ld3n]

잘 봤습니다. 아주 좋은 영상이네요!!

[@ksong5589]

좋은 강의 감사합니다!!

[@user-cr7rj5vt2d]

잘 봤습니다~! 도움 많이 되었습니다~!

[@minsik1298]

너무 잘 보고 있습니다!! 시간되는대로 바로 따라해봐야겠네요

[@gorani_TV]

화이팅입니다!

[@user-vv2wp2ib4m]

잘 배웠습니다!! 감사합니다!

[@Cansur777]

이런 좋은 강의 너무 감사합니다.

[@gorani_TV]

😚

[@hq45637]

주말에 한번 만들어보겠습니다 좋은 영상 만들어주셔서 고맙습니다.

[@gorani_TV]

😉

[@young7497]

와 마침 찾고 있었는데 이런 보석같은 영상이... 덕분에 많이 배워갑니다! 감사합니다

[@gorani_TV]

💎💎

[@Gogibangpae]

공부 시작할때부터 지금까지 고라니님 영상 보면서 도움 정말 많이 받았습니다 ㅎㅎ 새로운 유튜브도 응원하겠습니다 감사합니다!

[@user-xn5yp4nb8j]

좋은 영상 감사합니다!

[@superloki92]

형님 너무 잘보고있습니다 개발하면서 형님 강의 하루에도 10번씩 돌려보고있습니다 정말 많은 참고되고있습니다 앞으로도 열심히 시청하겟습니다!!!

[@gorani_TV]

지나친 시청은 오예입니다 😁

[@user-ix5kc1yg6m]

잘 배웠습니다 감사합니다 !

[@shung0209]

좋은 영상 감사합니다~

[@DevGomDal]

너무 좋으니까 따봉 3개 드립니다!

[@gorani_TV]

저두 하트 세개 드립니다!

[@nullerror934]

이거 진짜 중요한건데 감사합니다 ㅎㅎ

[@user-nz9mt2ov5n]

이야.. 굿입니다

[@gorani_TV]

0:59 프로젝트 만들기 2:14 스크롤 뷰 만들기 5:47 드래그 이벤트 8:08 간격 정해주기 10:08 가까운 위치로 스냅 12:18 가속도로 스냅 16:20 수직 스크롤 뷰 만들기 18:17 자식 ScrollRect 재구성 20:09 수평은 부모, 수직은 자식 bool 21:09 부모에게 이벤트 넘겨주기 23:28 옆에서 왔으면 수직 스크롤 맨 위로 올리기 24:56 탭 버튼 26:31 탭 슬라이더 28:06 탭 버튼 크기 조정 28:56 탭 버튼 이미지 32:52 번외 - 초간단 탭 메뉴

[@user-xu5me9wo7z]

잘 봤습니다~

[@rupang8346]

항상 잘보고있어요

[@gorani_TV]

고마워요~

[@banothing4819]

쩐다!

[@user-xk1bt5fg4o]

와 대박 쩌러요!!

[@gorani_TV]

😆😆

[@user-nw6ue3ks4o]

오!!! 완전 유익합니다! ㅎㅎㅎ

[@gorani_TV]

감사합니다!

[@user-tu2qy1do2e]

잘 배워 갑니다~~~~! 선생님 ㅎㅎ

[@gorani_TV]

넹

[@gamedev.1166]

이거는 무조건 알아야하는 필수 강의구만요 ㅋㅋ 감사합니다 ㅋ 개꿀~

[@gorani_TV]

룰루랄라!

[@user-pm7xh4hu8r]

딱 필요한게 있네용

[@popomon1943]

정말 감사드립니다 ... 구세주 이십니다.

[@popomon1943]

이 영상에서 '가속도로 스냅' 부분 까지를 응용해서 제가 원하는 스크롤뷰를 구현 해보았습니다. 지금 구현하지 못한 것 하나랑, 버그가 하나 있는데 혹시 제가 올린 링크의 영상을 보시고 조언 해주실 수 있을까요 ? :( drive.google.com/file/d/1aAsmp96o2rfeWzq6430Cv0ij7dV6RfWb/view?usp=sharing 1. 드래그 중에도 컨텐츠 요소들의 위치나 크기를 조절하는 방법 (지금은 드래그를 마친 다음에만 크기가 바뀝니다.) 2. 맨 오른쪽까지 드래그하고 더 오른쪽으로 드래그하면 처음으로 돌아와지면서 이상하게 되는 현상 수정 이 두 가지를 하고싶은데 쉽지 않네요 ㅠ

[@nana_0427]

짱

[@woo_churu]

고라니 tv 너무 좋은데 많은 사람들이 봐줬으면 합니다!

[@gorani_TV]

+U_CHURU 우쭈루 진짜 감사해요!

[@najunwon]

형 사랑해요♡♡♡

[@gorani_TV]

(덜렁) ♡♡ 감사해요!!

[@user-cc3fm6vl3d]

개똑똑... 이게 스크롤의 변체인걸 이제 알앗다

[@CuteLanto]

엔트리라는 코딩사이트에서 ui만드는데 많은 도움 됐네요^^

[@gorani_TV]

엔트리까지!

[@user-sj9nl9ry4h]

인턴중에 앱만드는데 정직원되면 고라니님덕분입니다,,

[@gorani_TV]

🤗

[@lupo2189]

안녕하세요. 영상 보고 다 따라해서 덕분에 배너같이 쓰이는곳에 만들긴 했는데 다시 원래대로 돌아오는 무한 반복적인 방법은 지금까지 만든 스크립트에 추가 시키면 작동하나요? 아니면 새로운 스크립트를 짜야 하나요??

[@nkstudio9161]

오호.. 네이티브 안드로이드 어플에서 자주보는 스크롤 뷰인데, 저도 예전에 해당 스냅이 되는 스크롤 뷰를 구현하려고 했으나, 국내에 좋은 자료가 없어서 아쉽더라구요.. 좋은 강의 만들어주셔서 감사합니다! 혹시 추후에 리스트 뷰의 요소들을 오브젝트 풀링하는 시스템같은거 한번 만들어보실 수 있을까요? :)

[@gorani_TV]

감사합니다! 인풋필드를 터치하면 키보드가 올라오고 확인(완료)을 누르면 모바일 키보드가 내려가서 사라지는 현상에 대한 네이티브 안드로이드 혹시 아시나요? 리스트 뷰의 요소들을 오브젝트 풀링한다는 것은 스크롤 뷰 아래에 오브젝트들이 무한으로 왼쪽 오른쪽 이동하면 사라지는 그런 걸 의미하나요?

[@nkstudio9161]

@@gorani_TV 흠..예를들면 현재 스크롤 뷰의 시스템이 컨텐츠 영역안에 요소를 넣을경우 그것에 맞게 스크롤이 되는 상황입니다만, 만인 스크롤 뷰에 몇십개 이상의 데이터를 담는다고 한다면 렉이 많이 발생할겁니다. 그래서 실제 스크롤 뷰에는 요소 5~7만 넣어 놓고 그것들이 오브젝트 풀링되면서 수십개의 데이터를 다 화면에 표현해내는.. 어떻게 보면 무한 스크롤 뷰라고도 표현될 수 있겠군요! ㅡㅡㅡㅡ 해당 현상은 안드로이드 네이티브에서 인풋필드를 화면에 구성할때 추가 옵션으로 imeoption을 "ActionSend"를 걸어줘서 방지하는걸로 알고있습니다만, 이것도 정확한 정보는 아니여서 확실한 답변을 드리기 애매하네요 유니티에서 해당 문제를 해결하려면.. 저도 네이티브로 해당 문제를 고칠 수 있는지 연구를 해봐야될것 같습니다. 일단 보았을때 네이티브로 유니티를 건드는건 많이 어렵고.. 네이티브에서 채팅 같은 시스템을 구축한 다음 유니티에서 별도로 해당 뷰를 띄워서 처리하는 방법이 그나마 가능성이 있다고 볼 수 있습니다. 저도 추후에 1~2주 정도 연구해서 문제 해결시 소식들려드리도록 하겠습니다

[@gorani_TV]

@@nkstudio9161 아하 5~7개로 스크롤하면 리스트들의 데이터를 담는 뜻이군요~ 쉬워보일 듯 합니다 저 또한 모바일 키보드에 관해서도 연구해 볼게요~

[@docker2496]

안녕하세요. 영상 정말 잘 봤습니다. 많은 도움이 되었어요!! 그런데 질문이 있는데요.. 각 스크롤 뷰 마다 특정 스크립트를 실행하게 하려면 어떻게 해야할까요ㅠ 그리고 예를 들어 버튼을 두번째 스크롤뷰에 추가하였는데, 버튼을 만드니 하단의 탭 버튼들과 함께 노란색 선들로 연결이된게 보이는데, 이렇게보여도 상관없는건가요? 유니티 시작한지 얼마안된 초보자라 궁금하여 질문드립니다.

[@gorani_TV]

버튼 컴포넌트에 네비게이션이 비주얼라이즈가 체크되면 보여요. 신경쓰이니 꺼주시면 돼요

[@user-wi9nd1ke1o]

이 영상을 궁수에게 보여줬더니 UI의 전설이 되었습니다.

[@gorani_TV]

+애플루트 ㅋㅋㅋㅋ

[@teemourf668]

정말 너무너무 큰 도움이 되었습니다. 감사합니다.!! 간단히 사소한 버그 하나 제보하자면 하단 버튼을 클릭해서 이동하면 종으로 스크롤을 내렸던 부분이 원복되지 않고 남아있네요 ㅎㅎ;; TabClick함수에 내용을 추가하면 간단히 해결되긴 하지만 모르시는분들을 위해 제보 드립니다.

[@gorani_TV]

팁 감사합니다

[@user-of4oj5ch7m]

OnChangedPanelEvent 로 함수 하나파서 거기다가 패널 변경시 필요한 부분 넣으셔서 사용하세요

[@Sparronix]

영상 너무 잘봤어요. 좋은 영상 감사합니다. 저도 질문이 있어서 질문드려요. 위 영상대로 진행했을 때, if (contentTr.GetChild(i).GetComponent() && curPos != pos[i] && targetPos == pos[i]) contentTr.GetChild(i).GetChild(1).GetComponent().value = 1; 이 부분에서 페이지 이동 시, 화면위치를 초기화 시켜주고 있잖아요? 그런데 후반부에 구현한 하단 버튼으로 프레임이 넘어갈때는 드래그된 정보가 초기화되지 않더라구요. 위 코드만 보면, 페이지1에서 페이지2로 넘어가면, 페이지가 넘어간거니까 초기화 되는게 맞는 것 같은데 그러지 않아서 뭘 어떻게 해야하는지 감이 잘 안오더라구요;;

[@gorani_TV]

using System.Collections; using System.Collections.Generic; using UnityEngine; using UnityEngine.UI; using UnityEngine.EventSystems; public class NestedScrollManager : MonoBehaviour, IBeginDragHandler, IDragHandler, IEndDragHandler { public Scrollbar scrollbar; public Transform contentTr; public Slider tabSlider; public RectTransform[] BtnRect, BtnImageRect; const int SIZE = 4; float[] pos = new float[SIZE]; float distance, curPos, targetPos; bool isDrag; int targetIndex; void Start() { // 거리에 따라 0~1인 pos대입 distance = 1f / (SIZE - 1); for (int i = 0; i < SIZE; i++) pos[i] = distance * i; } float SetPos() { // 절반거리를 기준으로 가까운 위치를 반환 for (int i = 0; i < SIZE; i++) if (scrollbar.value < pos[i] + distance * 0.5f && scrollbar.value > pos[i] - distance * 0.5f) { targetIndex = i; return pos[i]; } return 0; } public void OnBeginDrag(PointerEventData eventData) => curPos = SetPos(); public void OnDrag(PointerEventData eventData) => isDrag = true; public void OnEndDrag(PointerEventData eventData) { isDrag = false; targetPos = SetPos(); // 절반거리를 넘지 않아도 마우스를 빠르게 이동하면 if (curPos == targetPos) { // ← 으로 가려면 목표가 하나 감소 if (eventData.delta.x > 18 && curPos - distance >= 0) { --targetIndex; targetPos = curPos - distance; } // → 으로 가려면 목표가 하나 증가 else if (eventData.delta.x < -18 && curPos + distance

[@user-ol7vc3zd6h]

하단은 스크롤뷰로 이용하고 그외화면을 스크롤뷰가 아닌 그냥화면으로 사용할땐 어떤 오브젝트를 사용하나요??? 게임영역과 하단 ui영역을 나누고 싶습니다!

[@gorani_TV]

스크롤뷰 UI만 아래에 있게 하면 되겠죠? 캔버스에서 게임화면과 겹치니까 알아서 되요

[@ssesse339]

안녕하세요. 좋은 영상이 많아서 열심히 영상보고 따라해보고 있습니다. 위의 영상을 응용해서 하단버튼 lock이 걸린 부분을 활성화 해보려고 컨텐츠 갯수를 5개로 추가했고 하단 버튼도 맞춰서 5개로 만들었습니다. 클릭도 잘 돼고 버튼이미지도 잘 나오고 페이지 전환도 잘 되는데 버튼을 5개로 바꾼 후 버튼 클릭 시 따라오는 갈색 이미지가 버튼영역에 맞지 않는데 어떻게 해야하는지 몰라서 댓글 남겨봅니다. 아, 그리고 가운데 페이지가 처음에 보이게 하는것두요!! 혹시 알려주실 수 있으실까요...?

[@gorani_TV]

사이즈 안맞는 건 프로젝트 열어 비교해보세요 * 가운데 처음에 보이기 Start아래 추가하세요 GetComponent().horizontalScrollbar.value = 0.5f; scrollbar.value = 0.5f; tabSlider.value = 0.5f; TabClick(1);

[@1202dd]

가운데 처음에 보이는걸로 혼자 함참 헤메고 있었는데 여기 댓글로 알려주셨었군요..! 정말 좋은 강의 감사합니다 고라니님!!

[@dnrkckzk]

ㄹㅇ 유용하겠는데여 저 근데 제가 개발하다가 막힌 부분이 있는데, 질문하면 그런 것도 방송으로 만들어주실 수 있나여?

[@gorani_TV]

라이브 방송인가요?! 저 또한 진득하니 구글링으로 오랜기간 연구하기 때문에 라이브 방송에는 자신이 없으뮤

[@dnrkckzk]

​@@gorani_TV 동영상으로 모바일 키보드 플러그인 만드는 동영상 하나 만들어주시면 안될까요 ㅠㅠ 플레이팹이랑 포톤 활용해서 채팅 만드는거 따라 했는데요. 모바일에서 하니깐 채팅 보낼 때 마다 모바일 키보드가 내려가요. 키보드가 올라온 상태를 유지해야하는데 유니티 자체만으론 해결이 불가능하다고 해서요 ㅜㅜ

[@gorani_TV]

흠 연구해볼게요

[@user-nm2hk4oe9z]

오래전 영상이라 답변 주실지 모르겠네요 ㅠㅠ.. 전 탭 바(인벤토리, 상점 등) 클릭시 다음 스크롤(예: 상점)으로 전환되는 속도가 느립니다 ㅠ 많이는 아니지만 차이가 느껴질 정도로요. 혹시 스크롤 전환속도를 높이는 방법이 있을까요?

[@gorani_TV]

BtnImageRect[i].anchoredPosition3D = Vector3.Lerp(BtnImageRect[i].anchoredPosition3D, BtnTargetPos, 0.25f); BtnImageRect[i].localScale = Vector3.Lerp(BtnImageRect[i].localScale, BtnTargetScale, 0.25f); 0.25f를 빠르게 해보세요 scrollbar.value = Mathf.Lerp(scrollbar.value, targetPos, 0.1f); 여기도요 지금보니 코드가 하드코딩 해놨네요 ㅋㅋ

[@nana_0427]

휴대폰에서 delta.x로 가속도 조절하는 부분이 컴퓨터처럼 잘 작동하지 않네요. 가끔 반대 방향으로 값이 나옵니다. 오른쪽으로 계속 밀다보면 +가 나온다던가, 왼쪽으로 밀다보면 -가 나온다던가요. 혹시 아시나요?

[@nana_0427]

다른 방법으로 해결했습니다! value비교로 고쳤습니당

[@marchjune]

버그가 있습니다. 4번째 탭(재능)에서 마우스를 왼쪽으로 해당칸에 50%이상 드래그를 한후 놓게되면 1번째 탭(상점)으로 이동됩니다. 하단에 탭에 재능이미지는 크게 되어있고, 상점과 장비쪽에 갈색색상으로 되어있습니다. 해결방법이 궁금합니다.

[@kyosunghwang4239]

가운데 맵 탭을 항상 처음에 나오도록 하려고 scrollbar.value = 0.5f; 을 start에 써줬는데 시작하면 맵탭을 갔다가 다시 샵 탭으로 돌아오네요 어떻게 해야하나요?

[@gorani_TV]

Start아래 추가하세요 GetComponent().horizontalScrollbar.value = 0.5f; scrollbar.value = 0.5f; tabSlider.value = 0.5f; TabClick(1);

[@kyosunghwang4239]

@@gorani_TV 감사합니다.

[@user-no5nm4kg8z]

Tab ->Btn 에 Onclick에 매개변수 설정 안해도 잘 작동하는건가요? 0, 1,2,3 으로 설정하면 잘 되는데 안 하면 작동을 안하네요

[@gorani_TV]

네 매개변수 넣으셔야 해요

[@user-of4oj5ch7m]

Button[] tapButtons = for (int i = 0; i < tapButtons.Length; i++) { int idx = i; tapButtons[i].onClick.AddListener(() => OnTapClick(idx)); } public void OnTapClick(int idx) { targetIdx = idx; targetPos = posValues[idx]; OnChangedPanelEvent(); } 이렇게 동적으로 스크립트 실행시 받아오면 추후 변경시 유연하게 대처 가능할듯 합니다 버튼이 몇개든 상관없죠 람다함수식에서 i 바로 넣으면 제일 마지막 idx만 들어가니 주의 드려요. (람다함수 변수 처리방식이 다르다함. GPT가 알려줌.)

[@nullerror934]

지금도 댓글 확인하고 계시는지 의문인데.. 보고계신다면 힌트좀 주시면 감사하겠습니다.. 카메라를 드래그해서 움직이는데 스윕속도가 빠르면 쭉 미끄러지다가 자연스럽게 멈추도록 하고 싶거든요. 이거 몰라서 며칠째 고민중...

[@gorani_TV]

Dotween 추천드립니다.!

[@LTJ2]

스크롤바 horizontal 지워도 상관없어요

[@gorani_TV]

스크립트에서 Scrollbar scrollbar로 참조해야 하는데 지우면 안돼요

[@ShinSJ_08]

혹시 Godot엔진은 만지실 생각은 없으신가요..........? 엔진은 좋은데ㅠㅠ 자료가ㅠㅠㅠㅠ

[@gorani_TV]

저는 유니티만 할 거예요 ㅎㅎ

[@ShinSJ_08]

@@gorani_TV ㅎㅎ 그렇군요~

[@gorani_TV]

네 화이팅입니다

[@ShinSJ_08]

@@gorani_TV 감사합니다~~ 영상 잘 보겠습니다!

[@nana_0427]

짱