Transcript
00:00:00좋은 디자인은 정말 중요합니다. 고객을 유치할 때 사이트의 시각적인 모습이 가장 먼저
00:00:05평가받는 부분이기 때문이죠. 이를 도와주는 도구는 많지만, 그중에서도 Claude Design은
00:00:09현재 가장 강력한 도구 중 하나입니다. 하지만 좋은 디자인은 단순히 도구에 프롬프트를 입력한다고 해서
00:00:14만들어지지 않습니다. 따라서 이번 영상에서는 여러분이 직접 Claude Design으로 실행할 수 있는
00:00:185단계 프로세스를 살펴볼 것입니다. Claude Design을 한 번도 열어본 적이 없든,
00:00:22몇 달 동안 사용해 왔든 간에 이 영상에는 여러분을 위한 내용이 담겨 있습니다. 한 번도 사용해 본 적이
00:00:27없더라도 이 도구가 무엇인지부터 시작하므로 걱정하지 마세요. 그리고 이미 이 도구로 디자인을 해오셨다면,
00:00:32Claude Design을 Claude Code와 연동하여 훨씬 더 강력하게 만드는 방법을 다룰 것입니다. 아래 타임스탬프를 이용해 원하는 위치로 바로 이동해 보세요.
00:00:37저희 채널에 처음 오셨다면 환영합니다. 사실 저희는 소프트웨어 회사이며,
00:00:41내부 프로세스를 기반으로 Claude Design을 활용한 전체 시스템을 구축했습니다. 더 지체할 것 없이,
00:00:47바로 본론으로 들어가겠습니다. 이 섹션은 Claude Design이 무엇인지 모르는 분들을 위한 것입니다. 이미 알고 계시다면
00:00:52다음 섹션으로 건너뛰셔도 됩니다. 이 기능은 Claude가 Opus 4.7 모델을 출시했을 때
00:00:57연구 미리보기(Research Preview)로 처음 공개되었습니다. 기본적으로 사용하기 매우 쉬운 인터페이스를 갖춘 디자인 도구로,
00:01:02개발자가 아닌 사람을 포함해 누구나 간단한 프롬프트만으로 훌륭한 디자인을 만들 수 있게 해줍니다.
00:01:07또한 모든 유료 플랜에서 이용할 수 있습니다. 웹사이트에만 국한되지 않고,
00:01:12슬라이드, 문서 디자인은 물론 애니메이션까지 제작할 수 있습니다. 그리고 Claude Design은
00:01:17Claude 데스크톱 앱과 웹사이트 모두에서 사용할 수 있으므로 반드시 데스크톱 앱을 설치할 필요는 없습니다.
00:01:22앱에서 사용하고 싶다면 다운로드하여 설치를 실행하고 계정에 로그인하기만 하면 됩니다.
00:01:27그런 다음 사이드바를 열고 디자인을 클릭하면 인터페이스가 열려 바로 사용할 수 있습니다.
00:01:32Claude Design에서는 가장 뛰어난 모델인 Fable을 포함한 모든 Claude 모델을 선택할 수 있지만,
00:01:37제한된 액세스만 제공됩니다. 일반 용도의 주력 모델은 여전히 Opus이며,
00:01:42여전히 디자인에 가장 적합합니다. 하지만 이러한 Opus 모델의 문제는 토큰을 매우 많이 소모한다는 점입니다.
00:01:46반면 Haiku는 토큰을 거의 사용하지 않지만, 좋은 디자인을 얻기 위해 더 많은 수정이 필요할 수 있습니다.
00:01:51게다가 각 모델마다 노력 수준(Effort Level)을 설정할 수도 있습니다.
00:01:55노력 수준은 기본적으로 모델이 작업을 수행하기 전에 얼마나 깊이 고민할지를 제어합니다. 저희는
00:02:01현재 최신 모델인 Opus 5를 중간 노력 수준으로 설정하여 디자인 작업에 사용하고 있습니다. 토큰을 너무 많이 낭비하지 않으면서도
00:02:06쉽게 디자인할 수 있기 때문입니다. 또한 모든 MCP와 스킬을 가져올 수 있어,
00:02:12내 시스템을 그 안에서 훨씬 쉽게 활용할 수 있습니다. 모르는 분들을 위해 설명하자면, MCP는 기본적으로
00:02:18에이전트가 다른 도구 및 서비스와 같은 외부 요소와 연결할 수 있게 해주는 기능이며, 스킬은
00:02:23에이전트가 단계별 지침과 참고 자료를 따르며 더 나은 방식으로 작업을 수행하는 법을 가르쳐주는 일련의 지침 세트입니다.
00:02:28따라서 시작하기 전에 한 가지 명심해야 할 점이 있습니다. 디자인을 생성할 수 있는 횟수에는
00:02:33Claude Design은 5시간 제한으로 실행되는데, 이는 디자인만을 위한 것이 아닙니다. Claude에서 수행하는
00:02:38모든 작업이 동일한 한도에 포함됩니다. 해당 5시간 창 내에서 사용할 수 있는 토큰 수에 상한선이 있으며,
00:02:44한도가 소모되면 다시 사용하기 위해 5시간이 지나기를 기다려야 합니다.
00:02:49처음 출시되었을 때보다 훨씬 좋아졌음에도 불구하고, Claude Design은 여전히
00:02:53토큰을 매우 많이 소모하므로 헤비하게 사용하신다면 한도가 더 빨리 소진될 것으로 예상하셔야 합니다. 따라서
00:02:59대량의 토큰 소모에 대응하기 위해, 곧바로 프롬프트를 입력하기 전에 몇 가지 단계를 거쳐야 합니다.
00:03:04이 단계들이 중요한 이유는 토큰을 많이 낭비하지 않고도 원하는 디자인을 얻을 수 있도록 보장해 주기 때문입니다.
00:03:09가장 먼저 해야 할 일은 design.md 파일을 만드는 것입니다. 이 형식은
00:03:15Google이 시작한 것으로, 브랜드 디자인의 모든 세부 정보를 담고 있습니다. AI 코딩 에이전트는 무언가를 작성하기 전에 이 파일을 읽기 때문에,
00:03:20제공하는 모든 화면이 브랜드 정체성에 부합하게 나옵니다. 추측할 필요가 전혀 없으므로
00:03:25브랜드 아이덴티티를 벗어나지 않습니다. 이제 Claude Design에는 디자인 시스템을 생성할 수 있는 기능이 있습니다.
00:03:30디자인 시스템은 기본적으로 사이트 전체에 걸쳐 나타나는 스타일 선택 사항들의 집합입니다. 글꼴,
00:03:35색상, 그리고 디자인을 구성하는 기타 모든 세부 정보를 포함하며, 이를 활용하여 더 많은 디자인을 빌드할 수 있게 해줍니다.
00:03:40따라서 디자인 시스템을 사용하여 구축된 모든 디자인은 동일한 스타일을 따르며 동일한 사이트의 일부처럼 보이게 됩니다.
00:03:46하지만 사전에 정의된 design.md 파일로 시작해야 하는 가장 큰 이유는 모든 모델이
00:03:51동일해 보이는 디자인을 출력하기 때문입니다. Claude Design이 독자적으로 디자인 시스템을 구축하도록 내버려 두면,
00:03:57Opus 모델들이 어디서나 사용하는 일반적인 색상과 스타일로 돌아가 버립니다.
00:04:02그로 인해 여러분의 사이트는 시중에 나와 있는 다른 모든 AI 제작 사이트와 똑같아 보이게 됩니다. 하지만
00:04:07디자인 시스템의 기반이 될 design.md를 제공한다면, 그 파일이 원하는 바를 정확히 지시하므로 훨씬 더 통제력이 높아지고
00:04:12기본값으로 회귀하지 않습니다. 그리고 이미 언급했듯이 또 다른 이유는 일관성입니다.
00:04:17전체 디자인 시스템이 그 단 하나의 파일을 기반으로 하므로 모든 페이지가 정확히 동일한 스타일을 따르며, 이것이 다중 페이지 사이트의 일관성을 유지해 주는 비결입니다.
00:04:22그래서 이를 위해 design.md를 계획해 주는 스킬을 만들었습니다. 이 스킬을 사용하려면 Claude Code 안에서 실행하면 됩니다.
00:04:27그리고 Claude Code는 기본적으로 Anthropic의 또 다른 도구입니다. 터미널에서 실행할 수 있는 AI 코딩 도구로서
00:04:33전체 앱을 구축할 수 있습니다. 설치하려면 공식 사이트로 이동하여 설치 명령어를 복사한 후
00:04:39터미널에서 해당 명령어를 실행하면 됩니다. 완료되면 터미널에 claude를 입력하고,
00:04:45프롬프트를 입력하여 사용을 시작할 수 있습니다. Claude Code에서 앱을 빌드할 예정이므로,
00:04:49.claude 폴더 내부의 skills 폴더에 이 스킬을 넣었습니다.
00:04:54이 폴더는 기본적으로 Claude Code의 모든 설정과 구성이 저장되는 곳입니다. 이 폴더가 없을 수도 있지만,
00:04:59프롬프트 상자에 프로젝트에 스킬을 설치해야 한다고 Claude Code에 말하기만 하면 알아서 설정하고
00:05:05스킬까지 직접 배치해 줍니다. .claude 폴더는 Finder에서 열었을 때 보이지 않을 것입니다.
00:05:10이름이 점으로 시작하기 때문인데, 점으로 시작하는 파일은 시스템 파일로 취급되므로 Finder가 기본적으로 숨기기 때문입니다.
00:05:15따라서 그곳에 들어가려면 코드 편집기가 필요합니다. 코드 편집기는 기본적으로
00:05:20모든 프로젝트 파일을 정리된 한 곳에서 볼 수 있게 해주는 앱입니다. 우리가 사용하는 것은
00:05:25Microsoft의 VS Code이며, 작업하기가 너무 쉽기 때문에 대부분의 빌더들이 사용하는 편집기입니다.
00:05:31설치하려면 공식 사이트로 이동하여 사용 중인 시스템에 맞는 설치 프로그램을 다운로드하고
00:05:36설치를 실행하면 됩니다. 그런 다음 그 안에 프로젝트 폴더를 열면 숨김 파일을 포함한
00:05:40모든 것을 볼 수 있게 됩니다. 그 후 앱을 빌드하고 싶을 때마다
00:05:45슬래시 명령어와 함께 이 스킬을 호출하면 됩니다. 슬래시 명령어는 슬래시와 함께 입력하여
00:05:49트리거하고 빌드하고 싶은 내용을 프롬프트로 전달하는 단축키입니다. 이 스킬은 여러분을 인터뷰하고
00:05:54제품의 시각적 아이덴티티를 상세하게 계획해 줍니다. 모든 것이 완료되면
00:05:59전체 design.md를 작성하고, 스크립트를 실행하여 Google 표준에 부합하는지 검증합니다.
00:06:03이 스킬에는 또한 AI가 만든 사이트라는 티가 나게 만드는 흔한 패턴들을 방지하기 위한 안티 슬롭(anti-slop) 참고 자료도 포함되어 있습니다.
00:06:09따라서 design.md를 먼저 기획하는 것이 진정 최고의 선택입니다. 또한 이 스킬을 어디서 구해야 할지 궁금하시다면
00:06:15걱정하지 마세요. 영상 후반부에 알려드리겠습니다. 자, 이번 영상에서 구축할 앱은
00:06:21모든 코딩 프로젝트를 한곳에서 관리할 수 있는 프로젝트 관리 앱입니다. 시작하려면 먼저
00:06:26스킬의 슬래시 명령어와 함께 빌드하고 싶은 앱에 대해 대략적인 내용과 용도를 Claude Code에 프롬프트로 입력합니다.
00:06:31그러면 아이디어의 시각적 아이덴티티를 분석하는 것으로 시작합니다. 분석이 끝나면
00:06:36웹사이트에 염두에 두고 있는 색상이 있는지 등 질문을 던지기 시작합니다.
00:06:41브랜드 색상을 이미 결정했다면 그것을 전달하거나, 스스로 선택하도록 내버려 둘 수 있습니다.
00:06:46스킬을 사용하고 있기 때문에 조잡한 슬롭 색상으로 기본 설정되지 않으므로
00:06:51그런 뻔한 디자인에 대해 걱정할 필요는 없지만, 그래도 미리 결정해 두는 편이 더 좋습니다.
00:06:55저희가 주로 하는 방식은 색상 팔레트를 생성하고 시각화해 주는 사이트인 coolers를 사용하는 것입니다.
00:07:00이를 통해 색상들이 서로 어우러지는 모습을 확인할 수 있습니다. 마음에 드는 색상 조합을 찾으면
00:07:05내보내기(export)를 클릭한 다음 코드 옵션을 선택하면, Claude Code에 복사하여 붙여넣을 수 있는
00:07:09텍스트를 제공해 줍니다. Claude Code는 이 텍스트를
00:07:14design.md 파일 안에 넣어줍니다. 그 후 design.md 파일을 생성하고
00:07:18몇 가지 검증 단계를 거칩니다. 그러면 디자인 파일이 Google이 설계한 형식 그대로 정확하게 나옵니다.
00:07:24이제 그 Google 형식은 AI 모델이 이해하기는 쉽지만, 여러분이 이 파일로부터 생성될 디자인을
00:07:29실제로 머릿속으로 그리기는 어렵습니다. 따라서 이것이 최종 확정하고 싶은 디자인인지, 아니면 변경이 필요한지 알 수가 없습니다.
00:07:33하지만 Claude Design 안에서 테스트하지 마세요. 거기서 디자인을 생성했는데
00:07:38마음에 들지 않는다고 가정해 봅시다. 이제 design.md로 다시 돌아가서
00:07:43수정한 후 모든 것을 다시 생성해야 합니다. 그 과정 하나하나가 모두 토큰 비용으로 이어집니다.
00:07:48design.md를 시각화해 주는 도구들이 많이 있으며, 저희가 사용한 것은 design.md.space입니다.
00:07:53이러한 도구들은 디자인 파일의 모습과 다양한 영역에 선택된 색상들이 어떻게 어우러지는지 보여줍니다.
00:07:59모든 요소도 시각화해 주기 때문에 결정 내리기가 훨씬 수월해집니다. 자, 이것은
00:08:04design.md를 만드는 한 가지 방법일 뿐이며 다른 방법도 있습니다. 직접 만들고 싶지 않다면,
00:08:10인기 웹사이트의 디자인을 샘플로 복사해 올 수도 있습니다. 솔직히 말해서 레퍼런스로 하나를 복사해 오는 것은
00:08:15이미 많은 사람들이 하는 방식입니다. 출발점으로 삼아 가져온 뒤 변경을 거쳐
00:08:19나만의 것으로 만드는 것이죠. 마치 많은 사람들이 Notion의 심플한 룩을 가져다가
00:08:24약간의 수정을 거쳐 자신만의 디자인으로 완성한 것과 같습니다.
00:08:29이를 위해 많은 브랜드와 그들의 스타일을 design.md 파일 형태로 나열해 두어 직접 가져다 쓸 수 있게 해주는 getdesign.md라는 사이트가 있습니다.
00:08:34많은 브랜드와 그 스타일을 design.md 파일 형식으로 정리해 두어 직접 가져다 쓸 수 있는 getdesign.md라는 사이트가 있습니다.
00:08:39이미 우리만의 design.md가 있으니, 이제 Claude Design으로 넘어가서 이를 바탕으로 새로운 디자인 시스템을 만들 수 있습니다.
00:08:44새로운 시스템을 만들 때 제품 세부 정보를 묻는 창이 나오는데, design.md가 있으므로 그 파일을 에셋으로 업로드하기만 하면 됩니다.
00:08:49그러면 파일을 읽어 들여 할 일을 생성하고 하나씩 처리해가며 새로운 시스템을 생성하기 시작합니다.
00:08:55잠시 기다리면 Claude Design이 디자인 시스템을 만들고 모든 것을 시각화하여 보여줍니다.
00:09:00앱에 사용될 다양한 요소들도 함께 구축해 주죠.
00:09:06이 워크플로우를 따라 하려면 이 스킬이 필요합니다.
00:09:10GitHub에 올려두었고 설명란에 링크를 남겨두었으니 무료로 다운로드하실 수 있습니다.
00:09:14사용법은 간단합니다. Claude Code에 이 링크를 주고 설정해달라고 요청하면, 알아서 설치하여 .claude 폴더에 넣어줍니다.
00:09:19사용자가 직접 할 일은 전혀 없습니다. 디자인 시스템이 확정되고 실제로 사용할 시점이 되면,
00:09:24사이트를 본격적으로 구축하기 전에 거쳐야 할 아주 중요한 단계가 하나 더 있습니다.
00:09:29바로 만들고자 하는 화면의 와이어프레임을 제작하는 것입니다.
00:09:34와이어프레임은 기본적으로 모든 요소가 어디에 배치되는지, 그리고 적절한 위치에 있는지 대략적으로 눈으로 확인 할 수 있는 스케치입니다.
00:09:39곧바로 사이트 구축을 시작할 수도 있지만, 그렇게 하면 문제가 발생합니다.
00:09:43Claude Design이 디자인을 만드는 데 시간이 꽤 걸리기 때문에 오래 기다려야 하고, 그렇게 완성된 디자인이 마음에 들지 않으면 처음부터 다시 해야 하니까요.
00:09:48따라서 Claude Design에서 방금 만든 디자인 시스템을 선택하고, 와이어프레임 옵션을 선택한 뒤,
00:09:53원하는 화면 개수 등의 세부 정보를 프롬프트로 입력하면 됩니다.
00:09:58그 후 각 화면별로 여러 옵션을 생성할 수 있어 클로드가 몇 가지
00:10:03생성하는 데 오랜 시간이 걸리지 않으므로, 구조를 살펴보고 동일한 페이지에 대해 만들어진 모든 변형을 검토할 수 있습니다.
00:10:08또한 댓글 기능도 있어서 무언가 하나를 수정하고 싶다면 거기에 댓글을 남기기만 하면 됩니다.
00:10:12댓글을 남기면 해당 요소의 정확한 세부 정보가 프롬프트와 함께 전달되므로,
00:10:18Claude가 어떤 영역을 어떻게 수정해야 하는지 정확히 알 수 있습니다.
00:10:23따라서 사용자가 직접 프롬프트로 어느 영역을 뜻하는지 설명하는 것보다 훨씬 효율적입니다.
00:10:28댓글 기능을 선택하고 변경하고 싶은 정확한 부분을 클릭한 뒤 필요한 수정 사항을 입력하기만 하면 됩니다.
00:10:33댓글은 필요한 만큼 여러 개 추가할 수 있습니다.
00:10:38하나씩 따로 보내는 것보다는 한꺼번에 모아서 보내는 편이 좋습니다. 그러면 한 번에 처리하여 모든 것을 한 번에 수정해 주니까요.
00:10:42그렇게 하면 대기 시간을 최소화할 수 있습니다. 구조가 마음에 들 때까지 계속 수정하다가 완료되면 다음 단계로 넘어가면 됩니다.
00:10:48영상 내용이 유익했다면 채널 구독과 좋아요 버튼을 눌러주세요.
00:10:52여러분의 작은 지원이 저희에게 큰 힘이 됩니다.
00:10:57와이어프레임 디자인이 끝나면, 이제 실제 디자인을 만들 차례입니다.
00:11:03디자인 툴을 사용해 몇 가지 변형을 만들어 볼 수도 있습니다.
00:11:06보통 동일한 디자인에 대해 여러 변형을 만들어 달라고 요청하기 때문에, 먼저 방금 만든 것 중에서 어떤 변형을 사용할지 선택해야 합니다.
00:11:10각 페이지는 고유 코드로 식별되므로 해당 코드로 선택하면 됩니다.
00:11:15그다음, 이 화면들을 실제 세부 디자인으로 변환해 달라는 프롬프트를 입력합니다.
00:11:20깔끔한 간격과 계층 구조를 유지하면서 와이어프레임의 레이아웃과 구조를 그대로 살려달라고 지시하죠.
00:11:26그러면 Claude Design은 디자인 시스템을 구축하는 동안 만들어졌던 모든 요소를 읽어들입니다.
00:11:31그리고 이를 활용하여 디자인 시스템과 와이어프레임에 정확히 부합하는 멋진 사이트를 완성해 줍니다.
00:11:36와이어프레임에서처럼 여기서도 댓글을 달아 수정할 수 있습니다.
00:11:41버튼 색상을 제대로 고르지 못하는 경우가 많아서 수정이 꽤 필요할 겁니다.
00:11:46일부 버튼은 눈에 띄어야 하므로 굵고 선명한 색상으로 눈길을 사로잡아야 하니, 그런 부분들을 수정해 달라고 요청할 수 있습니다.
00:11:50또한 와이어프레임을 바탕으로 구축되기 때문에, 대략적인 스케치 위에 기본 부품들만 얹어진 상태로 사이트가 다소 밋밋하게 나올 수 있습니다.
00:11:55이럴 때는 질감이나 요소들을 더 추가해서 더 풍성한 느낌을 내달라고 요청하면 됩니다.
00:12:00디자인 화면에서 직접 수정 사항을 적용할 수도 있으므로, 특정 요소를 삭제하는 등의 사소한 변경 사항은 Claude에게 프롬프트를 보내지 않고도 직접 처리할 수 있습니다.
00:12:05그렇게 하면 기다릴 필요 없이 변경 사항이 바로 적용됩니다.
00:12:10그깟 사소한 일 때문에 토큰을 낭비하지 않아도 되죠.
00:12:15모든 수정이 끝나면 Claude Design에 전체적인 완성도를 높여달라고 요청할 수 있습니다.
00:12:20그러면 디자인에 미묘하지만 의미 있는 변화를 주어 세련되게 다듬어 줍니다.
00:12:25이렇게 앱의 첫 번째 버전이 완성되었지만, 아직 빠진 것이 하나 있습니다. 바로 애니메이션입니다.
00:12:29애니메이션은 사이트 사용감을 높여주고 사용자의 시선을 정말 중요한 곳으로 유도하기 때문에 매우 중요합니다.
00:12:35스크롤할 때 화면에 나타나는 효과나 기타 소소한 디테일들이 사이트를 훨씬 더 생동감 있게 만들어 줍니다.
00:12:40그래서 우리는 Claude Design에 모든 화면에 걸쳐 스크롤 시 나타나는 효과나 생동감을 더해주는 소소한 디테일 등의 애니메이션을 추가해 달라고 프롬프트를 넣었습니다.
00:12:45너무 튀면 어색할 수 있으니 지나치게 통통 튀지 않고 은은하게 만들어 달라고 지시했죠.
00:12:50Claude Design의 작업이 끝나자, 스크롤 진입 효과와 텍스트 팝업 애니메이션 덕분에 사이트 전체가 훨씬 더 상호작용하기 좋게 바뀐 것을 볼 수 있었습니다.
00:12:55디자인이 마음에 들면 다음 단계인 핸드오프로 넘어갈 수 있습니다.
00:13:00이제 Claude Design에서의 디자인 작업은 마무리되었고, 이를 최종적으로 전달할 실제 제품으로 구현하여 생명을 불어넣을 차례입니다.
00:13:05예전에는 Claude Design에 이런 기능이 없었지만, 이제는 디자인을 Claude Code로 직접 내보낼 수 있습니다.
00:13:10여기에는 Claude Design MCP가 사용되는데, 이는 기본적으로 Claude Design과 Claude Code가 서로 소통할 수 있게 해주는 기능입니다.
00:13:15단방향이 아니라 양방향으로 작동하죠.
00:13:21따라서 Claude Design에서 만든 디자인을 Claude Code로 옮길 수도 있고, 반대로 똑같이 가져올 수도 있습니다.
00:13:26Claude Code를 다시 열고 Claude Design에서 얻은 이 프롬프트를 붙여넣습니다.
00:13:31먼저 디자인에 대한 요약 정보인 메타데이터를 읽은 다음 프로젝트 파일 목록을 나열합니다.
00:13:36디자인이 정의되어 있는 디자인 시스템을 가장 먼저 읽고, 그 후 요소들을 하나씩 읽어 들입니다.
00:13:42전체 디자인을 파악하고 나면, Claude Design에 있던 모든 애니메이션을 포함하여 프로젝트 내에 그대로 구축해 줍니다.
00:13:47하지만 이 변환 과정이 제대로 이루어졌는지 확실히 확인해 볼 필요가 있었습니다.
00:13:52시각적으로는 모든 것이 좋아 보였지만, Claude Design의 원본 코드가 실제 앱으로 변환될 때 내부적인 문제가 여전히 발생할 수 있기 때문입니다.
00:13:57그래서 심층 검토를 요청했고, 실제 구현된 결과물과 design.md가 일치하는지 상호 대조하기 시작했습니다.
00:14:02이 검토 과정에서 반응형 문제 등 여러 이슈가 발견되었습니다.
00:14:08즉, 모바일이나 태블릿 같은 다양한 화면 크기에서 앱이 올바르게 보이지 않는 문제였죠.
00:14:12Claude Design으로 만든 결과물은 아직 초기 버전이라 이런 경향이 좀 있습니다.
00:14:17따라서 무엇을 디자인하든 원래 만들어진 목적에 딱 맞는 환경에서 가장 잘 작동합니다.
00:14:22웹사이트용으로 만든 디자인은 웹에서는 멋지게 보이지만 다른 화면 크기에서는 항상 그렇지는 않기 때문에, 수정 작업을 거쳤고 그제야 앱의 시각적인 부분이 반응형으로 정상 작동했습니다.
00:14:27이제 이 앱을 실제로 완성하고 작동하게 만들기 위해서는 데이터베이스라는 것에 연결해야 합니다.
00:14:32현재 직면한 문제는 앱이 완전히 작동하고 버튼을 클릭하면 새 프로젝트에 세부 정보가 추가되기는 하지만,
00:14:36앱을 다시 켜면 앱에서 진행했던 모든 내용이 사라진다는 점입니다.
00:14:41이래서 모든 데이터가 앱 내부에 저장되어 사람들이 실제로 유용하게 쓸 수 있도록 데이터베이스가 필요한 것입니다.
00:14:46그래서 우리는 Supabase를 사용했습니다.
00:14:51현재 가장 인기 있는 백엔드 제공업체 중 하나이자, 사용자 및 모든 데이터를 관리하는 가장 좋은 방법 중 하나죠.
00:14:57Supabase는 우리에게 낯선 이름이 아닙니다.
00:15:02누구를 위해 만들든 거의 모든 앱에 사용하고 있으며, 심지어 내부 도구 중 상당수도 전체 시스템을 Supabase 위에서 돌리고 있습니다.
00:15:08그 이유는 우리가 직접 해야 했을 많은 번거로운 작업들을 덜어주기 때문입니다.
00:15:12또한 Claude Code 같은 AI 에이전트와 연동하기가 너무 쉽기 때문에 가장 널리 사용되는 데이터베이스 중 하나이기도 합니다.
00:15:17Supabase에는 에이전트 스킬도 있어서, 에이전트가 Supabase를 더 안정적으로 다루는 데 필요한 지침, 스크립트, 리소스가 포함되어 있습니다.
00:15:22이렇게 하면 에이전트가 Supabase의 툴을 최대한 활용하는 데 필요한 모든 것을 알 수 있게 됩니다.
00:15:28설치하려면 설치 명령어를 복사해서 에이전트에게 전달하기만 하면 되며, 해당 번들 안에는 두 가지 스킬이 들어 있습니다.
00:15:33하나는 사용법 가이드인 Supabase 스킬이고, 다른 하나는 앱 성능을 최적화하는 가장 좋은 방법들이 담긴 모범 사례 스킬입니다.
00:15:39설일이 끝나면 프로젝트에 두 가지 새로운 스킬이 모두 추가된 것을 볼 수 있습니다.
00:15:43데이터베이스나 로그인 관련 작업이 있을 때는 Supabase 스킬이 작동하고,
00:15:48애플리케이션 성능을 최적화하는 가장 좋은 방법들이 담겨 있습니다. 설치가 완료되면
00:15:53이 모든 것은 온갖 종류의 문제에 대한 방대한 레퍼런스 라이브러리를 기반으로 뒷받침됩니다.
00:15:58이러한 스킬들이 설치되면, Claude Code에 백엔드를 구축하고 기존 디자인을 연결하여 전체 앱이 실제로 작동하도록 만드는 프롬프트를 줄 수 있습니다.
00:16:04우리는 에이전트가 앱 데이터가 정리되는 구조까지 건드리기를 원치 않았기 때문에, 이미 해당 구조를 미리 직접 만들어 프로젝트의 메인 폴더에 넣어두었습니다.
00:16:08이 스킬은 단순한 지침 묶음에 불과하므로 Supabase 서버에 있는 프로젝트에 직접 닿아 변경 사항을 적용할 수는 없습니다.
00:16:13에이전트에게 무엇을 해야 할지 알려주는 텍스트일 뿐이어서, 에이전트 외부의 작업을 처리할 수 있는 도구는 따로 포함되어 있지 않습니다.
00:16:18그렇기 때문에 Supabase 스킬은 터미널에서 실행하는 도구인 CLI나 MCP 중 하나를 연결하라고 요구하는 것입니다.
00:16:22어떤 것을 선택하든 에이전트에게 Supabase 프로젝트를 직접 다룰 수 있는 도구가 주어지므로 사용자가 수동으로 할 일이 없어집니다.
00:16:27우리는 설정하기가 더 쉽고 CLI가 계정에 로그인하는 데 사용하는 키를 따로 관리할 필요가 없기 때문에 MCP를 선택했습니다.
00:16:32연결하려면 공식 사이트로 가서 사용 중인 에이전트용 설치 명령어를 복사한 다음,
00:16:36프로젝트 폴더가 열려 있는 터미널에서 실행하면 됩니다.
00:16:41그 후 Claude Code 안에서 /mcp 명령어를 실행하면 연결된 것을 볼 수 있지만, 아직 로그인이 되어 있지 않기 때문에 바로 사용할 수는 없습니다.
00:16:46인증(Authenticate)을 선택하면 브라우저로 이동해 로그인하게 되며, 그 후 MCP가 최종적으로 연결됩니다.
00:16:51MCP가 연결되면 Claude Code가 스킬을 로드하고 앱 개발에 착수합니다.
00:16:56수많은 변경 사항을 만들고 데이터베이스 요청에 대해 테스트를 실행하여 최상의 버전을 만들었는지 확인했습니다.
00:17:01또한 스킬에 담긴 지침 덕분에 모든 사용자가 접근해서는 안 되는 영역도 확실하게 차단했습니다.
00:17:05이처럼 Supabase는 스킬을 통해 전체 백엔드를 알아서 처리해 줍니다.
00:17:10이제 전체 앱이 구축되어 실제로 작동합니다.
00:17:15이제 남은 단계는 배포 단 하나뿐이며, 이는 누구나 사용할 수 있도록 온라인에 공개하는 작업입니다.
00:17:20하지만 이번 영상에서는 다루지 않을 것이니, 자세히 다룰 다음 영상들을 기대해 주세요.
00:17:25우리가 제공한 이 스킬은 사실 우리가 프로젝트에서 내부적으로 사용하는 더 큰 디자인 시스템의 일부입니다.
00:17:30이 시스템에 접근하고 싶다면 저희 커뮤니티인 AI Labs Pro에 가입하시면 됩니다.
00:17:34거기서는 영상에서 보여드렸던 다른 스킬과 리소스는 물론, 저희 팀과 소통할 수 있는 공간도 찾으실 수 있습니다.
00:17:39저희 활동이 도움이 되었고 채널을 지원하고 싶으시다면 이것이 가장 좋은 방법입니다.
00:17:44구축되어 실제로 작동합니다. 이제 마지막 단계인 배포, 즉 온라인에 공개하여
00:17:49누구나 사용할 수 있게 만드는 일만 남았습니다. 하지만 여기에서는 다루지 않을 테니,
00:17:53채널을 지원하고 이와 같은 영상을 계속 만들 수 있도록 돕고 싶으시다면 아래의 슈퍼 땡스(Super Thanks) 버튼을 이용해 주세요.
00:17:59언제나 시청해 주셔서 감사드리며, 다음 영상에서 뵙겠습니다.
00:18:04저희 커뮤니티인 AI Labs Pro에서 이용하실 수 있습니다. 이곳은 또한
00:18:08언제나 시청해 주셔서 감사드리며, 다음 영상에서 뵙겠습니다.
00:18:14언제나 시청해 주셔서 감사드리며, 다음 영상에서 뵙겠습니다.
00:18:18언제나 시청해 주셔서 감사드리며, 다음 영상에서 뵙겠습니다.
00:18:23언제나 시청해 주셔서 감사드리며, 다음 영상에서 뵙겠습니다.
00:18:28언제나 시청해 주셔서 감사드리며, 다음 영상에서 뵙겠습니다.
Community Posts
No posts yet. Be the first to write about this video!
Write about this video