두 번째 고민 (Fixed 컴포넌트)

발단

저번 글에서 예고했듯이 오늘은 StickyFooter라는 Fixed 컴포넌트를 만들면서 했던 고민을 적어볼까 한다. 모바일 화면을 전용 화면은 처음 구성해봤기에 어디서 보고 배운 걸 최대한 활용하기로 했다.

웹앱의 상단엔 로고와 Main 혹은 Home페이지로 이동시키는 Topbar를 두고 하단엔 5개의 아이콘을 통해 사용자가 원하는 페이지로 이동시킨다. Sticky라는 CSS 속성을 꽤나 잘 안다고 생각해 페이지 설계 단계에서는 아무런 걱정이 없었다. 하지만 몇 가지 문제가 발생했는데 다음과 같다.

1. BottomBar를 에 Sticky 옵션을 줘봤자 Body 맨밑에 깔려있을 뿐이다.
2. 무한 스크롤같이 Body의 height가 가변적이라면 Z-index값이 있는 BottomBar가 사용자가 봐야할 컴포넌트를 가려버린다.

구현

• display
  사실 간단한 문제지만 너무 오랜만에 만져보는 CSS 속성이라 많이 헷갈렸었다.

  position: absolute;
  top: calc(100vh - 65px + ${(props) => props.scrollY}px);

  상당히 끔찍하지만 이런 방식으로 해결하려 들었다... browser의 높이 100%에 이러저런 값을 빼고 더해서 항상 그곳에 보이도록 하고 싶었다. 나중에 약간 여유로워지고 다시 보니 너무 어이가 없는 코드라 다음과 같이 고쳤다...

  position: fixed;
  bottom: 0;

  다들 나같은 실수를 하지 않으시길 빈다...
  
• 그림자 효과
  이런 식으로 하단에 고정해두니 뭔가 어색한 기분이 들었다. 사용자에게 확실히 이 컴포넌트가 당신이 보고 싶은 컴포넌트 위에 있으며 밑으로 스크롤하면 다른 내용이 나온다는 걸 한 눈에 알려주고 싶었다.
  다양한 방법을 시도했고 그 중에 그림자 효과가 가장 효과적이었다.

  box-shadow: 0 -4px 8px rgba(0, 0, 0, 0.2);

  box-shadow를 통해 마치 광원이 BottomBar의 아래에 있어 음영이 생기도록 했다. 이를 통해 사용자가 이 컴포넌트와 Body를 구분하고 아래로 스크롤 하도록 유도해보고 싶었다. 팀원들에게 물었을 땐 있는게 더 그럴듯하다 했는데 효과가 있었는지는 모르겠다.

마무리

뒤 돌아 보니 정말 끔찍한 코드가 아닐 수 없다. 하지만 어제도 그랬듯 내일 더 나은 코드를 짤 수 있는 사람이 된다면 좋은 일이고, 부끄러운 만큼 내가 성장한게 아닐까...?

다음 글은 무한 스크롤에 관한 글일거 같다.