디자이너없이 피그마로 화면설계 하기

인하우스 서비스 기획 업무를 하다 보면 디자이너 없이 기획자가 화면을 빠르게 그려야 하는 상황이 자주 생긴다. 초기 기획 단계에서 빠르게 아이디어를 시각화해야 하거나, 디자이너 리소스를 확보하기 전 구조를 미리 정의해야 하는 경우가 그렇다.

이때, 피그마(Figma)는 기획자에게도 충분히 활용 가능한 화면 설계 도구다. 별도의 설치 없이 웹에서 사용할 수 있고, 협업과 버전 관리에도 강점을 갖고 있어 실무에서 유용하다.

이 글에서는 기획자가 피그마를 활용해 효율적으로 화면을 설계할 수 있는 실질적인 팁들을 정리하려고 한다.

1. 템플릿이나 컴포넌트 없이, 기본 도형으로 시작하자

화면 설계의 목적은 시각적으로 예쁜 디자인이 아니라, 화면의 구조와 기능 흐름을 정의하는 것이다. 따라서 기본 도형(Rectangle)과 텍스트(Text)만으로도 충분히 의도를 전달할 수 있다.

처음부터 정교하게 디자인하려 하기보다, 기능 요소를 구분하는 수준으로 간단한 박스와 텍스트만 사용해 전체 구조를 빠르게 잡는 것이 좋다. 이 방식은 수정이 쉽고, 협업자에게도 명확한 화면 설계를 전달하는 데 효과적이다.

2. 오토 레이아웃 기능을 활용하자

오토 레이아웃(Auto Layout) 은 피그마에서 반복되는 요소의 정렬과 간격 관리를 자동으로 해주는 기능이다.

예를 들어 버튼 여러 개를 수평 또는 수직으로 정렬하거나, 리스트 항목 간 간격을 일정하게 유지할 때 유용하다. 오토 레이아웃을 적용하면 텍스트 내용이 길어져도 자동으로 버튼 크기가 조정되어 레이아웃이 깨지지 않는다.

Shift + A 단축키로 빠르게 적용할 수 있다.

3. 프레임(Frame) 기능으로 화면 단위를 구분하자

피그마에서 프레임은 하나의 화면 단위로 생각하면 된다. 로그인, 회원가입, 홈 등의 각각의 화면을 프레임으로 구성하면, 전체 사용자 흐름을 시각화하는 데 도움이 된다.

프레임에 명확한 이름을 지정하고 (ex. 로그인_모바일, 홈_탭형) 화면을 좌우로 배치해두면 스토리보드처럼 흐름을 볼 수 있고, 개발자에게도 전달이 용이하다.

4. 텍스트 스타일과 색상은 단순하게 통일하자

기획자라면 화면 설계에서 다양한 폰트와 색상을 쓰기보다 단순하고 반복 가능한 스타일로 통일하는 것이 낫다.

예시:

본문 텍스트: 14px, #333

버튼 텍스트: 16px Bold, #ffffff

버튼 배경색: #007AFF (iOS 스타일) 또는 #4CAF50 (안드로이드 스타일)


색상과 스타일을 통일하면 피그마를 통한 설계의 전달력도 올라간다.

5. 디자인보다는 ‘의도’를 담아야 한다

기획자의 설계는 단순히 구성 요소를 나열하는 것이 아니라, 각 요소가 왜 필요한지를 설명할 수 있어야 한다.

피그마에서는 텍스트를 활용하거나 Comment 기능으로 화면에 주석을 달아 설계 의도를 설명할 수 있다. 또한 피그마 링크만 전달하는 것이 아니라, 간단한 설명 문서(PDF나 구글 문서)도 함께 제공하면 더 정확한 커뮤니케이션이 가능하다.

6. 피그마 플러그인으로 반복 작업을 줄이자

기획자도 기본적인 플러그인을 활용하면 반복 작업을 줄일 수 있다. 대표적으로 다음과 같은 플러그인을 추천한다:

Content Reel: 이름, 이메일 등 더미 텍스트와 이미지 삽입

Wireframe: 기본 와이어프레임 요소 빠르게 생성

Autoflow: 화면 간 연결선을 자동으로 설정


이 외에도 유용한 플러그인 많으니 꼭 찾아서 활용하길 바란다.

7. 버전 기록 기능으로 변경 이력을 참고하자

피그마는 변경 사항을 자동으로 저장하며, File > Show version history에서 이전 버전을 확인하고 복원할 수 있다.

기획 단계에서 자주 발생하는 변경 이력 관리나 실수 복원, 팀원별 작업 추적에 유용하다.
필요할 경우 File > Save version 메뉴를 통해 수동 저장도 가능하다. 단계별 저장 시점에 이름을 붙여두면 협업 시 유리하다.

마치며

피그마는 단순한 디자인 도구를 넘어 기획자가 주도적으로 화면을 설계하고 의도를 명확하게 전달할 수 있는 도구다.
기획자는 전문적인 시각 디자인 역량이 없더라도, 피그마의 기능을 전략적으로 활용하면 명확하고 설득력 있는 화면 설계를 할 수 있다.

설계 의도를 잘 전달하는 것이 중요한 실무 환경에서는, 디자이너 없이도 기획자가 화면을 설계할 수 있는 역량이 점점 더 중요해지고 있다. 이 글의 팁들을 바탕으로 피그마를 기획 도구로 적극적으로 활용해보길 바란다.