AI가 만든 결과를 판단하는 방법
프로젝트 소개
한 학기동안 수강하게 된 프론트엔드 수업이 마무리되어가고 있다. 나는 최종 프로젝트 과제로 레퍼런스 이미지에서 시각적 스타일 요소를 추출하여 새로운 UI 디자인을 생성하도록 도와주는 인터페이스인 Style Print를 제작하였다.
StylePrint는 여러 UI 레퍼런스 이미지를 업로드하면, 각 이미지에서 디자인 요소를 추출하고 이를 조합해 새로운 React/Tailwind UI 코드를 생성하는 프로젝트이다. 매주 현직 개발자 분으로부터 멘토링을 그룹별로 멘토링을 받았는데, 그 과정에서 중요한 건 AI가 결과를 만들어내는 것 자체가 아니라, AI가 만든 결과를 내가 판단할 수 있는 상태로 만드는 것이라는 사실을 알게되었다.
그럴듯한 결과의 문제
AI로 UI를 만들면 결과가 꽤 그럴듯하게 나온다. 색도 적당히 맞고, 레이아웃도 나쁘지 않아 보이고, Tailwind 코드도 일단 동작한다. 그런데 코드 자체 만으로는 내가 원했던 색을 쓴 건지, 레퍼런스의 어떤 부분을 가져온 건지, 접근성 기준은 만족하는지, 코드가 재사용 가능한지 판단하기 어려웠다.
특히 UI 레퍼런스를 여러 개 섞는 프로젝트에서는 더 그렇다. 예를 들어 색상은 1번 레퍼런스에서 가져오고, 타이포그래피는 2번에서 가져오고, 레이아웃은 3번에서 가져왔다고 해도, 최종 결과만 보면 이 조합이 의도대로 반영되었는지 알기 어렵다.
IntentSpec이라는 연결고리
그래서 이 프로젝트에서는 이미지에서 바로 코드로 가지 않고, 중간에 IntentSpec이라는 구조를 둔다. 레퍼런스에서 추출한 디자인 요소를 색상, 타이포그래피, 레이아웃, 간격, 컴포넌트 스타일 같은 facet으로 나누고, 어떤 요소가 어떤 레퍼런스에서 왔는지 기록한다.
대략 이런 식이다.
type IntentSpec = {
chosen: {
colorRefId?: string
typographyRefId?: string
layoutRefId?: string
spacingRefId?: string
componentStyleRefId?: string
}
normalized: {
palette?: Record<string, string>
typography?: object
layout?: object
spacing?: object
componentStyle?: object
}
provenance: Record<string, Evidence>
conflicts: ConflictCard[]
repairs: RepairPlan[]
coherenceScore?: number
}처음에는 이 구조가 조금 번거롭게 느껴졌다. 그냥 이미지를 넣고 바로 코드를 생성하면 더 빠르지 않을까 싶었다. 하지만 진행할수록 이 중간 구조가 프로젝트의 핵심이라는 생각이 들었다.
IntentSpec이 있으면 “이 결과가 내 의도와 맞는가?”를 더 구체적으로 물을 수 있다.
- 색상은 의도한 팔레트를 썼는가?
- 타이포그래피 크기는 너무 작지 않은가?
- compact한 레이아웃인데 spacing이 과하게 넓지는 않은가?
- 생성된 코드가 원래 의도한 facet을 실제로 반영했는가?
AI가 만든 결과를 감으로 보는 것이 아니라, 비교하고 검토할 수 있는 대상으로 바꾸는 것이다.
AI가 할 일과 코드가 할 일
멘토링에서 받았던 피드백 중 하나는, 모든 것을 LLM에 맡기지 말고 결정론적으로 처리할 수 있는 것은 코드를 짜서 해결하는 게 더 낫다는 것이었다. 그래서 처음에는 LLM API가 모든 특성을 추출하도록 했지만, 토큰을 아끼고 시스템 안정성을 높이기 위해 특성별로 시스템을 바꾸었다. 색상 추출처럼 픽셀 기반으로 계산할 수 있는 것은 코드가 처리하는 반면, 이미지에서 레이아웃 분위기나 컴포넌트 스타일을 해석하는 일, 생성된 코드가 의도를 잘 반영했는지 audit하는 일은 AI를 사용한다. 마지막 React/Tailwind 코드 생성은 v0에 맡긴다. 이 구조를 만들면서 결국 AI가 잘하는 일과 사람이 기준을 세워야 하는 일을 분리해야 했고, 그렇게 했을 때 과정에서 무엇이 문제인지 추적할 수 있었고 결과적으로 결과물의 품질을 향상시키는 것도 도움이 되었다.
결국 중요한 건 나의 취향
멘토님이 특히 강조하셨던 건 '내 취향, 내 생각, 내 결정'이었다. 실제로 AI를 많이 쓸수록 이 말이 중요해졌다. AI는 내가 원하는 것을 알아서 잘 물어봐주지 않는다. 결과도 그럴듯하게 내놓기 때문에, 내가 대충 보면 그냥 넘어가게 된다. 결국 내가 무엇을 원하는지 모르면, AI가 만든 결과를 판단할 기준도 없어진다.
- 이 서비스의 핵심 목적은 무엇인가?
- 해당 목적을 가진 사용자는 디자이너인가, 프론트엔드 개발자인가, 아니면 빠르게 프로토타입을 만들고 싶은 사람인가?
- 결과물은 창의적인 시안이어야 하는가, 아니면 바로 붙여넣어 동작하는 코드여야 하는가?
이러한 질문에 답하는 과정에서 서비스의 방향성을 더욱 뾰족하게 만들 수 있었다.
AI 활용 범위
지금 프로젝트는 마무리 단계에 와 있다. 이제 각각의 기능이 의도한 대로 잘 움직이는지, 실제로 의도한 대로 reference를 잘 반영한 UI 디자인을 만드는지, 그럼에도 UI 디자인의 coherence나 심미성을 향상하기 위해서는 어떻게 해야할지를 검증해야 한다.
이러한 과정에서 AI의 도움을 받을 수 있을 것이라고 생각했다. '내가 직접 의도한 것'이 잘 작동하는지에 대한 기준을 내가 만들면, AI가 그것을 test를 통해 점수를 내고 iterative하게 수정하는 방식으로 지금까지 짠 코드를 리뷰할 예정이다.
마무리
이 프로젝트를 하면서 배운 것은 AI를 더 많이 쓰는 법이라기보다, AI가 만든 결과를 내가 이해하고 판단할 수 있게 만드는 법이었다.
AI는 빠르게 결과를 만든다. 하지만 그 결과가 내가 원한 것인지, 어떤 기준에서 좋은 것인지, 무엇을 고쳐야 하는지는 결국 내가 정해야 한다. 그래서 AI 시대에 더 중요해지는 것은 단순히 프롬프트를 잘 쓰는 능력이 아니라, 내가 원하는 것을 구조화하고, 판단 기준으로 바꾸고, 반복 가능한 검증 과정으로 만드는 능력인 것 같다.
결국 좋은 AI 활용은 내 일을 무작정 대신 시키는 것이 아니라, 내가 더 명확하게 결정할 수 있도록 돕는 구조를 만드는 일에 가까울 것이라고 생각한다.