weniv canvas 활용
1. weniv canvas 활용
위니브 캔버스는 위니브에서 제작한 바이브코딩용 UI 툴입니다.
AI를 직접적으로 활용하는 툴은 아니지만 가장 큰 장점으로 레이아웃을 만들어 JSON으로 저장할 수 있다는 장점이 있습니다. 상세한 UI를 잡는 프로그램은 아니며, 대략적인 UI를 잡는 프로그램입니다.
JSON(JavaScript Object Notation)은 데이터를 저장하고 전송하기 위한 경량의 텍스트 기반 데이터입니다. 사람이 읽고 쓰기 쉽고, 기계가 사용하기도 쉬운 형식입니다. 아래와 같은 형식으로 되어 있습니다.
{
"이름": "홍길동",
"나이": 30,
"직업": "개발자"
}{
"이름": "홍길동",
"나이": 30,
"직업": "개발자"
}
이렇게 잡힌 UI를 오른쪽 상단 다운로드 버튼을 통해 JSON 파일 형식으로 다운로드 받아주세요. 작업하려는 파일에 이 파일을 가져다 놓고 Claude Code에게 다음과 같이 프롬프트로 작업을 지시하면 오차없이 수행합니다.
prototype.json이라는 파일을 읽어 이대로 html파일을 작성해줘.prototype.json이라는 파일을 읽어 이대로 html파일을 작성해줘.
위 이미지가 작성된 파일입니다. 다만 이렇게 하였을 경우 제대로된 UI를 얻기는 어렵기 때문에 아래와 같이 프롬프트를 적절히 변형하는 것을 권합니다.
위니브 캔버스라는 서비스로 prototype.json이라는 파일을 얻어내었어. 이 툴은 반응형, 정렬 등을 완벽히 고려하는 서비스는 아니야. 이 파일을 읽어서 데스크톱, 모바일에 대응되도록 UI를 만들어주고, 적절히 모던한 웹페지로 수정하며 tailwindcss를 사용하여 html파일을 작성해줘. 단, 전체적인 골격은 이 파일에서 벗어나지 않도록 해줘.위니브 캔버스라는 서비스로 prototype.json이라는 파일을 얻어내었어. 이 툴은 반응형, 정렬 등을 완벽히 고려하는 서비스는 아니야. 이 파일을 읽어서 데스크톱, 모바일에 대응되도록 UI를 만들어주고, 적절히 모던한 웹페지로 수정하며 tailwindcss를 사용하여 html파일을 작성해줘. 단, 전체적인 골격은 이 파일에서 벗어나지 않도록 해줘.