Medium처럼 위아래 스크롤에 따라 헤더 숨기기/표시하기
과거 우리나라에서 웹사이트 제작이 비교적 초창기였을 때 사이트들은 전반적으로 플래시를 사용하여 화려한 효과를 중시했었습니다.
제가 웹에 대해 아무 것도 모르던 시절(지금도 잘 모르지만)에 포트폴리오 홈페이지를 하나 만든 적이 있었습니다. 디자인에 대해서도, html에 대해서도 거의 아는 것이 없었기 때문에 '모방은 창조의 어머니'라는 신념으로 모방을 할 사이트를 물색했습니다. 그러다가 심플하면서도 디자인이 괜찮은 유럽의 한 디자인 업체의 사이트를 발견했습니다.
당시 그 사이트의 전체적인 분위기를 모방하여 플래시로 사이트를 만들었습니다. (보다 정확하게는 플래시 프로그램은 복잡하여 배울 엄두를 못 내다가 Swish라는 프로그램을 사용했습니다.) 그런데 그 사이트가 의외로 일부 클라이언트로부터 호평을 받았습니다. 주로 IT 업계 담당자들이 사이트를 좋게 본 것입니다. (Wayback Machine 사이트에서 당시 사이트를 검색해보니 검색이 되지만 브라우저 호환이 되지 않아 대부분 레이아웃이 깨져 나오네요.)
개인적으로 디자인에 대해 모르지만 가능한 한 심플한 디자인을 선호하는 편입니다. 디자인과 관련하여 이런 말이 있네요.
“Good design is as little design as possible.” -- Dieter Rams
좋은 디자인이란 디자인이 들어간 것 같지 않은 그런 디자인이라는 의미처럼 들리네요.
Matthew님의 "과학적인 요즘 메뉴 추세" 글을 보면 방문자가 컨텐츠에 최대 집중할 수 있도록, 글을 읽는 동안, 다른 관련 없는 컨텐츠는 view 에서 보이지 않게 하는 것이 대세라고 합니다.
Medium(미디엄) 사이트의 경우 레이아웃면에서 다소 썰렁하게 느껴질 수 있지만 컨텐츠에 집중할 수 있도록 최대한 배려했음을 알 수 있습니다. 미디엄에서 마우스를 아래로 스크롤하면 헤더가 숨겨집니다. 그러다가 마우스를 위로 스크롤하면 헤더가 표시되는 그런 방식으로 작동합니다.
이와 같이 아래로 스크롤하면 헤더가 숨겨지고 위로 스크롤하면 헤더가 표시되도록 하는 효과를 jQuery를 사용하여 간단히 구현할 수 있습니다. 다음 jsFiddle에서 실제 예제 코드와 어떻게 작동하는지 볼 수 있습니다.
코드에 대한 자세한 설명은 이 글을 참고하시기 바랍니다.
어떤 분이 플래시 작업이 싫어서 워드프레스로 갈아 탔더니 이제 레볼루션 슬라이더를 사용하고 있다고 하더군요. 이처럼 컨텐츠보다는 시각적인 측면을 중시하는 것은 (예전보다는 많이 달라졌겠지만) 일부에서는 여전한 것 같습니다. 물론 사이트 성격에 따라 어느 쪽을 더 중시할 것인지를 결정해야겠지만요. 하지만 단순해 보이면서 있어 보이는 사이트를 만드는 게 어렵다는 어떤 디자이너의 말이 생각나네요.