Do it! 프로덕트 디자인 입문 with 피그마

IT 분야 디자이너, 기획자, 개발자를 위한 UI 디자인 실무 필독서

이상효 저자(글)

이지스퍼블리싱 · 2023년 01월 13일

책 소개

모바일 앱 UI 이론 + 실무 전 과정을 한 번에!
IT 분야 디자이너, 기획자, 개발자를 위한 UI 디자인 실무 필독서

‘디자인 업무 시간을 반으로 줄이고 싶다’ 혹은 ‘디자인 팀과 잘 협업하고 싶다’라고 고민한 적이 있다면 《Do it! 프로덕트 디자인 입문 with 피그마》를 꼭 읽어 보세요.
창업으로 디자인 커리어를 쌓기 시작한 이상효 저자가 UI 디자인을 다각도로 고민하며 현장에서 경험하면서 얻은 노하우를 이 책에 고스란히 담았습니다. 그리고 UI/UX 필수 도구인 ‘피그마’를 자유자재로 다루고 실무에서 현명하게 사용하는 방법을 자세히 설명합니다. 게다가 실제 디자인 팀과 함께 프로젝트를 진행하고 있다는 착각이 들 정도로 현실을 잘 반영해서 협업 팁까지 담았습니다.
사용자를 돕고 문제를 해결하기 위해 프로덕트 디자인, UI/UX의 기초부터 확실하게 알고 싶은 분, 그리고 실무 디자이너는 물론이고 협업이 중요한 기획자, 개발자 등의 직군에 해답을 제시하는 나침반이 되어 줄 것입니다.

작가정보

저자(글) 이상효

IT 회사에서 디자이너로 일하고 있습니다. 즐겁게 일하면서 잘 노는 삶을 지향하고, 배워서 남 주는 것을 좋아합니다.

[경력]
2021 - 현재 Product & Platform Designer at Wantedlab
2020 - 현재 Community Organizer at Figma Korea
2019 - 2021 Product Designer at Buzzvil
2017 - 2019 Graphic Designer & Co-founder at DICO

[주요 강의 이력]
2023 노트폴리오 ’프로덕트 디자이너 완성반'
2022 원티드랩 ‘프리온보딩 프로덕트 디자인 코스’
2022 노트폴리오 ’디자인시스템 워크샵’
2020 패스트캠퍼스 ‘피그마를 활용한 모바일 UI디자인’

[글 쓰는 공간]
www.sanghyo.xyz
https://brunch.co.kr/@artpen

[강의]
2020 패스트캠퍼스, 피그마를 활용한 모바일 UI 디자인 강의
2020 버즈빌, 사내 피그마 디자인 강의
2019 Always DODO, 피그마 꿀팁 코너 강의

목차

• _01장 UI 디자인 시작하기
  01-1 UI 디자이너의 일 13
  01-2 프로덕트 디자이너의 확장된 역할
  01-3 모바일 기기 디자인 환경 이해하기
  
  _02장 피그마와 가까워지기
  02-1 디자인 툴 피그마 이해하기
  02-2 피그마 시작하기
  
  _03장 피그마 핵심 인터페이스 익히기
  03-1 툴을 자유자재로 다루기 위한 9가지 기본 인터페이스
  03-2 컴포넌트로 한 차원 높게 복사, 붙여넣기
  03-3 UI 디자이너의 책장, 왼쪽 사이드바
  03-4 필요한 기능을 즉시 보여 주는 콘텍스추얼 툴
  
  _04장 피그마로 다채롭게 그려 보기
  04-1 오른쪽 패널 살펴보기
  04-2 오브젝트의 간격과 위치에 규칙 설정하기
  04-3 다채로운 그래픽 옵션 알아보기
  04-4 디자인 내보내기
  04-5 실시간 저장, 버전 관리 기능 써보기
  04-6 링크 만들어 공유하기
  
  _05장 새로운 서비스 디자인하기
  05-1 서비스 로고, 전략적으로 디자인하기
  05-2 앱 디자인의 길잡이가 되는 콘셉트 UI 잡기
  05-3 레시피 콘텐츠 UI 만들기
  05-4 콘셉트 UI 완성하기
  
  _06장 서비스 구체화하기
  06-1 고객을 위한 서비스 기획하기
  06-2 정보 구조에 맞게 화면 재구성하기
  06-3 기획을 화면에 담아 내는 와이어프레임 만들기
  06-4 서비스 UI 디자인하기
  06-5 사용자 경험을 구현하는 프로토타입 만들기
  
  _07장 디자인 시스템 만들기
  07-1 업무 효율성을 극대화하는 디자인 시스템
  07-2 디자인 시스템 기초 공사하기
  07-3 빠르게 컴포넌트 만들기
  07-4 기획자, 디자이너, 개발자를 위한 디자인 시스템 전파하기
  
  _08장 디자인 툴 밖에서 협업하기
  08-1 형상 관리로 협업하기
  08-2 디자이너를 위한 검색 방법
  08-3 개발자에게 효과적으로 디자인 전달하기
  
  찾아보기

추천사

• 김석희 (원티드랩 디자인플랫폼 팀 리드, 16년 차)

  실무 디자이너라면 꼭 알아야 할 내용이 담겨 있어요!”
  프로덕트 디자인이 무엇이냐고 질문했을 때 그 개념을 명쾌하게 설명할 수 있는 디자이너는 많지 않을 것입니다. 15년 넘게 이 일을 하고 있는 저도 누군가 ‘UI는 대체 뭔가요?’라고 질문하면 생각이 길어지거든요. 이 책은 UI가 무엇인지, 실무에서는 이를 어떻게 풀어내야 할지 고민하는 디자이너에게 꼭 필요한 내용을 담았습니다. 그뿐만 아니라 실무를 잘 해내려면 알아야 할 지식과 피그마를 활용한 ‘단단한 UI 제작 방법’을 실습 예제와 함께 설명합니다. 여러분도 이 책을 읽고 나면 프로덕트 디자인에 대해 명쾌하게 설명할 수 있을 것입니다.

• 길형진 (원티드랩 디자인플랫폼 팀 UX 엔지니어, 8년 차)

  디자이너에게 프로덕트 디자인의 해답을 제시하는 나침반과 같은 책!”
  요즘 디자인 정보를 얻기 위해 검색하다 보면 '요즘 디자인 분야의 정보 수준이 상향 평준화되어 있어서 정보 수준을 따라가기 어렵다'는 생각이 듭니다. 가끔은 전문가 입장에서도 '프로덕트 디자인에 대해 쉽게 설명한 자료는 없을까?' 이런 생각도 들고요. 이 책은 프로덕트 디자인이 무엇인지 쉽고 명쾌하게 설명합니다. 게다가 실무에서 무척 중요한 협업을 어떻게 해야 하는지 조언도 놓치지 않았습니다. 이 책이 프로덕트 디자인에 입문하는 사람에게도, 또 현업 실무 디자이너 모두에게 해답을 내어 주는 나침반이 될 수 있으리라 생각합니다.

• 캘빈 킴 (네이버 서비스 기획, 8년 차)

  “디자인 팀과 협업해야 하는 모든 직군에게 진주 같은 필독서!!”
  어느 회사든 서비스 기획자라면 디자이너와 협업하는 경우가 많습니다. 이때 업무를 원활하게 진행하려면 디자인 관련 자료를 자주 찾아봐야 하죠. 그런데 그런 자료들은 대부분 UI 관련 기술 표현이나 도구 사용에 관한 것들이 많아서 디자이너와 어떻게 협업해야 하는지 이해하기는 조금 힘듭니다. 하지만 이 책은 달랐습니다. 마치 실제 디자인 팀과 함께 프로젝트를 진행하고 있다는 착각이 들 정도로 현실을 잘 반영해서 구성했더군요. 본문 설명도 상세하고 내용도 실제 그대로였고요! 만약 ‘디자인 팀과 잘 협업하고 싶다’, ‘간단한 와이어프레임 정도는 센스 있게 그려 보고 싶다’ 이런 생각을 해봤다면 이 책을 강력히 추천합니다!

• 윤민희 (디자인 시스템 디자이너, 7년 차)

  “실무자에게 유익한 노하우가 담겨 있습니다!”
  실무를 처음 시작할 때 이 책을 먼저 읽었다면 얼마나 좋았을까요. 책을 한 장 한 장 넘길 때마다 마치 옆자리에 10년 차 디자인 선배가 있는 듯한 느낌을 받았습니다. 여러분도 이 책을 읽는다면 분명 같은 경험을 할 것입니다. 학부 시절에는 실무 분위기를 모르니 늘 막막하기 마련이니까요. 이 책에는 상효 쌤의 다양한 경험이 녹아 있습니다. 같은 지식이어도 인터넷에서 볼 수 있는 것과는 결이 달랐어요. 오히려 더 정확했습니다. 게다가 친절한 설명까지! 그리고 요즘 핫한 디자인 프로그램, 아니 이제는 넘버원 도구가 되어 버린 피그마의 활용 방법과 노하우가 세세하게 적혀 있습니다. 이제 막 디자인을 시작한 분들과 실무 디자이너 모두에게 이 책을 적극 추천합니다.

• 마현지 (당근마켓 프로덕트 디자이너, 5년 차)

  “UI/UX의 기초를 알고 싶고, 프로토타입을 직접 만들고 싶다면?”
  이 책에도 나와 있듯이 요즘 UX와 UI는 경계가 크게 허물어졌고, 이제는 디자이너뿐만 아니라 제품을 만드는 메이커 모두가 UX/UI를 이해하는 데 노력을 기울이고 있습니다. 사용자의 문제는 개발이든 디자인이든 모든 분야에서 해결해야 하는데, 이때 UX/UI가 가장 중요한 역할을 하기 때문입니다. 따라서 사용자를 돕고 문제를 해결하기 위해 UX/UI의 기초부터 확실하게 알고 싶은 분, 더 나아가 프로토타입을 직접 만들어 보고 싶은 분, 또는 디자이너는 아니지만 디자인 업무를 잘 이해하고 싶은 분이라면 이 책이 좋은 선택지가 될 것입니다.

• 조현아 (버즈빌 프로덕트 디자이너 & PM, 12년 차)

  “디자인 업무를 다각도로 고민해서 담은 저자의 꿀단지를 가져가세요!”
  10년 넘게 디자인 업무를 해오면서 ‘함께 성장하기 위해 자신이 잘하는 것을 다른 사람과 나눌 줄 아는 사람이 주변에 있는지’가 매우 중요하다는 것을 알았습니다. 이 책을 쓴 상효 쌤처럼 말이죠! 이 책을 보면서 ‘디자인 업무를 다각도로 치열하게 고민했구나’라는 생각을 많이 했습니다. 또한 디자인 전반에 걸친 실무 과정을 적절한 피그마 예제로 보여 준 점도 인상 깊었습니다. 꿀단지 같은 정보라 풀어내기 아까웠을 텐데, 이런 꿀팁을 기꺼이 나눌 생각을 해주신 상효 쌤께 감사 인사를 드리고 싶네요. 프로덕트 디자이너 직무에 관심 있는 분들에게 큰 도움이 될 책이라 적극 추천합니다. 모쪼록 이 책을 통해 우리나라 피그마 커뮤니티와 프로덕트 디자이너 여러분이 성장할 수 있기를 기원합니다!

출판사 서평

“10년 차 디자인 선배가 바로 옆에서 생생하게 알려 주는 경험을 맛볼 수 있는 책”
선배가 프로덕트 디자인을 명쾌하게 설명합니다!
이제는 디자이너뿐만 아니라 기획자, 개발자까지 제품을 만드는 메이커라면 모두 사용자 경험을 돕고 문제를 해결하기 위해 노력합니다. 이때 UI/UX가 가장 중요한 역할을 하는데, 이 책은 프로덕트 디자인과 UI 디자인이 무엇인지, 실무에서는 이를 어떻게 풀어내야 하는지 쉽고 명쾌하게 설명합니다.
저자인 이상효 쌤은 지금 하는 일과 전혀 상관 없는 ‘섬유 디자인’ 전공으로 시작해 현재 플랫폼 디자이너로 활약하며 피그마를 활용한 강의까지 하고 있습니다. 그 과정에서 겪었던 수많은 시행착오를 이 책에 모두 담았습니다.
프로덕트 디자이너로 실무를 처음 시작하거나 UI/UX의 기초부터 확실하게 알고 싶은 분이라면 이 책을 통해 저자의 오랜 실무 경험과 노하우로 프로덕트 디자인의 해답을 찾아보세요.
“피그마는 이제 디자인 직군에서 확고하게 자리 잡은 툴이죠!”
이 책과 함께 제대로 써보세요!
협업에 최적화된 피그마를 제대로 활용해 보세요. 피그마는 디자인 업무에 필요한 에셋을 효율적으로 관리하고 활용할 수 있습니다. 또한 협업을 위한 실시간 마우스 커서 공유, 의견 공유, 자료 공유 등도 매우 쉽게 할 수 있죠. 그런데 이런 좋은 기능을 제대로 쓰려면 인터넷 검색으로는 한계가 있습니다. 그래서 이상효 쌤이 피그마를 제대로 쓸 수 있도록 학습 가이드를 준비했죠.
이 책은 디자인 실무를 잘 해내려면 알아야 할 지식과 피그마를 활용한 ‘단단한 UI 제작 방법’을 실습 예제와 함께 설명합니다. 또한 이 책이 나오기 직전까지 피그마 업데이트를 꼼꼼히 확인해 반영했습니다. 이상효 쌤은 원고 집필할 때도, 담당 편집자와 일할 때도 피그마를 이용했으며, 그 과정에서 피그마는 실제로 협업에 최적화된 툴이라는 놀라운 경험을 했습니다.

새로운 서비스를 디자인하고 구체화하고, 만드는 방법, 협업하는 방법까지 이 책으로!
이 책을 그냥 ‘피그마를 알려 주는 책’으로 오해하면 섭섭합니다! 이 책은 UX/UI 필수 도구인 피그마를 자유자재로 다룰 수 있는 9가지 핵심 인터페이스 익히기부터 시작하지만, 절반은 프로덕트 디자인 실무 전체 과정을 상세하게 다루기 때문입니다. 새로운 서비스를 디자인하고, 경쟁사 로고를 살펴보고, 내 서비스의 로고를 디자인하고, UI 콘셉트를 구상하고 만들어 봅니다. 그뿐이 아닙니다. 기획자, 디자이너, 개발자와 더 잘 일하기 위해 디자인 시스템을 전파하는 방법과 개발자에게 디자인을 효과적으로 전달하는 방법도 다룹니다.
〉〉 이 책의 대상 독자 〈〈
- 학부생인데요, 프로덕트 디자인 직무에 관심이 생겼어요!
- 요즘 많이 쓰는 툴이라면서요. 피그마는 어떤 툴인가요? 궁금해요!
- 디자인 회사 취업을 준비하고 있어요, 나만의 프로덕트 디자인 포트폴리오를 갖고 싶어요!
- 옆 부서 디자이너와 협업하고 싶은데, 좋은 방법이 있나요?
- 실제 앱 서비스 출시를 앞두고 있어요. 디자인 업무를 어떻게 해야 할지 궁금해요!

기본정보

ISBN	9791163034421
발행(출시)일자	2023년 01월 13일
쪽수	304쪽
크기	188 * 258 * 19 mm / 785 g
총권수	1권
시리즈명	Do it! 시리즈

Klover 리뷰 (12)

[cs*****]

잘 읽겠습니다!!!

[jj******]

다른 피그마 관련 책보다 각 기능에 대해 잘 설명되어있어 타 프로토타이핑 툴 사용자라 하더라도 개념을 이해하기 좋습니다
또한 이론 및 실무에서의 프로세스도 잘 정리되어있어 도움이 많이 됩니다

[le******]

피그마에 숨겨진 새로운 기능들을 알 수 있어서 도움이 됬습니다.
아직 시간 여유가 없어서 많이 보지는 못했는데 do it에서 처음으로 출판된 피그마 교재인 만큼 내용도 알찰거라 믿음이 갑니다, 앞으로 웹페이지 디자인 시에 유용한 참고서가 될 거 같습니다.

----------------------------
몇 달 후 후기입니다.
반응형 웹페이지 디자인 시에 기본적으로 피그마에서 와이어프레임 설정해야되는 부분에 대한 내용이 아무리 이 책에서 찾아봐도 없어서 별로입니다.
결국 인터넷에서 그 내용을 찾을 수밖에 없었는데 다른 출판사 피그마 교재 구매할껄 후회됩니다.