<div id="readability-page-1" class="page"><div><p data-app="{&quot;type&quot;:&quot;text&quot;,&quot;data&quot;:[{&quot;type&quot;:&quot;text&quot;,&quot;style&quot;:{&quot;font-family&quot;:&quot;Helvetica&quot;,&quot;background-color&quot;:&quot;#ffffff&quot;},&quot;data&quot;:[{&quot;type&quot;:&quot;text&quot;,&quot;text&quot;:&quot;AI 프로토타이핑(또는 바이브 코딩)에 접근하는 방식에는 크게 두 가지가 존재합니다. 하나는 LLM의 흐름에 맡겨 자연스럽게 아이디어를 발전시키는 것이고, 다른 하나는 기존의 프로덕트 디자인 시스템과 브랜드 자산을 적극적으로 활용하며 구조적으로 접근하는 것입니다.&quot;}]},{&quot;type&quot;:&quot;text&quot;,&quot;style&quot;:{&quot;font-family&quot;:&quot;Helvetica&quot;},&quot;data&quot;:[{&quot;type&quot;:&quot;text&quot;,&quot;text&quot;:&quot; &quot;}]},{&quot;type&quot;:&quot;text&quot;,&quot;style&quot;:{&quot;font-family&quot;:&quot;Helvetica&quot;},&quot;data&quot;:[{&quot;type&quot;:&quot;br&quot;}]},{&quot;type&quot;:&quot;text&quot;,&quot;style&quot;:{&quot;font-family&quot;:&quot;Helvetica&quot;},&quot;data&quot;:[{&quot;type&quot;:&quot;br&quot;},{&quot;type&quot;:&quot;text&quot;,&quot;text&quot;:&quot;How to build prototypes that actually look like your product | Colin Matthews: &quot;},{&quot;type&quot;:&quot;anchor&quot;,&quot;url&quot;:&quot;https://www.youtube.com/watch?v\u003dI62dr0TwyZM&quot;,&quot;data&quot;:[{&quot;type&quot;:&quot;text&quot;,&quot;text&quot;:&quot;https://www.youtube.com/watch?v\u003dI62dr0TwyZM&quot;}],&quot;target&quot;:&quot;_blank&quot;},{&quot;type&quot;:&quot;br&quot;},{&quot;type&quot;:&quot;br&quot;}]},{&quot;type&quot;:&quot;text&quot;,&quot;style&quot;:{&quot;font-family&quot;:&quot;Helvetica&quot;,&quot;background-color&quot;:&quot;#ffffff&quot;},&quot;data&quot;:[{&quot;type&quot;:&quot;text&quot;,&quot;text&quot;:&quot;링크로 공유하는 유튜브 인터뷰 영상에서 Claire Vo는 AI 프로덕트 개발에서의 자유로운 접근을 강조하는데요.&quot;}]},{&quot;type&quot;:&quot;text&quot;,&quot;style&quot;:{&quot;font-family&quot;:&quot;Helvetica&quot;},&quot;data&quot;:[{&quot;type&quot;:&quot;br&quot;}]},{&quot;type&quot;:&quot;text&quot;,&quot;style&quot;:{&quot;font-family&quot;:&quot;Helvetica&quot;},&quot;data&quot;:[{&quot;type&quot;:&quot;br&quot;}]},{&quot;type&quot;:&quot;text&quot;,&quot;style&quot;:{&quot;font-family&quot;:&quot;Helvetica&quot;,&quot;background-color&quot;:&quot;#ffffff&quot;},&quot;data&quot;:[{&quot;type&quot;:&quot;text&quot;,&quot;text&quot;:&quot;\&quot;I want to just go where LLM takes me. Ride the wave of the tokens.\&quot;라는 표현을 통해, LLM이 이끄는 방향으로 자연스럽게 탐색하는 자신의 스타일을 어필합니다. 그러나 현실적으로 기업 환경에서 이러한 접근에 한계가 있을 수 있어서 일종의 가드레일이 필요할 수 있습니다.&quot;}]},{&quot;type&quot;:&quot;text&quot;,&quot;style&quot;:{&quot;font-family&quot;:&quot;Helvetica&quot;},&quot;data&quot;:[{&quot;type&quot;:&quot;br&quot;}]},{&quot;type&quot;:&quot;text&quot;,&quot;style&quot;:{&quot;font-family&quot;:&quot;Helvetica&quot;},&quot;data&quot;:[{&quot;type&quot;:&quot;br&quot;}]},{&quot;type&quot;:&quot;text&quot;,&quot;style&quot;:{&quot;font-family&quot;:&quot;Helvetica&quot;,&quot;background-color&quot;:&quot;#ffffff&quot;},&quot;data&quot;:[{&quot;type&quot;:&quot;text&quot;,&quot;text&quot;:&quot;이러한 한계를 해결하고 실질적인 협업을 지원하기 위한 다른 접근법을 이 인터뷰 영상에 출연하는 Colin Matthews가 잘 소개해서 추천드립니다. 레니 뉴스레터에도 소개되었는데, 실제 영상으로 확인하니 더 이해가 잘 되는 것 같습니다.&quot;}]},{&quot;type&quot;:&quot;text&quot;,&quot;style&quot;:{&quot;font-family&quot;:&quot;Helvetica&quot;},&quot;data&quot;:[{&quot;type&quot;:&quot;br&quot;}]},{&quot;type&quot;:&quot;text&quot;,&quot;style&quot;:{&quot;font-family&quot;:&quot;Helvetica&quot;},&quot;data&quot;:[{&quot;type&quot;:&quot;br&quot;}]},{&quot;type&quot;:&quot;text&quot;,&quot;style&quot;:{&quot;font-family&quot;:&quot;Helvetica&quot;,&quot;background-color&quot;:&quot;#ffffff&quot;},&quot;data&quot;:[{&quot;type&quot;:&quot;text&quot;,&quot;text&quot;:&quot;Colin Matthews는 V0나 Magic Patterns와 같은 AI 프로토타이핑 도구를 활용하여, 디자인 컴포넌트 라이브러리를 구축하고, 이를 기반으로 구조적으로 프로토타이핑을 만드는 방법을 제안합니다. 스크린샷 기반으로 V0를 통해 디자인 컴포넌트 라이브러리를 만드는 것도 재미있지만, Magic Patterns가 제공하는 플러그인을 통해서 html 요소를 디자인 시스템으로 변환하고, 프로토타이핑 하는 방법을 보여줍니다.&quot;}]},{&quot;type&quot;:&quot;text&quot;,&quot;style&quot;:{&quot;font-family&quot;:&quot;Helvetica&quot;},&quot;data&quot;:[{&quot;type&quot;:&quot;br&quot;}]},{&quot;type&quot;:&quot;text&quot;,&quot;style&quot;:{&quot;font-family&quot;:&quot;Helvetica&quot;},&quot;data&quot;:[{&quot;type&quot;:&quot;br&quot;}]},{&quot;type&quot;:&quot;text&quot;,&quot;style&quot;:{&quot;font-family&quot;:&quot;Helvetica&quot;,&quot;background-color&quot;:&quot;#ffffff&quot;},&quot;data&quot;:[{&quot;type&quot;:&quot;text&quot;,&quot;text&quot;:&quot;그리고 Fork 방식으로 팀내에서 기존 베이스라인을 기반으로 여러 테스팅을 하는 것도 프로덕트 팀 간의 협업 효율성을 높이는데 유용해 보이는 접근 같습니다. 영상 길이가 길지 않아서 보시길 추천드리고요.&quot;}]},{&quot;type&quot;:&quot;text&quot;,&quot;style&quot;:{&quot;font-family&quot;:&quot;Helvetica&quot;},&quot;data&quot;:[{&quot;type&quot;:&quot;br&quot;}]},{&quot;type&quot;:&quot;text&quot;,&quot;style&quot;:{&quot;font-family&quot;:&quot;Helvetica&quot;},&quot;data&quot;:[{&quot;type&quot;:&quot;br&quot;}]},{&quot;type&quot;:&quot;text&quot;,&quot;style&quot;:{&quot;font-family&quot;:&quot;Helvetica&quot;,&quot;background-color&quot;:&quot;#ffffff&quot;},&quot;data&quot;:[{&quot;type&quot;:&quot;text&quot;,&quot;text&quot;:&quot;추가로 AI 프로토타이핑 툴이 가진 한계와 왜 영상속 방식이 깔끔한지를 설명드리면...&quot;}]},{&quot;type&quot;:&quot;text&quot;,&quot;style&quot;:{&quot;font-family&quot;:&quot;Helvetica&quot;},&quot;data&quot;:[{&quot;type&quot;:&quot;br&quot;}]},{&quot;type&quot;:&quot;text&quot;,&quot;style&quot;:{&quot;font-family&quot;:&quot;Helvetica&quot;,&quot;background-color&quot;:&quot;#ffffff&quot;},&quot;data&quot;:[{&quot;type&quot;:&quot;text&quot;,&quot;text&quot;:&quot;최근 V0 같은 AI 프로토타이핑 툴들이 GitHub와 양방향 동기화를 제공하기도 하지만, 현실적인 도전 과제가 여전히 존재합니다. 많은 AI 툴들이 특정한 파일 포맷이나 프레임워크(예: React)에 맞춰져 설계되어 있어서, 기존에 사용 중인 코드베이스를 바로 불러오는 데 어려움을 겪게 됩니다. 특히 렌더링 문제는 큰 도전 과제로 남아 있습니다.&quot;}]},{&quot;type&quot;:&quot;text&quot;,&quot;style&quot;:{&quot;font-family&quot;:&quot;Helvetica&quot;},&quot;data&quot;:[{&quot;type&quot;:&quot;br&quot;}]},{&quot;type&quot;:&quot;text&quot;,&quot;style&quot;:{&quot;font-family&quot;:&quot;Helvetica&quot;},&quot;data&quot;:[{&quot;type&quot;:&quot;br&quot;}]},{&quot;type&quot;:&quot;text&quot;,&quot;style&quot;:{&quot;font-family&quot;:&quot;Helvetica&quot;,&quot;background-color&quot;:&quot;#ffffff&quot;},&quot;data&quot;:[{&quot;type&quot;:&quot;text&quot;,&quot;text&quot;:&quot;브라우저는 오직 순수 HTML, CSS, JavaScript만 이해할 수 있습니다. 그러나 현대적인 웹 개발에서 널리 사용되는 React와 같은 라이브러리는 코드 관리가 편리하지만, 이를 브라우저가 이해할 수 있는 형태로 변환하는 build step이 필수적입니다. 이 과정은 바로 이루어지기 어렵고, 특정 파일 구조나 설정이 선제적으로 갖춰져 있어야 합니다.&quot;}]},{&quot;type&quot;:&quot;text&quot;,&quot;style&quot;:{&quot;font-family&quot;:&quot;Helvetica&quot;},&quot;data&quot;:[{&quot;type&quot;:&quot;br&quot;}]},{&quot;type&quot;:&quot;text&quot;,&quot;style&quot;:{&quot;font-family&quot;:&quot;Helvetica&quot;},&quot;data&quot;:[{&quot;type&quot;:&quot;br&quot;}]},{&quot;type&quot;:&quot;text&quot;,&quot;style&quot;:{&quot;font-family&quot;:&quot;Helvetica&quot;,&quot;background-color&quot;:&quot;#ffffff&quot;},&quot;data&quot;:[{&quot;type&quot;:&quot;text&quot;,&quot;text&quot;:&quot;LLM 역시 마찬가지로 특정 출력 포맷에 대한 구조적 정의가 필요합니다. 시스템 프롬프트를 통해 LLM이 어떤 포맷으로 결과를 출력해야 하는지 명확히 설정해야 하는데, 이때 실제 사용하는 코드베이스와 LLM의 학습된 포맷이 충돌하면 활용도가 크게 떨어질 수 있습니다. 특히 기업에서 사내 전용 라이브러리를 사용할 경우, LLM이 이를 전혀 인지하지 못하거나 접근할 수 없는 상황이 생기기도 합니다.&quot;}]},{&quot;type&quot;:&quot;text&quot;,&quot;style&quot;:{&quot;font-family&quot;:&quot;Helvetica&quot;},&quot;data&quot;:[{&quot;type&quot;:&quot;br&quot;}]},{&quot;type&quot;:&quot;text&quot;,&quot;style&quot;:{&quot;font-family&quot;:&quot;Helvetica&quot;},&quot;data&quot;:[{&quot;type&quot;:&quot;br&quot;}]},{&quot;type&quot;:&quot;text&quot;,&quot;style&quot;:{&quot;font-family&quot;:&quot;Helvetica&quot;,&quot;background-color&quot;:&quot;#ffffff&quot;},&quot;data&quot;:[{&quot;type&quot;:&quot;text&quot;,&quot;text&quot;:&quot;오랫동안 이 이슈를 고민한 Bolt.new와 같은 AI 프로토타이핑 도구들은 이 같은 문제를 해결하기 위해 웹 컨테이너(Web Container) 기술을 도입하고 있습니다. Bolt의 웹 컨테이너 기술은 브라우저 내부에서 빌드 단계를 대응하려 합니다. 가장 잠재력이 있는 플레이어라고 볼 수 있는데, 실제 테스트를 해보면 쉽지 않습니다.&quot;}]},{&quot;type&quot;:&quot;text&quot;,&quot;style&quot;:{&quot;font-family&quot;:&quot;Helvetica&quot;},&quot;data&quot;:[{&quot;type&quot;:&quot;br&quot;}]},{&quot;type&quot;:&quot;text&quot;,&quot;style&quot;:{&quot;font-family&quot;:&quot;Helvetica&quot;},&quot;data&quot;:[{&quot;type&quot;:&quot;br&quot;}]},{&quot;type&quot;:&quot;text&quot;,&quot;style&quot;:{&quot;font-family&quot;:&quot;Helvetica&quot;,&quot;background-color&quot;:&quot;#ffffff&quot;},&quot;data&quot;:[{&quot;type&quot;:&quot;text&quot;,&quot;text&quot;:&quot;엔지니어들이 많이 이용하는 Cursor, Windsurf 같은 툴들은 렌더링 없이 파일 기반으로 채팅을 주고 받는 방식이라 이러한 문제를 피할 수 있어 다르게 접근할 수 있기도 합니다. 하지만 프로덕트 매니저, 디자이너 등 다양한 직군 멤버가 소통하기에 한계가 있긴 합니다.&quot;}]},{&quot;type&quot;:&quot;text&quot;,&quot;style&quot;:{&quot;font-family&quot;:&quot;Helvetica&quot;},&quot;data&quot;:[{&quot;type&quot;:&quot;br&quot;}]},{&quot;type&quot;:&quot;text&quot;,&quot;style&quot;:{&quot;font-family&quot;:&quot;Helvetica&quot;},&quot;data&quot;:[{&quot;type&quot;:&quot;br&quot;}]},{&quot;type&quot;:&quot;text&quot;,&quot;style&quot;:{&quot;font-family&quot;:&quot;Helvetica&quot;,&quot;background-color&quot;:&quot;#ffffff&quot;},&quot;data&quot;:[{&quot;type&quot;:&quot;text&quot;,&quot;text&quot;:&quot;그래서 핵심은 유튜브 영상에 보여진 접근인 디자인 컴포넌트를 기반으로 기존 코드베이스가 아닌 새로운 프로젝트를 AI 프로토타이핑 툴에서 만드는 것이 작업할때 깔끔하다는 것을 느끼실 수 있을 것입니다.&quot;}]}]}">AI 프로토타이핑(또는 바이브 코딩)에 접근하는 방식에는 크게 두 가지가 존재합니다. 하나는 LLM의 흐름에 맡겨 자연스럽게 아이디어를 발전시키는 것이고, 다른 하나는 기존의 프로덕트 디자인 시스템과 브랜드 자산을 적극적으로 활용하며 구조적으로 접근하는 것입니다.&nbsp; How to build prototypes that actually look like your product | Colin Matthews:&nbsp;<a target="_blank" href="https://www.youtube.com/watch?v=I62dr0TwyZM">https://www.youtube.com/watch?v=I62dr0TwyZM</a>링크로 공유하는 유튜브 인터뷰 영상에서 Claire Vo는 AI 프로덕트 개발에서의 자유로운 접근을 강조하는데요. "I want to just go where LLM takes me. Ride the wave of the tokens."라는 표현을 통해, LLM이 이끄는 방향으로 자연스럽게 탐색하는 자신의 스타일을 어필합니다. 그러나 현실적으로 기업 환경에서 이러한 접근에 한계가 있을 수 있어서 일종의 가드레일이 필요할 수 있습니다. 이러한 한계를 해결하고 실질적인 협업을 지원하기 위한 다른 접근법을 이 인터뷰 영상에 출연하는 Colin Matthews가 잘 소개해서 추천드립니다. 레니 뉴스레터에도 소개되었는데, 실제 영상으로 확인하니 더 이해가 잘 되는 것 같습니다. Colin Matthews는 V0나 Magic Patterns와 같은 AI 프로토타이핑 도구를 활용하여, 디자인 컴포넌트 라이브러리를 구축하고, 이를 기반으로 구조적으로 프로토타이핑을 만드는 방법을 제안합니다. 스크린샷 기반으로 V0를 통해 디자인 컴포넌트 라이브러리를 만드는 것도 재미있지만, Magic Patterns가 제공하는 플러그인을 통해서 html 요소를 디자인 시스템으로 변환하고, 프로토타이핑 하는 방법을 보여줍니다. 그리고 Fork 방식으로 팀내에서 기존 베이스라인을 기반으로 여러 테스팅을 하는 것도 프로덕트 팀 간의 협업 효율성을 높이는데 유용해 보이는 접근 같습니다. 영상 길이가 길지 않아서 보시길 추천드리고요. 추가로 AI 프로토타이핑 툴이 가진 한계와 왜 영상속 방식이 깔끔한지를 설명드리면... 최근 V0 같은 AI 프로토타이핑 툴들이 GitHub와 양방향 동기화를 제공하기도 하지만, 현실적인 도전 과제가 여전히 존재합니다. 많은 AI 툴들이 특정한 파일 포맷이나 프레임워크(예: React)에 맞춰져 설계되어 있어서, 기존에 사용 중인 코드베이스를 바로 불러오는 데 어려움을 겪게 됩니다. 특히 렌더링 문제는 큰 도전 과제로 남아 있습니다. 브라우저는 오직 순수 HTML, CSS, JavaScript만 이해할 수 있습니다. 그러나 현대적인 웹 개발에서 널리 사용되는 React와 같은 라이브러리는 코드 관리가 편리하지만, 이를 브라우저가 이해할 수 있는 형태로 변환하는 build step이 필수적입니다. 이 과정은 바로 이루어지기 어렵고, 특정 파일 구조나 설정이 선제적으로 갖춰져 있어야 합니다. LLM 역시 마찬가지로 특정 출력 포맷에 대한 구조적 정의가 필요합니다. 시스템 프롬프트를 통해 LLM이 어떤 포맷으로 결과를 출력해야 하는지 명확히 설정해야 하는데, 이때 실제 사용하는 코드베이스와 LLM의 학습된 포맷이 충돌하면 활용도가 크게 떨어질 수 있습니다. 특히 기업에서 사내 전용 라이브러리를 사용할 경우, LLM이 이를 전혀 인지하지 못하거나 접근할 수 없는 상황이 생기기도 합니다. 오랫동안 이 이슈를 고민한 Bolt.new와 같은 AI 프로토타이핑 도구들은 이 같은 문제를 해결하기 위해 웹 컨테이너(Web Container) 기술을 도입하고 있습니다. Bolt의 웹 컨테이너 기술은 브라우저 내부에서 빌드 단계를 대응하려 합니다. 가장 잠재력이 있는 플레이어라고 볼 수 있는데, 실제 테스트를 해보면 쉽지 않습니다. 엔지니어들이 많이 이용하는 Cursor, Windsurf 같은 툴들은 렌더링 없이 파일 기반으로 채팅을 주고 받는 방식이라 이러한 문제를 피할 수 있어 다르게 접근할 수 있기도 합니다. 하지만 프로덕트 매니저, 디자이너 등 다양한 직군 멤버가 소통하기에 한계가 있긴 합니다. 그래서 핵심은 유튜브 영상에 보여진 접근인 디자인 컴포넌트를 기반으로 기존 코드베이스가 아닌 새로운 프로젝트를 AI 프로토타이핑 툴에서 만드는 것이 작업할때 깔끔하다는 것을 느끼실 수 있을 것입니다.<div data-app="{&quot;type&quot;:&quot;video&quot;,&quot;align&quot;:&quot;video_align_content_fit&quot;,&quot;url&quot;:&quot;https://www.youtube.com/embed/I62dr0TwyZM&quot;,&quot;caption&quot;:&quot;&quot;,&quot;originalName&quot;:&quot;&quot;,&quot;host&quot;:&quot;youtube&quot;,&quot;id&quot;:&quot;I62dr0TwyZM&quot;,&quot;thumbnail&quot;:&quot;https://img.youtube.com/vi/I62dr0TwyZM/0.jpg&quot;,&quot;owner&quot;:&quot;false&quot;}"><iframe width="700.000000" height="394.000000" src="//www.youtube.com/embed/I62dr0TwyZM" frameborder="0" allowfullscreen=""></iframe></div></div></div>

진용진

AI 프로토타이핑(또는 바이브 코딩)에 접근하는 방식에는 크게 두 가지가 존재합니다. 하나는 LLM의 흐름에 맡겨 자연스럽게 아이디어를 발전시키는 것이고, 다른 하나는 기존의 프로덕트 디자인 시스템과 브랜드 자산을 적극적으로 활용하며 구조적으로 접근하는 것입니다. How to build prototypes that actually look like your

디자인 컴포넌트 기반 AI 프로토타이핑

댓글