[10편] UI/UX 디자인의 기초, 피그마(Figma)로 웹 서비스 설계 입문하기

 데이터를 분석하고 로직을 짜는 단계가 어느 정도 익숙해졌다면, 이제는 사용자가 직접 마주하는 '화면'을 설계할 차례입니다. IT 실무에서 기획자나 개발자가 소통할 때 가장 많이 쓰는 도구가 바로 '피그마(Figma)'입니다. 오늘은 디자인 툴이 낯선 IT 입문자가 국비 지원 과정이나 독학을 통해 피그마를 어떻게 시작해야 하는지, 핵심 학습 포인트를 정리해 드립니다.

[피그마, 왜 디자인 전공자가 아닌 우리에게 필요할까?]

흔히 피그마라고 하면 '포토샵 같은 예술적인 디자인 툴'을 떠올립니다. 하지만 IT 실무에서 피그마는 '기획서이자 소통 도구'입니다. 개발자와 기획자가 말로만 "버튼을 오른쪽에 두고, 클릭하면 이런 창이 떠야 해요"라고 하면 소통에 오류가 생기죠. 피그마로 화면을 미리 그려보면, 이 서비스가 실제로 돌아갈지, 사용자가 버튼을 찾기 쉬울지를 미리 확인할 수 있습니다. 비전공자일수록 기획 내용을 시각화하는 능력이 곧 커리어 경쟁력이 됩니다.

[피그마 학습 3단계: 일단 따라 하기부터]

1. 화면 구성 요소 익히기 (프레임과 레이어) 피그마의 모든 작업은 '프레임(Frame)'이라는 도화지 위에서 시작됩니다. 폰의 화면 크기, 노트북의 화면 크기 등 규격화된 프레임 위에 사각형, 텍스트, 아이콘을 배치하는 연습을 하세요. 처음부터 예쁜 디자인을 하려 하지 말고, 기존의 유명한 앱(예: 카카오톡, 인스타그램) 화면을 똑같이 그려보는 '트레이싱(Tracing)'을 강력 추천합니다.

2. 컴포넌트(Component)와 오토 레이아웃(Auto Layout)의 이해 피그마가 생산성 도구인 이유가 바로 여기 있습니다. '버튼' 하나를 만들어서 '컴포넌트'로 지정해두면, 앱 전체에서 버튼 색상을 바꿀 때 한 번에 수정할 수 있습니다. 또한 '오토 레이아웃'은 화면 크기가 변해도 버튼이 자동으로 위치를 조정하게 해줍니다. 이 두 가지만 이해해도 여러분은 단순한 그림 그리기가 아니라 '설계'를 하고 있는 것입니다.

3. 프로토타입(Prototype)으로 연결하기 피그마의 꽃은 '프로토타입'입니다. 1페이지의 버튼을 누르면 2페이지로 이동하는 애니메이션을 설정하는 과정이죠. 코딩을 하지 않고도 내 서비스가 실제로 작동하는 것처럼 보여줄 수 있습니다. 이 기능을 활용해 내가 기획한 화면들을 연결해 보면, 기획의 논리적 허점이 어디인지 눈에 보이기 시작합니다.

[입문자가 흔히 하는 실수와 대처법]

• 실수 1: 픽셀 단위의 완벽함에 집착 입문자가 가장 많이 하는 실수는 1픽셀 단위의 정렬이나 색상 배치에 너무 많은 시간을 쏟는 것입니다. 디자인이 아니라 '사용자 경험(UX)'을 설계하는 것이 목표라는 점을 잊지 마세요. 툴 사용법을 익히는 것이 우선입니다.

• 실수 2: 너무 거대한 프로젝트 기획 처음부터 "넷플릭스 같은 앱을 만들어야지!"라고 하면 100% 포기합니다. "로그인 화면", "메인 화면에서 리스트로 이동하기"처럼 아주 작은 단위부터 설계해 보세요.

[오늘의 체크리스트]

1. 피그마에 가입하고 기본적인 도형(사각형, 원)을 배치해 보았는가?

2. 내가 자주 사용하는 앱의 화면을 하나 정해, 똑같이 따라 그려보는 트레이싱을 시작했는가?

3. 레이어(Layer)의 개념을 이해하고 이름을 정리하며 작업하는 습관을 들였는가?

피그마는 처음엔 어렵게 느껴지지만, 한 번 손에 익으면 파워포인트보다 훨씬 자유롭고 즐거운 도구입니다. 기획자의 언어인 디자인 설계 역량을 갖추면, IT 업계에서 여러분의 가치는 두 배로 올라갑니다.

[핵심 요약]

• 피그마는 디자인뿐만 아니라 기획 내용을 소통하고 시각화하는 필수 협업 도구입니다.

• 트레이싱(따라 그리기)을 통해 기본 툴 사용법과 컴포넌트 개념을 익히는 것이 가장 빠릅니다.

• 처음부터 화려한 디자인을 하기보다 사용자의 동선을 논리적으로 배치하는 UX 설계에 집중하세요.

[다음 편 예고]

다음 시간에는 출석 관리부터 과제 제출까지, 국비 과정 수강생이 놓치기 쉬운 '훈련 장려금 100% 챙기기' 팁을 알아보겠습니다.

혹시 피그마를 처음 접하면서 가장 막막했던 부분(예: 오토 레이아웃 사용법, 컴포넌트의 개념 등)이 무엇인가요? 댓글로 알려주시면 쉽게 풀어서 설명해 드릴게요!