디자인 스킬 강화서적
피그마를 활용한 디자이너의 프로덕션 디자인 노하우와 팁
피그마: 한예종 디자인학과를 졸업하고 스타트업과 인하우스를 거쳐 현재는 글로벌 블록체인 서비스의 프로덕트 디자이너로 일하고 있는 저자는 자신이 알고 있는 디자인 노하우와 팁을 이 책에 담았습니다. 이 책에서는 디자인에 필요한 툴 중 하나인 피그마를 활용한 디자인 팁과 기능 학습, 주요 단축키 등 다양한 정보를 제공합니다.
또한, 이 책에서는 UX/UI 디자이너로서 필요한 디자인 스킬을 강화할 수 있는 내용이 담겨 있습니다. 피그마를 적극적으로 활용하면서 디자인 역량을 키워나갈 수 있는 실전적인 노하우를 알려줍니다.
이 책에서는 설명하는 모든 내용을 사진과 함께 제시하여 이해를 돕습니다. 또한, 피그마를 다른 무료 디자인 도구와 비교하여 설명하므로, 디자인을 처음 시작하는 분들도 쉽게 이해할 수 있습니다.
이 책에서 다루는 내용은 다음과 같습니다. 피그마를 사용하여 디자인 작업을 보다 효율적이고 효과적으로 할 수 있는 방법, 디자인 역량을 향상시키기 위한 디자인 팁, 피그마를 활용한 디자인 샘플 및 실전 연습, 주요 단축키 등 다양한 정보를 제공합니다.
아래는 이 책에서 다루는 내용을 요약한 표입니다.
| 내용 | 설명 |
|---|---|
| 피그마 기능 학습 | 피그마의 다양한 기능을 학습하고 활용하는 방법 |
| 디자인 역량 향상을 위한 팁 | 디자인 역량을 향상시키기 위한 팁과 노하우 |
| 디자인 실전 연습 | 피그마를 활용한 디자인 실전 연습과 샘플 |
| 주요 단축키 | 피그마의 주요 단축키와 사용법 |
위의 표를 참고하여 이 책에서 다루는 내용을 보다 쉽게 파악할 수 있습니다. 이 책을 통해 피그마를 보다 효율적으로 활용하고, 디자인 역량을 키워나갈 수 있습니다.이 작성됩니다.
피그마: 디자인을 쉽고 간편하게
피그마는 디자인을 쉽고 간편하게 할 수 있는 프로그램입니다. 일반 구매자를 대상으로 하는 팔리는 상세페이지 디자인만으로도 충분히 활용할 수 있습니다. 디자인을 어렵게 생각하지 마세요!
상세페이지를 만들 때 필요한 자료는 피그마에서 다운받을 수 있습니다. 이를 토대로 상세페이지와 콘텐츠 디자인을 예쁘게 꾸며야 합니다. 하지만, 디자인이 예쁘다고만 해서 판매가 되는 것은 아닙니다. 디자인뿐만 아니라, 제품에 대한 정보, 가격, 배송 등의 정보도 꼼꼼히 체크해야 합니다.
피그마는 디자인 툴 중에서도 다양한 기능을 제공합니다. 디자인 작업에 필요한 펜툴, 쉐이퍼, 그리드, 레이어 등 각종 디자인 요소를 제공하며, 협업을 위한 기능도 갖추고 있습니다. 또한, 피그마에서 제공하는 UI Kits와 Icons를 활용하면 보다 간편하게 디자인 작업을 할 수 있습니다.
피그마에서는 다양한 템플릿을 제공하며, 이를 이용하여 디자인 작업에 도움을 받을 수 있습니다. 예를 들어, 이커머스, 마케팅, 소셜미디어 등 다양한 템플릿을 제공하며, 상황에 맞게 선택하여 활용할 수 있습니다.
피그마는 이미 유튜브에서도 많은 정보가 제공되고 있습니다. 하지만, 영상이 짧아서 자세한 내용을 보기 힘든 경우가 있으니 주의해야 합니다. 따라서, 이곳에서도 영상관련 내용을 보충하여 제공할 예정입니다.
아래는 피그마에서 제공하는 기능 및 템플릿에 대한 내용을 정리한 표입니다. 대략적인 내용을 파악하고, 원하는 디자인 작업에 적용해보세요.
| 기능/템플릿 | 내용 |
|---|---|
| UI Kits | 웹 디자인 요소 제공 |
| Icons | 아이콘 제공 |
| 그리드 | 레이아웃 작업을 보조하는 그리드 제공 |
| 쉐이퍼 | 다양한 도형 제공 |
| 펜툴 | 자유롭게 디자인 가능한 펜툴 제공 |
| 이커머스 템플릿 | 온라인 쇼핑몰 상세 페이지 디자인 템플릿 |
| 마케팅 템플릿 | 디지털 마케팅 작업에 활용 가능한 템플릿 |
| 소셜미디어 템플릿 | 소셜미디어 콘텐츠 제작을 위한 템플릿 |
상세페이지 내용 작성 가이드
상세페이지 내용 작성을 위해서는 피그마를 이용하여 프레임을 생성하고 내용을 입력해야 합니다. 이때, ESC를 눌러 입력을 닫아주고 오른쪽 ‘Text’ 항목에서 글꼴과 크기를 설정할 수 있습니다.
프레임을 생성할 때는 왼쪽 상단 ‘#’모양의 도구를 선택하고 드래그하여 원하는 크기의 프레임을 생성해야 합니다. 이후, 오른쪽 ‘frame’ 항목의 W와 H 값을 넣어 프레임의 크기를 설정해 줍니다.
내용을 입력할 때는 왼쪽 상단 ‘T’모양의 도구를 선택하고 프레임을 클릭하여 내용을 입력합니다. 글꼴과 크기는 오른쪽 ‘Text’ 항목에서 설정하여 원하는 스타일로 작성할 수 있습니다.
또한, 상세페이지 내용 작성 시 색상 선택도 중요합니다. 이를 위해서는 오른쪽 ‘Fill’ 항목에서 원하는 색상을 선택할 수 있습니다.
위와 같은 방법으로, 피그마를 이용하여 상세페이지 내용 작성을 하면 보다 효과적이고 깔끔한 디자인을 구현할 수 있습니다.
아래는 상세페이지 내용 작성을 위한 가이드 표입니다.
| 단계 | 내용 |
|---|---|
| 1 | 왼쪽 상단 ‘#’모양의 도구를 선택하고 드래그하여 프레임을 생성합니다. |
| 2 | 오른쪽 ‘frame’ 항목의 W와 H 값을 넣어 프레임의 크기를 설정합니다. |
| 3 | 왼쪽 상단 ‘T’모양의 도구를 선택하고 프레임을 클릭하여 내용을 입력합니다. |
| 4 | 오른쪽 ‘Text’ 항목에서 글꼴과 크기를 설정합니다. |
| 5 | 오른쪽 ‘Fill’ 항목에서 원하는 색상을 선택합니다. |