The Missing Layer: Design Taste in AI Agents — Hassan El Mghari, Together AI

한 줄 핵심

AI 앱의 품질 차이는 모델 성능만이 아니라, 나쁜 UI 패턴을 걸러내고 참고 이미지·테마·짧은 반복 개선을 체계화하는 디자인 감각에 크게 좌우된다.

시간별 요약

1. 0:00
   연간 10개 앱을 만들며 디자인이 경쟁력이 된 이유 AI 앱을 많이 만들어 본 경험상, 사용자 수를 크게 좌우한 요소는 모델 자체보다 디자인과 UX였다. Together AI의 오픈소스 모델 실행, 파인튜닝, GPU 클러스터 같은 기반 위에서 앱을 빠르게 만들지만, 결국 눈에 띄는 품질 차이는 화면이 얼마나 보기 좋고 자연스러운가에서 발생한다.
2. 1:41
   로고, 만화, 자막, 클라우드 에이전트 앱들 로고 생성, 만화 제작, 영상 자막 생성, 오픈소스 모델 채팅, 랜딩페이지 변형 생성, GitHub repo를 받아 PR까지 만드는 클라우드 에이전트 등 단순한 단일 페이지 앱들이 소개된다. 이런 앱들은 기능보다 애니메이션과 시각적 완성도에 집중해 만들며, AI 앱이 금방 '슬롭'처럼 보일 수 있다는 문제의식으로 이어진다.
3. 3:08
   바이브 코딩 앱을 드러내는 흔적들 보라색 그라데이션, 기울임꼴 제목, 'scroll to explore', 대문자와 넓은 자간의 pill, 그라데이션 로고, 이모지 남발 같은 패턴이 AI 생성 웹사이트의 전형적 흔적으로 정리된다. 이런 패턴을 20~30개 수준으로 식별해두면, AI가 만든 화면의 허술함을 구체적으로 인지하고 개선 지시를 내리기 쉬워진다.
4. 4:11
   Hallmark: 슬롭 차단 규칙과 테마 라이브러리 Hallmark는 AI 슬롭 패턴을 규칙으로 codify해, 보라색 그라데이션이나 기울임꼴 제목 같은 요소를 피하도록 모델에 직접 제약을 건다. 동시에 다양한 테마를 컨텍스트로 제공해 좋은 참고 이미지를 넣어주면 결과가 크게 좋아지며, 한 번의 프롬프트로도 더 깔끔한 랜딩 페이지 초안을 얻을 수 있다.
5. 6:53
   더 작은 오픈소스 모델로 반복 개선하기 초기 초안은 Claude Code나 Cursor 같은 도구로 만들고, 반복 개선 단계에서는 GLM 5.2 같은 더 작고 빠른 오픈소스 모델을 쓰는 방식이 효율적이다. 비용이 훨씬 낮고 속도가 빠른데도 디자인 결과가 Opus 4.8과 구분하기 어려울 정도로 좋아서, 반복 작업에서는 속도와 비용이 품질만큼 중요하다는 점이 드러난다.
6. 7:30
   어느 페이지가 어느 모델에서 나왔는지 맞히기 GLM 5.2와 Opus 4.8이 만든 랜딩 페이지를 비교하면, 더 저렴하고 빠른 모델이 만든 결과가 시각적으로 충분히 경쟁력 있을 수 있음을 확인할 수 있다. 다만 한 번에 끝내기보다 한두 번의 추가 지시로 로고, 로딩 상태, 애니메이션, 간격을 다듬을 때 품질이 확실히 올라간다.
7. 10:50
   에이전트에 참고 자료와 스크린샷을 주기 가장 중요한 원칙은 에이전트에게 참고 사이트와 스크린샷을 많이 주는 것이다. 좋은 앱을 볼 때마다 저장해두는 영감 저장소를 만들고, 새 앱을 만들 때 그중 여러 스타일을 섞어 보여주면 출력 품질이 크게 좋아지며, 긴 음성 메모 수준의 구체적 프롬프트가 효과적이다.
8. 12:18
   프롬프트당 한두 개 기능만 다루기 기능이 여러 개라면 한 프롬프트에 모두 넣지 말고, 한두 개씩 나눠 상세하게 지시하는 편이 더 낫다. 에이전트가 만든 결과물은 완성본이 아니라 출발점이므로, 추가 컨텍스트와 참고 자료를 계속 넣고 반복하면서 단순하고 세련된 앱으로 발전시켜야 한다.

실무 인사이트

• AI 앱 품질을 높이려면 모델 선택보다 먼저 슬롭 패턴 목록과 선호 테마를 문서화해 프롬프트/에이전트 규칙으로 고정하는 것이 효과적이다.
• 초기 생성에는 강한 모델을 쓰고, 반복 다듬기에는 빠르고 저렴한 모델을 쓰는 2단계 워크플로가 비용 대비 품질을 가장 잘 끌어올린다.
• 참고 스크린샷과 구체적 사용 맥락을 매번 넣는 습관만으로도 결과물이 ‘AI가 만든 것처럼 보이는 문제’를 크게 줄일 수 있다.