[웹 퍼블리싱 22] CSS - 포지셔닝

스크롤을 내려도 따라오는 상단 바, 카드 모서리에 붙은 새 표시, 화면을 뒤덮는 반투명 배경. 사이트를 만들다 보면 요소를 정해진 흐름에서 떼어내 원하는 자리에 놓아야 할 순간이 온다. 나는 이런 걸 처음 만들 때 여백을 억지로 밀어 넣으며 씨름했지만, 정답은 따로 있었다. 포지셔닝이라는 배치의 또 다른 축이었다.

이번 편은 요소의 위치를 지정하는 다섯 가지 방식을 다룬다. 기본 흐름을 따르는 정적 배치부터, 자기 자리를 기준으로 옮기는 상대 배치, 조상을 기준 삼는 절대 배치, 화면에 고정되는 고정 배치, 그리고 스크롤에 반응해 붙는 끈끈이 배치까지 살펴본다. 각각의 기준점을 이해하는 것이 이 편의 핵심이다.

1. 기본 흐름과 상대 배치

포지셔닝의 기본값은 정적 배치다. 이 상태의 요소는 문서의 일반적인 흐름을 그대로 따른다. 블록은 쌓이고 인라인은 흐른다. 이때는 위치를 지정하는 속성이 아예 무시된다. 내가 위치 값을 줬는데 요소가 꿈쩍도 안 한다면, 대개 이 정적 상태를 벗어나지 않았기 때문이다.

요소를 흐름에서 살짝 어긋나게 하고 싶으면 상대 배치를 쓴다. 상대 배치는 요소를 원래 있던 자리를 기준으로 이동시킨다. 위나 왼쪽 같은 값을 주면 그 방향의 반대로 밀려난다. 중요한 건 이동해도 원래 자리가 그대로 남아 다른 요소들은 그 요소가 아직 제자리에 있는 것처럼 배치된다는 점이다.

이 성질 때문에 상대 배치로 요소를 옮기면 종종 빈 공간이 생기고 겹침이 일어난다. 나는 이걸 몰라 상대 배치로 요소를 많이 옮겼다가 레이아웃에 구멍이 나는 걸 겪었다. 그래서 상대 배치를 큰 이동에 쓰기보다, 미세한 위치 보정에 쓰는 것이 대개 안전하다.

사실 상대 배치의 더 중요한 역할은 따로 있다. 상대 배치된 요소는 그 안의 절대 배치 자식에게 기준점이 되어준다. 즉 이동 자체보다, 자식을 위한 좌표계를 만드는 용도로 더 자주 쓰인다. 나는 카드 안에 배지를 붙일 때 카드를 상대 배치로 두는데, 이건 카드를 옮기려는 게 아니라 기준을 세우려는 것이다.

상대 배치는 흐름을 유지한다는 점에서 온건한 배치다. 요소가 자리를 지키면서 살짝만 움직이므로, 주변에 미치는 파장이 크지 않다. 그래서 겹침 효과나 미세 조정, 그리고 절대 배치의 기준 만들기라는 세 가지 용도로 나는 이 방식을 폭넓게 쓴다.

정리하면 정적 배치는 흐름 그대로, 상대 배치는 흐름을 유지한 채 자기 자리를 기준으로 이동한다. 이 상대 배치가 다음에 볼 절대 배치의 발판이 된다. 흐름 안에 남아 기준을 제공하는 요소와, 흐름을 벗어나 그 기준 위에 얹히는 요소, 이 둘의 짝이 포지셔닝의 뼈대다.

2. 절대 배치의 기준점

절대 배치는 요소를 문서의 흐름에서 완전히 빼낸다. 흐름에서 빠지므로 원래 자리가 사라지고, 주변 요소들은 그 요소가 없는 것처럼 자리를 메운다. 이 요소는 이제 지정한 좌표에 따라 자유롭게 떠 있게 된다. 나는 이 자유로움에 반해 절대 배치를 남발했다가 레이아웃이 통제 불능이 된 적이 있다.

절대 배치의 핵심은 기준점이다. 위치 값은 가장 가까운, 정적이 아닌 조상을 기준으로 계산된다. 그런 조상이 있으면 그 안에서, 없으면 화면 전체를 기준으로 삼는다. 나는 배지를 카드 모서리에 붙이려다 배지가 화면 구석으로 날아가는 걸 겪었는데, 카드에 기준을 안 만들어줘서 배지가 화면을 기준으로 잡은 탓이었다.

그래서 절대 배치는 거의 항상 상대 배치와 짝으로 쓴다. 부모를 상대 배치로 만들어 기준점을 세우고, 자식을 절대 배치로 그 안에 놓는 것이다. 이 짝은 카드 위 배지, 이미지 위 캡션, 입력칸 안 아이콘 같은 수많은 겹침 배치의 기본 공식이다. 나는 이 공식을 몸에 익힌 뒤로 겹침 배치가 훨씬 편해졌다.

네 방향 값을 함께 쓰면 요소를 늘려 부모를 채울 수도 있다. 네 방향을 모두 0으로 주면 요소가 기준 상자를 가득 덮는다. 이걸 짧게 표현하는 단축 속성도 있어, 한 번에 사방을 지정할 수 있다. 나는 반투명 덮개를 만들 때 이 방식으로 부모를 통째로 덮는다.

절대 배치는 강력하지만 흐름에서 빠지기 때문에 반응형에서 다루기 까다롭다. 화면이 좁아져도 절대 배치된 요소는 스스로 자리를 양보하지 않는다. 그래서 나는 레이아웃의 큰 골격은 절대 배치로 짜지 않고, 작은 장식이나 겹침 요소에 국한해 쓴다. 뼈대는 흐름 기반 배치에 맡기는 편이 안전하다.

절대 배치의 크기 동작도 알아둘 만하다. 폭을 지정하지 않으면 내용만큼만 차지하거나, 네 방향 값에 따라 늘어난다. 이 동작이 직관과 어긋날 때가 있어, 나는 절대 배치 요소의 크기가 예상과 다르면 방향 값과 폭 지정을 함께 점검한다. 기준점과 크기, 이 둘이 절대 배치를 다루는 두 열쇠다.

3. 고정 배치와 화면 고정

고정 배치는 요소를 화면 자체에 고정한다. 스크롤을 아무리 내려도 그 요소는 화면의 같은 자리에 머문다. 스크롤을 따라오는 상단 바, 화면 구석의 채팅 버튼, 항상 보이는 맨 위로 가기 버튼이 이 방식으로 만들어진다. 흐름에서 빠지는 건 절대 배치와 같지만 기준이 화면이라는 점이 다르다.

고정 배치는 사용자가 어디를 보든 특정 요소를 계속 노출해야 할 때 유용하다. 나는 긴 글에서 목차나 공유 버튼을 화면에 고정해 언제든 닿게 만든다. 다만 화면을 가리는 요소이므로 크기와 위치를 신중히 정해야 한다. 모바일에서 고정 요소가 콘텐츠를 너무 많이 덮으면 오히려 방해가 된다.

고정 배치에는 악명 높은 함정이 하나 있다. 조상 중에 변형이나 필터, 변경 예고 같은 속성이 걸린 요소가 있으면, 고정 배치의 기준이 화면이 아니라 그 조상으로 바뀐다. 그러면 화면에 고정되어야 할 요소가 엉뚱하게 조상 안에 갇혀버린다. 나는 이 함정에 걸려 왜 고정이 안 되나 며칠을 헤맨 적이 있다.

이 함정은 특히 애니메이션과 자주 충돌한다. 부드러운 효과를 위해 조상에 변형을 걸어두면, 그 안의 고정 요소가 조용히 망가진다. 그래서 나는 고정 배치가 이상하게 동작하면 가장 먼저 조상 사슬에 변형이나 필터가 걸려 있는지 훑는다. 이 습관 하나로 원인 찾는 시간이 크게 줄었다.

고정 요소는 화면을 덮으므로 다른 요소와의 겹침 순서도 중요하다. 아래에서 다룰 쌓임 순서를 신경 쓰지 않으면 고정 바가 다른 콘텐츠에 가려지거나, 반대로 눌려야 할 요소를 덮어버린다. 나는 고정 요소를 만들 때 겹침 순서를 반드시 함께 설계한다.

고정 배치는 편리한 만큼 절제해서 써야 한다. 화면 공간은 한정되어 있고, 고정 요소가 늘어날수록 실제 콘텐츠가 볼 공간은 줄어든다. 나는 정말 항상 보여야 하는 것만 고정하고, 나머지는 스크롤과 함께 흐르게 둔다. 고정은 강조의 수단이지 남발의 대상이 아니다.

4. 끈끈이 배치의 매력

끈끈이 배치는 상대 배치와 고정 배치의 성격을 절묘하게 섞은 방식이다. 요소는 평소엔 흐름 안에서 상대 배치처럼 움직이다가, 스크롤이 정해진 임계점에 닿으면 그 자리에 딱 붙어 고정된 것처럼 행동한다. 그러다 부모 영역을 벗어나면 다시 흐름을 따라간다. 이 영리한 전환이 끈끈이 배치의 매력이다.

가장 흔한 쓰임은 섹션 제목이나 표 머리를 붙이는 것이다. 목록을 스크롤할 때 각 구획의 제목이 화면 위에 붙어 있다가, 다음 구획이 올라오면 밀려나는 효과를 이 방식으로 만든다. 나는 긴 목록이나 문서에서 이 방식으로 현재 위치를 알려주는 헤더를 자주 만든다.

끈끈이 배치를 쓰려면 임계값을 반드시 지정해야 한다. 어느 위치에 닿으면 붙을지를 정하는 값인데, 이걸 빠뜨리면 붙는 동작이 아예 일어나지 않는다. 나는 처음에 이 값을 안 줘서 왜 안 붙나 한참 고민했다. 위쪽에 붙이려면 위 방향 임계값을 명시해야 비로소 동작한다.

이 방식은 스크롤 컨테이너 안에서만 동작한다는 점도 알아둬야 한다. 요소가 붙는 범위는 그 요소를 담은 부모 영역으로 제한된다. 부모를 벗어나면 다시 흐름으로 돌아간다. 그래서 부모에 넘침을 숨기는 설정이 걸려 있거나 하면 끈끈이가 제대로 작동하지 않기도 한다. 나는 붙지 않을 때 부모의 넘침 설정부터 확인한다.

끈끈이 배치의 큰 장점은 흐름을 유지한다는 것이다. 절대 배치나 고정 배치처럼 흐름에서 빠지지 않으므로 원래 공간을 지키고, 그래서 레이아웃에 구멍이 생기지 않는다. 나는 자바스크립트 없이 스크롤 연동 효과를 만들 수 있다는 점에서 이 방식을 특히 아낀다. 예전엔 이런 효과에 스크롤 이벤트를 붙여야 했다.

다만 붙는 요소가 너무 많으면 화면이 정신없어진다. 여러 구획 제목이 동시에 쌓이거나, 붙은 요소가 콘텐츠를 가리면 오히려 읽기 방해가 된다. 나는 끈끈이 요소를 화면당 하나 정도로 절제하고, 붙었을 때 배경을 채워 아래 내용이 비쳐 보이지 않게 한다. 절제와 배경 처리가 깔끔함의 요령이다.

5. 포지셔닝을 실무에서 쓰는 법

다섯 가지 배치를 배우고 나서 내가 세운 원칙은, 레이아웃의 뼈대에는 포지셔닝을 쓰지 않는다는 것이다. 큰 골격은 흐름 기반 배치에 맡기고, 포지셔닝은 그 위에 얹는 겹침이나 고정 요소에 국한한다. 포지셔닝으로 전체 레이아웃을 짜면 반응형에서 반드시 무너진다.

겹침 배치가 필요하면 나는 거의 반사적으로 부모 상대 배치, 자식 절대 배치의 짝을 떠올린다. 이 공식은 배지, 캡션, 아이콘, 덮개 등 대부분의 겹침에 통한다. 기준점을 명확히 세우는 이 습관 덕에 요소가 화면 밖으로 날아가는 사고가 사라졌다.

화면에 계속 붙어 있어야 하면 고정 배치, 스크롤에 반응해 붙었다 떨어져야 하면 끈끈이 배치를 쓴다. 이 둘을 헷갈리지 않는 게 중요하다. 항상 같은 자리인지, 아니면 특정 지점부터 붙는지를 먼저 정하고 방식을 고르면 결정이 쉬워진다. 나는 이 질문을 먼저 던진 뒤 배치를 선택한다.

포지셔닝된 요소는 겹침이 생기므로 쌓임 순서를 늘 함께 고려해야 한다. 어느 요소가 위에 오고 아래에 갈지를 명확히 하지 않으면 덮개가 콘텐츠 뒤에 숨거나 버튼이 눌리지 않는다. 나는 포지셔닝을 쓰는 순간 쌓임 순서도 함께 설계하는 것을 하나의 세트로 다룬다. 이 둘은 떼어놓고 생각하기 어렵다.

고정 배치가 이상하면 조상의 변형과 필터를, 끈끈이가 안 붙으면 임계값과 부모의 넘침 설정을 점검하는 것이 나의 정해진 순서다. 포지셔닝의 문제는 대개 기준점의 오해에서 온다. 어떤 요소를 기준으로 삼고 있는지를 정확히 파악하면 대부분의 위치 문제가 풀린다.

정리하면 포지셔닝은 정적, 상대, 절대, 고정, 끈끈이의 다섯 방식으로 나뉘며 각각 기준점이 다르다. 상대 배치는 기준을 제공하고, 절대 배치는 그 위에 얹히며, 고정과 끈끈이는 화면과 스크롤에 반응한다. 이 기준점을 이해하는 것이 전부다. 다음 편에서는 오늘날 배치의 주력인 유연 상자, 플렉스박스로 넘어간다.