최근 'CLFigNotion' Figma plugin을 개발했습니다. 퇴근하고 게임만 하는 삶에서 벗어나 하나의 목표를 가지고 개발하는 경험이 오랜만에 아주 설레고 좋았어요. 이 글을 쓰면서 plugin을 완성했던 늦은 밤, 회사 동료들에게 공유할 생각에 두근거리며 잠에 들었던 날이 떠오르네요.
오해가 없도록 미리 말씀드리면, 제가 이번에 개발한 plugin은 이미 공개되고 많은 찬사를 받은 evan님의 FigNotion plugin의 아이디어를 매우 매우 참고해서 만든 프로젝트입니다.
왜? 개발을 결심한 계기
저희 회사는 복잡한 기능 정책을 피그마와 노션 동시에 관리해야 하는 어려움이 있었습니다. 그러다 우연히 evan님의 FigNotion plugin을 알게 되었습니다. 짧은 시간이었지만 기획팀 동료분들 사이에서 업무 효율성이 입증되었고 회사 업무 워크플로우에 정식으로 도입하기로 결정했었습니다.
그러다 최근 FigNotion에서 원인을 알 수 없는 오류가 발생하기 시작했습니다. 슬프게도 올해 3월 이후로 새로운 업데이트 버전은 올라오지 않았기에 잠자코 기다릴 수 없었습니다. 그래서 급히 다른 대안이 찾아보기 시작했고, FigNotion을 자체적으로 개발하는 방법을 시도하기로 했습니다.
개발 과정의 난관들
CORS
이번에 plugin을 개발하면서 가장 저를 힘들게 했던 난관은 CORS 문제였습니다. 안드로이드 개발만 하던 저에게는 엄청 생소한 문제였는데요. 찾아보니 웹 or 서버 개발자분들에게는 기초 지식으로 공부하시는 것 같더라고요.
웹, 서버 개발자 존경 +1
민망하지만 빠른 개발을 위해서 CORS를 깊게 이해하지는 못했습니다. 하하;; 그래서 이 글에서는 간단하게만 설명하고 넘어가려고 합니다. CORS(Cross-Origin Resource Sharing)은 다른 출처의 리소스에 접근할 수 있는 권한을 부여하도록 브라우저에 알려주는 보안기법입니다. (자세한 설명은 https://escapefromcoding.tistory.com/724)
Figma plugin은모든 출처를 허용한 네트워크 요청만 지원합니다. 하지만 아쉽게도 Notion API는 해당하지 않았습니다. 그래서 Figma plugin에서 직접 Notion API를 요청하면 CORS 오류가 응답으로 오게 됩니다.
CORS 오류 피해 가기
방법은 proxy 서버를 이용하는 것이었습니다. CORS는 브라우저에서만 발생하는 이슈이기 때문에 Notion API를 직접 호출하는 proxy 서버를 중간에 두고, Figma plugin에서는 proxy 서버와 통신하게 구성하면 된다고 합니다.
다만 문제는 저는 클라이언트 개발자.. proxy "서버"를 띄우기란 그것 또한 어려운 문제였습니다
처음으로 시도해 본 것은 cors-anywhere, 무료 cors 서버를 이용했습니다. 서버를 통해 값은 정상적으로 받아오는 듯했지만, 무료 서버다 보니 프러덕에서 사용할 정도로 안전성은 높지 않았습니다. 그다음으로 Firebase Function도 시도했지만 ssl 오류로 네트워크 요청이 번번이 실패했습니다. Firebase Function은 관련된 자료로 거의 없어서 포기했습니다. 흑흑..
결론적으로는 회사 동료인 서버 개발자 "락펠"이 회사 내 서버 리소스를 할당해 주셔서 도움을 주셨습니다. 킹왕짱!!
◈ Figma Plugin Consle의 Network 탭에서 결과가 정상적으로 와도 Response가 빈 값으로 보이는 현상이 있습니다. 저도 이걸로 한참 삽질했어요. console.log로 결과가 정상적으로 오는지 확인하시면 좋을 것 같아요.
Notion API 이해하기
https://developers.notion.com/docs/getting-started
Notion API Overview
Discover how to leverage Notion's Public API to build integrations.
developers.notion.com
Notion API를 사용하기 전 이해해야 하는 개념이 있습니다. 바로 노션은 Block이라는 단위로 화면이 구성되어 있다는 점입니다. 페이지는 하나의 Block이며, 페이지 내에 포함되어 있는 제목, 텍스트 등 하나하나가 모두 Block입니다. 그리고 또 이러한 Block은 자식 Block을 가질 수 있다는 점도 중요합니다.
Returns a paginated array of child block objects contained in the block using the ID specified. In order to receive a complete representation of a block, you may need to recursively retrieve the block children of child blocks.
하나의 Block은 무수히 많은 Block을 자식으로 가질 수 있고, 이러한 개념은 자식 Block에게도 동일하게 적용됩니다. 이렇게 되면 페이지의 모든 Block을 한 번에 조회하기는 쉽지 않을 것입니다. 이러한 문제를 해결할 때에는 페이징 기법을 적용하기도 하는데요. 노션은 해결책으로 아래의 2개의 api를 제공해 줍니다.
Block 단일 조회
- https://api.notion.com/v1/blocks/{block_id}
Block 자식 조회
- https://api.notion.com/v1/blocks/{block_id}/children
Block 조회에서 자신의 첫 번째 수준의 자식 Block까지만 내려줍니다. 따라서 2개의 API를 이용해서 재귀 호출을 통해 모든 Block을 조회하는 코드를 작성해야 합니다.
익숙하지 않은 언어로 위 요구사항을 구현하려고 애를 많이 먹었습니다만 chatGpt 도움으로 어찌어찌 구현에 성공했습니다
최신화가 덜된 Notion API 문서
Notion API 문서에 깔끔하고 이쁘게 정리가 되어있지만, 아쉬운 점 딱 한 가지가 있다면 최신화가 살짝 덜 되어 있다는 점입니다. Block Type 중 일부 Block에 대한 객체 정의가 실제 내려오는 정보와 맞지 않는 부분이 있습니다. 예를 들면, synced_block 타입은 내부 필드로 children을 가지고 있지 않았습니다.
Figma Widget의 미지원 기능
Figma는 Text 하이라이트 기능 미제공
https://forum.figma.com/t/add-a-highlighter-for-text-to-the-type-settings/43515/16
Add a Highlighter for Text to the Type Settings
Yes! Please add this highlighting feature!
forum.figma.com
노션에서 텍스트 중 단어 강조를 위해 코드 스타일을 사용하거나, 백그라운드 색상을 입혀 사용하는데요. 피그마 위젯에서는 해당 UI를 지원하지 않는다는 것을 알게 되었습니다. 피그마에서 지원하지 않아서 애초에 해결 방법이 없는 문제였고, 동일하게 UI 표시하는 것은 포기했습니다. 대신 Font, FontWeight, color 등을 조합해서 다른 형태로 표현하기로 했습니다.
이미지 비율로 그리는 기능 미제공
https://www.figma.com/widget-docs/api/component-Image/
<Image /> | Widget API
An Image is essentially syntactic sugar for a Rectangle with an image fill. Instead of the fill prop, it has a src prop, that can be either a URL string or an ImagePaint. If a URL string is passed that will be used to create an ImagePaint.
www.figma.com
안드로이드에서는 이미지를 비율로 그리는 것은 매우 쉬운 기능이었는데요. 가로 사이즈를 고정, 높이를 wrap_content로 하고 비율로 그리기 위한 설정을 하면 되죠.
하지만 노션에서 이미지 블록을 그리기 위해 사용하는 Figma Widget API의 Image Compontent는 높이를 숫자, fill_parent만 가능했습니다. 노션 이미지 블록 정보에서 가로, 사이즈에 대한 어떠한 정보도 제공해주지 않았습니다. 그래서 이미지 비율을 알기 위해서는 이미지만 미리 불러오는 복잡한 로직이 필요해 보였습니다. 결과적으로 웹 개발자분에게 도움을 요청했지만, Figma plugin 프로젝트가 일반 리액트 프로젝트와 달라 어렵다는 답변을 받아 포기했습니다.
하지만 이미지 자체를 표시하는 것은 가능했기 때문에 높이를 300으로 고정해서 crop 형태로 표시하고 클릭하면 원본 이미지를 보여주는 새 페이지가 뜨도록 구현했습니다.
Plugin의 성과, 그리고 마무리
지금은 버전도 올리면서 이전에 지원하지 않았던 블록 타입들도 추가하고 있습니다. Figma plugin으로 공개 배포는 하지 않을 생각입니다. evan님의 멋진 아이디어를 따라 했다는 죄책감도 있고, proxy 서버를 회사 리소스를 사용했기 때문에 공개적으로 배포는 어려울 것 같습니다 ㅜㅜ
그리고 아직까지 오류 없이 잘 굴러가고 있습니다. CLFigNotion을 개발하는 계기가 되었던, 우리를 괴롭히던 오류들도 발생하지 않고 있습니다. 원인을 찾고 수정하지 않고 기능 구현만 목표로 달려서 개발했는데도 말이죠. 어쩌면 evan님의 FigNotion이 문제가 없었던 것일지도 모르겠습니다. 잠깐의 오류이거나 저희가 잘못사용했던 것일 수도 있네요.
하지만 저에게는 오랜만에 설레고 좋은 경험이 되었던 개발이었습니다. 도움을 주신 루시, 락펠 그리고 환호해 주시고 알차게 유용하게 사용해 주신 기획팀분들 감사합니다!
'이야기 > 후기' 카테고리의 다른 글
| [면접 후기] 판교에 위치한 청소 매니저 관련 서비스 회사 (3) | 2021.05.13 |
|---|---|
| [Mash-up] 동아리 해커톤 후기 (0) | 2021.03.06 |
| 2020 제 3회 정보처리기사 필기 - 후기 (2) | 2020.08.22 |
| 2020 Naver HackDay 참여 후기 (4) | 2020.05.22 |
