바이브 디자인 랩

예상되는 현장 변화 피지컬 코딩에서 좀 더 전문가 같은 모습을 보일 수 있다?

소개 바이브 디자인 랩은 한글 폰트와 색상, UI 요소를 직접 비교하고 내 화면에 적용해 볼 수 있는 웹 디자인 도구입니다. 마음에 드는 조합을 찾으면 웹앱 조립 화면에서 배치와 크기를 조절하고, PC·태블릿·모바일 화면에서 어떻게 보이는지 확인한 뒤 CSS·JSON·바이브코딩 프롬프트로 가져갈 수 있습니다. 교사와 교육용 웹앱 제작자가 복잡한 디자인 도구를 배우지 않고도 폰트와 색상을 골라 작업을 시작할 수 있도록 만들었습니다.

• 폰트 도감: 한글 폰트 107종을 원하는 문구와 크기로 비교합니다. 이름과 카테고리, 사용 범위로 검색할 수 있습니다.
• 폰트 조합: 제목·본문·강조 글꼴을 고르고, 실제 안내문 모양으로 확인합니다. 글꼴 모양은 팝업에서 따로 크게 볼 수 있고, 조합한 CSS도 복사할 수 있습니다.
• 색상 도감: 61가지 팔레트를 둘러보거나 색상 이름·HEX를 검색하고, 색상 선택 도구로 원하는 색을 고를 수 있습니다. 가까운 색 조합과 배경·본문의 명암 대비도 함께 확인합니다.
• 테마 제작: 폰트와 색상뿐 아니라 모서리, 그림자, 화면 밀도도 조절해 나만의 디자인 토큰을 만듭니다. CSS나 JSON으로 가져갈 수 있습니다.
• 요소 찾기와 웹앱 조립실: 버튼·탭·입력창 등 UI 예시 97개를 모양으로 살펴보고 조립판에 추가합니다. 요소를 드래그해 옮기고 크기를 조절하거나, 우클릭해 삭제할 수 있습니다. 선택한 폰트와 테마도 조립 화면에 적용됩니다.
• 화면 미리보기: 조립한 화면을 PC·태블릿·모바일 크기로 바꿔 보며 배치가 어떻게 달라지는지 확인합니다.
• 가져가기와 나의 서랍: 디자인에 맞춘 바이브코딩 프롬프트와 HTML·CSS·JSON·PNG를 가져갈 수 있습니다. 마음에 드는 폰트·색상·테마와 작업 화면은 저장하고 JSON 파일로 백업·복원할 수 있습니다.

제가 바이브 코딩을 하다 보면 '폰트가 마음에 안 들어요'라고 말하면서도, 어떤 글꼴로 바꾸고 싶은지는 몰라 막막할 때가 있었습니다. 원하는 느낌을 설명하려다 보면 ‘아무말 대잔치’가 되기도 했고요. 그래서 이름만 보고 고르는 대신 직접 모양을 비교하고, 내 화면에 적용해 본 다음, 선택한 디자인을 코드나 프롬프트로 가져갈 수 있게 만들어 봤습니다. AI 연결 없이 바로 사용할 수 있습니다. 더 다양한 글꼴은 눈누 같은 폰트 사이트에서도 찾아보실 수 있고, 저도 작업 중 괜찮은 폰트를 발견하면 조금씩 추가해 보려고 합니다. 도키피디아에서 요소의 예시, 용어, 분류를 참고했습니다. 참고한 자료와 저작권 안내는 사이트 하단에서 확인할 수 있습니다.