AI에게 필요한 프론트엔드 키워드
8. AI에게 필요한 프론트엔드 키워드
Claude Code와 같은 AI 도구에게 프로젝트를 요청할 때, 단순히 '웹사이트를 만들어줘'라고 하는 것과 'Tailwind CSS를 사용한 반응형 웹사이트를 만들어줘'라고 하는 것은 결과물이 완전히 달라지게 됩니다. 적절한 키워드를 사용하면 더 현대적이고 세련된 결과물을 얻을 수 있습니다. 이 챕터에서는 AI와의 대화에서 활용할 수 있는 핵심 프론트엔드 키워드들을 소개하고, 각각의 특징과 사용법을 알아보겠습니다.
지금 보시는 것은 사용자가 보는 화면(UI)에 대한 것입니다. React나 Vue와 혼동이 되실겁니다. 예를 들어, Boostrap이나 Tailwind는 순수한 HTML, CSS, JavaScript 환경에서도 작동을 하고 React 환경에서도 작동을 합니다.
비유를 하자면 React나 Vue는 골격을 잡는 코드 덩어리인 것이고, Bootstrap이나 Tailwind는 이 골격 위에 어떻게 예쁘게 꾸밀 것인지에 대한 코드 덩어리입니다. 단, 초급자들도 바이브 코딩을 할 때 필요한 키워드이니 Bootstrap이 , Tailwind가 어떤 스타일로 웹 서비스를 만드는지는 홈페이지에 접속해서 한 번 구경하시는 것을 권해드립니다.
1. Bootstrap
Bootstrap은 2011년 트위터에서 만든 CSS 라이브러리로, 가장 오래되고 널리 사용되는 UI 라이브러리입니다. 어떤 UI를 만들 수 있는지 아래 홈페이지를 참고해주세요. 공식 홈페이지입니다. Themes 탭으로 들어가시면 됩니다.
'Bootstrap을 사용해서 만들어줘'라고 요청하면, AI는 이미 만들어진 UI 조각을(버튼, 메뉴 등) 조합해서 빠르게 결과물을 만들어냅니다. Bootstrap의 가장 큰 장점은 일관성입니다. 버튼, 폼, 네비게이션 바, 카드 등 웹사이트에 필요한 거의 모든 요소가 미리 디자인되어 있어, 디자인에 신경 쓸 시간이 없을 때 특히 유용합니다.
위니브에서는 시간이 없고, 가장 빠르게 서비스를 런칭해야 할 때 부트스트랩을 구매하여 사용합니다.
2. Tailwind CSS
Tailwind CSS는 위니브에서도 가장 즐겨 사용하고, 최근 가장 주목받는 CSS 프레임워크입니다. Bootstrap과는 완전히 다른 접근 방식을 취하는데, 미리 만들어진 컴포넌트(UI 조각) 대신 작은 유틸리티 클래스들을 조합해서 디자인을 만듭니다. "Tailwind CSS를 사용해서 만들어줘"라고 요청하면, AI는 bg-blue-500, p-4, rounded-lg 같은 클래스들을 조합해서 디자인을 구성합니다.
Tailwind의 가장 큰 장점은 커스터마이징의 자유도입니다. Bootstrap처럼 정해진 틀에 갇히지 않고, 원하는 대로 디자인을 만들 수 있습니다. 처음에는 HTML이 클래스로 가득 차서 복잡해 보일 수 있습니다. 하지만 익숙해지면 CSS 파일을 왔다갔다 하지 않고 HTML 안에서 모든 스타일링을 완료할 수 있어 개발 속도가 빨라집니다.
위니브에서 바이브 코딩을 하며 Tailwind를 가장 많이 사용하는 이유는 '코드의 양', '의존도' 때문입니다. 스타일이 조금만 복잡해져도 CSS 코드가 몇 천줄이 되는데, 이런 스타일이 HTML 파일 안으로 압축된 스타일로 들어오기 때문에 코드의 양이 다소 줄어듭니다. 또한 다른 파일에 의존하지 않기 때문에 AI가 좀 더 코드를 명확하게 수정할 수 있고, 수정한 것을 인간이 이해하기도 쉽습니다.
3. shadcn/ui
shadcn/ui는 독특한 접근 방식을 가진 컴포넌트 라이브러리입니다. 앞에 2개의 스타일과 다르게 해당 환경은 바닐라 환경에서는 사용하지 못합니다. 다만, '나는 HTML, CSS, JavaScript로 프로젝트를 할 것인데 스타일은 shadcn/ui로 해줘'정도로 바닐라에서도 사용할 수 있으니 스타일을 한 번 보고 가시는 것을 권해드립니다.
4. 그 외 디자인 시스템
Material-UI, 줄여서 MUI는 구글의 머티리얼 디자인을 React로 구현한 라이브러리입니다. "MUI를 사용해서 만들어줘"라고 요청하면, 구글 제품들과 비슷한 느낌의 UI를 얻을 수 있습니다.
Ant Design도 많이 사용합니다. Ant Design은 알리바바에서 만든 디자인 시스템으로, 특히 관리자 페이지나 대시보드에 적합합니다. "Ant Design을 사용해서 만들어줘"라고 요청하면, 깔끔하고 전문적인 느낌의 UI를 얻을 수 있습니다.
5. 효과적인 키워드 조합 방법
AI에게 요청할 때는 여러 키워드를 조합하는 것이 효과적입니다. 예를 들어 "Tailwind CSS와 Framer Motion을 사용한 애니메이션이 있는 랜딩 페이지를 만들어줘"라고 하면, 스타일링과 애니메이션을 모두 갖춘 결과물을 얻을 수 있습니다. Framer Motion은 애니메이션을 만드는 라이브러리입니다.
만약 개발자라고 한다면 "Nextjs와 shadcn/ui을 사용해서 블로그 코드를 만들어줘"라고 할 수 있습니다. 처음부터 사용할 프레임워크와 UI 라이브러리를 함께 명시하는 것이 좋습니다.
반응형 디자인을 원한다면 "mobile-first"(모바일 우선), "responsive"(반응형) 같은 키워드를 추가하세요. 접근성이 중요하다면 "WCAG compliant"(웹 콘텐츠 접근성 지침 준수), "a11y"(접근성) 같은 키워드를 넣으세요. 성능이 중요하다면 "optimized"(최적화), "lazy loading"(지연 로딩) 같은 키워드를 사용하세요.
색상 테마도 명시할 수 있습니다. "다크모드 지원", "네온 색상", "미니멀한 흑백 디자인" 같은 요청을 추가하면, AI는 해당 스타일에 맞는 디자인을 생성합니다.
마지막으로, 참고하고 싶은 서비스를 언급하는 것도 효과적입니다. "Notion 스타일", "google의 OO 서비스 스타일", "YouTube의 스타일"이라고 요청하면의 AI는 해당 서비스의 UI/UX 패턴을 참고해서 만들어줍니다.