소개
웹사이트 제작의뢰가 들어오는데, 고객의 활용도에 따라 서비스를 맞춤형으로 추천해드리고는 합니다. 이번 고객은 아임웹이 적합한듯 싶어, 아임웹으로 제작해 드리기로 했습니다.
그러나 사실 노코드 툴보다 AI의 바이브코딩의 난이도가 낮아져, 코드작업이 더 쉬워진 상황이고, 효율적인 작업을 위해 직접 디자인 요소를 100% 활용하기 보다는 코드로 구현이 가능시 아임웹에서도 코드블럭을 지원하기 때문에, HTML+CSS+JS 를 가지고 커스터마이징이 가능합니다.
저는 아임웹 자체 기능+커스텀 코드를 이용하여 프로젝트를 진행하도록 돕는 AI에이전트를 만들기로 했습니다.
진행 방법
사용한 도구
젠스파크, 제미나이,클로드 딥리서치
제미나이 Gems 기능
아임웹
작업 순서
먼저 딥리서치 성능이 좋은 툴들로 내가 원하는 자료를 수집합니다. 딥리서치 성능이 좋은 제미나이와 젠스파크, 퍼플렉시티, 클로드 등 다양한 AI 툴을 사용합니다. 프롬프트는 심플하게 했습니다.
수집한 데이터들을 노트북LM에서 모아둡니다. 아임웹 웹사이트의 문서도 필요한 부분만 첨부합니다. 그리고, 합쳐서 최종 가이드를 만들어서 구글문서로 만듧니다.
제미나이에서 gem를 만들어 노트 북 LM으로 만들었던 가이드를 첨부하고, 다음과 같이 간단하게 지침을 작성합니다. 아임웹 전문 에이전트를 만듭니다
이제 이 에이전트를 이용하여, 고객사 웹사이트의 기획을 작성하고 순서대로 작업 체크리스트를 만들어서 진행하며, 필요시 고급 기능을 물어봅니다. (별도의 메뉴얼이 필요없는 수준)
브랜드 컬러 팔레트 요청
상세페이지 기획
기능적 문제 물어보기
스타일 코드 요청하기
앞에서 원하는 기능이 들어간 코드를 복사해서, 아임웹에 코드 블럭을 넣고, 사용합니다. 후기 스타일의 카드를 넣고 싶어서 비슷한 이미지를 캡처해서 코드를 만들어 붙여넣었습니다.
나머지 수정하는 부분은 바로 직접 수정이나, 제미나이에서 요청하면 제공하니 간편하게 처리했네요~
결과와 배운 점
전체 페이지를 코드작업하지 않더라도, 커스텀 코드를 넣을 수 있는, 아임웹, WIX, 우피와 같은 서비스를 더욱 코드 진화적으로 사용할 수 있게 됨.