피그마 플러그인 #Faker Text
피그마, 디자인 그리고 개발 #Faker Text
피그마로 직접 그린 이미지여러분은 디자인할때 더미 텍스트를 어떻게 처리하는가?
왼쪽 처럼 하나의 카드를 만들고 복붙만 하는지?
오른쪽 처럼 더미 텍스트를 입히는지?
필자의 경우 디자인과 개발을 같이 하면 왼쪽처럼 만들고 디자인만 하는 경우는 오른쪽처럼 만든다.
( 공동 작업을 하는경우는 디테일을 좀더 챙겨야 커뮤니케이션 비용이 줄어든다. )
( 출처 : https://www.figma.com/community/file/833460671465187406/�-Ecommerce-Shopping-Template)처음 이미지처럼 카드가 3개정도면 하나씩 타이핑해도 된다.
그런데, 두번째 이미지와 같이 많아진다면 어떻게 할까?
피그마에는 좋은 플러그인들이 많으니 필요한것을 설치해서 간단하게 처리할수도 있다.
피그마로 직접 그린 이미지이런 종류의 플러그인들이 많지만 필자는 조금 다르게 접근하여 플러그인을 만들었다.
실제 개발자들이 테스트서버에 적용하는 방식에 해당하는 오픈소스를 이용했다.
개발자들은 보통 테스트 서버에서 Faker.js와 같은 라이브러리를 이용해 API에 더미 텍스트를 뿌려준다.
( 출처 : https://www.figma.com/community/file/833460671465187406/�-Ecommerce-Shopping-Template)개발자는 하나의 카드만 컴포넌트로 만들고 반복문과 API 통신을 통해 진짜처럼 보이는 카드들이 보이게 코딩한다.
(출처 : https://dbdiagram.io/home)개발자는 위와 같이 테이블 형태로 사용자, 제품, 주문정보등에 대한 템플릿 같은거를 만들고,
거기에 자동으로 더미 텍스트를 생성해주는 라이브러리를 사용하여 API를 통해 브라우저에 전달한다.
보통은 테스트서버를 통해 개발에 적용하고 문제가 발생하지 않으면 실제 사용자에게 서비스하는 실서버에 반영한다.
오늘의 글쓰기 끄읕~ ( 이 글을 작성하면서 느낀것은 개발관련해서 쉽게 풀어쓰는게 굉장히 힘들다는걸 깨달았다. 개발관련 글을 이해하기 쉽게 잘쓰시는분들 존경합니다~ )
피그마로 직접 그린 이미지현재 이 플러그인은 11개 카테고리에 121종류의 진짜처럼 보이는 가짜텍스트를 만들수 있다.
혹시라도 필요한 분들을 아래 링크를 통해 설치하여 사용하면 된다.
https://www.figma.com/community/plugin/885142896349849231/util%2B
