우리 팀은 새로운 기능을 출시하는 데 두 주가 걸려요. 제 팀은 두 시간밖에 안 걸립니다. 그 차이점은 뭘까요? 저희는 디자인 시스템을 코드로 만들었고, 오후 한 시간밖에 안 걸렸어요.00:00

개발자 62%가 피그마와 코드 간의 연결 문제로 디자인을 다시 만들 때 시간을 낭비합니다. 그런데 제가 만약 여러분에게 전체 디자인 시스템을 코드에서 단 한 번의 오후 작업으로 재구축할 수 있다고 말씀드린다면 어떨까요?00:09

그래서 왜 모든 사람이 코드 기반 디자인 시스템을 가지고 있지 않을까요? 역사적으로, 지금까지는 믿을 수 없을 정도로 시간이 많이 걸리고 복잡했기 때문입니다. 이제 디자인의 기반을 다져야 할 때입니다. 저는 클라우드를 이용해서 저희의 피그마 컴포넌트 라이브러리를 활용해서 전체 스타일 가이드를 만들게 할 겁니다.00:23

자, 한번 보세요. 여기 저희의 기본 사항, 색상, 타이포그래피, 아이콘들이 있습니다. 제가 보여드리는 건 아주 작은 버전이에요. 물론, 여러분의 건 훨씬 더 튼튼하게 만들 수도 있죠. 그래서 이제 새로운 클라우드 대화를 시작할 거예요.00:36

새로운 기능이나 프로젝트의 부분을 시작할 때마다 새로운 Cloud 윈도우를 열어서 채팅하는 것이 중요합니다.00:47

이 뜻은 제가 말씀드린 전체 맥락이 이 채팅창 안에서 다 진행된다는 뜻이고, 마지막에 이걸 다 저장할 수 있는 팁도 드릴 거예요. 그러니까 끝까지 기다려주세요. 스타일 가이드 만들 때 사용할 프롬프트를 만들어 볼 거니까요.00:56

스타일 가이드를 만들고, 스타일 토큰(style tokens)이라고 명명하세요. 그 안에 색상 변수, 타이포그래피, 간격, 테두리 등의 정보를 포함해야 합니다. 그런 다음 스타일 가이드 페이지를 만들고, MCP 연결을 통해 해당 값들을 추출하세요.01:07

다 끝나면 이렇게 나올 거예요. 확실히 초보자용 버전이긴 하지만, 모든 것이 명확하게 정의되어 있는 걸 볼 수 있습니다. 색상 팔레트, 아이콘, 사용법 같은 것들이요.01:21

추천 사항들은 피그마 MCP에서 가져와서 추출되었기 때문에, 앞으로는 모든 컴포넌트와 토큰에 대한 단일 소스 오브 트루스가 됩니다. 모든 색상과 간격 스타일이 여기서 관리되죠.01:35

피그마에서 직접 가져온 폰트들을 코딩해서 타입스크립트로 구현했고, 이제 우리 컴포넌트 라이브러리를 만들기 시작해볼게요. 저는 이미 이 컴포넌트 라이브러리 구축을 시작했는데, 어떻게 시작하고 확장해나갈 수 있는지 보여드릴게요.01:48

여기서 저희가 모든 것을 어떻게 정의하고 어떻게 구현하는지 볼 수 있습니다. 잠시 돌아가서 보면, 인터랙션, 디자인, 그리고 모든 것이 어떻게 작동해야 하는지에 대한 매우 상세한 내용이 담겨 있습니다.02:00

이건 저희 피그마 파일에서 바로 가져온 거고, 저희 개발자분들께도 명확하게 정의되어 있는지 확인하는 작업을 합니다. 이렇게 하는 걸 보실 수 있고, 사용 예시도 제공해 드립니다.02:15

좋아요. 그럼 KPI 카드들을 하나씩 만들어보죠. 아주 상세한 프롬프트를 사용할 거예요. 제가 어떻게 했는지 보여드릴게요. 같이 설명해 드릴게요.02:28

저는 워크플로우를 구축하고 있습니다. 이게 중요한 이유는 클로드(Claude)가 제가 제시하는 워크플로우의 각 단계를 거쳐야 하고, 제가 원하는 정확한 지침을 따르지 않는 무언가를 제안하거나 디자인하지 않도록 하기 위해서입니다.02:39

자, 제 작업 과정입니다.02:53

초기 설정 및 분석을 진행합니다. 기본적으로 Figma 파일을 보고 있는 거죠. 그리고 컴포넌트 데이터를 분석하고 추출합니다.02:56

이건 정말 중요한 부분이에요. 그냥 보이는 대로 만드는 게 아니에요. 호버 상태나 모든 상호작용이 어떻게 동작하는지 실제로 가져와서 적용하는 거죠. 시각적 사양을 따르세요.03:03

행동 관련 사양을 확인하고, 구현하세요. 그리고 인터랙티브한 컴포넌트를 만드세요.03:17

완전히 구현하고, 올바른 타입스크립트를 추가하세요. 모든 변형을 포함시키고, 미리보기 기능도 만드세요.03:28

그리고 디자인 토큰 스타일 미리보기 속성 미리보기를 적용하고 있는지 확인하세요. 이제 컴포넌트입니다.03:34

지금 특정 기능을 구현해야 합니다. 문서 생성을 위해, 모든 구성 요소마다 규칙과 사양이 적힌 .txt 파일을 만들어서, 혹시라도 필요할 때마다 참조할 수 있도록 해야 합니다.03:48

이 컴포넌트를 사용하면 이제 이 정확한 프레임워크를 따르게 됩니다. 출력 구조는 컴포넌트 페이지의 추가 탭에 추가해주세요.04:01

다시 한번 실행 순서를 말씀드릴게요, 진행하세요. 자, 이걸 실행해볼게요. 여기 보세요. 이 작업 목록이 정말 굉장하네요.04:11

클라우드 코드에서 제가 제공한 목록을 하나씩 처리하고, 각 단계를 완료하는 이 부분이 정말 좋아요. 지금 상황을 파악하고 있네요.04:22

네, 모든 단계를 완료했고 문서화도 했어요. 단계 하나, 둘, 셋, 넷을 진행했네요. 자, 이제 확인해 볼까요, 일치하는지 봅시다.04:32

여기 가서 메트릭 카드(metric card)로 이동할 수 있어요. 자, 이 메트릭 카드가 있습니다. 여기 디자인이 전부 나와요.04:43

피그마와 완전히 똑같이 일치하고, 이 문서도 가지고 있습니다. 클로드와 개발자, 디자이너들이 어떤 토큰을 어떻게 사용하는지, 어떻게 만들어졌는지 이해할 수 있도록 하는 정보입니다.04:51

어떤 변화가 생기면, 이 파일과 컴포넌트를 업데이트할 건데요. 그러면 이 컴포넌트가 사용되는 제품의 모든 곳에 적용될 겁니다.05:04

좋아요, 그럼 이제 진짜 기능을 만들어 볼까요. 이 카드를 포함하는 화면을 이용해서 기능을 만들 겁니다.05:14

자, 화면을 만들어 봅시다. 이제 이 컴포넌트들을 하나씩 조립하기 시작할 거예요.05:20

이건 컴포넌트예요. 이건 컴포넌트예요. 이것들은 컴포넌트들이에요. 자, 이제 플랫폼에 있는 컴포넌트를 준수하면서 화면을 만들도록 요청해 볼게요. 알겠어요.05:24

자, 새 창을 열어서 프롬프트를 붙여넣어 볼까요. 이번 프롬프트도 방금 보신 것과 아주 자세하고 비슷합니다.05:36

제가 이 구성 요소에 맞춰 화면을 만들도록 워크플로우를 따르라고 지시하고 있어요.05:44

시작하고, 분석하고, 피그마의 정확한 디자인에 따라 화면 사양을 생성하기 시작합니다.05:54

구현하고, 만들고, 미리 보기 생성하고, 디자인 토큰을 따라야 해요. 정말 중요한 부분이죠? 디자인 토큰을 준수하고, 미리 보기 스타일을 적용하고, 콘텐츠 미리 보기를 해야 해요.06:02

이 항목들을 모두 거쳐야 실제 빌드를 할 수 있어요.06:14

자, 어떻게 될지 한번 볼까요. 다시 한번 말인데, 할 일 목록을 만들어내고 있어요.06:17

제가 말한 모든 걸 검토했어요. 자, 봅시다. 봤어요, 모든 섹션, 모든 작업이 완료됐네요.06:27

자, 파일 구조 볼게요. 이거 정말 좋네요. 최신 정보로 유지했고, 새 페이지도 추가했어요. 자, 테스트해 볼까요.06:41

음, 공백 관련 문제가 좀 있는데, 괜찮아요. 그거 나중에 다룰게요.06:49

초안으로서 이 정보와 KPI 구성 요소를 명확하게 정의할 수 있다는 점은 전체적으로 꽤 괜찮네요. 제가 들어가서 조금 정리해 볼 수 있을 것 같아요.06:59

그리고 제대로 작동하는지 한번 확인해 봅시다. 백로드에서 16점 정도 되어야 하죠, 네.07:14

자, 가 봅시다. 여기 가니 고쳤네요. 완벽합니다. 정확히 피그먼트 디자인을 따라 해요. 이제 컴포넌트를 추가할 수 있습니다. 이 페이지들 중 일부에 이런 것들이 있죠.07:29

자, 이제 여러분이 구축할 추가적인 구성 요소들에 대해서는 이만 마치겠습니다. 마지막으로 제가 말씀드렸던 작은 팁이 있는데, 여러분의 개별 채팅방들을 설정할 때, 제가 했던 모든 콘텐츠가 잘 보이도록 하는 것을 잊지 마세요.07:43

저장됐어요. 그래서 이 채팅 기록을 프로젝트 컨텍스트 .md 파일에 저장하고 싶어요.07:53

이제 이 프로젝트 전체를 추적하게 됩니다. 세션 세, 날짜, 그리고 이 채팅에서 무슨 일이 있었는지까지 기록하고 있어요. 이 방법으로 모든 채팅에 저장하는 것을 추천합니다.08:06

직접 해보고 싶으시다면, 제가 추천하는 방법은 다음과 같습니다. 먼저 스타일 가이드를 만드시고, 한 가지 컴포넌트부터 시작해서, 하나의 기능을 구현해 보세요. 그리고 notes.md 파일을 활용하세요. 이 영상이 도움이 되셨다면 좋아요와 구독 부탁드립니다.08:19

AI를 활용해서 제품 팀을 더 빠르게 구축하는 방법에 대한 콘텐츠를 더 많이 만들고 있어요.08:32

시청해주셔서 감사합니다. 이제 멋진 걸 만들어 보세요.08:37