디자인 고자를 위한 바이브 코딩 NextJS 테마 무료 설정법
- 디자인을 못하는 사람들을 위해 Next.js 테마를 무료로 설정하는 방법을 소개 🎨
- 넥스트, 샷스, 테일윈디스 스택을 사용하여 웹사이트를 만들고, 컴포넌트는 풀 샷시엔으로 제작 🚀
- 글로벌.css에서 테마를 변경할 수 있지만, 개발자는 이쁘게 바꾸기 어려우므로 트윅스엔(TweakShn) 사용 권장 ✨
- MCP 서버를 등록하여 UI 프레임워크 컴포넌트를 효율적으로 사용하고, 글로벌.css 요소들을 중앙화 🧰
- 트윅스엔(TweakShn)에서 다양한 테마 샘플을 확인하고, 색상, 글꼴, 보더 스타일 등을 변경 가능 🌈
- 버셀, 슈퍼베이스 등 유명 사이트 테마를 적용하거나, 프라이머리/세컨더리 컬러, 폰트, 레터 스페이스 등을 커스터마이징 🖌️
- 트윅스엔에서 제공하는 코드를 복사하여 프로젝트에 붙여넣어 테마를 쉽게 변경 ✂️
- 프롬프트를 사용하여 원하는 스타일의 테마를 생성하거나, 이미지 기반으로 유사한 테마를 생성 💡
- 네오브루탈리즘과 같은 독특한 테마를 적용하여 웹사이트 디자인을 변경 💥
- 트윅스엔을 통해 테마를 중앙 집중적으로 관리하고 자유롭게 변경하여 디자인을 개선 ⚙️