정식으로 팔랑크스 클럽(동아리)의 절차에 따라, 시즌을 등록한 크루 외에는 제공, 안내되지 않습니다.
허가되지 않는 배포/재가공/캡처 등이 이루어질 시 관련 법령에 따라
손해배상 및 저작권 침해 소송을 제기할 수 있으니, 각별히 유의 바랍니다.
(본 사항은 법령 자문에 따라 '모두' 가 볼 수 있는 명시적 근거를 설립하는 과정임을 재명기합니다.)
팔랑크스 크루 여러분, 안녕하세요. 모두 겨울시즌 4주차 잘 정리하고 계신가요? 🙂
저는 이번 주차는 선택형 유닛으로 피그마를 선택했는데요. 사실 피그마 이름은 많이 익숙하지만 한 번도 사용해본적이 없는 툴이었습니다. 그럼에도 피그마를 도전하게 된 계기는 IT팀이라면, 또한 앞으로 기획자를 꿈꾸는 사람이라면, 피그마는 한 번쯤 다루어볼 필요가 있다고 생각이 되어서인데요. 특히 요즘 기획자, UI/UX디자이너, 개발자가 긴밀히 협업하기 위해 사용하는 툴 중 하나가 피그마라서, 아예 피그마를 사용할 줄 모르면 협업과 커뮤니케이션도 어렵겠다는 생각이 들었습니다. 그러면 제 피그마 사용기를 함께 돌아보겠습니다.
STEP 01. 피그마 템플릿 활용🧩
✔️ a) 피그마에서 링크와 함께 템플릿을 1개 불러오고, 불러온 페이지명 바꿔보기
🔅사용한 템플릿 링크
"Wellness Tracker" 이라는 이름의 템플릿을 다운로드 받았습니다!
저는 "📚Study Tracker"로 바꿔보겠습니다.
✔️ b) 템플릿 내용을 본인의 기획에 맞게 수정/조정하기
먼저, before & after 를 첨부합니다!
원래는 웰니스를 추적하는 앱이었는데,
짜잔! 🎉
Study Tracker 이라는 이름에 걸맞게,
공부에 대한 동기를 부여할 수 있도록 여러 요소들을 추가해 보았는데요.
스탬프 갯수, 상위 퍼센트, 해결한 문제, 공부한 시간 등등...
이러한 요소들이 들어가면 흥미를 더해줄 수 있을 것 같습니다!
✔️ c) 피그마 템플릿을 사용해보면며 느낀 점 및 본인이 기획자로서 활용 가능한 방안
저는 사실 이번에 선택형 유닛을 피그마로 결정한 후, 처음으로 피그마를 사용해보았는데요.
템플릿을 사용해보니 이렇게 금방~ 흉내를 낼 수 있다는 사실 자체가 정말 놀라웠습니다.
IT팀이라면, 피그마 유닛은 꼭 진행하고 졸업해봐야겠구나.
그리고 다음에도 한 번 더 피그마 유닛을 진행해봐야겠다는 생각도 들었습니다. 기획자로서 UI에 대한 이해는 필수라고 생각해서, 이런 부분을 잘 숙지한다면 앞으로 세부적인 기획에 대한 방향을 잡아가는데도 도움이 될 것 같습니다.
디자인이나 개발과 같은 기술적인 부분은 각 직무를 맡은 분들께서 하신다고 하더라도, 결국 각 버튼의 배치 등 인터페이스 기획은 기획자가 하는 것일테니까요!💫
STEP 02. UX를 고려한 UI 구성과, Prototype에서의 인터랙션 적용 🦔
✔️a) 위 STEP 01에서 활용한 템플릿으로, 3개 이상의 연결된 페이지를 구성
로그인, 회원가입, 그리고 가입을 완료했을 때 환영하는 메시지 총 3개의 연결 페이지로 구성을 해보았습니다!
✔️b) 피그마 내의 기능 중 하나인 Wire를 활용하여,각 페이지의 전체적인 연결과버튼을 클릭하면 다른 페이지로 이동하는 등의 흐름을 표현
로그인 화면에서 "회원 가입하기" 를 클릭하면 회원가입 페이지로 이동이 되고,
"가입하기" 를 클릭하면 최종적으로 가입 환영 인사 페이지로 이동이 되도록 Wire 를 설정합니다!
✔️c) 위 a), b)를 진행하며 본인이 기획자로서 피그마를 통한 UX 표현을 어떻게 활용할 수 있을지에 대한 활용 방안
아, 이게 바로 UX 기획이구나! 라는 생각이 들었던 것 같습니다.
옛말에 백문이 불여일견 이라는 말이 있는데요.
백마디 말을 듣는 것보다, 미숙하더라도 템플릿을 활용하여 연습해보는 훈련이 더 도움이 많이 되는 것 같습니다.
Wire를 활용하여 고객의 동선을 설정하는 연습이, 앞으로 기획자로서 피그마를 통해 어떻게 UX를 표현해갈 수 있는지를 실감하게 해주었습니다. 이러한 훈련을 통해 앞으로 어떻게 더 사용자 경험을 직관적으로 개선해갈 수 있는지 파악할 수 있을 것 같습니다.
기획자는 단순히 아이디어를 제시하는 것을 넘어, 실제 제품의 UX 개선에 중요한 역할을 할 수 있다는 생각을 다시금 해보았습니다.
STEP 03. Plugin을 활용한 기획안 강화 🔥
✔️a) 피그마 플러그인 메뉴에 들어가, 본인이 필요한 기능을 검색하고, 그와 관련한 플러그인을 설치하는 과정 명시
저는 아이콘 플러그인을 다운로드 받고 싶어서, 아이콘 팩으로 검색하여 플러그인을 설치하였는데요.
이렇게 생동감 넘치는 3d 아이콘이 무료라니 정말 놀라웠습니다!
🔅사용한 플러그인 링크
https://www.figma.com/community/plugin/791103617505812222/icons8-icons-illustrations-photos
✔️b) 위 a)를 실제 활용한 것에 대한 캡처와 그 과정 서술
가입 환영 인사 페이지를 제작하면서
여러 3d 일러스트를 첨부해 보았는데요.
플러그인을 피그마 내에서 바로 가동할 수 있다는 점을 알게된 것도 매우 유용했다고 생각됩니다.😊
✔️c) 플러그인을 활용한 개선 내용을 분석하며 본인이 기획자로서 피그마 플러그인을 어떻게 활용할 수 있을지에 대한 활용 방안과 본인이 느낀 점
3d 요소 등을 적재적소에 배치하는 것이야말로 피그마 플러그인을 잘 활용하는 방법이라 생각했습니다.
또한 피그마 플러그인 활용을 통해, 기술적인 한계를 극복할 가능성도 있다고 느끼게 되었는데요. 3d 요소나 애니메이션 효과를 시각적으로 구현해야 할 때, 피그마 플러그인을 통해 보다 손쉽게 현실적인 프로토타입을 만들 수 있다는 점을 몸소 느낀 것이 이번 유닛 진행의 매우 큰 수확이었다고 생각합니다.
IT팀이라면 피그마는 해보고 졸업해야지🤫_끝.
'💻IT팀 > 🧩[일반] 파트🧩' 카테고리의 다른 글
| 모두의 빈티지 옷장, 차란 : 새로운 중고 장터의 문을 열다 (14) | 2025.01.25 |
|---|---|
| "나한테 어울리는 립은 이거였어?" 화해, 나만의 뷰티 컬러 큐레이션 공개! (16) | 2025.01.25 |
| 롤하는 유저🔥라면!, 주황색 체력을 아시나요??🤔 (5) | 2025.01.25 |
| 보여줄게 완전히 달라진 큐봇!_교보문고 (2) | 2025.01.25 |
| 세트 메뉴로 주문하시겠어요? {골라 먹는 광고} (5) | 2025.01.19 |
