바이브코딩으로 macOS 페이지 만들기

 

이런 웹페이지는 어떻게 만들까...

매일 연구하고 배워야 할게 많아서 미루고 있었는데

바이브코딩으로 만들어 봄

 

 

https://mac-os-portfolio-sandy.vercel.app/

Seokachu Portfolio

 

IDE는 안티그래비티 사용했다

 

 

 

 

 

 

레퍼런스 찾기

 

유튜브에 검색해서 나온 리스트들을 추렸다.

유튜브에서 본 그대로 최대한 비슷하게 만들고자 노력했다.

디자인과 CSS는 사진으로만 보고 셀프로 만들어야 했다.

 

 

 

 

 

 

 

최종 참고 레퍼런스

영상 보면서 어떻게 개발하는지 흐름 파악부터 했다.

영상에는 Vite를 사용했으나 Next로 설치했다.

나중을 생각해서 쫌쫌따리 업그레이드 하면

Next 풀스택으로 구축해보고 싶었기 때문

 

 

 

 

 

 

 

디자인은 Figma에 템플릿 검색해서

아이콘 최대한 비슷한거 찾아서 저장했고,

배경화면은 내가 쓰고 있는 배경화면 가지고 왔다.

 

 

 

 

 GSAP 애니메이션

https://gsap.com

 

GSAP 애니메이션은 유튜브에서 추천하는대로 사용했다.

GSAP애니메이션은 이번 기회에 처음 사용했는데

문서안에 Demo를 보니 내가 사용해보고 싶은

애니메이션 이펙트가 많아서 좋았다.

 

 

 

 

 

GSAP 사용 적용

 

 

MacOS Dock Effect를 사용해서

프로젝트에 적용해 본 예시이다.

 

 

 

 

 

 

 

GSAP 사용 적용2

 

글꼴의 wght(두께) 축을 마우스호버하면 글자를 두껍게 변경한다.

 

 

 

 

 

globals.css

 

`@apply` 속성 선언하고 공통 CSS 디자인 만들었는데

훨씬 편했고, SCSS처럼 비슷하게 사용가능해서 쉬웠다.

잘 알고있다고 있을 것이 아니라 꾸준히 공부해야함🥹

 

 

 

 

 

느낀점

여차저차 완성

 

바이브코딩으로 진행했기 때문에 트러블슈팅이라던가

구현하면서 어려웠던 점...? 사실대로 말하면 딱히 없음(...)

 

AI를 돌리더라도 프롬프팅 내용을 몇번 삽질하다보니

하다보니 프롬프팅 실력이 더 늘은 것 같고

이전보다 빠르게 만들 수 있다는 것이 체감되었다.

 

내 머릿속에 있는 UI와 매칭하는지?에 대해 신경썼고

예전 같았으면 일주일 넘게 걸렸던 페이지를

MVP까지 2일만에 만들 수 있다는 세상이 온 것 같다.

결론은 오늘도 만들어보고 싶은 웹페이지 완성✨