클로드 코드 UI 출력이 변질되는 이유와 구조화된 명세로 해결하는 방법

Claude Code로 UI 작업을 하면서 반복된 프롬프트가 일관되지 않은 레이아웃을 반환하고 수렴하지 않는 출력 변화 문제를 겪고 있다면, 그 근본 원인은 아마 프롬프트 품질이 아닐 것입니다. r/ClaudeAI의 상세 게시글에 따르면, 실제 문제는 형식에 있습니다. Claude Code는 산문 설명이 아닌 구조화된 명세서를 기대합니다.

산문 vs. 구조화된 명세: 무엇이 달라졌는가

저자는 UI를 산문으로 설명하면(왼쪽 버튼, 약간 둥근 모서리, 현대적인 느낌) 일관되지 않은 결과가 나온다고 보고합니다. 정확한 16진수 색상 코드, 정확한 글꼴 두께, 정확한 간격, 모든 화면 상태 및 모든 전환이 포함된 구조화된 명세로 전환하자 출력이 '해석적'에서 '바로 이것'으로 바뀌었습니다. 모델이 추측을 멈추면 변화가 사라집니다.

실용적인 워크플로우: 화면 녹화 → MCP 서버

상세한 명세서를 수동으로 작성하는 것은 비현실적입니다. 저자는 대부분의 개발자가 이미 필요한 소스 자료(앱 스토어 데모, 디자인 워크스루, 개발 녹화)를 가지고 있다는 것을 깨달았습니다. 빠진 부분은 이 녹화물을 Claude의 구조화된 형식으로 변환하는 방법이었습니다. 그래서 그들은 정확히 그 작업을 수행하는 MCP 서버를 구축하고 오픈소스로 공개했습니다. 비전은 사용자 자신의 Claude 구독을 통해 실행되므로 API 키 설정이 필요 없습니다.

핵심 요점

도구는 워크플로우 변화에 부차적입니다: 레이아웃을 산문으로 설명하지 마세요. Claude Code로 UI 작업을 한다면 구체적인 값이 포함된 구조화된 명세서를 제공하세요. 게시글 작성자는 다음과 같이 질문합니다: UI 작업에 대한 현재 프롬프트-출력 워크플로우는 무엇인가요?