안녕하세요! 15년 차 에디터입니다. 👋 오늘은 조금 엉뚱하지만, 개발자들 사이에서 '이거 완전 물건인데?'라며 입소문을 타고 있는 독특한 프로젝트 이야기를 가져왔어요.
혹시 예전 구글의 이스터에그였던 '구글 안티그래비티(Google Anti-Gravity)' 기억하시나요? 검색창이랑 로고가 중력에 이끌려 와장창 무너져 내리는 그 화면요! 🤣 솔직히 저도 처음 봤을 때 '와, 구글 센스 미쳤다' 하면서 화면 흔들고 놀았던 기억이 나네요.
그런데 2026년인 지금, 이 추억의 효과를 CLAUDE.md라는 새로운 AI 문법(?)과 결합해서 만드는 프로젝트가 화제입니다. AI에게 그냥 '코드 짜줘'라고 하는 시대는 지났잖아요? 어떻게 하면 AI가 내 맘속에 들어갔다 나온 것처럼 완벽한 코드를 짜게 할 수 있는지, 그 비밀인 CLAUDE.md를 활용해 중력을 거스르는 사이트를 만들어봅시다! 🚀
- 추억의 '구글 안티그래비티' 효과를 AI 문맥 파일(CLAUDE.md)로 재현하는 꿀팁 공개!
- AI가 프로젝트의 규칙과 스타일을 잊지 않게 만드는 '치트키' 파일 작성법.
- Matter.js 물리 엔진과 Claude를 결합해 5분 만에 중력 웹사이트 만드는 법.
도대체 CLAUDE.md가 뭐길래 난리일까?
본격적인 프로젝트에 앞서, 이거 하나만 짚고 넘어갈게요. 요즘 깃허브(GitHub) 좀 본다 하시는 분들은 루트 디렉토리에 CLAUDE.md나 .cursorrules 같은 파일이 있는 걸 종종 보셨을 거예요.
쉽게 말해서 이건 'AI를 위한 인수인계서'입니다. 📝
우리가 챗GPT나 클로드(Claude)한테 코딩을 시킬 때 가장 큰 문제가 뭐죠? 네, 맞아요. 대화가 길어지면 앞의 내용을 까먹거나, 내가 원하는 코드 스타일(예: "변수명은 카멜케이스로 해줘!")을 무시하기 시작한다는 거죠. 저도 이것 때문에 혈압 오른 적이 한두 번이 아닙니다. 🤯
하지만 프로젝트 폴더에 CLAUDE.md를 넣어두면, AI가 코드를 짤 때마다 이 파일을 먼저 참고합니다. 마치 요리사가 요리하기 전에 레시피를 정독하는 것처럼요! 이걸 '구글 안티그래비티' 프로젝트에 적용하면 어떻게 될까요? 우선 아래 포스팅에서 CLAUDE.md를 복사해오세요.
이렇게 적어두면, 나중에 "야, 마우스로 잡게 해줘"라고 매번 말할 필요가 없습니다. 이미 규칙에 있으니까요! 똑똑하죠?
2단계: 프롬프트 입력 및 결과 확인
이제 클로드나 AI 에디터(구글 안티그래비티, Cursor 등)에 이렇게 말만 하면 됩니다.
"CLAUDE.md 참고해서 자동화 블로그 MVP 상품을 설명하는 원페이지 index.html 파일 하나에 전체 기능 구현해줘."
그럼 놀랍게도 Matter.js의 복잡한 물리 설정(World, Engine, Render...)을 알아서 척척 잡아줍니다. 기존에는 "물리 엔진 추가해줘" -> "아니 CDN으로 해줘" -> "마우스 기능이 빠졌잖아!" 이렇게 3번 수정할 걸, 한 방에 끝내는 쾌감! ✨
"자동화 블로그 MVP 상품을 설명하는 원페이지 index.html 파일 하나에 전체 기능 구현해줘."
자주 묻는 질문 (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를 위한 편지' 한 통씩 남겨보세요. 결과물의 퀄리티가 확 달라지는 걸 느끼실 겁니다. 혹시 따라 하시다가 막히는 부분 있으면 언제든 댓글 남겨주세요! 칼답 갑니다! 💨
본 콘텐츠는 정보 제공을 목적으로 작성되었으며, 특정 소프트웨어의 실행 결과나 안정성을 보장하지 않습니다. AI 활용 결과에 대한 책임은 사용자 본인에게 있습니다.