리액트 프로젝트를 하다가 생각지 못한 문제에 부딪혔다!
바로 스크롤 유무에 따라서 화면이 왼쪽으로 밀리는 현상이 있다는 것....
이 문제를 어떻게 해결해야할까 많은 고민을 했다.
❗️흔들리는 애플리케이션 인터페이스 Y축
이 문제를 해결하기 위해서 임의로 전체에 스크롤을 만드는 방법이 있었다.
body {
overflow-y: scroll;
}
📢 여기서, 의문!
💬 과연 이 밀림 현상 하나 때문에 전체에 스크롤을 임의로 줘서 막아도 될까?
정답은 없지만.. 만드는게 더 낫다! 라는 결론이 나왔다.
나는 이런 문제가 사용자에게 혼란을 불러올 수 있다고 생각했다.
(임의로 세로 축을 만드는건데, 왜 스크롤이 안될까? 라는 의문을 가질 수 도 있다고 생각했음)
그리고 다른 사이트들을 엄청나게 찾아봤다.
😮 대부분의 사이트는 어떻게 되어있었을까?
1. 위와 같이 세로축을 임의로 줌
2. 모달 다이얼로그로 띄워 처리함
결국에, 어떻게든 처리를 해줘야한다는 사실!
이런 사실을 확인후, 내가 생각했던 것과 달라서 질문을 했다.
그리고 나는 반대로 생각하고 있었다는 사실을 깨달았다...😅
오히려 세로 축을 임의로 주는 방법이 더 나은 사용자 경험(UX)를 가져온다는 점이다.
이 방법은 야무쌤도 사용하시는 방법이고 이렇게 답변을 해주셨다.
사용자 인터페이스(UI) Y축이 페이지 전환에 따라 흔들린다면? 사용자 경험(UX)에 좋지 않다!
✅ 흔들리지 않는 애플리케이션 인터페이스 Y축
따라서 내가 질문했던 내용인 스크롤 바를 무조건 생기게 하면 스크롤이 안되는데도 스크롤 바가 있어 사용자의 혼란을 초래하므로 잘못된 생각이다.
→ 이 의견에는 동의하지 않는다고 하셨다.
📌 결론
그리고 스크롤 바 트랙(track)이 화면에 항상 표시되더라도 썸브(thumb)가 표시되지 않으니
사용자가 혼란스러워할 일도 없고, 오히려 Y축이 흔들리지 않아서 더 나은 사용자 경험(UX)를 제시한다!
