피그마 플러그인 개발: PD 혼자서 디자인 데이터 자동 주입으로 업무 효율 극대화하기

핵심 기술: 본 콘텐츠는 프로덕트 디자이너(PD)가 직접 기획하고 개발한 피그마 플러그인을 통해 디자인 과정에서 반복적으로 발생하는 더미 데이터 입력 작업을 자동화하는 경험을 공유합니다.

기술적 세부사항:
* 목표: 문자열과 이미지로 구성된 더미 데이터를 피그마 레이어에 자동으로 주입하여 디자인 작업 속도 향상.
* 데이터 소스: Google Spreadsheets (문자열), Google Drive (이미지).
* 주입 방식: 텍스트 레이어 이름과 Google Sheets 칼럼명을 대조하여 일치 시, 해당 row의 데이터를 랜덤으로 주입.
* 개발 환경: 피그마 플러그인 API, code.ts (로직), ui.html (화면 구성).
* 기술적 난관 및 해결:
* CORS 문제: Figma iframe에서 외부 API 직접 호출 불가 → 로컬 환경에서 프록시 서버를 사용하여 우회.
* Google Drive 이미지 403 에러: GCP API 요청 한도 초과 → S3 사용 및 이미지 URL을 Google Sheets에 첨부하여 문제 해결. 초기 로딩 속도 개선을 위해 캐싱 방식 시도했으나, 실시간 업데이트 필요성으로 인해 S3 URL 방식으로 전환.
* 협업 도구: Mapping Book을 제작하여 레이어명과 칼럼 데이터 매핑 정보, 더미 데이터 형식을 명확하게 정리, 다수 디자이너와의 효율적인 협업 지원.

개발 임팩트:
* 단순 반복 작업 자동화를 통한 디자인 생산성 대폭 향상.
* 디자인 시스템 적용 및 일관성 유지 용이.
* TF 구성원의 부담 감소 및 기획/제작 주체의 다양성 확보 가능성 제시.

커뮤니티 반응: (원문에서 직접적인 커뮤니티 반응은 언급되지 않았으나, PD가 혼자 플러그인을 제작하고 업무에 적용한 사례는 개발자 및 디자이너 커뮤니티에서 매우 긍정적인 반응을 얻을 수 있는 주제임)

톤앤매너: 실무 경험을 바탕으로 한 구체적인 문제 해결 과정과 기술적 인사이트를 공유하는 전문적이고 실용적인 톤.