플렉스박스 컨테이너(Flexbox Container)의 이해: 최신 레이아웃 뼈대 잡기

웹사이트를 집 짓기에 비유하자면, 텍스트나 이미지 같은 ‘위젯(요소, 엘리먼트)’은 가구나 벽지입니다. 가구를 들여놓기 전에 방(레이아웃)을 먼저 만들어야겠죠?

최신 엘리멘터에서 이 방을 만드는 핵심 뼈대가 바로 **’컨테이너(Container)’**입니다. 30년 동안 수많은 후배들을 가르치며 항상 강조했던, **”이 컨테이너의 원리만 완벽히 이해하면 웹 디자인의 80%는 끝난다“**는 바로 그 개념을 지금부터 확실하게 잡아드리겠습니다.

1. 컨테이너(Container)란 무엇인가요?

과거에는 가로 층을 나누는 ‘섹션’과 세로 칸을 나누는 ‘컬럼’ 두 가지를 복잡하게 섞어 써야 했습니다. 하지만 이제는 ‘컨테이너’ 하나로 통일되었습니다.

조금 예전에 엘리멘터로 개발된 웹사이트들은 대부분 섹션으로 제작되어 있어 속도도 약간 느리고, 여러 모로 불편한 점이 많이 있습니다. 섹션을 컨테이너로 전환할 수 있지만 함부로 전환하시면 레이아웃이 망가지는 경우도 많으니 각별히 주의하세요.

컨테이너는 말 그대로 내용물(위젯이나 또 다른 컨테이너)을 담는 **’유연한 상자’**입니다. 이 상자 안에 위젯(요소, 디자인 단위, 기능 모듈 등등 비슷한 개념으로 이해하세요)들을 가로로 나열할지, 세로로 쌓아 올릴지 방향만 결정해 주면 됩니다. 불필요한 코드가 줄어들어 웹사이트 속도도 훨씬 빨라집니다.

2. 컨테이너 뼈대 만들기 실전

자, 이제 직접 최신 구조를 짜보겠습니다.

Step 1: 새 컨테이너 추가하기 우측 빈 캔버스 중앙에 있는 회색 [ + ] (새 컨테이너 추가) 버튼을 클릭합니다. 그리드는 다음 중급편에서 설명하기로 하고 지금은 플렉스 박스만 선택합니다.

Step 2: 방향(레이아웃) 구조 선택하기 버튼을 누르면 화살표 모양이 그려진 여러 개의 레이아웃 박스들이 나타납니다.

• 아래 화살표 (↓ 세로 방향): 상자 안의 위젯들이 위에서 아래로 차곡차곡 쌓입니다.

• 오른쪽 화살표 (→ 가로 방향): 상자 안의 위젯들이 왼쪽에서 오른쪽으로 나란히 배치됩니다. 가장 기본이 되는 **두 개의 상자가 가로로 나란히 있는 구조(좌우 50:50 분할 느낌)**를 클릭해 보세요.

Step 3: 생성된 뼈대 확인하기 이제 캔버스에 회 테두리로 둘러싸인 큰 상자(부모 컨테이너)가 생겼고, 그 안에 두 개의 작은 상자(자식 컨테이너)가 나란히 배치된 것을 볼 수 있습니다. 현재는 정확히 구분이 잘 안되실텐데요. 여백이나 간격 설정이 0으로 되어 있어 큰 바깥 컨테이너 내부에 2개의 분할된 컨테이너가 들어있습니다. 아래에서 몇 가지 작업을 해주면 보다 쉽게 보실 수 있습니다. 컨테이너에 마우스를 올리면 왼쪽 위에 사각형 아이콘이 표시되는데 이것이 바로 ‘컨테이너 편집’ 버튼입니다. 아래 그림의 왼쪽에 **컨테이너 편집**창이 표시되어 있는 점을 잘 보세요.
오른쪽 **구조**창의 컨테이너 앞 삼각형을 클릭하면 바깥 큰 컨테이너 안에 들어있는 좌우로 분할된 작은 컨테이너 2개가 들어있는 것을 확인하실 수 있습니다.

3. 컨테이너 핵심 설정: 정렬과 간격의 마법

큰 상자(부모 컨테이너)의 왼쪽 상단 모서리 회색 네모를 클릭한 후, 좌측 설정 패널을 봐주세요. 이곳이 바로 플렉스박스 컨테이너의 꽃입니다.

• 방향 (Direction): 언제든지 가로형을 세로형으로, 세로형을 가로형으로 클릭 한 번에 바꿀 수 있습니다.

• 콘텐츠 정렬 (Justify Content): 상자 안의 내용물들을 왼쪽 끝으로 밀지, 가운데로 모을지, 양쪽 끝으로 벌려 놓을지(Space Between) 결정합니다.

• 항목 정렬 (Align Items): 내용물들의 위아래 높낮이(위로 붙이기, 가운데 정렬, 아래로 붙이기)를 맞춥니다.

• 간격 (Gap): 컨테이너 안에 들어가는 위젯과 위젯 사이의 띄어쓰기 간격을 숫자로 정밀하게 제어합니다. (예: 20px)

4. 내용 너비: 지정 너 vs 전체 너비(Full Width)

초보자분들이 레이아웃을 잡을 때 꼭 알아야 할 설정입니다. 좌측 패널의 [레이아웃] 탭 상단에 있습니다.

• 지정 너비: 내용물(텍스트, 이미지)이 화면 양끝까지 가지 않고, 모니터 중앙의 일정한 너비 안에 가지런히 모여 있도록 제한합니다. 웹사이트의 가독성을 높이기 위해 본문 영역에 주로 사용합니다.

• 전체 너비 (Full Width): 내용물이 모니터 화면의 왼쪽 끝부터 오른쪽 끝까지 100% 꽉 차게 늘어납니다. 웅장한 메인 배너 이미지나 전체 화면 배경색을 깔 때 사용합니다.

💡 시니어 디자이너의 실무 팁 (구조와 중첩 이해) 컨테이너 안에 또 다른 컨테이너를 무한히 집어넣을 수 있습니다(중첩). 구조가 복잡해지면 캔버스에서 마우스로 원하는 상자를 클릭하기 힘들어집니다. 지난 레슨에서 배운 상단 오른쪽 툴바의 겹친 레이어 아이콘의 **📑 구조**를 켜보세요. 부모 컨테이너와 자식 컨테이너가 폴더 트리 형태로 일목요연하게 정리되어 있어, 원하는 뼈대를 한 번의 클릭으로 정확하게 선택할 수 있습니다.

완벽합니다! 이제 우리는 빈 땅에 튼튼하고 가벼운 최신식 뼈대를 세웠습니다. 컨테이너의 방향을 잡고 정렬하는 법을 알았으니, 이제 그 방을 예쁜 가구들로 채워 넣을 차례입니다.

다음 [레슨 4]에서는 드디어 이 컨테이너 안에 글자(제목, 텍스트)를 쓰고, 이미지와 버튼을 넣는 ‘필수 기본 위젯 다루기 1편’을 진행하겠습니다.