바이브 디자인 랩콘텐츠·제작도구

바이브 디자인 랩은 한글 폰트와 색상, 테마를 직접 비교하고 실제 화면에 적용해 본 뒤 CSS·JSON·바이브코딩 프롬프트까지 바로 가져갈 수 있는 디자인 도구입니다. 교사와 교육용 웹앱 제작자를 위해, 복잡한 디자인 작업을 쉽고 빠르게 시작할 수 있도록 만들었습니다.

• 폰트 도감: 한글 폰트 107종을 문구와 크기에 따라 비교하고, 사용 범위·카테고리별로 검색할 수 있습니다.
• 폰트 조합: 제목·본문·강조 폰트를 조합해 실제 안내문 형태로 미리보고 CSS를 복사할 수 있습니다.
• 색상 도감: 61가지 색상 조합을 탐색하고, 배경·본문·주요색·강조색의 명암 대비를 함께 확인할 수 있습니다.
• 테마 제작: 폰트, 색상, 모서리, 그림자, 화면 밀도를 조절해 나만의 디자인 토큰을 만들고 CSS·JSON으로 내보낼 수 있습니다.
• 화면 미리보기: 대시보드, 소개 화면, 로그인, 학교 공지, 시간표를 데스크톱·태블릿·모바일 화면으로 확인할 수 있습니다.
• 바이브코딩 프롬프트 제작: 선택한 디자인 설정을 바탕으로 HTML, React, Next.js, Apps Script용 제작 프롬프트를 생성합니다.
• 나의 서랍: 마음에 드는 폰트·색상·테마를 저장하고, JSON 파일로 백업·복원할 수 있습니다.

복잡한 디자인 툴을 처음부터 다루지 않아도, 필요한 폰트와 색상을 고르고 바로 제작 코드와 프롬프트로 연결할 수 있는 것이 바이브 디자인 랩의 가장 큰 장점입니다. 위의 설명은 제작 대행을 해주신 codex가 작성하였고, 바이브 코딩을 하면서 폰트가 맘에 안들 때 구체적으로 뭐로 바꿔달라고 할지 도통 모르겠어서 아무말 대잔치로 두루뭉술하게 설명하는 저를 보며... 반성의 마음으로 만들어본 바이브코딩에 자주 사용되는 폰트 모음집 비스무리한 것입니다 ^^;; 더욱 다양한 폰트는 눈누 같은 사이트를 이용하시면 될 듯 합니다! 저도 코딩 하다가 또 괜찮은 폰트를 발견하면 중간중간 업데이트를 해보도록 하겠습니다~!!