인프런 커뮤니티 질문&답변

안녕하세요, theonering01님.

정말 좋은 질문 주셔서 감사합니다. 질문 내용으로 봐서 개발자이신 것 같네요. 우선 저도 완벽하게 다 알지는 못하지만 저의 지식과 생각을 정리하면 아래와 같습니다.

디자인 분야에서 그리드는 필수적인 요소입니다. 여기서 주의할 점은 CSS의 Flex/Grid와 디자인 쪽 그리드는 개념적으로 살짝 차이가 있습니다. 디자인 분야의 그리드는 CSS Grid가 등장하기 훨씬 이전부터 사용되어온 전통적인 개념입니다. 편집 디자인에서도 필수적으로 사용되며, 디자인의 뼈대 역할을 한다고 보시면 됩니다.

웹에서 사용되는 그리드는 강의에서 나왔듯이 컬럼 수: 12그리드, 6그리드 등 다양한 형태과 사용되며, 12컬럼 그리드가 널리 사용되는 이유는 유연한 분할(1,2,3,4,12)이 가능하기 때문입니다: 즉, 다양한 레이아웃 조합이 가능합니다.

디자인(피그마)에서는 보통은 페이지 최상단에서 그리드를 사용합니다. 하지만 개발 쪽에서는 페이지 최상단 Body에서 부터 보통 그리드를 사용하지는 않죠.

CSS Flex, Grid를 이 스타일 그리드로 생각해볼 수 있지만, 좀 더 피그마 관점에서 보면,이 두 개념은 Auto layout이라고 보시면 됩니다.

사실 피그마가 CSS Flex를 오토레이아웃으로 잘 풀어서 처음에 센세이션이 있었구요. 이번 2025년 업데이트에서는 오토레이아웃 안에서 그리드를 만들어 냈습니다.

즉, 오토레이아웃 왼쪽, 오른쪽 방향이 Flex-direction(row, column)이라고 보시면 되고, 실제로 데브모드에서 오토레이아웃을 한 레이어를 인스펙터로 보시면 그렇게 나와 있습니다.

즉, 한 마디로 정리하자면

• 피그마 그리드: 디자인의 뼈대(당연히 CSS flex, grid에도 영향) + Breakpoint 값도 제공

• 오토레이아웃: CSS Flex

• 오토레이아웃 그리드: CSS Grid

추가로 8월에 출시할 강의의 일부 중 여러가지 그리드에 내용 페이지도 첨부해드립니다. 보시다 시피 웹디자인에서 그리드는 페이지의 뼈대라고 보시면 되고 종류가 다양하게 많습니다. 메이슨리 그리드 같은 경우는 flex, grid로는 완벽히 구현하기 어렵겠죠. 아시다시피 라이브러리를 통해 구현하고 있습니다. 만약 flex, grid로만 접근하면 이러한 독창적인 그리드는 만들어내지 못할 것입니다.

궁금하신 점이나 혹시 제 답변에 오류가 있다면, 질문 주시면 감사하겠습니다.