코딩 에이전트의 화면 디자인이 매번 달라지는 문제
로 버튼이나 화면 요소를 만들 때, 같은 프로젝트인데도 세션마다 색상, 간격, 글자 크기가 조금씩 달라질 수 있다. 예를 들어 첫 세션에서는 파란색을 #3B82F6으로 쓰고, 다음 세션에서는 #2563EB을 쓰고, 또 다른 세션에서는 bg-blue-500 같은 다른 표현을 고를 수 있다. 간격도 1rem, 16px, gap-4처럼 섞이고, 글자 크기도 text-xl, 1.25rem, 20px처럼 흔들릴 수 있다.
원인은 에이전트가 참고할 수 있는 구조화된 색상표나 토큰 표가 없기 때문이다. , , .cursor/rules 같은 규칙 파일에 브랜드 색상을 문장으로 써 두어도, 모델은 실제 코드를 만들 때 어떤 값을 써야 하는지 다시 해석하고 추측해야 한다. 로 색상표를 넣는 방식은 작은 프로젝트나 한 번 쓰는 작업에는 어느 정도 도움이 되지만, 대화가 길어지면 다시 흔들릴 수 있다.
..js를 기준 파일로 두고 에이전트에게 읽게 하는 방식은 자연어 규칙보다 더 구조적이라 낫다.
핵심 포인트
- 같은 요청도 세션이 바뀌면 색상, 간격, 글자 크기가 다르게 생성될 수 있다.
- 자연어 규칙 파일만으로는 에이전트가 정확한 디자인 값을 계속 유지하기 어렵다.
- 색상과 간격을 토큰 표처럼 구조화하면 에이전트가 추측할 여지가 줄어든다.
- , , .cursor/rules는 작업 규칙에는 좋지만 디자인 값의 유일한 기준으로는 약할 수 있다.
- ..js를 기준 파일로 삼는 방식은 더 일관된 UI 생성에 도움이 될 수 있다.