디자인시스템 구축 과정에서 컬러 팔레트는 브랜드 일관성과 사용자 경험을 결정짓는 핵심 요소입니다. 특히, 컬러 토큰은 디자인시스템 구축의 기초를 다지는 데 필수적입니다. 그러나 이를 설계하는 과정은 반복적이고 세부적인 작업이 많아 시간이 많이 소요됩니다. 하지만 단순히 색상을 제안하는 것을 넘어, 디자이너의 피드백을 반영해가며 실질적인 협업을 할 수 있는 도구는 얼마나 유용할까요?
AI 도구들이 디자인시스템 구축 및 컬러 팔레트 제작 작업을 지원하는 데 점점 더 유용해지고 있지만, 단순히 색상을 제안하는 수준을 넘어 디자이너와의 협업 경험을 얼마나 제공할 수 있을지에 대한 의문이 남습니다. 이러한 고민에서 출발해, 저는 GPT와 Claude 두 가지 AI 도구를 사용해 Global Color Token 생성 과정을 실험해보았습니다.
이번 블로그에서는 두 도구의 결과를 비교하며, AI가 디자인시스템 구축 작업에 실질적인 도움을 줄 수 있는지 살펴봅니다.
AI 도구가 디자인 시스템 제작에 얼마나 유용할까?
디자인시스템 작업은 대개 시간이 많이 걸리고 반복적인 작업이 포함됩니다. 특히 컬러 팔레트 제작은 감각적 판단과 체계적인 설계가 모두 요구되는 작업입니다. AI가 이 과정을 얼마나 효율적으로 도와줄 수 있을지에 대한 호기심에서 이번 실험이 시작되었습니다.
궁금했던 점은 크게 두 가지였습니다.
- AI가 디자인의 기본 요소인 글로벌 컬러 토큰을 얼마나 잘 생성할 수 있을까?
- 생성된 결과물에 대한 피드백을 얼마나 유연하고 창의적으로 반영할 수 있을까?
실험: GPT와 Claude로 글로벌 컬러 토큰 제작하기
실험 환경 및 조건
1. 동일한 요청 조건 전달
두 도구(GPT와 Claude) 모두에게 동일한 요청 조건을 전달했습니다. 요청은 다음과 같았습니다.
2. 실험 과정
생성된 결과물을 리뷰한 후, 추가적인 수정 요청을 통해 결과물이 어떻게 개선되는지를 관찰했습니다. 이를 통해 AI가 피드백을 얼마나 정확히 이해하고 반영하는지 확인했습니다.
3. 평가 기준
결과물 평가 시 아래 세 가지를 기준으로 삼았습니다:
- 응답 정확성: 초기 제안이 요청 사항을 얼마나 충실히 반영했는가.
- 피드백 반영 능력: 수정 요청에 대해 AI가 얼마나 유연하고 정확하게 대응했는가.
- 결과물의 실용성: 생성된 컬러 팔레트가 실제 디자인 시스템에 적용 가능한 품질과 구성을 가지고 있는가.
1. GPT의 결과
GPT는 디자인시스템 구축 과정에서 필요한 글로벌 컬러 토큰을 생성하는 데 있어 기본적인 색상값을 잘 제안했습니다. 그러나 실험을 진행하며 몇 가지 명확한 한계점이 드러났습니다.
1) 초기 제안
GPT는 비교적 단순하고 표준적인 컬러 토큰을 제안했습니다. 그러나 제가 원하는 명도나 대비를 체계적으로 조정하지 않은 팔레트였습니다.
2) 피드백 반영
첨부한 디자인 팔레트 이미지를 참고해 명도 구분을 더 명확히 조정해달라는 피드백을 여러 차례 전달했지만, 초기에 제안된 팔레트에서 거의 변동이 없었습니다.
- 특정 단계의 색상이 지나치게 유사하다는 점을 지적하며 수정 요청을 반복했지만, AI가 피드백 내용을 잘 이해하지 못하거나 반영하지 않는 경우가 잦았습니다.
- 수정 요청이 제대로 반영되지 않아, 결국 더 이상의 피드백을 시도하는 것을 포기했습니다.
3) 한계점
GPT의 가장 큰 한계는 디자이너와 협업하는 느낌이 부족하다는 점이었습니다.
- 요청 조건을 기계적으로 따르는 경향이 강했으며, 디자이너의 요구를 창의적으로 해석하거나 유연하게 대처하지 못했습니다.
- 결과적으로, 디자이너의 의도에 맞는 커스터마이징이 부족하여 실질적으로 사용할 만한 결과물로 이어지지 않았습니다.
2. Claude의 결과
Claude는 GPT와 달리, 디자이너와 대화하는 듯한 유연성과 창의성을 보여주었습니다. 실험 과정에서의 주요 특징은 다음과 같습니다.
1) 초기 제안
Claude는 디자인시스템 구축에 적합한 컬러 팔레트를 생성하며, 레퍼런스 이미지와 유사한 명도차를 구현했습니다. 각 색상에 대한 상세한 설명과 더불어, 활용 가능성까지 덧붙여 제안한 점이 돋보였습니다. 이러한 접근은 단순히 색상을 나열하는 데 그치지 않고, 디자이너가 결과물을 어떻게 활용할지까지 고려했다는 점에서 높은 점수를 주고 싶습니다.
2) 피드백 반영
수정 요청에 대한 Claude의 반응은 매우 자연스러웠으며, 마치 동료 디자이너와 작업을 논의하는 듯한 경험을 제공했습니다.
중간에 톤이 다른 중간 컬러와 마지막 컬러를 포함해서 팔레트를 생성해달라는 요청을 전달했을 때, Claude는 처음에는 자연스럽지 않은 조합을 생성했습니다.
그런데 “팔레트의 그라데이션이 자연스럽지 않다”라고 간단히 말했더니, Claude는 제 의견에 공감하며 스스로 수정한 자연스러운 팔레트 그라데이션을 제안했습니다.
이 과정은 마치 주니어 디자이너에게 작업을 요청한 뒤, 결과물을 빠르게 검토하고 수정 의견을 주고받는 협업과 비슷한 경험이었습니다.
제공된 컬러를 약간 변경해도 괜찮다고 추가로 언급했더니, Claude는 이를 반영하며 수정한 팔레트에서 변경된 컬러가 어떤 위치에 배치되었는지까지 명확히 표시했습니다.
이처럼 Claude는 수정 이유와 결과물을 상세히 설명하며, 사용자가 팔레트를 더욱 명확히 이해할 수 있도록 도왔습니다. 이러한 방식은 단순히 결과를 제시하는 것에서 그치지 않고, 디자이너와 협력하며 완성도를 높이는 경험을 제공했습니다.
3) SVG 형태로 제공
Claude의 또 다른 강점은 컬러 팔레트를 SVG 파일 형태로 제공했다는 점입니다.
- 이 기능 덕분에 생성된 팔레트를 별도의 변환 과정 없이 바로 피그마(Figma)에 붙여넣을 수 있었고, 작업 시간을 크게 단축할 수 있었습니다.
- 이러한 추가적인 실용성은 작업 효율을 높이는 데 큰 역할을 했습니다.
4) 장점
Claude는 디자이너와 협업하는 듯한 경험을 제공하며, 결과적으로 창의적이고 실용적인 컬러 팔레트를 생성했습니다.
- 단순히 요청 조건을 따르는 것을 넘어, 디자이너의 의도를 이해하고 스스로 피드백을 반영하는 모습이 인상적이었습니다.
- 이로 인해 Claude는 디자이너가 실질적으로 작업에 활용할 수 있는 효율적이고 유연한 결과물을 만들어냈습니다.
실험 결과
이번 실험의 결론은 명확합니다. Claude는 디자인 작업에서 GPT보다 더 실용적이고 유연한 지원을 제공합니다.
- GPT는 기본적인 컬러 토큰 생성을 빠르게 처리할 수 있지만, 수정 및 피드백 반영 과정에서 부족함을 보였습니다.
- 반면, Claude는 디자이너와 대화하듯 피드백을 이해하고 반영하며, 창의적이고 설득력 있는 제안을 했습니다. 특히 SVG 형식으로 컬러 팔레트를 제공한 것은 큰 장점이었습니다.
이러한 차이 때문에 저는 아직 Claude 구독을 끊을 수 없는 이유를 확실히 깨달았습니다. AI 도구 선택은 단순히 기능적 우위를 넘어, 얼마나 인간적인 협업 경험을 제공할 수 있는지가 핵심인 것 같습니다.
결론
AI 도구는 디자인시스템 구축 과정에서 반복 작업을 줄이고, 효율성을 극대화할 가능성을 보여줍니다. 그러나 도구마다 강점과 약점이 명확하며, 디자이너의 요구에 맞는 도구를 선택하는 것이 중요합니다. 이번 실험이 AI 도구 활용을 고민하는 디자이너들에게 유용한 참고 자료가 되었길 바랍니다.
혹시 여러분도 AI를 활용한 디자인 시스템 작업 경험이 있다면, 댓글로 공유해주세요!
참고로 디자인 시스템에서 신뢰할 수 있는 컬러 팔레트를 참고하려면, 애플과 구글의 공식 디자인 가이드라인을 활용하는 것이 좋습니다.
- 애플 휴먼 인터페이스 가이드라인(Human Interface Guidelines): 애플의 디자인 원칙과 색상 사용에 대한 상세한 지침을 제공합니다.
- 구글 머티리얼 디자인(Material Design): 구글의 디자인 시스템으로, 다양한 색상 팔레트와 그 활용 방법을 제시합니다.