제품을 만들고 있다면, 제대로 된 디자인 시스템이 꼭 필요합니다. 그렇지 않으면, 마치 다섯 명이 다른 스타일로 만든 것처럼 엉망인 UI 디자인이 나올 거예요.00:00

이 영상에서는 제가 실제로 사용하는 디자인 프로세스를 보여드릴 거예요. 디자인 영감을 얻는 방법, 그리고 Figma Make를 이용해서 디자인 시스템을 만드는 과정, 마지막으로 실제 서비스에 바로 적용할 수 있는 UI 페이지와 컴포넌트를 만드는 방법까지 자세히 알려드릴 거에요. 커서나 다른 IDE를 사용하시는 분들께도 유용할 거예요.00:08

늘 그렇듯이, 이번 영상에 필요한 모든 자료는 아래에 정리되어 있으니 다운로드 받아서 따라와 주세요. 자, 이제 이 시점에서 뭘 만들 건지 이미 알고 있어야겠죠?00:23

제품 요구 사항 문서와 사용자 스토리를 준비해 두셨을 겁니다. UI의 각 페이지에 어떤 콘텐츠가 담길지, 각 페이지에 어떤 컴포넌트가 들어갈지 알고 계시겠죠.00:32

그리고 지금 이 단계는 UI 디자인과 UI 디자인 시스템 구축을 함께 진행하는 단계이기 때문에, 여러분의 UI에 포함될 모든 페이지와 모든 컴포넌트에 대한 영감을 수집해야 합니다.00:43

예를 들어, UI에 테이블이 들어갈 예정이라면 테이블이 어떻게 보여야 할지 영감을 얻고, 마음에 드는 버튼 스타일을 찾으면 수집하고, 마음에 드는 대시보드를 발견하면 그것도 참고하세요.00:56

그래서 그거 다 수집해야 돼요. 그래서 제가 여기 필요한 것들을 좀 적어놨어요.01:07

그러면 이런 분위기 보드, 대략 이런 식으로 나오게 될 텐데, 각 페이지나 각 구성 요소마다 이런 식으로 영감을 정리해두는 것을 추천합니다.01:13

그리고 영감을 얻기 위해 저는 보통 mobbin.com을 사용해요. 모빈닷컴, 모르는 분들을 위해 말씀드리자면, 수백 개의 회사에서 가져온 UI와 디자인을 모아놓은 웹사이트예요.01:23

자, 엄밀히 말하면, 만약 내비게이션 메뉴에 대한 영감을 얻고 싶다면, 여기 많은 참고 자료가 있어요. 내비게이션 메뉴에 대한 아이디어를 얻어서, 예를 들어 복사해서 피그마에 붙여넣을 수 있을 거예요.01:33

현재 진행 중인 프로젝트에서는 딜 디자인에서 영감을 얻고 싶어요.01:45

그래서 이제 제가 UI에 들어갈 페이지나 컴포넌트 디자인 영감을 얻기 위해 수집할 거예요. 예를 들어, 제 UI에 테이블이 있죠? 그리고 저는 Deal에서 디자인한 테이블이 마음에 들어요.01:50

그거 복사해서 나중에 피그마에 붙여넣을 거예요. 저도 마찬가지예요. 제가 대시보드를 가지고 있잖아요, 그냥 여기 피그마에 복사해서 붙여넣을 거예요.02:03

그래서 이 영감을 이용해서 디자인 시스템을 만들고, UI 페이지를 생성하고, 당연히 저희만의 데이터와 세부 사항으로 채울 수 있습니다.02:11

이제 저희가 분위기 보드 영감을 준비했으니, 이제 실제로 시작할 수 있습니다.02:21

피그마로 보내서 몇 개의 페이지 생성을 시작해 봐. 그러면은 그걸 바탕으로 디자인 시스템을 만들 수 있어. 그리고 최소 기능 디자인 시스템을 만들기 위해서는 몇 개의 페이지를 만들어야 중요해.02:25

그리고 저희 경우에는, 당연히 네비게이션 바가 어떻게 생겼는지도 생성하고 싶고, 테이블도 생성해서 AI가 나중에 각 테이블 요소가 어떻게 구성되어야 하는지 이해할 수 있도록 하고 싶습니다.02:37

예를 들어, 여기서는 아바타 컴포넌트도 생성할 수 있습니다. 여기에는 국기를 사용하여 국가를 어떻게 표현할지에 대한 컴포넌트가 있을 거고, 다양한 상태를 나타내는 배지도 있을 겁니다. 뭐, 이런 식으로요. 또 여기서는…02:51

버튼이 어떻게 보이는지 생성하는 방법, 그리고 테이블의 다양한 상태도 생성하면 좋습니다. 예를 들어, 일괄 편집이 진행 중일 때의 모습처럼요. 각 컴포넌트마다 다양한 상태가 있다면 그것들도 함께 생성하는 것이 좋겠죠. 그리고 저는...03:07

홈페이지도 생성하고 싶어요. 카드 디자인이나 카드 안의 텍스트 스타일 같은 요소도 컴포넌트로 만들 수 있죠.03:23

예를 들어, 여기는 링크고요, 버튼 디자인, 배지, 아이콘 같은 것도요. 이런 식으로요.03:32

물론 대시보드도 있죠. 홈페이지랑 네비게이션 바부터 생성하기 시작할 것 같아요. 아주 간단해요. 그냥 오른쪽 클릭해서 피그마로 보내고, '이 페이지 생성해줘'라고 쓰면 돼요.03:39

정말 간단한 프롬프트인데, 진짜 잘 작동하네요. 제가 솔직히 좀 놀랐어요. 전에 이미 만들어봤는데, 저희가 참고한 스크린샷에서 가져온 레퍼런스처럼 거의 비슷하게 잘 만들어졌어요.03:51

물론 제가 몇 가지 변경을 하고, 제 취향에 맞게 조금 수정했습니다. 이제 첫 번째 페이지가 마음에 드시면, 다음 페이지를 생성하시면 됩니다.04:03

너무 간단해요, 그냥 분위기 보드에 가서 테이블을 복사해서 붙여넣고 테이블 생성을 요청하면 돼요. 제가 전에 대시보드를 만들었고 테이블도 만들었어요.04:15

와, 결과물이 얼마나 좋은지 보세요. 혹시 피그마 메이크가 뭔지 모르는 분들을 위해 말씀드리면, 피그마에서 만든 도구인데, 구글 AI 스튜디오나 VZero처럼 UI 디자인을 생성할 수 있어요.04:28

물론 디자인은 가지고 계시겠지만, 필요하시면 코드를 사용할 수도 있습니다.04:40

그리고 이 도구들처럼 UI도 상당히 비슷하고, 요소 선택도 가능합니다.04:44

그리고 자꾸 시키고, 바꿔도 보세요. 그리고 피그마를 원래부터 사용하셨다면, 정말로 적극 추천합니다. 왜냐하면, 보시면 품질이 정말 괜찮다는 걸 알 수 있어요. 저도 솔직히 엄청 놀랐거든요.04:50

이제 디자인이 끝났다고 가정하면, 디자인을 복사해서 피그마에 붙여넣을 수도 있습니다. 화면을 함께 사용할 수 있죠.05:01

자, 여기 붙여넣었습니다. 이제 팀원들과 함께 협업할 수 있습니다.05:13

여기 있는 거의 모든 걸 변경할 수 있어요. 피그마를 보통 쓰시는 것처럼요. 그래서 진짜 좋네요. 한번 사용해 보시라고 강추해요. 좋아요.05:17

이제 UI 페이지 몇 개를 생성했으니, 이 UI 페이지에서 디자인 시스템을 생성할 수 있게 됐어요. 그리고, 정말 멋진 피그마 메이크를 실제로 사용할 겁니다.05:26

여기 디자인 시스템 같은 것을 만들어볼 거예요, 대략 이런 느낌으로요.05:38

저는 이걸 최소 기능 디자인 시스템이라고 부르는 게, 우리가 사용할 기본 색상, 다양한 상태 표현 방식, 폰트, 반지름, 아바타, 아이콘 크기, 그리고 기본적인 컴포넌트들이 어떻게 보일지 정도의 기본적인 것들만 담고 있어서 그래요.05:42

버튼이나 입력 텍스트, 카드, 다양한 배지, 테이블 같은 것들을 어떻게 구현하죠? 제가 이 프롬프트를 사용했어요. 생성된 UI 페이지를 바탕으로 다음 사항을 포함하는 디자인 시스템을 만드세요.05:59

색상, 타이포그래피, 간격, 그리고 반지름을 원해요. 아이콘과 컴포넌트, 그리고 각각의 예시 하나씩도 필요합니다.06:14

버튼, 입력 필드, 카드 같은 것들, 그런 예시 하나씩 필요하고, 그걸 복사해서 피그마로 돌아가서 만드시는 거죠.06:23

여기서 저는, 프롬프트 앞에 붙여넣은 것과 같이, 디자인 시스템을 생성할 수 있었습니다.06:30

이 정도면 충분할 거예요. 자, 이제 다음 단계는 이걸 복사해서 디자인, 즉 피그마로 돌아가서 붙여넣는 거예요.06:35

물론 여기 내비게이션 바는 제거하실 겁니다. 그러면 이렇게 페이지가 남게 되는데, 이 페이지를 MCP를 통해 저희 커서, 클라우드 코드, 어떤 ID를 사용하시든 상관없이 가져올 수 있습니다.06:45

모든 곳에서 잘 작동할 거예요. 제가 강조하고 싶은 건, 디자인 시스템을 처음 생성했을 때 정말 방대한 디자인 시스템이 만들어졌다는 겁니다.06:59

여기 보시면, 아이콘에 대한 더 자세한 내용들이 많이 있습니다.07:09

그런데 저희는 가지고 있습니다. 알림창, 다양한 요소에 대한 자세한 정보, 테두리 곡률, 카드, 테이블 컴포넌트, 페이지네이션 심지어, 필터 버튼, 로딩 상태, 빈 상태, 네비게이션, 어떻게 보이는지, 모델 구조까지요.07:15

그러니까 꽤 꽤 과도하고, 사실 페이지도 엄청 길어요.07:31

이거 좀 봐, 페이지가 긴데 생각보다 나쁘지 않아. 디자인 시스템에 더 많은 요소를 포함시키는 게 AI가 컴포넌트를 생성하도록 안내하는 데 도움이 될 거야. 그런데 이 디자인 시스템을 Cursor에 적용해 보니까, 흠…07:35

너무 과했어. 그래서 이걸 좀 더 간결한 버전으로 다시 돌아갔지.07:51

하지만 좀 더 자세한 디자인 시스템을 원한다면, 디자인 시스템을 더 작은 페이지들로 나눠서 각 페이지에 이 요소들 3~4개 정도 넣는 걸 추천해.07:55

그리고 나서 MCP를 통해 커서에 하나씩 전달하면 돼요. 이제 피그마 메이크로 모든 UI 페이지를 디자인했으니 두 가지 선택지가 있습니다.08:08

첫 번째 옵션은 피그마 메이크가 코드를 제공하기 때문입니다. 코드가 현재 프레임워크를 지원한다면, 그냥 GitHub에 올려놓고 커서, 클라우드 코드, 뭐든지 사용하고 있는 곳에 열어두시면 됩니다.08:17

하지만 그 전에, 시니어 UI 엔지니어링 모범 사례에 따라 디자인 토큰을 사용하도록 모든 하드코딩된 값을 리팩터링하는 것을 강력히 추천합니다.08:30

여기 사용할 수 있는 프롬프트가 있어요. 그냥 붙여넣고 피그마에서 코드를 전체적으로 리팩터링하도록 하면 돼요.08:40

기본적으로 프롬프트는 물론, 모든 과정이 아래 설명란에 연결되어 있을 거예요.08:48

그러니까 꼭 챙기셔야 합니다. 그리고 두 번째 옵션은 코드를 바로 커서에 적용하지 않고 싶다면, 페이지 디자인을 하나씩 복사해서 피그마 보드에 모든 화면을 만들 수 있습니다. 거기에는 모든 화면을 포함한 포괄적인 디자인 시스템도 함께 갖춰집니다.08:54

이제 팀원들과 협업하고, 변경 사항을 만들 수 있습니다. 그런 다음 Figma MCP를 사용하여 커서 내에서 또는 원하는 다른 IDE에서 다시 빌드할 수 있습니다.09:13

실제로 이 부분은 다음 영상에서 다룰 예정이니, 팔로우하고 확인해주세요. 이 영상을 시청하는 시점에 따라 두 번째 영상 링크가 아래 설명에 연결되어 있을 겁니다. 네, 이것이 전부입니다.09:23