<aside> πŸ“Ž 주의 AI Component CreatorλŠ” ν˜„μž¬ 베타 버전이며, Tailwind CSS λΌμ΄λΈŒλŸ¬λ¦¬μ—μ„œλ§Œ μ‚¬μš©ν•  수 μžˆμŠ΅λ‹ˆλ‹€.

</aside>

OpenAI APIλ₯Ό ν™œμš©ν•œ AI Component CreatorλŠ” ν”„λ‘œν† νƒ€μ΄ν•‘ 속도λ₯Ό λ†’μ—¬ μ΅œμ†Œν•œμ˜ μž‘μ—…μœΌλ‘œ μ»΄ν¬λ„ŒνŠΈ μ œμž‘μ„ νš¨μœ¨ν™”ν•©λ‹ˆλ‹€. 동적 μΈν„°νŽ˜μ΄μŠ€λ₯Ό λ§Œλ“€κ±°λ‚˜ λ””μžμΈ 컨셉을 κ²€ν† ν•  λ•Œμ—λ„ μ›Œν¬ν”Œλ‘œμš°λ₯Ό κ°„μ†Œν™”ν•  수 μžˆμŠ΅λ‹ˆλ‹€.

κ·Έ 방법을 μ†Œκ°œν•©λ‹ˆλ‹€:

  1. ν”„λ‘¬ν”„νŠΈ 기반 섀계: ν•„μš”ν•œ 것을 μ„€λͺ…ν•˜λŠ” ν”„λ‘¬ν”„νŠΈλ₯Ό μž…λ ₯ν•˜κΈ°λ§Œ ν•˜λ©΄ AIκ°€ λ‚˜λ¨Έμ§€λ₯Ό μ²˜λ¦¬ν•˜κ³  ν”„λ‘œν† νƒ€μž…μ„ μœ„ν•œ λ§žμΆ€ν˜• μ»΄ν¬λ„ŒνŠΈλ₯Ό μ¦‰μ‹œ μƒμ„±ν•©λ‹ˆλ‹€.
  2. μ‹œκ°„ μ ˆμ•½: μˆ˜λ™ λ””μžμΈ μž‘μ—…μ€ 이제 κ·Έλ§Œν•˜μ„Έμš”. 이 λ„κ΅¬λŠ” μ»΄ν¬λ„ŒνŠΈ 생성에 μ†Œμš”λ˜λŠ” μ‹œκ°„μ„ 쀄이고 전체 그림에 집쀑할 수 μžˆλ„λ‘ λ„μ™€μ€λ‹ˆλ‹€.
  3. μ»€μŠ€ν„°λ§ˆμ΄μ§•: AI Component CreatorλŠ” ꡬ성 μš”μ†Œμ˜ λͺ¨λ“  츑면을 μ»€μŠ€ν„°λ§ˆμ΄μ§•ν•  수 있으며, ν”„λ‘œμ νŠΈλ³„ μš”κ΅¬μ‚¬ν•­μ— 맞게 ꡬ성 μš”μ†Œλ₯Ό μ‘°μ •ν•  수 μžˆμŠ΅λ‹ˆλ‹€.

Zeg2DP_jD4D4xSm3_07.mp4

AI Component CreatorλŠ” 특히 λ‹€μŒκ³Ό 같은 λΆ„λ“€μ—κ²Œ μΆ”μ²œν•©λ‹ˆλ‹€.

μ»΄ν¬λ„ŒνŠΈ 생성 방법

  1. OpenAI μ›Ήμ‚¬μ΄νŠΈμ—μ„œ OpenAI API Keyλ₯Ό μ·¨λ“ν•©λ‹ˆλ‹€.
  2. Editor둜 μ΄λ™ν•˜μ—¬ Quick Tools Quick Tools νŒ¨λ„μ—μ„œ [AI Component Creator]λ₯Ό μ—½λ‹ˆλ‹€.
  3. Settings 탭을 μ—΄κ³  [OpenAI API Key] ν•„λ“œμ— μ·¨λ“ν•œ API Keyλ₯Ό λΆ™μ—¬λ„£μŠ΅λ‹ˆλ‹€.
  4. ν”„λ‘¬ν”„νŠΈ(Prompt) 탭을 μ—΄κ³  λ§žμΆ€ν˜• μ»΄ν¬λ„ŒνŠΈλ₯Ό μƒμ„±ν•©λ‹ˆλ‹€.

Zeg2Ov_jD4D4xSm9_08.avif

κΏ€νŒ

  1. ν”„λ‘¬ν”„νŠΈ μ„ΈλΆ€ 사항: AI Component Creatorμ—μ„œ μ΅œμƒμ˜ κ²°κ³Όλ₯Ό μ–»μœΌλ €λ©΄ 색상, νƒ€μ΄ν¬κ·Έλž˜ν”Ό, λ ˆμ΄μ•„μ›ƒ μ·¨ν–₯ λ“± ꡬ체적인 λ””μžμΈ μš”κ΅¬ 사항을 ν¬ν•¨ν•œ λͺ…ν™•ν•˜κ³  μƒμ„Έν•œ ν”„λ‘¬ν”„νŠΈλ₯Ό μ œκ³΅ν•΄μ•Ό ν•©λ‹ˆλ‹€. μƒμ„±ν•˜λ €λŠ” μ»΄ν¬λ„ŒνŠΈμ˜ νŠΉμ„±κ³Ό κΈ°λŠ₯이 ꡬ체적일수둝 AIκ°€ μƒμ„±ν•˜λŠ” κ²°κ³Όκ°€ 더 μ •ν™•ν•΄μ§‘λ‹ˆλ‹€.

μ˜ˆμ‹œ: μž…λ ₯ ν•„λ“œλ₯Ό μƒμ„±ν•˜κ³  κ·Έ μœ„μ— "Email"μ΄λΌλŠ” 라벨을 λ°°μΉ˜ν•©λ‹ˆλ‹€. 라벨의 κΈ€κΌ΄ ν¬κΈ°λŠ” 16px둜 ꡡ게 ν•©λ‹ˆλ‹€. μž…λ ₯ ν•„λ“œμ˜ ν•˜λ‹¨μ€ 2px의 μ‹€μ„ μœΌλ‘œ, 초점이 λ§žμΆ°μ§€λ©΄ νŒŒλž€μƒ‰ ν…Œλ‘λ¦¬κ°€ λ˜λ„λ‘ ν•©λ‹ˆλ‹€. 2. λ‹€μ–‘ν•œ ν”„λ‘¬ν”„νŠΈλ₯Ό μ‹œλ„ν•΄ λ³΄μ„Έμš”: AI Component Creator의 잠재λ ₯을 μ΅œλŒ€ν•œ ν™œμš©ν•˜κΈ° μœ„ν•΄ λ‹€μ–‘ν•œ ν”„λ‘¬ν”„νŠΈλ₯Ό μ‹œλ„ν•΄ λ³΄μ„Έμš”. λ‹€μ–‘ν•œ 단어와 문ꡬ 쑰합을 μ‹œλ„ν•˜μ—¬ μƒμ„±λ˜λŠ” μ»΄ν¬λ„ŒνŠΈμ— μ–΄λ–€ 영ν–₯을 λ―ΈμΉ˜λŠ”μ§€ ν™•μΈν•˜κ³ , ν”„λ‘œν† νƒ€μž…μ˜ μƒˆλ‘œμš΄ κ°€λŠ₯성을 λ°œκ²¬ν•΄ λ³΄μ„Έμš”.