Figma-tic하게, 진짜 프로답게!🖌️

[기획Tool] 피그마 : 소프트웨어 기획을 말이 아닌, 결과로 보여주려면 ?

유닛 코드 : PXO-208, 선택형

 

 

피그마와 저의 슬픈 인연 이야기...

 

저는 '기획' 직무라는 꿈을 꾸기 시작하면서부터

피그마가 꼭 배워야 하는 필수 Tool이라는 얘기를 많이 들었는데요.

 

그래서 막학기에 타 전공 과목으로 피그마를 배우는 수업이 개설되자마자,
망설임 없이 신청하며 배울 날만을 손꼽아 기다렸답니다..!!

 

하지만...

인원이 부족해 결국 폐강이 되고 말았습니다.😢

 

그런데 다행히도!
여기 팔랑크스에서 피그마를 배울 수 있는 기회를 얻게 되었네요ㅎㅎ

 

그럼, 피그마 초보의 첫 여정! 저와 함께 떠나보실까요? 🚀

 

---

 

 STEP 01.   피그마 템플릿 활용 🧩 

 

세상에는 작업을 하는데 쓰이는 정말 많은 툴들이 있죠!

하지만, 그 중에서도 단연 가장 주목받고 있는 피그마(Figma)는, 단순한 디자인 툴이 아닙니다.✨

디자인, 프로토타이핑, 협업을 한 곳에서 할 수 있는 강력한 플랫폼으로, 팀원들과 실시간으로 아이디어를 공유하고 수정할 수 있는 기능을 제공합니다. 웹 기반으로 작동하기 때문에 언제 어디서든 접근할 수 있으며, 버전 관리와 디자인 시스템을 통해 효율적인 작업 환경을 만들어 주기도 하죠. 또한, UI/UX 디자인뿐만 아니라 기획 단계에서부터 프로토타입을 만드는 데까지 유용하게 활용될 수 있어, 기획자에게도 꼭 필요한 툴로 자리 잡고 있습니다.🎨

 

이미지 출처: 패스트 캠퍼스

 

Step1에서는 피그마에 공유된 템플릿을 활용하여

UI를 직접 조정해보면서 서비스 분야의 기획 역량을 키워볼텐데요,

 

이번에 서비스팀에 합류하게 된 만큼, 피그마를 다루는 데 익숙해져서

실제 작업에 그 결과물을 꼭 반영해보고 싶습니다😊

 

 

현재 저는 필수형 유닛에서 멜론의 노래방 서비스를 기획하고 있는 중인데요,
그래서 음악 플랫폼과 관련된 템플릿을 가져와 보았습니다.🎶

 

(제 기획안이 궁금하신 분들은 아래 링크를 통해 확인해보세요!)

Sing & Sync : 나만의 음악🎶, 나만의 스타일✨

Sing & Sync : 나만의 음악🎶, 나만의 스타일✨

 

이 기획의 이름은 "싱싱(Sing&Sync) 노래방"이지만,

페이지와 템플릿 이름은 많은 사람들에게 쓰일 수 있도록 포괄적으로 정해야할 것 같아

'AI Karaoke UI'로 페이지명을 바꿔보겠습니다!

 

 

이전 템플릿의 메인 페이지

 

'싱싱한 멜론' 서비스에 맞게 조정한 페이지

 

짠~! 이렇게 템플릿 내용을 바꾸어 보았습니다!

 

그저 한 페이지만 만들어 보았을 뿐인데...

말로만 표현하던 서비스의 내용을 직접 이렇게 UI로 표현해보니 생각보다 오래 걸렸네요🙃

 

<< 피그마 템플릿을 사용해보면서 느낀점 >>
피그마 템플릿을 활용하며 멜론의 노래방 서비스를 기획하면서 가장 크게 느낀 점은, ① 아이디어가 시각적으로 구현되며 구체화된다🖌️는 것이었습니다. 텍스트로만 표현할 때는 추상적으로만 그려지던 서비스 흐름이나 사용자 경험이, UI로 직접 구성되면서 사용자의 동선, 버튼 배치, 정보 전달 방식 등 세부적인 부분까지 자연스럽게 고민하게 되었습니다. 특히, AI 기반 퍼스널 음역대 분석과 같은 핵심 기능이 어떻게 시각적으로 드러나야 사용자에게 친근하게 다가갈 수 있을지 고민하는 과정에서, 기존의 기획 단계에서 놓쳤던 디테일을 새롭게 발견할 수 있었습니다.
또한, 템플릿을 활용하면 디자인 초보자라도 기본적인 레이아웃과 구성 요소를 빠르게 적용할 수 있다는 점에서 큰 장점을 느꼈습니다. 하지만 ② 템플릿에 지나치게 의존할 경우, 기획 의도를 충분히 반영하지 못할 위험이 있다🚨는 점도 깨달았습니다. 단순히 주어진 틀을 따르기보다는 템플릿을 변형하고 발전시키며, 서비스의 고유한 아이덴티티를 녹여내는 과정이 중요하다는 점을 배웠습니다.

<< 본인이 기획자로서 활용 가능한 방안 >>
앞으로 멜론의 노래방 서비스 기획을 발전시키기 위해, 먼저 ① '사용자 경험 중심👥'의 인터랙션 설계에 피그마를 적극 활용할 계획입니다. 현재의 프로토타입은 서비스 흐름과 기능 구성을 큰 틀에서 보여주고 있지만, 이후 단계에서는 사용자가 각 화면에서 무엇을 보고, 어떤 행동을 하며, 다음으로 어떻게 이동할지를 세밀하게 설계해야 합니다. 이를 위해 피그마의 기능을 활용해 화면 전환과 버튼 동작을 구체화하고, 실제 사용자 입장에서의 흐름을 시뮬레이션할 것입니다.
또한, 피그마를 통해 ② 기획안을 시각적으로 설득력 있게 강화👁️‍🗨️할 것입니다. 텍스트 중심의 기획안만으로는 전달하기 어려운 서비스의 매력을, 시각적인 프로토타입을 통해 더욱 생생하게 표현하여 고객들에게 서비스의 가능성을 효과적으로 전달하는데 활용할 것입니다.

 

---

 STEP 02.   UX를 고려한 UI 구성과, Prototype에서의 인터랙션 적용 🦔

 

어떤 웹이나 앱에서 각 화면은 분리되는 것이 아니라

특정 버튼을 누르면 새로운 기능, 새로운 창이 자연스럽게 연결되죠!

 

이렇게 UX 연결고리🔗을 설정하는 것도 중요한데요, 

Step2에서는 'wire'를 활용하여 각 페이지들을 하나의 흐름으로 만들어보겠습니다.

 

 

먼저 Step1에서와 같은 템플릿이지만 이번엔 모바일 버전으로,

위와 같이 총 8개의 페이지를 만들어 보았습니다.

(피그마가 처음이라 그런지.. 정말 하루종일 만들었네요😅)

 

 

이번에는 기존 멜론 어플을 참고하여,

사용자가 이 서비스를 직접 이용하는 모습을 가정하며

각 페이지가 어떻게 연결되는지 "와이어프레임 기능"을 활용해 흐름을 시각화했습니다.

 

 

특정 버튼을 누르면 다음 화면으로 연결되는 과정을 더욱 생생하게 보여드리기 위해,

이렇게 영상으로도 제작해 보았습니다+_+

다소 어색한 부분이 있을 수 있지만, 전체적인 흐름을 이해하는 데 도움이 되길 바랍니다!

 

앞으로 피그마의 와이어프레임 기능을 활용하여 기존에 진행했던 블록트리 작업을 더욱 정교하게 다듬고, 서비스의 흐름을 최적화하는 데 집중🔍할 것입니다. 이번에 세부 UB(Under Block)를 피그마를 통해 구체화하면서, 각 기능의 사용자 경험을 시각적으로 설계하고, 이를 통해 사용자가 서비스를 이용하는 데 있어 불편함을 느낄 수 있는 부분을 미리 파악할 수 있었습니다. 예를 들어, 어떤 기능이 지나치게 복잡하거나 사용자가 혼란스러워할 가능성이 있는지, 또는 중복된 요소들이 서비스의 직관성을 저하시킬 수 있는지 등을 피그마의 프로토타입 기능을 통해 실시간으로 확인하고 수정해 나갔습니다.🛠️ 이러한 과정을 통해 사용자 흐름을 매끄럽고 직관적으로 만들 수 있었으며, 앞으로도 피그마를 활용해 서비스의 각 단계를 더욱 세밀하게 조정하고, 사용자가 보다 편리하게 경험할 수 있도록 개선해 나갈 계획입니다.
또한, 여러 페이지와 기능 간의 연결을 시각적으로 명확히 하여 사용자가 서비스를 더욱 직관적으로 이용할 수 있도록 하고, 필요 없는 복잡성을 제거하며, 핵심 기능에 집중할 수 있는 구조를 설계할 것입니다. 이를 통해 사용자가 서비스와 상호작용할 때의 편의성을 높이고, 서비스의 전반적인 사용성을 지속적으로 발전시켜 나갈 것입니다!✨

 

---

 STEP 03.   Plugin을 활용한 기획안 강화 🔥

 

이번에는 피그마에서 제공하는 추가 기능인, "플러그인(Plugin)"을 사용하여

디자인 작업을 더 효율적이고 창의적으로 만들어보겠습니다.

 

플러그인이 뭐지? 어떤 작업들을 할 수 있지?

어떤 플러그인을 사용하는 게 좋을까?

궁금하시다면, 아래 블로그 링크를 참조하여 도움을 받아보세요😊

 

https://blog.naver.com/ithopenanum/223438746964

 

 

먼저, 플러그인 메뉴에 들어가기 위해서는

 

왼쪽 상단의 피그마 로고를 클릭하여 Plugins → Manage plugins...를 누르면

 

 

이렇게 다양한 플러그인이 등장합니다.

여기서 내 디자인에 필요하거나, 어울리는 도구를 자유롭게 선택하면 끝!

 

 

저는 다음 2가지 플러그인을 선택해 보았습니다.

 

 

1️⃣ Font Changer 플러그인

 

멜론 서비스의 UI를 디자인하면서, 글씨체가 하나만 있어

필요에 따라 다채롭게 사용할 수가 없는 것이 많이 아쉬웠기에😔

기존 글씨체 말고도 새로운 글씨체를 많이 시도해볼 수 있는 이 플러그인을 가장 먼저 시도해보았습니다.

 

 

마찬가지로 이렇게 들어가면 노란색 박스 알림창이 뜨게 되는데요

당황하지 않고, 시키는대로!

 

 

글씨체를 바꾸고 싶은 부분을 드래그하여

 

 

새로운 폰트 중 원하는 것을 선택하면 됩니다!

 

그런데 이상하게도, 왼쪽의 'Select old font(s)'를 체크하지 않으면

'Replace' 버튼을 누를 수가 없어서 반드시 선택할 수밖에 없네요..?😕

게다가 오른쪽의 수많은 글씨체들이 어떤 모습인지 알 수가 없어, MS Office처럼 미리보기 형식이라도 떴으면 좋겠습니다..ㅎ

 

 

짜잔~ 이렇게 글씨체가 고급지게 바뀌었네요!

폰트 이름처럼, 진짜 'satisfy' 합니다ㅎㅎ

 

 

2️⃣ Unsplash 플러그인

 

Unsplash에서는 피그마 내에서

다양한 고품질의 이미지를 검색하고, 사용할 수 있습니다.

 

Pictures / Illustrations로 구분이 되어서 사진과 그림을 따로 검색하기도 편하답니다!

다만, 모든 이미지가 무료로 제공되는 것은 아니니(Unlock🔒은 유료!) 주의하셔야 해요

 

 

저는 음역대 분석 결과가 나오는 화면에서, 이번엔 천사 같은 목소리가 아닌

파도처럼 강렬한 목소리를 표현하기 위해 쓰나미 사진🌊을 활용하려고 합니다.

 

 

이미지가 한눈에 확 바뀌면서,

화면 전체의 분위기도 크게 달라진 것 같네요O.O

 

멜론의 노래방 서비스를 기획하며 피그마 플러그인을 활용해 디자인과 사용자 경험을 더욱 풍부하게 만들 수 있음을 실감했습니다. Font Changer 플러그인을 사용해 특정 화면의 글씨체를 색다르게 바꾸어 시각적인 다양성을 제공했고, Unsplash 플러그인을 통해 음역대 분석 결과에 따라 이미지를 다르게 제작하며 작업 효율성을 높일 수 있었습니다. 이러한 과정에서 플러그인은 단순히 디자인 도구를 넘어, 기획자가 의도한 메시지를 효과적으로 전달하고 작업 과정을 간소화하는 중요한 수단임을 깨달았습니다.
앞으로는 플러그인을 활용해 더 나은 사용자 경험을 설계하는 데 집중하고자 합니다. 플러그인을 작업을 돕는 도구로서만 한정 짓지 않고, 사용자와의 소통을 강화하거나 서비스의 메시지를 보다 효과적으로 전달🖋️할 방법을 모색하는 데 활용할 계획입니다. 디자인 작업의 세부적인 디테일뿐만 아니라 전체적인 기획 방향성을 설정하는 데에도 플러그인을 유용하게 적용할 수 있을 것입니다.
플러그인을 활용하며 느낀 점은, 기획자가 기존의 틀을 넘어 새로운 가능성을 탐구할 수 있는 창의적인 도구🌟라는 것입니다. 이를 통해 반복적인 작업에서 벗어나 핵심적인 기획과 사용자 경험에 더 집중할 수 있었으며, 앞으로도 다양한 프로젝트 기획에서 플러그인을 적극적으로 활용하여 기획의 완성도를 높이고 새로운 아이디어를 실현할 수 있을 것이라 기대합니다.

 

 

기획자로서, 피그마를

사용자 경험과 인터페이스를 효율적으로 설계하고,

다양한 도구를 활용하여 창의적인 작업을 할 수 있는 강력한 도구로 평가한다.

 

Figma-tic하게, 진짜 프로답게!🖌️_끝.