정식으로 팔랑크스 클럽(동아리)의 절차에 따라, 시즌을 등록한 크루 외에는 제공, 안내되지 않습니다.
허가되지 않는 배포/재가공/캡처 등이 이루어질 시 관련 법령에 따라
손해배상 및 저작권 침해 소송을 제기할 수 있으니, 각별히 유의 바랍니다.
(본 사항은 법령 자문에 따라 '모두' 가 볼 수 있는 명시적 근거를 설립하는 과정임을 재명기합니다.)
📍 유닛명
유닛 코드 : PXO-205, 선택형
[기획Tool] 피그마 : 소프트웨어 기획을 말이 아닌, 결과로 보여주려면 ?
피그마를 처음 들어본건 같은 대외활동 하던 디자인과 친구가 쓰는거 보고 알았습니다.
그땐 단순히 디자이너가 쓰는 tool이라고 생각했었는데, 이게 복학하고 팀플을 하다보니 유용 하더라고요?
무료버전은 일부 재한은 있어도 혼자서 UI 작업할 정도로는 충분해서 조금씩 활용해보려고 지금도 노력중 입니다.
그래도 저가 전문적으로 배운적도 없고 그냥 다른사람 하는 거 따라서 해본 수준이라
스킬을 조금 더 배우고 싶어서 이번 유닛을 진행하게 되었습니다!
기본적인 UI디자인은 UX/UI디자이너가 아니더라도 할 수 있으면 기획안의 전달력을 크게 높일 수 있으니까요!
STEP 01. 피그마 템플릿 활용🧩
✔️ a) 피그마에서 링크와 함께 템플릿을 1개 불러오고, 불러온 페이지명 바꿔보기
🔅사용한 템플릿 링크
https://www.figma.com/community/file/1117753494561810315/login-register-app-ui-kit
로그인 페이지부터 시작할 예정이라 모바일 앱 페이지가 있는 이것으로 선택했습니다.
해당 링크에서, Open in Figma를 눌러줍니다.
🔅바꾼 페이지명
파일명과 각 페이지명을 바꾸어 주었습니다.
해당위치에 더블클릭을 눌리면 바로 바꿀 수 있습니다.
기존 어플리케이션의 UI를 만들어볼 예정이라, 크게 아래와 같이 페이지를 나누었습니다,
(로그인, 메인화면, 메뉴, 옥션)
✔️ b) 템플릿 내용을 본인의 기획에 맞게 수정/조정하기
우선 따라서 만들어볼 어플리케이션의 UI화면을 가지고 옵니다. 눈모양 버튼을 클릭하면 이미지를 켰다 껏다 할 수 있습니다.
저걸 이용해서 어플리케이션을 따라 만들어 볼 수 있습니다.
컴포넌트와 템플릿을 활용하여 제작한 Before - After 화면 입니다.
피그마의 컴포넌트 기능을 활용하여 휴대전화에 삽입까지 한 모습입니다.
저런 식으로 UI/UX를 개선하려고 하는 UI의 기본 뼈대를 만들 수 있습니다.
해당 로그인 화면을 바탕으로 메뉴와 원래 메이플 핸즈에는 없는 기능인 옥션 판매/아이템 수령 기능까지 STEP2에서
한번 디자인 해보겠습니다.
✔️ c) 피그마 템플릿을 사용해보면며 느낀 점 및 본인이 기획자로서 활용 가능한 방안
피그마의 템플릿과 컴포넌트를 통해, 웹 및 앱 디자인을, 내 기획에 맞게 수정 및 개선하여 시각적인 결과물을 낼 수 있다는 점에서 아주 유용하다는 생각이 들었습니다.
예시나 대상의 도안 없이 혼자서 디자인을 하다보면 기획의 일관성이 깨지는 경우가 있는데, 템플릿과 피그마의 가리기 기능을 사용하여 기본 틀을 만들어 놓으면 반복적인 작업들을 줄여 시간을 단축 시킬 수 있었습니다!
UI요소들을 배치하고 수정하면서 디자인 의도를 더 확실하게 전달 할 수 있는 방법을 알게된 것 같습니다.
STEP 02. UX를 고려한 UI 구성과, Prototype 에서의 인터렉션 적용 🦔
✔️a) 위 STEP 01에서 활용한 템플릿으로, 3개 이상의 연결된 페이지를 구성
피그마의 컴포넌트기능과 가리기 기능 그리고 STEP 03.에서 설명할 플러그인을 활용하여 옥션(마켓)기능을 추가한 프로토 타입을 만들어 보았습니다.
또한 한번 만들어진 페이지를 그룹으로 묶은 뒤 복사 붙여넣기를 하여 필요한 부분만 수정하면 반복작업을 더 줄일 수 있습니다.
만들어진 페이지들의 화면을 배치하여 보았습니다.
그룹으로 묶고 드래그하면 배치하기 쉽습니다.
✔️b) 피그마 내의 기능 중 하나인 Wire를 활용하여,각 페이지의 전체적인 연결과버튼을 클릭하면 다른 페이지로 이동하는 등의 흐름을 표현
그럼 다음으로는 Wire를 사용하여 페이지를 이어보겠습니다.
Wire기능을 활용하려면 컴포넌트로 지정해주어야 하기 때문에 Create component 기능을 활용하여 컴포넌트가 아닌 대상을 컴포넌트로 만들어 주어야 합니다.
그 후 컴포넌트를 클릭해서 프로토타입 탭에 들어간 뒤 인터렉션 기능을 켜주면 와이어를 적용시킬 수 있습니다.
다음으로는 최종 Wire로 연결된 화면입니다!
그 뒤 컴포넌트를 더블클릭해서 생긴 ' + ' 버튼을 눌러, 연결시키고자하는 화면들끼리 연결을 시키면 됩니다,
로그인 버튼을 누르면 메인화면으로, 메인화면에서 매뉴버튼을 누르면 메뉴버튼으로 전환되는 식으로 연결하였습니다.
✔️c) 위 a), b)를 진행하며 본인이 기획자로서 피그마를 통한 UX 표현을 어떻게 활용할 수 있을지에 대한 활용 방안
와이어 기능은 사용해본적이 없었는데, 사용해보니 페이지간의 자연스러운 전환과 UX흐름을 구성하는데 아주 유옹하다고 느꼈습니다.
또한 이렇게 만들어진 흐름이 사용자의 몰입감과 긍정적 경험 형성에 큰 영향을 미친다는 점을 체감했습니다.
실무에서도 이러한 기능을 적극적으로 활용하여, UX를 고려한 기획을 설계하고, 디자이너 와 개발자들과 원활하고 효율적인 소통을 통해 빠르고 확실한 업무처리를 할 수 있을 것이라고 생각합니다.
STEP 03. Plugin을 활용한 기획안 강화🏆
✔️a) 피그마 플러그인 메뉴에 들어가, 본인이 필요한 기능을 검색하고, 그와 관련한 플러그인을 설치하는 과정 명시
피그마에서 저가 평소에 가장 많이 사용하는 Iconify를 소개해보도록 하겠습니다!
매우 다양한 아이콘들이 있어서 버튼과 UI를 설계할때 아주 유용하답니다,😀
Run 버튼을 눌러 플러그인 설치 후 플러그인 탭에 들어가면 바로 사용가능 합니다.
화면에서 보는 것 처럼 원하는 타입을 검색하면 아주 많은 종류의 아이콘 및 일러스트들이 검색 됩니다!
✔️b) 위 a)를 실제 활용한 것에 대한 캡처와 그 과정 서술
해당 화면의 알림탭과 토크 기능 탭의 경우 각각 Iconify에 pac man 과 Bell을 검색하여 나온 결과들 중 가장 적합한 것들을 골라서 만든 것 입니다. 이렇 듯 해당 플러그인을 사용하면 아주 다양한 형태의 아이콘을 만들 수 있습니다.
✔️c) 플러그인을 활용한 개선 내용을 분석하며 본인이 기획자로서 피그마 플러그인을 어떻게 활용할 수 있을지에 대한 활용 방안과 본인이 느낀 점
Iconify의 경우 팀프로젝트를 진행할때 웹 UI를 만들때에도 유용하게 사용했었던 플러그인 입니다.
피그마에 일러스트 이미지 파일을 들고 올 경우에는 크기 조정과 색깔 변경에 어려움을 겪는데, 해당 플러그인을 사용하면
적절한 색깔을 자유롭게 넣을 수 있으며, 진짜 사용되고 있는 웹,앱 처럼 디자인을 매우 빠르게 구현할 수 있습니다.
기획자로서, 해당 플러그인을 활용해, 웹 및 앱의 여러 탭을 구현하고, 생동감 있는 사용자 경험을 제공할 수 있을 것이라고 생각합니다.
피그마를 이용하여 어플리케이션 UI 따라 만들어보기(+ 기능추가) 끝.
'🎀서비스팀 > 🦄[일반] 파트🦄' 카테고리의 다른 글
| 아디다스에 찾아온 급격한 변동?! (8) | 2024.09.14 |
|---|---|
| 📖도서 팟캐스트 시장을 점령할 윌라 2.0 🎧 (4) | 2024.09.14 |
| 빠른 상황판단으로 위기회피 성공💦.. 에픽세븐 잠재력 각성 시스템 철회 (1) | 2024.09.14 |
| 💪🏻프로틴 음료로 MZ세대를 사로잡다: 디저트39의 성공 사례 분석하기💟 (6) | 2024.09.14 |
| 슈, 10년 연습하고 집에 갈래? (6) | 2024.09.14 |
