Claude를 사용하여 4시간 만에 랜딩 페이지를 재구축한 방법

@DhravyaShah
영어3개월 전 · 2026년 4월 15일
1.3M
1.5K
59
111
4.2K

TL;DR

Dhravya Shah가 Claude Code, 맞춤형 SVG 애니메이션 기술, 그리고 AI 네이티브 컨텍스트 통합을 활용하여 디자인 에이전시의 지연 없이 4시간 만에 Supermemory의 랜딩 페이지를 재구축한 워크플로우를 공유합니다.

스타트업에서 가장 중요한 것은 반복 속도입니다. 저희 랜딩 페이지의 첫 번째 버전은 최고의 디자인 에이전시 중 한 곳에서 제작했습니다. 그리고 몇 달 후 다른 에이전시와 함께 다시 리빌드했습니다.

이러한 큰 변화들은 supermemory 의 여정 전반에 걸쳐 다양한 단계에서 이루어졌습니다. 제품 구성, 브랜딩 등이 계속해서 진화함에 따라, 마케팅에서 이를 어떻게 전달할지도 계속해서 반복적으로 개선해 나갔습니다.

에이전시들은 정말 훌륭한 작업을 해주었습니다! 그들은 오늘날의 supermemory 브랜드 뒤에 있는 브랜딩과 인식을 많이 만들어냈습니다. 지금까지의 모든 도움에 정말 감사하게 생각합니다.

하지만 한 가지 문제가 있었습니다.

바로 반복 속도입니다.

시대가 변했습니다. 솔직히 말해서, AI 네이티브가 아니라면 더 이상 살아남을 수 없습니다.

Dhravya Shah - inline image

피드백 루프

어느 때, 저는 에이전시에 물었습니다: 이 프로젝트의 일정이 어떻게 되나요?

며칠이나 일주일 정도를 예상했죠. 그런데 그들은 복잡한 단계별 작업 계획을 가지고 돌아왔습니다. 디자인 구상에 2주, 그 후 구현에 1주 등등.

전체 프로젝트는 몇 달이 걸릴 예정이었고, 랜딩 페이지는 Framer에 올라갈 예정이었습니다. 다른 것들(앱, 콘솔 디자인)은 그들의 디자인이 완성된 후에 우리가 직접 구현해야 했죠.

노코드의 저주

Claude Code 가 이렇게 좋아지기 전까지, 저희 랜딩 페이지는 완전히 Framer 에 있었습니다. 디자인을 한 사람들이 전적으로 유지 관리했죠. 그들의 디자인은 감각적이었고, 분명히 많은 노력과 시간이 투자되었습니다. 하지만 어떤 변경이든 Framer를 아는 사람이 필요했습니다.

이것은 진짜 저주가 되었습니다. 마케팅 페이지나 블로그 등을 추가하는 것이 고통스러웠습니다. 웹사이트는 너무 많은 자바스크립트를 로드하거나 SEO에 좋지 않거나 애니메이션이 브라우저를 완전히 느리게 만들기도 했습니다. 그리고 우리는 그냥 그들에게 개선해 달라고 요청해야만 했습니다.

그리고 우리는 정확히 어떻게 개선해야 할지 몰랐습니다. (당시 supermemory 의 모든 사람이 개발자였기 때문에) A/B 테스트를 직접 하거나, 메시지를 가장 잘 전달하는 방법을 찾거나, 카피를 개선하는 것이 어려웠습니다. 디자이너에게 비용을 지불하는 것 외에도 Framer 에 매년 수천 달러를 지불하고 있었습니다. 어떤 변경이든, 에이전트에게 간단히 지시할 수 없었습니다. 어떻게 해야 하는지 상세히 설명해야 했고, 우리에게 맞을 때까지 반복적으로 협업해야 했습니다.

나는 이 모든 것을 없애기로 결심했습니다. 그냥, 제가 직접 랜딩 페이지를 만들겠다고요.

Claude Code 로 만든 훌륭한 디자인

저는 디자이너가 아닙니다. 하지만 https://supermemory.ai 를 한번 확인해 보세요. 단 4 시간 만에 Claude Code 로 만들었습니다.

네, 맞아요. 먼저 Claude에게 사용자에게 정확히 무엇을 전달해야 하는지 묻고 카피를 구성하는 것부터 시작했습니다.

이 모든 과정은 단 한 번의 Claude Opus 4.6 1M 세션에서 이루어졌습니다.

스킬 준비하기

제 계획에 따라, Claude 가 정말 좋은 SVG 애니메이션을 만들기를 원했습니다. 인터넷에서 최고의 SVG 애니메이션 강좌들을 찾아보고, 필기한 후, 가장 좋은 내용들을 스킬로 만들었습니다. 스킬은 크지 않았지만, 기본기를 탄탄하게 하기에는 충분했습니다.

서브 에이전트가 이것을 준비했습니다. https://github.com/supermemoryai/skills/blob/main/svg-animations/SKILL.md

마찬가지로, 디자이너가 알아야 할 모든 기본적인 스킬들을 준비했습니다.

Dhravya Shah - inline image

예를 들어, 이 섹션은 전적으로 SVG 애니메이션으로 만들어졌습니다.

도구 만들기

많은 시각적 요소를 위해 저는 몇 가지 라이브러리가 필요하다는 것을 알았습니다. 특히 애니메이션 ASCII 아트와 픽셀화 효과를 위해서였죠.

그래서 두 개의 서브 에이전트를 보내 웹에서 이러한 애니메이션을 성능 좋게 구현하는 최선의 방법을 알아내게 했고, 메인 디자인 작업과 혼동되지 않도록 패키지로 만들었습니다.

Claude 는 자동으로 패키지를 만들어 제 GitHub 계정(https://github.com/dhravya/landing-effects)에 올렸고, 애니메이션이 어떻게 보일지 보여주는 GIF 까지 녹화해서 추가했습니다.

Dhravya Shah - inline image
Dhravya Shah - inline image

좋은 메모리로 루프 닫기

세션 내내, 저는 Claude 가 이것이 어떻게 보이는지 실제로 보고 생각하도록 했습니다. 또한 Supermemory Claude code 플러그인을 사용하고 있었기 때문에, Claude 는 모든 비즈니스 요구사항, 우리 팀이 중요하게 생각하는 것, 사용자들이 요청하는 것들을 알고 있었습니다.

우리는 모든 고객 녹화와 팀 회의를 자체 팀 supermemory 에 넣어왔고, 코딩 세션도 동일하게 처리됩니다. Claude 가 우리가 무엇을 하고 누구인지에 대해 이미 모든 것을 알고 있었기 때문에, 전환율을 40% 나 증가시킨 디자인 언어와 전략을 제시할 수 있었습니다. https://github.com/supermemoryai/claude-supermemory

가장 중요한 부분은 단순히 Claude 를 위한 좋은 메모리가 아닙니다. supermemory 는 그 부분을 아주 잘 해냅니다. 중요한 점은 이 메모리와 맥락이 코딩 세션뿐만 아니라 우리의 일상 생활, claude.ai 채팅, 팀의 OpenClaw 에이전트 등에서 수집된다는 사실입니다.

완성도

전체 페이지의 성능과 SEO 를 분석해 달라고 요청했고, Claude 는 해냈습니다.

Dhravya Shah - inline image

약간 바이브 코딩된 것처럼 보일 수 있습니다. 하지만 저는 괜찮습니다. 무언가를 출시하기 위해 몇 달을 기다리는 대신, 반복을 통해 훌륭한 결과를 만들어낼 수 있다는 것을 알기 때문입니다.

AI 네이티브 - 백그라운드 에이전트와 연결하기

저희는 단 4 명의 정규 직원으로 supermemory 를 만들고 있습니다. 그게 전부입니다. 그리고 저, 솔로 파운더도 포함됩니다.

그중 한 명은 기술적이지 않은 사람인데, 백그라운드 에이전트를 사용하여 랜딩 페이지의 모든 작업을 자율적으로 수행할 수 있습니다.

Dhravya Shah - inline image

즉, 팀의 모든 사람이 이제 디자이너가 된 것입니다. 충분한 반복 주기만 있으면 말이죠.

우리는 정말 엄청난 시대에 살고 있습니다. 대부분의 디자인 작업은 우리가 무언가를 구체화할 때 팀이 직접 수행할 수 있고 (또한 그래야 합니다).

디자인은 분명 제품에 있어 중요합니다. 하지만 대부분의 사람들은 아마도 디자인에 너무 많은 비용을 지불하고 있을 것입니다.

YouMind에서 다시 만들기

Turn one viral article into a full content workflow

Collect the source, decode the pattern, create assets, draft the story, and distribute from one AI workspace.

Explore YouMind
크리에이터를 위해

당신의 Markdown을 깔끔한 𝕏 글로

직접 쓴 장문을 올릴 때 이미지, 표, 코드 블록을 𝕏에 맞게 정리하는 일은 번거롭습니다. YouMind는 전체 Markdown 초안을 깔끔하고 바로 게시할 수 있는 𝕏 글로 바꿔 줍니다.

Markdown → 𝕏 사용해 보기

분석할 패턴 더 보기

최근 바이럴 아티클

더 많은 바이럴 아티클 보기