안녕하세요, 크레이입니다.
저는 최근까지 Windsurf AI 코딩 툴을 정말 하드하게 사용해왔습니다.
그런데 최근 제 메인 개발 툴이 완전히 바뀌었습니다.
바로 ‘안티그라비티(Antigravity)’ 때문인데요.
코딩부터 디자인까지 한 방에? ‘안티그라비티’로 3분 만에 랜딩페이지
개발자로서 백엔드 로직이나 DB 설계는 어떻게든 하겠는데, 항상 발목을 잡는 게 있습니다.
바로 ‘디자인’과 ‘이미지 소스 찾기’입니다.
무료 이미지 사이트를 뒤지다가 1시간을 날린 경험, 다들 있으시죠?
오늘은 안티그라비티를 활용해 기획, 코딩(HTML/CSS), 그리고 디자인(이미지 생성)까지 단 한 번의 프롬프트로 끝내는 과정을 보여드리겠습니다.
오늘의 미션: 감성 터지는 커피 구독 서비스 만들기
복잡한 설정 없이, 딱 요즘 유행하는 스타일의 깔끔한 ‘다크 모드 원페이지 사이트’를 만들어보겠습니다.
가상의 브랜드 이름은 ‘Deep Brew’로 정했습니다.
핵심은 “코드 짜면서 필요한 이미지까지 그 자리에서 바로 만들어줘”라고 시키는 것입니다.
안티그라비티에게 ‘풀 패키지’ 주문하기
저는 아래와 같이 프롬프트를 입력했습니다. 프롬프트는 구체적일수록 AI가 잘 만들어 줍니다.
게다가 안티그라비티는 나노바나나를 이용하여 맥락에 맞는 이미지도 알아서 생성해 줍니다!
새로 런칭하는 스페셜티 커피 구독 서비스 'Deep Brew'의 랜딩페이지를 만들어줘.
1. 디자인 컨셉: 전체적으로 어둡고 고급스러운 '다크 모드'.
2. 히어로 섹션: 최상단에는 김이 모락모락 나는 아주 감각적인 커피 이미지를 배경으로 깔고, 그 위에 메인 카피와 주황색 포인트의 '구독 시작하기' 버튼을 배치해줘.
3. 특징 섹션: 그 아래에는 서비스 특징 3가지를 아이콘과 함께 소개해줘.
4. 기술 스택: HTML과 Tailwind css 를 사용해서 하나의 파일로 만들어줘.
히어로 섹션에 들어갈 고퀄리티 커피 이미지도 네가 직접 생성해서 코드에 바로 적용해줘.참고로 저는 제미나이 프로를 구독하기 때문에 Fast 모드 Gemeni 3 Pro 로 설정하고 씁니다.
Fast 모드가 정말 빨라요! 무료 사용자라도 하루 몇번 정도 사용은 구글에서 현재 허용하고있습니다.
작업 진행 과정 (실화인가요?)
프롬프트를 넣자마자 왼쪽창에는 코드가 짜이고, 오른쪽 채팅 창에서 이미지도 그리기 시작합니다.
참, 중간에 이런 창이 나오면 생성한 이미지를 적용하는 단계이니 Accept 를 눌러 주셔야 합니다.
3분도 안 돼서 결과물이 나왔습니다.
놀라운 점은 <img> 태그 안에 방금 생성한 고화질 커피 이미지도 딱 박혀 있다는 점입니다.
코드를 실행하자마자 나온 화면입니다. 어울리는 이미지를 잘 배치하고 css 손보고 하려면 몇시간은 걸렸을 텐데, 톤앤매너가 완벽하게 잡힌 사이트가 뚝딱 나왔습니다.
추가 추가!
페이지가 내용이 짧아 아쉬우신가요?
원래 이런 랜딩페이지는 한술에 배부르지 않습니다.
결과물을 봐야 뭔가 더 넣을게 떠오르고 하는 법이거든요,
아래와 프롬프트를 추가로 요청하면 더 추가해 줍니다.
화면 구성이 너무 적어. 메뉴 목록을 넣어 주고 손님들이 키오스크에서 주문하는 이미지도 넣어줘.
그리고 찾아오는 길도 가상으로 구글 지도를 넣어줘.이런 화면이 추가되었습니다. 너무 끝내주지 않나요?
아쉽지만 기능 작동은 안됩니다^^.. 방법은 있지만요.
마치며
AI가 ‘코딩 비서’였다면, 안티그라비티는 ‘디자이너겸 코딩 파트너’ 느낌입니다.
프론트엔드 디자인이 막막하셨던 분들, 혹은 급하게 랜딩페이지가 필요하신 분들은 꼭 한번 써보시길 강력 추천합니다.
감사합니다!