[Day 9] 디자이너는 왜 피그마를 사용할까? UI 디자인과 피그마 입문

안녕하세요 여러분, 송 2입니다.
 
오늘은 제 블로그의 마스코트이자 프로덕트 디자인 요정인 '픽시(Pixie)'를 소개하려고 합니다. 
 
픽시는 사용자의 문제를 발견하고, 해결책을 설계하며, 더 나은 경험을 만들기 위해 고민하는 프로덕트 디자이너를 상징하는 캐릭터입니다. 9일 차부터 픽시도 저와 함께 본격적으로 UI 디자인을 배우기 시작했습니다.
 
그동안 기초디자인과 ai활용법, 심리학 등을 배웠다면 9일 차부터는 본격적으로 이전에 배웠던 내용들을 어떻게 실제 화면으로 구현해야 할지 방법을 배우는 수업입니다. 
 
이번 포스팅에서는 UI의 개념과 좋은 UI의 기준을 알아보고, 프로덕트 디자이너의 대표 도구인 피그마(Figma)의 인터페이스와 핵심 단축키까지 알아보도록 하겠습니다.
 
당분간은 실습내용을 따로 적지 않고 TIL에 같이 적겠습니다!
 

 

프로덕트 디자이너 요정 '픽시(Pixie)'

---

1. 사용자가 보는 모든 것이 UI일까?

■ 1.1 UI란 무엇일까?

왼쪽부터 ABLY, 배달의 민족 올리브영

 
앱이나 웹화면 등에서 보고, 누르고, 입력하는 모든 것은 무엇일까요? 바로 UI(User Interface)

• UI는 사용자가 서비스와 상호작용하는 화면과 요소를 의미.
• 버튼, 입력창, 카드, 메뉴, 아이콘 등 사용자가 직접 보고 클릭하거나 조작하는 모든 요소가 UI에 포함.
• 당연하게 사용되고 있는 위와 같은 요소들은 우연히 배치된 것 X.
• 사용자가 더 쉽고 편리하게 서비스를 이용할 수 있도록 디자이너가 의도적으로 설계한 결과물.

 

■  1.2 UX와 UI 뭐가 다른 건데?

 

▶ [ UX ] 사용자가 목표에 도달하는 전체 경험을 설계하는 과정

• 목표 :  좋은 경험 설계
• 관심사 : 사용자는 왜 행동할까? ex) 사용자 행동, 니즈, 문제 해결
• 대표 산출물 : 문제를 해결하는 경험 설계 ex) 사용자 여정 지도, IA, 와이어프레임, UX Flow
• 실무 연결 : 사용자 리서치, 서비스 기획, Flow, UX 설계
• 사용자 중심 사고
• 배달앱 이용 예시 : 사용자가 원하는 음식을 쉽고 빠르게 찾고 주문할 수 있도록 서비스 흐름을 설계

 

▶ [ UI ] 경험을 화면으로 구현하는 과정

• 목표 :  보기 쉽고 사용하기 쉬운 화면 설계
• 관심사 : 사용자는 무엇을 보게 될까? ex) 시각 디자인, 레이아웃, 인터렉션
• 대표 산출물 : 경험을 보여주는 화면 설계 ex) Screen, Component, Design System
• 실무 연결 : 화면 설계, 프로토타입 제작, 디자인 구현
• 시각적 표현과 인터렉션
• 배달앱 이용 예시 : 검색창 위치, 버튼 색상, 메뉴 구성 등 실제 화면을 설계하는 것

 

■ 1.3 좋은 UI란 무엇일까?

▶ 좋은 UI의 3가지 흐름

• 보이게 한다 → 이해하게 한다 → 행동하게 한다
• 좋은 UI는 단순히 예쁜 화면이 아니라 사용자가 화면을 인지하고  → 이해하고  →  행동할 수 있도록 설계되어야 함.
• 사용자가 정보를 쉽게 발견하고, 무엇을 해야 하는지 이해하며 원하는 행동을 수행할 수 있을 때  → 좋은 UI

 

▶ 좋은 UI의 기준

 

■ 1.4 UI 기본 요소

 

• 버튼 : 행동 유도 · 기능 실행
• 인풋 : 정보 입력 · 데이터 전달
• 카 : 정보 그룹화 · 콘텐츠 구성
• 아이콘 : 의미 전달 · 시각적 언어
• 여백·정렬 : 구조 정리 · 시선 유도
• 레이아웃 : 화면 구성 · 정보 배치
• 타이포그래피 : 위계 표현 · 가독성 향상
• 컬러 : 정보 구분 · 브랜드 표현
• 디자인 시스템 : 규칙 관리 · 일관성 유지

---

2. 프로덕트 디자이너의 필수 도구, 피그마(Figma)

■ 2.1 왜 프로덕트 디자이너는 피그마를 사용할까?

피그마 인터페이스 설명하기 전에 저와 같은 비전공자나 디자인 입문자라면 한 가지 궁금증이 생길 수 있습니다.
 
"왜 프로덕트 디자이너는 다른 툴이 아닌 피그마를 사용할까? 포토샵, 일러스트레이터 등 다양한 디자인 툴이 존재하지만 현재 많은 기업과 프로덕트 디자이너들은 피그마(Figma)를 활용하고 있습니다. 
 
제가 수업을 들으며 느낀 점은 피그마가 단순히 화면을 그리는 도구가 아니라 협업과 프로덕트 디자인에 최적화된 도구라는 점이었습니다.
 

▶  협업

• 실시간 작업 : 여러 명이 하나의 파일을 동시에 편집 가능 → 디자이너 간 협업 용이
• 디자인 피드백 : 댓글과 멘션 기능 → 빠른 의견 공유 → 피드백 반영
• 개발 핸드오프 :  개발자와 디자인 명세를 공유 → 필요한 정보 한곳에서 확인
• 요구사항 공유 : 기회의도와 요구사항을 디자인에 반영 → 작업 방향을 함께 맞춰갈 수 있음

 

▶  공유

• 링크 공유 : 링크만으로 파일 공유 가능
• 뷰어 확인 : 별도 가입 없이 디자인 확인 가능
• 최신 버전 유지 :  파일 변경 시 링크로 항상 최신 버전 확인 가능
• 권한 설정 : 보기, 댓글, 편집 권한을 설정하여 안전하게 공유 가능

 

▶  디자인 시스템

• 컴포넌트 : 반복적으로 사용하는 UI요소를 하나의 묶음으로 관리하는 기능 → 한 번 만들면 여러 화면에서 동일하게 사용 할 수 있음
• 스타일 : 디자인 속성을 관리하는 기능 → 서비스 전반에 동일한 스타일 적용 가능 → 디자인 일관성 유지에 도움
• 재사용 :  이미 만들어둔 컴포넌트와 스타일을 여러 화면에서 반복적으로 활용하는 방식 → 작업 시간 단축
• 일괄 수정: 원본 컴포넌트나 스타일을 수정 → 해당 요소가 사용된 화면에도 변경 사항이 자동으로 반영 → 유지보수 편리

 

▶  프로토 타임

• 화면 연결 : 화면과 화면을 연결하여 이동 흐름을 구성 가능
• 인터렉션 : 사용자 행동에 따른 인터렉션 설정 가능
• 재사용 :  실제 서비스의 이용 과정을 미리 경험하고 확인 가능
• 일괄 수정: 개발 전 아이디어를 검토하고 문제점을 미리 발견 가능

 

■ 2.2 피그마와 친해지기 : 인터페이스와 작업구조

 

▶  피그마 인터페이스는  어떻게 구성되어 있을까?

• 크게 보면 도구를 선택하는 영역, 작업을 관리하는 영역, 실제로 디자인하는 영역

• 좌측 패널 : 작업 파일과 레이어 구조를 관리하는 영역

- 프로젝트 영역, 파일 ·에셋·검색 영역, 페이지 영역, 레이어 영역
 

• 중앙 캔버스

- 디자인 작업의 중심 영역으로, 프레임 생성과 배경색 설정이 가능
 

• 우측 패널 : 선택한 객체의 디자인 속성, 프로토타이입 연결, 개발 전달 정보 관리 영역

- Design, Prototype, Dev Mode
 

• 도구 영역 (Toolbar) : 디자인 작업에 필요한 도구를 선택하고 실행하는 영역

- Move, Frame, Shape, Pen, Text, Comment, Resources, Draw, Design, Dev Mode
 

▶  피그마 작업 구조 이해하기 

• Section

 - 여러 개의 프레임을 하나의 작업 단위로 묶어 관리하는 기능.
- 프로젝트 구분 하거나 작업 범위를 정리할 때 활용 가능.
- 복잡한 작업물을 체계적으로  관리하는 데 도움.
 

• Frame

- 피그마 작업의 가장 기본이 되는 단위.
- 실제 서비스의 화면을 구성하는 영역으로 사용.
- 반응형 레이아웃과 프로토타입 연결의 기준이 됨.
 

• Group

- 여러 객체를 하나로 묶어 관리하는 기능.
- 관련된 요소를 함께 이동하거나 정리할 때 사용 가능.
- 레이어 구조를 효육적으로 관리하는데 도움.
 

• Section, Frame, Group의 차이점 

 
묶는 대상을 구분으로 보면 섹션은 여러 개의 프레임을 프레임은 디자인 화면 전체를 그룹은 도형, 텍스트, 이미지 등 여러 객체를 기준으로 볼 수 있습니다
 

▶ 피그마에서는 어떻게 화면을 만들까?

• 피그마에서는 화면 전체를 하나의 Frame으로 생성한 뒤, 그 안에 필요한 영역을 다시 프레임으로 나누어 작업
• 최종적으로 하나의 완성된 화면이 만들어짐

▶  피그마는 왜 Group가 아니라 Frame일까?

• Group : 여러 요소를 함께 이동하거나 정리하기 위한 기능
• Frame : 화면을 구조적으로 관리하기 위한 기능

위에서 봤다시피 피그마는 하나의 Frame 안에 여러 개의 Frame을 배치하는 방식으로 작업합니다. 그 이유는 실제 서비스 화면은 한 번 만든고 끝나는 것이 아니라 계속해서 수정되고 유지보수를 하기 때문입니다. Frame로 작업해야 특정 영역만 수정이나 재사용하기 쉽고, 화면 구조도 한눈에 파악이 가능합니다.
 
또한 모바일, 태블릿, PC처럼 다양한 화면 크기에 대응해야 하는 반응형 디자인 작업에서도 Frame이 중요한 역할을 합니다!
 
 
 
저도 처음에는 왜 굳이 Frame안에 Frame을 만드는지 이해 못 했습니다. 사실 9일 차 수업에서는 이 내용이 크게 필요 없었기 때문입니다. 그렇지만 지금 14일차 수업을 진행해 보니까 이 계층구조를 제대로 이해하는 것이 가장 먼저 익혀야 할 기본기라고 느꼈습니다.
 

9. 오늘의 실습

실습은 피그마 기능을 활용하여 여러 가지 도형을 만들어보는 실습과 카드를 제작해 보는 실습이었습니다. 카드는 제가 지금 부트캠프를 진행하고 있는 오즈코딩스쿨의 캐릭터를 기반으로 해서 만들어 봤습니다. 너무 귀엽지 않나요??ㅎㅎ. 이번에는 실습에 대해 자세하게 제작과정을 설명할만한 내용은 없기 때문에 오늘은 작업물만 올리겠습니다!  피그마를 처음으로 접하시는 분들은 유튜브에도 많은 강좌가 있고 피그마 공식사이트에서도 이런 내용들을 확인하실 수 있습니다!

 
9일차 수업을 통해서 평소 당연하게 사용하던 앱과 웹화면이 사실은 수많은 고민과 설계를 거쳐 만들어진 결과물이라는 점을 알 수 있었고, 앞으로 프로덕트 디자이너로서 사용자에게 전달할 화면을 어떻게 설계해야 할지에 대해서 생각을 할 수 있었습니다. 
 
이전에는 사용자의 입장에서 서비스를 이용했다면, 이제는 프로덕트 디자이너의 시선으로 화면의 구조와 의도를 살펴보게 되는 눈이 조금은 생긴 것 같습니다.
 
얼마 전에 병원을 다녀왔는데 병원자체의 혈압측정 인터페이스가 인상적이어서 사진을 찍어두었습니다. 예전 같았으면 그냥 지나쳤을 화면이지만, 이제는 왜 이렇게 구성했을까? 사용자는 편할까? 와 같은 생각이 들었습니다.
 
좋아 보이거나 특이한 디자인은 일단 저장해 두는 습관도 조금씩 생기고 있습니다. 앞으로도 다양한 서비스의 화면을 관찰하고 레퍼런스를 잔뜩 저장해서 저만의 화면을 만들어 보고 싶습니다.
 
처음으로 피그마를 본격적으로 시작한 수업이라 블로그 내용이 조금 길어진 것 같습니다. 그렇지만 오늘 포스팅한 내용은 정말 중요한 내용이라는 것!!!! 잊지 말고 다 같이 열심히 공부해서 좋은 프로덕트 디자이너가 되었으면 좋겠습니다! 
 
다음 포스팅에서 만나요~!