지난 글에서 홈 화면에 AI 색상 조합 추천 기능이 있다고 소개했었는데, 앱에 AI를 직접 연결해본 건 이번이 처음이라 기록을 남겨두려 한다.
솔직히 좀 설레기도 하고 긴장도 됐는데, 생각보다 훨씬 수월하게 연결됐다. 그 과정을 정리해보려 한다.
왜 Groq인가?
AI API를 찾아보다가 Groq를 선택했다.
| 특징 | 설명 |
|---|---|
| ⚡ 속도 | 자체 LPU 하드웨어로 초고속 응답 |
| 🆓 무료 | 오픈 소스 LLM 모델 완전 무료 |
| 🌐 한국어 | Llama 모델이 한국어를 잘 이해함 |
| 🔓 호환성 | OpenAI API와 동일한 형식 |
사이드 프로젝트에 유료 API를 붙이는 건 부담이 있었는데, Groq는 오픈 소스 LLM 모델을 완전 무료로 제공한다. 거기다 OpenAI API와 동일한 형식이라 사용법도 익숙했다.
모델은 Llama 3.3 70B를 사용했다. Meta가 개발한 700억 파라미터 오픈 소스 모델로, 한국어 생성 능력이 좋고 JSON 출력 모드도 지원한다.
API 연결하기
1. API 키 발급
https://console.groq.com 접속 → 좌측 메뉴 API Keys → Create Key 버튼 클릭
2. 환경 변수 설정
# .env 파일
EXPO_PUBLIC_GROQ_API_KEY=gsk_xxxxxxxxxxxx3. API 호출
const response = await fetch('https://api.groq.com/openai/v1/chat/completions', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'Authorization': `Bearer ${apiKey}`,
},
body: JSON.stringify({
model: 'llama-3.3-70b-versatile',
messages: [{ role: 'user', content: '사용자 프롬프트 내용' }],
temperature: 0.8,
max_tokens: 1000,
response_format: { type: 'json_object' }, // JSON 형식 강제
}),
});
const data = await response.json();
const result = JSON.parse(data.choices[0].message.content);연결 자체는 금방 됐다. 진짜 손이 많이 간 건 다음 단계였다.
프롬프트 설계
원하는 형태의 응답을 안정적으로 받아내는 게 생각보다 까다로웠다. 핵심 전략은 네 가지였다.
- 역할 부여 : "당신은 비즈 공예 색상 전문가입니다."
- JSON 형식 강제 :
response_format: { type: 'json_object' }+ 프롬프트에도 명시 - 한국어만 강제 : 한자 사용 금지 가이드라인 명시 (이유는 아래에)
- 수량 정확성 : 필수 색상 제외하고 남은 개수만 정확히 추천하도록 명시
let prompt = `당신은 비즈 공예 색상 전문가입니다. 사용자에게 어울리는 색상 조합을 추천해주세요.`;
// 필수 색상, 테마, 추가 정보 추가
if (mandatoryColors.length > 0) {
prompt += `\n\n필수로 포함할 색상: ${mandatoryColors.map(c => `${c.name}(${c.hex})`).join(', ')}`;
}
if (theme) prompt += `\n\n원하는 테마/분위기: ${theme}`;
// 남은 개수 계산해서 전달
const remainingCount = colorCount - mandatoryColors.length;
prompt += `\n\n정확히 ${remainingCount}개의 새로운 색상만 추천해주세요.`;
// JSON 형식 지정
prompt += `
다음 형식으로 ONLY JSON 응답해주세요:
{
"colors": [{"name": "색상이름(한국어)", "hex": "#색상코드"}],
"description": "조합의 분위기 (한국어 1-2 문장)",
"reasoning": "색상이 어울리는 이유 (한국어 1-2 문장)"
}`;마주쳤던 문제들
한자가 섞여 나오는 문제
한국어 모델인데 응답에 중국어 한자가 섞여 나오는 문제가 있었다.
"시각적趣를 눈길 사로잡을 수 있습니다"
"색상들의明度가 조화를 이룹니다"프롬프트에 명시적인 한자 → 한글 변환 가이드를 추가해서 해결했다.
🚫🚫🚫🚫🚫 언어 제한 (절대 위반하지 말것!!!):
- 趣 → "흥미" 또는 "재미"
- 明度 → "밝기"
- 調和 → "조화"
- 淡 → "연한" / 濃 → "진한"
- 深 → "진한"
...더 많은 한자 금지 목록
📝 예시를 따르세요:
좋은 예: "부드러운 분홍과 크림색이 봄날의 느낌을 줍니다."
나쁜 예: "柔한粉色이春天的趣를給합니다." (한자 사용 ❌)강조 다섯 개 + 좋은 예/나쁜 예까지 넣었다. 아직 다른 예외 한자가 안 나온 것일 수도 있지만, 일단 지금은 한자가 보이지 않고 있다.
응답 길이 조절
처음엔 너어어어어어무 길게 나와서 짧게 조절했더니 너무 짧게 나왔다. "1-2 문장"으로 명확히 지정하는 걸로 해결했다.
색상 개수가 안 맞는 문제
사용자가 필수 색상 2개를 선택하고 총 3개를 원하면, AI는 1개만 추천해야 한다. 처음엔 AI가 알아서 계산해줄 거라 생각했는데 그렇지 않았다.... 직접 계산해서 프롬프트에 넘겨주는 걸로 해결했다.
실제 구현 화면
기본 팔레트 색상과 커스텀 색상을 섞어 3가지, 4가지 조합으로 추천받는 화면이다. AI 응답이 완료되면 결과 화면으로 스크롤이 자동으로 내려가도록 구현했다.
마치며
처음으로 AI API를 직접 연결해봤는데, 연결 자체보다 프롬프트를 다듬는 과정이 훨씬 손이 많이 갔다.
AI한테 잘 시키는 것도 실력이라는 걸 몸소 체감했다.
그래도 무료로 이 정도 퀄리티의 AI 기능을 붙일 수 있다는 게 정말 좋았다. 다음 글에서는 백엔드 연동 과정을 담아볼 예정이다.
