Trae.ai에서 자연어 프롬프트를 활용한 시각적 커스터마이징
Source: Dev.to
Source:
앱의 외관과 느낌을 정확히 다듬는 방법 – CSS를 작성하거나 프롬프트를 무작위로 시도하지 않고도
Trae.ai와 함께 아이디어를 빠르게 MVP로 전환하는 “Turn Ideas into MVP Fast with Trae AI” 시리즈 2부, 신뢰할 수 있는 바이브 코딩.
1부 읽기
Turn Vibe Coding from Sometimes Magic to Reliably Powerful
MVP를 만들었습니다. 작동은 하지만 친구에게 보여주자 “이거 다 끝난 거야? 좀… 일반적인 느낌이야.” 라는 말을 듣게 됩니다.
이를 고치려 시도합니다. Trae.ai에 다음과 같이 입력합니다:
“현대적이고 친근하게 보여줘.”
Trae가 무언가를 업데이트합니다: 색상이 바뀌고, 폰트가 바뀔 수도 있습니다. 하지만 여전히 상상한 대로는 아닙니다. 다시 시도합니다:
“더 멋진 색상과 더 나은 간격을 사용해줘.”
반복이 계속됩니다. 토큰이 더 많이 소모되고, 좌절감도 커집니다.
그때 갑자기 깨닫게 됩니다: 시각적 의도를 공유된 어휘 없이 전달하기는 어렵다는 것을.
하지만 이미 제품을 만들고 사용자와 대화하느라 바쁘기 때문에 디자인 용어를 배우거나 CSS 코드를 작성할 시간이 없습니다.
이 글에서는 Trae가 어떻게 모호한 시각적 요청을 AI가 신뢰성 있게 실행할 수 있는 정확한 프롬프트로 변환해 주어, 여러분의 비전을 손쉽게 구현할 수 있게 하는지 배웁니다.
Trae에게 시각적 방향을 제공하는 두 가지 방법
1️⃣ 텍스트 전용 프롬프트
원하는 외관과 느낌을 명확한 언어로 설명하세요.
예시:
- “미니멀하고 현대적인 인터페이스.”
- “활기차고 장난기 있는 색상 구성.”
Trae는 레이아웃, 버튼, 색상 구성 전반에 걸쳐 이러한 아이디어를 적용합니다.
Note: 스타일은 주관적입니다. “미니멀”이나 “현대적”이라는 의미는 사람마다, 그리고 서로 다른 대형 언어 모델(LLM)마다 다를 수 있습니다.
2️⃣ 시각적 참고 자료 + 텍스트
원하는 스타일을 담은 참고 이미지, 웹사이트 URL, 혹은 Figma 디자인을 제공하세요.
Trae는 색상, 타이포그래피, 간격과 같은 패턴을 분석한 뒤, 해당 스타일을 앱에 적용합니다.
두 방법 모두 단일 요소, 여러 컴포넌트, 혹은 전체 앱을 수정하는 데 사용할 수 있어, 시각적 경험을 빠르고 간단하게 다듬을 수 있습니다.
언제 어떤 방법을 사용해야 할까
| 상황 | 권장 접근 방식 |
|---|---|
| 스타일을 명확히 설명할 수 있고(예: “미니멀리스트”, “모던”, “활기찬”) 약간의 해석 차이를 괜찮아한다면 | 텍스트 프롬프트 – 가장 빠르게 시작할 수 있음. |
| 특정 미학이나 디자인 패턴을 복제해야 할 경우(예: 경쟁사의 랜딩 페이지, Figma 목업) | 시각적 레퍼런스 – Trae에게 분석할 구체적인 예시를 제공함. |
| 방향성과 정밀성을 모두 원한다면 | 두 가지를 모두 결합 – 전체적인 방향을 위해 텍스트 프롬프트로 시작하고, 세밀한 제어를 위해 시각적 레퍼런스를 추가. |
실제로 많은 팀이 톤을 설정하기 위해 텍스트 프롬프트로 시작하고, 결과가 특정 스타일과 일치해야 할 때 시각적 레퍼런스를 추가합니다. 이러한 균형은 반복 속도를 빠르게 유지하면서 최종 시각적 경험에 대한 정밀한 제어를 가능하게 합니다.
Watch the Demo
Start from 03:00 onwards to see the workflow in action.
추측은 필요 없습니다. 끝없는 반복도 없습니다. 원하는 UI를 정확히 만들 수 있는 명확한 지시만 제공하므로 시간을 절약하고 토큰 소모를 줄일 수 있습니다!
시각적 미학 스타일
시각적 미학 스타일
| 스타일 이름 | “Code‑Talk” 설명 (다음 키워드 사용) |
|---|---|
| Neubrutalism | “고대비 UI, 3px solid black borders, hard box‑shadows (offset 5px, 0 blur), 선명한 고채도 배경, 그리고 반경이 0인 코너.” |
| Bento Grid | “모듈형 rectangular tiles, 정렬된 그리드 시스템, 큰 rounded‑3xl (24px) corners, 일관된 간격, 그리고 다양한 타일 크기로 명확한 계층 구조.” |
| Aurora UI | “투명한 느낌의 large blurred mesh gradients, backdrop-filter: blur(100px), 반투명 유리 레이어, 그리고 배경에 있는 선명하고 유기적인 색상 블롭.” |
| Claymorphism | “3D ‘스퀴시’ 플라스틱 느낌. double‑layered shadows 사용: 외부 shadow-lg와 inner inset shadows 로 깊이감 생성. 매우 둥근 코너.” |
| Retro‑Pulp | “아날로그 매력, grainy/noise textures, 흙빛 ‘더러운’ 톤 (off‑whites, burnt oranges), chunky serif typography, 그리고 1px ‘불완전한’ 검은 스트로크.” |
| Cyberpunk | “다크 모드 (#050505), neon glow effects (text-shadow), 전기 핑크/시안 강조, 그리고 외부 글로우와 클리핑된 코너가 있는 2px solid borders.” |
| Skeuomorphism | “촉각적인 3D 효과. dual‑shadows (왼쪽 위 밝게, 오른쪽 아래 어둡게) 사용해 요소가 배경에서 형성된 듯 보이게 함. :active 시 반전.” |
| Glassmorphism | “투명한 ‘서리 낀 유리’ 패널, backdrop-blur-md 사용, 흰색 반투명 경계선 (1px, 20 % 불투명도), 부드러운 다색 그라디언트.” |
| Flat Design | “순수 2D 미학. Zero shadows, 그라디언트 없음, 고체 매트 색상 팔레트, 그리고 깔끔하고 전문적인 마무리를 위한 간단한 8px 둥근 코너.” |
| Minimalist | “단색 팔레트, 극단적인 whitespace, 1px 헤어라인 경계선, 그림자 없음, 고품질 산세리프 (Inter/Geist) 타이포그래피.” |
실험을 즐기고 다양한 스타일이 앱의 외관과 느낌을 어떻게 바꾸는지 확인해 보세요!
리소스
- Trae AI (10× AI Engineer)
- How to use Trae.ai (YouTube playlist)
이 글은 3부 시리즈 중 두 번째 포스트입니다: Turn Ideas into MVP Fast with Trae AI.
파트 3을 기대해 주세요!
# Powerful!자연어 프롬프트를 이용한 Trae.ai 시각적 커스터마이징
Trae AI와 디버깅 및 기능 반복