구글 안티그래비티에서 화제의 CLAUDE.md를 활용한 프로젝트 예시

구글 안티그래비티 효과가 적용되어 아이콘들이 쏟아지는 모니터 화면과 CLAUDE.md 파일 아이콘

안녕하세요! 15년 차 에디터입니다. 👋 오늘은 조금 엉뚱하지만, 개발자들 사이에서 '이거 완전 물건인데?'라며 입소문을 타고 있는 독특한 프로젝트 이야기를 가져왔어요.

혹시 예전 구글의 이스터에그였던 '구글 안티그래비티(Google Anti-Gravity)' 기억하시나요? 검색창이랑 로고가 중력에 이끌려 와장창 무너져 내리는 그 화면요! 🤣 솔직히 저도 처음 봤을 때 '와, 구글 센스 미쳤다' 하면서 화면 흔들고 놀았던 기억이 나네요.

그런데 2026년인 지금, 이 추억의 효과를 CLAUDE.md라는 새로운 AI 문법(?)과 결합해서 만드는 프로젝트가 화제입니다. AI에게 그냥 '코드 짜줘'라고 하는 시대는 지났잖아요? 어떻게 하면 AI가 내 맘속에 들어갔다 나온 것처럼 완벽한 코드를 짜게 할 수 있는지, 그 비밀인 CLAUDE.md를 활용해 중력을 거스르는 사이트를 만들어봅시다! 🚀

📌 에디터의 3줄 요약
  • 추억의 '구글 안티그래비티' 효과를 AI 문맥 파일(CLAUDE.md)로 재현하는 꿀팁 공개!
  • AI가 프로젝트의 규칙과 스타일을 잊지 않게 만드는 '치트키' 파일 작성법.
  • Matter.js 물리 엔진과 Claude를 결합해 5분 만에 중력 웹사이트 만드는 법.

도대체 CLAUDE.md가 뭐길래 난리일까?

본격적인 프로젝트에 앞서, 이거 하나만 짚고 넘어갈게요. 요즘 깃허브(GitHub) 좀 본다 하시는 분들은 루트 디렉토리에 CLAUDE.md.cursorrules 같은 파일이 있는 걸 종종 보셨을 거예요.

쉽게 말해서 이건 'AI를 위한 인수인계서'입니다. 📝

우리가 챗GPT나 클로드(Claude)한테 코딩을 시킬 때 가장 큰 문제가 뭐죠? 네, 맞아요. 대화가 길어지면 앞의 내용을 까먹거나, 내가 원하는 코드 스타일(예: "변수명은 카멜케이스로 해줘!")을 무시하기 시작한다는 거죠. 저도 이것 때문에 혈압 오른 적이 한두 번이 아닙니다. 🤯

하지만 프로젝트 폴더에 CLAUDE.md를 넣어두면, AI가 코드를 짤 때마다 이 파일을 먼저 참고합니다. 마치 요리사가 요리하기 전에 레시피를 정독하는 것처럼요! 이걸 '구글 안티그래비티' 프로젝트에 적용하면 어떻게 될까요? 우선 아래 포스팅에서 CLAUDE.md를 복사해오세요.

코딩 AI가 바보짓 할 때? 65줄 텍스트 하나로 천재 만드는 미친 방법 🚀
코딩 AI가 바보짓 할 때? 65줄 텍스트 하나로 천재 만드는 미친 방법 🚀

GitHub을 뒤흔든 65줄 텍스트 파일의 정체! AI 코딩 비서가 말을 안 듣나요? 이 간단한 프롬프트 하나로 AI를 천재로 만드는 비법을 알아보세요.

guideitkr.blogspot.com https://guideitkr.blogspot.com/2026/02/65-line-text-makes-ai-coder-smarter.html

이렇게 적어두면, 나중에 "야, 마우스로 잡게 해줘"라고 매번 말할 필요가 없습니다. 이미 규칙에 있으니까요! 똑똑하죠?

2단계: 프롬프트 입력 및 결과 확인

이제 클로드나 AI 에디터(구글 안티그래비티, Cursor 등)에 이렇게 말만 하면 됩니다.

"CLAUDE.md 참고해서 자동화 블로그 MVP 상품을 설명하는 원페이지 index.html 파일 하나에 전체 기능 구현해줘."

그럼 놀랍게도 Matter.js의 복잡한 물리 설정(World, Engine, Render...)을 알아서 척척 잡아줍니다. 기존에는 "물리 엔진 추가해줘" -> "아니 CDN으로 해줘" -> "마우스 기능이 빠졌잖아!" 이렇게 3번 수정할 걸, 한 방에 끝내는 쾌감! ✨

구분일반 AI 코딩CLAUDE.md 활용 시
컨텍스트 유지대화 길어지면 까먹음끝까지 규칙 기억함 (소름..)
라이브러리 사용종종 엉뚱한 버전 사용지정한 Matter.js 정확히 사용
생산성수정 반복 (30분 소요)원샷 원킬 (5분 컷) 🚀
이제 결과를 확인해 보실래요?
"자동화 블로그 MVP 상품을 설명하는 원페이지 index.html 파일 하나에 전체 기능 구현해줘."
구글 안티그래비티에서 화제의 CLAUDE.md를 활용한 프로젝트 예시

구글 안티그래비티에서 화제의 CLAUDE.md를 활용한 프로젝트 예시



"CLAUDE.md 참고해서 자동화 블로그 MVP 상품을 설명하는 원페이지 index.html 파일 하나에 전체 기능 구현해줘."
먼저 파일을 생성해주세요. 
구글 안티그래비티에서 화제의 CLAUDE.md를 활용한 프로젝트 예시

구글 안티그래비티에서 화제의 CLAUDE.md를 활용한 프로젝트 예시

이후 프롬프트를 요청해 보겠습니다. 
구글 안티그래비티에서 화제의 CLAUDE.md를 활용한 프로젝트 예시

구글 안티그래비티에서 화제의 CLAUDE.md를 활용한 프로젝트 예시




자주 묻는 질문 (FAQ)

이쯤 되면 궁금한 게 생기시죠? 독자분들이 자주 묻는 내용을 모아봤습니다.

Q1. 이 파일은 꼭 이름이 CLAUDE.md여야 하나요?

A: 주로 Anthropic의 Claude를 사용할 때 관습적으로 쓰지만, 사용하는 AI 도구에 따라 .cursorrules(Cursor 에디터)나 instructions.md 등으로 유연하게 변경해도 됩니다. 핵심은 'AI가 읽을 수 있는 명확한 지침서'라는 점이에요!

Q2. 구글 안티그래비티 원본 소스는 어디서 구하나요?

A: 원본은 'Mr. Doob'이라는 개발자가 만든 것입니다. 우리는 그 코드를 그대로 가져오는 게 아니라, AI에게 "그런 느낌으로 만들어줘"라고 시키는 것이죠. 저작권 걱정 없이 나만의 버전을 만들 수 있어요.

Q3. 코딩을 전혀 몰라도 할 수 있나요?

A: 네! 그게 바로 이 방법의 장점입니다. CLAUDE.md에 "나는 초보자니까 코드를 실행하는 방법도 3줄 요약해서 알려줘"라고 적어두면, AI가 정말 친절하게 알려줍니다. 겁먹지 말고 도전해보세요! 🙌

마무리하며

오늘은 추억의 '구글 안티그래비티'를 소재로 최신 AI 트렌드인 CLAUDE.md 활용법을 알아봤습니다. 사실 기술이라는 게 어렵게 느껴지지만, 이렇게 재미있는 예제랑 섞어서 노니까 훨씬 할 만하지 않나요? 😉

여러분의 프로젝트 폴더에도 이제 'AI를 위한 편지' 한 통씩 남겨보세요. 결과물의 퀄리티가 확 달라지는 걸 느끼실 겁니다. 혹시 따라 하시다가 막히는 부분 있으면 언제든 댓글 남겨주세요! 칼답 갑니다! 💨

🤯 안티그래비티 + 제미나이? 바이브 코딩으로 전문가 웹사이트 초스피드 구축 핵심 세팅!
🤯 안티그래비티 + 제미나이? 바이브 코딩으로 전문가 웹사이트 초스피드 구축 핵심 세팅!

안티그래비티와 제미나이를 활용한 '바이브 코딩'으로 전문가 웹사이트를 구축하는 핵심 세팅법을 공개합니다. 3가지 MCP 서버를 통한 AI 성능 극대화 비법을 확인하세요!

goddigitalnomad.blogspot.com https://goddigitalnomad.blogspot.com/2026/02/blog-post.html
자청의 천재적 사고 프롬프트, 2026년 버전으로 진화시키다! (무료 공유)
자청의 천재적 사고 프롬프트, 2026년 버전으로 진화시키다! (무료 공유)

자청의 천재적 프롬프트를 2026년 최신 AI 모델에 맞게 업그레이드했습니다. 메타 인지 전략가 페르소나와 화학적 결합을 적용한 초강력 프롬프트를 무료로 공유합니다.

guideitkr.blogspot.com https://guideitkr.blogspot.com/2026/01/2026_23.html

본 콘텐츠는 정보 제공을 목적으로 작성되었으며, 특정 소프트웨어의 실행 결과나 안정성을 보장하지 않습니다. AI 활용 결과에 대한 책임은 사용자 본인에게 있습니다.

댓글 쓰기

다음 이전