레이아웃 변경

레이아웃 변경 개요

바이브 코딩을 이용하면 복잡한 CSS 속성이나 HTML 구조를 일일이 수정할 필요가 없습니다. AI에게 변경하고 싶은 **‘시각적 의도’**를 설명하면, AI가 프로젝트의 스타일 시트와 컴포넌트 구조를 분석하여 최적의 레이아웃으로 변경합니다.

전체적인 색상이나 컴포넌트의 간격 등 디자인 시스템을 변경하고 싶을 때 사용합니다.

Prompt: “전체적인 웹 사이트 톤을 다크 모드로 바꿔줘. 메인 컬러는 세련된 네이비 블루로 설정하고, 모든 버튼의 모서리를 조금 더 둥글게(rounded) 수정해줘.”

사이드바의 위치를 옮기거나 네비게이션 바의 구조를 변경하는 등 구조적 레이아웃을 조정합니다.

Prompt: “현재 왼쪽에 있는 사이드바를 오른쪽으로 옮겨줘. 그리고 상단 헤더에 로고는 왼쪽 끝으로, 마이페이지 아이콘은 오른쪽 끝으로 정렬해줘.”

모바일이나 태블릿 환경에 맞는 레이아웃 대응을 요청할 수 있습니다.

Prompt: “이 페이지가 모바일 화면(768px 이하)으로 보일 때는 카드 리스트가 한 줄에 하나씩만 나오도록 반응형 코드를 추가해줘.”

참고 파일 열어두기: 레이아웃에 영향을 주는 App.js나 global.css 파일을 IDE 탭에 미리 열어두면 AI가 더 정확하게 레이아웃을 파악합니다.
추상적 표현 활용: “패딩을 20px 줘”라는 구체적인 수치도 좋지만, “조금 더 여유로운 느낌이 나게 간격을 넓혀줘”와 같은 추상적 표현도 AI가 프로젝트 컨벤션에 맞춰 적절히 해석합니다.
반복 작업 방지: 특정 레이아웃 스타일이 프로젝트 전체에 적용되어야 한다면, Rules 기능을 통해 해당 스타일을 표준으로 등록해두는 것이 좋습니다.