CSS Grid & Flexbox 동적 레이아웃 비주얼 빌더 - Layout Forge

CSS Grid & Flexbox 동적 레이아웃 비주얼 빌더(Layout Forge)는 화면 구조를 직접 움직이며 Grid와 Flexbox CSS를 바로 확인할 수 있는 브라우저 기반 레이아웃 실험실입니다. 어두운 전문 IDE 테마 안에서 열 수, 간격, 정렬, 패딩, 반경을 조절하면 실제 레이아웃과 코드가 동시에 갱신됩니다.

주요 기능

• Grid / Flexbox 즉시 전환: 동일한 카드 구성으로 두 레이아웃 모델의 차이를 비교합니다.
• 실시간 Inspector: columns, gap, align-items, justify-content 등 핵심 속성을 수치와 선택 메뉴로 조절합니다.
• 드래그 정렬: 캔버스의 카드를 끌어 순서를 바꾸고 선택 상태를 확인합니다.
• 반응형 프리뷰: Mobile, Tablet, Desktop 폭 버튼으로 레이아웃 밀도를 빠르게 점검합니다.
• CSS 복사 및 파일 내보내기: 생성된 코드를 클립보드로 복사하거나 layout.css로 저장합니다.

사용 방법

1. 상단에서 Grid 또는 Flexbox 모드를 고릅니다.
2. 왼쪽 Inspector에서 열 수와 간격, 정렬 값을 바꿉니다.
3. 중앙 캔버스에서 카드를 드래그해 항목 순서를 조절합니다.
4. 오른쪽 패널에서 자동 생성된 CSS를 확인하고 Copy 또는 Export CSS를 선택합니다.

자주 묻는 질문 (FAQ)

어떻게 시작하나요?

앱을 열면 제공되는 기본 설정과 화면 안내를 확인할 수 있습니다. 먼저 예시 상태에서 주요 조작을 살펴본 뒤, 목적에 맞게 입력값이나 도구를 변경해 보세요.

별도 설치가 필요한가요?

이 앱은 웹 브라우저에서 실행하도록 구성되어 있습니다. 원활한 사용을 위해 최신 브라우저와 안정적인 인터넷 환경을 권장합니다.

결과가 예상과 다르게 보이면 무엇을 확인해야 하나요?

현재 선택한 설정, 입력값, 화면 크기, 브라우저 상태에 따라 결과가 달라질 수 있습니다. 초기화 또는 예시 설정으로 돌아간 뒤 값을 하나씩 바꿔 확인하면 원인을 파악하기 쉽습니다.