피그마를 쓰다 보면 오토 레이아웃 없이는 하루도 못 산다는 말을 하게 됩니다. 놀랍게도 이 기능은 CSS의 플렉스박스와 거의 일대일로 맞아떨어집니다. 오토 레이아웃의 방향, 간격, 여백, 정렬이 코드에서 어떤 속성이 되는지 하나씩 짝을 지어 보겠습니다.
63.1 오토 레이아웃은 곧 플렉스박스
오토 레이아웃을 켜면 자식들이 줄을 서서 일정한 간격으로 배열됩니다. CSS에서 이 줄 세우기를 켜는 스위치가 display: flex 입니다.
.toolbar {
display: flex;
gap: 8px;
}
이 한 줄이면 안의 버튼들이 가로로 나란히 서고 사이에 8px 간격이 생깁니다. 피그마에서 오토 레이아웃을 켠 프레임과 똑같은 모습이지요. 이제부터 방향과 여백과 정렬을 하나씩 붙여 나갑니다.
63.2 방향 정하기
오토 레이아웃에는 가로 방향과 세로 방향 스위치가 있습니다. CSS에서는 flex-direction 이 그 역할을 합니다.
.row {
display: flex;
flex-direction: row;
gap: 12px;
}
.col {
display: flex;
flex-direction: column;
gap: 12px;
}
row 는 자식을 가로로, column 은 세로로 세웁니다. 재미있는 점은 방향을 바꿔도 gap 은 그대로 간격 노릇을 한다는 것입니다. 피그마에서 방향만 토글해도 간격 값이 유지되는 것과 같습니다.
63.3 간격과 안쪽 여백
오토 레이아웃에는 아이템 사이 간격과 프레임 안쪽 여백이라는 두 값이 따로 있습니다. 이 둘을 margin 하나로 뭉뚱그리면 코드가 지저분해집니다. 나쁜 예를 보겠습니다.
.list .item {
margin-right: 8px;
margin-bottom: 8px;
}
/* 마지막 아이템 여백을 또 지워야 함 */
.list .item:last-child {
margin-right: 0;
}
아이템마다 여백을 붙이면 끝자리 여백을 따로 지우는 군더더기가 생깁니다. 오토 레이아웃의 두 값을 그대로 옮기면 훨씬 깔끔합니다.
.list {
display: flex;
gap: 8px;
padding: 16px;
}
아이템 사이는 gap 이 책임지니 끝자리 예외가 사라지고, 프레임 안쪽 둘레는 padding 이 맡습니다. 오토 레이아웃의 간격 칸과 여백 칸이 코드에서도 각자 제자리를 찾은 것이지요.
63.4 수평과 수직 정렬
오토 레이아웃의 정렬 격자는 자식을 주 방향과 교차 방향으로 어떻게 붙일지 정합니다. 이 둘이 justify-content 와 align-items 입니다.
.bar {
display: flex;
justify-content: center;
align-items: center;
}
가로 방향에서 justify-content 는 주 방향인 가로 배치를, align-items 는 교차 방향인 세로 배치를 맡습니다. 둘 다 center 면 자식이 정확히 한가운데에 놓입니다. 오토 레이아웃 정렬 격자의 가운데 점을 찍은 것과 같습니다.
63.5 간격 배분과 크기 정책
오토 레이아웃의 간격 방식에는 고정 간격 말고 사이 공간을 밀어내는 방식이 있습니다. 로고는 왼쪽, 메뉴는 오른쪽으로 벌리는 흔한 툴바가 그 예입니다.
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
}
space-between 은 남는 공간을 아이템 사이로 몰아넣어, 양 끝 아이템을 가장자리로 밀어붙입니다. 이와 짝을 이루는 것이 아이템 각자의 크기 정책입니다. 피그마의 내용에 맞춤과 컨테이너 채우기가 여기 대응합니다.
.tag {
width: auto;
}
.search {
flex: 1;
}
내용에 맞춤은 width: auto 로 콘텐츠 폭만큼만 차지하고, 컨테이너 채우기는 flex: 1 로 남는 공간을 모두 빨아들입니다. 툴바에서 검색창만 쭉 늘어나고 태그는 글자 폭만 지키는 배치가 이 두 줄로 완성됩니다.
63.6 줄바꿈과 실전 카드
아이템이 많아 한 줄에 다 못 담길 때, 오토 레이아웃은 줄을 바꿔 다음 줄로 흘려보낼 수 있습니다. 이것이 flex-wrap 입니다.
.chips {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
wrap 을 켜면 폭이 모자랄 때 아이템이 아래 줄로 접히고, gap 은 가로 세로 간격 모두에 적용됩니다. 지금까지의 매핑을 모아 실제 카드 하나를 세워 봅니다.
.card {
display: flex;
flex-direction: column;
gap: 12px;
padding: 16px;
}
.card .footer {
display: flex;
justify-content: space-between;
align-items: center;
}
.card .footer .spacer {
flex: 1;
}
카드 몸통은 세로 오토 레이아웃이라 column 이고, 아래 푸터는 가로로 이름과 버튼을 양 끝에 벌려 놓는 space-between 입니다. 피그마에서 오토 레이아웃으로 짠 카드가 코드에서도 같은 골격으로 서는 것이지요.
63.7 한 아이템만 따로 정렬
오토 레이아웃 안에서 자식 하나만 정렬을 달리 두고 싶을 때가 있습니다. 다 가운데인데 아이콘 하나만 위에 붙이고 싶은 식이지요. 이때 부모 정렬을 통째로 바꾸면 다른 아이템이 흐트러집니다. 나쁜 예입니다.
.row {
display: flex;
align-items: flex-start;
}
/* 아이콘 하나 때문에 나머지도 위로 붙어 버림 */
부모의 align-items 를 건드리면 모든 자식이 영향을 받습니다. 특정 자식만 바꿀 때는 그 자식에게 align-self 를 줍니다.
.row {
display: flex;
align-items: center;
}
.row .icon {
align-self: flex-start;
}
나머지 아이템은 가운데를 지키고 아이콘만 위로 올라붙습니다. 피그마에서 개별 아이템의 정렬을 따로 지정하는 것과 같은 동작이지요. 부모 규칙은 그대로 두고 예외인 자식에게만 별도 지시를 주는 편이, 나중에 읽기에도 훨씬 정직합니다.
63.8 정리
오토 레이아웃은 방향, 간격, 여백, 정렬이라는 몇 개의 손잡이로 이루어져 있고, 그 손잡이 하나하나가 플렉스박스 속성과 짝을 이룹니다. 손잡이와 속성의 짝을 한자리에 모아 둡니다.
.auto-layout {
display: flex;
flex-direction: row;
gap: 12px;
padding: 16px;
justify-content: space-between;
align-items: center;
}
방향은 flex-direction, 간격은 gap, 안쪽 여백은 padding, 정렬은 justify-content 와 align-items, 크기는 flex 와 width 입니다. 이 대응표를 손에 쥐고 있으면, 피그마에서 짠 오토 레이아웃을 볼 때마다 머릿속에서 곧바로 플렉스박스가 그려집니다. 도구와 코드가 같은 언어를 쓰는 순간, 디자인과 구현 사이의 거리는 부쩍 가까워집니다.