Video: Figma Agent로 완벽한 디자인 만들기
Channel: 코드팩토리
Duration: 5m 57s
Source: subtitle (auto, ko)
Transcript:
자,이 영상은 피그마와의 유로 파트너십으로 제작이 됐습니다. 지금 열어둔이 페이스 파일에서 기존 화면과 라이브러리를 피그마 에이전트한테 주고 태블릿이랑 모바일 화면을 한번 만들어 볼 거예요. 결과를 직접 고치고 원본 변수 변경이랑 컴포넌트 핸드오프 스킬을 통한 개발 문서까지 한번 보여 드리도록 할게요. 피그마 에이전트는 피그마 디자인 안에서 대화로 작업을 요청을 하면은 디자인 파일의 화면이랑 요소를 만들어 주거나 아니면 수정을 해 주는 에이전트예요. 자, 이번에 준비한 건 가상의 소재 디자인 스튜디오 페이즈입니다. 자, 금속 구체와 주황색 리본, 큰 티포그래피를 중심으로 데스크톱 화면을 한번 잡아 놨고요. 자,이 그래픽은 피그마 도형과 그레디언트 효과로 만든 정적인 디자인이라고 보시면 돼요. 자, 그런데 첫 화면만 우리가 정하면은 뒤에 만드는 페이지는 또 다른 느낌으로 나올 수가 있잖아요. 그죠? 자, 그래서 색상이랑 간격은 변수로, 글꼴은 스타일로, 버튼이랑 카드 같은 공통 요소는 컴포넌트로 준비를 한번 해 봤고요.이 브랜드 규칙을 만드는 작업도 앞서서 피그마 에이전트에게 맡겼고 실제 변수와 버튼 속성을 확인을 해 뒀어요.
자, 그리고 브랜드 원보는 라이브러리로 개시를 해 놨고 사이트 파일에다 연결 했습니다. 에이전트 세팅에도 그 라이브러리를 다 붙여 나왔어요. 제가 만든 버튼이랑 색상 규칙을 다음 작업의 맥락으로 이제 주는 거죠. 자, 게시랑 연결은 제가 직접 설정을 다 해 줬고요. 자, 이제이 데스크톱이랑 라이브러리를 기준으로 우리가 다른 화면을 한번 만들어 보도록 할게요. 자, 에이전트에는 화면 폭만 줄이지 않고 배치도 바꿔 달라고 요청을 했어요. 자, 태블릿은 카드를 두 개씩 놓고 모바일은 한 열로 내려가게 그죠? 자, 소재 샘플과 연락처도 모바일에서는 세로로 정리하고 상세 페이지에서는 같은 소재 그래픽이랑 버튼을 사용하도록 했습니다. 자, 작업 중에는 에이전트가 라이브러리에서 컴포넌트와 스타일 변수를 찾는 과정이 보였고요. 자, 작업을 마친 뒤에는 새 화면을 세 프레임으로 만들어 나왔어요. 자, 결과를 보면은 태블릿색의 카드는 두 개와 한 개로 나뉘고 자, 모바일은 한 열로 돼 있어요. 자, 소재 샘플도 모바일에서는 세로로 내려가고요.
상세 페이지에서는 소재 소개랑 작업 과정이 들어갔습니다. 자, 여기에서 확인한 거는 각각의 폭에 맞춘 디자인이요. 자, 아직 작동하는 반응 웹사이트는 당연히 아니지만 실제 웹에서 우리가 화면 크기에 따라 바뀌는 동작은 어, 뒤에서 또 한번 봐 보도록 할게요. 자, 그냥 완료됐다는 응답만 보고서 넘어가면 안 되겠죠? 실제 화면을 한번 내보내서 확인을 해 봤고요. 자, 소재 영역에 편집 가능한 소재 선택 패널이라는 재작용 문구가 남아 있었고 어두운 배경 위에 작은 파란 글자는 조금 읽기가 어렵기는 했죠. 자, 에이전트의 방문자가 읽을 문구로 바꾸고 배경에 맞는 글자색 규칙을 연결해 달라고 이렇게 요청을 하면은요. 한번 요청을 해 볼게요. 자, 수정 후에는 소재를 비교해 보라는 소개로 바뀌고 어두운 배경의 작은 제목도 흰색으로 바뀌었습니다. 자, 화면 배치는 유지하면서 필요한 부분들을 우리가 다듬어 준 거죠. 자, 제가 직접 수정할 수도 있어요. 자, 데스크톱에이 버튼 문구를 익스플로더 스튜디오로 바꿔 봤어요.
자, 다른 버튼의 스타업 프로젝트는 그대로 남아 있고요. 요청을 우리가 다시 보내서 화면 전체를 기다릴 필요 없이 제가 결정한 부분만 속성에서 고칠 수가 있어요. 자, 화면이 늘어난 다음에는 브랜드 규칙을 또 바꿔 봤습니다. 원본 파일에서 강조색을 파란색에서 청록색으로 바꿨고 버튼 모서리를 둥근 형태에서 조금 더 각진 형태로 바꾸게 했어요. 새 변수를 만드는 대신에 기존 변수의 값을 바꾸도록 요청을 했고요. 자, 에이전트가 원본값을 수정한 뒤에는 제가 라이브러리를 개시하고 사이트 파일에서 업데이트를 수락을 해 줬습니다. 자, 그러니까 연결된 버튼이랑 카드 연락처 영역의 색이 바뀌었고요. 직접 바꾸던 익스플로더 스튜디오랑이 다른 버튼을 스타로 프로젝트 문구는 그대로 유지가 됐어요. 자, 혼자 작업해도 화면 같은 버튼이랑 색상을 따로 관리하려면은 손불꽃이 굉장히 많이 늘어나잖아요. 자, 저는 공통 규칙을 한 곳에서 관리를 하고 에이전트가 그 규칙을 참고해서 다음 화면을 만들 수 있는 점이이 점에서이 작업에서 굉장히 유용했습니다.
자, 디자인을 개발에 넘길 때는 화면만 있으면 부족한 부분도 당연히 있죠. 자, 버튼에 어떤 속성이 있는지, 어떤 상태까지 준비가 돼 있는지를 우리가 같이 확인을 해 줄 수 있어야지 굉장히 유용하니까요. 자,이 버튼의 개발 문서는 색상을 바꾸기 전에 커뮤니티의 컴포넌트 핸드 스킬로 만들어 뒀고요. 자, 브랜드 원본의 버튼 하나를 선택을 하고 실제 속성 기준으로 정리해 달라고 요청을 해 줬어요. 자, 문서에는 버튼 미리 보기로 있는 두 가지 카인드, 레이블 속성, 색상이랑 간격 규칙들이 들어가 있고요. 자, 개발 에이전트가 참고할 수 있는 설명이랑 원본 링크도 전부 다 싹 다 정리가 돼 있습니다. 자, 그러니까 훨씬 더 효율적으로 우리가 작업을 할 수가 있겠죠. 자, 여기에서 이용한 거는 없는 상태를 구분을 해 준 부분이에요. 자,이 버튼에는 호버라든가 로딩 같은 상태가 준비돼 있지가 않아요. 어, 고의적으로 그럴 수도 있고 아닐 수도 있고 어쨌든 없는 거죠. 그래서 문서에서도 미싱이라고 적어 놨고 디자인에서 정한 것과 개발하면서 추가할 것을 구별할 수가 우리가 있다라는 거죠.
자, 규칙을 바꾼 뒤에이 문서도 우리가 다시 확인을 해 봤어요. 자, 연결된 미리 보기는 바뀌었는데 설명에 적힌 색상값은 이전 값에 좀 남아 있고요. 자, 그 부분을 우리가 에이전트에게 다시 요청해서 현재 값으로 갱신을 했습니다. 자, 그러면 이제 우리가 화면이랑이 버튼의 실제 규칙 아직 없는이 액션까지 우리가 함께 개발 에이전트에게 전달할 수가 있겠죠. 자, 이번에는 피그마에서 내보낸 화면과 소재하트 확인한 공통 규칙과 문서를 로컬 코덱스 작업의 입력으로 우리가 사용을 해 줬어요. 자, 피그마에서 만든 디자인을 기준으로 실제 웹사이트를 구현을 하고 데스크톱이랑 태블릿, 모바일 크기 이렇게 세 가지로 전부 다 확인을 했고요. 카드가 세 열에서 두 열 그리고 또 한 열로 바뀌는지 소재 영역이 모바일에서 세로로 내려가는지도 다 확인을 한번 해 봤습니다. 자, 만들고 싶은 화면을 말로만 설명하는 것보다 저는 이렇게 화면과 규칙을 먼저 정해 두는 편이 개발에 요청할 내용을 개발할 때 우리가 또 체크리스트를 만들어야 될 내용을 구체적으로 구현을 해 놓는데 굉장히 도움이 많이 된다고 생각을 해요.
자, 혼자 개발할 때도 화면이 늘어나면은 디자인을 계속 결정을 또 우리가 해 줘야 되잖아요. 그죠? 업데이트도 해 줘야 되고. 저는 그 기준을 피그마에서 먼저 만들고 에이전트로 확장한 결과를 직접 다듬어서 개발을 쓰는 흐름이 굉장히 좋았고요. 자, 여러분도 기존 디자인도 그대로 사용해서 한번 시작을 해 볼 수가 있으니까 설명란에 링크로 컴포넨 핸드프 스킬을 직접 한번 사용을 해 보세요.
