[웹] AI를 활용한 웹 사이트 제작 및 자동배포 CI/CD

최근 AI를 활용한 코딩이 부쩍 늘었기에 이 기술을 활용해 나만의 사이트를 제작해보고자 했다.

 

 

사용한 기술은

웹 사이트 언어: TypeScript, React, Next.js
AI Assist : Gemini Code Assist
CI/CD: Git, Vercel

 

언어는TypeScript와 JSX가 결합된 React(Next.js)로 진행했다.

npm run dev

 

위 명령어는 개발자 모드로 실행하는 명령어다.

만드는 웹이 어떤 모습을 해 나가고 있는지 볼 수 있다.

 

코드 화면

 

 

난 여태 게임개발을 위주로 해왔기에 바로 실전으로 들어가지 못한다. 하지만 AI가 있기에 가능하다.

Gemini Code Assistant 

 

AI에게 자연어로 "기능이나 페이지를 구현해줘" 라고하면 대강 틀을 잡아주며 프로젝트 전체를 훑어서 다른 파일에 호환도 유지시키며 만들어준다.

 

쓰면서 느낀거지만 프로그래밍 "언어"라고 느끼는게 우리가 쓰는 언어와 가장많이 가까워진 것 같다.

우리가 애니를 많이 봐와서 일본어 청해가 되지만 직접 말하려고 하면 듣던 것 처럼 나오지 않는다.

AI가 짜준 코드를 보면 이게 어떤 기능을 하는지 이해할 순 있지만 막상 똑같이 코딩 하려하면 하지 못하는 것처럼

일반 언어를 공부하는 것 처럼 너무 흡사하다.

 

난 AI가 짜준 코드를 보고 이런 기능을 하겠구나~ 하며 쓱 훑어본 뒤 수정할 것만 추가로 프롬프트로 요청하며 웹을 만들어나갔다.

 

홈페이지 화면

 

 

이렇게 웹이 거의다 완성이 되었다.

이제 Git 에 올리기만 한다.

 

프로젝트 파일 자체를 Root에 모두 배치한다.

 

이제 Vercel로 배포를 시작하면된다.

 

vercel 로그인 페이지

 

원하는 방법으로 로그인을 해주면 된다. 웬만하면 구글이나 깃허브 로그인을 추천한다.

 

 

깃 리포지토리 연동

 

처음 저 빨간 테두리에 깃을 연결하라고 뜰것이다. 거기서 리포지토리를 하나만 가져오게 토글설정을 바꿔주어 아까 올린 깃의 레포지토리를 선택한 뒤 저 Import를 클릭해주면 된다.

 

프로젝트 생성 마무리

저 가려진것들은 신경쓸 필요 없다.

Root Directory를 우리가 Repository의 Root에 넣었으니 따로 설정해줄 필요 없다. 밑에 Deploy를 바로 눌러주고 1~2분 기다리면 바로 배포된다.

 

이제 끝이다. 수정 할게 있으면 깃에 push만 시켜줘도 Vercel이 이를 감지해서 자동으로 변경사항을 적용해준다.

깃을 통해 버전관리도 하고 Vercel로 자동배포까지 모두 한 셈이다. CI/CD를 구축했다.

 

로그 확인

 

그저 "딸깍" 몇번으로 홈페이지도 만들고 CI/CD도 모두 구축했다.

 

https://rudisland-portfolio.vercel.app/

김경훈 포트폴리오 rud_island-Portfolio

 

도메인도 매년 일정 금액을 지불하면 구매할 수 있다. 1~10만원대 하니까 참고!

 

.....

진짜 개발자는 끝장났나보다.