만약 저처럼 공예를 중요하게 생각하는 디자이너라면, 인공지능에서 쏟아져 나오는 형편없는 결과물, 보기 흉한 인터페이스, 그리고 온갖 푸른 보라색 그라데이션이 난무하는 디자인에 질리셨을 겁니다.00:00

어디에 있는 것들이 있는지. 그리고 걱정 마세요. 제가 엄청난 시간을 절약해 드릴 테니까요. 지난 아홉 달 동안 분위기를 느끼면서 코딩하고, 정말 많은 시간을 보냈거든요.00:08

제 디자인을 완벽한 픽셀 코드로 변환하려고 노력했는데, 드디어 디자이너의 관점에서 제가 배운 모든 것을 공유할 준비가 됐어요. 혹시 저를 모르시는 분들을 위해 말씀드리자면, 저희 엄마는 이걸로 부르시는데, 여러분은 저를 플로우글리라는 핀테크 스타트업의 창립 디자이너인 배트맨이라고 불러주셔도 돼요.00:17

이걸 실제로 직업으로 해왔어요. 프로덕션 코드 11만 5천 줄이 넘게 작성했고, 지금은 대규모 리디자인 작업 중에 있습니다.00:30

제가 사용했던 도구들, 시도해본 다양한 작업 방식, 최고의 결과를 얻기 위해 피그마 파일을 어떻게 설정했는지, 그리고 그 사이에 정말 많은 팁들을 말씀드릴게요.00:39

그리고 이 모든 것은 당연히 배트맨이기 때문에 무료로 제공됩니다. 자, 이제 피그마 메이크에 대해 이야기해 봅시다. 아마 피그마에서 멋진 디자인을 만들고, AI를 이용해서 디자인을 코드로 변환하는 가장 좋은 방법이 궁금하실 겁니다.00:46

몇 가지 다른 옵션이 있는데, 제가 가장 선호하는 방법을 공유해 드릴게요. 하지만 가장 쉽고 간단한 옵션은 피그마 디자인을 마우스 오른쪽 버튼으로 클릭한 다음, 그들의 자체 AI 코딩 도구인 피그마 메이크로 보내는 거죠.00:59

하지만 이 방법에는 몇 가지 문제점이 있어요. 간단한 프로토타입이나 인터랙티브 게임, 그리고 빠르게 배포할 수 있는 간단한 웹사이트를 만들 때 정말 좋죠. 요소들을 클릭해서 바로 수정할 수도 있는데, 그게 정말 좋거든요.01:11

하지만, 기존 컴포넌트를 더 큰 규모의 프로덕션 코드 베이스에서 커스터마이즈하고 싶다면, 간단한 방법은 없어요. GitHub 연동 기능은 있지만, 새로운 저장소에만 한 방향으로 연결되는 방식이라서요.01:23

저는 아직 피그마 메이크를 사용하고 있는데, 주로 아이디어를 테스트하는 용도로 쓰고, 실제 제품 코드를 만드는 용도로는 잘 안 써요. 피그마 메이크로 뭘 만들 수 있는지 궁금하다면, 갤러리 페이지를 확인해 보세요. 엄청나게 멋진 예시들이 많이 있거든요.01:36

러버블에 대해 이야기해볼게요. 굉장히 인기 있는 바이브 코딩 도구 중 하나인데, 영상 제작 시점 기준으로 러버블에 피그마를 네이티브로 연결할 수 없어요. 그래서 디자인의 완벽한 픽셀 구현을 얻을 수 없죠. 물론 디자인 스크린샷을 업로드할 수는 있지만, 다들 그게 어떻게 돌아가는지 알고 있을 거예요.01:50

저한테는 좀 결정적인 단점이 되더라고요. 그리고 Lovable도, 시작했을 때만 해도, 그런 보라색이랑 파란색 그라데이션 조명 같은 것들을 만들어내는 걸로 유명했고요. 뭐, 디자인 얘기는 이쯤해서. 우리는 디자이너잖아요. 그럼 Figma에 연결할 수 있는 vibe 코딩 툴들은 뭐가 있을까요?02:04

VZero를 사용하면 피그마에 연결할 수 있습니다. 선택한 항목에서 링크를 복사하면 VZero가 정확한 색상 변수, 폰트, 이미지를 읽어줍니다.02:20

오토 레이아웃을 사용하시면 더욱 좋은 결과가 나올 거예요. 볼트라는 또 다른 바이브 코딩 도구도 레플릿에서 이와 같은 기능을 지원합니다.02:29

디자인을 코드로 실험해보고 싶다면 꼭 사용해봐야 할 도구들이에요. 하지만 저처럼 디자인을 프로덕션 코드 수준으로 만들고 싶다면, 완전히 다른 기술 스택을 사용해야 하는데, 그래서 커서에 대해 이야기하게 됐어요.02:36

그래서 제가 가장 많이 사용하고 있는 툴인 커서에 대해 이야기해 볼게요. 커서는 AI 기반의 코드 에디터인데, GitHub 저장소에 직접 연결되어서 기존 코드 구성 요소, 로직, 그리고 기능에 모두 접근할 수 있게 해 줘요.02:52

이전에 코딩 경험이 없다면 확실히 더 복잡할 수 있지만, 원래 소프트웨어 엔지니어들을 위해 만들어졌기 때문에 훨씬 강력합니다. 특히 새로운 비주얼 에디터를 출시하면서 디자인 요소가 플랫폼에 서서히 반영되고 있는데, 이 에디터는 코드를 시각적으로 수정할 수 있도록 해줍니다.03:06

이 익숙한 디자인 패널입니다. 아니면 요소를 선택하여 AI가 그 변경 사항을 적용하도록 할 수도 있습니다.03:21

그리고 가장 좋은 점은, Figma의 MCP 서버를 이용해서 실제로 Figma를 Cursor에 연결할 수 있다는 거예요. 연결하면 Figma 디자인에서 링크를 복사해서 Cursor에 붙여넣을 수 있어요.03:28

그러면 색상, 글꼴 간격, 자동 레이아웃 등 다양한 정확한 디자인 세부 사항을 추출할 수 있습니다. 정말 굉장해요. 제대로 프롬프트하면 아주 잘 작동합니다.03:38

하지만 피그마 MCP를 커서에 연결한다고 모든 문제가 해결될 거라고 생각하면, 실망하시게 될 겁니다. 정말 힘들 거예요.03:47

봐, 제가 사용하는 기술 스택에서 가장 중요한 부분은 코드 구성 요소와 피그마 디자인 구성 요소 간의 일관성을 맞추는 거예요. 플로우글래드에서 제가 처음으로 했던 일 중 하나는 저희 전체 컴포넌트를 마이그레이션하는 것이었습니다.03:58

이 액션에서 섀드 씨엔(shad cn) 컴포넌트가 이미 구축된 피그마 파일을 활용하여 라이브러리에 적용함으로써, 제 디자인의 고품질 구현을 위한 기반을 다졌습니다.04:08

디자인 파일에 코드 베이스에 있는 동일한 색상 변수와 전역 CSS가 적용되어 있고, 이 디자인 파일은 코드 베이스에 이미 존재하는 동일한 핵심 컴포넌트를 사용합니다. 이 디자인 파일은 코드 베이스의 Telwind 클래치와 일치하는 Telwind CSS 변수를 사용합니다.04:19

이 모든 시간 끝에, 이 일관성이 코딩으로 디자인을 완벽하게 구현하는 데 필수적인 부분이라는 것을 깨달았습니다. 제가 사용하는 유료 피그마 파일과 무료 버전을 링크로 공유해 드릴게요.04:33

데센이라는, 정말 멋진 AI 툴에 특별히 감사의 말씀을 드립니다. 이 툴은 여러분이 사용하는 모든 코드 구성 요소를 보여주고 기존 디자인 시스템을 활용하여 다양한 프로토타입을 만들 수 있도록 도와줍니다. 다시 커서와 코드 일치 상태로 돌아가서...04:43

이 코드 일치만으로는 충분하지 않았습니다. 적절한 워크플로우와 함께 해야 했으니까요.04:57

그래서 그거에 대해서 다음번에 얘기할게요.05:02

저는 복잡하고 강력한 AI 코딩 도구 사용하는 건 정말 좋아하지만, 포트폴리오를 만들 때는 최대한 단순하게 유지하는 것도 중요하다고 생각해요. 그래서 제 포트폴리오는 프레머로 만들었답니다.05:07

프레머는 감각적인 크리에이터를 위해 디자인된 노코드 웹사이트 제작 도구입니다.05:17

프레머의 갤러리 페이지를 보면 알 수 있는데, 정말 멋진 디자인과 인터랙션으로 가득 차서 제 포트폴리오를 버리고 다시 시작하고 싶을 정도예요. 그리고 프레머의 AI 워크샵 도구를 이용해서 정말 다양한 멋진 인터랙티브 컴포넌트를 만들 수도 있고요.05:21

사이트에 바로 적용할 수 있는데, 벌써 사람들이 뭘 만들었는지 보면 진짜 엄청나요. 아래 링크 참고하세요.05:34

자, 플래시 워크플로우에 대해 이야기해 봅시다. 당연히 빠르도록 만들어졌죠. 예를 들어, 피그마에서 이미 디자인해 놓은 새로운 카드 기반 컴포넌트를 만들고 싶다고 가정해 봅시다.05:40

링크를 복사해서 붙여넣고, Figma MCP 서버를 이용해서 디자인 상세 내용을 모두 추출해서 마크다운 파일로 만들어서 커서를 위치시킬 거예요. 그리고 나서 그 마크다운 파일을 참고해서 컴포넌트를 만들도록 프롬프트할 겁니다.05:49

어느새 디자인을 완벽한 코드로 옮겨놨네요.06:02

하지만 때로는 이렇게 진행하는 방식이 날짜 선택 컴포넌트처럼 복잡한 경우에는 잘 안 돼요. 왜냐하면 중첩된 컴포넌트들이 많고, 로직도 더 복잡해서 그냥 대충 하려고 하면 버그가 생길 가능성이 높거든요.06:06

이거 한 번에 끝내자. 그러니까 배트맨 워크플로우에 대해서 아마 들어봤을 거야.06:18

자, 배트맨 워크플로우는 굉장히 전략적이고, 조사적이며, 정확해요. 종종 인공지능을 활용한 연구와 계획의 일환으로 진행되기도 하죠.06:24

디자인을 포함해야 할 때가 가장 적합한 경우가 많죠. 이 경우에는 제가 디자인한 이 캘린더 피커를 구현하는 방법에 대해 이야기해 봅시다. 시작하기 전에 무턱대고, FigmaMCP를 사용하는 것부터 생각해야 합니다.06:33

커서에게 먼저 조사를 좀 해보고, 어떤 그래프 컴포넌트 라이브러리를 사용하고 있는지, 그리고 새로운 로직을 처리할 수 있도록 코딩 베이스가 설정되어 있는지 확인해달라고 요청했어요.06:46

이건 연구 단계예요. 조사해 보니 저희가 Tremor 컴포넌트 라이브러리를 사용하고 있는데, 이미 날짜 선택기 관련해서 여러 버전이 있더라고요. 정말 좋은 소식이네요. 왜냐하면 연구 단계 다음에는 계획 단계가 바로 이어지니까요.06:54

커서에게 이 게임 계획 템플릿을 읽어보라고 요청했고, 그런 다음 새로운 게임 계획을 만들었어요. 이 마크다운 파일에도 피그마 MCP 서버를 활용하여 디자인 맥락을 추가했습니다.07:06

그리고 저는 트레머의 날짜 범위 선택 컴포넌트에 연결하기 위한 코드 예시도 추가했습니다. 이 실행 계획 문서를 더 구체적이고 자세하게 만들수록 더욱 완벽하고 버그 없는 결과물을 얻을 수 있을 겁니다.07:17

이 영상에서 얻어가는 것이 있다면, 기본적으로 디자인과 코드 베이스에서 문맥(context)을 추출해서 마크다운 파일로 만들고 활용하는 방법을 알게 되는 것입니다.07:29

그 마크다운 파일이나 이 실행 계획을 AI 구현의 정확성을 높이는 출발점으로 활용하세요.07:41

그게 진짜 비장의 카드예요. 이걸로 보통 가장 좋은 결과를 얻거든요.07:47

완벽하진 않지만 괜찮아요. 그리고 때때로 빈칸을 채우기 위해, 날짜 범위 선택 컴포넌트가 어떻게 설정되어 있는지 확인하기 위해 크롬 개발자 도구를 열기도 해요. 그런 다음 HTML 요소를 복사해서 붙여넣고, 필요하다면 그 컴포넌트 내에서 특정 부분을 수정하도록 요청할 수도 있죠.07:51

HTML 복사 붙여넣기도 이 프로세스 미세 조정 단계에서 꽤 유용했어요. 다 끝내고 나면 승인 단계인데, 커서에게 코드 변경 사항으로 풀 리퀘스트를 생성해 달라고 요청해요.08:06

그리고 저희는 CodeRabbit, Cubic과 같은 AI 코드 검토 도구도 사용하고 있어요. 제가 실수나 버그를 저지른 건 없는지 기본적인 검토를 도와주죠.08:18

이 영상에서 많은 내용을 다뤘다는 걸 알고 있습니다. 그리고 저는 디자이너를 위한 커서 튜토리얼을 만들 계획인데, 이 워크플로우를 단계별로 좀 더 자세하게 안내할 예정입니다.08:27

혹시 구독하시고 알림 설정하시면, 그 영상이 올라올 때 알림 받으실 수 있을 거예요. 일단은 다음 영상 보시는 걸 추천드려요. 하나님의 축복이 있기를 바랍니다.08:36

배트맨 나간다.08:43