내비게이션 바에 로고는 왼쪽, 메뉴는 오른쪽에 놓고 싶었던 날을 나는 아직도 기억한다. 예전 방식으로는 요소를 띄우거나 인라인 블록으로 억지로 나열하며 씨름해야 했고, 세로 가운데 정렬은 거의 마법에 가까웠다. 그러다 유연 상자를 만나고 나서, 그 모든 씨름이 속성 몇 줄로 끝난다는 걸 알았을 때의 해방감은 지금도 생생하다.
이번 편은 유연 상자의 첫걸음으로, 두 개의 축과 정렬 개념을 다룬다. 주축과 교차축이 무엇인지, 그 두 축을 따라 아이템을 어떻게 정렬하는지, 그리고 간격과 방향을 어떻게 다루는지를 살펴본다. 이 축의 개념만 확실히 잡으면 유연 상자의 절반은 이미 이해한 셈이다.
1. 유연 상자는 한 방향 배치 도구다
유연 상자는 한 줄로 늘어선 아이템들을 다루는 데 특화된 배치 방식이다. 부모에 이 배치 값을 주면, 그 직계 자식들이 아이템이 되어 한 방향으로 나란히 놓인다. 여기서 중요한 건 이것이 기본적으로 한 방향, 즉 일차원 배치라는 점이다. 행과 열을 동시에 다루는 격자와는 성격이 다르다.
부모를 유연 컨테이너로 만드는 순간 많은 것이 바뀐다. 자식들은 원래의 블록이나 인라인 성질을 잃고, 기본적으로 옆으로 나란히 놓인다. 블록 요소인 문단 여러 개도 유연 컨테이너 안에서는 한 줄에 늘어선다. 나는 이 변화를 처음 보고 신기해했는데, 부모의 배치 문맥이 자식을 지배한다는 걸 실감한 순간이었다.
유연 상자가 강력한 이유는 남은 공간을 지능적으로 다루기 때문이다. 아이템들을 어떻게 정렬하고, 남는 공간을 어떻게 나누고, 부족하면 어떻게 줄일지를 유연하게 결정한다. 이 유연함이 이름의 유래다. 고정된 크기로 딱딱 맞추는 게 아니라, 상황에 따라 늘고 주는 배치라는 뜻이다.
유연 상자는 특히 컴포넌트 단위 배치에 잘 맞는다. 내비게이션 바, 툴바, 카드 안의 요소 정렬, 버튼과 아이콘의 나열처럼 한 줄 안에서 벌어지는 배치가 그 무대다. 나는 페이지 전체의 큰 격자는 다음에 볼 격자 방식에 맡기고, 그 안의 작은 배치들을 유연 상자로 처리한다.
유연 상자를 쓰기 전과 후의 차이는 극적이다. 세로 가운데 정렬, 양끝 배치, 균등 분배 같은, 예전엔 온갖 편법이 필요했던 배치들이 이제 속성 한두 줄로 끝난다. 나는 유연 상자를 배우고 나서 CSS 레이아웃에 대한 두려움이 크게 줄었다. 그만큼 이 도구는 판을 바꿨다.
이 편에서는 유연 상자의 정렬에 집중하고, 아이템이 어떻게 늘고 주는지는 다음 편에서 다룬다. 정렬과 신축은 유연 상자의 두 기둥인데, 우선 축과 정렬을 확실히 잡아야 신축도 이해된다. 그러니 지금은 아이템을 어느 축을 따라 어떻게 늘어놓는지에 집중하자.
2. 주축과 교차축이라는 두 방향
유연 상자를 이해하는 열쇠는 두 개의 축이다. 아이템이 나열되는 방향을 주축이라 하고, 그에 수직인 방향을 교차축이라 한다. 기본적으로 주축은 가로, 교차축은 세로다. 이 두 축을 머릿속에 그리는 것이 유연 상자를 다루는 첫걸음이다. 모든 정렬 속성이 이 두 축을 기준으로 동작하기 때문이다.
주축의 방향은 방향 속성으로 바꿀 수 있다. 기본값에서는 아이템이 왼쪽에서 오른쪽으로 늘어서지만, 이 값을 바꾸면 세로로 쌓이게도, 역방향으로 늘어서게도 할 수 있다. 방향을 세로로 바꾸면 주축이 세로가 되고 교차축이 가로가 된다. 즉 축은 고정된 게 아니라 방향 설정에 따라 뒤바뀐다.
이 점이 초보자를 가장 헷갈리게 한다. 정렬 속성이 세로 정렬인지 가로 정렬인지가 방향 설정에 따라 달라지기 때문이다. 나는 방향을 세로로 바꾼 뒤 가로 정렬 속성을 줬는데 세로로 정렬되어 혼란스러웠던 적이 있다. 속성은 화면의 상하좌우가 아니라 주축과 교차축을 기준으로 이해해야 한다.
그래서 나는 유연 상자를 다룰 때 항상 먼저 묻는다. 지금 주축은 어느 방향인가. 이 질문의 답이 정해지면 어떤 정렬 속성이 어느 방향을 다루는지가 자동으로 정리된다. 주축을 따라 정렬하는 속성과 교차축을 따라 정렬하는 속성이 명확히 나뉘기 때문이다.
방향을 역방향으로 두는 설정도 있는데, 이때는 시각적 순서만 뒤집힐 뿐 실제 문서 순서는 그대로다. 그래서 화면에는 거꾸로 보여도 화면 낭독기는 원래 순서로 읽는다. 나는 이 불일치가 접근성 문제를 일으킬 수 있어, 시각 순서와 문서 순서가 어긋나야 할 때는 신중하게 판단한다.
결국 주축과 교차축은 유연 상자의 좌표계다. 이 좌표계를 명확히 세우면 정렬 속성들이 제자리를 찾는다. 나는 유연 상자가 이상하게 동작할 때 대개 축을 착각한 경우가 많았다. 화면의 방향이 아니라 논리적인 두 축으로 생각하는 습관, 이것이 유연 상자 숙달의 지름길이다.
3. 주축을 따라 정렬하기
주축을 따라 아이템을 정렬하는 속성이 있다. 이 속성으로 아이템들을 주축의 시작점에 몰거나, 끝점에 몰거나, 가운데로 모으거나, 아니면 고르게 흩뿌릴 수 있다. 가로가 주축인 기본 상태에서는 이 속성이 곧 좌우 정렬이 된다. 내비게이션 바에서 로고와 메뉴를 양끝으로 벌리는 것도 이 속성으로 한다.
가장 자주 쓰는 값은 양끝 분배다. 첫 아이템은 시작점에, 마지막 아이템은 끝점에 붙이고 나머지 공간을 사이에 고르게 나눈다. 로고는 왼쪽, 메뉴는 오른쪽인 그 흔한 배치가 이 값 하나로 끝난다. 나는 이 값을 알고 나서 요소를 오른쪽으로 밀던 온갖 편법을 전부 버렸다.
비슷하지만 미묘하게 다른 값들도 있다. 아이템 둘레에 같은 간격을 주는 값, 아이템 사이 간격과 양끝 간격을 특정 비율로 맞추는 값 등이다. 이 값들은 아이템 주변에 여백이 어떻게 분배되는지가 조금씩 다르다. 나는 상황에 따라 이 미묘한 차이를 골라 쓰며 시각적 리듬을 조절한다.
가운데로 모으는 값도 자주 쓴다. 남는 공간을 양쪽에 똑같이 두어 아이템 뭉치를 주축 가운데에 놓는다. 버튼 하나나 짧은 메뉴를 화면 가운데에 놓을 때 유용하다. 시작점이나 끝점에 모으는 값과 함께, 이 세 가지가 주축 정렬의 기본 삼총사다.
이 정렬은 아이템들이 남는 공간이 있을 때만 눈에 띄게 동작한다. 아이템이 컨테이너를 꽉 채우면 정렬할 여유가 없기 때문이다. 나는 정렬이 안 먹히는 것 같을 때 아이템들이 이미 공간을 다 차지하고 있는 건 아닌지 먼저 확인한다. 남는 공간의 존재가 이 정렬의 전제다.
주축 정렬은 유연 상자에서 가장 활용도가 높은 속성이다. 좌우 배치의 거의 모든 요구가 이 속성 하나로 해결된다. 나는 새 배치를 짤 때 이 속성으로 주축 방향의 큰 그림을 먼저 잡고, 세부는 그다음에 다듬는다. 주축 정렬을 손에 익히는 것이 유연 상자 활용의 첫 번째 도약이다.
4. 교차축을 따라 정렬하기
교차축을 따라 아이템을 정렬하는 속성은 별도로 있다. 가로가 주축인 기본 상태에서 이 속성은 세로 정렬을 담당한다. 아이템들을 교차축의 위, 아래, 가운데에 맞추거나, 늘려서 컨테이너 높이를 채우게 할 수 있다. 그토록 어렵던 세로 가운데 정렬이 이 속성 하나로 끝난다.
기본값은 아이템을 늘려 교차축을 채우는 것이다. 그래서 유연 컨테이너 안의 아이템들은 특별한 지정이 없으면 서로 높이가 같아진다. 키가 다른 카드들이 나란히 놓였을 때 자동으로 높이가 맞춰지는 이유가 이것이다. 나는 이 자동 높이 맞춤을 카드 목록에서 즐겨 활용한다.
가운데 정렬 값을 주면 아이템들이 교차축 가운데로 온다. 높이가 제각각인 아이콘과 글자를 나란히 놓을 때, 이 값으로 세로 중심선을 맞추면 깔끔해진다. 나는 아이콘 옆에 텍스트를 붙이는 흔한 배치에서 이 값을 거의 항상 쓴다. 세로 중앙 정렬이 이렇게 쉬워졌다는 게 여전히 놀랍다.
주축 정렬과 교차축 정렬을 함께 쓰면 완벽한 중앙 정렬이 된다. 주축도 가운데, 교차축도 가운데로 두면 아이템이 컨테이너의 정중앙에 놓인다. 예전엔 온갖 계산과 편법이 필요했던 정중앙 배치가 이제 두 속성으로 끝난다. 나는 무언가를 화면 한복판에 놓아야 할 때 반사적으로 이 조합을 떠올린다.
개별 아이템만 교차축에서 다르게 정렬하고 싶을 때도 있다. 이때는 그 아이템에만 정렬을 지정하는 속성을 쓴다. 다른 아이템은 위에 맞추되 하나만 아래에 붙이는 식이다. 컨테이너 전체의 정렬을 덮어쓰는 이 개별 지정을 나는 예외적인 아이템을 다룰 때 활용한다.
교차축 정렬은 아이템이 여러 줄일 때 조금 더 복잡해진다. 여러 줄 전체를 교차축에서 분배하는 별도의 속성이 있는데, 이건 아이템이 줄바꿈될 때만 의미가 있다. 나는 한 줄 배치에서는 아이템 정렬만 신경 쓰고, 여러 줄이 될 때 줄 분배까지 함께 고려한다. 줄 수에 따라 필요한 속성이 달라진다.
5. 간격과 방향, 실무의 감각
아이템 사이 간격은 예전엔 여백으로 만들었지만, 이제는 전용 간격 속성이 있다. 컨테이너에 간격 값을 한 번 주면 아이템들 사이에 균일한 거리가 생기고, 양끝에는 여백이 붙지 않는다. 나는 이 속성을 알고 나서 마지막 아이템 여백을 지우던 번거로운 편법을 완전히 버렸다.
간격 속성의 장점은 여백 상쇄 같은 함정에서 자유롭다는 것이다. 아이템 개수가 바뀌어도 간격이 자동으로 유지되고, 방향을 바꿔도 잘 대응한다. 나는 유연 상자를 쓸 때 아이템 여백 대신 이 간격 속성으로 거리를 만드는 것을 기본으로 삼는다. 코드가 간결해지고 실수가 줄어든다.
줄바꿈 설정도 실무에서 중요하다. 기본적으로 유연 상자는 아이템을 한 줄에 욱여넣으려 하지만, 줄바꿈을 허용하면 공간이 부족할 때 아이템이 다음 줄로 넘어간다. 카드 여러 개를 나열하되 화면이 좁아지면 자연스럽게 줄이 바뀌게 하고 싶을 때 이 설정을 켠다. 반응형 배치의 기본 도구다.
방향과 줄바꿈을 한 번에 지정하는 단축 속성도 있다. 나는 가로로 나열하되 줄바꿈을 허용하는 조합을 자주 쓴다. 이 조합에 간격 속성과 아이템 신축을 더하면, 미디어 쿼리 없이도 꽤 유연한 배치가 완성된다. 유연 상자의 진짜 힘은 이 속성들의 조합에서 나온다.
실무에서 나는 유연 상자를 다룰 때 순서를 정해두었다. 먼저 방향을 정해 주축을 확정하고, 주축 정렬로 큰 그림을 잡고, 교차축 정렬로 세로 위치를 맞추고, 마지막으로 간격을 준다. 이 순서를 따르면 배치가 뒤엉키지 않는다. 축을 먼저 세우고 정렬을 얹는 이 습관이 나를 헤매지 않게 해준다.
정리하면 유연 상자는 주축과 교차축이라는 두 방향 위에서 아이템을 정렬하는 도구다. 주축 정렬로 좌우를, 교차축 정렬로 상하를 다루고, 둘을 합치면 완벽한 중앙 정렬이 된다. 간격과 줄바꿈까지 더하면 대부분의 한 줄 배치가 해결된다. 다음 편에서는 아이템이 남는 공간을 어떻게 늘리고 줄이는지, 신축의 세계로 들어간다.