👀 오늘 소개할 서비스 4
- 변경사항을 손쉽게 입력하고 확인할 수 있는, Changelog
- 페이지 단위의 현재 작업 상태를 쉽게 관리하는, Statusup
- 노션 문서를 피그마에서 확인할 수 있는, FigNotion
- 속성에 대한 주석을 간단하게 달 수 있는, Dimensions
1. 변경사항을 손쉽게 입력하고 확인할 수 있는, Changelog
오늘 처음으로 소개할 피그마 - 협업 관련 기능은 ‘Changelog(체인지 로그)’예요. Changelog는 변경사항에 대한 기록을 의미하는데요. 피그마를 통해 만든 화면은 리뷰 등을 거치며 변경될 수밖에 없는데, 이런 내용을 모두가 쉽고 빠르게 확인하는데 도움을 받을 수 있어요. 프레임 링크를 삽입, 추가 설명 작성, 변경사항이 새로 추가된 것인지, 변경된 것인지 등을 라벨 형태로 적용하는 것도 가능해요.
주요 기능 소개
위젯을 설치한 뒤 처음 실행한 모습이에요. 변경 사항을 입력할 수 있는 공간과 날짜는 기본으로 포함되어 있고, 오른쪽에 ‘Added’라는 라벨이 적용된 것을 볼 수 있어요. 상태 표기는 추가, 삭제, 변경, 진행 중 등 네 가지로 구분되어 있어 상황에 맞는 내용을 선택할 수 있죠.
기본 내용 외, 추가 설명을 입력하거나 변경 사항에 해당하는 프레임 링크를 추가할 수 있어요. 또 다크 모드로 변경하는 것도 가능하며 상태 표기의 경우 컬러값을 직접 변경할 수 있어요. 하나의 화면에도 여러 변경사항이 생길 수 있는데 프레임 옆으로 체인지 로그 위젯을 활용해 하나씩 작성해 두면 가장 최신 내용이 무엇이며, 어떤 과정을 거쳐 현재의 모습으로 적용되었는지 빠르게 파악할 수 있어요.
좋은 점
- 체인지 로그 관리에 필요한 핵심 기능만 제공하기에 별다른 학습 없이, 누구나 쉽게 사용할 수 있어요.
- 프레임 링크를 첨부할 수 있어, 체인지 로그만 한 공간에 모아두고 확인하는 것도 가능해요.
- 날짜 - 변경사항 - 상태 표기 등으로 구성되어 있어 히스토리를 파악하기 좋아요.
아쉬운 점
- 변경사항을 하나의 카드로 관리할 수 없어요. 하나의 프레임에 대한 변경사항을 여럿 등록해야 한다면 위젯을 매번 실행해 내용을 작성해야 해요.
2. 페이지 단위의 현재 작업 상태를 쉽게 관리하는, Statusup
‘Statusup’은 최근 출시된 플러그인 중 하나로, 화면 단위의 작업 상태를 쉽게 등록하고 관리할 수 있도록 도와주는데요. 보통 피그마에서 화면 단위 작업을 할 때, 화면에 해당하는 타이틀을 입력하게 되는데 ‘Statusup’ 플러그인을 활용하면 타이틀 앞에 (완료, 백로그, 진행 중, 테스트 중, 리뷰 필요) 현재 상태가 어떤지 손쉽게 기록할 수 있어요. 화면만 보고는 작업 중인지, 완료된 것인지 등 바로 확인하지 못할 때가 있는데 이런 상황에서 특히 유용하게 활용할 수 있죠.
주요 기능 소개
플러그인을 설치한 뒤 선택하면, 별도의 실행과정 없이 상태 리스트를 확인할 수 있어요. 특정 화면을 선택한 뒤 상황에 맞는 대상을 선택하면 타이틀에 바로 적용되는 것을 알 수 있는데요. 현재 제공되고 있는 상태는 총 16개로 이모지와 함께 텍스트로 구분할 수 있어요. 예를 들어 작업이 완료된 화면의 경우 {🟢 › Done}, 아직 진행 중인 경우 {🟡 › In Process} 와 같이 표현하는 방법이죠.
선택한 상태는 타이틀을 유지하면서, 맨 앞에 적용되는데요. ‘첫 번째 화면’이라는 타이틀에 ‘완료’ 상태를 추가하면 ‘{🟢 › Done} 첫 번째 화면’과 같이 적용되는 것을 확인할 수 있어요. 디자인 작업을 하다 보면 이번 배포에 모두 포함된다 하더라도 리뷰 등에 따라 특정 화면은 수정을 하는 등 작업 상태가 다를 수 있는데요. 이럴 때 플러그인을 활용해 팀원들에게 현재 상태를 명확하게 보여주는데 도움이 될 수 있는 역할을 할 수 있다고 생각해요.
좋은 점
- 16개 상태는 모두 적절한 이모지를 함께 활용하고 있어 적용할 때도, 확인할 때도 쉽게 구분할 수 있어요.
- 가장 간단하게 상태를 표기할 수 있는 방법을 활용하고 있기에 상태 적용, 수정, 삭제가 편리해요.
아쉬운 점
- 디자인 작업을 하면서 겪게 되는 대부분의 상황이 포함되어 있지만, 상태값을 직접 변경하는 건 어려워요.
3. 노션 문서를 피그마에서 확인할 수 있는, FigNotion
세 번째로 소개하고 싶은 툴은 정책 문서는 노션으로, 디자인은 피그마로 일하는 팀에게 도움이 될만한 위젯인데요. 바로 노션 문서를 피그마에 불러올 수 있는 FigNotion입니다.
각각 문서 작성과 디자인에 최적화된 도구이지만 실제로 일을 하다 보면 생기는 문제가 하나 있는데요. 바로 정보가 파편화된다는 점이에요. 디자이너가 디자인 중에 정책서에 포함된 내용을 놓치거나 중간에 정책이 변경되는 경우에 동일한 내용을 담은 두 문서의 내용이 달라지며 정보가 파편화되게 됩니다. 개발자는 피그마와 노션 중 무엇이 맞는지 헷갈리게 되죠.
강남언니 팀에서도 비슷한 문제를 겪었는데요, 프론트 개발자 Evan이 이를 개선하기 위해 노션 문서를 피그마에서 확인할 수 있는 위젯을 개발했다고 해요!
주요 기능 소개
위젯을 실행하고 노션 문서와 연결하면 피그마 화면 옆에 임베드 됩니다. 위젯 상단에 reset 아이콘을 클릭해 문서와 동기화도 가능하고, 마지막으로 싱크된 시간도 알 수 있습니다.
자세한 사용 방법은 👉이곳에서확인할 수 있어요.
위젯 사용을 위해 노션 Intergration을 생성해야하는데, 노션에서 워크스페이스 소유자만 Integrations 탭에 액세스하고 통합을 생성할 수 있다고 하니 참고해주세요!
좋은 점
- 툴을 이동하지 않고도 피그마에서 노션 정책을 빠르게 확인할 수 있다는 점!
아쉬운 점
- 아직 모든 노션 블록 형태를 완벽하게 불러오지는 못해요. 그래도 사용하는데 크게 지장은 없습니다. 앞으로 차차 업데이트 하실 계획이라고 해요!
4. 속성에 대한 주석을 간단하게 달 수 있는, Dimensions
이전 생산성 관련 플러그인 편에서, 핸드오프 툴로 소개했던 Outline을 기억하시나요? Outline은 요소들 사이의 간격을 자동으로 표기해 주는 플러그인이었어요. Outline의 아쉬운 점은 오토 레이아웃이 걸려있는 프레임에서만 동작한다는 점이었는데, 이번에는 오토 레이아웃이 아닌 요소들 사이의 간격을 지정할 수 있는, Dimensions이라는 플러그인을 소개해보려고 해요.
주요 기능 소개
기본적인 기능은 간단합니다. 플러그인을 실행하면 다음과 같은 창이 뜨고, 원하는 내용을 선택하면 자동으로 주석이 표시됩니다. 개체의 높이와 너비, 개체 사이 간격, R값 등을 선택할 수 있고, 컬러값(opacity 포함)과 텍스트 프로퍼티도 클릭 한번으로 표기할 수 있답니다.
실제 개발 과정에서는 모든 개체간 간격을 확인하기 어려운 부분이 있어, 주요 화면에 간격 값을 잘 표기해 주는 것 만으로 개발자와 협업 효율을 높일 수 있는데요. 그럴 때 활용해보세요!
좋은 점
- 사용법이 아주 쉽고, 컬러, 폰트 스타일 등 주석의 옵션이 다양한 점이 좋아요.
아쉬운 점
- 프레임과 프레임 내에 개체 사이의 간격을 표시하는 옵션은 없어요.
팁스터 뉴스레터에서는 프로덕트와 관련된 다양한 주제의 콘텐츠를 발행합니다.
- 서비스의 업데이트 전/후와 실무자의 코멘트가 담긴 '업데이트 소식'
- 다양한 메이커의 실무에 대한 노하우가 담긴 '메이커들의 레시피'
- 서비스의 문제해결 방법을 산업을 중심으로 살펴보는 ‘멤버십’
- 디자인 업무 효율을 높이는 다양한 툴에 대한 이야기
#지식토스트