정식으로 팔랑크스 클럽(동아리)의 절차에 따라, 시즌을 등록한 크루 외에는 제공, 안내되지 않습니다.
허가되지 않는 배포/재가공/캡처 등이 이루어질 시 관련 법령에 따라
손해배상 및 저작권 침해 소송을 제기할 수 있으니, 각별히 유의 바랍니다.
(본 사항은 법령 자문에 따라 '모두' 가 볼 수 있는 명시적 근거를 설립하는 과정임을 재명기합니다.)
유닛 코드 : PXO-208, 선택형
[기획Tool] 피그마 : 소프트웨어 기획을 말이 아닌, 결과로 보여주려면 ?
여러분들은 '피그마'라는 툴을 활용해 보신 적이 있나요?
저는 최근에 한 대회의 발표를 준비하면서 피그마로 피피티를 만들어보았는데요!
생각보다 활용할 수 있는 요소도 많고, 제가 원하는 바를 표현할 수 있다는 점이 매력적이더라고요.
그래서 피그마를 어떻게 활용하는지 더 알아보자...!라는 생각에 해당 선택형 유닛을 진행하게 되었답니다 😚
STEP 01. 피그마 템플릿 활용 🧩
🎨a) 피그마에서 링크와 함께 템플릿을 1개 불러오고, 불러온 페이지명 바꿔보기
🔗사용한 템플릿: Coffee Shop Mobile App Design
저는 이 템플릿을 사용하기로 하였습니다!
다양한 카페 앱들을 사용해 본 경험이 있어서, 뭔가 제가 디자인을 해보고 싶다는 생각이 들더라고요.
'Open in Figma' 버튼을 눌러서 파일을 생성해 주었답니다 😉
파일을 생성해 준 뒤에는, 파일명과 페이지명을 변경해 주었답니다!
더블클릭을 하고, 이름을 입력해 주면 바로 수정이 가능해요.
🎨b) 템플릿 내용을 본인의 기획에 맞게 수정/조정하기
특별한 기획은 아니지만, 그냥 편리하게 커피를 주문할 수 있는 앱을 디자인해보고자 하였습니다!
그래서 영어로 된 문구들도 영어로 바꿔주었고, 광고 부분을, 내가 저장해 둔 메뉴를 바로 주문할 수 있는 부분으로 바꾸어주었어요.
템플릿을 활용하니, 정말 빠른 시간 내에 멋진 결과물이 나오더라고요!
디자인... 을 사실상 한 건 아니라고 할 수 있지만, 그래도 뿌듯하더라고요 😎
🎨c) 피그마 템플릿을 사용해보며 느낀 점 및 본인이 기획자로서 활용 가능한 방안
평소에 피피티를 만들 때 템플릿을 정말 적극적으로 활용하는 편인데, 피그마 템플릿 또한 매우 퀄리티 높고 기획을 보다 효율적이게 할 수 있도록 도와줄 것 같다는 생각이 들었습니다 ☺️
하나하나 직접 만들면 더욱 창의적일 수는 있겠지만, 하나하나 다 만들기에는 시간이 많이 드니깐요!
앞으로 IT 관련 기획들을 진행할 때, 이러한 템플릿들을 적극적으로 활용하되, 너무 템플릿을 그대로 따라가지 않도록 제가 필요한 방향으로 잘 바꾸어서 사용해야겠어요!
STEP 02. UX를 고려한 UI 구성과, Prototype에서의 인터랙션 적용 🦔
🎨a) 위 STEP 01에서 활용한 템플릿으로, 3개 이상의 연결된 페이지를 구성 (최소 3-4 페이지)
저는 시작 화면, 메인 화면, 그리고 상세 주문 화면까지 이렇게 총 3 페이지를 구성해 보았습니다!
해당 모습은 Wire로 연결시키 전의 배치입니다.
🎨b) 피그마 내의 기능 중 하나인 Wire를 활용하여, 각 페이지의 전체적인 연결과 버튼을 클릭하면 다른 페이지로 이동하는 등의 흐름을 표현(3-5줄)
Wire로 연결을 하는 것은 정말 쉬웠습니다!
'Prototype' 페이지를 켜고, 넣고 싶은 요소를 더블클릭만 하면 '+' 표시가 떠서, Wire 기능을 사용할 수 있더라고요 😉
심지어, 간단하게 이동 시 효과도 넣을 수 있더라고요.
시작 페이지에서 '시작하기' 버튼을 누르면 홈 화면으로 이동이 되고,
카페모카의 '+' 버튼을 누르면 카페모카 상세 화면으로,
뒤로 가기 버튼을 누르면 다시 홈 화면으로 이동되는 구성을 만들어보았습니다.
너무나 간단하게 만들어져서, '뭐야 나 앞으로 피그마 애용해야겠는걸?'이라는 생각이 들더라고요 ☺️
🎨c) 위 a), b)를 진행하며 본인이 기획자로서 피그마를 통한 UX 표현을 어떻게 활용할 수 있을지에 대한 활용 방안 (3-5줄)
제가 마침 독서 기록앱인 '북적북적'에 대한 기획을 진행하고 있었는데, 해당 기획을 구체화시킬 때 피그마의 해당 기능을 활용해 볼까 합니다!
웹이나 앱을 기획하면서 글로만 설명을 하면, 내가 생각하는 앱/웹의 디자인, 버튼, 페이지 간의 이동과 그 기획안을 읽는 분들의 생각이 달라질 가능성이 매우 크잖아요.
그래서 저는 하나하나 네모 박스로 표현을 하면서 번거롭게 사진 편집을 진행했는데, 이렇게 편리하게 실제로 이용하는 것처럼 만들 수 있다니... 신세계를 마주한 기분이었어요 😲
피그마를 잘 활용하면, 시간을 단축할 수 있을 뿐만 아니라 내가 생각하는 바와 내 기획안을 읽는 분들께서 생각하시는 이미지 사이에 생기는 간극을 최소화할 수 있을 것 같더라고요!!
STEP 03. Plugin을 활용한 기획안 강화 🔥
🎨a) 피그마 플러그인 메뉴에 들어가, 본인이 필요한 기능을 검색하고, 그와 관련한 플러그인을 설치하는 과정 명시 
저는 앱을 기획할 때, 그것이 모두에게 사용이 편리한지, 그 편의성을 정말 중요시 여기는 편인데요☺️
그래서 앱 내에서 글자 크기가 조정된다면, 안 깨지는지 확인해보고 싶었습니다.
'text resize'라고 검색하니까, 관련 플러그인들이 뜨더라고요!
그래서 가장 위에 있는 플러그인을 다운로드해보았습니다.
🎨b) 위 a)를 실제 활용한 것에 대한 캡처(2개 이상)와 그 과정 서술
이렇게 플러그인을 켜고, 현재 글자 사이즈와, 바꾸고자 하는 글자 사이즈를 정하면 바로 그 글자 사이즈로 복사본을 만들어주는, 간단한 플러그인이었습니다😉
그래서 저는 그 플러그인을 활용하여, 제 화면들에 테스트를 해보았는데요!
상세 페이지는 나름 괜찮았는데, 메인 화면이 많이 깨지더라고요🥲
만약에 제가 이 앱을 본격적으로 기획해야 하는 기획자였다면, 해당 부분까지 잘 고려해서 기획을 해야겠죠?
🎨c) 플러그인을 활용한 개선 내용을 분석하며 본인이 기획자로서 피그마 플러그인을 어떻게 활용할 수 있을지에 대한 활용 방안과 본인이 느낀 점 (5줄 내외)
이 플러그인은 사용자의 편의성을 고려할 때 정말 유용할 것 같더라고요!
사람마다 이용할 때에 편안한 글씨 크기가 있는데, 글씨 크기를 키웠을 때에도 앱 사용에 문제가 없는 것이 중요하다고 생각하는 사람으로서, 정말 필수적인 플러그인이라는 생각이 들었습니다.앞으로 앱/웹과 관련된 기획을 진행할 때, 해당 부분을 이 플러그인을 활용하여 여러 번 확인해 보는 것이 좋을 것 같네요 ☺️
확실히 피그마를 이용해 보니, 단순히 기획하는 사람의 입장에서 벗어나서, 실제로 해당 기능을 사용하는 사용자의 입장까지 고려해 볼 수 있었던 것 같아요!아무리 좋은 기획이더라도, 사용자의 편의성이 고려되지 않는다면 좋지 않은 기획이잖아요 😚피그마와 함께라면, 사용자의 편의성까지 고려한 기획자로서 성장할 수 있을 것 같네요!
피그마, 너 이렇게 쉬운 아이였어? 😲_끝.
'💻IT팀 > 🧩[일반] 파트🧩' 카테고리의 다른 글
| 🧭트렌드를 잡으면 기획이 쉬워진다! 구글 트렌드🌍 (0) | 2025.02.22 |
|---|---|
| 👥친구들로 북적이는 북적북적, 궁금하지 않아?📚 (4) | 2025.02.22 |
| NEW 큐봇 (최종의최종의최종)_교보문고 (2) | 2025.02.21 |
| 블루아카이브의 성공 비결은? (7) | 2025.02.21 |
| 결정적 순간으로 되돌아간,🚀 워게임을 알려드립니다!🔥 (1) | 2025.02.16 |
