여기쏙 — Figma plugin 제작기 : 1. 프록시 서버

간단 소개

여기어때는 Figma 플러그인 '여기쏙' 2.0 개발 중 발생한 CORS 및 HTTPS 문제를 해결하기 위해 안전한 프록시 서버를 구축한 과정을 공유한다.

AI Summary

여기쏙 Figma 플러그인 개발 배경 및 문제점
- 여기어때는 디자이너 생산성 향상을 위해 **Figma 플러그인 '여기쏙'**을 개발.
- 기존 1.0 버전은 더미 데이터 기반으로 기능이 한정적이고, 실제 서비스와 불일치하여 사용 빈도가 낮아짐.
- 여기쏙 2.0은 실제 여기어때 API를 호출하여 실데이터 기반 UI 검증을 목표로 함.
Figma 플러그인 데이터 호출 문제 및 프록시 서버 필요성
- Figma 플러그인에서 직접 API 호출 시 CORS 에러 발생 (Figma UI는 WebView 환경, Gateway API는 외부 접근 미허용).
- Figma 플러그인은 HTTPS만 허용하며, HTTP 주소는 에러 발생.
- 이러한 문제 해결을 위해 HTTPS + CORS 허용 + 외부 접근 가능한 프록시 서버 구축이 필수적.
안전한 프록시 서버 구축 및 인프라 활용
- 새 인스턴스 생성의 복잡성 때문에 기존 CMS 인스턴스에 Docker로 프록시 컨테이너를 띄워 인프라 재활용.
- SRE팀과 협력하여 프라이빗 도메인, Internal ALB, NestJS 기반 프록시 서버, Docker/ECR/CodeDeploy를 활용한 배포 파이프라인 구축.
- 프록시 서버는 게스트 전용, GET-only 읽기 전용, 서비스 라우팅 단순화, 응답 최소화, Docker 기반 배포 원칙으로 보안 및 안정성 확보.