비전공자로서 IT 공부를 하다 보면 가장 막막했던 부분 중 하나가 '기획안을 시각화하는 방법'이었습니다. 머릿속에 서비스의 흐름은 있는데, 이를 팀원들과 공유하거나 개발자에게 전달하려면 말로 설명하는 데 한계가 있었거든요. 이럴 때 꼭 필요한 툴이 바로 피그마(Figma)입니다.
피그마란?
피그마는 웹 기반의 UI/UX 디자인 툴로, 별도의 설치 없이 브라우저에서 사용할 수 있습니다. 협업 기능이 뛰어나 디자이너뿐 아니라 기획자, 개발자, 마케터 등 다양한 직군이 함께 사용할 수 있다는 점이 큰 장점이죠.
저처럼 디자인 전공이 없고 포토샵, 일러스트도 잘 다루지 못하는 사람에게 피그마는 가장 진입장벽이 낮은 디자인 도구였습니다.
첫 와이어프레임, 이렇게 시작했어요
처음 피그마를 켜면 너무 많은 버튼과 패널에 압도될 수 있지만, 사실 기본 기능만 익혀도 간단한 와이어프레임을 그리는 데는 충분합니다.
- Frame: 웹페이지나 앱 화면 크기를 선택할 수 있는 기본 단위입니다. 저는 iPhone 13 프레임으로 시작했어요.
- Rectangle, Line, Text: 네모 상자, 선, 텍스트 도구만으로도 충분히 UI를 그릴 수 있습니다.
- Components: 자주 사용하는 버튼이나 탭을 컴포넌트로 만들면 반복 작업을 줄일 수 있어요.
와이어프레임을 그리며 느낀 점
실제로 피그마로 첫 화면을 그려보면서 어떤 요소들이 필요한지 더 명확히 알 수 있었습니다. 단순히 '홈 화면'이라고만 생각했던 것이, 막상 그리다 보니 '탭 구조', '배너 위치', '메뉴 버튼' 등 세부적으로 고민할 요소가 많더라고요.
그리고 가장 좋은 점은, 그림을 못 그려도 충분히 와이어프레임을 만들 수 있다는 것이었습니다. 사각형, 선, 텍스트만으로도 충분히 구조를 표현할 수 있어요. 그 덕분에 '디자인 감각이 없어도 기획은 할 수 있다'는 자신감을 얻었습니다.
공유와 피드백의 용이함
피그마는 클라우드 기반이라 URL만 공유하면 누구나 제 와이어프레임을 볼 수 있습니다. 팀원들에게 기획안을 보여주고 바로 피드백을 받을 수 있었고, 개발자에게는 UI 흐름을 설명하기가 훨씬 수월했습니다.
특히 댓글 기능 덕분에 수정 요청이나 아이디어를 손쉽게 주고받을 수 있었어요. 오프라인 회의에서 생략되기 쉬운 피드백들이 문서 위에서 명확하게 남는 점이 좋았습니다.
초보 기획자에게 피그마는 필수
기획자는 아이디어를 구체적으로 '보여주는' 능력이 중요하다고 느꼈습니다. 말보다 그림이, 문장보다 흐름도가 더 강력하더라고요. 피그마는 그런 점에서 비전공자 기획자가 꼭 익혀야 할 도구라고 생각합니다.
앞으로는 피그마를 활용해 프로토타입도 만들어볼 예정이에요. 처음엔 어렵게 느껴졌지만, 조금씩 직접 만들어보면서 자신감이 생겼고, 제가 원하는 서비스를 실제로 구현해나가는 기분이 들었습니다.
다음 글에서는 제가 피그마로 만든 와이어프레임을 어떻게 팀원과 협업하며 발전시켰는지 소개해볼게요. 지금까지의 과정이 누군가에게 도움이 되길 바랍니다!