👀 오늘 소개할 피그마 플러그인 5
- Annotation Sticky Notes
- Lorem Ipsum
- Outline
- Design Lint
- Data Merge
1. Annotation Sticky Notes
오늘 소개할 첫 번째 플러그인은, 원하는 위치에 빠르고 간편하게 메모를 남길 수 있도록 도와줘요. 텍스트 입력을 위한 공간을 따로 만들지 않아도 되고, 코멘트와 같은 연속성이 있는 내용까지 필요하지 않은 경우 특히 유용하게 활용할 수 있어요.
- 원하는 위치에 노트(메모)를 남길 수 있어요
- 배경 컬러와 텍스트 사이즈를 변경할 수 있고요
- 노트의 내용이 어디에 포함되는지 위치를 화살표로 지정할 수 있어요
- 작성자와 작성일도 함께 남길 수 있죠
컬러를 바꿔보고, 내용을 입력한 뒤 사이즈 변경도 해봤어요. 작성자와 날짜는 선택이 가능해 둘 다 빼거나, 모두 넣거나 하나만 넣는 것도 해봤죠. 화살표의 방향은 총 8개를 지원하기에 이미지, 화면, 도형 등 어떤 대상을 위해 남긴 노트인지 조금더 빠르게 알 수 있어요.
아쉬운 점이 없는 건 아니에요. 노트 자체의 사이즈를 조절할 수 없고, 매 번 컬러가 랜덤하게 적용되기에 컬러에 따른 구분(노란색은 수정 의견, 파란색은 완료된 내용 등)을 맞추기가 번거로워요.
추천 대상 : 작업 시, 잊지 않고 확인해야 하는 내용을
눈에 띄는 메모로 관리하고 싶은 분!
2. Lorem Ipsum
두 번째로 소개할 플러그인은 더미 텍스트와 이미지를 쉽게 채울 수 있도록 도와주는 ‘로렘 입숨’이에요.
화면을 설계 할 때, 텍스트를 넣어야 하는 경우가 꽤 많아요. 영역만 잡아두면 길이나 구성에 따라 어떤 모습이 되는지잘 알지만, 채워넣을 내용이 마땅치 않을 때는 귀찮게 느껴지는데요. 이런 상황에서 로렘 입숨 플러그인을 활용하면 더미 텍스트는 물론 이미지도 빠르게 입력할 수 있어요.
- 원하는 영역을 선택하면, 이미지나 텍스트를 채울 수 있어요
- 랜덤으로 채우지 않고, 문장 수나 이미지 카테고리 등의 선택도 가능해요
- 이름, 이메일 주소, 닉네임 등의 더미 데이터도 채울 수 있어요
이미지를 먼저 넣어볼까요? 이미지를 채울 곳을 지정한 뒤 플러그인을 실행하면 동물, 자연, 우주, 식물 등의 키워드를 볼 수 있고, 특정 키워드를 선택하면 이미지 리스트를 확인할 수 있어요. 원하는 이미지를 선택하면 영역에 맞게 이미지가 바로 적용되죠. 키워드는 직접 입력, 검색을 통해 이미지를 찾을 수도 있어요.
텍스트는 두 가지 방법으로 채울 수 있는데 하나는 문장 수를 기준으로 넣는 방법 또 하나는 선택한 영역에 알맞게 내용을 생성해 채우는 방법이에요. 개인적으로는 프레임에 맞게 알아서 채워주는 기능이 좋았는데, 작업중인 화면 속 영역에 텍스트가 꽉 찼을 때의 모습을 빠르게 볼 수 있기 때문이에요.
추천 대상 : 텍스트와 이미지가 많이 쓰이는 서비스의 화면을 작업 중인 분!
3. Outline
세번째 플러그인은, 자동으로 요소들 사이의 간격을 표시해주는 플러그인 입니다.
플러그인 없이도 자체적으로 간격을 확인할 수 있지만, 디자인QA를 하거나 복잡한 화면의 경우 간격을 표시해 전달하는게 효율을 높여주기도 하는데요. 바로 그럴 때 간편하게 사용하기 좋은 플러그인이랍니다.
- Auto layout을 설정한 프레임을 선택하고, Run을 누르면 끝!
- 색상과 선, 라운드값 조정이 가능해요
- 설정을 바꾸면, 다음에 사용할 때도 유지돼요
- 생성된 레이어가 잠겨있지 않아 하나하나 잠금을 풀 필요가 없어요 (잠금 푸는거… 꽤 귀찮거든요!)
평소에 해당 플러그인을 유용하게 쓰고 있는데, 한 가지 아쉬운 점은 오토 레이아웃이 걸려있는 프레임에서만 동작한다는 점이에요. 평소 오토 레이아웃으로 작업하는게 익숙하신 분이라면 문제 없지만, 그렇지 않은 경우에 대신 사용할만한 플러그인이 있다면 저에게도 알려주세요!
추천 대상 : 커뮤니케이션 리소스를 줄이고 싶은 분
4. Design Lint
네번째는, 프레임 내에서 누락된 스타일을 찾아주는 플러그인입니다.
작업을 하다보면 나도 모르게 컴포넌트가 해제되거나 틀어지는 경우가 있는데, Design Lint로 빠르게 스타일을 점검하고 수정할 수 있답니다.
플러그인을 실행하면 어떤 항목에 오류가 있는지 구체적으로 알려주는 모습을 확인할 수 있어요. ‘Select All’을 클릭하면 프레임에서 해당 부분이 포커싱되고, ‘Apply’를 누르면 스타일이 한 번에 자동으로 반영된 것을 확인할 수 있습니다.
플러그인을 사용해보면서 수정이 필요한 부분을 한번에 확인하고 수정할 수 있다는 점이 매우 감동적이었어요. 다만 텍스트의 경우 폰트 굵기와 행간이 동일하지 않으면 동일한 스타일로 간주하지 않고 있었는데, 그래도 이런 경우엔 패널에서 직접 수정하면 되어서 그리 어렵지는 않았답니다.
- 스타일이 깨져있는 부분을 체크하고 한번에 일괄 반영할 수 있어요 (체크 없이 전체 반영도 가능!)
- 오류가 있는 부분을 항목별, 레이어별, 스타일별로 확인 가능해요
- 스타일 변경이 필요없는 부분은 ignore 처리할 수 있어요
- 스타일로 등록되어 있지 않은 내용은 직접 등록할 수도 있어
추천 대상 : 디자인 시스템을 구축하고 있거나, 반영된 스타일을 꼼꼼히 점검하고 싶은 분
5. Data Merge
마지막은 CSV를 붙여넣으면 자동으로 실제 데이터를 채워 넣어주는 플러그인입니다.
InDesign의 Data Merge를 알고 계신다면 반가울 플러그인이죠! 하나하나 데이터를 붙여넣지 않고, 템플릿 하나에 일괄 반영할 수 있도록 해줍니다. 명함이나 인증서같이 동일한 템플릿에 실제 데이터를 여러개 넣어야하는 작업을 할 때 효율을 어마어마하게 올릴 수 있어요.
템플릿을 제작한 뒤, 플러그인을 실행하고 위와 같은 데이터를 복사해 붙어넣기만 하면 (1행 데이터가 레이어명과 동일해야 해요!)
이렇게 순식간에 실제 데이터가 반영된 결과를 확인할 수 있습니다! 어떤가요?
- 템플릿에 특화된 쉬운 사용법
- 템플릿을 컴포넌트로 만들면, 모든 프레임을 한 번에 조정할 수 있어요
추천 대상 : 명함, 인증서 같은 템플릿 작업이 필요한 분
팁스터 뉴스레터에서는 프로덕트와 관련된 다양한 주제의 콘텐츠를 발행합니다.
(1) 서비스의 업데이트 전/후와 실무자의 코멘트가 담긴 '업데이트 소식'
(2) 다양한 메이커의 실무에 대한 노하우가 담긴 '메이커들의 커피챗'
(3) 서비스의 문제해결 방법을 산업을 중심으로 살펴보는 ‘멤버십’
(4) 디자인 업무 효율을 높이는 다양한 툴에 대한 이야기
#지식토스트