Gemini Code Assist로 스타일리시하게 만들기

Gemini Code Assist로 스타일리시하게 코딩하기

이 Codelab 정보

subject최종 업데이트: 6월 20, 2024
account_circle작성자: Aaron Wanjala

1. 시작하기 전에

이 Codelab에서는 Gemini Code Assist를 사용하여 웹사이트에 Material Design을 구현하는 방법을 보여줍니다. Material Design이 구현되면 디자인을 반복하여 사용자 환경을 개선하고 기능을 추가하도록 변경할 수 있습니다. 이 워크숍을 마치면 CSS를 작성하지 않고도 Gemini를 통해 Material Design 또는 이와 유사한 라이브러리를 사용하여 유용하고 사용자 친화적인 웹페이지를 만들 수 있습니다.

기본 요건

  • HTML, CSS, JavaScript에 대한 이해
  • 웹 디자인에 관한 기본적인 이해

학습 내용

  • Gemini Code Assist로 스타일 지정 라이브러리를 구현하는 방법
  • CSS를 수동으로 조정하는 대신 Gemini Code Assist를 사용하여 디자인을 반복하는 방법
  • Gemini Code Assist가 원하는 스타일로 코드에 기여하도록 효과적으로 요청하는 방법

필요한 항목

  • Google Cloud를 위한 Gemini가 사용 설정된 Google Cloud 프로젝트 액세스
  • 스타일을 지정할 웹페이지 또는 웹페이지를 만들 폴더

2. 설정

이 Codelab에서는 Gemini가 사용 설정된 Google Cloud 프로젝트에 대한 액세스 권한과 스타일을 지정할 웹페이지가 필요합니다. Cloud 콘솔의 오른쪽 상단에 있는 Gemini 버튼을 클릭하고 아래 패널에서 '사용 설정'을 클릭하면 새 프로젝트에서 Gemini를 사용 설정할 수 있습니다.

Gemini 사용 설정

웹페이지의 스타일을 지정하려면 먼저 사용할 수 있는 웹페이지를 자유롭게 사용하세요. 또는 Gemini가 사용 설정되어 있으므로 웹페이지를 생성해 달라고 요청할 수 있습니다. Write me a web page with a form to gather profile information과 같은 요청을 Gemini에 프롬프트하면 다음과 유사한 결과가 표시됩니다.

<html lang="en">
<head>
   
<meta charset="UTF-8">
   
<meta name="viewport" content="width=device-width, initial-scale=1.0">
   
<title>Get Profile Information</title>
</head>
<body>

   
<h2>Get Profile Information</h2>

   
<form method="post">  
       
<label for="name">Name:</label>
       
<input type="text" id="name" name="name" required>

       
<label for="address">Address:</label>
       
<input type="text" id="address" name="address" required>

       
<input type="submit" value="Save Profile">
   
</form>

</body>
</html>

3. Material 구현

먼저 다음 줄의 프롬프트와 함께 Google 웹페이지에 Material Design을 구현해 달라고 Gemini에 요청합니다.
Can you apply material design styles to this page?

참고: 이 Codelab에 제공된 모든 프롬프트는 예시입니다. 이 자료에서 영감을 얻어 인용문으로 사용해도 되며 최상의 결과를 위해 프로젝트의 맥락을 포함해도 됩니다.

다음과 유사한 대답이 표시됩니다.

Material Design 구현

이 실습에서는 Material Design을 사용했지만 원하는 라이브러리를 구현해 달라고 Gemini에 요청할 수도 있습니다. Gemini에서 예상한 것과 다른 버전의 Material을 가져오는 경우 프롬프트에 원하는 버전을 포함해 보세요.

4. 디자인 반복

또한 Gemini는 CSS를 직접 자세히 살펴보지 않고도 웹페이지 디자인을 반복할 수 있습니다. Gemini에 이 디자인을 반복해서 적용해 달라고 요청하는 나만의 프롬프트를 구상해 보세요. 이러한 작업에서 최상의 결과를 얻으려면 변경하려는 요소와 원하는 결과를 최대한 간결하게 설명하는 데 집중하세요.

Can we center the content on this page?

디자인 반복

Gemini에서 페이지에 기능 요소를 추가하도록 할 수도 있습니다. 양식에 입력란을 추가하거나 기능을 추가해 달라고 Gemini에 요청하세요.

Can we add some more fields to this form, like phone number, email address?

페이지에 기능 요소 추가

5. 조직

Gemini에서 프로젝트에 가장 유용한 위치에 결과를 정리하도록 할 수도 있습니다. 이 경우에는 이 하나의 파일에서 디자인을 반복하는 데 중점을 두므로 style 태그가 이상적입니다. 진행하면서 변경사항을 여러 곳에 적용하지 않으려면 스타일 태그에 대답을 포함하도록 Gemini에 요청하세요.

Can you put this css in a style tag? I'd like to keep everything in this HTML page.

Material Design 구현

6. 접근성

Material Design에 명시된 대로 접근성과 사용성은 디자인의 필수 요소입니다. 이 점을 염두에 두고 Gemini에게 입력 내용에 올바른 유형이 사용되었는지 확인해 달라고 요청해 보세요. 이렇게 하면 스크린 리더와 같은 접근성 도구에서 이러한 요소를 올바르게 인식할 수 있습니다.

Can you make sure to use the right types of inputs for each field? Tel for telephone, email for email, etc.

접근성 변경사항

7. 결론

최종 HTML - Material Design 구현최종 웹페이지 - Material Design 구현

이 Codelab을 완료했습니다. Gemini를 사용하여 웹페이지에 Material Design을 구현하는 방법을 알아봤습니다. 디자인을 반복하고 생성된 코드를 정리하는 방법도 배웠습니다. 이 새로운 기술을 통해 Material Design이나 유사한 라이브러리를 사용하여 최소한의 설정으로 사용 가능하고 사용자 친화적인 웹페이지를 만들 수 있습니다.