정식으로 팔랑크스 클럽(동아리)의 절차에 따라, 시즌을 등록한 크루 외에는 제공, 안내되지 않습니다.
허가되지 않는 배포/재가공/캡처 등이 이루어질 시 관련 법령에 따라
손해배상 및 저작권 침해 소송을 제기할 수 있으니, 각별히 유의 바랍니다.
(본 사항은 법령 자문에 따라 '모두' 가 볼 수 있는 명시적 근거를 설립하는 과정임을 재명기합니다.)
🐷피그....머?
아아.. 🎨피그마...!
그거 디자이너만 쓰는 tool 아니었어....?😳
라는 게 저의 잘못된 고정관념이었음을 본 유닛을 통해 깨달았습니다....😖
기획자라면, 다들 공감하시지 않나요?
'아 내가 한 기획은 이렇게 표현되는 게 아닌데... (무한 수정 반복) 아 왜 생각한 것대로 안 나오지?'😿
(아니라면 죄송...)
저는 보통 기획안 디자인을 할 때, 여러 번 수정을 하곤 합니다.
(구상한 대로 디자인이 안 나와서 ㅠㅠ)
사실 말이 디자인이지, 기획자인 내가 나의 기획안을 표현/전달하기 위함인데요,
tool 사용에 익숙치 않아서 그런지 내가 원하는대로 나타내기 진짜 힘들더라구요..
그래서 이번 유닛을 진행하게 되었고, 🎨피그마의 기능들을 통해서 기획을 쉽고 빠르게, 그리고 효율적으로 나타낼 수 있는 ⭐실무 팁을 배울 수 있었는데요! 그 경험을 공유하고자 합니다. ㅎㅎ
그런데 이런 좋은 tool이 협업이 아닌 이상은 무료인데 왜 저는 몰랐을까요.. ??
아무래도 피그마는 대표적인 실무 디자인 tool이라는 인식이 고정관념으로 잡혀서 제가 쳐다도 안 봤던 거 같아요. 🫣
(과거의 나... 반성 씨게 해라...)
STEP 01. 피그마 템플릿 활용🧩
✔️ a) 피그마에서 링크와 함께 템플릿을 1개 불러오고, 불러온 페이지명 바꿔보기
다양한 랜딩 페이지가 있어서 저는 이걸 택했습니다 !
(팔랑크스 커리큘럼에서 추천해주신 템플릿 링크에서 찾았어요!)
위 링크에 들어가, Open in Figma를 눌러줍니다.
🔅바꾼 페이지명
파일명과 함께 각 페이지명을 바꾸어 주었습니다!
더블클릭하면 바로 바뀔 수 있게 되어서, 엄청 수월하게 수정이 되더라구요 🥰
저는 상품을 소개하고 판매하는 웹을 다음 주부터 기획할 거여서, 크게 아래와 같이 페이지를 나누었습니다!
(로그인, 랜딩 페이지, 상품 소개, 장바구니, 보안)
✔️ b) 템플릿 내용을 본인의 기획에 맞게 수정/조정하기
먼저, before & after 를 첨부합니다!
🇰🇷한국인을 대상으로 하는 서비스를 기획해서, 한국어로 바꾸었고,
아직 이후 기획 대상의 구체적인 컨셉은 잡지 못 해서, 색깔을 🦔팔랑크스처럼 초록초록한 색깔로 바꿔봤습니다. ㅎㅎ
색깔 변경 시에도, 변경하고 싶은 색상의 객체를 🖱️더블 클릭하면, 우측 사이드바에 Design 바가 뜨는데요!
아래에 우리가 클릭한 색상이 Selection Colors에 뜨게 되는데, 여기에서 초록색을 선택했습니다. ㅎㅎ
💥템플릿만 활용한 건데도, 완전 전문가 같지 않나요...?😳
✔️ c) 피그마 템플릿을 사용해보면며 느낀 점 및 본인이 기획자로서 활용 가능한 방안
우선, 이렇게 다양하고 전문적인 느낌이 드는 템플릿을 통해, 나의 기획을 손쉽지만 확실하게! 결과물을 낼 수 있다는 점에 놀랐습니다.
또, 스스로에게 뿌듯한 마음이 가장 컸습니다..ㅎㅎ✨
피그마 템플릿을 사용하면서 기획 초기에 🫧디자인의 일관성을 쉽게 유지할 수 있음을 느꼈는데요!
혼자 하다보면 기획적 디자인의 일관성이 깨지는 경우가 있는데, 템플릿을 통해 기본 구조를 빠르게 설정하고 반복적인 작업을 줄일 수 있었습니다.
UI 요소를 직접 배치하고 수정하는 과정은 기획자로서 디자인 의도를 더 명확하게 전달할 수 있는 중요함을 알게 되었고,
작은 버튼 위치나 크기, 색상 같은 세부적인 수정이 사용자 경험에 큰 영향을 미칠 수 있음을 느꼈습니다. 😊
STEP 02. UX를 고려한 UI 구성과, Prototype에서의 인터랙션 적용 🦔
✔️a) 위 STEP 01에서 활용한 템플릿으로, 3개 이상의 연결된 페이지를 구성
저는 우선, 👩💻랜딩 페이지에서의 로그인/회원가입 UX👩💻를 그리기로 하여, 아래 처럼 필요한 화면을 위 STEP 01의 템플릿을 활용하여 제작해보려고 합니다.😊
우선 랜딩 페이지에서, 글자나 색상은 더블클릭해서 쉽게 바꿀 수 있는데요 !
이미지를 바꾸는 다소 헷갈려서 그 과정 또한 첨부해봅니다!
✨바꾸고 싶은 이미지를 더블 클릭하면, 아래와 같이 Design탭애서 Image 란이 자동으로 잡히게 됩니다.
그 Image를 클릭하며, 원하는 이미지(저는 팔랑크스 우피페이지에서 따왔네요 ㅎㅎ)를 첨부해주고,
Fill / Fit / Crop / Title에 따라, 그 크기를 조정할 수 있습니다.
저는 큰 배너 이미지처럼 쓸 예정이므로, Fill 을 선택하여 꽉 차게 해주었습니다. 😊
그러면 제가 필요한 화면 배치를 해줍니다!
비슷하게, 더블클릭하거나 드래그하면 쇽쇽 움직입니당!!!
(이렇게 쉬운 걸 난 왜 그동안 몰랐나....😵)
그래서 아래처럼 배치했습니다.💫
✔️b) 피그마 내의 기능 중 하나인 Wire를 활용하여,각 페이지의 전체적인 연결과버튼을 클릭하면 다른 페이지로 이동하는 등의 흐름을 표현
자, 이제 Wire를 사용해서 페이지를 이어줘야 겠죠!
랜딩 페이지에서의 로그인 버튼을 더블클릭하여 생긴 ' + ' 버튼을 눌러, 로그인 화면과 연결시킵니다.
이후 회원가입 화면으로도 동일한 방법으로 연결시켜줬습니다. 🤗
짠!
💥최종적으로 모두 Wire가 그려진 화면입니다!
✔️c) 위 a), b)를 진행하며 본인이 기획자로서 피그마를 통한 UX 표현을 어떻게 활용할 수 있을지에 대한 활용 방안
기획자로서 🔁페이지 간의 자연스러운 전환과 UX 흐름을 구성하는 것이 사용자의 몰입도에 큰 영향을 미친다는 점을 체감했습니다.
또, 기획자가 직접 페이지 UX를 그려봄으로써, 단순 구상 단계에서는 ✨생각하지 못 했던 문제를 발견하거나, 더 섬세한 디테일을 반영✨할 수 있었어요!
실무에서 이러한 기능을 적극적으로 활용하여 기획 단계에서부터 UX를 고려한 설계를 하고, 디자이너와 개발자와의 원활한 소통을 통해 완성도 높은 사용자 경험을 제공할 수 있을 것이라고 생각합니다.😎
STEP 03. Plugin을 활용한 기획안 강화 🔥
✔️a) 피그마 플러그인 메뉴에 들어가, 본인이 필요한 기능을 검색하고, 그와 관련한 플러그인을 설치하는 과정 명시
우선 저는 아래 랜딩 페이지가 다소 허전한 거 같아서😅, 좀 채워줄만한 것들을 찾고 싶었어요!
뭔가 좀 입체감 있는 것들로 심플하게? 채우고 싶었죠!(기획자가 이렇게 정성적인 표현을 쓰면 안 되긴 하지만, 본 유닛과는 무방하니깐 머...)
🔎그래서, plugin에서 '3d'를 검색해보았습니다!
오, 별도의 프로그램 설치는 없이 이렇게 바로 뜨는군요!👏
근데 보자마자 감동... 이런 3d 오브젝트들 만들려면 피그마나 어도비 같은 거 꼭 필요한 줄 알았는데..
나도 할 수 있다니...🥹
✔️b) 위 a)를 실제 활용한 것에 대한 캡처와 그 과정 서술
아무래도 '탐색' 하고 '타진'하는 기획동아리인만큼!
🔎돋보기랑 🎯과녁을 넣어보았습니다.
물론 당연히 디자이너가 아닌지라 디자인적(심미적)으로 훌륭한진 모르겠지만,
기획안 전달할 때 부족한 요소 채우고 강조할 포인트(지금으로 치면, 우리는 탐색/타진하는 기획 동아리!)에 관한 것을 잘 살릴 수 있는 거 같습니다. 🤗
우리 IT팀 스러운 3d 오브젝트가 있길래, 오 이거 딱인데?! 하고 간단히 🦔팀 소개 UI도 구현해봤습니다. ㅎㅎ
(IT팀 팀장님과 우리 크루분들 보고 계십니까?! ~ 🩵)
✔️c) 플러그인을 활용한 개선 내용을 분석하며 본인이 기획자로서 피그마 플러그인을 어떻게 활용할 수 있을지에 대한 활용 방안과 본인이 느낀 점
🎨피그마의 3D 오브젝트 플러그인을 사용하면서 💻복잡한 3D 요소를 간편하게 삽입할 수 있어 시각적 완성도가 크게 향상되었습니다.
특히 3D 오브젝트를 쉽게 배치하고 수정할 수 있어 💫직관적이고 생동감 있는 디자인을 빠르게 구현할 수 있었습니다.
기획자로서, 이 플러그인을 활용해 😎상세한 제품 시각화나 ⚡몰입감 있는 사용자 경험(UX)을 제공할 수 있을 것이며, 개발자 및 디자이너와의 협업 과정도 더 명확하게 시각적으로 표현할 수 있을 것 같습니다. 🥰
*본 우수 레퍼런스는 기존의 선배크루 결과물에서, 2024년 기준에 맞게 일부 변형되었습니다. 😊
🐷피그...머❓ 아아~~~ 실무기획 🎨피그마 ~!_끝.
'🔹커리큘럼(선택형) > 🏅우수 결과 레퍼런스' 카테고리의 다른 글
| [💥자료무료공유!]🤫남들보다 1시간 일찍 퇴근하는 엑셀 스킬⚒️(잘하면 2시간도 쌉가능) (0) | 2024.09.29 |
|---|---|
| (이게 무료야..?!🫢) 디자이너 대체 가능한, 🤖Leonardo AI (0) | 2024.09.22 |
| 👁️내가 보는 시야를 1%에서 55%로 확장하는 구글링! 고고링~🔎 (1) | 2024.08.19 |
| 애인은 없어도, '👩❤️👨동반자' 하나쯤은 다들 있지 않아?_지적 동반자 '🍵티타임즈' (0) | 2024.08.11 |
| '최종. 진짜최종. 찐최종. 레알최종. 찐찐찐찐최종..' 에서 벗어나는 ✨실무 기획 tool (✅대학생도 활용 가능) (0) | 2024.08.03 |
