정식으로 팔랑크스 클럽(동아리)의 절차에 따라, 시즌을 등록한 크루 외에는 제공, 안내되지 않습니다.
허가되지 않는 배포/재가공/캡처 등이 이루어질 시 관련 법령에 따라
손해배상 및 저작권 침해 소송을 제기할 수 있으니, 각별히 유의 바랍니다.
(본 사항은 법령 자문에 따라 '모두' 가 볼 수 있는 명시적 근거를 설립하는 과정임을 재명기합니다.)
유닛 코드 : PXO-208, 선택형
[기획 Tool] 피그마 : 소프트웨어 기획을 말이 아닌, 결과로 보여주려면?
기획을 하면서 내가 생각한 디자인을 그대로 이미지화하지 못해서 답답했던 경험,
혹은
팀플 하는데 디자인 tool을 다룰 줄 몰라서 초라해졌던 경험,
한 번쯤은 겪어보셨을 것 같은데요.
저 또한 매주 기획안을 발행하며 디자인에 대한 한계에 매번 부딪히곤 하는 것 같습니다.
그만큼 기획에서 디자인적인 요소는 빼놓을 수 없는 존재입니다!
개발자와 디자이너와 소통할 때 자신의 기획을,
기획자의 의도와 방향에 맞게 제대로 설명하고 이해시킬 수 있게 해주는 소중한 도구가 바로 '피그마'입니다!
1) 피그마 템플릿 활용 🧩
✔️ a) 피그마에서 링크와 함께 템플릿을 1개 불러오고, 불러온 페이지명 바꿔보기
위 링크에 들어가면, 무료로 제공되는 다양한 피그마 템플릿을 볼 수 있습니다.
그중에 저는 구글페이 UI와 관련된 템플릿을 한 번 활용해보려고 합니다.
(해당 템플릿 링크: https://www.figma.com/community/file/943527452214098638/google-pay)
'Open in Figma'를 누르면, 템플릿을 피그마로 불러올 수 있습니다.
우선, 제가 쓰려는 용도에 맞게 페이지 명을 변경했습니다.
제목도 기획 참고물이라고 변경하였고,
페이지명 또한 '구글페이 ui'로 수정했습니다.
✔️ b) 템플릿 내용을 본인의 기획에 맞게 수정/조정하기
before & after는 다음과 같습니다!
영어로 써져 있는 부분을 한국어로 바꾸었고,
중간에 train 부분을 GS25, 메가커피, 다이소의 상호명으로 변경했습니다.
거의 복사 붙여 넣기만 할 수 있다면 이 정도는 누구나 할 수 있겠죠!
✔️ c) 피그마 템플릿을 사용해보면며느낀 점 및 본인이 기획자로서 활용 가능한 방안
ppt로 이 정도 퀄리티의 프로토타입을 제작하려면 적어도 2시간은 걸리는데,
피그마를 사용하면 5분 만에 뚝딱 만들 수 있다는 점에서 효율적이라고 느꼈습니다.
기획안을 스케치하는 데 좋은 도구로 사용할 수 있을 것입니다.
2) UX를 고려한 UI 구성과, Prototype에서의 인터랙션 적용 🦔
✔️a) 위 STEP 01에서 활용한 템플릿으로, 3개 이상의 연결된 페이지를 구성
어플 유저가 어떤 사용 프로세스를 경험하게 될지 표현하기 위하여, 다음과 같은 3가지 페이지를 구성했습니다.
유저는 좌측에서 우측 순으로 어플을 경험하게 될 것입니다.
✔️b) 피그마 내의 기능 중 하나인 Wire를 활용하여, 각 페이지의 전체적인 연결과 버튼을 클릭하면 다른 페이지로 이동하는 등의 흐름을 표현(3-5줄)
Wire 기능을 통해서 각 페이지를 연결해 보겠습니다.
✔️c) 위 a), b)를 진행하며 본인이 기획자로서 피그마를 통한 UX 표현을 어떻게 활용할 수 있을지에 대한 활용 방안
기획을 하면서, 서비스의 프로토타입을 제시하는 경우가 많은데요.
여러 기능을 통해 서비스의 흐름을 표현한다면
기획 내용이 더 효과적으로 전달될 것이라고 판단합니다.
3) Plugin을 활용한 기획안 강화 🔥
✔️a) 피그마 플러그인 메뉴에 들어가, 본인이 필요한 기능을 검색하고, 그와 관련한 플러그인을 설치하는 과정 명시
좌측 상단 피그마 아이콘을 클릭해서, Plugins -) Manage plugins... 를 클릭하면,
다양한 플러그인을 검색/조회 및 다운로드하실 수 있습니다.
✔️b) 위 a)를 실제 활용한 것에 대한 캡처(2개 이상)와그 과정 서술
플러그인 중에서 휘어진 글자를 쓰게 해주는 것을 선택했습니다!
사용하려면, Run을 누르고 원하는 글자를 쓰면 됩니다.
글자의 곡률을 설정하고, Apply를 누르면 끝입니다.
너무 쉽죠??
이렇게 적용했습니다.
✔️c) 플러그인을 활용한 개선 내용을 분석하며 본인이 기획자로서 피그마 플러그인을 어떻게 활용할 수 있을지에 대한 활용 방안과 본인이 느낀 점
그냥 쌩 ppt를 사용하는 것보다, 피그마 플러그인을 사용한다면 다양한 보조도구를 활용할 수 있기에
디자인적으로 많은 도움을 받을 수 있습니다.
기획자로서, 피그마 플러그인을 활용하면 보다 완성도 높은 이미지를 제작할 수 있기 때문에
기획안의 퀄리티 역시 강화할 수 있을 것입니다.
'🎀서비스팀 > 🦄[일반] 파트🦄' 카테고리의 다른 글
| 이제 "예약"하면 뭐다? 해피 프리오더! (5) | 2025.01.25 |
|---|---|
| 네가 ‘자기야 영화 같이 보자’ 했잖아? 그럼 나 왓챠 바로 깔았어 (7) | 2025.01.25 |
| 🥳싱싱한 무대로, 바로 입장하시겠습니까?🥳 (0) | 2025.01.25 |
| 구글링🌐, 충분히 널 알고 있을거라 생각했어🤔 (3) | 2025.01.25 |
| 나만의 스타일대로! 나만의 룩북!👗 (1) | 2025.01.25 |
