OH SU JINFrontend Engineer

사내 서비스운영 중디자인 토큰

MDS

URL이나 Figma 디자인 시스템에서 토큰을 뽑아 문서 디자인 시스템을 만드는 도구.

담당
프론트엔드 · Figma 플러그인 · 추출 파이프라인 · 배포
팀
백엔드 1 · 프론트 1(본인)
기간
2026.06 – 2026.07

두 축으로 움직이는 서비스다. URL을 넣으면 문서 디자인 시스템과 가이드 프레임을 뽑아내고, Figma 디자인 시스템에서는 토큰을 추출해 광고주별로 바인딩한다. 플러그인과 서버가 계약을 공유하는 구조라 버전 불일치가 가장 큰 위험이었다.

배포
사내 도구
스택
Next.jsTypeScriptFigma Plugin APIPlaywrightsystemdAWS

주요 작업

  • 플러그인과 서버가 어긋나면 배너로 경고한다

    • Figma 플러그인은 사용자 로컬에 임포트된 채로 남아 있어서, 서버 계약이 바뀌어도 옛 플러그인이 계속 붙는다.
    • 프로토콜 버전 핸드셰이크를 넣어 버전이 어긋나면 플러그인 안에 경고 배너를 띄우고 접속 중인 서버 호스트를 라벨로 보여주게 했다.
    • 로컬용·운영용 zip 이름도 분리해 임포트 사고를 줄였다.
  • 배포 헬스체크를 포트에서 서비스 상태로

    • 포트가 200을 돌려준다고 해서 서비스가 살아 있는 건 아니다.
    • 헬스체크를 서비스 활성 상태까지 확인하도록 바꿨다.
    • 설정과 시크릿은 각각 다른 저장소에서 기동 시 메모리로만 읽어 디스크에 남기지 않는다.
  • 크롤링 비용을 상수로

    • 요청마다 브라우저를 띄우지 않고 상시 인스턴스를 재활용하며, 광고·트래커를 차단해 불필요한 네트워크를 제거했다.
    • idle 타이머로 유휴 시 자원을 반납한다.
크롤러
상시 브라우저 + 광고 차단 + 인스턴스 재활용 + idle 타이머
메모리
2GB 상한으로 격리
크롤러가 서버를 밀어내지 못하게
플러그인 배포
4자리 코드 · 정적 zip
로컬·운영 자동 분기
보안
SSRF 가드 운영 검증
내부·사설·메타데이터 차단