[GeekNews 요약] Pencil, AI 디자인 하네스로 생산성 향상: 기획·디자인·리뷰 통합
7
설명
AI 에이전트에게 디자인 시스템을 단순히 주입하는 것만으로는 완성도 높은 제품 화면을 만들기 어렵습니다. Pencil은 이러한 한계를 극복하기 위해 기획, 디자인, 리뷰 단계를 통합하는 'AI 디자인 하네스'를 개발했습니다. 이 글은 Pencil이 직면한 문제와 이를 해결하기 위한 구체적인 접근 방식을 소개합니다.
### 배경 설명
최근 디자인 시스템은 에이전트가 이해할 수 있는 형태로 정보를 제공하려는 시도가 활발합니다. Google의 공개 명세는 색상, 타이포그래피, 간격 등의 토큰뿐만 아니라 브랜드 분위기, 레이아웃 원칙, 컴포넌트 사용법, 피해야 할 패턴까지 포함해야 한다고 강조합니다. 이는 에이전트가 시각적 표현을 추측하는 과정을 줄여주지만, 동일한 컴포넌트와 토큰을 사용하더라도 화면의 목적과 사용자 행동에 따른 최적의 디자인은 달라질 수 있습니다. 즉, 디자인 시스템은 재료와 규칙을 제공하지만, 완성도 있는 화면을 위한 선택과 조합까지 자동으로 보장하지는 않습니다. 예를 들어, 동일한 디자인 토큰과 컴포넌트를 사용하더라도 정보 우선순위에 따라 리듬감 있게 조정된 화면은 그렇지 않은 화면과 시각적으로 확연히 다른 인상을 줍니다. 따라서 완성도 높은 디자인을 위해서는 디자인 시스템을 따르는 것을 넘어, 좋은 디자인에 대한 기준을 명확히 제시할 필요가 있습니다. 이러한 배경 속에서 Pencil은 에이전트가 디자인 시스템을 이해하는 것을 넘어, 실제 결과물이 사용자에게 유용하고 시각적으로 완성도 있는 디자인이 되도록 하는 문제에 집중했습니다.
### 1. DESIGN.md가 해결하는 문제
DESIGN.md는 디자인 시스템을 에이전트가 읽을 수 있는 형태로 전달하려는 시도입니다. Google의 공개 명세는 색상, 타이포그래피, 간격 같은 토큰과 함께 브랜드의 분위기, 레이아웃 원칙, 컴포넌트 사용법, 피해야 할 패턴을 담아야 한다고 명시하고 있습니다. 이러한 문서는 에이전트가 제품의 시각적인 표현법을 매번 추측하지 않게 해 줍니다. 그러나 같은 컴포넌트와 토큰을 사용하더라도 이번 화면에서 무엇을 먼저 보여주고 어떤 행동을 쉽게 만들어야 하는지는 매번 달라집니다. 디자인 시스템은 선택 가능한 재료와 규칙을 알려주지만, 완성도 있는 화면을 위한 선택과 그 조합까지 자동으로 보장하지는 않습니다. 예를 들어, 동일한 디자인 토큰과 컴포넌트를 사용한 두 시안 중 정보의 우선순위에 따라 리듬감 있게 조정한 화면이 시각적으로 더 나은 인상을 줄 수 있습니다. 이는 단순히 동일한 간격을 적용한 화면과 확연히 다른 결과입니다. 더 완성도 있는 디자인을 위해서는 디자인 시스템을 따를 뿐 아니라, 좋은 디자인에 대한 기준을 제시해 줄 필요가 있습니다.
### 2. 디자인 하네스: 기획, 디자인, 리뷰 통합
Pencil이 해결하려던 핵심 문제는 에이전트가 디자인 시스템을 모르는 것이 아니라, 아무리 잘 주입하더라도 결과물이 사용자에게 도움이 되고 시각적으로 완성도 있는 디자인이 되도록 하는 것이었습니다. 이를 위해 Pencil은 에이전트의 작업 과정을 기획, 디자인, 리뷰의 세 단계로 나누고, 각 단계별로 전문화된 skill이 순서대로 역할을 수행하도록 설계했습니다. 기획 단계에서는 화면의 목적, 사용자의 주요 행동, 정보의 우선순위를 명확히 정의합니다. 디자인 단계에서는 이러한 기획 내용을 바탕으로 디자인 시스템의 규칙과 컴포넌트를 활용하여 실제 화면을 디자인합니다. 마지막으로 리뷰 단계에서는 디자인된 결과물을 검토하며 시선의 흐름, 강조점, 사용성에 어색한 부분은 없는지 면밀히 살핍니다. 이러한 과정은 제품 개발 과정에서 하나의 워크플로우처럼 작동하도록 의도되었으며, Pencil만으로도 제품 개발 전반을 마무리할 수 있도록 하는 것을 목표로 합니다. 궁극적으로 Pencil은 skill들의 조합을 통해 에이전트가 각 단계에서 수행해야 할 작업을 효과적으로 안내하는 'Product Design 하네스' 역할을 수행합니다.
### 3. 느낌이 아닌 지침으로: 리뷰 단계의 구체화
리뷰 단계에서는 종종 지침이 모호해지기 쉬웠습니다. 실제 화면을 보았을 때 어색한 부분을 직관적으로 느낄 수는 있지만, 이를 '좀 더 자연스럽게'와 같은 추상적인 표현으로 에이전트에게 전달하면 같은 문제를 반복해서 마주칠 확률이 높았습니다. 따라서 Pencil은 왜 어색한지, 어떤 요소 간의 관계가 문제인지, 무엇을 수정하면 개선될 수 있는지에 대한 명확한 분석을 바탕으로 에이전트가 재현 가능한 구체적인 지침으로 풀어내는 데 집중했습니다. 실제 결과물을 보며 시각적 리듬감, 비례, 무게감, 밀도 등 감각적인 영역에 머무를 수 있는 피드백을 명확한 지침으로 skill화했습니다. 또한, 관련 오픈소스들을 참고하여 '어색하다'는 인상을 구체적인 관찰과 수정 지시로 전환하고, 수정된 화면을 반복적으로 확인하며 지침을 정제해 나갔습니다. 이는 사람의 눈에는 즉각적으로 보이는 문제를 에이전트도 스스로 찾고 수정할 수 있도록 만드는 과정이었습니다.
### 4. 비용 및 시간 효율성 증대: Figma 맥락 최적화
작업 효율성을 높이기 위해 Figma MCP(Multi-Component Platform)가 활용됩니다. 이미 사용할 컴포넌트의 key와 속성을 알고 있다면, 버튼 인스턴스 하나를 만드는 데 디자인 시스템 전체 정보가 필요한 것은 아닙니다. 하지만 에이전트가 작업할 때마다 필요한 컴포넌트와 토큰을 Figma에서 다시 검색하는 과정은 라이브러리와 검색 결과를 반복해서 읽게 만들며, 불필요한 맥락이 모델에 과도하게 주입될 수 있습니다. 특히 Figma MCP의 get_design_context와 같이 선택 영역의 구조, 레이아웃, 토큰 등을 풍부하게 전달하는 도구를 사용할 경우, 컴포넌트의 key와 필요한 속성만으로 처리 가능한 작업에도 더 많은 맥락이 전달될 수 있습니다. 이를 줄이기 위해 디자인 시스템의 명세와 의도를 미리 JSON과 같은 정적 파일로 정리했습니다. Figma 컴포넌트에 부여되는 고유한 key 값을 기준으로 각 컴포넌트의 속성과 의미를 정리하여, 에이전트가 디자인 시스템 지식을 Figma에 매번 재요청하지 않도록 최적화했습니다.
### 5. 헤르메스 에이전트: 확장성과 다변화된 사용 경험
현재 Pencil은 각 사용자의 로컬 에이전트를 통해 실행되고 있습니다. 향후에는 Slack에서 Pencil Hermes Agent를 태그하여 워크플로를 시작할 수 있도록 확장할 계획입니다. 라이너에서는 데스옵스 챕터 리드 영의 노력 덕분에 헤르메스 에이전트를 GUI로 편리하게 생성 및 관리할 수 있는 환경이 구축되어 있으며, 이는 Pencil Hermes Agent의 빠른 구현을 가능하게 했습니다. 로컬 환경에서는 맥락을 충분히 고려한 길고 깊은 디자인 작업을 수행하고, Slack에서는 대화 중 떠오른 아이디어를 신속하게 시각화하는 가벼운 요청에 대응하는 등, Hermes Agent를 통해 작업의 깊이에 따라 Pencil을 사용하는 경험을 다변화하려는 시도를 하고 있습니다.
### 가치와 인사이트
Pencil의 'AI 디자인 하네스' 접근 방식은 AI 기반 디자인 도구가 직면한 근본적인 한계를 명확히 인식하고 이를 해결하려는 시도라는 점에서 큰 가치를 지닙니다. 단순히 디자인 시스템의 규칙을 따르는 것을 넘어, 기획, 디자인, 리뷰의 통합적인 워크플로우를 통해 AI가 '좋은 디자인'에 대한 기준을 이해하고 적용하도록 유도합니다. 이는 디자이너와 AI 에이전트 간의 협업 방식을 재정의하며, AI가 추측이 아닌 명확한 지침에 기반하여 결과물을 생성하도록 함으로써 디자인의 일관성과 완성도를 높일 수 있습니다. 또한, Figma 맥락 최적화와 같은 기술적 개선은 AI 작업의 효율성을 증대시키고 불필요한 비용 및 시간 낭비를 줄이는 데 기여합니다. 이는 실무에서 AI 디자인 도구를 도입하려는 팀들에게 구체적인 해결책과 인사이트를 제공하며, AI가 단순 반복 작업을 넘어 창의적이고 전략적인 디자인 프로세스에 기여할 수 있음을 보여줍니다.
### 기술·메타
- Figma MCP
- JSON
- Slack API (예정)
### 향후 전망
Pencil의 향후 발전은 AI 에이전트의 '이해'와 '실행' 능력을 더욱 정교화하는 방향으로 나아갈 것입니다. Slack 통합과 같은 사용자 인터페이스 확장은 Pencil의 접근성을 높여 더 많은 사용자가 AI 디자인 하네스를 경험하게 할 것입니다. 특히, 로컬 환경에서의 깊이 있는 작업과 Slack에서의 신속한 아이디어 시각화라는 이원화된 접근 방식은 다양한 사용 시나리오에 유연하게 대응할 수 있는 기반을 마련합니다. 장기적으로는 AI 에이전트가 디자인 시스템의 규칙을 넘어, 사용자 경험(UX)의 미묘한 차이와 브랜드의 고유한 톤앤매너까지 학습하고 반영하는 수준으로 발전할 가능성이 있습니다. 경쟁 구도에서는 디자인 시스템 관리 도구, AI 기반 디자인 보조 툴 등 다양한 플레이어들이 존재하지만, Pencil의 '하네스'와 같이 통합적인 워크플로우를 제공하는 접근 방식은 차별화된 경쟁 우위를 확보할 수 있습니다. 다만, AI 에이전트의 '감각'을 '지침'으로 전환하는 과정의 복잡성과 지속적인 정제 필요성은 여전히 도전 과제로 남아있습니다. 또한, AI 모델의 발전 속도와 디자인 트렌드의 변화에 얼마나 빠르게 적응하느냐가 Pencil의 미래 성공을 좌우할 중요한 변수가 될 것입니다.
📝 원문 및 참고
- 원문: [링크 열기](https://liner.com/ko/blog/liner-pencil-design-harness)
- GeekNews 토픽: [보기](https://news.hada.io/topic?id=34582)
---
출처: GeekNews ([원문 링크](https://liner.com/ko/blog/liner-pencil-design-harness))
이 글에 대한 한 줄 의견
신고 · 불법·유해·아동 안전(CSAE) 관련 콘텐츠
댓글 0
아직 댓글이 없습니다. 로그인하면 바로 의견을 남길 수 있습니다.