프론트엔드 개발과 Figma

hansol yang
3 min readApr 27, 2020

--

아주 호기롭게 작성했던 포스팅 이후에 막상 사용하려니 굉장한 귀찮음이 몰려왔습니다.

여러가지 핑계를 대기가 굉장히 쉬웠습니다.
이미 틀이 갖춰져 있고, 일정도 타이트하고 그렇기 때문에 다시 Figma 를 작성하는 시간을 들이는 것이 그만큼의 효과가 있을지, 효율이 생길지 의문이다.
같은 핑계말이죠.

그래도 어쨌든 Figma 를 작업하기로 했고, 하길 잘했다고 생각합니다.

먼저 고민이 아주 터무니 없지는 않았던 것은 위의 핑계가 단지 핑계라기보다는 사실이었기 때문입니다. 작동하고 있는 프로젝트였고, 거기서 몇몇 기능을 추가하는 작업이었습니다. 그렇기 때문에 다시 UI 도구를 사용하는 것이 큰 도움이 있을까 했던 것이죠.

그래도 위의 포스팅에서도 언급했듯이 Figma 가 프론트엔드의 문서화의 역할을 할 수 있겠다는 기대가 있었기 때문에 귀찮음을 이겨내고 해보기로 했습니다.

그리고 Figma 는 그 기대에 잘 부응해 주었습니다.
그리고 사용하다보니 작업시간이 생각보다 길지 않았던 것도 좋았습니다. (제가 Figma 로 작업을 하는 것은 대단한 작업물을 만든다기보다는 스케치에 가깝기 때문에 그런것도 있습니다.)
그렇게 작업을 하고나자 생각보다 쓰일곳이 굉장히 많았습니다.

좋았던 역할을 정리해보면 다음과 같습니다.

  1. 문서화
    Figma 를 통해 그린 UI 는 디자인으로만 활용되는 것이 아니었습니다. Figma 는 컴포넌트 구조를 직접 정할 수 있고, 실제 UI 의 배경이 되는 레이어들도 쉽게 조정할 수 있기 때문에 프로젝트 구조에 맞게 Figma 의 환경을 잡아두고, 진행과정에 따라 업데이트를 하니 자연스레 문서화와 같은 역할을 할 수 있었습니다.
    또한 Figma 의 강점 중 하나는 협업입니다. 그 협업을 돕는 여러 기능중에는 같은 작업공간에 팀원들을 초대할 수 있다는 것과 자유롭게 원하는 위치에 코멘트를 남길 수 있다는 것 등이 있습니다.
    이 기능을 활용해 팀원들에게 Figma 작업공간을 공유하고, 각자의 롤에서 필요한 정보들을 코멘트로 남길 수 있게 하며 문서를 더 단단히 만들어 갈 수 있었습니다.
  2. 협업
    위에서 언급했듯이 Figma 는 작업공간에 팀원들을 초대할 수 있고, 수정, 코멘트 등의 권한을 줄 수 있습니다. 그렇기 때문에 팀원들과 작업공간을 공유하여 작업물을 바탕으로 소통하고, 결론을 바로 반영하거나 연결되는 UI 에 바로바로 남겨둘 수 있어 좋았습니다.
    저는 UI 작업물 위에 코멘트 기능을 사용해 연결될 api 를 남겨두고, 필요한 값들을 정리해 두었습니다. 그리고 그것을 바탕으로 다시 다른 파트의 팀원들과 이야기하고 수정하고, 다시 반영하여 코멘트로 남겨두는 방식으로 진행하니 훨씬 안정감 있는 협업을 할 수 있었다고 생각합니다.

위에서 핑계라고 이야기했던 질문들은 사실 늘 해야한다고 생각합니다. 그런데 그것이 단순히 핑계여서는 안되겠지요. 이번 경우에는 감사하게도 핑계로 끝나지 않고 사용할 수 있었고, 만족스러웠습니다.

일정이 타이트할 경우 UI 스케치 작업까지 하는 것은 부담스러운 것이 사실입니다. 괜히 오래걸릴 것 같고 시간이 낭비된다고 느껴지기 때문이죠. 그렇지만 이번 작업과정을 통해 오히려 그 작업이 있어 그 이후 진행과정이 훨씬 수월하고 만족스러웠다고 생각합니다. 다음 작업에서도 이 과정을 진행 할 수 있을지 알 수 없지만 꾸준히 해나가려 노력해보겠습니다.

--

--

No responses yet