back to top 버튼

[웹페이지 최하단에서 상단으로 돌아와야 하는 이유]
- 탐색 메뉴에서 새로운 목적지를 선택하는 작업
- 페이지 필터링 및 정렬 기능에 액세스 하는 작업
- 상단 검색창에 검색어를 입력 및 수정하는 작업

[back to top버튼의 역할]
- 키보드 홈키/빠른 실행 명령어 사용 등 다양한 방식의 back to top 기능 제공 -> 손가락이나 마우스를 사용하는 웹 사용자에게 부적합
- 무한 스크롤링을 방지하기 위해 고안된 back to top디자인의 역할은 중요

[back to top 버튼 사용시기]
- 화면의 길이보다 페이지가 4배 이상 길어질 때 사용
- 비교적 짧은 길이에서는 불필요함-> 사용자는 간단한 스크롤만으로 상단으로 돌아갈 수 있음

[back to top 버튼 디자인 방법]
1. 오른쪽 하단에 위치할 것
- 사용자가 버튼을 보기를 기대하는 위치
- 시각적 방해를 주지 않으면서 사용자의 시야에 들어옴
- back to top 버튼이 다른 위치에 배치될 경우 사용자가 지나칠 수 있음

2. 버튼에 레이블을 지정할 것 
- 가장 설명적인 문구로 지정해야 함
- 화살표 아이콘만 제시할 경우 의미가 모호할 수 있으며, 그래픽 구현에 따라 의미가 전달되지 않을 수 있음

3. 버튼은 하나만 유지할 것
- 한 페이지에 버튼을 여러 개 적용할 경우 사용자들이 무시할 수도 있음 -> 시각적 혼란 증가

4. 중요 요소를 가리지 않도록 할 것
- 버튼은 작게 유지해야 함 : 터치스크린을 사용하는 사용자를 위해 적당한 크기로 만드는 것이 중요함
- 사용자가 페이지를 위로 스크롤 할 때만 나타남

5. 눈에 띄게 적용할 것
- 페이지 디자인에 가려지지 않도록 눈에 띄게 적용하여 사용자가 인지할 수 있도록 해야 함

6. 버튼은 고정할 것
- 콘텐츠가 이동하는 것에 따라 버튼마저 움직이면 사용자의 주의를 산만하게 함

[back to top 버튼의 대안]
1. 페이지 하단 메뉴 링크
- 페이지 상단으로 돌아가 탐색하거나 검색하고자 하는 경우
- 사용자가 긴 페이지 최하단까지 스크롤을 자주 할 때 효과적임

2. 고정 메뉴
- 페이지 상단으로 돌아가 메뉴 이동을 하고자 하는 경우 좋은 해결책이 됨
- 스크롤의 주요 목적이 다른 주제나 섹션으로 이동하는 것일 경우, 고정 메뉴 옵션을 사용하도록 하는 것이 좋음

3. 홈버튼
- 여러 피드가 나열되어 페이지가 길어지는 소셜 사이트의 경우, 대부분의 사용자들은 홈버튼을 클릭하여 피드의 최상단으로 이동하는 데에 익숙함
- 소셜사이트가 아닌 경우 홈버튼은 최상단이 아닌 메인 페이지로 이동하는 것으로 사용자는 기대함

[실제 적용하기]
1.  배경색 투명도 조절 
- 불투명도 36% 적용
- 배경색 투명도가 높을 경우 : 시각적 불편감을 줄일 수 있음
- 배경색 투명도가 낮을 경우 : 지나치게 시선을 끌 수 있음
- 배경과 유사한 색상으로 배치하여 불편감을 낮출 수 있음

2. 위치
- Back to Top 버튼의 위치 : 가장 하단에 배치
- 스크롤 시 위치 고정 : 스크롤 사용 시에도 화면에 고정할 수 있음
- Back to Top 버튼 클릭시 나타나는 top 메뉴 고정하기 : 스크롤 시 위치 고정 적용