바이브코딩으로 UI를 개발할 때 필요한 상세한 디자인 가이드를 자동으로 생성해주는 도구입니다. 각 옵션을 선택하면 바이브코딩이 바로 이해할 수 있는 마크다운 지시서가 만들어집니다.
웹사이트의 전체적인 구조와 배치를 결정합니다. 프로젝트의 성격에 맞는 레이아웃을 선택하세요.
사이드바 + 헤더 + 메인 컨텐츠
관리자 페이지, 데이터 분석 도구에 적합
풀스크린 섹션 기반
제품 소개, 서비스 홍보에 적합
중앙 정렬 단일 컬럼
콘텐츠 중심 사이트에 적합
그리드 기반 상품 진열
온라인 쇼핑몰, 상품 카탈로그에 적합
탭 기반 다중 뷰
복잡한 관리 기능이 필요한 경우
마소니 그리드
작품 전시, 갤러리 형태에 적합
브랜드의 정체성과 사용자 감정을 표현하는 색상 팔레트를 선택하세요.
신뢰감 있는 파란색 계열
기업, 금융, 기술 분야에 적합
자연스러운 초록색 계열
환경, 건강, 자연 관련에 적합
활기찬 주황색 계열
음식, 엔터테인먼트, 창의적 분야에 적합
고급스러운 보라색 계열
럭셔리, 프리미엄 브랜드에 적합
미니멀한 회색 계열
미니멀, 모던한 디자인에 적합
트렌디한 핑크 계열
패션, 뷰티, 젊은 층 대상에 적합
다크 테마 기반
개발자, 게임, 다크 테마 선호에 적합
따뜻한 브라운 톤
카페, 레스토랑, 따뜻한 분위기에 적합
깔끔한 화이트 기반
의료, 교육, 깔끔한 이미지에 적합
사용자와의 상호작용을 더욱 매력적으로 만들어주는 애니메이션 효과를 선택하세요.
부드러운 슬라이드 효과
메뉴 전환, 카드 이동에 적합
탄력 있는 바운스 애니메이션
알림, 강조 요소에 적합
페이드 인/아웃 전환
모달, 팝업, 페이지 전환에 적합
크기 변화 기반 인터랙션
버튼 클릭, 호버 효과에 적합
회전 및 플립 효과
로딩, 카드 뒤집기에 적합
패럴랙스 스크롤링
랜딩 페이지, 스크롤 효과에 적합
브랜드의 톤앤매너를 결정하는 타이포그래피를 선택하세요.
Inter + Pretendard 조합
기술, 스타트업, 모던한 브랜드에 적합
Playfair Display + Noto Serif
전통, 고급스러운 브랜드에 적합
JetBrains Mono + D2Coding
개발자, 기술 블로그에 적합
Pacifico + 배달의민족 주아
패션, 뷰티, 창의적 분야에 적합
Roboto + 본고딕
기업, 비즈니스, 전문적 분야에 적합
Poppins + 어그로체
디자인, 예술, 창작 분야에 적합
콘텐츠를 체계적으로 배치하는 레이아웃 시스템을 선택하세요.
전통적인 12컬럼 그리드
복잡한 레이아웃, 기업 사이트에 적합
CSS Grid 기반 유연한 레이아웃
현대적 웹사이트, 복잡한 배치에 적합
Flexbox 중심 반응형
간단한 레이아웃, 모바일 우선에 적합
부트스트랩 스타일 그리드
빠른 개발, 표준화된 레이아웃에 적합
맞춤형 브레이크포인트
특별한 요구사항, 브랜드별 디자인에 적합
버튼, 카드, 입력창 등의 UI 요소들의 시각적 스타일을 선택하세요.
둥근 모서리, 부드러운 스타일
친근하고 현대적인 느낌에 적합
날카로운 엣지, 모던한 디자인
기술적이고 전문적인 느낌에 적합
유리 효과, 블러 배경
트렌디하고 세련된 느낌에 적합
뉴모피즘 입체 효과
부드럽고 입체적인 느낌에 적합
미니멀 플랫 디자인
깔끔하고 심플한 느낌에 적합
레트로 빈티지 스타일
복고풍, 독특한 느낌에 적합
요소들 간의 간격과 여백을 결정하는 공간 시스템을 선택하세요.
조밀한 간격 (4px 기준)
정보 밀도가 높은 페이지에 적합
표준 간격 (8px 기준)
일반적인 웹사이트에 적합
여유로운 간격 (16px 기준)
여유롭고 읽기 쉬운 레이아웃에 적합
럭셔리 넓은 간격 (24px 기준)
프리미엄, 럭셔리한 브랜드에 적합
다양한 디바이스에서 최적의 사용자 경험을 제공하는 반응형 접근 방식을 선택하세요.
모바일 우선 설계
모바일 사용자가 많은 서비스에 적합
데스크톱 우선 설계
데스크톱 중심의 복잡한 기능에 적합
점진적 향상
기본 기능부터 고급 기능까지 단계적 제공
적응형 레이아웃
디바이스별 최적화된 경험 제공
웹사이트의 로딩 속도와 사용자 경험을 최적화하는 전략을 선택하세요.
극한 최적화 (Critical CSS)
최고 속도가 중요한 서비스에 적합
표준 최적화
일반적인 웹사이트에 적합
이미지 중심 최적화
갤러리, 포트폴리오에 적합
애니메이션 최적화
인터랙티브한 경험에 적합
SEO 우선 최적화
검색 노출이 중요한 사이트에 적합
옵션을 선택해주세요