Chakra UI 완벽 가이드 | React 컴포넌트 라이브러리·테마·접근성·실전 활용

2026년 4월 7일 · 15분 읽기 · 수정 2026년 4월 7일 초급

이 글의 핵심

Chakra UI로 아름다운 UI를 구축하는 완벽 가이드입니다. Components, Theming, Dark Mode, 접근성, TypeScript까지 실전 예제로 정리했습니다.

실무 경험 공유: Chakra UI를 도입하면서, UI 개발 속도가 3배 향상되고 접근성이 자동으로 보장된 경험을 공유합니다.

들어가며: “UI 개발이 느려요”

실무 문제 시나리오

시나리오 1: 컴포넌트를 처음부터 만들어야 해요
시간이 오래 걸립니다. Chakra UI는 50+ 컴포넌트를 제공합니다.

시나리오 2: 접근성을 고려하지 못해요
수동 구현이 어렵습니다. Chakra UI는 자동으로 보장합니다.

시나리오 3: 다크 모드가 필요해요
직접 구현이 복잡합니다. Chakra UI는 내장되어 있습니다.

1. Chakra UI란?

핵심 특징

Chakra UI는 React 컴포넌트 라이브러리입니다.

주요 장점:

50+ 컴포넌트: 즉시 사용 가능
접근성: WAI-ARIA 준수
테마: 완전한 커스터마이징
다크 모드: 내장
TypeScript: 완벽한 지원

2. 설치 및 설정

설치

npm install @chakra-ui/react @emotion/react @emotion/styled framer-motion

Provider 설정

import { ChakraProvider } from '@chakra-ui/react';

export default function App({ Component, pageProps }) {
  return (
    <ChakraProvider>
      <Component {...pageProps} />
    </ChakraProvider>
  );
}

3. 기본 컴포넌트

import { Button, Box, Text, Heading, Stack } from '@chakra-ui/react';

export default function Home() {
  return (
    <Box p={8}>
      <Heading mb={4}>Welcome to Chakra UI</Heading>
      <Text mb={4}>Build accessible React apps with speed</Text>
      <Stack direction="row" spacing={4}>
        <Button colorScheme="blue">Primary</Button>
        <Button colorScheme="green">Secondary</Button>
        <Button variant="outline">Outline</Button>
      </Stack>
    </Box>
  );
}

4. Layout

import { Box, Flex, Grid, GridItem, Container, Stack } from '@chakra-ui/react';

export default function Layout() {
  return (
    <Container maxW="container.xl">
      <Flex justify="space-between" align="center" mb={8}>
        <Box>Logo</Box>
        <Stack direction="row" spacing={4}>
          <Box>Home</Box>
          <Box>About</Box>
        </Stack>
      </Flex>

      <Grid templateColumns="repeat(3, 1fr)" gap={6}>
        <GridItem>Card 1</GridItem>
        <GridItem>Card 2</GridItem>
        <GridItem>Card 3</GridItem>
      </Grid>
    </Container>
  );
}

5. Form

import {
  FormControl,
  FormLabel,
  FormErrorMessage,
  Input,
  Button,
  VStack,
} from '@chakra-ui/react';
import { useForm } from 'react-hook-form';

interface FormData {
  email: string;
  password: string;
}

export default function LoginForm() {
  const { register, handleSubmit, formState: { errors } } = useForm<FormData>();

  const onSubmit = (data: FormData) => {
    console.log(data);
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <VStack spacing={4}>
        <FormControl isInvalid={!!errors.email}>
          <FormLabel>Email</FormLabel>
          <Input {...register('email', { required: 'Email is required' })} />
          <FormErrorMessage>{errors.email?.message}</FormErrorMessage>
        </FormControl>

        <FormControl isInvalid={!!errors.password}>
          <FormLabel>Password</FormLabel>
          <Input
            type="password"
            {...register('password', { required: 'Password is required' })}
          />
          <FormErrorMessage>{errors.password?.message}</FormErrorMessage>
        </FormControl>

        <Button type="submit" colorScheme="blue" width="full">
          Submit
        </Button>
      </VStack>
    </form>
  );
}

6. Theming

import { extendTheme, ChakraProvider } from '@chakra-ui/react';

const theme = extendTheme({
  colors: {
    brand: {
      50: '#e3f2fd',
      100: '#bbdefb',
      500: '#2196f3',
      900: '#0d47a1',
    },
  },
  fonts: {
    heading: 'Georgia, serif',
    body: 'Arial, sans-serif',
  },
  components: {
    Button: {
      baseStyle: {
        fontWeight: 'bold',
      },
      variants: {
        solid: {
          bg: 'brand.500',
          color: 'white',
        },
      },
    },
  },
});

export default function App() {
  return (
    <ChakraProvider theme={theme}>
      {/* 컴포넌트 */}
    </ChakraProvider>
  );
}

7. Dark Mode

import { Button, useColorMode, useColorModeValue } from '@chakra-ui/react';

export default function DarkModeToggle() {
  const { colorMode, toggleColorMode } = useColorMode();
  const bg = useColorModeValue('white', 'gray.800');
  const color = useColorModeValue('black', 'white');

  return (
    <Box bg={bg} color={color} p={8}>
      <Button onClick={toggleColorMode}>
        Toggle {colorMode === 'light' ? 'Dark' : 'Light'}
      </Button>
    </Box>
  );
}

8. Responsive

import { Box, Text } from '@chakra-ui/react';

export default function Responsive() {
  return (
    <Box
      width={{ base: '100%', md: '50%', lg: '25%' }}
      p={{ base: 4, md: 6, lg: 8 }}
    >
      <Text fontSize={{ base: 'md', md: 'lg', lg: 'xl' }}>
        Responsive Text
      </Text>
    </Box>
  );
}

정리 및 체크리스트

핵심 요약

Chakra UI: React 컴포넌트 라이브러리
50+ 컴포넌트: 즉시 사용 가능
접근성: WAI-ARIA 준수
테마: 완전한 커스터마이징
다크 모드: 내장
TypeScript: 완벽한 지원

구현 체크리스트

같이 보면 좋은 글

MUI 완벽 가이드
shadcn/ui 완벽 가이드
React 완벽 가이드

이 글에서 다루는 키워드

Chakra UI, React, UI Library, Theming, Accessibility, TypeScript, Frontend

자주 묻는 질문 (FAQ)

Q. MUI와 비교하면 어떤가요?

A. Chakra UI가 더 간단하고 커스터마이징이 쉽습니다. MUI는 더 많은 컴포넌트를 제공합니다.

Q. 번들 크기는 어떤가요?

A. Tree-shakable이라 사용한 것만 포함됩니다.

Q. Next.js에서 사용할 수 있나요?

A. 네, 완벽하게 호환됩니다.

Q. 프로덕션에서 사용해도 되나요?

A. 네, 많은 기업에서 안정적으로 사용하고 있습니다.