코드 커스터마이징
프론트엔드 개발자 수준의 유저들을 위해, 레이아웃 컴포넌트와 TailwindCSS 컬러 토큰을 딥하게 고치는 방법.
템플릿의 한계를 부수는 코드 단위 커스텀
// i18n-ignore
만약 "단순 폴리오는 한 칸 지우고 세 칸으로 늘리고 싶다" 거나, "버튼의 네모 반듯한 각도를 둥글둥글하게 하고, 초록빛 테마 색상을 회사의 컬러코드인 강렬한 빨강으로 완전히 바꾸고 싶다"면? 이때부터는 VS Code 등을 이용한 로컬 환경 개조(Local Development Customization) 모드로 들어갑니다.
// i18n-ignore
# 1단계: 개발자 모드 진입 (Clone)
// i18n-ignore
여러분의 PC 터미널에서 깃(Git) 저장소를 내려받아 의존성을 설치합니다.
// i18n-ignore
git clone https://github.com/[여러분의-아이디]/[프로젝트명].git
// i18n-ignore
cd [프로젝트명]
// i18n-ignore
npm install
npm run dev
이제 브라우저 주소창에 http://localhost:3000을 입력하면 여러분의 PC에서 돌아가는 코딩 도화지가 펼쳐집니다.
// i18n-ignore
# 2단계: 핵심 컬러 및 폰트 오버라이딩
// i18n-ignore
프로젝트 최상단의 tailwind.config.ts 파일을 열어주세요.
// i18n-ignore
primary컬러 팔레트가 보이시나요? 바로 이곳이 사이트 전역의 버튼색, 강조 글씨색 등을 지배하는 테마의 마더보드입니다. 이 컬러 코드를 여러분의 HEX 값(예:#FF0000) 으로 치환하세요.
// i18n-ignore
- 글로벌 폰트는
src/app/layout.tsx내부의 구글 폰트(Inter등) 파트를 변경하여 우아한 산돌고딕이나 명조 계열로 갈아치울 수 있습니다.
// i18n-ignore
# 3단계: 화면 배치(레이아웃) 뜯어고치기
// i18n-ignore
화면의 섹션별 UI 소스는 모두 src/components/ 디렉토리에 잘 정리되어 있습니다.
// i18n-ignore
예를들어 'Services' 박스를 고치려면 src/components/home/Services.tsx 안의 Grid 프레임워크와 Div 마진값 인자들(mb-8 등)을 여러분의 감각에 맞게 요리하시면 됩니다.
// i18n-ignore
변경사항 검수 후 git push를 날리시면 원격 Vercel이 또다시 이를 감지하고 완벽히 재배포합니다!
// i18n-ignore