스토리북 배포 with figspec

문제1. figma와 figspec

프로젝트에서 깃 액션으로 storybook을 배포하라는 의뢰가 들어왔다. 스토리북에서 배포를 하는 경우 피그마와 즉시 연동이 되어 디자이너와 협업하기 편해진다는 장점이 있다. "오, 신기한 기술이네"하고 신기해하던 와중 figspec의 존재에 대해 알게 되었다. 단순히 피그마 화면만 띄우는 것이 아니라 요소들의 pixel, 색상 단위까지 전부 알게 되는, 단순 피그마 연동의 상위호환 버전이었다. figspec으로 프로젝트를 준비하자! 라고 생각하고 바로 실행에 옮겼다.

문제1. 피그마 파일이 열리지 않음

storybook 배포하고 피그마 연동까지는 어떻게 시키는대로 잘 했지만 예상치 못한 곳에서 문제가 발생했다.

바로 피그마 파일이 열리지 않았던 것이다. 피그마로 열어보니 피그마는 잘 되고 피그스펙은 또 오류가 발생했다. 이상함을 느껴 dev 환경으로 열어보니 여기 피그스팩은 또 잘 열린다... 혹시 .env파일의 문제인가?싶어서 Primary에는 비밀키를 통째로 집어넣고 Warning에는 process.env.NEXT_PUBLIC_STORYBOOK_FIGMA_ACCESS_TOKEN를 집어넣어 비교해보았다. 시도 결과 Primary에는 정상작동했으나 Warning 버튼에서 오류가 난 것을 알 수 있었다. 역시... git action으로 배포한 상황 속에서는 gitIgnore에 있는 키 값을 읽을 수 없는 것이 문제였다.

문제2. .env파일 깃에 주입하기(?)

문제의 원인을 안 뒤부터는 문제에 집중하기 쉬워졌다. .env파일을 어떻게 git에 주입하지?라는 생각을 하고 git action .env를 검색해보았다. 조사결과 .env파일의 키 벨류 값을 깃허브 secret에도 추가해야 한다는 사실을 알게 되었다.

이처럼 깃허브의 repository secrets에 추가하는 것으로 깃허브의 비밀키와 git action의 비밀키를 연결해주는 것이다. 그러니까 엄밀히 말하면 .env파일을 깃에 넣는 것이 아니라 깃의 비밀키를 깃 repository에 올라와있는 리액트 파일에 대입하는 것이다. 이후 chromatic.yml 파일에 echo "변수명=${{ secrets.변수명 }}" >> .env를 대입하여 마무리지었다. chromatic.yml의 형태는 다음과 같다.

on: 
  push:   
    branches: 
      - main #메인 브랜치에 푸시될 때마다 깃 action 활성화

jobs:
  test:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v1

      - name: .env setting
        env: 
          NEXT_PUBLIC_STORYBOOK_FIGMA_ACCESS_TOKEN: ${{ secrets.NEXT_PUBLIC_STORYBOOK_FIGMA_ACCESS_TOKEN }}
          projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
        run: |
          echo NEXT_PUBLIC_STORYBOOK_FIGMA_ACCESS_TOKEN=$NEXT_PUBLIC_STORYBOOK_FIGMA_ACCESS_TOKEN >> .env

      - name: install library
        run: yarn
      - uses: chromaui/action@v1
        name: deploy chromatic
        with:
          #👇 Chromatic projectToken, see https://storybook.js.org/tutorials/intro-to-storybook/react/ko/deploy/ to obtain it
          projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
          token: ${{ secrets.GITHUB_TOKEN }}

여기에서 echo "내용">> .env는 .env에 내용을 넣어달라는 뜻으로 여기서도 삽질을 좀 했다. 쉽진 않았지만 결과가 나와서 다행이다.