바이브코딩으로 UI 스타일 가이드 만들기

바이브 코딩으로 작업할 때,
UI 일관성을 유지하는 것은 매우 중요합니다.
여러 페이지를 만들어도 동일한
사용자 경험을 제공하는 것이 필요하죠.

UI 일관성을 유지하는 가장 확실한 방법은
UI 스타일 가이드를 만드는 것입니다.

먼저 아래와 같은 과정을 거쳐
마음에 드는 jvibeschool 메인 페이지 스타일을 찾았습니다.

1. 초기 스타일 변경 요청
   “index.html 페이지를 컨텐츠는 그대로 두고 스타일만 검정/흰색 으로만 차분하게.
   다크 라이트 모드를 유지하고화려한 색상은 모두 제거”
2. 아이콘 시스템 변경
   “좋아 아이콘은 모두 https://lucide.dev/ 를 이용”
3. 다크모드 색상 조정
   “다크모드 컬러를 첨부 파일 톤으로 바꿔줘” (회색 톤 이미지 첨부)
4. 애니메이션 추가 요청
   “블로그 방문하기 , 도서 보러가기 버튼에 마우스 롤오버하면 약간의 애니메이션 추가”
5. 소셜 버튼 애니메이션
   “좋아! 소셜버튼 8개도 딱 이정도의 애니메이션 추가”
6. 스타일 가이드 요청
   “아주 훌륭해! 지금 사용한 스타일을 다른 페이지에도 계속 쓰고 싶다.스타일 가이드 부탁해”
7. index_book.html 스타일 적용
   “이제 스타일 가이드를 index_book.html에 적용해줘. 다크/라이트 모드도 필요해.”
8. 그래프 스타일 변경
   “그래프는 https://ui.shadcn.com/ 으로 부탁해”
   “index_book.html 에 있는 3개의 그래프를 shadcn/ui 스타일로”
9. 출간 통계 개선
   “출간 통계 크기 줄이고, 아이콘은 Lucide 사용”
10. 테두리 가시성 개선
    “좋아 다크모드에서 출간 통계 안에 4개 카드에 50% 회색 라인 넣어줘. 잘 안보여” “출간 통계 안에 4개 상자가 매우 밝은 회색 배경에 흰색 라인이라서 잘 안보인다.” “여전히 안보여” “출간 통계가 밝은 배경인 경우는 다크모드야.”
11. 차트 텍스트 가독성
    “일러스트 그래프 안에 글자 안 보인다”
12. 스타일 가이드 업데이트
    “좋아! 이 내용을 추가해서 스타일 가이드 업데이트”
13. 네비게이션 추가
    “모드 토글 버튼 왼쪽에 홈으로 가는 아이콘 추가, /index.html 링크”

이런 과정을 통해 완성도 높은 스타일을 만들었습니다.

수많은 수정을 거쳐 드디어 마음에 드는 스타일을 찾았다면?
다음 단계는 완성된 스타일을 마크다운 형태의 스타일 가이드로 만드는 것이죠.

[스타일 가이드 만들기]
“지금 만들어진 페이지를 참고해서 스타일 가이드 마크다운을 만들어줘”

이렇게 만들어진 스타일 가이드에는 다음과 같은 항목이 포함됩니다.

-Color System
-Typography
-Components
-Animations
-Layout
-Charts & Data Visualization
-JavaScript Functions
-Responsive Breakpoints
-Usage Examples
-Design Principles
-Dependencies

[스타일 가이드 적용하기]
스타일을 적용할 파일과 스타일 마크다운 파일을
같은 폴더에 넣고 “index.html 에 스타일 가이드 마크다운 파일 참고해서 스타일 적용해줘”
라고 이야기 하면 끝입니다.

스타일 가이드를 이용해 AI가 일관된 디자인의
페이지를 만들 수 있도록 도와 주세요.

https://jvibeschool.com/
https://jvibeschool.com/Jinho_Book/
메인 페이지와 도서 포트폴리오 페이지는 동일한 스타일로 제작되었습니다.