실제 서비스 화면 피그마에서 편집하는 ‘figr.design’

업무 중 가장 많이 쓰는 툴이 무엇인지 물어보면 저는 노션과 피그마라고 말합니다. 노션은 텍스트 기반으로 업무 내용을 정리하는데 활용하고, 피그마는 작성한 텍스트를 시각화할 때 활용하고 있습니다.

특히 피그마는 여러 장점이 있지만, 무엇보다 다양한 플러그인을 지원하여 이를 통해 업무 생산성을 극대화할 수 있다는 점에서 매력적입니다. 오늘은 플러그인은 아니지만 피그마와 밀접하게 연관된 ‘figr.design’에 대해 소개하고자 합니다. ‘figr.design’은 실제 사용되는 서비스의 화면을 유형에 따라 탐색할 수 있으며, 이를 복사해 피그마에서 그대로 편집할 수 있도록 도와주는 곳입니다.

웹과 모바일에서 다양한 필터를 활용한 화면 탐색

전에 개인 블로그에서 소개한 피그마 플러그인 중 웹사이트를 URL과 크롬 확장 프로그램을 통해 피그마로 불러와, 구성 내용을 자세히 살펴볼 수 있도록 도와주는 툴이 가장 반응이 좋았는데요. 오늘 소개하는 ‘figr.design’도 비슷한 역할을 합니다. 다른 점이 있다면 기능 단위의 화면 사례를 확인할 수 있다는 점입니다.

‘figr.design’에 들어가면, 가장 먼저 볼 수 있는 화면입니다. 처음에는 피그마 속 특정 서비스의 화면(에어비앤비, 나이키 등)을 볼 수 있어 전용 플러그인을 제공한다고 생각했는데요. 피그마에 화면을 복사, 붙여넣기 해 작업할 수 있다는 점을 강조하기 위한 구성이라는 걸 탐색 과정에서 알게 됐습니다. 에어비앤비 등 실제 서비스의 기능 단위 화면을 피그마에서 직접 편집할 수 있다면, 스크린샷을 참고하며 작업하던 과정을 줄일 수 있지 않을까?라는 생각으로 하나씩 살펴봤습니다.

우선 연관이 없는 화면을 피그마에 가져갈 순 없으니 필요한 화면을 찾을 수 있는 기능 두 가지를 적극적으로 활용했습니다. 그중 하나는 ‘오토파일럿'이라는 기능으로 모바일 앱, 웹사이트, 디자인/SaaS 세 가지 중 원하는 유형을 선택해 시작할 수 있습니다.

오토파일럿의 두 번째 단계는 서비스 종류를 선택하는 것입니다. 생산성, 커뮤니케이션, 메일링, 교육, 여행, 게임 등 다양한 종류의 카테고리를 제공하며, 여러 개를 한 번에 선택할 수도 있습니다. 카테고리를 직접 입력하는 공간도 있는데, 이는 사례를 제안하는 과정에 참고 데이터로 활용됩니다. 오토파일럿의 역할이 탐색하는 사용자가 어떤 서비스를 만드는지를 기준으로 적합한 기능과 화면 사례를 찾아주는 데 있기 때문입니다.

오토파일럿의 마지막 단계는 만들고 있거나, 만들고 싶은 서비스에 대한 내용을 입력하는 단계입니다. 마지막 단계는 필수는 아니고 좀 더 구체적인 화면이나 기능을 확인하는 참고용으로 쓰입니다. 저는 먼저 소개했던 서비스 ‘Uizard’와 같이 피그마에서 바로 사용할 수 있는 화면을 임의로 추천, 생성해 주는 것을 기대했는데, 그보다는 이미 존재하는 화면과 기능을 적극적으로 탐색할 때 쓰이고 있었습니다.

위 이미지는 오토파일럿 기능을 통해 확인한 사례입니다. 저는 미디엄 스타일의 글쓰기 플랫폼을 만들고 있다는 가정으로 탐색을 진행했습니다. 결과 화면에서는 실제 디자인된 기능과 화면 사례를 확인할 수 있으며, 리스트는 기본적으로 대표 이미지와 서비스명, 서비스에 대한 간략한 소개로 구성되어 있습니다.

리스트 위쪽으로는 어떤 사례에 해당하는지 랜딩, 가입 및 로그인 등에 해당하는 타이틀을 볼 수 있도록 구성한 모습입니다. 왼쪽으로는 필터가 제공되며, 원치 않는 사례는 X 버튼을 클릭해 제외할 수 있습니다.

또한 오토파일럿과는 별개로 일반 검색 기능도 지원합니다. 앱/웹 등의 플랫폼 유형을 기준으로, UI 패턴이나 테마를 더해 원하는 서비스와 기능 단위 사례 탐색이 가능합니다. 화면을 구성하다 보면 유사한 성격의 서비스를 벤치마킹을 하는 경우도 있지만, 성격은 조금 달라도 같은 기능을 기준으로 참고하는 경우도 있습니다. 이때 활용도가 높은 기능이라고 생각합니다. 오토파일럿과 함께 사용하면 더 빠르게 원하는 사례를 찾고, 이를 피그마로 옮겨 작업할 수 있습니다.

일반 검색을 통한 결과는 오토파일럿과 조금 다르게 구성되는데, 테마나 UI 패턴 등의 검색 기준에 따라 왼쪽에 전체 필터를 확인할 수 있습니다. 필터가 다양하게 제공되어 필터 자체를 검색할 수 있는 기능도 활용할 수 있습니다. 오토파일럿이 가장 적합한 결과를 찾는데 초점을 맞춘다면, 일반 검색은 최대한 많은 사례를 기준에 따라 확인할 수 있도록 도와줍니다.

이제 마음에 드는 사례의 상세화면으로 진입하면, 화면의 전체 모습을 확인할 수 있고 테마, UI 패턴, 서비스 이름 등의 정보도 살펴볼 수 있습니다. 눈에 띄는 건 오른쪽 상단의 피그마 아이콘이 포함된 복사하기 버튼으로, 클릭 후 피그마로 이동해 붙여 넣기를 하면 실제 편집 등의 작업을 진행할 수 있습니다.

가입 후 로그인하면 원하는 사례를 컬렉션에 담는 것도 가능합니다. 컬렉션을 생성하지 않더라도 상세 화면을 통해 바로 생성해 담을 수 있으며, 이 기능은 우리가 매번 상황에 따른 사례를 찾기 위해 투자하는 시간을 아껴줍니다.

다음으로 피그마에 디자인 화면을 복사해 붙여 넣은 모습입니다. 사실 이 기능이 figr.design의 핵심이라고 할 수 있는데요. 컴포넌트 등을 그대로 유지하고 있어 작은 단위로 빼 만들고자 하는 서비스 및 화면에 활용할 수도 있고, 어떤 식으로 구성이 되어 있는지 하나씩 뜯어보는 방법으로도 활용이 가능합니다.

다만 무료와 유료 버전으로 나뉘어 있어서 결제를 해야 피그마로 복사할 수 있는 화면도 있다는 점을 참고하면 좋겠습니다. (웹은 무료로 복사할 수 있는 사례도 꽤 많습니다.)

한 번은 꼭 써봐야 하는 이유

현재 figr.design에 등록된 서비스는 200여 개 이상, 화면은 3,000여 개 이상, UI 패턴은 150여 개 이상입니다. 유료가 포함된 수치지만 실제 디자인된 화면과 기능을 피그마로 복사해 바로 활용할 수 있다는 점에서, 많은 과정을 생략해 효율적인 업무가 가능하다고 생각합니다.

단순히 스크린샷을 피그마에 붙여 넣는 것과 달리, 필요한 단위를 빼서 직접 편집할 수 있는 환경으로 만들어주는 것은 무엇보다 강력한 기능입니다. 탐색과 편집 모두를 한곳에서 진행해야 하는 상황이라면 더없이 좋은 선택지가 될 거라 생각합니다.

물론 아쉬운 점도 있습니다. 다양한 실제 화면을 바탕으로 피그마 작업을 진행할 수 있는 환경은 제공되지만, 피그마 플러그인을 지원하지 않아 피그마로 복사하기를 반복해야 하기 때문입니다. 운영진에게 플러그인 도입 계획이 있는지 물어봤지만 아직 답변은 받지 못했습니다. 추후 피그마 플러그인을 통해 작업하고자 하는 화면을 탐색하고, 피그마 페이지에 바로 삽입할 수 있으면 좋겠습니다. 이 기능을 유료 버전에 포함해도 충분히 사용할 만한 가치가 있다고 생각합니다.

<참고>
https://figr.design/

요즘IT의 모든 콘텐츠는 저작권법의 보호를 받는 바, 무단 전재와 복사, 배포 등을 금합니다.