말로 스타일링하기: 아름답게 만들기
말로 스타일링하기: 아름답게 만들기
아무도 알려주지 않는 비밀 하나: 바이브 코딩에서는 코드로 스타일링하지 않아요 — 형용사로 스타일링합니다.
CSS 속성을 외울 필요가 없어요. 디자이너에게 브리핑하듯 원하는 룩을 설명하면 됩니다: 느낌, 형용사, 레퍼런스로요. "어둡고, 유리 같고, 프리미엄하게 — 음악 앱처럼." AI가 그 분위기를 클래스로 번역해 줍니다.
실제 예시 하나를 볼까요?
여러분이 말하면:
"내 프로필 카드를 어둡고 유리 같은 느낌으로, 부드럽게 둥근 모서리와 프리미엄한 감성으로 만들어 줘 — Spotify의 지금 재생 중 화면처럼."
AI가 만들어 내는 것:
<body class="bg-gradient-to-br from-slate-950 to-indigo-950 text-white">
<div class="bg-white/10 backdrop-blur-md border border-white/20 rounded-2xl p-8">
모든 형용사가 클래스가 됐어요:
- 어둡게 →
bg-gradient-to-br from-slate-950 to-indigo-950 - 유리 같게 →
bg-white/10 backdrop-blur-md border border-white/20 - 프리미엄하게, 부드러운 모서리 →
rounded-2xl p-8
이게 트릭의 전부예요: 형용사를 넣으면 클래스가 나옵니다. 레퍼런스가 좋을수록("음악 앱처럼", "은행 랜딩 페이지처럼", "네온 아케이드처럼") 결과도 좋아져요.
아래는 지난 레슨에서 만든 프로필 카드인데, 모든 스타일이 벗겨진 상태예요. 밋밋한 흰 배경, 기본 텍스트, 분위기 제로. 여러분의 미션: 한 번에 하나씩 룩을 설명하며 카드를 다시 살려내는 거예요.
안내
<body>에 어두운 그라데이션 배경을 입혀 보세요 — 먼저 스스로에게 분위기를 설명해 보세요: 어둡고, 깊고, 프리미엄하게. 그런 다음 클래스를 추가하세요
힌트: 이렇게 해 보세요: `<body class="bg-gradient-to-br from-slate-950 to-indigo-950 text-white min-h-screen flex items-center justify-center p-8">`
카드 컨테이너를 스타일링하세요: 프로스티드 글래스, 부드럽게 둥근 모서리, 넉넉한 패딩 — 그 '유리 같고 프리미엄한' 룩이요
CTA 링크를 그라데이션 버튼으로 바꿔 보세요 — 굵고, 컬러풀하고, 절대 지나칠 수 없게요
마우스가 닿으면 버튼이 반응하도록 hover 효과를 추가하세요 — 작은 디테일이 살아 있는 느낌을 만들어요
내 코드
이 단계에서 만들고 싶은 것을 설명해 주시면 코드를 작성해 드릴게요 — 그다음 적용을 클릭하면 에디터에 바로 들어갑니다. 이 단계: <body>에 어두운 그라데이션 배경을 입혀 보세요 — 먼저 스스로에게 분위기를 설명해 보세요: 어둡고, 깊고, 프리미엄하게. 그런 다음 클래스를 추가하세요