AI UX 기획자의 Claude Design 활용 기록

Agentic AI를 언제 써야 가장 효과적일까?

Agentic AI로 기획과 디자인 업무를 효율화하기 위해 실제 이를 사용해 보고 실무 도입 가능성을 이야기하는 사람들이 많아졌다.

2년간 AI B2B SaaS형 플랫폼 UXUI 기획자로 경력을 쌓고 있는 나 또한 내 업무를 어떻게 효율화할 수 있을지에 대해서 많이 고민을 했고, 그 실험의 결과와 AX 시대에 인간과 AI가 어떻게 협업을 해야 하는지에 대한 깨달음을 하나씩 글로 발행해 보고자 한다.

이번 주말 Anthropic에서 Claude Design을 출시해 디자인 업계가 들썩였다.

이전부터 Claude Code를 중심으로 디자인 시스템을 연동해서 간단한 프로토타입을 제작하는 과정을 효율화하고 싶었기에 Claude Design을 업무에 어떻게 활용할 수 있을지 빠르게 테스트해 보았다.

나는 회사에 잘 정리된 디자인 시스템이 없기에 Awesome-design에서 우버 디자인 시스템을 활용해 보았다. 테스트해 본 결과 다음과 같은 장단점을 알 수 있었다.

*Awesome-design은 구글 stitch에서 만든 design.md 개념을 바탕으로 유명 서비스의 디자인 시스템 가이드를 AI가 읽고 이해하기 쉬운. md 파일로 정리해 놓은 것이다. 아래 링크에서 원하는 스타일의 디자인 시스템을 사용해 볼 수 있다.https://github.com/VoltAgent/awesome-design-md

1. 사고 확장 - 레이아웃 및 아이디어 발산 과정에서 사용하기 좋다

서비스를 개발하다 보면 좁혀진 시각에 아이디어가 머물러져 있는 경우가 있다. 이런 경우 AI를 사용하면 다각화된 시각으로 제안해 주기 때문에 아디이어 발산에 긍정적인 영향을 준다. 물론 어떻게 프롬프트를 작성해야 하는지에 따라서 결과가 다르겠지만, 나는 내가 1차로 제안한 아이디어보다 더 좋은 안이 있을지를 AI와 함께 디벨롭시키고 싶은 니즈가 있었기에 아래와 같은 프롬프트로 AI에게 화면 제작을 요청했다.

Input Prompt
이 스크린샷은 LLM 기반 채팅 UXUI야. 현재 시나리오는 사용자가 맛집을 추천을 요청하고 LLM이 사용자 의도를 파악해서 네이버 지도 API를 활용해 답변을 한 상태 이야.

결과물 조건 :
1. 디자인 시스템을 최대한 사용한다.
2. 디자인 시스템 외 컴포넌트 사용이 필요한 경우, 나에게 허락을 구한다.
3. UXUI 관점에서 더 좋은 사용자 경험 측면의 아이디어가 있으면 추가적인 화면과 장단점 설명글을 붙여서 내가 선택할 수 있도록 제시한다.

*AI에게 작업을 시킬 때 가드레일(조건, 제약 등)을 잘 작성하는 것이 중요하고 어떤 결과물을 만들고 싶은지 의도를 명확하게 지시하는 것이 중요한 것 같다.

아래처럼 AI는 내가 1차 제시한 인라인 레이아웃 이외에 2,3안을 추가적으로 작업을 해 주었었고 이에 대한 장단점 또한 비교 분석해 주어 안을 선택하기에 용이했다. 사실 인라인 방식 안에서 어떻게 정보 위계를 설계할 지만을 고민했는데, 사이드패널형과 카드형을 추가로 제안해 주면서 편협되어 있던 사고가 확장되어 기획을 할 수 있었다.

AI가 3가지 레이아웃을 제안. 좌측부터 인라인임베드형, 사이드패널형, 카드 우선형

이 과정에서 인간의 중요한 역할은 비판적 사고를 바탕으로 검토하고 지시하는 것이다. AI가 제시하는 안을 무조건 받아들이는 것이 아니라 비판적으로 비교 분석해서 최선의 안을 선택하고 이를 디벨롭시킬 수 있어야 한다.

나는 AI가 제안한 2안을 최종적으로 선택하고 이를 더 디벨롭시키고자 했다.

그 이유는 사용자 경험 측면에서 상용 언어모델 서비스들의 장소 추천 시나리오에서 1) 지도 활용 시나리오가 각 장소/상점을 한눈에 비교 분석하기 어렵다는 점과 2) AI 추천 이유가 각 장소별 맵핑되어 보는 게 어려웠기 때문에 이 문제를 해결하고 싶었는데 사이드 패널 레이아웃을 활용하게 되면 좌측의 텍스트 답변으로 추천 이유를 확인하면서 우측의 지도로 어느 곳에 각 상점들이 위치해 있는 지를 한눈에 비교 분석하기 쉽다고 생각했기 때문이다. 그렇게 나는 2안을 바탕으로 추가적으로 네이버 지도 API에서 호출 가능한 엔티티를 바탕으로 레이아웃과 기획안을 디벨롭시켰다.

지도와 하단 텍스트 답변을 비교 분석하기 어려운 형태 (좌:Claude, 우: ChatGPT)

TIP : 결과물 조건에서 3. 사용자 경험 측면에서 추가적인 화면과 장단점 설명글을 작성해 주고 내가 선택할 수 있도로 제시해 달라는 조건이 결국 내가 검토자로서 AI를 통제하고 AI를 하나의 주니어 기획자처럼 활용할 수 있는 프롬프트이라고 생각한다. 아래 생성 결과물을 보면 3가지 안을 제시하고 각 장단점을 비교 분석해 주기 때문에 인간은 이를 바탕으로 어떤 안을 선택하고 디벨롭시키면 좋을지를 고르면 된다.

각 레이아웃의 장단점을 작성해 줌

2. 레이아웃 작업 시간 단축 : 기존 최소 5일 이상 소요되던 작업이 2일로 단축된다.

UX 기획에서 가장 많은 시간이 소요되던 작업은 사실 이 레이아웃을 구상하고 픽스하던 과정이었다. 다양한 서비스를 비교 분석하면서 장단점을 비교 분석하고 우리 서비스, 우리 고객에게 최적의 사용 경험을 제공할 수 있는 안이 무엇인지를 고민하는 과정이 일주일 이상 소요되었다. 하지만 AI와 함께 작업을 하면 이 작업 또한 굉장히 많이 단축시킬 수 있었다. 위의 프롬프트 하나로 바로 3개의 안을 뽑을 수 있고 나는 이 안을 선택하고 디벨롭시키기까지 2일이라는 시간밖에 걸리지 않았다. 그리고 개발자들과 빠르게 기능 검토 미팅을 요청해서 빠르게 스펙을 검토하고 세부적인 설계에 들어갈 수 있었다.

협업을 하면서 많이 느끼는 점은 커뮤니케이션 할 시각물이 정말 중요하다는 것이다. 텍스트로 기능 요건을 확정하는 건 한계가 있다. 텍스트로는 각자 이해를 다르게 하기 때문이다. 하지만 이 기능을 시각적으로 표현해 소통을 하게 되면 모두가 시각물을 기준으로 소통을 할 수 있기 때문에 보다 구체적인 논의가 가능하다. 그렇게 떄문에 나는 작업을 할 때 레이아웃을 검토하고 논의하는 미팅을 빠르게 들어갈 수 있도록 많은 노력을 해왔었는데 (이전에는 박스로 빠르게 보여주고 결정하던 식...) AI 덕분에 이 과정을 정말 빠르게 수행할 수 있게 되어서 개인적으로 너무 좋았다.

3. 개발 비전공자들의 콜드 스타트 문제 완화

Claude Design이 나오기 이전, 디자이너들은 주로 터미널이나 Cursor와 같은 개발 환경에서 프로토타입을 제작했었다. 이 과정에서 디자이너들의 가장 높은 진입장벽은 프로토타입 제작을 위한 환경 구축이었다. 시각적으로 보이는 워킹 프로토타입을 구현하기 위해서는 shadcn을 연결하거나 design.md 파일을 Claude에게 제공해 주어야 했다. 특히, 기업 내에 디자인 시스템이 없는 경우에는 정해진 디자인 규칙과 컴포넌트, 디자인 스타일 가이드 등이 없는 0에서 시작을 해야 하기에 더 막막했을 것이다.

그러나 Claude Design는 이 문제점을 우리가 일반적으로 사용하는 인터페이스로 해결했다. 아래 화면을 보면 우리가 알고 있는 깃허브에 올라와 있는 design.md 파일을 복붙 하거나 기업 내에 사용하고 있는 피그마 파일 자체를 업로드할 수 있는 방식으로 일관성 있는 디자인 결과물을 낼 수 있다. 개인적으로 이러한 기능들일 Claude Design이 엄청난 관심을 받게 된 이유이지 않을까 생각한다.

다양한 인풋 유형의 디자인 시스템 연동을 지원한다.