디자인 TIP (KO)23 피그마 꿀팁: 'Mockup Library' 플러그인 사용해 피그마로 목업하기 예전에는 정말 포토샵을 많이 썻는데, 프로그램이 무겁기도 하고 키려면 시간이 좀 걸려서 번거롭기도 해서 그런지 점점 디자인 외의 프레젠테이션 파일 작업도 피그마에서 하게 되는 것 같습니다. 하지만 포트폴리오 목업의 경우, 어쩔수 없이 포토샵을 사용했는데, 대부분의 디자인 파일이 피그마에 있다보니 목업을 위해서는 화면을 일일이 Export 해야하는 번거로움이 있었습니다. 오늘은 이러한 번거로움을 줄여줄 수 있는 피그마 Mockup Library플러그인을 소개하려고 합니다. Mockup Library플러그인을 사용하면 포토샵을 거치지 않고 다양한 perspective의 3D 목업도 가능하기 때문에 특히나 포폴을 위한 목업에 효과적입니다. 'Mockup Library'플러그인 사용방법 1. 먼저 피그마 Com.. 2023. 5. 13. 피그마 (Figam) 꿀팁 : Absolute positioning 정복하기 요소끼리 위/아래로 겹쳐서 표현해야할 때 CSS에서 주로 Absolute Position을 많이 사용해서 구현합니다. 이러한 Absolute Position을 피그마에서도 구현할 수 있는데요~ 생각보다 디자인할 때 이곳 저곳에서 사용할 일이 많아 소개해드리려고합니다 :) Absolute positioning 1.배경 요소에 Auto Layout 입히기 먼저 피그마에서 요소들을 Auto Layout (Shift + A)을 입혀줍니다. 특히 배경이되는 요소, 즉 아래에 깔릴 요소에는 무조건 오토레이아웃이 되어 있어야합니다. 하기 예시이미지에서는 Bar Graph BG가 배경이 되는 요소이고 Bar가 위에 띄울 요소입니다. 2. 피그마 우측 패널 상단에서 Absolute position 버튼 클릭 우측 패널에.. 2023. 4. 2. 피그마 (Figam) 기초 : 오토레이아웃(Auto layou) 정복하기 피그마를 활용해서 처음 디자인을 진행하는 입문자들에게 가장 낯선 기능 중 하나가 오토레이아웃(Auto layout)이라고 생각한다. 나 역시 포토샵에서 홈페이지와 이벤트 프로모션 디자인을 하다가, 본격적으로 앱기반 UIUX를 디자인하면서 지금의 피그마로 디자인 툴을 변환할 때 가장 어색했던 기능이 오토레이아웃(Auto layout)이었던 것 같다. 이번 포스팅에서는 피그마 초심자분들이 오토레이아웃(Auto layout)의 개념을 쉽게 이해하고 사용할 수 있도록 오토레이아웃(Auto layout)의 역할과 구성요소 그리고 생성방법 및 요소 설정방법을 소개하고자 한다. 1. 오토레이아웃(Auto layout)의 역할 오토레이아웃은 하나의 컴포넌트를 구성하는 작은 요소라고 할 수 있는데 컴포넌트에는 작은 버튼.. 2022. 12. 24. 피그마(Figma) 꿀팁 : 피그마에서 Themer 플러그인으로 라이브러리 변환하기 보통 스타일 가이드는 1개만 있을 것이라고 생각하지만, 작업을 하다 보면 프로젝트의 성격에 따라 스타일 가이드가 1개 이상이 되기도 한다. 특히 라이트 모드와 다크 모드를 모두 고려해 프로젝트를 진행한다면 스타일 가이드는 자연스럽게 라이트 모드와 다크 모드로 2개가 생성된다. 보통 라이트 모드 스타일 가이드를 활용해 먼저 디자인을 하고 다크 모드로 변환하는 작업을 진행하게 되는데 이때 컬러부터, 폰트 스타일 등을 일일이 변경해야 한다면 사실상 또 다른 하나의 프로젝트를 진행하는 것과 다를 바가 없을 것이다. 이를 위해서 피그마에는 라이브러리 스와이프 기능이 있지만, 이 기능은 한 번에 모든 프레임의 컬러를 다 변환해 버리기 때문에 한 프레임씩 감도를 맞추며 작업하기에는 적합하지 않다. 이럴 때를 위해서 .. 2022. 12. 11. 피그마(Figma) 꿀팁 : 그리드 생성 방법 및 라이브러리 스타일로 지정하는 방법 디자인의 기본이자 가장 중요한 뼈대인 그리드, 이러한 그리드를 Figma로 쉽게 설정하고 라이브러리에 저장해서 언제든 꺼내서 사용할 수 있다는 것을 알고 계신가요? 특히나 그리드는 매번 변경하기보다는 특정 양식을 정해놓고 사용하는 경우가 많기 때문에 피그마를 통해서 그리드 레이아웃을 설정하고 라이브러리로 관리하면 정말 작업 시에 정말 편리합니다. 이번 포스팅에서는 피그마에서 그리드를 설정하고 변경하는 방법과 평소 실무에서 자주 사용하는 PC의 기본 그리드 스타일인 Container형과 Fullscreen형과 모바일의 기본 옵션 값을 공유하려고 합니다. 또 한 번 설정한 그리드의 옵션 값을 매번 다시 지정하지 않아도 되도록 개인 라이브러리로 지정해서 사용하는 방법도 함께 소대 해 드리려고 합니다. 아래에 .. 2022. 11. 20. 피그마(Figma) 꿀팁 : 도형에 그라데이션 넣는 방법 피그마로 디자인을 하다보면 일러스트나 포토샵과는 조금 달라서 당황할 때가 있는데 그 중에 하나가 바로 그라데이션을 넣는 방법이였다. 일러스트나 포토샵은 그라데이션 기능이 별도로 나와 있어서 직관적으로 찾을 수 있었는데, 이미 어도비 프로그램에 익숙해진 후라 조금 해맸던 기억이 있다. 알고나니 굉장히 쉽게 그라데이션을 설정할 수 있었다. 1. 먼저 프레임안에 도형을 하나 그려주고 Fill값을 채워준다. 2. Fill값으로 들어 있는 컬러(네모 사각형 모양)을 클릭해 상세 컬러 지정 옵션을 열고 상단 Solid라는 옵션을 클릭한다. 3. Solid를 선택해보면 다양한 옵션들이 있는데 그 중에서 가장기본 그라데이션인 Linear을 선택한다. (Linear - 일반적인 선형 그라데이션, Radial - 동그란 .. 2022. 11. 11. 브랜드 네임 제작시 주의할 점 서비스의 시작은 무엇일까요? 어쩌면 네이밍 즉 이름을 짓는 것이 서비스의 첫 시작이 아닐까 합니다. 어떤 서비스던 이름을 통해서 가장 먼저 소비자에게 각인이 됩니다. 즉, 브랜드의 정체성을 대표하는 가장 중요한 요소 중 하나라고 할 수 있습니다. 그만큼 중요한 네이밍 제작 작업 전 체크리스트를 미리 확인하고 이에 맞춰 네이밍을 선정한다면, 단순히 개인의 취향에 의해서 네이밍이 결정되지는 않을 것입니다. 브랜드 아이덴티티에 영향을 미치는 만큼 명확한 가이드를 가지고 선정하는 것이 중요하기 때문에 저는 크게 비즈니스적인 측면과 디자인적 측면, 이렇게 2가지 체크리스트를 점검하며 네이밍을 진행하고 있습니다. 비즈니스적 체크리스트 브랜드 전체의 컨셉과 이미지를 포함하는가 동일한 네이밍으로 등록된 다른 앱은 없는.. 2022. 8. 8. 상업용 무료 폰트 사용하기 - 눈누 디자인 작업을 하다보면 필연적으로 폰트를 많이 사용하게 됩니다. 이 때 주의해햐할게 폰트라이센트인데요. 폰트는 잘 못 사용하면 법적인 문제로 커질 수 있기 때문에 회사에서 일하던, 프리랜서로 일하던 꼭!! 폰트가 상업적으로 사용 가능한지 확인하고 사용하는 습관을 들여야합니다! 대표적으로 많이 쓰시는 폰트가 구글의 noto 산스와 네이버의 나눔고딕입니다. 이 외에도 다양한 상업용 폰트를 확인하고 싶다면 아래 눈누 사이트에서 확인하시면 모든 상업용 폰트를 확인해보고 다운받을 수 있습니다. https://noonnu.cc/ 눈누 상업용 무료한글폰트 사이트 noonnu.cc 이렇게 타이핑 해서 각 폰트가 어떻게 보이는지도 확인 할 수 있습니다. 상업 프로젝트를 진행하는 디자이너이거나 개인 프로젝트를 진행.. 2022. 8. 7. [무료 이미지 사이트] 저작권 걱정없는 사이트 PEXELS 디자인 작업을 하다보면, 항상 저작권 문제가 신경쓰이죠?? 저작권이 안걸리는 사진을 쓰면 화질과 퀄리티가 떨어지고, 고화질 이미지는 저작권땜에 사용을 못하죠.. 오늘은 상업용, 개인용 모두 저작권이 무료인 사이트를 소개해 드리고자 합니다. http://www.pexels.com 무료이미지, 저작권 없는 이미지, 무료 이미지 사이트 | Pexels www.pexels.com PEXELS는 고화질 이미지를 무료로 상업적 목적과 개인 모두 사용할 수 있어 디자이너들에게는 너무너무 고마운 사이트입니다. 인물, 자연, 풍경 등 다양한 종류의 고화질 이미지들이 많이 있습니다 검색창에 원하는 종류의 이미지를 영문으로 타이핑하시면 됩니다. 저는 Mountain을 쳐보았는데요 산 관련 고화질 이미지가 엄청 많이 뜨네요 .. 2022. 8. 7. 이전 1 2 3 다음
