[도서 리뷰] 맛있는 디자인 피그마 with AI

요즘은 퍼블리셔나 디자이너에게 산출물을 받으면 거의 대부분 Figma로 전달받는 것 같습니다. 예전에는 제플린이나 PPT로 주고받던 경우도 있었는데, 이제는 협업의 중심이 확실히 피그마로 옮겨진 느낌입니다.

프론트를 전문적으로 하는 편은 아니지만, 개발자도 피그마 파일을 읽고 구조를 이해할 수 있어야 한다고 생각합니다. 특히 요즘에는 피그마랑 v0 같은 AI 도구를 활용해서 프론트엔드를 AI로 딸깍할 수 있기 때문에 알면 좋겠죠.

그래서 이번에는 피그마를 체계적으로 한 번 훑어볼 수 있는 책을 골라 읽어봤습니다. 책 제목에 with AI가 붙어 있지만, 실제 AI 기능은 피그마 유료 플랜에서 활용하는 부분이 많아서 무료 계정 기준으로는 충분히 실습해 보지 못했습니다. 대신 피그마의 기본 사용법, 컴포넌트, 오토 레이아웃, 디자인 시스템 관련 내용을 중심으로 읽었습니다.

아래에는 읽으며 인상 깊었던 내용을 파트별로 정리했습니다.

도서 내용 정리

PART 1 쉽고 빠른 피그마 레시피

초반부는 설치 방법과 기본 도구 사용법을 정리하는 입문 파트입니다. 이미 피그마를 한두 번이라도 써본 사람이라면 빠르게 넘어갈 수 있는 내용이지만, 처음 접하는 사람에게는 전체 화면 구성과 작업 흐름을 익히는 데 도움이 됩니다.

개인적으로는 이 파트가 책의 진짜 핵심이라기보다 뒤에 나오는 활용 파트를 위한 준비 구간에 가깝다고 느꼈습니다.

PART 2 피그마 제대로 활용하기

이 파트부터는 실제로 피그마를 어떻게 써먹을 수 있는지가 보이기 시작합니다. 단순히 도형을 그리는 수준이 아니라, 실무에서 자주 접하는 컴포넌트, 베리언트, 오토 레이아웃, 컨스트레인트 같은 개념을 통해 화면 구조를 반복 가능하게 만드는 방법을 설명합니다.

특히 오토 레이아웃과 컴포넌트 개념은 프론트엔드 개발자가 봐도 익숙한 사고방식이라 생각합니다. UI를 조립 가능한 단위로 나누고, 재사용 가능한 규칙으로 관리한다는 점에서 코드 구조와도 닮아 있습니다.

AI를 이용하여 텍스트 자동 번역, 템플릿 활용, 이미지 보조 기능처럼 바로 써먹을 수 있는 편의 기능도 소개되는데, 피그마를 조금 더 적극적으로 사용해 보고 싶다면 도움이 될 것 같습니다.

책에서 언급한 플러그인 중 인상 깊었던 것은 아래와 같았습니다.

• Unsplash
• UI Faces
• Lorem Ipsum
• DesignDoc

디자인도 결국은 구조를 잘 나누고 재사용성을 높이는 작업이라는 점에서 개발과 통하는 부분이 많다고 느꼈습니다. 응집성은 높이고 결합도는 낮추는 원칙이 디자인 시스템에서도 꽤 자연스럽게 드러납니다.

PART 3 실제 디자인으로 이해하는 디자인 시스템 기초

이 파트는 피그마 사용법 자체보다 디자인 시스템을 이해하는 데 더 초점이 있습니다. 처음에는 다소 이론적으로 느껴졌지만, 읽다 보니 왜 이런 개념이 중요한지 조금씩 납득이 되었습니다.

실무에서는 단순히 화면 하나를 예쁘게 만드는 것보다, 여러 화면에 공통으로 적용할 수 있는 기준을 정하는 일이 더 중요합니다. 컬러, 타이포그래피, 아이콘, 간격, 그리드, 엘리베이션 같은 요소를 미리 정리해 두면 이후 화면을 추가하거나 수정할 때 훨씬 일관된 결과를 만들 수 있습니다.

프론트엔드 관점에서 보면 이런 기준은 Tailwind CSS나 디자인 토큰과도 연결되는 이야기처럼 느껴졌습니다. 디자인 가이드가 잘 정리되어 있을수록 구현 쪽에서도 공통 스타일을 만들기 쉽고, 유지보수 비용도 줄어들기 때문입니다.

결국 책에서 말하는 파운데이션은 팀이 같은 기준으로 작업하기 위한 공통 언어에 가깝다고 느꼈습니다.

PART 4 디자인 시스템 실무

마지막 파트에서는 버튼, 인풋 필드, 진행 바, 화면 테마, 사이드바, 탭 메뉴처럼 실무에서 자주 사용하는 UI 요소를 중심으로 설명합니다. 이 부분은 이론보다 실전 감각에 가까워서 가장 실용적으로 읽혔습니다.

특히 단순히 하나의 화면 예시를 보여주는 것으로 끝나지 않았으며, 반복해서 사용할 수 있는 형태로 정리하는 흐름이 좋았습니다.
실제 프로젝트에서도 결국 자주 쓰는 UI를 공통 컴포넌트처럼 다뤄야 하니, 디자인 단계에서부터 이런 식으로 구조를 잡아두면 협업이 훨씬 편해질 것 같습니다.

물론 좋은 디자인을 바로 뽑아내는 감각까지 이 책 한 권으로 해결되지는 않을 것 같습니다. 다만 비슷한 화면을 많이 보고, 이미 잘 정리된 샘플을 참고하면서 반복해 보는 출발점으로는 충분히 괜찮아 보였습니다.

실무 팁: 자주 쓰는 피그마 단축키

제가 디자인 퍼블리셔는 아니지만, 책을 읽으면서 느낀 점은 결국 피그마도 손에 익으면 속도가 확실히 빨라진다는 것입니다. 특히 아래 정도의 단축키만 익혀도 마우스를 왔다 갔다 하는 시간을 꽤 줄일 수 있습니다.

추가로 Space를 길게 누르면 일시적으로 Hand Tool처럼 화면을 이동할 수 있어서, 프레임을 여러 개 배치해 놓고 작업할 때 특히 편했습니다.

리뷰

이 책은 피그마를 처음 접하는 사람이나, 디자이너와 협업해야 하는 개발자가 피그마의 기본 개념을 빠르게 정리하기에 적당한 입문서였습니다. 특히 컴포넌트, 오토 레이아웃, 디자인 시스템처럼 실무와 연결되는 부분을 한 번에 훑을 수 있다는 점이 좋았습니다.

반대로 이미 피그마를 오래 사용한 디자이너라면 초반부는 다소 기초적으로 느껴질 수 있다고 생각했습니다. 또한 제목에 AI가 들어가지만, 무료 사용자 입장에서는 해당 기능을 충분히 체험하기 어렵다는 점은 약간의 아쉬움으로 남았습니다.

그럼에도 불구하고 피그마를 단순한 디자인 툴이 아니라 협업 도구이자 공통 언어로 이해하고 싶다면 한 번 읽어볼 만한 책이라고 생각합니다. 개인적으로는 화면을 직접 디자인하기 위해서라기보다, 디자이너가 만든 결과물을 더 잘 이해하고 개발로 자연스럽게 연결하기 위한 관점에서 도움이 되었습니다.

아래는 실습을 하며 제가 작업한 화면이에요.. (물론 책에 있는 예제를 그대로 따라한 것이지만요..)