Grok Bot 활용하기: Figma 포토모자이크 제작

타임라인에서 세 개의 패널로 구성된 모자이크를 본 적이 있을 겁니다. @bot과 @figma를 사용하여 만드는 방법을 소개합니다.

https://x.com/kazarov_d/status/2094470313862136145

디자이너라면 누구나 만드는 방법을 알겠지만, 상당히 번거로운 작업입니다.

https://x.com/studiobakers/status/2095077637639262295

따라서 우리는 "이 번거로움을 90% 줄여서 디자인의 멋지고 창의적인 부분에 집중하려면 AI를 어떻게 활용할 수 있을까?"라는 질문을 던져야 합니다.

Grok Bot이 바로 그 역할을 해낼 수 있습니다.

"방법"은 중요하지 않고 @bot 템플릿만 필요하다면, 여기에서 찾을 수 있습니다: https://x.ai/bot/dYpPe1PCZv2WJDVTYDwhc

그렇지 않다면, 제가 어떻게 구축했는지 설명해 드리겠습니다.

포토모자이크 만들기

Grok Bot을 사용하는 저의 일반적인 접근 방식은 다음과 같습니다: 직접 에셋을 만드는 방법을 분석한 다음, @Bot에 정확히 동일한 작업을 수행하도록 프롬프트를 작성하는 것입니다.

이 경우, 워크플로우는 Figma에서의 디자인이었습니다.

https://x.com/justinsunyt/status/2096635033603756354

이는 히어로 에셋이 있는 캔버스로, 컴포넌트화되어 세 개의 패널로 분할된 것입니다. X의 기존 게시물을 살펴보면 종횡비를 역설계할 수 있습니다.

저는 Bot에 정확히 이 작업을 요청했습니다. 다음은 제가 최적화한 첫 번째 프롬프트입니다.

Cursor Gothic, [link to image] 및 [insert file]을 본인의 에셋으로 교체하세요.

1이 게시 형식을 역설계하세요. 공유 배경 위에 하나의 와이드 스크린샷으로 이어지는 세 개의 이미지로 구성된 포토모자이크입니다.
2
3https://x.com/kazarov_d/status/2094470313862136145
4https://x.com/studiobakers/status/2095077637639262295
5
6- 각 패널을 최대 해상도로 가져오고 종횡비를 확인하세요.
7
8- 세 개의 내보내기 패널(왼쪽/가운데/오른쪽)을 자르세요.
9
10- 첨부된 파일 [insert file]에서 새 디자인으로 만드세요. 하나의 섹션에 유지하세요.
11
12- 세 패널 모두에 새 배경 [link to image]을 적용하세요. 참조 게시물의 배경이 아닌 이 에셋을 사용하세요.
13
14- 히어로: 시뮬레이션된 4K 디스플레이(2× DPR)에서 cursor.com의 스크린샷. UI/텍스트가 멀리서도 읽힐 수 있도록 페이지를 확대하세요. 캡처가 실제 랜딩 페이지(내비게이션 + 헤드라인)인지 확인하세요.
15
16- 창에 중앙 정렬된 드롭 섀도우와 실제 모서리 둥글림 적용. 웹페이지 상단 모서리는 클리핑/마스킹된 레이어가 필요합니다. 그렇지 않으면 네모 반듯하게 보일 수 있습니다.
17
18- Arc 스타일 크롬: 어두운 Cursor 잉크 셸, 컬러 트래픽 라이트, Cursor Gothic으로 중앙 정렬된 URL. 제목 표시줄 + URL 텍스트는 높이에 맞게 조정되어야 합니다. 페이지 주변의 좌/우/하단 여백 동일하게 적용.
19
20- Figma에서 컴포넌트로 구성하여 한 번의 붙여넣기로 모든 패널이 업데이트되도록 하세요 - 배경, 히어로(Arc), 마스터, 그리고 마스터의 세 가지 내보내기 클립.
21
22배경 또는 히어로를 한 번만 편집해도 마스터와 세 가지 내보내기가 모두 업데이트되면 작업이 완료된 것입니다.

프롬프트를 전송한 후 몇 분마다 봇을 확인하세요. 문제가 발생하면 이유를 물어보세요.

봇이 자동 레이아웃을 제대로 사용하지 않을 수도 있습니다. 패딩이 잘못되었을 수도 있습니다. 테두리 반경을 조정해야 할 수도 있습니다.

변경하고, 그 이유를 기록한 다음, 이러한 사항들을 다음 프롬프트에 통합하세요.

봇이 작업하는 모습을 지켜보기

몇 가지 메타 포인트:

• 정확한 용어를 사용하고 있습니다. "사진 속 사진이 세 개 있는 뭐시기"라고 하지 않고 "포토모자이크"라고 부른 점에 주목하세요.
• 저는 포토모자이크가 무엇인지 몰랐지만, Grok에 "세 개의 이미지를 조합하여 더 큰 이미지를 만드는 콜라주를 뭐라고 부르나요?"라고 물었습니다.
• 모든 프롬프트는 초심자의 마음가짐에서 시작해야 합니다. 이 작업을 잘 수행하는 데 필요한 모든 것을 어떻게 배울 수 있을까?
• 첫 번째 시도는 완벽하지 않았습니다. Grok Bot에 "처음부터 제대로 하기 위해 미리 무엇이 필요했는지 알려줘"라고 물어서 위의 프롬프트를 완성했습니다.
• 항상 "이 워크플로우를 어떻게 복제하거나 AI가 다음 번에 모든 것을 할 수 있도록 할 수 있을까?"라고 질문하세요. 이것이 @poteto가 강조하는 점입니다.
• 이를 위해 특화된 봇을 사용하지 않았습니다. Figma에 연결된 일반 봇을 사용했습니다. 한 번만 할 작업이라면 괜찮지만, 반복적인 작업이라면 아마도 전문 봇을 만들 것입니다.

Grok Bot은 AI를 효과적으로 사용하는 것 이상의 의미를 지닙니다. 컴퓨터를 효과적으로 사용하는 방법에 관한 것입니다.

즉, 원칙 기반 사고, 효과적인 의사소통, 그리고 인내심을 의미합니다. Grok Bot을 사용하는 것은 대부분 문제 해결에 관한 것입니다.

완성된 에셋

게다가, 이제 이 게시물에서처럼 재사용할 수 있는 내구성 있는 에셋을 갖게 되었습니다:

iPad 발표 게시물을 위해 에셋 재활용하기

이 형식을 이해하지 못했다면 iPad 발표를 적시에 만들 수 없었을 것입니다.

크리에이터의 역할은 감정을 불러일으키는 것입니다.

Grok Bot을 사용하면 에셋 선택과 이미지에 집중할 수 있고, 나머지는 모두 Bot이 처리합니다.

제가 가장 많이 받는 질문은 "Grok Bot을 어떻게 사용할 수 있나요?"입니다. 여기 디자인에 활용하는 한 가지 방법이 있습니다.