1인 개발에 쓸만한 피그마 템플릿을 알아보다가 기획서에 활용할 수 있는 피그잼 템플릿도 알아보았습니다. 그런데 이러한 템플릿과 도구를 어떻게 사용하면 좋을지 정리한 내용을 공유해봅니다.
이 글에서는 다음과 같이 1인 개발 작업과정에 도움이 될 수 있을만한 피그잼, 피그마 활용법들을 정리해보겠습니다.
절차, 파일 간소화
피그마를 팀이 아닌 개인이 사용하는 경우에 무료 계정을 많이 사용하게 됩니다.
무료 계정은 1개의 프로젝트만 생성할 수 있고, 1개의 프로젝트에는 피그잼, 피그마 파일이 3개씩으로 갯수가 제한됩니다.
(유료 계정에 관심이 있거나, 무료 유료 계정의 차이가 궁금하다면 피그마 요금제와 사용법에 대해 쓴 이전글을 참고해주세요.)
프로젝트는 단순히 폴더 정리 개념이지, 파일은 무제한 작업이 가능합니다.
또한 작업한 파일을 로컬 파일로 저장할 수도 있습니다.
그럼에도 불구하고, 1인 개발이니 커뮤니케이션에 필요한 문서는 생략하는 등 가능하면 절차가 간단했으면 합니다.
문서를 위한 문서는 효과도 미미하며, 시간만 잡아먹습니다.
디자인 파일도 많으면 통합해서 관리하는 것보다 시간이 걸립니다.
1인 개발자의 강점은 빠른 대응력과 작업 속도입니다.
따라서 무엇을, 왜, 어떻게 만들것인지를 한눈에 알아볼 수 있는 실용성을 위해 문서 파일을 간소화할 필요가 있습니다.
꼭 필요한 기획 문서
개인적으로 기획서를 작성할 때 꼭 필요하다고 생각하는 문서는 다음과 같습니다.
- 목적, 목표
- 시장조사
- 경쟁사 분석
- 사용자 리서치
- 메뉴 구조도
- 플로우 차트
- IA(정보구조도)
- WBS(일정관리)
이후에 와이어 프레임부터는 따로 할 필요 없이, 바로 디자인 파일에서 진행하면 되겠습니다.
해당하는 피그잼, 피그마 템플릿은 아래에 소개해드리니 계속 읽어주세요.
연구해보면 좋을 기획 문서
만약 여유가 된다면, UIUX 디자인 리서치 과정 글들에서 소개해드렸던 여러 방법들을 시도해보실 수 있습니다.
저는 이 과정들을 크게 3단계로 나누어보았습니다. 이는 피그잼 파일에서 페이지 단위로 나누어 관리가 가능합니다.
1. 목표설정
- 목적, 목표
- 시장조사
- 경쟁사 분석, 경쟁사 매트릭스
- SWOT 분석
2. 리서치&모델링
- 사용자 인터뷰
- 어피니티 다이어그램(데이터 그룹핑, 체계화)
- 페르소나
- 공감 지도
- 사용자 여정 지도
- 브레인 스토밍
- 사용자 시나리오
- 스토리 보드(서비스 한눈에 파악)
3. 정보설계
- 메뉴 구조도
- 플로우 차트
- IA(정보구조도)
각 문서들의 템플릿은 기획을 위한 무료 피그잼 템플릿을 정리한 이전 글에서 확인하실 수 있습니다. 전부 활용할 필요는 없지만, 놓칠 수 있는 부분을 생각해보는 차원에서 한번 쯤 사용해보는 것도 좋겠습니다.
이 밖에 QA문서나 회고문서 등을 추가해서 작업하시면 좋을 것 같습니다.
피그잼의 용도는?
위에서 파일 간소화를 말씀드렸었습니다. 그럼 이 과정들을 전부 피그잼에서 통합해서 하는게 좋은가? 라고 묻는다면 그렇지는 않습니다.
피그잼은 피그마에서 사용할 수 있는 화이트보드 같은 도구라고 할 수 있고, 피그마 디자인 파일로 복사가 가능합니다. 게다가 페이지로 나누면 되기 때문에 생각보다 복잡하지 않습니다.
따라서 이론상으로는 1개의 피그마 파일에 기획부터 완성된 디자인까지 관리가 가능합니다. 이렇게 해보려고 템플릿들을 다 합쳐봤어요.
하지만 텍스트를 입력하려면 텍스트 박스를 일일이 더블클릭해야 하므로, 문서 타이핑 작업보다는 도식화 작업에 적합합니다.
원래 사용하시던 도식화 툴이 있다면 굳이 피그잼을 쓰실 필요는 없을 것 같고, 피그마에서 디자인 작업 도중 메뉴 구조나 플로우 차트 등의 도식을 확인 또는 수정을 바로바로 하시려면 유용합니다.
돌이켜보니 이전에 XD에서 작업할 때도 구글 시트 메인 기획서에 도식을 붙여넣고, XD에서는 도식을 보며 디자인 작업을 했었네요.
1인 개발을 위한 피그잼 활용법
제가 생각하는 1인 개발을 위한 기획 문서 구성을 정리해보면 다음과 같습니다.
- 메인 기획서(타이핑하기 좋은 구글 시트 등)를 작성합니다.
- 피그잼에서 도식을 그린 다음, 메인 기획서에 링크와 캡쳐를 붙여넣습니다.
- 동시에 피그마 파일에도 도식을 붙여넣어, 작업하면서 핵심을 파악합니다.
구글 시트에 바로 보이게 삽입되고, 수정하면 바로 연동이 되는 도식화 사이트가 있으면 좋겠네요. 아시면 댓글 부탁드립니다.
피그마 디자인 파일 관리
이제는 디자인으로 넘어와서, 피그마 파일은 어떻게 관리하면 좋을지 생각해보았습니다.
피그잼과 마찬가지로 피그마도 페이지 단위로 관리가 가능합니다.
페이지1. 쓸 수 있는 에셋 모음
템플릿이나 아이콘, 일러스트 등 작업에 쓸 수 있는 에셋을 모아놓고, 작업 페이지에 복사할 수 있습니다.
페이지2. 무드보드, 레퍼런스
디자인의 전체적인 분위기, 색상, 경쟁사나 레퍼런스가 될만한 자료들을 모아놓고, 마찬가지로 작업 페이지에 복사하여 참고할 수 있습니다.
페이지3. 디자인 작업
와이어프레임부터 디자인 완성까지 순차적으로 디벨롭해가며 작업하는 공간입니다.
피그잼과 피그마 파일은 어느정도 완성하면 따로 로컬에 저장해두는 것도 좋겠습니다.
피그마에서 바로 사용이 가능한 피그마 템플릿 무료 사이트 모음 글을 확인해보세요.
이 밖에 다양한 피그마 관련글을 연재하고 있으니 피그마 태그 글 목록에서 다른 글들도 확인해보세요.
참고하면 좋은 것들
본문에서 개념적인 것들에 대해 설명을 드렸지만, 무엇인가 실질적으로 활용하기 위해서는 필요한 물건들이 분명 있습니다.
그러한 물건들을 찾아서 소개하니 여러분의 시간은 더 소중한 것에 쓰세요!
1. ‘프로덕트 디자인 입문 with 피그마’라는 책입니다.
피그마가 나온지 얼마 안되었을 때는 변변한 책도 없었고, 몇 개의 책을 구매해서 보았지만 버전이 바뀌면서 책의 내용과 실제 피그마의 사용법이 달라지는 경우가 왕왕 있었습니다.
이 책은 2023년에 나온 책이라서 최신 버전의 피그마로 공부할 수 있습니다!
게다가 코딩을 비롯한 IT 교육 서적을 잘만드는 이지스퍼블리싱의 DO IT 시리즈라서 더 믿음이 갑니다.
UI 이론 > 피그마 사용 > 서비스 기획과 구현 > 협업 순서로 실무를 기준으로 한 예제와 함께 정리가 잘 되어있는 책입니다.
디자인 용어들도 짬짬히 알려줍니다.
‘톤앤 매너’라든지 ‘캐러셀’이라든지 협업하며 통용되는 용어들은 팀원과 소통할 때도 요긴하게 쓰입니다.
또한 UIUX를 공부하다보면 어디서부터, 얼마나, 어떻게 공부해야할지 막막할 수 있습니다.
구글 머테리얼 디자인, 애플 휴먼 인터페이스 디자인이 훌륭한 건 알겠는데, 가이드를 정독해야 할지 같은 고민을 하게 되죠.
이러한 고민들을 실무에서 다정한 선배가 알려주듯이 알려주어서 좋았습니다.
2. ‘된다! 하루 5분 노션 활용법’책도 참고해보세요.
노션 많이들 쓰실텐데, 노션은 제대로 활용했을때 효과가 천지차이입니다.
처음에는 어려울 수 있지만, 표-칸반보드와 관계형 데이터베이스만 알아도 거의 모든 것들을 깔끔하고 직관적으로 정리할 수 있습니다!
저는 이 책을 통해 노션 사용법을 배우면서 개인적인 생각이나 생활, 업무 체계 등에 활용하면서 정말 정리가 잘되서 도움이 많이 되었습니다.
3. ‘로지텍 리프트 버티컬’ 마우스입니다.
웹을 디자인 하다보면 타블렛보다는 마우스를 많이 쓰죠. 하루에도 수많은 클릭과 드래그로 고통받는 손목에 단비같은 물건입니다.
로지텍은 키보드 마우스 잘만드는 회사라 품질은 말할 것이 없죠.
특히 버티컬 마우스는 쓰다보면 키보드로 오른손을 옮길 때
오른손으로 마우스를 치게 되어서 자주 쓰러지는데, 이 제품은 쓰러지지 않고 안정적이며 편안합니다.
이 블로그는 쿠팡 파트너스 활동을 통한 작은 수익을 통해 운영되며, 구매자에게 추가 비용은 발생하지 않습니다.
이상으로 1인 개발을 위한 피그잼, 피그마 활용 방법을 공유해보았습니다. 의견이나 피드백 환영합니다!
'웹 > 피그마, 피그잼' 카테고리의 다른 글
기획을 위한 피그잼 무료 템플릿 15개 모음 (0) | 2022.05.24 |
---|---|
피그마 템플릿 무료 사이트 모음 (+ 템플릿 종류) (0) | 2022.05.22 |
피그마 무료 폰트 템플릿 추천 (0) | 2022.05.12 |
피그마 폰트 플러그인 4가지 추천 (0) | 2022.05.12 |
피그마 폰트 누락 해결 방법 7가지 (0) | 2022.05.10 |
피그마 한글 입력 오류 해결법 4가지 정리 (1) | 2022.04.19 |
피그마 그리드 레이아웃 설정법, 켜고 끄는 단축키 정리! (4) | 2022.02.03 |
피그마 폰트(구글, 로컬, 한글) 사용법& 폰트 누락 수정 (2) | 2021.12.12 |
댓글