Claude에서 더 나은 UI를 얻는 방법: 먼저 연구하고, 다음에 구축
I’m happy to translate the article for you, but I don’t have the content of the post. Could you please paste the text you’d like translated (excluding the source line you already provided)? Once I have the article’s content, I’ll translate it into Korean while preserving the original formatting, markdown, and technical terms.
“Build Me a Component”의 문제점
Claude에게 UI 컴포넌트를 직접 만들어 달라고 요청하면, 훈련 데이터에서 끌어온 결과가 나옵니다. 즉, Claude가 본 패턴들이 섞여 나오게 되는데—좋은 것, 오래된 것, 그리고 그냥 이상한 것까지 섞여 있습니다.
저는 Angular AI UI 컴포넌트 라이브러리를 위해 타이핑 인디케이터(AI가 생각하고 있을 때 표시되는 애니메이션 점)를 만들고 있었습니다. 첫 번째 직감은 Claude에게 바로 만들어 달라고 요청하는 것이었습니다.
결과: 기능은 하지만 기억에 남지 않는—2019년 튜토리얼 예제와 똑같이 보이는 세 개의 튀는 점.
The Fix: Make Claude a Design Researcher First
Research Prompt
I asked Claude Code (using Opus 4.5 in research mode) to research the problem first:
Research how typing indicators are used in modern web apps,
especially AI chats like ChatGPT, Claude, and Gemini.
Look at design patterns, animations, and how they signal
different states.Giving it specific examples of well‑designed apps makes a huge difference. Claude now has a reference point for what “good” looks like in this specific context.
The research returned insights I wouldn’t have thought to look for—how ChatGPT uses a pulsing effect vs. Claude’s shimmer animation, how Gemini handles the transition between thinking and responding, and accessibility considerations for motion‑sensitive users.
Feed the Research Back
I take the entire research document and paste it into a new conversation, then ask Claude to build the component with that context:
Based on this research, build me a typing indicator component
for Angular that follows modern AI chat patterns. Make it
polished and professional.Result: A night‑and‑day difference. Instead of generic bouncing dots, I got a component with:
- Subtle animation timing that feels natural
- Smooth state transitions
- Design choices that actually make sense for an AI‑chat context
- Details I wouldn’t have specified myself
It looks like something that belongs in a production app, not a weekend hackathon.
Why This Works
Claude는 패턴을 따르는 데 능숙하지만, 문제는 어떤 패턴을 따르는가입니다. 처음부터 무언가를 만들라고 요청하면, 알고 있는 모든 것을 평균 내어 중간 수준의 디자인 품질—안전하고, 지루하며, 기억에 남지 않는—을 만들어냅니다.
최고의 앱들이 이 정확한 문제를 어떻게 해결하는지에 대한 집중된 연구를 제공하면, 훨씬 더 명확한 기준점을 갖게 됩니다. 이제는 추측이 아니라, 실제로 모방하고 싶은 앱들의 구체적인 패턴을 적용하는 것입니다.
이렇게 생각해 보세요: Claude에게 “버튼을 디자인해 달라”고 요청하는 것과 “Stripe 대시보드와 같은 버튼을 디자인해 달라”고 요청하는 것은 완전히 다른 결과를 낳습니다. 연구 모드는 이러한 참조들을 자동으로 찾아줍니다.
내 작업 흐름
UI 구성 요소가 멋지게 보이도록 해야 할 때:
- Step 1: Claude (Opus 4.5, research mode)에게 문제를 조사하도록 요청합니다.
Research how [component] is implemented in modern apps like [2‑3 specific well‑designed examples]. Focus on design patterns, animations, and UX details. - Step 2: 조사 결과를 검토합니다 (때때로 질문하지 않았던 내용이 드러납니다).
- Step 3: 전체 조사 문서를 새 대화에 붙여넣습니다.
- Step 4: 해당 컨텍스트를 가지고 Claude에게 구현을 요청합니다.
추가로 5분 정도의 조사가 일반적인 출력을 실제로 전문적으로 보이게 다듬는 데 드는 수 시간을 절약해 줍니다.
내가 이것을 사용할 때
나는 모든 컴포넌트에 대해 이 방법을 쓰지는 않는다. 폼 필드나 기본 레이아웃 같은 간단한 것들은 — Claude가 별도의 리서치 없이도 충분히 처리한다.
하지만 다음과 같이 다듬어진 느낌이 필요한 경우에는:
- 복잡한 인터랙티브 컴포넌트
- 애니메이션 및 마이크로 인터랙션
- “감각”이 중요한 컴포넌트(채팅 UI, 대시보드, 온보딩 흐름 등)
- 사용자가 반복해서 보게 될 모든 요소
이때 리서치‑우선 접근이 효과적이다.
더 큰 요점
AI‑지원 개발은 단순히 속도에 관한 것이 아닙니다. 올바른 단계에서 AI를 활용하는 것이 핵심입니다.
대부분의 사람들은 Claude를 코드 생성기로 사용하지만, 프롬프트를 다르게 하면 연구원, 디자인 컨설턴트, 그리고 패턴 라이브러리 역할도 할 수 있습니다.
제가 만든 타이핑 인디케이터는 이제 제 라이브러리에서 가장 보기 좋은 컴포넌트 중 하나가 되었습니다. 제가 디자이너라서가 아니라, 코드를 한 줄도 작성하기 전에 Claude에게 디자인 리서치를 맡겼기 때문입니다.
다음 UI 컴포넌트를 만들 때도 시도해 보세요: 먼저 리서치하고, 그 다음에 구축하세요.