19단계: UI 개선 (Material-UI / Tailwind CSS)
좋습니다 🙂 이제 바이브코딩 입문 19단계를 정리해드릴게요. 이 단계는 UI 개선(Material-UI, Tailwind CSS 적용)을 통해 웹페이지의 디자인을 더 현대적이고 세련되게 만드는 과정입니다.
🎨 19단계: UI 개선 (Material-UI / Tailwind CSS)
① 자연어 프롬프트 작성
AI에게 요청할 문장을 간단히 작성합니다.
React 프로젝트에 Material-UI 버튼을 적용해서 로그인 페이지를 더 세련되게 만들어줘.
② AI가 제안하는 코드 예시
Material-UI 설치
npm install @mui/material @emotion/react @emotion/styled
Login.js (Material-UI 버튼 적용)
import React, { useContext, useState } from "react";
import { AuthContext } from "./AuthContext";
import Button from "@mui/material/Button";
import TextField from "@mui/material/TextField";
import Box from "@mui/material/Box";
function Login() {
const { login } = useContext(AuthContext);
const [username, setUsername] = useState("");
const handleLogin = () => {
login(username);
};
return (
<Box sx={{ textAlign: "center", marginTop: "50px" }}>
<TextField
label="아이디 입력"
variant="outlined"
value={username}
onChange={(e) => setUsername(e.target.value)}
sx={{ marginBottom: "20px", width: "250px" }}
/>
<br />
<Button
variant="contained"
color="primary"
onClick={handleLogin}
>
로그인
</Button>
</Box>
);
}
export default Login;
Tailwind CSS 적용 예시 (대안)
설치
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init
tailwind.config.js
module.exports = {
content: ["./src/**/*.{js,jsx,ts,tsx}"],
theme: {
extend: {},
},
plugins: [],
};
Login.js (Tailwind 스타일 적용)
import React, { useContext, useState } from "react";
import { AuthContext } from "./AuthContext";
function Login() {
const { login } = useContext(AuthContext);
const [username, setUsername] = useState("");
const handleLogin = () => {
login(username);
};
return (
<div className="flex flex-col items-center mt-12">
<input
type="text"
placeholder="아이디 입력"
value={username}
onChange={(e) => setUsername(e.target.value)}
className="border rounded px-4 py-2 mb-4 w-64"
/>
<button
onClick={handleLogin}
className="bg-blue-500 text-white px-6 py-2 rounded hover:bg-blue-600"
>
로그인
</button>
</div>
);
}
export default Login;
③ 실행 및 확인
- Material-UI: 버튼과 입력창이 깔끔한 디자인으로 바뀌며, 기본적인 테마 색상 적용
- Tailwind CSS: 유틸리티 클래스 기반으로 빠르게 커스터마이징 가능
🎯 학습 포인트
- UI 라이브러리 활용: Material-UI → 컴포넌트 기반 디자인
- 유틸리티 CSS 활용: Tailwind → 빠른 스타일링과 반응형 지원
- 사용자 경험 개선: 더 직관적이고 현대적인 인터페이스 제공
👉 이렇게 19단계를 마치면, 바로 20단계에서 테스트 작성(Jest/React Testing Library)로 넘어가게 됩니다.
원하시면 제가 20단계 예시 코드(로그인 컴포넌트 테스트)까지 바로 보여드릴까요?
