본문 바로가기

웹/피그마, 피그잼12

1인 개발을 위한 피그잼(기획), 피그마(디자인) 활용법 1인 개발에 쓸만한 피그마 템플릿을 알아보다가 기획서에 활용할 수 있는 피그잼 템플릿도 알아보았습니다. 그런데 이러한 템플릿과 도구를 어떻게 사용하면 좋을지 정리한 내용을 공유해봅니다. 이 글에서는 다음과 같이 1인 개발 작업과정에 도움이 될 수 있을만한 피그잼, 피그마 활용법들을 정리해보겠습니다. HTML 삽입 미리보기할 수 없는 소스 절차, 파일 간소화 피그마를 팀이 아닌 개인이 사용하는 경우에 무료 계정을 많이 사용하게 됩니다. 무료 계정은 1개의 프로젝트만 생성할 수 있고, 1개의 프로젝트에는 피그잼, 피그마 파일이 3개씩으로 갯수가 제한됩니다. (유료 계정에 관심이 있거나, 무료 유료 계정의 차이가 궁금하다면 피그마 요금제와 사용법에 대해 쓴 이전글을 참고해주세요.) 프로젝트는 단순히 폴더 정리.. 2022. 5. 25.
목록 썸네일 이미지 기획을 위한 피그잼 무료 템플릿 15개 모음 피그마 템플릿을 알아보다가, 기획에 활용할만한 피그잼 템플릿에 대해서도 알아보게 되어 괜찮다고 생각되는 템플릿들을 공유해드리도록 하겠습니다. 목표 설정과 관련된 피그잼 템플릿 1. 목적, 목표 Goal tracker 2. 경쟁사 분석 Competitive Analysis, 경쟁사 매트릭스 Matrix Competitivo 3. SWOT 분석 SWOT ANALYSIS 리서치&모델링과 관련된 피그잼 템플릿 1. 사용자 인터뷰 User interview, 5번의 왜라는 질문 The 5 whys 2. 어피니티 다이어그램(데이터 그룹핑, 체계화) Affinity diagram 3. 페르소나, 공감 지도 User Persona & Empathy Map 4. 사용자 여정 지도 User Journey Map 5. 브레.. 2022. 5. 24.
피그마 템플릿 무료 사이트 모음 (+ 템플릿 종류) 피그마 템플릿은 그 종류가 매우 많고, 양도 많습니다. 원하는 템플릿을 찾으실 수 있도록 피그마 무료 템플릿 사이트와 함께, 템플릿의 종류를 분류해보았습니다. 템플릿은 좋은 참고 자료가 되기도 하고, 응용해서 작업에 사용하면 처음부터 만드는 것보다 빠르고 효율적입니다. 그런데 오히려 정보가 너무 많아서 원하는 템플릿을 찾기가 어렵지 않은가요? 템플릿의 종류가 어떤게 있고, 어떤 템플릿을 이용할지 파악할 수 있다면 피그마 커뮤니티나 템플릿 사이트를 탐색하는 시간을 줄일 수 있습니다. 따라서 이 글에서는 무료 템플릿 사이트 모음과 함께, 글 아래에서 직접 분류한 템플릿의 종류와 템플릿 빨리 찾는 방법을 소개합니다. HTML 삽입 미리보기할 수 없는 소스 먼저, 피그마 커뮤니티 이외에 어떤 템플릿 사이트들이 .. 2022. 5. 22.
목록 썸네일 이미지 피그마 무료 폰트 템플릿 추천 피그마에서 바로 열어볼 수 있는 무료 폰트 구성을 추천해보겠습니다. 일종의 폰트 조합 템플릿이나 폰트 사용 예시라고 할 수 있겠습니다. 웹 폰트와 더불어, 컴퓨터에 설치할 수 있는 로컬 폰트의 종류는 매우 다양합니다. 그래서 굳이 피그마에서 사용하면 좋을 폰트라는게 넌센스죠. 하지만 이 글에서 소개하는 폰트는 모두 피그마 커뮤니티에서 제공하고 있거나, 피그마 브라우저에서 바로 열립니다. 어떤 글을 보니 피그마를 사용하시는 분들 중 상당한 숫자가 경력자 분들이더군요. 하지만 사수가 없는 피그마 사용자 또는 디자인 초보도 이 글을 볼 수 있기 때문에, 잠시 폰트의 종류에 대해 설명하고 넘어가겠습니다. HTML 삽입 미리보기할 수 없는 소스 0. 폰트의 타입 폰트의 타입은 크게 보면 산세리프와 세리프로 나뉘고.. 2022. 5. 12.
목록 썸네일 이미지 피그마 폰트 플러그인 4가지 추천 피그마 폰트 플러그인 4가지를 모아봤습니다. 어썸 폰트 아이콘을 불러오거나, 특정 브랜드의 폰트와 로고 등을 가져올 수 있습니다. 또한 다폰트처럼 폰트를 미리 확인할 수 있고, 한 번에 폰트를 수정할 수 있습니다. 폰트는 디자인 가이드에 따라 몇 개의 폰트로 통일되는 것이 좋습니다. 하지만 디자인 가이드도 디자인을 하는 중간중간에 바뀔 수 있죠. 따라서 다양한 폰트를 실험해볼 필요가 있는데, 이럴 때 편리하게 사용할 수 있는 플러그인은 무엇이 있는지 알아보았습니다. 또한 공동 작업자와 폰트가 충돌하거나 통일되어야 할 폰트가 여러 개로 섞이는 등의 이슈가 있을 때도 쉽게 찾아내어 수정할 수 있는 플러그인이 있어 소개합니다. HTML 삽입 미리보기할 수 없는 소스 먼저 간단하게 플러그인 설치와 사용방법을 소.. 2022. 5. 12.
목록 썸네일 이미지 피그마 폰트 누락 해결 방법 7가지 피그마 폰트 누락 해결법 7가지를 정리해보았습니다. 기본적으로 시도할 수 있는 해결법과 나아가 공동 작업자와의 폰트 호환성 문제 해결 방법 그리고 폰트 버전 등의 이유를 수정해서 폰트 누락을 해결하는 방법을 정리해보겠습니다. HTML 삽입 미리보기할 수 없는 소스 피그마에서 폰트 누락을 해결하는 기본적인 방법은 아래 2가지입니다. 검색해보시면 대부분 아래의 방법을 안내하고 있습니다. 1. 컴퓨터에 있는 로컬 폰트를 적용하려면 데스크톱 앱을 설치하면 됩니다. 2. 인터넷 브라우저에서 피그마를 사용할 때 구글 폰트를 적용하려면, 폰트 인스톨러를 설치하면 됩니다. 둘 다 피그마 다운로드 페이지에서 다운로드 해서 설치하실 수 있습니다. ※ 바로 적용되지 않으므로, 데스크톱이나 브라우저를 종료한 뒤에 다시 들어가.. 2022. 5. 10.
목록 썸네일 이미지 피그마 한글 입력 오류 해결법 4가지 정리 피그마 한글 키보드 오류의 해결법을 정리했습니다. 자음 모음 분리현상, 줄바꿈을 했을 때 마지막 글자가 중복 출력되는 현상이 있다면 확인해보세요. 주로 맥북을 이용하는 사용자에게서 나타나는 현상이기 때문에, 오늘은 맥북을 사용하시는 분들을 대상으로 이러한 한글 오류를 수정하는 방법을 소개합니다. HTML 삽입 미리보기할 수 없는 소스 자음 모음 분리 현상 해결법 피그마를 사용하다 보면 한글의 자음과 모음이 분리 되는 현상이 나타납니다. ▲ 피그마 텍스트 박스에서 한글을 타이핑하면 자음과 모음이 분리됩니다. 이러한 오류는 아직까지 수정 되지 않고 있으며, 한글은 알파벳과 달리 2바이트로 이루어진 문자라서 생기는 오류로 파악됩니다. 1. 텍스트 복붙하기 가장 간단한 해결 법은 메모장 등에 텍스트를 쓴 다음,.. 2022. 4. 19.
목록 썸네일 이미지 피그마 그리드 레이아웃 설정법, 켜고 끄는 단축키 정리! 피그마 그리드 레이아웃은 반응형 디자인을 할 때 특히 유용한 도구입니다. 그리드 시스템을 설정하는 방법과 필요에 따라 레이아웃 그리드를 켜고 끄는 단축키까지 간단하게 알아보겠습니다. HTML 삽입 미리보기할 수 없는 소스 지난 시간에는 피그마의 웹버전/ 다운로드버전 비교, 기초 튜토리얼과 폰트 사용법, 단축키 등에 대해 알아보았습니다. 오늘은 디자인을 할 때 필수적인 그리드에 대해 알아보겠습니다. Figma 그리드 시스템이란? 우선, Figma 그리드가 무엇인지 알아보겠습니다. 기본적으로 Figma 그리드는 프레임 안에 있는 객체를 레이아웃에 따라 손쉽게 배치하는 데 도움이 됩니다. 그리드 시스템을 이용하면 디자인을 할 때 더 쉽게 시각적인 구조를 만들 수 있습니다. 레이아웃 그리드는 픽셀이나 해상도에 .. 2022. 2. 3.