클로드 코드 30분 튜토리얼: 피그마를 코드 플러그인으로 변환하기
DesignCode
구독자 314,000명
요약
이 영상은 피그마 컴포넌트를 코드로 변환하는 실제 플러그인을 클라우드 코드를 통해 업데이트하는 과정을 다룹니다. 강의에서는 다양한 AI 모델(예: 3.7, 3.5, 4.0)의 생성 결과를 비교하며 각 모델이 출력하는 코드의 차이점을 설명합니다. 또한 터미널과 클라우드 코드를 이용한 설치, 플러그인 기능 강화(코드 세션 히스토리 추가) 및 디버깅 과정이 상세하게 시연됩니다. 최종적으로 초보자도 쉽게 따라할 수 있는 개발 환경 구축과 도구 사용법에 대한 실제 사례와 팁을 전달합니다.
주요 키워드
클라우드 코드
커서
피그마 플러그인
AI 모델
코드 생성
코드 히스토리
Node.js
터미널
디버깅
UI
하이라이트
- 🔑 클라우드 코드를 활용해 피그마 컴포넌트를 코드로 변환하는 플러그인 업데이트 과정을 시연합니다.
- ⚡️ 다양한 AI 모델(3.7, 3.5, 4.0) 간의 코드 생성 출력 차이를 비교하며 각 모델의 장단점을 설명합니다.
- 🛠️ 터미널과 Node.js를 이용해 클라우드 코드 환경을 설치하고 설정하는 방법을 자세히 안내합니다.
- 💡 플러그인에 코드 세션 히스토리 기능을 추가하는 등 기능 강화와 디버깅 과정이 실제 사례와 함께 설명됩니다.
- 🚀 클라우드 코드와 커서(Cursor) 두 도구의 차이를 비교하며 초보자도 쉽게 시작할 수 있는 개발 팁을 제공합니다.
용어 설명
클라우드 코드
AI 기반 코드 자동 생성 시스템으로, 사용자가 프롬프트를 통해 코드 변경이나 기능 추가를 요청하면 해당 내용을 코드에 반영하는 도구입니다.
커서 (Cursor)
코드 편집 및 프로젝트 관리를 위한 도구로, UI 기반의 작업 환경을 제공하여 개발자가 손쉽게 코드를 수정하고 기능을 관리할 수 있게 합니다.
피그마 플러그인
피그마 디자인 툴을 확장하기 위한 프로그램으로, 디자인 컴포넌트를 코드로 변환하거나 추가 기능을 제공하는 역할을 합니다.
Node.js
서버 사이드 자바스크립트 실행 환경으로, 클라우드 코드 설치와 프로젝트 설정 시 필수적으로 사용됩니다.
API
애플리케이션 간의 통신을 가능하게 하는 인터페이스로, 코드 생성 및 업데이트 기능에서 각종 데이터의 전달 역할을 수행합니다.
튜토리얼 소개 및 개요
플러그인 업데이트와 피그마 컴포넌트를 코드로 변환하는 전체 프로세스를 소개합니다. 클라우드 코드의 활용 목적과 기본 개념을 설명합니다.
플러그인 개발의 목적과 Claude code를 사용한 Figma 플러그인 업데이트 계획을 소개합니다.
AI 모델 비교 및 코드 생성 출력
3.7, 3.5, 4.0 등 다양한 AI 모델을 이용해 생성된 코드 결과물을 비교합니다. 각 모델의 출력 차이와 장단점이 시각적으로 설명됩니다.
다양한 AI 모델을 비교할 수 있는 기능을 설명하며, 히스토리 기능을 통해 컴포넌트의 코드 변환 과정을 보여줍니다.
Claude 3.7, GPT-4.0, GPT-3.5 등 다양한 AI 모델의 코드 생성 결과를 비교하며 각각의 장단점을 설명합니다.
사용자들의 요구사항을 반영하여 Claude 3.7을 활용한 새로운 기능 개발 계획을 공유합니다.
클라우드 코드를 사용해 두 가지 새로운 기능을 추가했습니다. 하나는 간단한 모델 추가 기능이고, 다른 하나는 더 복잡한 히스토리 기능입니다.
클라우드 코드 설치 및 개발 환경 설정
Node.js 설치와 터미널을 이용한 클라우드 코드 환경 구성을 안내합니다. 기존 커서와의 차이점과 기본 설정 과정을 보여줍니다.
히스토리 기능은 코드 저장소가 필요하고, 이전 코드를 다시 실행하고 미리보기를 보여주는 등 복잡한 기능이 필요합니다.
UI 구현은 기존 설정 UI를 참고하여 비교적 쉽게 만들 수 있었지만, 기능 구현을 위해서는 구체적인 명세와 맥락이 필요했습니다.
커서는 히스토리, 커밋, 실행 취소 등 다양한 개발 편의 기능을 제공하기 때문에 터미널에서의 클라우드 코드보다 더 유용합니다.
코드 편집기 Cursor를 사용하여 프로젝트를 만들고 있으며, 현재는 코딩에 있어 최고의 AI 모델인 Claude Code를 함께 사용하고 있습니다.
초보자들을 위해 Claude 웹사이트를 추천하며, 설치 없이 프롬프트만으로도 스크린샷 업로드와 애니메이션 등 다양한 프로젝트를 만들 수 있습니다.
Claude 3.7의 가격 정책에 대해 설명하며, 이전 버전인 3.5와 동일한 가격대를 유지하고 있습니다.
Cursor를 사용할 경우 월 20달러로 빠른 응답 500회와 느린 응답 무제한 사용이 가능하다는 장점이 있습니다.
Claude Code 설치를 위해서는 Node.js 설치와 터미널 사용법에 대한 기본적인 이해가 필요합니다.
터미널에 코드를 복사하여 붙여넣고 실행하면 여러 프로세스가 진행되며, 완료 후 'Cloud' 명령어를 사용할 수 있게 됩니다.
프로젝트 디렉토리로 이동하는 방법을 설명합니다. CD 명령어를 사용하고 탭 자동완성 기능으로 편리하게 이동할 수 있습니다.
'cloud' 명령어로 시작하여 'manual'을 입력하고, 'run' 명령어로 프로젝트 실행에 필요한 환경을 검사합니다.
package.json 파일에 대한 설명과 함께 현재 진행 중인 설치 및 빌드 과정을 소개합니다.
Figma 플러그인 설정 방법을 단계별로 설명하며, 새 플러그인 생성이나 기존 플러그인 가져오기 과정을 자세히 안내합니다.
Claude 3.7 지원을 추가하기 위해 API 문서에서 정확한 모델명을 찾아 적용하는 과정을 시작합니다.
코드베이스를 읽고 UI.html을 분석하는 AI의 장점을 설명하며, 오래된 프로젝트나 새 프로젝트에서 특히 유용함을 강조합니다.
이 시스템이 일반적인 에이전트보다 더 지능적으로 작동하며, 개발자처럼 연관된 변경사항들을 자동으로 찾아 제안한다는 점을 설명합니다.
플러그인 빌드 과정에 대해 설명하고, 변경사항을 적용한 후 테스트를 진행합니다.
코드 생성 과정에서 3.7 버전에 문제가 발생하여 3.5 버전으로 되돌아가 테스트를 진행합니다.
Cursor를 사용하지 않아 코드 읽기가 어려운 상황에서 Cursor로 전환하여 코드베이스를 비교하고 변경사항을 확인하려 했지만 작동하지 않는 문제가 발생했습니다.
피그마 플러그인의 개발자 콘솔을 통해 에러 메시지를 확인하는 방법을 설명하고, 문제 해결을 위한 시도를 계속했습니다.
Claude API 사용 시 크레딧 추가가 필요할 수 있으며, 이를 통해 문제가 해결될 수 있다는 점을 설명했습니다.
새로운 기능 개발을 위해 코드 세션 히스토리 추가 작업을 시작하면서, 이것이 더 복잡한 맥락과 이해가 필요한 작업임을 설명했습니다.
AI의 코드베이스 처리 능력에 대해 설명하며, AI가 인간보다 빠르게 코드를 스캔하고 이해할 수 있다는 장점을 강조합니다.
UI 설계에 대해 논의하면서, 프리뷰가 계속 아래로 밀려나는 문제점과 이를 해결하기 위한 UI 구조에 대해 설명합니다.
플러그인 기능 강화: 코드 세션 히스토리 추가
플러그인에 코드 세션 히스토리 기능을 추가하는 과정을 상세히 설명합니다. UI 구성 및 오류 디버깅 과정과 기능 테스트가 포함됩니다.
타입스크립트 코드 생성 과정을 설명하며, 히스토리 기능 구현에 필요한 ID, 타임스탬프, 모델 정보 등의 요소들을 상세히 다룹니다.
Cursor와 Claude Code의 차이점을 비교하며, 각각의 장단점을 분석합니다. 특히 Cursor의 일괄 처리 방식과 Claude Code의 단계별 처리 방식의 차이를 설명합니다.
실제 구현 과정에서 발생한 문제점들과 이를 해결하기 위해 이전 세션으로 돌아가기로 한 결정에 대해 설명합니다.
히스토리 기능 구현 중 발생한 문제점을 설명하기 시작했습니다. 스토리지 관련 오류가 있었고, 이를 해결하기 위한 과정을 공유하려 합니다.
코드 세션 히스토리 추가 요청 시 기능은 잘 생성되었으나, 스토리지 관련 문제로 제대로 작동하지 않았던 경험을 설명합니다.
AI 코드의 특성상 매번 동일한 결과를 얻기 어렵다는 점을 설명하며, 세션 진행 시 시간이 많이 소요될 수 있음을 언급합니다.
히스토리 UI가 비어있는 문제와 코드 변환 시 업데이트되지 않는 이슈를 발견했습니다.
개발 과정에서 콘솔의 중요성을 설명하며, 히스토리 관련 문제를 해결하기 위해 콘솔을 활용한 방법을 설명합니다.
Claude Code를 사용하여 로컬 스토리지와 프리뷰 업데이트 관련 오류를 해결하는 과정을 설명합니다.
파일별 분석을 통해 이전에 발생했던 미리보기 문제를 해결했습니다. 다만 처리 시간이 다소 소요되는 것이 세션 진행의 어려움으로 작용합니다.
히스토리 기능 개선을 위해 코드 생성 시 자동 새로고침 기능을 구현했습니다. 4-5번의 프롬프트 수정을 통해 원하는 기능을 구현할 수 있었습니다.
Claude Code와 Cursor를 비교 분석했습니다. Cursor가 더 많은 기능을 제공하지만 학습 곡선이 있는 반면, Claude Code는 간단하고 직관적인 터미널 기반 인터페이스를 제공합니다.
코딩 학습에서 가장 어려운 점은 시작 단계입니다. 어떤 도구를 사용할지, 환경 설정은 어떻게 할지 등의 초기 진입장벽이 있습니다.
마무리 및 추천
클라우드 코드와 커서의 장단점을 비교하며 사용 추천 포인트를 정리합니다. 초보자도 쉽게 접근할 수 있는 개발 팁과 경험담을 공유합니다.
초보자들을 위해 Claude.ai를 추천하며, 실제로 SVG 패턴 생성기 프로젝트를 통해 2,000달러의 수익을 창출한 경험을 공유했습니다.
오늘 여러분께 정말 멋진 것을 보여드리려고 합니다.
우리는 Claude code를 사용하여
실제 Figma 플러그인을 업데이트할 예정입니다.
제가 이미 경험해봤기 때문에
어떻게 진행되는지
더 잘 이해하고 있습니다.
보통은 Cursor를 사용하지만,
이번에는 그것 없이 진행하겠습니다.
이것이 그 결과물인데요,
제가 혼자 개발 중인 실제 Figma 플러그인입니다.
이 플러그인은 기본적으로
모든 Figma 컴포넌트를 코드로 변환할 수 있게 해줍니다.
여기서 흥미로운 점은
서로 다른 AI 모델들을
비교할 수 있다는 것입니다.
예를 들어,
히스토리로 가보면
이 컴포넌트를 볼 수 있는데요,
자세히 보시면
이렇게 생겼고, 이것을 코드로 변환하고 싶습니다.
다양한 언어로
변환할 수 있는데요,
예를 들어 HTML과 Tailwind,
또는 React, Vue, Svelte 등
여러 프레임워크를 지원합니다.
프리뷰 기능이 작동하는 것은
우리가 관심 있는 부분인데요,
코드도 있고
프리뷰도 있어서
다른 모델들을 비교할 수 있습니다.
이것은 Claude 3.7로 생성된 것인데요,
보시다시피 모든 것이 적응형이고
거의 완벽하다고 할 수 있습니다.
사실상 완벽하다고 말씀드리고 싶은데
그 이유는, 유일한 문제는 이미지뿐이고
당연히 이미지는
코드로 변환될 수 없습니다.
이건 일반적인 문제입니다.
자, 이제 다른 모델과 비교해보겠습니다.
예를 들어 여기
세부사항이 있고
3.5를 보시면 차이가 확 드러나는데요,
이게 3.5버전이고, 더 안 좋아질 겁니다.
보여드리겠습니다.
4.0을
이게 4.0인데요, 색상도 정확하지 않고
아웃라인도 없고
보시다시피
이미지 중앙 정렬도
완전히 잘못되었습니다.
차이가 보이시죠?
다른 것도 한번 시도해보겠습니다.
이것을 보여드리면서 다시
GPT 4.0부터 시작해보겠습니다.
보시면 이미지의 크기와
아웃라인이 보이지 않네요.
이제 3.5를
볼까요? 여기는 조금 더 낫습니다.
아이콘을 사용했고, 80%가 파란색으로 표시되었으며
모양도 더 좋아졌습니다.
아웃라인이 완벽하진 않지만
아웃라인은 있죠.
4.0에서는 아예 없었던 것과 달리
이제
3.7을 보시면
거의 완벽합니다. 19가 정확하지 않지만
보시다시피
이전보다 확실히 더 좋습니다.
이것이 바로 흥미로운 점이죠.
오늘 우리가 만들 것이 바로 이런 기능들입니다.
많은 분들이 저에게 물어보시는데요,
3.7을 어떻게 사용하는지
Cloud 3.7을 말이죠.
아직 플러그인을 업데이트하지 않아서
오늘 아침에 올렸고
업데이트를 시도해봤는데요,
왜 이렇게 하지 않을까 생각했습니다.
클라우드 코드를 사용해 보도록 하겠습니다.
보통은 커서를 사용하는데
두 가지 기능을 추가했습니다. 하나는
가장 간단한 기능으로
새로운 모델을 추가하는 것입니다.
코드 몇 줄만으로 매우 쉽게 구현했죠.
그리고 다른 하나는 좀 더 어려웠던 기능인데
여러 번의 프롬프트가 필요했지만
성공적으로 구현했고
사실 기술적으로는
구현 방법을 잘 몰랐지만 로직은 알고 있었습니다.
예를 들어 히스토리 기능을 원했는데
지금 보이는 이 기능은 아직 라이브가 아니고
방금 클라우드 코드로 만든
새로운 기능입니다. 이게 복잡한 이유는
일종의 저장소가 필요하기 때문입니다.
스토리지가 있어야 하죠.
생성된 코드의 히스토리를
저장해야 하니까요.
이건 쉽지 않은 작업입니다.
클릭했을 때 이전에 생성된
모든 코드를 다시 실행하고
미리보기도 보여줘야 합니다.
게다가 여러 가지 기능들이 있는데
예를 들면
삭제하고 전체 히스토리를 지우고
스크롤하는 등의 기능이 필요합니다.
UI는 보통 꽤 간단한데
기존 UI가 있다면 더욱 쉽습니다.
예를 들어 설정 UI가 있으니
히스토리도 같은 스타일로 만들 수 있죠.
히스토리에도 동일한 UI를 적용할 수 있습니다.
물론 이렇게 말할 수도 있죠.
이것과 같은 UI를 원한다거나
프롬프트처럼 만들어달라고요. 맥락이 있으면
UI는 꽤 쉽게 만들 수 있습니다.
하지만 기능 자체는 좀 다릅니다.
구체적으로 명시해야 하고
필요한 것을 정확히 알려주고
맥락을 제공하고
이전 작업과 비교할 수 있게 해야 합니다.
한번 시도해 보죠.
보통은 커서를 열고 프로젝트를 엽니다.
지금까지 변경한 내용이 있는데
처음부터 다시 해보겠습니다.
걱정 마세요, 저장해 뒀으니
나중에 돌아올 수 있습니다.
변경사항 이전으로 돌아가보죠.
커서를 사용하는 이유는
커서가 제공하는
기능이 더 많기 때문입니다.
터미널에서 클라우드 코드를 사용하면
AI 코딩 기능은 잘 동작하지만
코드 변경도 가능하긴 하지만
문제는 많은 기능들이 빠져있다는 거죠.
히스토리나 커밋 같은
많은 기능이 없습니다.
예를 들어 히스토리, 커밋
실행 취소나 변경사항 검토 같은 것들이요.
개발을 훨씬 편하게 만드는
이런 작은 기능들이
개발 생활을 정말 편하게 만드는데
많이 부족합니다. 그래서
실행 취소 같은 기능을
여기서 구현하고 있는 거죠.
이제 처음부터 시작해보겠습니다.
변경사항 이전으로 돌아가서요.
보시다시피 Claude 3.7도 없고
히스토리 기능도 없습니다.
이건 변경사항 이전 버전이에요.
이제 새로운
터미널을 열고
시작해보도록 하겠습니다.
맥락을 설명하자면, 지금 우리는
코드 에디터인 커서를 사용하고 있습니다.
제가 지금까지 보여드린 것처럼
보통 이렇게 코드를 편집하고
프로젝트를 만드는데, 우리는 Claude도 사용하고 있습니다
Claude는 AI 모델인데, 제 경험상
코딩에 있어서 단연 최고입니다
특히 우리는 새로운 Claude Code를 사용하고 있죠
만약 이런 것들이 처음이시라면
정말 강력히 추천드리는데
Claude 웹사이트에 가보시라는 겁니다
거기서 프롬프트만으로
무엇이든 만들 수 있습니다
아무것도 설치할 필요가 없죠
예를 들어, 저는
이것을 만들 수 있었는데
여기 이거요. 미리보기가
작동하지 않는 것 같지만
여기 있네요. 몇 개의
프롬프트만으로 스크린샷을
업로드하고 약간의
애니메이션도 만들 수 있었어요. 꽤 멋지죠
네, 이런 것들이 가능하고
이것이 오늘 우리가 흥분되는 이유입니다
초보자든 전문가든 상관없이
이런 도구들을 사용할 줄 아는지 여부와 관계없이
누구나 웹사이트에 접속해서
이런 프로젝트들을 만들 수 있습니다
예를 들어, 저는
X에 직접 포스팅할 수 있는
UI를 만들고 싶었는데
실험 목적으로 괜찮을 것 같았죠
하지만 오늘 우리가 하는 것은
실제 프로젝트이고
앞서 말씀드린 대로 Claude Code를 사용할 겁니다
하지만 먼저
가격에 대해 이야기해 봅시다
일부 사람들이 Claude 3.7이
약간 비싸다고 불평하는데
제 경험상 첫째로
이전과 같은 가격이고
가격 정책을 보시면
이전과 동일한 가격임을 알 수 있습니다
3.7은
제가 이전에 사용하던 3.5와
동일한 가격입니다
두 번째로, Cursor를 사용한다면
가격은 크게 중요하지 않습니다
Cursor는 한 달에 20달러의
구독료로 사용량에 따라 다르지만
빠른 응답은 500회
느린 응답은 무제한으로 사용할 수 있습니다
01 mini나
01을 사용하지 않는 한 문제없습니다
하지만 Claude의 경우는 상관없죠
가격이 걱정되신다면
Cursor를 사용하시면 됩니다
하나의 가격으로
모든 것이 포함되어 있고
무제한으로 사용할 수 있습니다
물론 느린 응답의 경우죠
하지만 빠른 응답 500회는
대부분의 사용자에게 충분합니다
이제 가격 얘기는 접어두고
Claude Code를 설치해야 하는데
방법을 알고 싶다면
문서를 통해 확인하실 수 있습니다
여기에 설명이 나와있고
Node에 대해 조금 알아야 합니다
먼저 Node를 설치해야 하는데
Node.js 웹사이트에 가서
여러분의 플랫폼에 맞는 버전을
다운로드하셔야 하고
터미널이 무엇인지도
알아야 합니다
이 모든 것을 준비하신 후에
이런 모양의 터미널을 열고
작업을 시작하시면 됩니다
이 코드를 복사해서
터미널에 붙여넣고
실행하시면 됩니다.
그러면 여러 프로세스가 실행되고
모든 과정이 완료되면
'Cloud' 명령어를 사용할 수 있게 됩니다.
이 명령어를 실행할 수 있게 되면
프로젝트로 이동하세요.
제 경우에는 재미있게도
프로젝트 이름을 'Figma Plugin Dream Code'라고 지었습니다.
제가 있는 프로젝트 디렉토리에서
디렉토리 이동에 대해
알아야 할 것은 CD 명령어와
디렉토리 이름을 입력하는 것입니다.
제 경우에는 Projects 폴더 안에
dream code가 있고,
탭키를 누르면 자동완성이 됩니다.
시스템이 필터링해서
'dream'으로 시작하는 것들을 보여줍니다.
모든 것을 올바르게 입력하면
디렉토리로 들어가게 되고
이제 'cloud' 명령어를 입력하면
시작할 수 있습니다.
'manual'을 입력하고
엔터를 누르면 됩니다.
이 시점에서 프로젝트 실행이 필요하다면
'run' 명령어를 입력하면
코드를 분석해서
서버 시작이나
로컬 환경 설정 등이 필요한지 확인합니다.
package.json 파일을 검사할 텐데,
코딩을 처음 하시는 분들을 위해 설명하자면
이 파일은
웹사이트의 모든 설정과
필요한 라이브러리들이
설치되어야 하는 정보가
들어있는 파일입니다.
지금 이걸 실행 중인데,
약간 느립니다.
Cursor가 제 경험상
더 빠른 것 같네요.
보시다시피 39초가 걸렸고
계속 진행 상황을 설명해드리겠습니다.
지금까지는
코드베이스를 읽고
npm install과 빌드 등을 실행했습니다.
이제 첫 번째로
아주 간단한 작업을 해볼 건데요.
여기 Figma 플러그인이 있습니다.
Figma 플러그인 경험에 대해
설명해드리자면, 보통 Figma 로고를 클릭하고
plugins로 가서
Development를 선택한 다음
Manage를 클릭합니다.
플러그인이 없다면
New Plugin을 선택하고
이미 있다면
Import Plugin from Manifest를
선택해서 매니페스트 파일을
선택하면 됩니다. 아니면
새 플러그인을 만들어서
템플릿을 생성할 수도 있죠.
지금까지 제가 한 것이 이거고
플러그인이 있고 매니페스트를 추가했다면
이렇게 보일 겁니다.
그리고 나서
Finder에서 확인해보면
플러그인이
맞게 설정되어 있는지 볼 수 있죠.
Dream Code라고 되어있고, 실행하면
현재 버전이 실행됩니다.
이건 단순히 해당 디렉토리의
코드이고, 여기가 현재 위치입니다.
이제 할 작업을 설명해드리겠습니다.
우리는 이제 Claude 3.7 지원을 추가할 것입니다.
이때 API의 정확한 이름을 아는 것이 도움이 됩니다.
여기서 API 문서로 이동하여
모델 섹션으로 가보겠습니다.
여기 모델의 이름이 있네요.
이 모델명을 복사하겠습니다.
더 짧은 버전이 있을 수도 있지만
일단
시간을 절약하기 위해
이 버전을 사용하겠습니다.
이게 현재 작동하는 버전이니까요.
Cloud 모델에 이것을 붙여넣고
엔터를 누르겠습니다.
이제 Cursor에서와 같은 경험을 하게 될 겁니다.
컴포저와 에이전트로
코드베이스를 읽고
ui.html로 이동해야 한다는 것을 알고 있죠.
이게 정말 멋진 점은
새로운 프로젝트에 참여하거나
6개월 또는 1년 전에 작업했던 프로젝트를
다시 보게 될 때
어떻게 작동하는지
파일이 어디 있는지 기억나지 않을 때
UI가 매우 유용하다는 겁니다.
이제 변경사항을 확인하고
변경할 것인지 물어보고 있습니다.
이것은 기본적으로
Claude의 리뷰와 비슷합니다.
이제 승인하고
변경사항을 적용하겠습니다.
속도는 꽤 비슷한 것 같네요.
흥미로운 점은 이것이
확실히 에이전트에 가깝다는 것입니다.
일반적인 에이전트라면
한 번의 변경을 하고 다음 프롬프트를 기다리고
또 변경하고 기다리는 식이지만
이 경우에는
코드베이스를 읽고
다른 필요한 변경사항도 알려줍니다.
예를 들어 3.5라고 된 텍스트도
3.7로 업데이트해야 한다고 알려주죠.
마치 실제 개발자처럼 행동하는 거예요.
단순히 한 프롬프트에서 멈추지 않고
일반적인 개발자라면 할 법한
미래의 변경사항도 찾아내고
관련된 모든 부분을 확인합니다.
텍스트도 변경하고
모든 게 잘 진행되고 있네요.
변경사항을 적용하고
빌드 실행도 추천하고 있습니다.
이는 플러그인을 배포하려면
필요한 작업이지만
Figma 플러그인에서 변경사항을 보여주는 데는
꼭 필요하지 않습니다.
그래서 아니요를 선택하겠습니다.
모든 게 잘 되었다면
이제 여기에 3.7이 보일 겁니다.
짜잔! 잘 작동하네요.
정말 간단하죠? 이제
요소를 선택하고 코드를 생성할 수 있습니다.
플러그인이 이렇게 작동하고
코드를 생성할 겁니다.
아직 히스토리 기능은 없지만
곧 추가할 예정입니다.
지금은 코드를 생성 중이고
시간이 좀 걸리네요.
작동하지 않는 것 같아서
3.5로 다시 시도해보겠습니다.
확인을 위해서요.
코드를 검토해보니
모델명이 잘못된 것 같습니다.
한번 확인해보겠습니다.
정확히 무엇이 잘못됐는지 살펴보죠.
음...
알겠습니다. 3.5 버전은 잘 작동하네요.
이제 확인해보겠습니다.
여기서부터가 좀 까다로워지는데,
Cursor를 사용하지 않으면
코드로 돌아가서
코드를 읽을 수가 없죠.
그래서 Cursor로 가보겠습니다.
Cursor에서는 변경사항이 적용되고 있고
이제 비교가 가능해질 겁니다.
그런데...
37이 왜 작동하지 않는지 모르겠네요.
작동해야 하는데... 이름도 맞고 다 맞는데...
네, 앞뒤로 전환할 수 있지만
여기서는 코드베이스를 볼 수 있고
코드 파일이 바로 여기 있습니다.
비교도 할 수 있고 변경된 사항도 볼 수 있죠.
무엇이 변경되었는지
수정사항들을 모두 확인할 수 있습니다.
자, 다시 한번 시도해보겠습니다.
아마 뭔가 문제가 있었나 봅니다.
원래는 작동해야 하는데
작동하지 않는다면
이렇게 오래 기다리지 않았을 텐데요.
왜 그런지 모르겠지만...
피그마 플러그인에서는
플러그인으로 가서 개발 메뉴에서
콘솔 보기/숨기기로 갈 수 있습니다.
문제가 생기면 여기서
에러 메시지와
그런 것들을 볼 수 있죠.
이번 경우에는
왜 그런지 모르겠네요.
작동하지 않는데...
음... 아마도
빌드와 관련이 있을 수도 있겠네요.
이전에는 잘 작동했으니 계속 진행하겠습니다.
좋습니다, 작동하게 만들었네요.
정확히 왜 그랬는지는 모르겠지만
도움이 될 만한 것은 결제로 가서
크레딧을 추가해야 할 수도 있습니다.
크레딧을 추가해야 하고
Claude API를 사용하고 있다면
특히 앱을 만들 때는
API를 사용할 때
크레딧을 추가해야 합니다.
이 경우에는 이게 문제를 해결할 수 있고
가끔 좀 까다로울 수 있지만
이번에는 이전 코드와
비교할 수 있었고, 이전 코드에서
보시다시피
완전히 동일한 코드네요.
네, 그냥 저절로 해결됐네요.
코딩하다 보면 이런 일이 있죠.
프로그래밍의 본질이라고 할 수 있죠.
완벽한 건 없지만, 작동하게 만들었습니다.
이제 더 복잡한
작업으로 넘어가보죠.
이번에는 터미널로 다시 가볼게요.
여기서는 빌드를 실행할 필요가 없고
이렇게 말해볼게요.
'좋아요, 이게 새로운 거예요.'
이렇게...
새로운 것인데, 이렇게 물어볼게요.
'코드 세션의 히스토리를 추가해주세요.'
생성된 코드 세션을 위해서요.
이걸 해볼 건데, 확실히 더 복잡합니다.
많은 맥락이 필요하거든요.
어떤 코드인지 알아야 하고
무슨 맥락인지 이해해야 하죠.
어떤 코드 세션이고, 어떤 히스토리며
어떤 UI를 원하는지 등
이 모든 것들이 필요해요.
만약 이걸 사람한테 말하면
'무슨 말씀이세요?'
라고 할 거예요. 많은 맥락이 필요하니까요.
맥락을 이해하는 데에는 많은 것이 필요하지만
AI의 마법은 코드베이스를 이해한다는 거죠
코드베이스를 읽고 이해하며
그것을 빠르게 스캔할 수 있어서
정말 엄청나게 빠른 속도로 처리합니다
이런 면에서는 확실히 인간의 능력을 뛰어넘죠
물론 40초 정도 걸리긴 하지만
인간이라면 이것보다 훨씬 더 오래 걸릴 거예요
그래서 이건 좀 위안이 되는 부분이에요
어떤 것은 인간이 더 잘하고
어떤 것은 AI가 더 잘한다는 사실이
그래서 이런 면에서 각자의 장점이 있죠
기다리는 동안에
우리가 원하는 UI를 한번 살펴보겠습니다
이 UI를 사용하려는 이유는
이 UI를 사용하면 프리뷰가
계속 아래로 밀려내려가기 때문이에요
그러면 계속 위아래로 스크롤해야 하니까
확실히 좋지 않죠
보여드리면
제 경험상 이 UI가 먼저 나올 텐데
이게 정말 긴 시간이 걸리네요
정말 오래 걸리고 있어요
드디어 뭔가 진전이 있는 것 같네요
이제
그리고
우리가 원하는 UI 형태를
이런 식으로 만들고 싶다고 알려줘야 해요
음
우선 타입스크립트를 생성하고 있는데
이제
코딩을 잘 아시는 분들은
코딩 실력이 늘수록
이 코드가 무엇인지 파악하는 데
더 능숙해지실 거예요
빠르게 코드를 이해할 수 있게 되죠
이건 타입스크립트 관련 코드인데
타입 안정성을 보장하기 위한 것이에요
히스토리를 만들기 위해서는
ID와 타임스탬프, 사용된 모델 등이 필요하고
히스토리 생성을 위해
ID, 타임스탬프, 사용된 모델 종류 등이 필요해요
그리고 보니까
솔직히 이전 세션과 비교해보면 일관성이 있어요
제가 이전에 해봤을 때
클라이언트 스토리지를 사용하는 것 같아서
승인하도록 하겠습니다
네, 계속 진행하면서
계속 진행될 텐데요
여러 가지 변경사항이 필요해서
제가 흥미롭게 발견한 점은
Cursor와는 다르게 작동한다는 거예요
Cursor는 한 번에 모든 것을 처리하는데
여기서는 하나씩 진행해야 해요
이것을 변경할지, 저것을 변경할지
하나하나 물어보면서요
이런 면에서는
Cursor가 확실히 더 유리하죠
하지만 터미널도 나름대로 장점이 있어요
매우 유연하고 어떤 플랫폼에서도 사용할 수 있죠
수십 년 동안 존재해왔어요
Cursor보다 훨씬 더 오래됐죠
Cursor는 1년 정도밖에 안됐고
아마 2년 정도 됐을까요
아마도요
결국 모든 변경사항을 만들긴 했지만
계획대로 정확히 진행되지는 않았다고 인정해야겠어요
약간의 변경사항이 있었고
몇 가지 오류도 발생했어요
그래서 되돌아가서 다시 시도하는 대신
영상이 너무 길어지는 것을 피하기 위해
그리고 시간을 더 들이지 않기 위해
이 영상이 너무 길어지지 않도록
이전 세션으로 돌아가보겠습니다
제가 겪은 경험을 살펴보면서
설명해드리도록 하겠습니다
이것이 어떻게 진행되었는지 설명해드리겠습니다
히스토리를 생성하는 방식이
다르게 되었고
약간의 오류가 있었는데
설명하기가 좀 어려웠습니다
그래서 우리는 다시
최종
결과로 돌아가서
정확히 무슨 일이 있었는지 설명하겠습니다
분명히 우리는 히스토리 기능이 있고
제가 했던 것과 같은 프롬프트가 있습니다
'코드 세션 히스토리를 추가할 수 있나요?'라고 했고
모든 것을 생성했습니다
정말 잘 작동했지만, 제 경험상
스토리지라는 것을 사용했는데
당시에는 작동하지 않았습니다
그래서 어느 시점에 제가
콘솔이 스캔하기가 더 어렵다고
생각했던 것 같습니다
어떤 프롬프트를 요청했는지 보면
다음 프롬프트로 넘어가겠습니다
변경사항의 마지막 부분에서
변경된 내용을 보면
이것이 바로 그 세션입니다
이전에는 잘 작동했던
세션이어야 했는데
네, AI 코드의 특성상
매번 정확히 같은 결과를
보여주지는 않습니다
그래서 모든 것이
잘 진행되는 세션을 갖기가 어렵죠
그리고 만약 이 모든 과정을 거쳐야 한다면
때로는 한 시간이 걸릴 수 있고
약간 지루할 수 있습니다
하지만 이번에는
다음 단계로 넘어가보죠
마지막 세션에서는 잘 작동했습니다
그 세션에서는 히스토리라고 표시된 UI가 있었고
이런 카드들이 보였습니다
하지만 제가 경험했을 때는 비어있었고
코드를 변환할 때마다 업데이트되지 않았다는 것을
나중에 알게 되었습니다
그것이 이유일 수 있겠네요
어쨌든 저는 물었습니다
히스토리가 비어있다고요
그리고 결국에는
이전에 언급했던 것처럼 콘솔로 갔습니다
개발할 때 콘솔이
정말 유용하거든요
AI에 컨텍스트를 제공하기 위해
콘솔로 가서
무언가를 탭하거나 클릭할 때
코드를 생성하면
콘솔에서 히스토리와
관련된 것을
찾을 수 있을 것입니다
이번 경우에는
히스토리 키워드가 있는
무언가를 찾을 수 있었고
코드 변환을 탭했을 때
이 오류를 모두 복사해서
Claude Code에 붙여넣었더니
수정할 수 있었습니다
여기서 보시면 콘솔 오류에
로컬 스토리지와 프리뷰 업데이트에
두 가지 주요 문제가 있었는데
나중에 수정했습니다
프리뷰 업데이트를 제거했는데
코드를 생성할 때마다 업데이트되고
프리뷰를 보여주는 데 유용했죠
빈 프리뷰 문제도
해결할 수 있었습니다
여기서 그걸 해결했고, 파일별로 살펴보면
물론 시간이 좀 걸리죠
시간이 좀 걸리는 게
이런 세션을 진행하기 어려운 이유이기도 해요
자, 다음으로 넘어가 보겠습니다
제가 새로고침할 때마다
히스토리를 새로고침해야 하는 것 같은데
새로운 코드를 생성할 때
코드를 생성할 때
히스토리가 자동으로 새로고침되게 할 수 있나요?
이게 제가 원하던 거였고, 결국 성공했습니다
이제 끝났네요. 지금까지
4번이나 5번 정도의 프롬프트를 사용했나요
네, 이렇게 Claude Code 사용법과
Cursor와의 차이점을 살펴봤는데요
장점이 많지는 않다고 솔직히 말씀드리겠습니다
저는 Cursor를 더 많이 사용할 것 같아요
하지만 Cursor는
UI를 배워야 하고 코드 관리 방법도 알아야 하죠
UI도 배워야 하고
이런 것들을 모두 알아야 합니다
코드 관리 방법이라든가
이런 것들 말이죠. 반면 이건
더 간단해요. 터미널로 가서
바로 채팅 세션을 시작할 수 있고
디렉토리로 가서
그게 전부예요. 하지만
둘은 다른 도구이고, 제가 항상 말하듯이
코드를 배울 때 가장 어려운 부분은
어떻게 시작해야 할지 아는 것이에요
어떤 소프트웨어를 설치하고
어떤 코드 에디터를 쓰고 UI가 어디 있는지
그래서 제가 Cursor 관련 강좌를 만들었죠
Xcode와 React 둘 다에 대해서요
처음부터 시작하는 방법을
배우고 싶으시다면
제 강좌를 확인해보세요
그리고 이게 Claude Code입니다
정말 흥미로운 점은
이런 것들을 할 수 있다는 거예요
그리고 희망컨대
여러분에게 도움이 될 거예요
최소한 Cursor와
Claude Code의 차이점을 알게 되었고
이제 자신만의 프로젝트를 만들 수 있을 거예요
그리고 완전 초보자라면
제가 말씀드렸듯이
Claude.ai로 가서
처음부터 뭔가를 만들어보세요
이게 시작하기 가장 쉬운 방법이에요
사실 저도 이렇게 시작했고
SVG 패턴 생성기도 이렇게 만들었어요
많은 분들이 정말 좋아하시더라고요
트위터에서도 많은 분들이
이야기하시고 즐겨주셨어요
실제로 꽤 많은 결제가 있었고
수익도 좀 냈어요
한 2,000달러 정도 벌었는데
AI로 만든 간단한 프로젝트치고는
꽤 괜찮은 결과라고 생각해요
꼭 한번 시도해보시기를 추천드리고
여러분이 사용하고 싶은 제품을 만들고
자신의 문제를 해결하는 제품을 만들어보세요
네, 시청해주셔서 감사합니다
이런 형식이 마음에 드셨길 바라고
궁금하신 점이나 피드백이 있으시다면 댓글 남겨주세요
다음 영상에서 뵙겠습니다
감사합니다