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를 생성하도록 요청할 수 있습니다. Gemini에 Write me a web page with a form to gather profile information과 같은 요청을 하면 다음과 비슷한 결과가 표시됩니다.
<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 구현
먼저 다음 줄에 표시되는 프롬프트를 통해 Gemini에게 웹페이지에 Material Design을 구현해 달라고 요청하세요.Can you apply material design styles to this page?
참고: 이 Codelab에 제공된 모든 프롬프트는 예시입니다. 이 자료에서 영감을 얻어 인용문으로 사용해도 되며 최상의 결과를 위해 프로젝트의 맥락을 포함해도 됩니다.
다음과 유사한 대답이 표시됩니다.
이 실습에서는 머티리얼 디자인이 사용되지만 원하는 라이브러리를 구현하도록 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.
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. 결론
이 Codelab을 완료했습니다. Gemini를 사용하여 웹페이지에 Material Design을 구현하는 방법을 알아봤습니다. 디자인을 반복하고 생성된 코드를 정리하는 방법도 배웠습니다. 이 새로운 기술을 통해 Material Design이나 유사한 라이브러리를 사용하여 최소한의 설정으로 사용 가능하고 사용자 친화적인 웹페이지를 만들 수 있습니다.