소개
이전 학원 홈페이지 이미지를 만들었지만 결과가 마음에 들지 않아 전체적인 구성을 다시 만들기로 결정했다. 더 자연스럽고 전문적인 느낌을 주는 이미지를 만들고 싶다는 욕구가 작업의 출발점이 되었다.
전
ai & i - 스크린샷
후
파란색 배경과 한글 텍스트가 있는 웹사이트
https://ai-vision-tokens.lovable.
진행 방법
추가한 기능
Supabase를 이용한 DB 연결: 기본 프론트 작업만 가능했던 환경에서 벗어나기 위해 Supabase를 사용해 데이터베이스를 연동했다. 이를 통해 학원 정보, 사용자 데이터 등을 구조적으로 저장하고 관리할 수 있게 되어 기능 확장성이 커졌다.
스무스 스크롤 기능 추가: 페이지 이동 시 부드럽게 움직이도록 스무스 스크롤을 적용해 전체적인 완성도와 전문성이 올라간 느낌을 받았다.
사용한 도구
Gemini 3: 새롭게 출시되었고 성능이 좋다는 이야기를 듣고 기존에 사용했던 프롬프트를 그대로 넣어 이미지 재생성을 시도했다. 결과물이 훨씬 자연스럽고 완성도가 높아 만족감을 느꼈다.
Lovable: Gemini가 HTML 형태로만 코드를 주기 때문에 프런트엔드 위주의 구현만 가능해 한계를 느꼈고, 추가 디자인 수정을 위해 Lovable로 이동하여 Gemini가 준 코드를 전달하고 디자인 수정을 요청했다.
작업 중 경험한 에피소드
Gemini에서 생성된 HTML 코드는 깔끔하고 정리되어 있었지만, 프런트엔드 구현만 가능해 백엔드·전체 구성까지 진행하기엔 제약이 있었다.
Lovable에 코드를 전달해 디자인을 추가로 수정하려 했으나, Gemini 코드가 완전히 호환되지 않는 부분이 있어 일부 스타일이 깨지며 재수정을 반복해야 했다.
결과와 배운 점
여러 툴을 조합하면 단일 도구로 작업하는 것보다 훨씬 좋은 결과를 만들 수 있다는 점을 크게 느꼈다.
AI 이미지 도구마다 강점이 달라, 단순히 한 곳에서만 작업하기보다 상황에 맞게 도구를 넘나드는 것이 효율적이었다.
하지만 도구 간의 코드 형식, 호환성 차이로 인해 예상치 못한 수정 작업이 생길 수 있다는 것도 배웠다.
