AI로 내가 원하는 컴포넌트를 만드는 법 | MD 문서 구조와 클로드 프롬프트 전략 transcript

[음악] 지난 시간에 프롬프트로 컴포넌트를 생성해 봤는데 원하는 대로 결과물이 나왔나요? 아마 처음부터 원하는 대로 나오지 않았을 거예요. 왜 그런지 알아볼까요? 클로드로 컴포넌트를 생성해 보니 보다 상세한 프롬프트가 필요하다는 걸 느꼈을 거예요. 그럼 AI가 컴포넌트를 정확하게 만들 수 있도록 스펙을 정리하고 문서화하는 방법을 알아볼게요. 먼저 단순한 말 몇 마디로 프롬프트를 쳤을 때 생기는 한 개점부터 짓고 넘어갈게요. 클로드에게 버튼 만들어 달라고 짧게 요청하면 그럴 듯하게 나오긴 해요. 하지만 실제로 피그마에서 열어보면 패딩이나 상태값이 내 생각과 전혀 다르게 나오는 경우가 많아요. AI가 부족한게 아니라 기준이 되는 제약 조건을 우리가 주지 않았기 때문이에요. 제대로 된 컴포넌트를 얻으려면 단순한 모양만 말해 주면 안 돼요. 마우스를 올렸을 때의 변화나 로딩 상태 그리고 어떤 화면에 배치해야 하는지 같은 시스템 스펙이 함께 전달되어야 해요. 이런 명확한 기준이 있어야 AI로 생성할 때 엉뚱한 결과물이 나오지 않아요. 여기에 더해서 하지 말아야 할 행동을 명시해 주는 것도 정말 중요해요. 버튼은 주어진 스펙에 맞춰서 사용하고 화면에 주요 버튼을 두 개 이상 쓰지 말라는 식의 금지 조건을 걸어 두는 거죠.

AI는 하지 말아야 할 선을 그어 줄 때 훨씬 더 명확하고 일관된 결과물을 만들어내요. 그렇다면 이런 상세한 스펙을 어떻게 정리해야 할까요? 글로벌 디자인 시스템인 엔트 디자인과 머티리얼 디자인의 실제 버튼 MD 문서를 보면서 구조를 하나씩 살펴볼게요. 대부분의 오픈소스 디자인 시스템은 마크다운 문서를 공식 규격으로 사용해요. 디자이너와 개발자가 소통하기 가장 편한 형식일뿐만 아니라요. 플로드 같은 LLM 모델이 문서 구조를 오류 없이 가장 빠르고 정확하게 이해하는 포맷이기 때문이에요. 엔트 디자인 버튼 MD 문서를 함께 볼게요. 문서 최상단에 투유 유즈 섹션이에요. 버튼을 단순한 사각형이 아니라 작업을 실행하는 도구로 정의하고 있고요. 프라이머리, 디폴트, 대시드, 텍스트, 링크까지 다섯 가지 타입을 어떤 상황에 써야 하는지 명시하고 있어요.이 텍스트가 AI에게 전달되면 타입별 위계를 헷갈리지 않고 정확하게 잡아 줄 거예요. 문서 중간에는 프로퍼티와 타입이 표로 정리된 API 섹션이 나와요. 여기서 버튼의 크기를 라지, 미디엄, 스몰로 나누고 로딩이나 비활성화 여부를 트루, 폴스로 선언하는데요.이 표가 그대로 피그마 컴포넌트의 베리언트와 분리엄 프로퍼티로 연결돼요. 클로드에게이 표를 넘겨 주면 피그마 속성 구조를 보다 구체적으로 설계해 줄 거예요. 그렇다면 버튼에 사용되는 수치들은 어디에 적혀 있을까요? 문서 가장 아래쪽에 디자인 토큰 표를 보면 컴포넌트 토큰과 글로벌 토큰으로 변수가 정의되어 있어요. 기능과 이름은 API 표에서 가져오고 실제 수치는이 디자인 토큰에서 연결하는 거예요.이 두 가지가 합쳐져야 AI가 피그마 베리어블까지 맞춘 컴포넌트를 만들어 낼 수 있어요. 이번에는 머티리얼 디자인 3 버튼 문서를 볼게요. 머티리얼은 엘리베이티드, 필드, 필드 터널, 아웃라인드, 텍스트까지 다섯 가지 스타일로 버튼을 구분해요. 엔트 디자인과 이름은 다르지만 시각적인 중요도에 따라 다섯 단계로 나눈다는 시스템 규칙은 비슷하죠. 머티리얼 문서를 아래로 내려보면 베리언츠 섹션이 나와요. 버튼을 크게 디폴트 버튼과 토글 버튼 두 가지로 나눠서 정의해요. 일반 디폴트 버튼은 다이얼로그나 모달, 폼 같은 화면 어디에 배치해야 하는지 위치 맥락을 짚어 주고요. 토글 버튼은 즐겨 찾기처럼 켜고 끄는 선택에 쓰며 선택됐을 때 아이콘과 모서리 모양이 어떻게 변해야 하는지 인터랙션 규칙을 적어 두고 있어요. 이런 행동 정의가 명시되어 있어야 인공지능이 일반 액션 버튼과 토글 버튼을 혼동하지 않고 정확한 용도에 맞게 컴포넌트를 설계할 수 있어요. 엔트 디자인과 머티리얼 디자인 문서를 둘 다 분석해서 우리가 참고해야 할 부분을 정리해 볼게요. 컴포넌트마다 다르겠지만 통상적으로 어떤 타입이 있는지 위계를 정하거나 사용 목적을 서술하고요. 피그마에서 쓸 속성을 표로 만들고 정확한 크기 수치나 참조할 토큰을 적어 두는 거예요.

MD에 이런 내용이 작성된다면 AI가 이해할 수 있는 MD로 작성이 될 거예요.이 방대한 문서를 디자이너가 백지 상태에서 일일이 다 쓸 필요는 없어요. 클로드를 리서처로 활용해서 초안 문서를 완성하는 과정을 보여 드릴게요. 첫 번째 단계는 리서치 프롬프트예요. 클로드에게 명확한 역할을 부여하고요. 엔트 디자인과 구글 머티리얼 디자인을 기준으로 버튼의 필수 상태와 속성들을 비교 분석해 달라고 요청하는 거예요. 기준이 잡혔다면 이제 우리 서비스에 꼭 맞는 속성을 추여 달라고 요청해요. 우리는 모바일 쇼핑몰 앱이라는 환경을 주면서 불필요한 건 덜어내고 꼭 필요한 버튼 타입과 크기만 골라서 제안해 달라고 하는 건데요. AI가 멋대로 문서를 다 쓰는게 아니라 추천 목록을 먼저 받아보고 우리가 직접 눈으로 검토하는 단계예요. 제한받은 속성을 확인하고 컨펌했다면 이제 실제 컴포넌트를 만들어 달라고 요청해요. 예를 들면 프라이머리와 텍스트 타입 그리고 모바일의 맞춤형으로 컴포넌트를 생성해 달라고 하는 거죠.이 이 부분은 영상 시청하시는 분 상황에 맞춰서 프롬프트 작성하면 돼요. 그러면 우리가 정해 준 조건 안에서만 생성하기 때문에 보다 원하는 디자인으로 결과물이 나올 수 있어요. 컴포넌트 생성이 끝났다면 마지막으로이 내용을 공식 마크다운 문서로 정리해 달라고 요청해요. 오버뷰부터 사용 규칙인 두앤 돈트 그리고 피그마 프로퍼티 표까지 포함된 버튼 MD 파일로 뽑아 달라고 하는 건데요. 이렇게 하면 우리 제품 전용 마크다운 문서가 정리되어 나와요. 마지막 단계는 디자이너의 최종 검수예요.

AI가 뽑아 준 문서에서 우리 제품 필수 규칙이 잘 반영되었는지 확인하고 문구를 다듬어 주는 건데요.이 이 검수 과정까지 맞춰야 디자이너와 개발자 그리고 AI가 모두 신뢰할 수 있는 진짜 디자인 시스템 자산이 돼요. 자, 맨 처음에 버튼 생성해 달라고 간단하게 프롬프트 입력했을 때 버튼 모양과 보다 상세하게 조건을 입력했을 때 버튼 모양을 비교해 볼까요? 단순히 버튼 생성해 달라고 했을 때는 아웃라인도 제멋대로고 생각했던 스타일이 아니었는데요. 앞서 보여 드린 조건값을 보다 상세하게 입력한 프롬프트로 버튼 생성을 요청하니 좀 더 원하는 스타일로 버튼이 생성되었어요. 마지막으로 MD 문서를 리서치하거나 클로드에게 벤치마킹 데이터로 넣어 줄 때 참고하기 가장 좋은 사이트 세 곳을 소개해 드릴게요. 첫 번째로 추천할 사이트는 아델이라는 디자인 시스템 모음 사이트예요. 전 세계 수많은 기업들의 디자인 시스템과 공식 기, 허브 주소를 표 하나로 모아둔 곳인데요. 여기서 원하는 디자인 시스템에 저장소 링크를 타고 들어가면 실제 컴포넌트 MD 파일을 찾아볼 수 있어요. 두 번째는 겟디인 MD라는 사이트예요. 깃브 폴더를 일일이 뒤질 필요 없이 잘 만든 디자인 시스템들의 MD 파일을 한 곳에 모아둔 곳이에요. 원하는 컴포넌트의 MD 파일을 바로 다운로드 할 수 있어서 클로드의 학습 데이터로 집어넣을 때 정말 편해요. 국내 레퍼런스로는 당근의 시드 디자인 시스템을 추천해요. 컴포넌트 상세 페이지 오른쪽 위를 보면 lms점 텍스트라는 버튼이 있는데요. 버튼을 누르면 MD 문서를 확인할 수 있어요.이 내용을 그대로 복사해서 클로드에게 학습 데이터로 전달하기 좋아요. 잘 정리된 마크다운 문서 한 장이 AI에게는 참고하기 좋은 프롬프트가 돼요. 오늘 살펴본 구조를 바탕으로 우리만의 컴포넌트 스펙을 정의해 보세요. 오늘도 영상 시청하느라 수고했어요. 다음 영상에서 만나요.

I'm듀. [음악]