Claude Code와 Figma MCP로 아이디어 구현하기

채널 아이콘
Dive Club 🤿 구독자 44,900명

요약

이 영상에서 Tailwind의 Dan Hollik은 Claude Code를 VS Code에서 직접 실행해 코드베이스를 탐색하고 수정하는 방법을 소개합니다. 프롬프트 엔지니어링 전략부터 저장·수락 플로우, 콘솔 로그 기반 디버깅 팁을 공유하며 실전 예제를 통해 AI 에이전트를 활용한 개발 워크플로우를 자세히 보여줍니다. 또한 Figma MCP 서버를 연동해 디자인 레이어를 Tailwind 코드로 자동 변환하는 과정을 시연하며, AI 도구를 통해 개발 효율성과 스타일 일관성을 높이는 모범 사례를 제시합니다.

주요 키워드

Claude Code AI agent context window VS Code integration prompt engineering Figma MCP server Auto Layout debugging Genway AI Raycast

하이라이트

  • 🔑 VS Code 통합: Claude Code를 터미널 대신 VS Code 탭으로 실행해 디렉터리 내 파일을 자유롭게 탐색하고 수정할 수 있다.
  • ⚡️ 대규모 컨텍스트 윈도우: 전체 코드베이스를 읽어 코드 스타일을 학습하지만, 비용이 빠르게 소모되므로 주의가 필요하다.
  • 🌟 실시간 디버깅: 콘솔 로그 삽입 및 세부 질문으로 AI에게 조건을 검증하게 해 문제를 빠르게 찾아낸다.
  • 📌 Figma MCP 연동: 로컬 MCP 서버를 켜면 AI가 선택된 Figma 오토 레이아웃 트리를 읽어 Tailwind 스타일로 변환해 준다.
  • 🚀 프롬프트 전략: 기능 요구 사항을 상세히 작성하면 AI가 자동으로 작업을 분해해 모듈 설치·UI 구성·폼 구현까지 처리한다.
  • 🔧 파일 변경 흐름: Claude는 변경 사항을 미리 보여주지 않고 바로 저장하므로 ‘Yes’ 확인 후 결과물을 검토해야 한다.
  • 🧹 코드 정리 필수: 레이어 이름과 오토 레이아웃을 깔끔히 정리해야 AI가 구조를 올바르게 인식해 코드 품질이 올라간다.
  • 📈 오픈소스 레포 활용: AI에게 참조 레포 링크를 제공해 선호하는 구조나 스타일 가이드를 학습시킨 뒤 커스텀 코드를 생성할 수 있다.

용어 설명

Claude Code

터미널 또는 IDE에서 실행되는 AI 기반 코드 에이전트로, 디렉터리 탐색·파일 읽기·수정 작업을 자동화한다.

AI agent

주어진 디렉터리 공간에서 대화형으로 작업을 수행하고 파일을 탐색하며 코드를 생성하는 인공지능 소프트웨어

context window(컨텍스트 윈도우)

AI가 한 번에 참조할 수 있는 텍스트 분량. 크면 클수록 더 많은 코드 스타일을 학습하지만 비용이 늘어난다.

Figma MCP server

Figma에서 제공하는 로컬 서버로, AI가 선택된 디자인 레이어의 구조·속성 정보를 코드로 변환하도록 연결해 준다.

Auto Layout(오토 레이아웃)

Figma에서 레이어 간 간격·정렬을 자동으로 제어하는 기능. 명확히 구조화하면 AI가 디자인을 코드로 변환하기 수월하다.

prompt engineering

AI에게 원하는 기능과 조건을 구체적으로 지시하는 프롬프트 작성 기법. 작업 분해·스타일 가이드 등을 명시해 효율을 높인다.

ICP(Ideal Customer Profile)

Genway AI 같은 도구에서 사용하는 이상적 고객 속성 프로필. 대상 그룹을 설정해 설문 인터뷰 대상을 정할 때 활용된다.

[00:00:00] 인트로 및 Claude Code 소개

호스트가 Dan Hollik(Tailwind)과 함께 Claude Code를 VS Code와 터미널에서 실행·활용하는 방법을 소개한다. 프롬프트 전략·디버깅·Figma MCP 연동 예고가 이루어진다.

[00:00] 화자가 트위터에서 자주 보는 디자이너들이 Claude Code를 극찬하는 것을 보고, 아직 사용해보지 않았기 때문에 Tailwind의 Dan Hollik에게 실제 사용법을 보여달라고 요청했다고 소개합니다.
[00:00:24] 설치 및 첫인상

Dan이 Claude Code를 처음 접했을 때 터미널 AI 에이전트의 필요성을 못 느꼈으나, 실제로 디렉터리 내 파일 탐색·읽기·수정 작업을 자동화하는 강력함을 경험한 과정을 설명한다.

[00:27] Dan은 Claude Code를 의도적으로 사용한 것이 아니라 회사에서 사용하다가 알게 되었고, 처음에는 터미널의 AI라는 개념을 이해하지 못했지만, 실제로 사용해보면서 그 강력함을 깨달았다고 설명합니다.
[00:42] Claude Code의 핵심 장점은 디렉토리 공간에서 자유롭게 이동하며 여러 파일을 읽고, 개발자처럼 탐색하면서 사용자가 하고 싶지 않거나 할 수 없는 작업들을 처리해준다는 점입니다.
[01:14] VS Code에서 IDE 통합 기능을 사용해 터미널에서 직접 실행하지 않고도 사용할 수 있으며, 에이전트들이 서로 생성하고 전체 코드베이스를 탐색할 수 있는 강력한 기능이 있다고 설명합니다.
[00:01:16] 장점과 단점

에이전트가 자동으로 서브 에이전트를 생성해 코드베이스를 탐색하고 스타일을 복제하는 장점을 소개한다. 반면 대규모 컨텍스트 윈도우로 인해 비용이 빠르게 소모되는 단점을 언급한다.

[01:27] 단점으로는 컨텍스트를 많이 소비해서 비용이 많이 든다는 점이 있지만, 거대한 컨텍스트 윈도우 덕분에 코드 스타일을 정확하게 복사할 수 있어서 매우 유용하다고 언급합니다.
[01:48] Claude Code를 실행하는 방법은 VS Code의 탭에서 실행하거나 터미널에서 직접 'claude' 명령어를 사용하는 방법이 있으며, 폴더 관련 질문을 할 수 있고 프롬프트와 관련된 재미있는 텍스트를 보여주는 세심한 기능들이 있다고 설명합니다.
[00:02:42] 라이브 데모: 피드백 기능 개발

블로그 본문 텍스트를 선택하면 피드백 폼이 나타나도록 하는 기능을 Claude Code로 구현하는 과정을 시연한다. 텍스트 선택 감지·단어 수 계산·다이얼로그 팝업 로직 등을 다룬다.

[02:42] 오늘 아침에 Claude로 구축한 기능을 다시 만들어 볼 예정이며, 이는 블로그 포스트에서 사용자가 텍스트를 선택하여 문제점을 지적할 수 있는 기능이라고 소개합니다.
[02:56] 사용자가 기사에서 텍스트를 선택하면 피드백을 보낼 수 있는 기능을 구현하려고 합니다. 맞춤법 실수 같은 문제가 있을 때 버튼을 클릭해서 피드백 양식을 띄우고 내용을 채워서 보낼 수 있도록 하는 것입니다.
[03:06] 이 기능에는 흥미로운 기술적 과제들이 있습니다. 단어 수를 세고, 텍스트 선택을 감지해서 그 정보를 전달해야 합니다. Claude가 없었다면 너무 복잡해서 만들지 않았을 기능이라고 설명합니다.
[03:27] 작성한 프롬프트는 사용자가 기사에서 텍스트를 하이라이트하고 피드백을 보낼 수 있는 기능에 대한 요구사항을 담고 있습니다. 중요한 점은 기사 내에서만 작동해야 하고, 단어 수를 세며, 버튼을 누르면 대화 상자에 양식이 나타나야 한다는 것입니다.
[03:56] 기능만 연결하고 스타일링은 나중에 Figma MCP 서버를 사용해서 처리할 계획입니다. 지금은 기본 모양이어도 괜찮다고 명시했는데, 그렇지 않으면 Claude가 너무 예쁘게 만들려고 하기 때문입니다.
[04:14] 프롬프트를 복사해서 Claude에 붙여넣습니다. 현재 작업 중인 파일이 화면에 표시되며, 관련 파일들을 열어놓는 것이 좋지만 꼭 필요하지는 않다고 설명합니다.
[04:33] Claude가 할 일은 목록을 만들거나 프로젝트를 작은 단계로 나누는 것입니다. 가끔은 이렇게 하라고 프롬프트를 줘야 하지만 보통은 알아서 처리합니다.
[04:46] 몇 달 전 Cursor와 비교했을 때, 두 도구 모두에게 도움이 되지만 Cursor에서는 인터페이스 때문에 이런 방식을 덜 사용했다고 합니다. Cursor는 특정 파일에 대해 얘기하는 느낌이지만, Claude는 전체 저장소에 접근할 수 있다는 느낌을 준다고 설명합니다.
[00:05:09] 프롬프트 작성 전략

AI에게 작성할 기능을 분해해 단계별 요구 사항을 명확히 전달하는 프롬프트를 작성하는 팁을 공유한다. 파일 컨텍스트 포함 여부와 자동 분해 가능성을 비교한다.

[05:25] Claude는 아무것도 열어두지 않고도 완전히 실행할 수 있으며, 현재 경로들을 나열하면서 코드베이스 구조를 파악하고 있습니다. 방금 초기화했기 때문에 기억이 없어서 처음부터 코드베이스를 학습하고 있는 상황입니다.
[05:48] 새로운 기능을 개발할 때 스크린샷을 찍어서 Claude에게 컴포넌트 레이아웃을 코드베이스에서 찾아달라고 요청하는 워크플로우를 설명합니다. Playwright MCP 서버를 활용하면 스크린샷 촬영과 검증도 자동화할 수 있어 더욱 효율적입니다.
[00:06:17] 코드 변경 흐름

Claude Code가 제안한 코드를 ‘저장하여 계속’ 방식으로 반영하는 과정과 수락/거부 플로우를 설명한다. 미리보기가 없으므로 저장 전후 차이를 주의해야 한다.

[06:17] Claude의 작업 방식이 Cursor와 다르다고 설명합니다. Cursor는 승인/거부 기능이 있지만, Claude는 '파일 저장' 프롬프트를 보여주고 '예'를 누르기 전까지는 변경사항을 볼 수 없다는 단점이 있습니다.
[07:04] 개발자가 AI가 작성하지 않은 모든 코드를 직접 작성했기 때문에 AI의 작업을 이해할 수 있다고 설명합니다. 주로 AI가 하지 않았으면 하는 것들을 찾거나 올바른 전략을 택하고 있는지 확인하는 것이 중요합니다.
[07:21] AI가 개발자가 선호하는 스타일링 방식을 채택하고 있어 만족스럽다고 표현합니다. 이는 Tailwind에서 많이 사용하는 인터랙티브 상태 스타일링 방식이지만 일반적으로는 흔하지 않은 패턴입니다.
[00:07:25] 디버깅 팁

문제가 발생했을 때 단순히 “작동 안 함”이 아닌 구체적으로 검증할 지점을 AI에게 질문해 콘솔 로그를 자동 삽입하도록 유도하는 디버깅 전략을 시연한다.

[08:15] 만약 AI가 JavaScript의 CLSX 같은 클래스 기능으로 스타일링하려고 한다면 거부하고 다른 방식으로 안내할 것이라고 설명합니다. 중간에 끼어들어서 Claude를 원하는 방향으로 안내할 수 있다는 점을 강조합니다.
[08:39] Claude가 다른 방향으로 안내하는 기능에 대해 설명하며, 이전에 만든 프로젝트에서 텍스트 선택 팝업이 라이트박스 열릴 때 사라져야 하는 UX 문제를 해결하려고 한다고 설명합니다.
[08:56] AI가 코드베이스에서 라이트박스 관련 코드를 찾기 위해 Command+F를 사용하여 팝업, 오버레이, 라이트박스 등의 키워드를 검색하고 있으며, 실제로는 'figure'라는 이름으로 되어 있다고 설명합니다.
[09:27] AI가 구현을 완료했다고 하지만 실제로 테스트해보니 텍스트를 선택해도 배너가 나타나지 않아 디버깅 방법을 보여주겠다고 합니다.
[09:43] 단순히 '작동하지 않는다'고 하는 대신 구체적으로 '텍스트 선택 저장소가 업데이트되고 있는지' 물어보는 것이 더 효과적이라고 설명하며, AI가 console.log를 추가하기 시작한다고 합니다.
[10:39] 자신도 대문자로 '작동하지 않는다'고 쓰는 실수를 범했다고 농담하며, AI가 인간이 읽기 어려울 정도로 많은 로그를 추가하지만 결국 무엇을 찾아야 하는지 알려준다고 설명합니다.
[11:15] 디버깅을 통해 텍스트 선택이 감지되고 있음을 확인하고, 배너가 나타나는 것을 확인합니다. 애니메이션도 좋다고 평가하며 '못생기게 만들어달라'고 했는데도 기본적으로 괜찮다고 언급합니다.
[00:11:38] 스폰서: Genway AI & Raycast

Genway AI를 통해 글로벌 인터뷰 패널 대상으로 아이디어 검증을 자동화하는 방법과, Raycast로 다양한 AI 모델(OpenAI·Claude·Perplexity 등)을 단축키로 실행하는 워크플로우를 소개한다.

[11:39] Genway AI를 소개하며, 또 다른 대시보드가 아닌 고객과의 대화가 필요하다고 강조합니다. 아이디어를 빠르게 검증하기 위한 바이브 리서치 도구로, 질문을 작성하고 ICP를 선택하면 AI 에이전트가 글로벌 참가자들과 인터뷰를 진행한다고 설명합니다.
[12:09] Raycast AI 도구에 대한 소개와 14일 무료 체험 안내. 키보드 단축키로 빠르게 접근할 수 있고 30개 이상의 다양한 AI 모델을 지원하며 무료로 사용할 수 있다고 설명합니다.
[13:02] 애니메이션 문제를 해결하려고 시도하며 긍정적인 피드백의 중요성을 언급. 단순한 레이아웃보다는 더 흥미로운 작업을 하고 싶어합니다.
[13:34] Figma MCP 서버를 활용한 실험을 시작. 개발자 모드 MCP 서버를 활성화하면 AI가 Figma의 선택된 요소와 파일에 대한 컨텍스트를 받아볼 수 있다고 설명합니다.
[00:13:40] Figma MCP 서버 연동

로컬 MCP 서버를 활성화해 AI가 Figma 오토 레이아웃 프레임을 읽고 Tailwind 코드로 변환하는 과정을 실습한다. 선택 레이어의 구조 기반 코드 생성을 설명한다.

[14:10] MCP 서버의 작동 원리를 설명하며 AI가 선택한 트리와 자동 레이아웃을 더 잘 이해할 수 있게 해준다고 합니다. 현재 예시는 단순한 배경 블러가 있는 프레임이라고 언급합니다.
[14:37] Figma에서 선택한 레이어처럼 토스트를 스타일링해달라고 요청. MCP 서버 명령어들이 Figma MCP 코드를 가져와서 Tailwind로 변환해주는 과정을 설명합니다.
[15:25] 토스트가 다시 작동하지 않는 문제를 발견하며 '작동하지 않음'과 '보이지 않음'의 차이점에 대해 세밀하게 관찰하고 있습니다.
[15:40] AI와 대화할 때는 구체적으로 말해야 한다는 조언. '작동하지 않는다'보다는 동료에게 슬랙 메시지를 보내듯이 자연스럽게 설명하는 것이 좋다.
[16:01] 브레이크포인트 문제를 발견하고 디버깅하는 과정. 로그가 추가될 때만 작동하는 것 같고, 작은 뷰포트에서만 동작하는 것을 확인했다.
[16:38] Super Whisper라는 음성 입력 도구에 대한 논의. 한 사람은 오랫동안 반대했지만 이제는 타이핑 대신 음성으로 프롬프트를 입력하는 것을 선호한다고 한다.
[17:07] 이전에 같은 워크플로우로 성공했던 경험과 Figma MCP 서버의 효과성에 대한 이야기. 자동 레이아웃이 잘 구성되어 있을 때 AI가 더 잘 작동한다는 것을 발견했다.
[00:17:11] 네이밍과 구조화 중요성

레이어 이름 지정과 오토 레이아웃 정리가 AI 정확도를 높이는 모범 사례로 강조된다. 깔끔한 디자인 트리가 AI의 코드 변환 품질에 미치는 영향을 다룬다.

[17:53] 레이어 이름을 짓고 모든 것을 깔끔하게 정리하는 것이 AI 작업에서 중요해졌다는 논의. 바이브 코딩이 다른 미래를 약속했지만 여전히 정리정돈이 도움이 된다는 것을 발견했다.
[00:18:39] 자동화 vs 수동 스타일링

Adam W.의 완전 자동 생성 실험 사례를 언급하며, Dan은 스타일링 등 세부 조정은 직접 하되 반복적·단순 작업을 AI에 맡기는 균형 전략을 제안한다.

[18:39] Figma MCP 사용 현황에 대한 질문. 아직 실험 단계인지 아니면 실제 작업 방식으로 정착했는지 묻고 있다.
[18:49] Dan이 현재 Cursor Claude를 이용한 개발 방식이 실험적 단계임을 설명하며, Tailwind 창립자 Adam Wan이 MCP Figma 서버를 Claude에 연결해 코드 없이 컴포넌트를 구축한 실험을 언급합니다.
[19:21] Dan은 스타일링과 세부 작업이 자신이 즐기는 코딩 부분이라며, AI가 지루한 작업을 대신해주길 원하지 즐기는 부분을 뺏어가는 것은 원하지 않는다고 설명합니다.
[19:46] 코드 수정 시 AI를 기다리는 것보다 직접 코드를 이해하고 수정하는 것이 더 빠르다는 점에 동의하며, 생성된 코드를 읽고 이해할 수 있는 능력의 중요성을 강조합니다.
[20:44] Dan의 디버깅 방식을 관찰한 것이 중요한 학습 포인트였으며, 완벽한 시연보다는 실제 시행착오 과정을 보여주는 것이 더 유용했다고 평가합니다.
[00:21:12] 고급 활용 팁

오픈소스 레포를 AI에 참조하도록 지시해 코드 구조·스타일 가이드를 학습시키는 방법을 소개한다. GitHub CLI 연결로 AI가 직접 리포를 읽고 수정 명령을 생성한다.

[21:12] 일반인들이 Dan의 기술적 능력을 갖추지 못한 상황에서, 간단한 승인과 프롬프트만으로 결과물을 만들어내는 과정을 보여준 것이 의미 있었다고 분석합니다.
[21:43] GitHub 레포지토리를 참조하여 아키텍처를 학습하고 적용하는 기법과 GitHub CLI 연결을 통한 고급 활용법을 소개하며, 문서 업데이트 시 AI에게 새로운 정보를 제공하는 실용적인 팁을 공유합니다.
[00:22:43] 결론 및 마무리

Dan이 AI 도구를 통해 실전 워크플로우를 간단히 구현할 수 있음을 확인하며, 시청자도 AI 에디터 활용에 대한 부담을 덜 수 있도록 격려하며 영상을 마무리한다.

타임라인 정보가 없습니다.

[00:00] 트위터를 열 때마다
[00:01] 제가 존경하는 어떤 디자이너가 Claude Code에 대해 극찬을 하고 있어요
[00:03] 저는 아직 사용해보지 않았어서
[00:06] Tailwind의 Dan Hollik에게 부탁해서
[00:08] 그가 Claude Code를 정확히 어떻게 사용하는지 보여달라고 했어요
[00:11] 프롬프트 기법과 실제 디버깅을 다루고
[00:14] 심지어 Figma의 MCP와 연결하는 방법도 보여줄 거예요
[00:16] 그는 심지어 Figma의 MCP와 연결하는 방법도 보여줄 거예요
[00:18] 심지어 Figma의 MCP와 연결하는 방법도 보여줄 거예요
[00:21] 자, 더 이상 지체하지 말고 시작해보죠
[00:24] 저는 Claude Code를 의도적으로 사용한 건 아니에요
[00:27] 그냥 어디서 들어본 정도였어요
[00:29] 회사에서 뭔가에 사용하고 있었는데
[00:30] 처음에는 요점을 이해하지 못했어요
[00:33] 터미널에서 돌아가는 AI라고 해서
[00:35] 뭐가 그리 대단한지 모르겠더라고요
[00:37] 그런데 사용하기 시작하면서
[00:39] 깨달았어요
[00:42] 디렉토리 공간에서 위치를 제어할 수 있고
[00:44] 위아래로 이동하면서 여러 파일을 읽을 수 있는 에이전트가 있다는 게 얼마나 강력한지
[00:47] 개발자처럼 돌아다니면서
[00:49] 개발자처럼 돌아다니면서
[00:51] 제가 하고 싶지 않거나
[00:53] 할 수 없는 모든 일들을 처리해주니까
[00:56] 이런 식으로 생각이 바뀌었어요
[00:58] 최고의 인터페이스가 뭔지에 대해서요
[01:00] IDE 통합 기능도 있어서
[01:04] 저는 VS Code에서 실행하고 있어요
[01:07] 터미널에서 날 것 그대로 사용하지는 않아요
[01:10] 터미널에서 날 것 그대로 사용하지는 않아요
[01:11] 터미널을 열었다면
[01:12] 좀 긴장했을 거예요
[01:13] 좀 긴장했을 거예요
[01:14] 다행히 아니에요
[01:16] 몇 가지 단점은 있지만
[01:19] 에이전트들이 서로 생성하고
[01:22] 전체 코드베이스를 탐색할 수 있다는 게 꽤 강력하다고 생각해요
[01:24] 전체 코드베이스를 탐색할 수 있다는 게 꽤 강력하다고 생각해요
[01:27] 그리고 컨텍스트를 엄청 소비해요
[01:29] 그래서 꽤 비싸요
[01:31] 그게 가장 큰 단점 중 하나예요
[01:33] 작은 컨텍스트 표시기가 있어서
[01:35] 전체 코드베이스를 읽으면서
[01:38] 돈이 타는 게 느껴져요
[01:41] 하지만 그 거대한 컨텍스트 윈도우가
[01:43] 코드 스타일을 복사하는 걸 정말 잘하게 해줘서
[01:46] 정말 도움이 되죠
[01:48] Claude Code를 실행하는 방법은 몇 가지가 있어요
[01:49] 여기 VS Code에서 실행하고 있어요
[01:52] 이 탭에서요
[01:55] 코드 탭이나 Cursor의 채팅 창처럼
[01:58] 코드 탭이나 Cursor의 채팅 창처럼
[02:02] 다른 방법으로는 그냥 claude라고 쓰면
[02:04] 다른 방법으로는 그냥 claude라고 쓰면
[02:06] 지금 실행되고 있고
[02:10] 뭐든지 할 수 있어요
[02:12] 이 폴더에서 실행되고 있어요
[02:14] 이게 훨씬 더 무서워 보이는 방법이에요
[02:16] 이게 훨씬 더 무서워 보이는 방법이에요
[02:18] 생각보다는 무섭지 않았어요
[02:19] 생각보다는 무섭지 않았어요
[02:20] 네, 꽤 멋져요
[02:22] 어떤 폴더에서 실행되고 있는지 같은 질문을 할 수 있어요
[02:24] 어떤 폴더에서 실행되고 있는지 같은 질문을 할 수 있어요
[02:28] 항상 이런 재미있는 텍스트를 만들어내요
[02:30] 보여주는 텍스트가 주어진 프롬프트와 관련이 있어요
[02:34] 보여주는 텍스트가 주어진 프롬프트와 관련이 있어요
[02:36] 이런 세심한 터치들이 많아요
[02:38] 이런 세심한 터치들이 많아요
[02:40] 여기서 작업하고 있던 것에 대해 말해주세요
[02:41] 여기서 작업하고 있던 것에 대해 말해주세요
[02:42] 좋아요
[02:44] 오늘 아침에 Claude로 구축한 기능을
[02:46] 다시 만들어 볼 건데
[02:49] 기본적으로 이 블로그 포스트가 있고
[02:52] 사람들이 텍스트를 선택해서
[02:54] 뭔가 문제가 있다고 말할 수 있게 하고 싶어요
[02:56] 여기에 맞춤법 실수 같은 게 있으면
[02:57] 이 버튼을 클릭해서
[02:59] 피드백 양식을 띄우고
[03:02] 내용을 채워서 나에게
[03:04] 피드백을 보낼 수 있어요. 사실 여기에는
[03:06] 흥미로운 문제들이 있는데
[03:08] 단어 수를 세고 있고
[03:10] 텍스트 선택을 감지해서
[03:12] 그 텍스트 선택을
[03:14] 전달하고 싶거든요.
[03:17] 음.
[03:17] 그래서 이건 단순한 기능이 아니라
[03:20] Claude가 없었다면
[03:22] 예전에는 그냥 안 만들었을 기능이에요
[03:26] 좀 귀찮거든요.
[03:27] 네, 그래서 이 프롬프트를 작성했는데
[03:30] 기본적으로 이 프롬프트는
[03:33] 사용자가 기사에서 텍스트를 하이라이트하고
[03:35] 피드백을 보낼 수 있는
[03:37] 기능을 작업하고 있다고 말해요.
[03:38] 그리고 몇 가지 중요한 점들이 있는데
[03:41] 기사 내에서 텍스트가 선택되었을 때만
[03:43] 실행되어야 하고, 페이지의 다른 곳에서
[03:47] 무작정 실행되면 안 돼요.
[03:49] 단어 수를 세고 싶고
[03:51] 버튼을 누르면 대화 상자에
[03:53] 양식이 나타나야 해요.
[03:56] 마지막 부분이 중요한데
[03:58] 기능만 연결하고 싶어요.
[04:00] 이걸 다 하고 나서
[04:03] Figma MCP 서버를 사용해서 스타일을 만들 거예요.
[04:07] 지금은 그냥 기본 모양이어도
[04:08] 괜찮아요. 왜냐하면 안 그러면
[04:10] 너무 예쁘게 만들려고 하거든요.
[04:12] 그래서 이걸 복사해서
[04:14] 여기에 프롬프트를 붙여넣어요.
[04:17] 항상 현재 작업 중인 파일이 여기 표시되죠.
[04:21] 이게 메인 페이지의 레이아웃이에요.
[04:25] 관련 있을 것 같은 파일들을
[04:28] 열어놓는 게 좋지만
[04:30] 꼭 필요한 건 아니에요.
[04:32] 그냥 붙여넣으면 돼요.
[04:33] 아마 지금 할 일은 목록을 만들거나
[04:35] 프로젝트를 작은 단계로
[04:38] 나누는 방법을 찾아내는 거예요.
[04:41] 가끔은 이렇게 하라고
[04:42] 프롬프트를 줘야 하지만
[04:43] 보통은 알아서 해요.
[04:46] 몇 달 전에 Cursor에서 프롬프트를 작성했다면
[04:48] 여전히 각 항목을 포함한
[04:50] 그런 큰 프롬프트를 작성했을까요?
[04:52] 아니면 이건 완전히 Claude 방식인가요?
[04:54] 핵심은 Claude가 이걸 나눌 수 있다는 거니까요.
[04:56] 두 도구 모두에게 도움이 될 거라고 생각하지만
[04:58] Cursor에서는 그렇게 할 가능성이 낮았어요
[05:01] 인터페이스 때문이고
[05:04] Cursor에서는 항상
[05:06] 채팅에서 파일을 열어두고
[05:08] 그 파일에 대해 얘기하는 느낌이지만
[05:10] 여기서는 우리가 이 파일에 대해
[05:11] 얘기하고 있다고 생각하겠지만
[05:15] 사실 Claude는 아무것도 열어두지 않고도
[05:16] 완전히 실행할 수 있어요.
[05:19] 왜냐하면 Claude가 전체
[05:21] 어디에나 있다는 느낌을 주거든요.
[05:24] 저장소 전체에요.
[05:25] 상관없어요. 알아서 찾아낼 거예요.
[05:28] 보시다시피 여기서 경로들을
[05:31] 나열하면서 코드베이스 구조를
[05:34] 파악하려고 하고 있죠?
[05:36] 다시 말하지만 기억이 없어요.
[05:38] 제가 방금 초기화했으니까요.
[05:40] 그래서 지금 제 코드베이스를
[05:42] 처음부터 학습하고 있는 거예요.
[05:44] 이걸 완료하자마자
[05:46] 이 목록의 첫 번째 항목을 체크할 거예요.
[05:48] 여기 목록에 있는 내용인데
[05:49] 정말 흥미로운 부분이에요. 왜냐하면 새로운
[05:50] 기능을 작업할 때 보통 제가 가장 먼저 하는 일이
[05:52] 스크린샷을 찍고 이렇게 말하는 거거든요
[05:55] "이 컴포넌트 레이아웃을 코드베이스에서 찾아줘.
[05:57] 어디에 있는지 전혀 모르겠어. 그냥 언급하고
[05:59] 앞으로 할 작업에 컨텍스트로 추가하려고 해"
[06:01] Cursor도 이제 똑같을 것 같지만
[06:03] Playwright MCP 서버를 띄워서
[06:05] 스크린샷을 찍고 검증하도록 도와줄 수도 있어요
[06:07] 정말 멋지죠. 이제 첫 번째로 요청한 것을
[06:09] 해보겠습니다. 이걸 닫을 수 있겠네요. 이건
[06:13] Cursor와는 좀 다를 수 있어요. 기본적으로
[06:15] 변경사항을 만들라고 프롬프트를 보여주고
[06:17] Cursor처럼 승인/거부 기능이 있는 것과 달리
[06:19] 여기서는 그냥 '계속하려면 파일 저장'이라고 나와요
[06:22] 그래서 '예'를 누르기 전까지는 변경사항을 볼 수 없죠
[06:25] 이게 Claude의 단점 중 하나예요. 저는 이걸
[06:27] 켜두는 편인데 '예, 다시 묻지 마'라고 할 수 있거든요
[06:30] 하지만 이게 좋은 이유는 뭘 하고 있는지 볼 수 있고
[06:33] 올바른 방향으로 가고 있는지 확인할 수 있어서예요
[06:35] 이건 좋아 보이네요. 원하는 텍스트 선택 기능들을
[06:37] 다 구현하고 있어요. 그래서 '예'를 누르면
[06:39] 그 파일에 쓰기 시작합니다. 변경사항을 만들었을 거예요
[06:42] 네, 텍스트 선택 스토어를 만들었네요
[06:44] 다 좋아 보입니다. 이건 제가 이미 사용하고 있는
[06:47] 특정 라이브러리로 해달라고 요청한 거예요
[06:49] 그렇지 않으면 중복될 거거든요. 같은 기능을 하는
[06:50] 여러 라이브러리가 설치되게 됩니다. package 파일을
[06:53] 읽기는 하지만 그게 중요하다는 보장은 없어요
[06:55] 하지만 이건 좋네요. 맥락을 위해 말하자면
[06:57] 그 코드 블록을 어느 정도 이해하고 계세요?
[07:00] 시청자 중에 0%도 모르는 분들을 위해
[07:02] 어느 정도 수준이고 어떤 부분이 중요한지 알려주실 수 있나요?
[07:04] 제가 AI가 작성하지 않은 모든 코드를 이 코드베이스에서
[07:06] 직접 작성했기 때문에 시간을 들이면
[07:08] AI가 하려는 모든 것을 이해할 수 있어요
[07:10] 네, 시간을 들이면 말이죠. 하지만 주로
[07:12] 제가 찾고 있는 건 하지 않았으면 하는 것들이나
[07:14] 올바른 전략을 택하고 있는지 확인하는 거예요
[07:16] 여기서는 이걸 추가하고 있는데 정말 좋아요
[07:18] 제가 좋아하는 스타일링 방식이거든요
[07:21] 아니면 제 코드베이스에서 인터랙티브 상태를
[07:23] 스타일링하는 방식인데 사실 흔한 패턴은 아니에요
[07:25] Tailwind에서 많이 사용하는 방식이라서
[07:29] 정말 좋아요. 이런 식으로 계속 해도 된다고 생각해요
[07:31] 하지만 만약 JavaScript로 CLSX 같은
[07:32] 클래스 기능으로 스타일링하려고 한다면
[07:35] 실망스러울 거예요. 그러면 여기 아래로 가서
[07:37] '아니요'라고 하고 Claude에게 다르게 하라고
[07:39] 말할 거예요. '이게 제가 선호하는 스타일링 방식입니다'
[07:41] 라고 말이죠
[07:43] 알겠습니다
[07:46] 그래서 중간에 끼어들어서 Claude를 안내할 수 있어요
[07:47] 진짜 하지 않았으면 하는 것들을 찾고 있어요
[07:49] 올바른 전략을 택하고 있는지 확인하는 거죠
[07:52] 여기서는 이걸 추가하고 있는데 정말 좋아요
[07:54] 제가 좋아하는 스타일링 방식이거든요
[07:59] 인터랙티브 상태를 스타일링하는 방식인데
[08:02] 사실 흔한 패턴은 아니에요. Tailwind에서
[08:05] 많이 사용하는 방식이라서 정말 좋아요
[08:07] 이런 식으로 계속 해도 된다고 생각해요
[08:10] 하지만 만약 JavaScript로 CLSX 같은
[08:12] 클래스 기능으로 스타일링하려고 한다면
[08:15] 실망스러울 거예요. 그러면 여기 아래로 가서
[08:17] '아니요'라고 하고 Claude에게 다르게 하라고
[08:20] 말할 거예요. '이게 제가 선호하는 스타일링 방식입니다'
[08:23] 라고 말이죠
[08:27] 알겠습니다
[08:29] 그래서 중간에 끼어들어서 Claude를 안내할 수 있어요
[08:31] 다르게 하라고 말하고 '이게 제가 선호하는
[08:33] 스타일링 방식입니다'라고 할 수 있죠
[08:35] 알겠습니다
[08:35] 그래서 중간에 끼어들어서 Claude를 안내할 수 있어요
[08:36] 그냥 안내하면 돼요
[08:39] 다른 경로로 안내하는 것이 꽤 좋습니다.
[08:41] 지금 하고 있는 것은 제가 요청한 건데
[08:44] 이걸 이전에 만들었거든요.
[08:46] 해결하기 까다로운 UX 문제가 하나 있다는 걸 알았어요
[08:48] 텍스트 선택 팝업이 나타날 때
[08:50] 라이트박스 중 하나를 열면 사라져야 한다는 거예요.
[08:54] 이런 라이트박스들 말이죠.
[08:56] 지금 라이트박스가 어디에 있는지 파악하려고 하고 있어요.
[08:58] 말 그대로 코드베이스에서
[09:01] 팝업 오버레이, 라이트박스 같은 것들을 찾고 있어요.
[09:04] 실제로는 figure라고 불리는 것 같은데
[09:07] 좀 이상하긴 하지만요.
[09:10] 작동 방식을 보면
[09:12] 전체 코드베이스에서 많은 Command+F를 사용하는 것 같아요
[09:16] 다음에 무엇을 해야 하는지
[09:18] 또는 어디로 가야 하는지 파악하려고 하죠.
[09:20] 무슨 일이 일어날지 궁금하네요.
[09:23] 어떤 일이 일어날지 말이에요.
[09:25] 무슨 일이 일어날지 궁금하네요.
[09:27] 이제 완전히 구현되었다고 하네요.
[09:30] 제가 판단해보겠습니다.
[09:33] 좋아요, 파일들이 생성되었네요.
[09:35] 기본적으로 수행한 작업을 알려주었어요.
[09:37] 이제 뭔가 해보면
[09:40] 아무것도 나오지 않네요.
[09:43] 이제 디버깅하는 방법을 보여드릴 좋은 시점인 것 같아요
[09:46] 많은 사람들이 이 시점에서
[09:49] 작동하지 않는다고 할 것 같거든요.
[09:50] 그런 프롬프트를 주겠죠.
[09:53] 하지만 좀 더 구체적으로 말하는 게 도움이 된다고 생각해요
[09:55] 좀 더 구체적으로 말하는 게 도움이 된다고 생각해요
[09:57] 구체적으로 말하는 게 도움이 된다고 생각해요
[09:59] 당연히 그렇겠죠. 좋아요.
[10:02] 그래서 제가 텍스트를 선택하고
[10:06] 배너가 나타날 것으로 예상했는데
[10:11] 그리고
[10:13] 그게
[10:15] 없네요.
[10:18] 텍스트 선택 저장소가
[10:24] 업데이트되고 있나요?
[10:26] 디버깅을 도와달라고 찔러보는 거죠
[10:28] 기본적으로 질문을 던지는 거예요
[10:30] 작동하지 않는다고 말하는 대신
[10:33] 이런 것들을 확인해달라고 하면
[10:35] console.log를 추가하기 시작할 거예요
[10:37] 모든 곳에 말이에요.
[10:39] 꽤 멋지네요.
[10:41] 저도 대문자로 '작동하지 않는다'고 쓰는 죄를 범했어요. [웃음]
[10:52] [웃음]
[10:57] 많은 로그들과 엄청난 양의 로그를 추가해요
[11:00] 보시다시피 제가 알아차린 건데
[11:04] 인간이 읽기에는 어려울 정도로
[11:06] 많은 로깅을 추가하지만
[11:08] 그런 다음 마지막에
[11:10] 제가 무엇을 찾아야 하는지 물어보거나 알려줄 거예요.
[11:15] 이제 텍스트를 선택해보세요
[11:17] 그리고 기사에서
[11:18] 디버깅이 콘솔에 나타날 거예요
[11:21] 텍스트 선택이 감지되고 있는지 확인하세요
[11:22] 네, 확실히 감지되고 있어요.
[11:25] 작은 배너가 나타났나요?
[11:27] 배너가 나타났나요?
[11:28] 아, 네. 아, 정말 다르게 보이네요.
[11:31] 네, 좋아요. 작동하고 있어요.
[11:33] 애니메이션도 좋네요.
[11:35] 못생기게 만들어달라고 했는데도
[11:36] 기본적으로 꽤 좋아요.
[11:39] 좋아요, 여기서 말씀드리고 싶은 게 있어요.
[11:41] 또 다른 대시보드는 필요 없어요.
[11:44] 고객과 대화하는 것이 필요해요.
[11:47] Genway AI를 소개해드리고 싶어요.
[11:49] 아이디어를 빠르게 검증하기 위한
[11:51] 바이브 리서치라고 생각하시면 됩니다.
[11:53] 질문을 초안으로 작성하고 ICP를 선택하면
[11:56] AI 에이전트가 대신 인터뷰를 진행해요
[11:58] 글로벌 참가자 패널에서 데이터를 가져와서요.
[12:00] 아침에 설정하고
[12:02] 점심시간까지 실행 가능한 인사이트를 얻을 수 있어요.
[12:04] 손끝에서 바로 검증할 수 있어요.
[12:06] 손끝에서 바로 검증할 수 있어요.
[12:09] 14일 동안 무료로 체험해볼 수 있습니다.
[12:11] dive.club/genway로 접속하기만 하면 됩니다.
[12:15] 시작하세요. 바로 그거예요.
[12:19] Raycast는 제가 AI에 접근하는 포털입니다. 키보드 단축키로
[12:22] 빠르게 사용할 수 있어서 항상
[12:24] 손끝에 있는 것처럼 느껴집니다. 첨부파일을 추가하고
[12:26] 워크플로우를 간소화하는 프리셋을 만들 수 있고
[12:29] OpenAI부터 Claude, 그리고
[12:31] Perplexity까지 30개 이상의 모델을 지원하므로
[12:34] 채팅이 단일 모델에 제한되지 않습니다. 그리고 가장 좋은 점은
[12:37] AI와 모든 확장 기능을
[12:40] 무료로 사용해볼 수 있다는 것입니다. 구독도 필요 없고
[12:42] 계정도 필요 없습니다. Raycast는
[12:46] 제가 컴퓨터를 사용하는 방식의 핵심이
[12:48] 되었습니다. 아직 사용해보지 않으셨다면
[12:49] dive.club/raycast로 가서
[12:52] 시작해보세요.
[12:54] r-a-y-c-a-s-t입니다. 자, 이제
[12:58] 본격적으로 시작해보겠습니다. 계속해서
[13:02] 선택하면 어떨까요?
[13:05] 애니메이션을 고치기 위해서요. 계속
[13:07] 사라지거든요. 하지만 꽤 좋네요.
[13:10] 항상 긍정적인 피드백을 주려고 해요.
[13:13] 강화를 위해서요.
[13:15] 좋아요. 작동하고 있어요. 잘했어요.
[13:16] 자, 다음 단계로 넘어가서
[13:20] 이 부분을 만들 수도 있겠지만
[13:23] 그렇게 흥미롭지는 않네요.
[13:25] 맞죠?
[13:26] 이건 그냥 레이아웃일 뿐이에요.
[13:28] 실제로 제가 원했던 모습은
[13:30] 이것이었어요.
[13:31] 오늘 Figma MCP 서버로
[13:32] 이것저것 실험해보고 있었는데
[13:34] 이것이 어떻게 처리되는지 보고 싶었어요. 자, 이제
[13:37] 모든 로그를 제거할 거예요.
[13:40] 작동한다는 것을 알았으니까요. 그리고
[13:42] 기본적으로 Figma MCP 서버의
[13:44] 간단한 아이디어는
[13:47] 개발자 모드 MCP 서버를 활성화하라고 말하기만 하면
[13:51] 바로 실행할 수 있다는 것입니다. 유료 계정이 필요한 것 같아요.
[13:53] 그것만 있으면 됩니다. 그러면 로컬 머신에서
[13:56] MCP 서버가 실행되기 시작합니다.
[13:58] 이 서버가 하는 일은 AI가 대화할 수 있게 하고
[14:01] 선택한 항목이나 파일에 대한 컨텍스트를
[14:03] AI에게 다시 전달하는 것입니다. 그래서
[14:06] AI가 선택한 트리와
[14:10] 해당 트리에 있을 수 있는 자동 레이아웃을
[14:13] 더 잘 이해할 수 있게 해줍니다. 이것은
[14:15] 좋지 않은 예시입니다. 말 그대로 그냥
[14:18] 배경 블러가 있는 프레임일 뿐이에요.
[14:21] 어떻게 작동하는지 보기에는
[14:24] 좋은 방법입니다. 여기서
[14:26] 작업을 완료할 때까지 기다려야 해요.
[14:28] 여기서 제거하는 작업을 말이에요.
[14:31] 세상에, 로그가 얼마나 많았던 거예요?
[14:34] 이제 토스트를 스타일링해달라고
[14:37] 말할 수 있습니다.
[14:41] Figma에서 선택한 레이어처럼
[14:45] 스타일링해주세요.
[14:49] 선택한 것처럼 말이에요.
[14:54] 좋아요. 이제 이것들이 MCP 서버
[14:57] 명령어들입니다. 이 모든 것이
[15:01] Figma MCP 코드 가져오기인 것을 볼 수 있어요. Figma MCP 서버의
[15:03] 함수를 호출해서
[15:08] 선택한 프레임을 가져오고
[15:10] Figma가 하는 코드 생성
[15:12] 작업을 가져옵니다. 제 스타일로는 나오지 않을 거예요.
[15:16] Tailwind와 제가 사용하는
[15:17] 모든 것으로 변환해줄 거예요. 이제 몇 가지
[15:20] 변경을 하려고 합니다. 제가 선택해도
[15:23] 아무 일도 일어나지 않네요. 아직 진행 중입니다.
[15:25] 토스트가 다시 작동하지 않네요.
[15:28] 보이지 않습니다. '작동하지 않음' 대 '보이지 않음'.
[15:31] 아주 작은 차이지만
[15:34] 정말 눈에 띄었어요. 왜냐하면 얼마나
[15:36] 많은 횟수를 제가 '작동하지 않는다'고 말했는지
[15:39] 생각해보니까요.
[15:40] 제가 '작동하지 않는다'라고 몇 번이나 말했나요?
[15:43] 네, 좀 더 구체적으로 말해야 해요.
[15:46] 동료에게 슬랙 메시지를 쓴다고 생각해 보세요.
[15:48] 그냥 '망가졌다'고 하지 않잖아요.
[15:49] '아, 이걸 했을 때 이런 일이 발생하지 않네요'라고 말하는 식으로요.
[15:53] 바로 그런 방식으로 AI와 대화해야 해요.
[15:56] 이제 로그가 더 추가되었네요.
[15:58] 그러면 이것만 작동하는 건가요?
[16:01] 네, 여기서 다시 작동하네요.
[16:03] 하지만 로그가 추가될 때만 작동하는 것 같아요.
[16:07] 마치 단축되는 것 같아요. 알겠어요.
[16:09] 하지만 전혀 완벽하지 않은 게 보이시죠.
[16:11] 잘못된 게 꽤 많아요.
[16:14] 제가 미친 건가요?
[16:16] 더 작은 뷰포트에서만 작동하는 것 같아요.
[16:18] 작은 뷰포트에서만 작동하는 것 같아요.
[16:22] 브레이크포인트군요.
[16:25] 브레이크포인트예요. 네.
[16:25] 좋아요. 이걸 선택하면 이제 작동하네요.
[16:27] 이제 작동하지 않고요.
[16:30] 그럼 분명히 브레이크포인트 문제네요.
[16:32] 보이지 않는 것 같아요.
[16:34] 아, 누군가 보고 있을 때는 맞춤법을 틀리게 되네요.
[16:38] Super Whisper를 사용해 보신 적 있나요?
[16:40] Super Whisper가 뭔가요?
[16:42] 프롬프트를 음성으로 입력하는 건 어떤가요?
[16:44] 음성으로요?
[16:46] 음성으로요.
[16:47] 오랫동안 반대했었는데
[16:49] 이제는 더 이상 타이핑하지 않아요.
[16:53] 그냥 옵션 스페이스바를 누르고 말하면
[16:55] 엔터를 누르면 되죠.
[16:58] 정말요? 정말요?
[17:00] 손가락을 많이 사용하지 않아요.
[17:02] 꽤 좋아요.
[17:04] 그러면 타이핑하는 법을 까먹을 것 같아요.
[17:06] 그게 진짜 문제죠.
[17:07] 좋아요. 이건 좀 망가진 것 같네요.
[17:09] 아, 있어요. 그냥 옆으로 밀려나 있네요.
[17:11] 오, 진짜로 움직였네요.
[17:14] 네, 하지만 좋아요.
[17:14] 이 변경사항들을 다 지우겠어요.
[17:16] 스태시하겠어요.
[17:19] 하지만 말씀드렸듯이 이전에 정확히 같은 워크플로우를 했을 때
[17:20] 원했던 결과를 얻었어요.
[17:23] 약간의 패딩 조정이 필요했지만 말이죠.
[17:27] 그래서 이전에 Figma MCP 서버와 레이아웃 작업에서
[17:30] 꽤 많은 성공을 거두었어요.
[17:33] 이런 자동 레이아웃 블록이 있고
[17:35] 잘 구성되어 있으면 바로 작동해요.
[17:37] 레이어 이름을 짓고
[17:39] 모든 것을 깔끔하게 정리하는 것이 다시 중요해졌어요.
[17:43] AI가 이해하기 쉬울 때 더 잘 작동하거든요.
[17:46] 맞아요. 여기서는 변수를 사용하지 않았어서
[17:49] 무작위 값들을 넣었죠.
[17:51] 이제 실제 값들을 사용해야 한다는 걸 기억해야 해요.
[17:53] 아시죠. 음
[17:56] 디자이너로서 제 시대가 왔네요.
[17:58] 정확히 맞아요.
[18:02] 드디어요. 드디어 깔끔하게 정리하는 것에 대해
[18:04] 놀림받지 않아도 되고
[18:06] 실제로 중요한 일이 되었어요.
[18:09] 하지만 짜증나는 것은
[18:10] 바이브 코딩이 레이어 이름을 짓고
[18:13] 모든 것을 깔끔하게 정리하는 것과는
[18:13] 다른 미래를 약속했는데
[18:15] 여전히 매우 도움이 된다는 것이 밝혀졌어요.
[18:18] 좋아해요. 사실 몰래 너무 행복해요.
[18:20] 오늘의 증거와는 반대로
[18:22] 실제로 꽤 잘 작동해요.
[18:25] 이 워크플로우가요.
[18:27] 그럼 지금 Figma MCP를 얼마나 사용하고 계세요?
[18:29] 아직 실험 단계인가요?
[18:31] 아니면 실제로 이것이 제가 작업하는 방식으로
[18:34] 스며들었나요?
[18:36] 이런 식으로 하는 것이
[18:38] 실제로 제가 작업하는 방식인가요?
[18:39] 그럼 지금 Figma MCP를 얼마나 사용하고 계세요?
[18:42] 아직 실험 단계인가요?
[18:44] 아니면 실제로 이것이 제가 작업하는 방식으로
[18:46] 스며들었나요?
[18:49] Cursor Claude로 뭔가를 만드는 방법이 되었나요? 이제
[18:52] 이건 아직 저에게는 매우 실험적인 단계입니다.
[18:54] 하지만 Adam Wan, Tailwind의 창립자가
[18:57] 지난 주에 실험을 했어요. 그가
[19:00] 코드를 전혀 작성하지 않고
[19:02] 완전히 컴포넌트를 구축하고 싶어했고
[19:05] MCP Figma MCP 서버를
[19:07] Claude에 연결해서 해냈어요
[19:11] 그냥 무차별적으로 접근했죠
[19:14] 잘못될 때마다
[19:16] "아니야, 이거 확인해" 하면서
[19:18] 모든 힘든 작업을 해냈어요
[19:21] 그런 접근 방식은 저에게는 맞지 않을 것 같아요
[19:25] 스타일링 작업은, 아시다시피
[19:28] 세부사항을 많이 넣는 것이
[19:30] 제가 좋아하는 코딩 부분이거든요
[19:32] 그래서 그 부분을 제가 대신 해주는 건
[19:34] 원하지 않아요. 제가 지루하다고 생각하는
[19:38] 쓸데없는 일을
[19:39] 대신 해주길 원하는 거지
[19:41] 제가 즐기는 일을 뺏어가는 건 아니에요
[19:44] 네, 그게 맞는 것 같아요
[19:46] 게다가 border radius를 바꾸고
[19:48] 기다리는 데 시간이 많이 걸리고
[19:49] 그냥 스피너만 기다리게 되는데
[19:51] 어떻게 찾아서 바꾸는지 알면
[19:52] 그냥 4를 3으로 바꾸면 되는 거니까
[19:55] 그런 거죠
[19:56] 네
[19:56] 훨씬 빠르죠
[19:58] 그리고 여전히 중요한 점은
[20:00] 생성된 코드를 읽을 수 있다는 거예요
[20:03] 여전히 장점이죠? 뭘 하는지
[20:06] 이해할 수 있다는 것은
[20:08] 항상 매우 도움이 될 거예요
[20:11] 이상하게도 이 파일을
[20:14] text selection feature라고 명명했는데
[20:16] 왜 그런 이름을 지었을까요?
[20:20] 네, 그래서 그냥 이걸 훑어보고
[20:23] 여기 있는 Tailwind 코드를
[20:25] 바꿀 수 있어요. 제가 가지고 놀았던
[20:27] 점진적 블러의 양을
[20:29] 조정하는 거 같은 코드는
[20:32] 항상 제가 직접 작성하고 싶어해요
[20:34] 그런 걸 넘기고 싶지 않아요
[20:36] 정말 놀라워 보이네요
[20:38] 고맙습니다. 저희가 만든 버전 말고요
[20:40] 네
[20:44] 저는 이미 몇 가지 메모를 했는데
[20:46] 이번에서 얻은 주요 노트는
[20:47] Dan이 어떻게 디버깅하는지에 대한 것이고
[20:50] 그게 지금 세상에서 가장 중요한
[20:53] 것 중 하나라고 생각해요
[20:54] 좋은 실제 데모였어요
[20:56] 만약 한 번에 성공했다면
[20:58] 많은 사람들이 직접 따라하려고 할 때
[20:59] 꽤 실망했을 거예요
[21:01] 네, 확실히
[21:03] 그런 게 아니에요. 좋긴 하지만
[21:05] 좋아지려면 많은 세밀한 조정이
[21:08] 필요해요. 확실히
[21:10] 네, 그래도
[21:11] 뭔가를 만들어냈다는 사실이 중요하고
[21:12] 지금 우리가 사는 시대에는
[21:16] 대부분의 사람들이 당신의
[21:18] 프론트엔드 능력이나
[21:20] 기술적 지식을 가지고 있지 않아서
[21:23] 당신이 그냥 승인하고
[21:26] 좋은 프롬프트를 여기저기 주는 걸
[21:30] 보면서 뭔가를 만들어내는 걸 볼 수 있어서
[21:33] 괜찮다고 생각해요
[21:36] 코드 에디터가 좀
[21:37] 무서울 수도 있지만 그렇게
[21:40] 어렵지는 않았어요. 아니, 아주 어렵지는 않았어요
[21:43] 그리고 거의 치트 같은
[21:46] 몇 가지 방법도 있어요. 만약
[21:47] 당신이 감탄하는 오픈소스
[21:49] 코드베이스가 있다면 거기에
[21:52] 가리킬 수 있어요. 그냥 실제
[21:54] GitHub 링크를 가져와서
[21:57] "이 사이트가 좋아요. 이들이 만든
[21:59] 아키텍처 선택이 좋아요
[22:01] 이해하지 못해도요. 이 레포를 기반으로
[22:04] 제 사이트를 어떻게 개선할 수 있는지
[22:06] 알려주세요"라고 하면 그냥 그 레포를
[22:09] 읽어줄 거예요. GitHub CLI도
[22:12] 연결할 수 있어요. 그 컨텍스트를
[22:14] 가져와서 그에 맞게 코드 작성 방식을
[22:17] 바꾸는 명령어들을 알아낼 거예요
[22:20] 흥미롭네요
[22:21] 할 수 있는 이상한 일들이 많아요
[22:22] 그냥 뭐든 할 수 있어요. 정말 놀라워요
[22:25] 그런 생각도 못 해봤어요
[22:26] 완전히 말이 되네요
[22:28] 네, 새로운 기능에서 실수가 있을 때
[22:30] 그냥 새 문서 페이지를 가리키고
[22:31] "이거 읽어봐. 이제 달라졌어"라고 하면
[22:34] 정말 읽어요
[22:36] 그거 정말 좋네요
[22:41] 음
[22:43] Dan, 나와주셔서 감사하고
[22:46] 저희와 함께 실험해주시고
[22:48] 이런 도구들을 어떻게 사용하는지
[22:49] 보여주셔서 정말 감사합니다
[22:52] 적어도 저에게는 이제 좀 더
[22:53] 접근하기 쉬워진 것 같아요
[22:55] 시간 내주셔서 정말 감사합니다
[22:58] [음악]