Feature/온보딩 및 페이지 ux 개선

[Ludovico7]

📝 변경 사항

• 페이지 드래그해서 가장자리로 이동하면 화면 분할하는 기능 추가(Snap)
• 온보딩 오버레이에서 Esc 입력하면 종료하도록 구현
• 드래그 커서 잡는 손모양으로 변경
• 스냅 오버레이 컴포넌트 구현
• 바텀 내비게이터 UX 및 툴팁기능 추가

🔍 변경 사항 설명

Snap기능

• 맥이나 윈도우에서 지원하는 가장자리로 드래그해서 분할하는 기능을 추가했습니다.
• 현재 드래그했을 때 해당 위치 또는 크기를 보여주는 헬퍼 UI가 없어서 이게 제대로 된건지 아닌지 구별하지는 못하는 상태입니다.
• Threshold값을 임의로 지정했고, 좀더 사용해보면서 최적의 값으로 변경할 예정입니다.
• 현재 좌측상단, 좌측중앙, 좌측하단, 우측상단, 우측중앙, 우측하단 이렇게 6가지 방향을 지원하고, 중앙상단 및 중앙 하단도 추가할 예정입니다.

온보딩 Esc 지원

• 온보딩중에 엔터를 클릭하면 다음으로 이동하는 기능만 있고 바로 종료하기 위해서는 마우스로 X버튼을 클릭해야 했습니다.
• 키입력 만으로 바로 종료할 수 있도록 Esc를 클릭하면 바로 종료할 수 있도록 구현했습니다.

페이지 드래그시 커서 스타일

• 현재 드래그할 때 커서가 십자가 화살표 모양이고, 드래그한 상태로 가장자리로 이동하면 해당 방향의 화살표로 계속 커서가 변하는 문제가 있었습니다.
• 드래그 중에는 어디로 이동하던 커서의 스타일을grabbing으로 통일해서 현재 드래그 중이다 라는 인터렉션을 주도록 수정했습니다.
• 브라우저 기본 지원 스타일중 그나마 괜찮아 보이는 것으로 정했습니다. 그래도 좀 맘에 안들어서 나중에 커스텀 스타일 지정할 수 있다면 변경할 예정입니다.

스냅 오버레이 구현(현훈님 피드백 반영)

• 드래그해서 사이드로 마우스를 이동시킬 경우, 맥이나 윈도우처럼 해당 위치에 오버레이 컴포넌트를 렌더링 하도록 구현했습니다.
• 스냅해서 크기를 변경한 페이지를 다시 드래그할 경우, 이전 크기로 복원됩니다.
• 각 섹션 사이에 약간의 마진을 둬서 디자인적으로 깔끔하게 수정했습니다.
• 사이드바 토글 시, 스냅된 페이지의 레이아웃을 유지하도록 구현했습니다.

바텀 내비게이션 UX 개선

• 기존에는 페이지가 커져 바텀 내비게이터를 가릴 경우, 바텀 내비게이터를 사용할 수 없어 UX적으로 문제가 있었습니다. 이를 해결하기 위해 바텀 내비게이터에 마우스를 올리면 페이지 위로 올라와 페이지가 가린 상태에서도 사용할 수 있도록 수정했습니다.
• 바텀 내비게이터 내부 버튼들에 마우스를 올리면 툴팁 컴포넌트를 통해 페이지 제목을 보여줄 수 있도록 수정했습니다(radix-ui/react-tooltip 활용)

🙏 질문 사항

• 현재 Y축 기준 위에서 10%가 상단 절반, 10%에서 90%가 절반 전체, 아래로 하단 90%를 차지하도록 설정했는데 사용해보시고 더 좋은 분할값이 있으면 말씀해주세요!
• 스냅 오버레이에 디자인을 임의로 작성했는데, 더 좋은 디자인 있으면 말씀해주세요. 적용하겠습니다!

📷 스크린샷 (선택)

2025-05-01.3.48.50.mov

2025-05-01.4.00.31.mov

2025-05-01.4.23.28.mov

✅ 작성자 체크리스트

• Self-review: 코드가 스스로 검토됨
• Unit tests 추가 또는 수정
• 로컬에서 모든 기능이 정상 작동함
• 린터 및 포맷터로 코드 정리됨
• 의존성 업데이트 확인
• 문서 업데이트 또는 주석 추가 (필요 시)

[hyonun321]

오우 빠른 PR 고생하셨습니다.

혹시 이런식으로 스켈레톤UI로 보이게 할 수도 있을까용?
타 화면분할 앱도 저런식으로 정렬 된다음을 보이게 하는 경우가 많아서 제안 드립니다!

[Ludovico7]

오우 빠른 PR 고생하셨습니다.

혹시 이런식으로 스켈레톤UI로 보이게 할 수도 있을까용? 타 화면분할 앱도 저런식으로 정렬 된다음을 보이게 하는 경우가 많아서 제안 드립니다!

네 가능하긴 한데, 이번 PR에 같이 올리면 오래걸릴 것 같아서 일단은 분할 기능까지만 PR올렸습니다. 스켈레톤 적용한거도 나중에 구현하고 PR 올리겠습니다!

[minjungw00]

UX가 굉장히 개선됐네요! 고생많으셨습니다!

[pipisebastian]

수고하셨습니다!!

[hyonun321]

많이 UX가 개선됐네요 수고하셨습니다.