[웹 퍼블리싱 37] CSS - overflow와 스크롤 제어

겹침 순서를 다루고 나니, 이번에는 요소 안에 담긴 내용이 그 요소의 크기를 넘칠 때가 문제였다. 정해진 크기의 상자에 긴 글이나 큰 이미지가 들어가면 내용이 밖으로 삐져나오거나, 원치 않는 스크롤이 생겼다. 나는 이 넘침을 어떻게 다룰지, 언제 스크롤을 허용하고 언제 잘라낼지를 조절하는 법이 필요했다. 그 도구가 넘침을 제어하는 속성과 스크롤 관련 기능들이었다.

이번 편은 요소를 넘치는 내용을 다루는 방법과 스크롤을 세밀하게 제어하는 기능들을 다룬다. 넘침을 보이게 할지 잘라낼지 스크롤로 만들지 정하는 법, 넘침 제어가 일으키는 부작용, 부드러운 스크롤과 스냅, 그리고 스크롤이 배경으로 새는 문제와 스크롤바로 인한 흔들림까지 살펴본다. 이 기능들을 익히면 넘치는 내용과 스크롤을 깔끔하게 통제할 수 있다.

1. 넘치는 내용을 다루는 네 가지 방식

요소의 내용이 그 크기를 넘칠 때 어떻게 처리할지를 정하는 속성이 있다. 크게 네 가지 선택지가 있는데, 넘친 내용을 그대로 보이게 두거나, 잘라 감추거나, 항상 스크롤을 만들거나, 필요할 때만 스크롤을 만드는 것이다. 나는 이 네 가지의 차이를 명확히 알고 나서, 넘침 상황을 상황에 맞게 다룰 수 있게 되었다.

기본 동작은 넘친 내용을 그대로 보이게 두는 것이다. 요소의 경계를 넘어서도 내용이 잘리지 않고 밖으로 삐져나온다. 나는 이 기본 동작이 의외로 자주 문제를 일으킨다는 걸 알았다. 내용이 상자 밖으로 튀어나와 다른 요소와 겹치거나 레이아웃을 어지럽히기 때문이다. 넘침을 방치하면 예상 못 한 곳에서 화면이 어긋난다.

넘친 내용을 잘라 감추는 방식은 경계를 넘어선 부분을 보이지 않게 한다. 내용이 상자 안에 깔끔하게 갇히는 것이다. 나는 카드나 썸네일에서 이미지가 상자를 넘지 않도록 이 방식을 자주 쓴다. 다만 잘린 내용은 아예 접근할 수 없게 되므로, 감춰도 되는 내용인지를 먼저 판단해야 한다. 중요한 내용을 무심코 잘라버리면 안 된다.

스크롤을 만드는 방식은 넘친 내용을 스크롤로 볼 수 있게 한다. 항상 스크롤 막대를 두는 방식과, 내용이 넘칠 때만 스크롤을 만드는 방식이 있다. 나는 대개 필요할 때만 스크롤이 생기는 방식을 쓴다. 내용이 적으면 스크롤 없이 깔끔하고, 넘칠 때만 스크롤이 생겨 자연스럽기 때문이다. 항상 스크롤을 두면 내용이 적을 때도 빈 막대가 보여 어수선하다.

넘침은 가로와 세로를 따로 제어할 수도 있다. 가로로는 잘라내고 세로로는 스크롤을 만드는 식으로, 축마다 다른 처리를 지정할 수 있다. 나는 가로로 넘치는 표는 가로 스크롤을 허용하되 세로는 그대로 두는 것처럼, 방향에 따라 다르게 다뤄야 할 때 이 축별 제어를 쓴다. 넘침의 방향을 나눠 다루면 더 세밀한 통제가 가능하다.

어떤 방식을 고를지는 내용의 성격에 달려 있다. 잘려도 되는 장식이면 감추고, 사용자가 봐야 할 내용이면 스크롤을 열고, 넘치면 안 되는 내용이면 애초에 요소 크기를 유연하게 만든다. 나는 넘침 처리를 정하기 전에, 이 내용이 잘려도 되는지 반드시 봐야 하는지를 먼저 자문한다. 그 답이 올바른 처리 방식을 알려준다.

2. 넘침 제어가 부르는 부작용

넘친 내용을 잘라내는 처리에는 겉으로 드러나지 않는 부작용이 있다. 이 처리를 하면 그 요소 안에 절대 위치로 배치된 자식이 요소 경계에서 잘린다는 것이다. 나는 이 성질을 활용해, 요소 밖으로 나가려는 자식을 상자 안에 가두기도 한다. 하지만 의도치 않게 이 처리를 했다가, 밖으로 나와야 할 요소가 잘려버리는 문제를 겪기도 했다.

이 부작용은 양날의 검이다. 툴팁이나 드롭다운처럼 요소 밖으로 넘쳐 나와야 하는 것들이, 부모의 넘침 잘라내기 때문에 잘려버릴 수 있다. 나는 드롭다운 메뉴가 갑자기 잘려 보이는 문제를 겪고, 원인이 부모의 넘침 처리라는 걸 찾는 데 시간을 썼다. 넘침을 잘라내는 부모 안에서는, 밖으로 나가려는 자식이 갇힌다는 점을 늘 기억해야 한다.

넘침을 잘라내거나 스크롤로 만드는 처리는 또 다른 효과도 낳는다. 그 요소가 독립된 배치 영역을 형성하게 되는 것이다. 이 영역은 안팎의 여백이 서로 간섭하지 않게 하고, 떠 있는 요소를 감싸는 등의 성질을 갖는다. 나는 여백이 예상과 다르게 새거나 겹칠 때, 이 독립 영역을 만들어 문제를 해결하기도 한다. 부작용이 때로는 유용한 도구가 된다.

이 독립 영역의 성질은 특히 떠 있는 요소를 다룰 때 유용하다. 안에 떠 있는 요소가 있어 부모의 높이가 무너지는 고전적인 문제를, 부모에 넘침 처리를 줘서 해결할 수 있다. 나는 이런 상황에서 넘침 처리를 여백이 아니라 배치를 정돈하는 용도로 쓴다. 넘침 속성이 단순히 넘침만 다루는 게 아니라는 걸 알면 활용 폭이 넓어진다.

다만 이런 부수 효과를 노리고 넘침 처리를 남용하면 혼란스러워진다. 넘침을 잘라낼 의도가 아닌데 다른 효과 때문에 이 속성을 쓰면, 나중에 그 요소에서 무언가가 잘리는 문제가 생길 수 있다. 나는 부수 효과를 노려 이 속성을 쓸 때, 왜 여기에 이 속성이 있는지를 주석이나 명확한 구조로 남긴다. 의도를 알 수 없는 속성이 가장 위험하다.

결국 넘침 제어는 넘침 자체를 다루는 것 이상의 의미를 갖는다. 클리핑, 독립 배치 영역, 떠 있는 요소 감싸기 같은 여러 효과가 얽혀 있다. 나는 이 속성을 쓸 때, 넘침을 어떻게 처리할지뿐 아니라 그로 인해 생기는 부수 효과가 무엇인지도 함께 고려한다. 하나의 속성이 여러 결과를 낳는다는 걸 알면, 예상 못 한 부작용에 당황하지 않는다.

3. 스크롤을 부드럽고 딱 맞게

스크롤에도 세밀한 제어가 가능하다. 그중 하나는 스크롤 이동을 부드럽게 만드는 것이다. 페이지 내 특정 위치로 이동할 때, 순간적으로 툭 점프하는 대신 부드럽게 미끄러져 가게 할 수 있다. 나는 페이지 안의 링크로 특정 구획으로 이동할 때 이 부드러운 스크롤을 켜서, 사용자가 어디로 이동하는지 시각적으로 따라올 수 있게 한다.

부드러운 스크롤은 맥락을 유지하는 데 도움이 된다. 화면이 갑자기 다른 위치로 바뀌면 사용자는 자기가 어디로 왔는지 헷갈리지만, 부드럽게 이동하면 이동의 과정이 보여 방향 감각을 잃지 않는다. 나는 목차에서 본문의 특정 부분으로 이동하는 기능에 이 효과를 즐겨 쓴다. 다만 움직임에 민감한 사용자를 위해 이 효과도 상황에 따라 줄일 수 있게 배려한다.

스크롤이 특정 지점에 딱 맞게 멈추는 스냅 기능도 있다. 스크롤을 멈추면 가장 가까운 정해진 위치로 자석처럼 붙는 것이다. 나는 가로로 넘기는 이미지 슬라이드나 화면 단위로 넘어가는 구획에 이 스냅을 쓴다. 스크롤이 어중간한 위치에서 멈추지 않고 항상 깔끔하게 한 항목씩 맞춰지니, 넘기는 경험이 훨씬 정돈된다.

스냅을 쓰려면 스크롤 컨테이너에 스냅의 방식을 정하고, 각 항목에 어느 지점에 맞출지를 지정한다. 항목의 시작에 맞출지 중앙에 맞출지를 고를 수 있어, 슬라이드의 성격에 맞게 조절한다. 나는 이미지 슬라이드는 중앙에, 목록형 항목은 시작에 맞추는 식으로 상황에 따라 다르게 설정한다. 스냅 지점 하나로 넘기는 느낌이 달라진다.

스냅은 강제성의 정도도 조절할 수 있다. 반드시 스냅 지점에 멈추게 할 수도 있고, 가까울 때만 부드럽게 붙게 할 수도 있다. 나는 정확히 한 항목씩 넘어가야 하는 슬라이드에는 강한 스냅을, 자유로운 스크롤을 허용하되 적당히 정렬만 돕고 싶은 곳에는 약한 스냅을 쓴다. 사용자의 자유와 정돈된 정렬 사이에서 균형을 맞추는 것이다.

스냅 기능은 예전에 자바스크립트로 복잡하게 구현하던 것을 스타일만으로 대체한다. 나는 슬라이드 기능을 만들 때, 스냅으로 해결되는 부분은 최대한 스타일에 맡긴다. 스크립트가 줄어들면 코드가 가벼워지고 동작도 매끄러워진다. 브라우저가 기본으로 제공하는 스크롤 기능을 활용하는 것이, 직접 구현하는 것보다 대개 더 부드럽고 안정적이다.

4. 스크롤이 배경으로 새는 문제

모달이나 사이드 패널처럼 그 안에서 스크롤되는 요소를 만들다 보면 성가신 문제를 만난다. 안쪽 요소를 끝까지 스크롤하고 나서 계속 스크롤하면, 그 스크롤이 뒤에 있는 배경 페이지로 넘어가 버리는 것이다. 나는 모달 안에서 스크롤하다 배경이 함께 움직여 위치를 잃는 경험을 여러 번 했다. 이걸 스크롤이 연쇄된다고 표현한다.

이 연쇄를 막는 전용 속성이 있다. 요소의 스크롤이 끝에 도달했을 때, 그 스크롤이 부모나 배경으로 넘어가지 않도록 가두는 것이다. 나는 모달이나 드로어의 스크롤 영역에 이 속성을 줘서, 안쪽 스크롤이 배경으로 새지 않게 한다. 이 속성 하나로 오래된 성가심이 깔끔하게 해결되니, 스크롤되는 덮개형 요소에는 거의 습관처럼 적용한다.

이 속성은 모바일에서 특히 중요하다. 손가락으로 스크롤하는 환경에서는 스크롤 연쇄가 더 자주, 더 거슬리게 일어나기 때문이다. 나는 모바일에서 팝업 안을 스크롤하다 배경이 움직여 원래 보던 위치를 잃는 문제를 이 속성으로 막는다. 작은 설정이지만 모바일 사용 경험의 완성도를 크게 높인다.

스크롤 연쇄 방지는 당겨서 새로 고침 같은 동작을 제어하는 데도 쓰인다. 페이지 맨 위에서 더 당겼을 때 일어나는 기본 동작을 막고 싶을 때 이 속성을 활용한다. 나는 자체적인 스크롤 동작을 구현한 영역에서, 브라우저의 기본 당김 동작이 끼어들지 않도록 이 속성으로 제어한다. 스크롤의 경계에서 일어나는 원치 않는 동작을 다스리는 것이다.

이런 스크롤 제어는 사용자가 의식하지 못할 때 가장 잘 작동한다. 스크롤이 예상대로 자연스럽게 움직이면 사용자는 아무것도 느끼지 못하지만, 배경이 새거나 엉뚱하게 움직이면 즉시 불편을 느낀다. 나는 스크롤되는 영역을 만들 때마다, 그 경계에서 스크롤이 어떻게 행동하는지를 점검한다. 경계의 매끄러움이 스크롤 경험의 완성도를 좌우한다.

스크롤은 사용자가 가장 자주 하는 동작 중 하나다. 그만큼 스크롤이 조금만 어색해도 불편이 크게 다가온다. 나는 스크롤 관련 기능들을 사소하게 여기지 않고, 스크롤되는 모든 영역에서 경험이 자연스러운지 확인한다. 넘침을 다루는 것에서 시작해 스크롤의 경계까지 챙기는 것이, 넘치는 내용을 온전히 통제하는 길이다.

5. 스크롤바로 인한 흔들림 잡기

스크롤과 관련해 의외로 자주 겪는 문제가 스크롤바 때문에 생기는 레이아웃 흔들림이다. 내용이 짧아 스크롤바가 없다가, 내용이 길어져 스크롤바가 나타나면 그 막대의 폭만큼 화면이 옆으로 밀린다. 나는 페이지를 넘나들 때 내용이 미세하게 좌우로 흔들리는 걸 보고, 원인이 스크롤바의 등장과 퇴장이라는 걸 알았다.

이 흔들림을 막는 방법은 스크롤바가 들어설 자리를 미리 비워두는 것이다. 스크롤바가 있든 없든 항상 그 폭만큼 공간을 예약해두면, 스크롤바가 나타나도 화면이 밀리지 않는다. 나는 여러 페이지를 오갈 때 흔들림이 거슬리는 사이트에 이 방식을 적용한다. 스크롤바 자리를 고정하는 것만으로 화면이 안정적으로 유지된다.

이 처리는 사소해 보이지만 사용 경험에 은근히 영향을 준다. 화면이 미세하게라도 흔들리면 사용자는 무의식적으로 불안정하다고 느낀다. 나는 특히 페이지마다 내용 길이가 달라 스크롤바 유무가 오락가락하는 사이트에서 이 흔들림을 반드시 잡는다. 눈에 잘 띄지 않는 안정감이 오히려 사이트의 완성도를 높인다.

스크롤바 자체의 모양도 어느 정도 다룰 수 있다. 스크롤바를 얇게 만들거나 색을 조절하는 것이 가능하다. 나는 사이트 디자인과 어울리도록 스크롤바를 은은하게 다듬기도 한다. 다만 스크롤바를 지나치게 바꾸면 사용자가 익숙한 조작감을 해칠 수 있으므로, 나는 스크롤바가 명확히 스크롤바로 인식되는 선을 지킨다. 미관과 익숙함의 균형이다.

스크롤바를 완전히 숨기는 것은 신중해야 한다. 디자인을 위해 스크롤바를 감추면 깔끔해 보이지만, 스크롤할 수 있다는 신호가 사라져 사용자가 내용이 더 있다는 걸 모를 수 있다. 나는 스크롤바를 숨길 때, 스크롤 가능함을 알리는 다른 시각적 단서를 반드시 함께 둔다. 조작의 단서를 없애는 것은 미관을 위해 사용성을 희생하는 위험한 선택이다.

정리하면 넘침 제어는 내용을 보이거나 자르거나 스크롤로 만드는 선택이고, 이 선택은 클리핑과 독립 배치 영역 같은 부작용을 동반하며, 스크롤은 부드러움과 스냅, 연쇄 방지, 스크롤바 안정화까지 세밀하게 다룰 수 있다. 나는 넘치는 내용과 스크롤의 경계를 꼼꼼히 챙긴다. 다음 편에서는 지금까지의 도구들을 엮어 만드는 흔한 레이아웃 패턴들을 다룬다.