한빛출판네트워크

책을 읽으면서 매력있다고 느꼈던 포인트는 단순히 피그마의 API나 각종 버튼을 설명하지 않고

실제 피그마를 사용하는 디자이너의 하루가 어떻게 흘러가는지 보여주면서

피그마를 활용해 어떻게 일을하고 그렇기 때문에 피그마가 왜 중요한지 역으로 설명해 준다는 점이다.

​각 챕터마다 여러 노하우들이 적혀있는데 꿀정보들이 많았다.

피그마 자체에 대한 설명도 충실한데, 굉장히 친절하다.

재밌게 따라갈수 있었다.

​ 예전 기억으론 UX/UI디자인을 할때는 포토샵으로 해서 원시적인 방법을 썼었던거 같다. 그때만해도 UX/UI디자인이란 개념이 덜 박혀있었을 때였으니... 피그마 도구설명과 디자인개념을 안내하고 과정마다 예제로 실습하게 되어있다. 책을 따라 실습하다보면 피그마를 제대로 사용하기위해 필요한 기능을 익히고 프로젝트로 실무 역량을 다지게된다. 좋은 디자인을 위해 고려해야할 팁도 알려줘서 유용하다. 이책은 피그마를 처음 시작하는 사람이나 배워서 실전에 들어가야하는 사람에게 정말 필요한 책이다. 여러가지 툴을 자세히 알 수있고, 내용도 실습하고 활용하기 좋은 내용으로 구성이 되어있다. 혼자 코딩하는 사람들도 디자인에 대한 것을 도움 받을수 있고, 개발자도 협업하기 위한 디자인적 지식에 많은 도움이 될거같다. 실제 응용 가능한 디자인 방법을 알려주는 책이니 디자이너, 개발자에게는 기본부터 응용이 가능하다. 현업에서 바로 사용해도될 정도의 도움이되는 책이다. "한빛미디어 <나는 리뷰어다> 활동을 위해서 책을 제공받아 작성된 서평입니다."





저는 현업에서 분석설계자로 오래 일했으며, 현재 UI 설계 툴로 Axure RP를 주로  사용하고 있습니다.

Axure RP의 경우 한글 매뉴얼이나 책이 없기 때문에 학습하기에 까다롭고, 국내 커뮤니티가 없어 정보 취득에 열악합니다.

그리고 협업을 위한 타 프로그램(Jira 등)과의 연계, 버전 관리, 실시간 협업(동시 작업, 파일 공유, 피드백) 등의 기능에서 아쉬운 점이 많았습니다.

얼마전부터 이러한 단점을 보완할 수 있는 툴을 찾았는데 바로 이 책에서 소개하고 있는 벡터 그래픽 편집기 및 프로토타이핑 도구인 피그마입니다.

피그마는 현재 전세계적으로 UX/UI 디자인 분야에서 가장 인기있는 All in one 툴이기 때문에 관련 기술서, 영상, 교육과정 등이 계속해서 생산되고 있습니다.

이러한 트렌드에 힘입어 피그마 관련 서적도 여러 권 출간이 되어 있습니다.

이 책은 21년 11월에 출간되었고 피그마 관련 가장 최신의 정보를 담고 있으며, 특히 실무 중심으로 설명이 잘 되어 있어 UX/UI 디자인에 관심이 있는 독자에게 적극 추천하고 싶습니다.

책의 목차를 보시면 Part1에서는 설치에서 시작해서 환경설정, 기본 메뉴 익히기, 레이아웃 활용, 협업 방법에 대해서 설명하고, 

Part2에서는 학습 목표 시스템을 설정하고 피그마를 이용해 디자인 작업을 따라해 보는 방식으로 진행됩니다. (이 책의 핵심입니다.)

목표 시스템은 iOS 뉴스 앱, Android 스포츠 클래스 앱, 반응형 패션 라이브 커머스 , 디자인 시스템 등으로 실전에 자주 마주하는 시스템이며 아이콘, 내비게이션, 슬라이드 같은 핵심 UI 기능을 어떤 식으로 구현하는지 잘 설명이 되어 있습니다.

그리고 보통 부록에는 불필요한 정보가 많은데 이 책의 부록 A, B에는 본문만큼이나 중요한 정보가 담겨 있습니다.

부록 A에는 프론트엔드 개발 관점에서 피그마의 기능을 설명합니다. 마크업(퍼블리싱)을 위해서 디자인 에셋 내보내기, 모든 이미지 한 번에 내보내기 방법에 대해 설명되어 있습니다.

부록 B는 피그마의 중요 단축키와 플러그인에 대해서 설명합니다.

단축키의 단순 설명이 아니라 필수/선택 단축키, 커스텀 단축키 설정 방법, 자주 사용하는 Quick action 등을 꼼꼼히 설명하고 있습니다.

플러그인은 대부분 현업에서 필요한 기능이기때문에 망설임없이 책에 나온 필수 플러그인을 모두 설치하시면 됩니다.

추천 플러그인은 저자가 생산성 향상을 위해 추천하는 플러그인 목록인데 작업 속도를 향상시키기 위해 설치해서 사용하시면 좋습니다.

파트 2부터 먼저 보시길 권합니다.

iOS, 안드로이드, 반응형 3가지 타입의 서비스를 위한 디자인을 만날 수 있습니다. 실제 서비스를 위한 디자인이 어떻게 이루어지는지 하나씩 알아본 다음, 디자인 시스템을 이루는 요소들을 살펴봅니다.

피그마로 처음부터 프로토타입이 만들어지기까지 전체를 아우르는 내용을 보여줍니다. 어떤 요소들을 어떻게 만들고, 만들어진 요소를 어떻게 구성하여 전체를 만들어가는지 보여줍니다. 전체를 보는 시각과 프로세스를 만날 수 있습니다.

서비스 디자인을 보여준 뒤에 있는 디자인 시스템을 설명합니다. 시스템을 구성하는 요소들이 너무 많기 때문에 모두 설명하지는 않습니다. 콘셉트 페이지를 구성하기 위해 필요한 요소들을 중심으로 설명하고 어떻게 시작하는지 보여줍니다.

각 장마다 있는 디자인 노하우 만으로도 충분히 읽을 가치가 있습니다.

그리고, 설명 중간중간 들어가 있는 팁과 잠깐은 설명을 더욱 풍성하게 하고 실무에 다가갈 수 있도록 합니다.

피그마를 알려주면서 효율적인 작업을 위해 활용할 수 있는 다양한 서비스도 얘기해 줍니다.

'디자인을 위해 사용할 수 있는 서비스가 이렇게나 다양한가?' 하고 놀랄 수 있습니다. 마치 '디자인만 생각해라, 필요한 기능은 그때그때 찾아서 활용하면 된다. 디자인 프로그램을 익히는 게 필요는 하지만 너무 시간을 쏟지는 말아라.' 라고 얘기하는 것 같습니다. 피그마를 사용하지 않는다 하더라도 알아두면 많은 도움이 되는 서비스입니다.

파트 1은 피그마를 사용하기 위해 알아야 하는 요소와 기능들을 설명합니다.

보는 이에 따라서 다르겠지만, 익히 알고 있는 개념도 있을 것이고 생소한 기능도 있을 수 있습니다. 그런 가운데 독특하고 반짝이는 아이디어로 이루어진 기능도 만날 수 있습니다. 작업을 쉽고 효율적으로 할 수 있도록 도와줍니다.

요소와 기능 설명이라 조금 단조로울 수 있습니다. 하지만, 단순한 구현 설명에 그치지 않고 UX/UI 컴포넌트를 만드는 빠르고 효율적인 실무 노하우를 알려줍니다. '호오, 기발한데!' 하는 순간을 만나는 즐거움을 놓치지 않으시길 바랍니다.

파트 2를 먼저 보고 파트 1을 본다면 전체를 이루는 그림에서 어떤 역할을 하는지 알고 접근할 수 있으므로 훨씬 재미있게 접근할 수 있습니다.

디자인 도구로서 피그마에 더하여, 협업 도구로서 피그마도 알 수 있습니다.

"한빛미디어 <나는 리뷰어다> 활동을 위해서 책을 제공받아 작성된 서평입니다."

나는 업무상 어도비 크리에이티브 클라우드를 구독 중이라서 겸사 겸사 포토샵 또는 어도비 XD로 UI 디자인 작업을 하고 있다. 디자인은 포토샵으로, UX나 플로우는 XD로 한다. 사실, 이 책에서 다루는 피그마라는 툴은 이 책을 보기 전까지 정말 듣도 보도 못한 툴이었다.

피그마는 웹 기반이기 때문에 설치형 프로그램에 비해 업데이트가 빠르다는 점과 파일을 저장할 필요 없이 웹에서 바로 디자인할 수 있다는 점도 장점으로 보인다. 디자이너라면 누구나 중셉(중도 세이브)을 하지 않아서 작업물을 날리는 경험을 한 번씩 다 해보았을 테니까. 하지만 인터넷 환경이 뒷받침되지 않는다면 작업이 온전히 진행되지 않을 수도 있어 염려스러워하는 사람이 있을 수도 있는데, 피그마는 브라우저 앱과 데스크톱 앱으로 모두 사용할 수 있기 때문에 본인이 편한 방식을 사용하면 된다.

UI/UX 디자이너를 위한 실무 피그마 책은 나처럼 피그마라는 프로그램을 처음 접해보는 사람들이 쉽게 따라 할 수 있도록 차근차근 설명을 이어가고, 간단한 실습을 따라 해낼 수 있게 구성되어 있다. 다만 책 제목이 그렇듯, 디자이너에게 친화적이기 때문에 디자인에 대해서 전혀 모르는 문외한이 디자인을 공부하기 작업하기 위해 시작하기에는 쉽지 않다. 이 책은 초보자를 위한 입문서가 아니라 기존의 스케치나 XD 등을 사용하는 등 디자인에 종사하는 사람이 피그마라는 툴로 작업 툴을 바꾸기 위해 적응하고 학습하는 것에 초점을 맞춘 책이라고 보면 된다.

개인적으로는 기획자와 개발자가 직접 접근하여 수정하고 익스포트하는 부분에서 소통이 편할 것 같다는 생각을 했지만, 한편으로는 이걸 도입하게 되면 가뜩이나 작업 경계가 애매한데 서로 자기 일을 미루는 일이 생길 수도 있겠다는 걱정도 됐다. 

한동안 그래왔고 지금도 앱 트렌드는 플랫 디자인이 선호되고 있다. 플랫 한 디자인 작업에 있어서 피그마는 UI / UX 디자인 툴로써 강점을 보이고 무엇보다 협업에 편의성을 가지고 있지만, 디자이너 입장에서는 익숙한 툴을 굳이 변경하면서 리스크를 감수할 필요가 있을까라는 생각이 들긴 했다. 

기존에 사용하던 툴을 바꿔야겠다는 생각이 들지는 않지만, 앱 개발 팀에서 처음으로 툴을 도입해야 할 때 시도하기에는 매우 훌륭한 툴이고, 학습하기에 좋은 책인 것은 분명하다.

이 책에서는 피그마에 대한 기초와 이론이 잘 설명되어 있습니다. 처음에는 피그마를 어떻게 시작해야하는지 설명하고 있습니다. 기본 인터페이스부터 작업 전에 환경을 어떻게 설정해야하는지 상세하게 알려줍니다.

​

이후에는 피그마에 시스템에 대한 설명을 합니다. 그래픽 스타일과 라이브러리나 정렬 레이아웃 오토레이아웃등을 다룹니다. 기본적인 피그마 시스템에 대한 설명만 했다면 조금 아쉬웠을 것 같은데, 이후에는 실제로 피그마로 여러가지 서비스를 디지안하는 실습을 합니다. iOS, 안드로이드 반응형 앱, 디자인 시스템까지 예제를 통해 어떻게 피그마를 사용해야하는지 실습합니다.

​

저는 프론트엔드 개발자로서 현업에서 일하고 있습니다. 기획자와 협업을 위해 피그마를 공부하면 좋을 것 같다고 생각했었는데, 이 책을 통해 어느정도 피그마에 대해 알 수 있었던 것 같습니다. 꼭 디자이너나 기획자가 아니더라도 개발자분들도 이 책을 통해 피그마를 공부하면 협업에 도움이 될 것이라 생각합니다.

​

"한빛미디어 <나는 리뷰어다> 활동을 위해서 책을 제공받아 작성된 서평입니다."

스케치, XD, 제플린 등 한때는 당연하게메이저 포지션을 차지했던 프로토타이핑 툴들이하나 둘 피그마에 의해 자리를(?) 뺏기기 시작했고어느덧 피그마는 디자인 - 기획 - 개발팀에게 당연한 툴이 되었다.이런 빠른 변화의 흐름들이 버겁기도 하지만,실제 사용했을 때 왜 사람들이 열광하고,지금의 위상(?)을 갖게 됐는지는쉽게 이해는 되었던 잘 만들어진 툴이다.나는 이 책을 조금 다른 기대감으로 신청하게 되었다.그것은 바로 "예쁜 디자인을 하고 싶다" 의 마음.프로토타입을 만드는 것이나,컴포넌트 관점으로 요소를 분리하여 재활용하는 것 등은개발의 사고방식을 툴로 풀어낸 것들이었기에 크게 어렵지 않았다.아마 전문적이진 않지만 알음알음 배운 포토샵 또한툴에 대한 개념적인 이해에는 도움이 되었다고 생각한다.하지만 토이프로젝트를 할 때피그마를 사용해보려고 해도,디자인 기본에 대한 지식 없이내가 만든 결과물은 무언가 어설프고예쁘지 않았다.개인적으로 어떤 서비스에 사용된 기술이 아무리 뛰어나도사람의 마음을 제일 먼저 끌어오는 요소는디자인이라고 생각하는 나이기에이런 부분까지 가미된 책을 원했는데이 책이 그 부분을 충족시켜주었다.책 서두에 기본적인 용어 설명, 왜 이런 간격이 필요한지 등내가 혼자 만든 결과물이 어설퍼졌던 이유들을조금은 해당 챕터를 통해 알 거 같았다.또한 실무에서 발생하는 상황들을 가정하고그 때 어떻게 피그마를 활용하면 되는지에 대한 팁들이굉장히 유용했고,저자가 피그마를 실무에서 많이 활용해보셨고,웹, 앱 서비스에 대한 경험이 있었기에공유해줄 수 있는 팁들이 좋았다.그럼에도 불구하고 적절한 두께, 책의 두께에 압도당해펼쳐볼 엄두조차나지 않는 가이드북들 또한 존재하는데적절한 두께에 적절한 분량과 꿀팁들을 잘 버무려 한 권으로 담아냈다.

제 주변에는 앱 개발을 하시는 분들이 몇 분 계십니다.

얼마 전 그분들 중에서 한 분이 코딩보다 디자인하는 것에 너무 어렵다는 말을 하시면서 저보고 디자인을 어떻게 하면 잘 하냐고 물어보셨고 저는 피그마를 추천해 드렸습니다.

디자인에 대한 부담감을 충분히 해소할 수 있기에 다음에 기회가 된다면 스터디를 진행하겠다고 했습니다.

요즘은 디자이너가 아니지만 디자인하기 쉬운 방법들이 많이 생겼습니다.

얼마 전에는 미리캔버스에 관련된 강의를 하면서 많은 분들이 디자인에 대해서 어려움을 많이 해소하고 시간적으로 적게 투자해서 마음에 드는 디자인을 할 수 있는 게 너무 신기하다고 합니다.

그리고 UX/UI 디자이너를 위한 피그마 책이라고 되어 있지만 디자인이 약간 개발자들이나 디자인을 못하시는 분들에게 충분히 디자인에서 개발 전달까지 가능한 좋은 프로그램이라고 생각합니다.

제 주변에는 앱 개발을 하시는 분들이 몇 분 계십니다.얼마 전 그분들 중에서 한 분이 코딩보다 디자인하는 것에 너무 어렵다는 말을 하시면서 저보고 디자인을 어떻게 하면 잘 하냐고 물어보셨고 저는 피그마를 추천해 드렸습니다.디자인에 대한 부담감을 충분히 해소할 수 있기에 다음에 기회가 된다면 스터디를 진행하겠다고 했습니다.요즘은 디자이너가 아니지만 디자인하기 쉬운 방법들이 많이 생겼습니다.얼마 전에는 미리캔버스에 관련된 강의를 하면서 많은 분들이 디자인에 대해서 어려움을 많이 해소하고 시간적으로 적게 투자해서 마음에 드는 디자인을 할 수 있는 게 너무 신기하다고 합니다.그리고 UX/UI 디자이너를 위한 피그마 책이라고 되어 있지만 디자인이 약간 개발자들이나 디자인을 못하시는 분들에게 충분히 디자인에서 개발 전달까지 가능한 좋은 프로그램이라고 생각합니다.

UX/UI 디자이너를 위한 실무 피그마라고 제목이 되어있지만 앞에서 언급한 것처럼 개발자나 일반인들에게도 충분히 권해드리고 싶을 정도로 공부해 보신다면 좋을 듯합니다.

어느 책과 마찬가지로 실습 파일 다운로드를 제공하고 있고 또한 작가의 추가적인 디자인 샘플을 볼 수 있고 활용할 수 있기에 꼭 확인해 보시길 바랍니다.

이런 좋은 디자인 샘플을 직접 받아서 본인에 맞게 수정해서 충분히 활용할 수 있기에 피그마에 대한 활용도를 충분히 높을 수 있을 것입니다.

\

전반적인 내용은 크게 2가지로 분류됩니다.

전반부는 피그마에 대한 공부를 하시고 후반부는 여러 가지 샘플들을 제작할 수 있기에 전반적인 피그마에 대한 공부를 하실 수 있습니다.

전반부 Part 01 피그마 활용하기와 후반부 Part 02 피그마로 디자인하기 입니다.

참고로 초반 내용이지만 피그마의 인기가 어느 정도인지 알 수 있습니다.

UI, 핸드오프, 디자인 시스템 활용에서 1위를 차지하는 피그마입니다.

스케치이나 XD도 예전에 공부를 했지만 피그마가 이 정도인 줄은 이번에 알게 되었습니다.

중간마다 Tip으로 작가님의 피그마 활용 노하우를 알려줍니다.

또한 디자인 노하우는 피그마를 운영하면서 필요한 디자인에 대한 다양한 노하우를 설명하고 있습니다.

이 내용 또한 중요한 부분이기에 꼭 정독하시길 바랍니다.

피그마는 아직까지 한글 지원이 없습니다.그래서 각 메뉴에 대해서 친절하게 설명을 하고 중간에 잠깐 항목에서는 추가적인 내용을 다루고 있습니다.

피그마는 아직까지 한글 지원이 없습니다.

그래서 각 메뉴에 대해서 친절하게 설명을 하고 중간에 잠깐 항목에서는 추가적인 내용을 다루고 있습니다.

어느 정도 학습이 되면 중간마다 [실습]이라는 코너가 있습니다.

[실습]을 통해서 방금 배운 피그마 내용을 복습하면서 학습 증진에 도움이 많이 되었습니다.

[실습]을 통해서 방금 배운 피그마 내용을 복습하면서 학습 증진에 도움이 많이 되었습니다.

후반부 디자인하기에서는 각각의 시작 부분에서 예제 설명으로 시작합니다.그래서 우리가 디자인하는 것이 어떤 것이고 전체적인 설명으로 목표에 대한 숙지하여 실습에 일관성에 도움을 주고 있습니다.

후반부 디자인하기에서는 각각의 시작 부분에서 예제 설명으로 시작합니다.

그래서 우리가 디자인하는 것이 어떤 것이고 전체적인 설명으로 목표에 대한 숙지하여 실습에 일관성에 도움을 주고 있습니다.

전체적인 레이아웃도 꼭 숙지하시길 바랍니다.결국 디자인은 레이아웃이 중요한 사항입니다. 전체적인 레이아웃도 꼭 숙지하시길 바랍니다.결국 디자인은 레이아웃이 중요한 사항입니다.아무 생각 없이 지나갈 수 있지만 레이아웃이야 말고 디자인의 기본이기 때문입니다.전체적인 레이아웃도 꼭 숙지하시길 바랍니다.결국 디자인은 레이아웃이 중요한 사항입니다.아무 생각 없이 지나갈 수 있지만 레이아웃이야 말고 디자인의 기본이기 때문입니다. ​전체적인 레이아웃도 꼭 숙지하시길 바랍니다.
결국 디자인은 레이아웃이 중요한 사항입니다.아무 생각 없이 지나갈 수 있지만 레이아웃이야 말고 디자인의 기본이기 때문입니다.

그리고 컬러를 결정하는 것도 체계적으로 설명하고 있기에 숙지하시면 디자인뿐만 아니라 다양하게 활용하실 수 있습니다.

피그마로 디자인 완성하면 끝이 아닌 개발자에게는 시작이 됩니다.

앱 개발에서는 디자인이라는 뼈대를 만들면 움직이게 하고 데이터를 운영할 수 있는 코딩 작업이 시작하게 되는데요.

단순한 디자인을 넘기는 것이 아니라 개발에 도움이 될 수 있게 정리(?) 해서 넘기기 때문에 중요한 부분입니다.

디자인 에셋 내보내기를 잘 숙지해야 고생해서 디자인을 한 내용을 개발에서 문제가 생기면 손이 많이 가기 때문에 디자인이면서 개발자의 마음으로 디자인하고 export 하시면 다양한 협업에서 크게 도움을 되실 겁니다.

아까도 스케치, XD, 피그마를 공부해 봤지만 이번에 공부를 하면서 느낀 점은 피그마로 정착해야겠다는 마음이 들었습니다.

다양한 기능과 빠른 업데이트와 다른 프로그램들은 가격이......^^;

좋은 프로그램을 알게 되고 제가 하는 일에 활용할 생각을 하면 약간 흥분이 되는데...

이번에도 그런 기분이 들었습니다.

여러분들도 잘만 활용하면 다양한 것에 활용할 수 있기에 한번 공부해 보시길 바랍니다.

한빛미디어 <나는 리뷰어다> 활동을 위해서 책을 제공받아 작성된 서평입니다.

다양한 프로토타이밍 툴이 존재합니다. 프로토타이밍 툴을 가지고 실무를 하다 보면 자신과 가장 잘 맞는 툴이 있고 새로운 툴을 배우고 싶은 사람들이 많을 거로 생각합니다.

이번에는 프로토타이밍 툴로 꾸준히 주목받고 있는 피그마 관련 UX/UI 디자이너를 위한 실무 피그마 저서를 소개합니다.

우선 피그마는 웹 기반 브라우저로 설치가 필요 없는 프로토타이핑 툴인데요. 인터넷 환경 잘 갖춰져 있으면 언제든지 사용이 가능하며, 운영체제와 상관없이 사용이 가능한 장점이 있습니다.

또한, 피그마의 큰 장점으로 동시 작업이 가능한 점인데요. 동시 작업 됨으로써 한 프로젝트를 여러 사람이 동시에 작업하고 수정할 수 있습니다. 실시간으로 상대의 마우스 커서가 어느 지점에 있었는지 확인이 가능해 협업 업무에 효율적입니다.

다양한 장점이 있는 피그마를 배우고 싶은 디자이너, 기획자, 개발자 등을 위해 실무자의 경험담이 생생하게 담겨 있는 UX/UI 디자이너를 위한 실무 피그마 저서는 피그마의 장점에 대한 설명과 기본 개념, 프로젝트 실습에 대한 내용을 담고 있습니다.

전체적으로 이번 UX/UI 디자이너를 위한 실무 피그마은 1부 피그마 기능, 2부 실습 프로젝트로 두 개 영역으로 나눠 피그마에 대해 자세하게 설명하고 있습니다.

UX/UI 디자이너를 위한 실무 피그마은 첫 시작부터 매력인데요. 피그마는 무엇이며 사람들이 피그마를 선택하는지 이유를 디자이너의 타임라인 즉 하루를 보여주면서 피그마의 활용에 대해 친근하게 설명해줍니다.

중간마다 나와 있는 ‘디자인 노하우’ 부분에서는 디자이너로서 알고 있어야 하는 지식, 실무에서 피그마에 대한 생각 등 말 그대도 저자가 경험한 디자인의 노하우들이 알차게 담겨 있습니다.

1부에서는 피그마 시작하기, 그래픽 스타일과 라이브러리, 정렬과 레이아웃, 컴포넌트와 오토레이아웃, 디자인 시스템과 협업 등 피그마의 기능에 대해 자세하게 담고 있습니다.

각 툴에 기능에 대해 스크린샷으로 보여주고 클레어 정 저자의 기능설명과 단축키를 활용할 수 있는 방법들을 쉽게 배울 수 있습니다. 또한, 각 장이 끝나는 마지막에는 기능에 대한 실습을 따라 함으로써 한번 더 기능에 집혀갈 수 있는 시간이 될 수 있습니다.

그리고 기능 설명 중간마다 ‘잠깐’, ‘TIP’ 코너가 존재함으로써 독자분들이 꼭 기억하고 실무에서 활용하기 좋은 팁이 있으며 또 하나의 비밀 노트 같은 피그마의 정보를 얻을 수 있습니다.

2부에서 다루는 실습에서는 1부에서 배운 기능들을 적극적으로 활용할 수 있는 실제 서비스 예제들을 담고 있는데요.

iOS 뉴스 앱 서비스를 디자인하면서 알아야 할 요소들과 UI에 관한 내용을 배울 수 있습니다. 이뿐만 아니라 안드로이드 스포츠 클래스앱, 반응형 패션 라이브 커머스, 디자인 시스템 등 실무에 적용 가능한 서비스 예제를 만날 볼 수 있습니다.

마지막으로 개발 전달과 코드 확인, 단축키와 플러그인에 대한 간략한 설명까지 제공해줌으로써 피그마에 대해 한 발 더 가까이 다가갈 수 있는 게 만들어 주는 UX/UI 디자이너를 위한 실무 피그마 저서입니다.

그리고 UX/UI 디자이너를 위한 실무 피그마 저서를 읽으면서 클레어 정 저자의 조그만 배려로 느껴지는 본문 아래 주석을 통해 본문을 더 깊게 이해할 수 있고 URL을 통해 그 정보에 대해서 더 딥하게 공부할 수 있는 계기를 만들어 주는 매력적인 저서입니다.

이번 UX/UI 디자이너를 위한 실무 피그마은 디자이너에게만 추천하는 저서가 아닌 피그마에 관해 공부하고 있는 기획자, 개발자들에게도 충분히 도움이 받을 수 있습니다.

피그마 예제파일 https://www.figma.com/@uidesignguide

디자인하면 어도비나 스케치 등의 프로그램을 쓴다고만 알고 있었는데, 요즘은 피그마를 UI/UX 디자인시 가장 많이 사용하더라고요. 기존에 디자이너들이 가장 많이 쓰던 스케치 파일을 그대로 가져와 바로 작업할 수 도 있고, 단축키에도 큰 차이가 없어서 피그마로 디자인툴을 변경한 회사들도 상당하다고 합니다.

기존에 사용하던 디자인 프로그램 툴들이 존재하는데도 피그마가 인터페이스 디자인 툴의 점유율을 빠르게 높여가는데는 그 이유가 있겠죠!? 책을 읽어보니 피그마에서 제공하는 파일 버전관리 기능! 30분마다 자동저장! 요런 장점들도 피그마가 시장에서 먹힌데에 한몫하지 않았나 싶었습니다 ㅋㅋㅋ 작업물은 소중하니까요...!

여튼, 피그마 가 무엇인지 이름만 들어본 저같은 학습자도 여러가지 유용한 툴을 자세히 배울 수 있고, 설명이 상세해서 따라하기 어렵지 않게 구성되어있는게 이 책의 장점! 1부에서 피그마 기능을 학습하고 2부에서 ios, 안드로이드, 반응형 웹 등 실습 레슨을 따라하면서 익히게 되어있어요.

2장에 있는 실습부분은 피그마 실습파일을 참고해서 만들어보면 되는데, 실습파일을 보면서 이해하기 쉽도록 도움말이 적혀있어요! 꽤나 상세하게 적혀있어서 1부 피그마 기능부분에서 100% 기능들을 다 익히지 못했더라도 따라서 직접 이렇게 만들어보면서 익히기도 좋았습니다.

​

IOS, 안드로이드, 반응형웹을 넘나드는 실습 예제들과 더불어 만들어진 디자인 예제를 개발로 전달하는 것 등 까지 실무에서 바로바로 쓸 수 있게 학습할 수 있어서 굿! UX/UI 디자이너를 꿈꾸거나 개발시 디자인에 좀 더 신경쓰고 싶은 개발자들에게 두루두루 한번 읽어보면 좋은 도서같습니다.

** 본 리뷰는 한빛미디어 <나는 리뷰어다> 리뷰어 활동으로 도서만을 제공받아, 리뷰어의 주관적인 견해로 작성 된 리뷰입니다. **

[도서 소개]

디자인 시스템에서 개발 전달까지, 한 권으로 배우는 피그마 실무!

UX/UI 디자인 실무는 학교에서 배우기 어려워 온라인 클래스의 도움을 받는 실정이다. 이런 점을 감안하여 다른 튜토리얼 책에서는 볼 수 없는 현업에서의 디자인 시스템, 개발 전달 과정을 자세히 기술하여 실무를 전달하려 노력했다. 이 책은 두 부분으로 나누어 1부에서는 피그마 기능, 2부에서는 실습 프로젝트를 다룬다. 각 장의 레슨을 따라 하면 자연스레 피그마 사용 방법을 익힐 수 있다. 디자인 커뮤니티에서 받은 도움을 이 책에 녹였으니 새로운 디자인 자산을 축적하는 기회로 삼을 수 있을 것이다.

[목차]

PART 1 피그마 활용하기

CHAPTER 1 피그마 시작하기

CHAPTER 2 그래픽 스타일과 라이브러리

CHAPTER 3 정렬과 레이아웃

CHAPTER 4 컴포넌트와 오토레이아웃

CHAPTER 5 디자인 시스템과 협업

PART 2 피그마로 디자인하기

CHAPTER 6 iOS 뉴스 앱

CHAPTER 7 안드로이드 스포츠 클래스 앱

CHAPTER 8 반응형 패션 라이브 커머스

CHAPTER 9 디자인 시스템

[대상 독자]

-  실무 디자이너, 학생 디자인에 관심이 많은 개발자

[주요 내용]

- 스케치 프로젝트 가져오기 /환경 설정

- 벡터 / 스마트 셀렉션 /오토레이아웃

- 콘스트레인트 / 레이아웃 그리드

- 컴포넌트 / 라이브러리 /프로토타입

- 개발 전달 / 코드 확인 /버전 히스토리

- ios 뉴스 앱 / 안드로이드 스포츠 클래스 앱

[서평]

1부에서는 피그마 기능, 2부에서는 실습 프로젝트를 다룹니다. 각 장의 레슨을 따라하면서 자연스레 피그마 사용 방법을 익힐수 있습니다.

피그마 프로그램을 활용할 때 유용한 팁, 간단하지만 놓칠 수 있는, 하지만 주의가 필요한 다양한 팁이 가득 담겨 있습니다.

피그마에 대한 자료를 대부분 인터넷과 유튜브에서 확인했어야 했는데 이 책을 통해 피그마의 기능과 예제를 통해 활용할 수 있는 방법에 대해 배울 수 있어서 좋았다. 

특히, 개발자에게 소스를 전달하기 위해 필요한 부분을 별도의 페이지를 할당하여 설명한 부분이 개발자인 나에게 꼭 필요한 부분이라 많은 참고가 되었다.  

그리고 개발 전달시에 생기는 문제나 플러그인 소개 부분이 마음이 들었고 프론트엔드 개발자도 한 번 읽어 보면 좋을거란 생각이 듭니다.

 "한빛미디어 <나는 리뷰어다> 활동을 위해서 책을 제공받아 작성된 서평입니다."

프론트엔드 개발 작업을 하다보면 디자이너로부터 홈페이지 디자인을 전달받습니다. 제가 일했던 디자이너 분들은 모두 포토샵으로 디자인 작업을 하셨습니다. 이번에 한빛미디어에서 나온 “UX/UI 디자이너를 위한 실무 피그마”를 읽고 나니 만약 피그마라는 편리하고 현대적인 디자인 툴을 사용하는 디자이너를 만났다면 작업을 얼마나 편리하고 빠르게 작업할 수 있었을까 라는 생각을 해보았습니다. 요즘은 디자이너 없이 혼자 UX/UI 디자인까지 해야 하는 프로젝트들이 생기는데 이 책의 챕터들을 학습하면 혼자서도 충분히 수준 높은 디자인을 할 수 있게 됩니다.

책의 특징으로는 피그마 프로그램 각 기능에 대해 스크린샷과 설명을 빠짐없이 넣어주셨다는 것 입니다. 옵션의 세세한 부분까지 설명해주기 때문에 피그마를 사용하다가 궁금한게 생기면 사전처럼 찾아볼 수 있는 책으로 활용도가 높다고 할 수 있겠습니다. 또한 챕터에서 학습한 내용을 실습할 수 있게 준비되어 있어 기능들을 익히는데 큰 도움이 됩니다. 저자의 디자인 노하우를 중간중간 넣어주었기 때문에 디자이너로써 가져야할 특급 정보들을 얻게 됩니다. 웹 디자인 뿐만 아니라 안드로이드, iOS 앱을 피그마로 디자인해보는 예제가 있어 앱 디자인 경험도 해볼 수 있어 좋았습니다.

"한빛미디어 <나는 리뷰어다> 활동을 위해서 책을 제공받아 작성된 서평입니다."

그리고 시대에 부응하지 못하지 못해 지금은 많이 사용하지 않는 쿽익스프레스도 생각이 나네요.

웹과 함께 모바일앱이 대세가 되면서 기존에 포토샵에 플러그인 형태로 보조적으로 운영되던 디자인툴들은

앱디자인에 특화된 스케치가 각광을 받았습니다.

다만 스케치는 맥os에서만 동작하기때문에 이거때문에 윈도우 PC를 사용하던걸 비싼 맥장비로 바꾸기는 선뜻 내키지 않았죠.

가격도 가격이지만 윈도우 사용자에게 있어서의 불편함일겁니다.

그런던차에 어도비가 가만 있을 수 없죠. 어도비XD ADOBE XD 라는 프로그램을 베타 서비스하기 시작했고

오랜기간에 걸쳐 이제는 정식버전이 조금씩 점유율을 높여가고 있습니다.

하지만 디자인 시장도 이제 독과점이 될 수 없을터 피그마가 최근에 많은 사용자층을 높여가고 있습니다.

그래서 이번에 소개할 책은 UX UI 디자이너를 위한 실무 피그마 Figma 입니다.

파트1은 처음 접하는 피그마의 기능을 학습하면서 기본기를 익히고 여러 메뉴, 특징들을 따라하게 됩니다.

유용한 팁은 따로 #TIP 이라는 박스형태의 문단으로 상세하게 알려주며

#잠깐 이라는 부분에서는 책의 학습과정 내내 곳곳에서 힌트를 줍니다.

아무래도 어도비 포토샵에 비해 광대한 기능보다는 정말 UX UI 디자인에 최적화된 프로그램이다보니

아마도 그냥 영어(ctrl + c)로만 나열해 표기해 문장내에서 눈에 잘 안띄던 문제 아닌 요구를 반영한듯 싶네요.

그런데 최종버전전의 버전별 파일은 그렇다치고 최종 결과 파일이라고 보냈던게 계속 알까기를 합니다.

최종, final, 최종_최종, 최종_최종_최종

정말 미칠 노릇이죠. 아마 현업에서 디자인하시는 분들은 공감하실거에요.

간혹 마지막 버전의 파일이 아닌 바로 이전 버전으로 작업하다가 프로젝트에서 문제가 생기는 경우도 종종 있었죠.

그래서인지 피그마 Figma 에서는 파일버전 관리를 위한 히스토리 기능이 제공되서

"한빛미디어 <나는 리뷰어다> 활동을 위해서 책을 제공받아 작성된 서평입니다."

책을 읽기 전에

최근 몇 년 사이 피그마는 IT 업계에서 가장 핫한 디자인 도구가 되었습니다. 트렌드에 편승하기 위해 시간이 날 때 피그마를 공부할 계획이었는데, 마침 관련 도서를 제공받게 되어 기쁜 마음으로 독서를 시작했습니다.

트렌디한 도구에 맞는 트렌디한 디자인

기존의 디자인 툴 도서들은 사용법이나 기능 설명에는 충실하지만, 막상 예제로 제시하는 디자인이 트렌드에서 벗어난 경우가 종종 있었습니다. 하지만 이 책은 11월에 출간된 따끈따끈한 신간이라서 그런지, 드리블 피드에서나 볼 법한 미려한 디자인을 예제로 제공하고 있습니다.

실제 앱 디자인 예제

피그마의 다양한 컴포넌트와 단축키, 유용한 기능들을 설명한 뒤에는 안드로이드와 iOS 앱 예제 디자인을 처음부터 작성하는 과정을 소개합니다. 단순히 근사한 음식과 수저만 제공하는 것이 아니라, 떠먹는 방법까지 상세하게 알려주는 점이 좋았습니다.

안드로이드, iOS, 반응형 웹을 아우르는 구성

단순히 보편적인 레이아웃을 작성하는 방법뿐만 아니라, 각각의 플랫폼에 맞는 화면 구성과 비율 등을 자세한 예제로 설명하고 있어 실제 업무 환경과 더 가깝다는 느낌을 줍니다.

피그마에 대한 자료를 대부분 인터넷과 유튜브에서 확인했어야 했는데 이 책을 통해 피그마의 기능과 예제를 통해 활용할 수 있는 방법에 대해 배울 수 있어서 좋았다. 특히, 개발자에게 소스를 전달하기 위해 필요한 부분을 별도의 페이지를 할당하여 설명한 부분이 개발자인 나에게 꼭 필요한 부분이라 많은 참고가 되었다.

이 책은 피그마가 어떤 기능을 가졌는지, 수록된 예제를 따라해보며 피그마 툴의 기본기를 다지게해준다. 또한 피그마가 실제 업무에 활용된다면 “이처럼 사용•활용 될 수 있다”를 <피그마를 활용한 디자이너의 하루>라는 주제를 통해 시각적으로 보여주며 책을 보는 이들의 이해를 돕는다. “실제 업무에 이렇게 활용하면 되는구나”라며 감을 잡게 도와준다. 스케치나 XD를 해왔던 사람들은 피그마를 어렵지 않게 학습할 수 있다. 초보자라고 피그마에 대해 어렵지 않게 배울 수 있는데 그 이유는 저자가 피그마 기초를 자세히 설명하기 때문이라 생각한다. 동시에 같이 학습할 예제들은 따라 만들어 보고 싶은 마음이 드는 요즘 스타일의 예제가 가득하다. 심플하고 가독성 좋은 예제들로 구성되어 있다. 간단한 듯 보이지만 텍스트들의 강약을 잘 사용하여 UI디자인하는 것이 제일 어렵다고 생각한다. 텍스트들의 강약으로 화면을 지루할 틈 없이 UI를 구성한 디자인을 따라해보며 저자의 센스있는 감각을 익힐 수 있다.

UX/UI 디자이너를 위한

실무 피그마

디자인 시스템에서 개발 전달까지

클레어 정 / 한빛미디어

UX/UI 디자인 초보 실무자

현장에서 다양하게

활용될 꼭 필요한 책으로 추천한다.

학교에서 배우기 쉽지 않는 UX/UI 디자인이라 할 수 있다. 현장에서는 많은 UX/UI 전문가를 필요로 한다.
UX/UI 디자인 실무는 학교에서 배우기 어려워 온라인 클래스의 도움을 받는 실정이다.

이런 점을 감안하여 다른 튜토리얼 책에서는 볼 수 없는 현업에서의 디자인 시스템, 개발 전달 과정을 자세히 기술하여 실무를 전달하려 노력했다.

이 책은 두 부분으로 나누어 9장으로 구성

1부에서는 피그마 기능,

2부에서는 실습 프로젝트를 다룬다.

부록 A 개발전달과 코드 확인

부록 B 단축키와 플러그인

각 장의 레슨을 따라 하면 자연스레 피그마 사용 방법을 익힐 수 있다.

디자인 커뮤니티에서 받은 도움을 이 책에 녹였으니 새로운 디자인 자산을 축적하는 기회로 삼을 수 있을 것이다.

실무에 적용할 방법을 따라가며 실습할 수 있도록 단계별로 잘 설명하고 있다.

이제 UX/UI 디자인에 대한 학습을 쉽게 할 수 있는 길잡이를 만나게 되었다.

저자 클레어 정은 독학으로 스케치를 익히고 UX/UI 디자인 세계에 입문하고, 스타트업 초기 멤버로 시작하여 인하우스를 거치며 배우고 다양한 서비스와 실무 경험을 하였다.

저자의 노고에 감사한다. 클레어 정과 한빛미디어는

지속적으로 실무에 적용된 UX/UI 작품을 추가하여 ‘UX/UI 디자이너를 위한 실무 피그마’를 글로벌로 널리 쓰임 받는 UX/UI 디자이너 길잡이로 발전시켜 주기를 기대한다.

uidesignguides.com

"한빛미디어 <나는 리뷰어다> 활동을 위해서 책을 제공받아 작성된 서평입니다."

[ 선택 이유 ]

프론트엔드 개발을 하다가도 가끔씩 아이콘, 디자인을 해야 할 때가 있습니다. 그때마다 UI팀에 요청하는 것도 시간이 걸리고, 사이드 프로젝트일 때 어쩔 수 없이 아이콘이나 사진 등을 인터넷에서 들고 와야 하는 불편한 상황이었습니다.

그래서 디자이너 친구에게 디자인툴을 배우려고 하고 있었는데, 그전에 피그마 책을 읽으면 좋겠다는 생각을 했습니다. 그런 와중에 마침 길벗 책에 있길래 냉큼 신청했습니다.

[ 본문 ]

저같은 디자인 초보자도 읽기 쉽게 구성이 되어있습니다.  단락 사이사이에도 Tip도 있어서 실무에서 쓸만한 지식도 나오고또 각각의 버튼에 대한 설명이 상세하게 나와있어 시간 들여 읽으면 딱 좋을 거 같습니다.그래서 어젠 직접 해보지 안 보진 않고 책만 쭉 읽었는데 피그마에 대한 기본적인 지식을 습득하게 좋은 책이었습니다.오늘은 직접 하나씩 써보며 익혀봐야겠습니다.책을 읽고 난 후에 피그마에 대해 관심이 생겨 좀 더 조사해봤습니다. 찾아보니 컴공 출신 미국 개발자 2명이 웹에서 동작하는 통합디자인 툴을 지향하는 목적으로 만들었다고 하더군요.그리고 기존의 강자들을 이기기 위해 선택한 전략은 바로 다른 디자인 툴, 협업 툴과의 콜라보입니다. 그래서 다양한 툴의 데이터, 파일을 편리하게 import를 할 수 있고, 또 웹 기반이다 보니 어디서든지 쉽게 접근하고 공유할 수 있다는 장점이 돋보입니다.다만 웹 기반이긴 하지만 웹 기술의 제한으로 모든 기능을 사용하려면 직접 다운로드해야 한다고는 하는데 아직 저한테 웹으로만 해도 충분한 기능이긴 합니다.피그마를 익혀서 하루빨리 아이콘도 머릿속에서 말고 현실로 끄집어내고, 간단한 기획문서도 쉽게 뽑아낼 수 있는 그런 프론트 엔드 개발자가 되면 좋겠습니다.

p.s 실제 책을 1회독 한후에 프로젝트에 쓸만한 아이콘을 만들어봤습니다. 생각보다 간편한 툴이었음에 놀라고 얇은 책이지만 내용이 알찬것에 감탄했습니다.