이 장에서는 위니브에서 제작한 바이브 코딩용 UI 툴인 위니브 캔버스 활용법을 다룹니다. 레이아웃을 JSON으로 저장해 프로젝트 폴더에 넣고, Code 탭이 그대로 화면을 만들게 하는 방법을 배웁니다.

1. weniv canvas 활용

위니브 캔버스는 위니브에서 제작한 바이브 코딩용 UI 툴입니다.

• 위니브 캔버스: https://canvas.weniv.co.kr/

AI를 직접적으로 활용하는 툴은 아니지만 가장 큰 장점으로 레이아웃을 만들어 JSON으로 저장할 수 있다는 장점이 있습니다. 상세한 UI를 잡는 프로그램은 아니며, 대략적인 UI를 잡는 프로그램입니다. "저 위에 그거"라고 말로 설명하기 어려운 배치를, 마우스로 그려서 건네는 도구라고 생각하면 됩니다.

{
  "이름": "홍길동",
  "나이": 30,
  "직업": "개발자"
}

이렇게 잡힌 UI를 오른쪽 상단 다운로드 버튼을 통해 JSON 파일 형식으로 다운로드 받아주세요. 작업하려는 폴더에 이 파일을 가져다 놓고 Code 탭에서 그 폴더를 지정한 다음, 아래와 같이 요청하면 오차 없이 수행합니다.

@prototype.json 파일을 읽어 이대로 html 파일을 작성해줘.

위 이미지가 작성된 파일입니다. 다만 이렇게 하였을 경우 제대로 된 UI를 얻기는 어렵기 때문에 아래와 같이 요청문을 적절히 변형하는 것을 권합니다.

위니브 캔버스라는 서비스로 prototype.json이라는 파일을 얻어내었어. 이 툴은 반응형, 정렬 등을 완벽히 고려하는 서비스는 아니야. 이 파일을 읽어서 데스크톱, 모바일에 대응되도록 UI를 만들어주고, 적절히 모던한 웹페이지로 수정하며 tailwindcss를 사용하여 html 파일을 작성해줘. 단, 전체적인 골격은 이 파일에서 벗어나지 않도록 해줘.

6장 5절에서 만든 design-system.md가 같은 폴더에 있다면 "디자인은 @design-system.md를 따라줘"라는 한 줄을 덧붙이세요. 배치는 캔버스 JSON에서, 색과 글꼴은 디자인 시스템에서 가져오게 되어 한 번에 꽤 그럴듯한 화면이 나옵니다.