피그마(Figma) 설치 및 실행 방법 01 - 피그마 소개 피그마는 무엇인가요? 피그마는 실시간 협업을 특징으로 하면서도 스케치와 같이 모던한 기능의 UI디자인 기능을 지원하는 UI디자인 프로그램입니다. UI디자인 프로그램이지만, 경우에 따라 다양한 디자인 프로그램으로 사용할 수 있습니다. 포토샵이나 XD, 스케치가 아닌 피그마를 왜 써야 하나요? 포토샵 포토샵은 기본적으로 UI디자인 프로그램이라고 보기가 힘듭니다. 비트맵 형식의 사진을 편집하는 용도가 기본적인 프로그램의 용도이며, 이외에 브러쉬 기능 등을 통해서 그림을 그리는 용도로도 활용되긴 하지만, UI디자인에 최적화된 기능을 제공하지는 않습니다. 굉장히 다양한 기능을 갖고 있기에 컴퓨터의 리소스를 매우 높게 차지하는 편인데, 이러한 부분은 다양한 화면의 디자인을 필요로 하는 UI디자.. 피그마(Figma) 무료 리소스 사이트 모음(템플릿, 아이콘, UI 키트) * 본 게시물은 해외 아티클을 한국어를 통해 더 널리 알리고자 하는 목적의 번역 포스트임을 알립니다. * 원본 게시물: The Best Free Figma Resources: Templates, Icons, UI Kits, and More (Envato tuts+)* 본 게시물은 2018년에 작성된 게시물이며, 최하단 번역자 추가 컨텐츠는 수시로 업데이트됩니다. 피그마는 2016년 출시 이후 강력한 디자인 플랫폼으로서 자리를 잡아 나가고 있습니다. 브라우저 기반의 프로그램으로서 업데이트의 어려움이나, 화면을 동기화하거나, 다른 팀원들과의 작업 상의 문제를 손쉽게 해결할 수 있는 특징을 지니고 있는 프로그램입니다. 특히 실시간 협업 기능은 피그마가 가장 자랑하는 기능 중 하나로서 여러 플랫폼에서 사용이 가.. 피그마(Figma) 기능 - 페이지 배경색 변경하기 일러스트레이터나 포토샵에서는 프로그램 설정 사항으로서 제한된 커스텀이 가능했던 아트보드 외 영역에 대한 배경색 변경이 피그마에서는 간단하고 또 자유로운 방식으로 수행이 가능합니다. 피그마는 아트보드를 포괄하는 전체 캔버스 영역을 페이지라고 표기하니, 이는 페이지의 배경색을 바꾸는 작업이라고 말할 수 있을 것 같습니다. 페이지의 배경색을 바꾸는 법은 아무 레이어도 선택하지 않은 상태를 두면 우측의 Design 패널에서 상에 페이지에 대한 속성을 변경할 수 있는 옵션이 표시되는데 해당 메뉴에서 배경색을 바꿔 주면 됩니다. 아래 스크린샷을 참고해서 응용하시기 바랍니다. [MacOS] 프리뷰 앱으로 이미지 사이즈 조절하기 이미지의 직접 편집보다 사이즈만을 수정하는 경우는 굉장히 빈번하게 발생합니다. 이런 경우 이미지 리사이징만을 위해 포토샵을 켜는 것도 다소 리소스를 과잉하는 것이라고도 볼 수 있습니다. 물론 포토샵을 통해서 이미지 리사이징을 하면 리사이징 방식에서부터 압축율 최적화 등에까지 상세한 설정이 가능합니다. 다만 인스턴트하게 이미지 리사이징만을 하는 경우라면 맥에서는 기본 이미지 뷰어 앱은 프리뷰에서 쉽게 할 수 있습니다. 이미지를 프리뷰 앱을 통해서 실행한 후 Tools 메뉴에서 Adjust Size... 메뉴를 확인하실 수 있습니다. 이 메뉴를 통해서 DPI까지 설정할 수 있는 등 비교적 상세하게 이미지 리사이징 옵션을 설정할 수 있습니다. 별도의 써드파티 앱을 설치하지 않고 이미지 리사이징을 간단하게 수행.. 간단한 웹스크롤애니메이션 라이브러리 AOS 기본적으로 스크롤 움직임에 따라 개체에 움직임을 주는 애니메이션의 경우 AOS 라이브러리를 사용하면 쉽게 애니메이션을 줄 수 있습니다. 제이쿼리 없이 사용되기 때문에 가벼운 편이라고 볼 수 있습니다. AOS (Animate on Scroll) AOS 소개 페이지 AOS AOS - Animate on scroll library AOS Animate On Scroll Library Scroll down michalsnik.github.io AOS 깃헙 페이지 michalsnik/aos michalsnik/aos Animate on scroll library. Contribute to michalsnik/aos development by creating an account on GitHub. github.co.. [VSCode] 화면을 나누어서 파일 열기 및 나누어 열려진 창(splited window pane)끼리 커서 이동하기 VSCODE는 2019년 기준 가장 많은 프론트엔드 개발자들이 사용하는 텍스트에디터라고 볼 수 있는 Visusal Studios Code의 약자입니다. 화면을 나누어서 파일 열기 화면을 나누어서 파일을 여는 방법은 기본적으로 가장 쉬운 방법을 파일을 오픈할 때 드래그를 통해서 원하는 공간에 배치하면, 자동으로 스플릿 뷰를 만들어서 배치할 수 있게 VS Code가 도와줍니다. 또 다른 방법은 Control+P를 통해서 파일을 서치해서 여는 경우나, 사이드바의 파일탐색기를 통해서 파일을 여는 경우 파일이 선택된 상황에서 Control+Enter를 하면 자동으로 오른쪽 공간에 스플릿 뷰를 만들어서 파일이 열리는 것을 확인하실 수 있습니다. 맥의 경우는 Control이 아닌 CMD를 눌러야 합니다. 나누어지 열.. 좋은 대시보드 디자인의 10가지 원칙 (2019) 본 포스트는 Saadia Minhas가 2019년 11월 27일에 작성한 10 Rules of Dashboard Design 포스트를 지식을 널리 알리기 위한 목적으로 번역하여 작성한 글입니다. 저작권 및 내용에 문제가 있을 시 연락을 주시면 그에 적절한 조치를 취하겠습니다. 왜 대시보드 디자인이 중요한가요? 대시보드는 정보를 시각화하는 역할을 합니다. 특히 복잡한 정보들의 집합체를 사용자들이 이해하기 쉬운 포맷으로 전달하는 것이 이것의 목적이라고 볼 수 있습니다. 사용하기 좋은 대시보드는 1) 명확해야합니다 좋은 대시보드는 요청된 정보를 명확하게 표현해야 합니다. 사용자가 대시보드를 볼 때 사용자는 5초 안에 대시보드의 용도를 확인할 수 있어야 합니다. 사용자를 몇 분간 머무르면서 대시보드의 용도를 확.. 피그마(Figma)가 앞으로 대세 디자인 프로그램이 될 수밖에 없는 이유 최근 UX Design Tool 2019 Survey에 따르면 피그마의 이용률 상승세가 뚜렷하며, 이제는 스케치의 절반에 달하는 점유율을 보이고 있다고 밝힌 바가 있습니다. 피그마 베타 시절부터 피그마를 어반젤리스팅하던 사람으로서 이같은 현상이 당연하게(?) 느껴지기도 하면서도, 한편으로 이같은 확장세는 여기서 멈추지 않고 더욱 그 영향력이 증대될 거라는 확신 아닌 확신을 갖게 되었습니다. 특히 단순히 UI디자인 영역에 국한되는 것이 아닌 '디자인 소프트웨어'로서, 과거 2000년대 초반의 포토샵의 위상만큼이나 대중적인 소프트웨어로 디자이너 뿐 아니라 일반인들에게까지 자리잡을 것이라고 생각합니다. 이번 글에서는 그 이유에 대해서 개인적인 견해 몇 가지를 밝히고자 합니다. 피그마의 미친 확장성 윈도우XP에.. 이전 1 ··· 20 21 22 23 24 25 26 ··· 33 다음
