스크롤 UI를 대체하는 방법이 있을까요?

요즘 웹에서는 화면을 꽉 채우는 사진을 배경과 함께 타이포그래피를 적절하게 배치하는 디자인이 유행하고 있습니다. 유명 웹 에이전시 사이트를 봐도 이런 디자인을 많이 찾아볼 수 있는데요.

이런 큼직한 디자인에서는 스크롤을 유도하는 UI가 자주 보입니다. 한편 브이텍스 랩(VTEX Lab)의 UI 디자이너 로드리고 뮤니즈(Rodrigo Muniz) 씨는 이런 스크롤 ui의 필요성에 대해 의문을 가지고 글을 썼습니다.

 

“당신이 그것을 설명해야 한다면, 그것은 작동하지 않는 것입니다.(If you have to explain it, it’ ain’t working)”라고 그래픽 디자인의 거장 밀튼 글레이저가 말한 적이 있습니다.

만약 스크롤을 유도하는 UI를 넣는다면 사용자의 인지하는 과정을 무시하는 것일지도 모릅니다. 사람들은 스크롤 하는 방법을 알고 있기에, 이 디자인은 사용자의 사용 패턴이 고려되지 않은 방식입니다.

뮤니즈 씨는 스크롤 UI를 넣는 것은 버튼에 “여기를 클릭해주세요.”라는 문구를 넣는 것과 같으며, 이것은 설명하는 것이지 디자인이라고 할 수 없다고 얘기했습니다. 이 UI는 사용자와 소통하는 것이 아닌 명령에 가깝다고 합니다.

그럼 스크롤 UI를 어떻게 대체할 수 있을까요?

Huge’s 리서치의 연구에 따르면, 만약 우리가 사용자의 인지하는 과정을 무시한다면, 사용자들은 컨텐츠를 못 보고 지나갈 수도 있다고 합니다. 스크롤 화살표는 좋은 결과를 얻었지만, 그것은 우리가 스크롤을 하라고 명령했기 때문이죠. 그것이 곧 좋은 사용자 경험은 아닙니다.

애니메이션을 추가하여 보여주는 방법

요소들에 애니메이션을 주면 사용자들에게 메인페이지 하단에 콘텐츠가 있다는 것을 알려줄 수 있습니다. 모든 상황에 적합하지 않겠지만 좋은 방법이라고 생각합니다.

하단의 gif 처럼 화면이 로드될 때, 하단에 콘텐츠가 잠시 보였다가 없어지는 방법입니다. 마치 사용자에게 궁금하면 스크롤을 내리라고 어필하는 것처럼 보입니다.

만약 여러분이 시차스크롤을 사용하고 있다면, 그것을 활용해 스크롤 작동과 함께 이미지를 줌인, 줌아웃 모션을 넣는 것도 괜찮은 방법이겠네요.

블록이 여러 가지라면, 순차적으로 모션을 넣는 것도 좋은 방법입니다.

숨기지 말고 바로 보여주는 방법

구글 핏 안드로이드 앱을 보시면, 메인 정보를 담고 있는 커다란 원 아래, 첫 번째 카드 영역의 일부가 보입니다. 이 접근 방식은 매우 직관적이고 간단합니다. 왜냐면 이 방식은 다른 요소에 의지하지 않고 사용자와 소통하기 때문입니다.  이 방식은 이미 2006년, 자레드 스풀(Jared Spool) 씨가 이미 얘기한 것입니다.

웹에서는 메인 사진영역을 CSS로 최고 높이를 90%를 설정하거나 자바스크립트로 통제한다면 어렵지 않을 것입니다.

이 방식에 애니메이션을 추가하고 투명도 값을 준다면 어떨까요? 이 방식은 메인이미지에 묻혀서 사용자의 주목을 받지 못할 수도 있습니다.

투명도 값은 조심해야 합니다. 만약 투명도가 너무 낮다면, 없는 것만 못할 수도 있습니다. 그리고 스크롤을 내렸을 때는 투명도를 100%로 돌려놓는 것을 잊지 마셔야 합니다.

간결하게 디자인한다는 것은 정말로 어려운 일입니다. 하지만 이런 스크롤 UI와 같은 간단한 해결 방법이 있는데요. 디자인하기는 쉽지만, 이것이 과연 필요한 것인가 생각해볼 필요가 있습니다.

출처: Medium User Experience Blog

by 원숭이 발자국