서비스 기획을 하면서 UI 디자인에 대한 이해가 점점 중요해지고 있습니다. 특히 비전공자라도 기본적인 UI 디자인 도구를 다룰 줄 알면 기획서 작성이나 디자이너와의 협업이 훨씬 수월해집니다. 제가 직접 배우고 활용해 본 피그마(Figma)를 중심으로 UI 디자인 기본기를 쉽게 소개해 드릴게요.
1. 피그마란?
피그마는 웹 기반 디자인 툴로, 별도의 설치 없이 브라우저에서 바로 사용할 수 있습니다. 무료 버전도 제공되어 초보자가 부담 없이 시작하기 좋고, 실시간 협업 기능이 강력해 팀 작업에 적합합니다.
2. 피그마 시작하기: 계정 만들기와 기본 인터페이스
피그마 공식 사이트에 접속해 무료 계정을 만들면 바로 사용할 수 있습니다. 기본 인터페이스는 크게 다음과 같은 영역으로 구성됩니다:
- 캔버스(Canvas): 디자인 작업 공간
- 툴바(Toolbar): 도형, 텍스트, 이미지 삽입 도구
- 레이어 패널(Layers): 작업 중인 요소들 목록
- 속성 패널(Properties): 선택한 요소의 색상, 크기, 위치 조정
3. 기본 도형과 텍스트 사용하기
피그마의 가장 기본 작업은 도형과 텍스트를 만드는 것입니다. 직사각형, 원, 선 등을 자유롭게 그릴 수 있고, 각 요소의 크기와 색상을 조절해 원하는 UI를 구성할 수 있습니다.
텍스트 도구를 사용해 버튼, 제목, 설명 문구 등을 넣고, 폰트 종류와 크기를 바꾸면서 가독성을 높이는 연습도 중요합니다.
4. 프레임과 컴포넌트 활용
프레임(Frame)은 화면 단위로 UI를 구성하는 공간입니다. 예를 들어 모바일 앱 화면 하나, 웹 페이지 한 장이 하나의 프레임이 될 수 있죠.
컴포넌트(Component)는 여러 화면에서 반복되는 버튼이나 메뉴 등 UI 요소를 한 번 만들어 재사용하는 기능입니다. 수정하면 연결된 모든 컴포넌트가 함께 바뀌어 효율적입니다.
5. 색상과 스타일 지정
피그마는 색상, 폰트, 효과 등의 스타일을 저장하고 재사용할 수 있습니다. 이렇게 하면 디자인의 일관성을 유지할 수 있어 좋습니다.
저는 초보자라 컬러 팔레트를 미리 준비해 놓고 자주 사용하는 색상만 사용하도록 연습했어요.
6. 실시간 협업과 피드백 주고받기
피그마의 큰 장점 중 하나는 여러 사람이 동시에 접속해 작업할 수 있다는 점입니다. 기획자, 디자이너, 개발자가 한 파일에서 의견을 주고받으며 빠르게 수정할 수 있어 협업 효율이 극대화됩니다.
7. 초보자를 위한 팁
- 처음엔 기본 도형과 텍스트로 간단한 화면을 만들어 보는 것부터 시작하세요.
- 유튜브 강의나 공식 튜토리얼을 참고하면 이해가 빠릅니다.
- 컴포넌트와 스타일을 활용해 반복 작업을 줄이세요.
- 실제로 서비스 기획서에 필요한 화면들을 직접 만들어 보면서 실력을 쌓으세요.
맺음말
피그마는 비전공자도 충분히 배울 수 있고, 서비스 기획 업무에 큰 도움이 되는 도구입니다. 디자인 감각이 부족해도 기본 기능만 익히면 효과적으로 UI를 표현할 수 있으니 도전해 보시길 권해 드립니다.
다음 글에서는 ‘비전공자 기획자를 위한 간단한 데이터 분석 기초’를 다뤄 보겠습니다.