클로드 Opus 5.5, 디자인 레퍼런스로 날개 달다

Eric Park 빌더는 Anthropic의 Opus 5.5 모델이 UI 레퍼런스를 얼마나 효과적으로 활용하는지 검증하기 위한 실험을 진행했다.

이번 실험에서는 Mobbin이 보유한 60만 개 이상의 UI 레퍼런스 데이터를 활용하여 기획 문서(PRD)만으로 제작된 초기 결과와 레퍼런스 제공 후의 결과물을 비교했으며, 의사 결정 근거와 핵심 텍스트 중심의 보고서 작성을 요청했다.

Opus 5.5에 대한 UX 및 디자인 업계의 평가는 엇갈렸다. 긍정적인 평가로는 UI 플로우 해결 능력과 UX 실험에 대한 능숙함, 그리고 UX 분야에서 최상위 모델이라는 의견이 있었다.

반면 부정적인 평가로는 UX 라이팅 역량 부족, 디자인 개선 미비, 스크린샷 레퍼런스 활용 시 성능 저하 등이 제기되었다. 이러한 상반된 의견들을 객관적으로 판단하기 위해 실제 프로젝트에 적용하여 성능을 검증하는 실험이 필요하다는 결론에 이르렀다.

사람들은 흔히 시각적으로 예쁜 디자인을 잘하는 디자인으로 평가하지만, 디자인 능력은 단순한 심미성을 넘어선 복합적인 요소로 구성된다. 시각적으로 사용자를 붙잡고 정보를 효과적으로 전달하는 능력도 중요하지만, 그 외에도 여러 중요한 역량이 있다.

여기에는 자료와 레퍼런스를 찾아 분석하는 리서치 능력, 사용자 시나리오와 화면 구성을 기획하는 능력, 그리고 산출물과 최종 결과물을 검증하는 QA 능력 등이 포함된다.

서비스 개발은 브레인스토밍, 기획, 디자인, 프로토타입, 검증의 5단계 워크플로우로 진행된다. 첫 단계인 브레인스토밍에서는 시장 및 경쟁사 리서치를 통해 아이디어를 발굴한다.

이후 기획 단계에서는 서비스의 기능과 필요한 화면을 구체화하고, 디자인 단계에서는 화면을 시각화하고 디자인 시스템을 구축한다. 의미 있는 서비스 개발을 위해서는 디자인 시스템 구축이 필수적이다.

프로토타입 단계에서 사용성을 검증하고 가설을 확인하며, 마지막 검증 단계에서는 유저 피드백, 데이터 측정, AB 테스트 등을 통해 서비스를 개선한다.

클로드 데스크톱 앱은 효율적인 디자인 작업을 위한 다양한 기능을 제공한다. 앱을 다운로드하고 실행하면 왼쪽에 클로드 코드 아이콘이 나타나며, 이를 통해 새로운 대화를 시작하고 폴더를 선택하여 산출물을 관리할 수 있다.

디자인 산출물은 클로드의 아티팩트 기능에 저장되며, 슬래시 디자인(/design) 명령어를 사용하여 캔버스에 화면을 전개하고 디자인 요소인 컬러와 텍스트를 즉각적으로 수정 및 제어할 수 있다.

V1은 레퍼런스 없이 기획 문서(PRD)로 제작됐고, V2는 컬러와 브랜드 정체성을 유지하며 사용성을 개선했다. 최종 V3에서 브랜드 컬러 및 디자인 시스템을 전면 업데이트했으며, 진행 상황을 직관적으로 확인하도록 V1과 V2를 나란히 배치했다. 1차 버전은 레퍼런스 없이 기획 문서(PRD)만을 기반으로 제작되었고, 이후 2차 버전에서는 Mobbin 레퍼런스를 활용하여 사용성을 개선했으나 컬러와 브랜드 아이덴티티는 유지했다.

3차 버전에서는 브랜드 컬러와 디자인 시스템까지 전면 업데이트하며 디자인의 완성도를 높였다. 진행 상황을 직관적으로 비교하기 위해 1차 버전과 2차 버전을 나란히 배치하여 비교했다.

실제 출시된 앱 화면 60만 개 이상의 레퍼런스를 보유한 모빈은 드리블과 달리 실무 구현 가능성과 사용성이 검증된 데이터에 집중한다. 클로드(Claude)는 MCP(Model Context Protocol)를 활용해 모빈에 직접 접속하며, 익스필드(x-field)로 아바타와 같은 부족한 시각 요소를 보완한다. 한 관계자는 이 플랫폼의 강점이 실제 출시된 앱 기반의 데이터에 있다고 설명했다. 드리블과 달리 실무 구현 가능한 데이터 위주로 구성됐으며, 이미지 생성 도구 '익스필드'를 연동해 아바타 등 부족한 요소를 보완한다. 이는 드리블(Dribbble)과 같은 플랫폼과는 차별화되는 지점이다.

Claude는 MCP(Model Context Protocol)를 통해 Mobbin에 직접 접속하여 필요한 디자인 리서치를 수행할 수 있다. 이 프로토콜은 AI 모델이 외부 데이터를 직접 탐색하고 활용하는 능력을 제공한다.

Mobbin 데이터 외에 부족한 디자인 요소, 예를 들어 아바타 이미지 등은 이미지 생성 도구인 '익스필드(x-field)'를 연동하여 보완했다.

Claude의 아티팩트 다큐먼트 기능을 활용하여 디자인 개선 보고서를 작성하도록 요청했다. 이 보고서에는 어떤 근거와 레퍼런스를 바탕으로 의사 결정이 이루어졌는지를 명시하도록 했다.

특히, 참고한 레퍼런스 이미지를 보고서에 직접 첨부하고 넘버링을 통해 어떤 부분이 차용되었는지 구체적으로 표시하여 무분별한 적용을 방지하고 합리적인 의사결정 구조를 확보하는 데 중점을 두었다.

기존의 그린 톤 디자인이 다소 힘이 부족하다고 판단되어, 브랜딩 컬러와 디자인 시스템, 컴포넌트까지 Mobbin 레퍼런스를 활용하여 업데이트를 진행했다. 여러 시안을 비교 검토했다.

'따뜻한 가족 컨셉' 시안은 폰트가 올드하여 배제했고, '카툰 스티커 컨셉' 시안은 지나치게 가벼워 부분적인 차용만 권장했다. 최종적으로 대비를 높이기 위해 청보라색을 메인 컬러로 채택했다.

Claude Opus 5.5는 디자인 가독성 측면에서 다른 AI 모델 대비 강점을 보였다. GPT 모델은 종종 가독성이 낮은 작은 폰트(11~12px)를 사용하는 경향이 있다.

반면 Opus 5.5는 주요 정보에 최소 13px 이상의 폰트를 사용하여 전반적인 가독성을 높였다. 이는 UI 위계를 명확히 정리하는 능력과도 연결되어 사용자 경험 향상에 기여했다.

개선된 UX 디자인은 일러스트레이션을 활용하여 페이지의 성격을 즉각적으로 인지할 수 있도록 도왔다. 이는 사용자가 해당 페이지의 내용을 빠르게 이해하는 데 큰 도움을 주었다.

또한, 핵심 정보는 짧고 굵은 텍스트로 배치하고, 보조 텍스트로 상세 설명을 보완하여 정보의 위계를 명확히 했다. 모호했던 타이틀은 구체적인 행동 유도형 질문으로 변경하여 사용자 상호작용을 유도했다.

최종 버전의 디자인에서 메인 CTA(Call To Action) 버튼의 컬러 일관성이 부족하다는 지적이 있었다. 특정 화면에서는 빨간색을 사용하지만, 다른 화면에서는 보라색이나 검색 CTA 컬러가 사용되는 경우가 확인되었다.

이는 CTA가 아닌 요소에 동일한 컬러가 적용되어 사용자가 중요 버튼을 인식하는 데 혼란을 줄 수 있다는 우려를 낳는다. 실무에서는 디자인 시스템 규칙이나 CSS 컴포넌트 수립을 통해 컬러 일관성을 확보해야 한다.

AI 기반 정보 요약 기능은 슬랙의 캐치업(Catch-up) 기능에서 영감을 받아 흩어진 정보를 사용자 맞춤형으로 요약 제공하도록 개선했다. 이는 AI의 장점 중 하나인 정보 개인화에 초점을 맞춘 것이다.

대화창 내 주요 정보는 굵기와 컬러를 변경하고 아바타를 활용하여 가독성을 높였다. 또한, 단순히 블렛 포인트로 정보를 나열하는 방식에서 벗어나 결정/미결정 상태를 체크마크와 점선으로 시각화하여 정보 분류 체계를 강화했다.

클로드 아티팩트의 샘플 기능을 활용하여 별도의 API 키 없이도 클로드 에이전트를 프로토타입에서 구동할 수 있었다. 이 기능을 통해 친구들과의 대화 시나리오에서 AI가 일정 조율 및 대화 요약 기능을 수행하는 과정을 직접 확인할 수 있다.

비록 일부 버그가 존재했지만, 서비스 시나리오 검증 및 기획 단계에서 실질적인 도움을 제공하며 AI가 단순한 디자인을 넘어 인터랙티브한 프로토타입까지 구현할 수 있음을 입증했다.

특히, AI와 대화할 때 클로드 API가 필요함에도 불구하고, 샘플 기능은 API 키 없이도 클로드 에이전트를 프로토타입에 활용할 수 있도록 지원하여 개발 초기 단계의 장벽을 낮추는 역할을 한다.

Opus 5.5는 기대 이상의 디자인 결과물을 도출하며 AI 디자인 모델의 높은 잠재력과 개선 여지를 확인시켜 주었다. 레퍼런스 활용은 단순히 디자인을 개선하는 것을 넘어, 우리가 문제를 바라보는 관점을 전환하고 다양한 시각에서 해결책을 모색하도록 돕는다는 점에서 큰 의미가 있다.

완벽한 해결책은 아니지만, 레퍼런스 리서치를 통해 AI가 디자인 과정에 실질적인 도움을 줄 수 있음을 보여주었다. Eric Park 빌더는 다양한 디자인 모델의 성능을 블라인드 테스트하는 서비스인 blindchoice.ai의 런칭도 함께 알렸다.