<img src="/data/froala/25.05/309b4d08e6f6cdc58014662a727985f807535931.png" alt="309b4d08e6f6cdc58014662a727985f807535931.png"><a href="https://www.yourware.so/">https://www.yourware.so/</a> Vibe Coder's Instagram 바이브코딩으로 ui 를 만들수도 있고 내가 만든걸 공유하기도 하기도 합니다. 만든 결과물은 접속할 수 있는 링크도 제공하네요. <h3><strong>주요 특징</strong></h3><ul><li><strong>바이브 코딩(Vibe Coding)</strong>: Yourware는 "바이브 코딩"이라는 새로운 개념을 중심으로 운영됩니다. 이는 AI와 협업하여 창의적인 웹 프로젝트를 빠르게 제작하고 공유하는 방식을 의미합니다. 이러한 접근 방식은 특히 창의성과 실험을 중시하는 사용자들에게 적합합니다.</li><li><strong>커뮤니티 중심</strong>: 사용자들은 자신의 프로젝트를 업로드하고, 다른 사람들의 작업을 탐색하며, 피드백을 주고받을 수 있습니다. 이러한 상호작용은 창작 과정에서 새로운 아이디어를 얻고, 기술을 향상시키는 데 도움이 됩니다.</li><li><strong>AI 도구 통합</strong>: Yourware는 다양한 AI 도구와의 통합을 통해 사용자가 더욱 효율적으로 작업할 수 있도록 지원합니다. 예를 들어, 자동화된 코드 생성, 디자인 추천 등 다양한 기능을 활용할 수 있습니다.</li></ul> 그런데 여기 멋진 기능을 하나 제공하네요. <span style="color:rgb(226,80,65);" data-raw-html="span">boost</span> 라는 기능을 제공하는데 밋밋한 디자인을 멋지게 바꿔 줍니다. <img src="/data/froala/25.05/39c72fc3c7fe1ef8566f4866e0d7d84bedeaa5e1.png" alt="39c72fc3c7fe1ef8566f4866e0d7d84bedeaa5e1.png"> 디자인 도 그렇지만 구성 내용을 좀더 알차게 해 주네요. 와우\~ 그래서 한가지 테스트를 해 봤습니다. 샘플로 만들어 봤던 "주식 대시보드" 를 클로드를 이용해서 만들었습니다. <img src="/data/froala/25.05/92ac3e38b872bd46dfbd6696f2a3227a7fd13af2.png" alt="92ac3e38b872bd46dfbd6696f2a3227a7fd13af2.png"> <a href="https://vibecode.kr/_vibecoding/web/stock_dashboard/">https://vibecode.kr/_vibecoding/web/stock_dashboard/</a> 부스트 기능을 이용해서 디자인을 부스트 해 봅니다. <img src="/data/froala/25.05/ab3721dc81345c78371d91060f1b8947514d8443.png" alt="ab3721dc81345c78371d91060f1b8947514d8443.png"><a href="https://7vikf8z303.app.yourware.so/">https://7vikf8z303.app.yourware.so/</a> *** <br> 소스코드를 분석해보면 특이한게 있는데 기본 css 리셋은 tailwind 를 이용합니다.  하지만 구성과 구성요소 들에 대한 css 는 tailwind 를 사용하지 않고 따로 만들어져 있네요. yourware 와 같이 코드 출력해 주는 툴을 좋아하시는 분들도 많이 있을것 같군요.