[오즈코딩스쿨 PD 11기] GitHub Pages 배포부터 패럴랙스까지 - 바이브 코딩 실전 후기

 

언젠가 배포까지 꼭 해보고 싶었던 바이브 코딩(Vibe Coding).

코드를 하나하나 직접 검색하며 만드는 방식보다 AI와 대화하면서 원하는 결과물을 만들어가는 방식이 굉장히 흥미로웠고 이번 웹사이트 제작 과제를 진행하면서 처음으로 제대로 바이브 코딩을 경험하게 되었다.

 

그리고 생각보다 재밌으면서도 쉽지만 어려웠다. 마치 화려하지만 심플하게- 라는 기획서를 보고 욕했던 과거의 내가 부끄럽지만 정말 쉬우면서도 어려웠다.

 

https://seolhyunjin-eng.github.io/web-portfolio/

Seol Portfolio

 

 

안티그래비티를 통한 무한 디버깅*

*디버깅(Debugging) : 오류, 결함,  비정상적인 작동(=버그)를 찾아내어 원인을 분석하고 수정하는 일련의 과정

 

처음에는 ChatGPT에게 원하는 디자인을 설명하면 바로 만들어줄 것이라고 생각했다.

실제로 우주 배경도 만들었고 커스텀 커서도 구현했고 숫자 카운트 애니메이션과 GitHub Pages 배포까지 생각보다 빠르게 진행할 수 있었다. 예전 같으면 하나하나 검색해서 며칠은 걸렸을 작업을 AI와 함께 몇 시간 만에 만들 수 있다는 점은 정말 놀라웠다.

 

 

배경이 꼬이고 난리났었다.

 

https://www.inocoms.net/

(주)이노컴즈 | 웹·앱·AI·클라우드 IT 전문 기업

실습 레퍼런스로 삼았던 이노컴즈 사이트. 푸터 패럴렉스를 위와같이 진행해보고싶었다.

 

하지만 프로젝트가 조금만 복잡해지기 시작하자 전혀 다른 문제가 나타났다. 대표적인 것이 Footer 패럴랙스* 효과였다.

패럴랙스 스크롤링 : 사용자가 마우스를 스크롤할 때 배경 이미지와 앞쪽의 텍스트, 이미지 요소가 서로 다른 속도로 움직이도록 하여 몰입감과 역동성을 주는 기법

 

원했던 것은 이노컴즈 홈페이지처럼 메인 콘텐츠가 위로 올라가면서 뒤에 숨겨져 있던 Footer가 자연스럽게 드러나는 효과였다.

처음에는 단순히 CSS 몇 줄만 수정하면 될 줄 알았다. 하지만 실제로는 Footer만 수정하는 것이 아니었다.

position, fixed, sticky, z-index, overflow 같은 속성들이 서로 연결되어 있었고 하나를 수정하면 우주 배경이 사라지고, 별 애니메이션이 멈추고, 기존에 잘 동작하던 레이아웃까지 무너지기 시작했다.

 

AI는 뻔뻔하게 가능한 코드라고 알려주는데 내 페이지에서는 계속 오류가 발생했다.

그리고 지피티한테 너 이것밖에 안돼? 하면서 가스라이팅 해도 " 아 맞아요 제가 틀렸어요^^" 하고 또 똑같은 오류를 반복해서 얘기했다. 결국 내가 현재 이 코딩의 구조도를 얼마나 이해하고 있는지에 따라 결과물은 천차만별이라는 점을 알 수 있었다.

 

이번 프로젝트에서 가장 오래 걸린 작업도 새로운 기능을 만드는 시간이 아니라 기존 코드와 충돌하는 원인을 찾는 디버깅이었다.

바이브 코딩은 코딩을 안 해도 되는 기술이 아니라 오히려 구조를 이해할수록 AI를 더 잘 사용할 수 있는 방식이었다.

 

https://antigravity.google/product/antigravity-ide

Google Antigravity

 

 

 

GitHub

예전에는 게임 모드나 프로그램을 설치할 때 누군가 올려둔 파일을 다운로드하는 사이트 정도로만 알고 있었다.

하지만 이번에 처음으로 GitHub Pages를 이용해 직접 웹사이트를 배포했다. 그동안 바이브코딩으로 봐왔던 홈페이지들도 거의 다 깃허브를 통해 만들어진 페이지였다. 이번 기회를 통해 HTML, CSS, JavaScript 파일이 실제 주소를 가진 웹사이트가 되는 과정을 직접 경험하면서 GitHub를 왜 개발자들이 많이 사용하는지 조금은 이해할 수 있었다.

 

https://github.com/?locale=ko-kr

GitHub · 변화는 계속됩니다. GitHub를 사용하여 앞서 나가세요.

https://seolking.tistory.com/entry/%EB%B0%94%EC%9D%B4%EB%B8%8C%EC%BD%94%EB%94%A9-%EC%82%AC%EC%9D%B4%ED%8A%B8-%EB%AA%A8%EC%9D%8C

비전공자도 서비스를 만드는 시대 - 바이브코딩 사이트 모음

 

 

마치며

AI 덕분에 개발 진입장벽은 분명 많이 낮아졌다. 하지만 프로젝트가 커질수록 중요한 것은 AI에게 얼마나 좋은 질문을 하느냐보다 기존 코드를 얼마나 이해하고 있는지였다. 그래도 예전 같았으면 엄두도 못 냈을 인터랙션과 애니메이션을 직접 구현했다는 점은 꽤 큰 자신감을 얻은 경험이었다.

 

이번 경험 덕분에 바이브 코딩이 더 이상 막연하게 느껴지지 않는다.

앞으로는 단순히 AI에게 코드를 생성해달라고 요청하는 수준을 넘어, 구조를 이해하면서 함께 개발하는 방향으로 계속 연습해보고 싶다.