아토믹디자인(Atomic Design) 방법론, 간단하게 이해하고 응용하기 체계화와 유지관리와 구현 상의 효율성 등의 이유로 컴포넌트 단위의 UX디자인이 각광받기 시작했고, 이는 디자인시스템이라는 형태로 이전까지 화면 단위로 보여지던 디자인의 산출물이 변화하고 있습니다. 이러한 변화는 디자인 분야에서만 나타나는 변화의 현상이 아닌 프론트엔드 개발 분야에서의 기술 변화도 비슷한 형태의 변화 흐름을 보여주고 있습니다. 리액트나 뷰, 앵귤러 등 모던 프레임워크들이 컴포넌트 별로 분리된 개발을 지원하는 것이 그러한 양상 중 하나라고 볼 수 있습니다. 이러한 배경 하에 주목받는 디자인 방법론 또는 개념으로서 '아토믹디자인(Atomic Design)'을 들 수 있습니다. 본 포스트에서는 아토믹디자인이라는 방법론의 간략한 범위 내에서 기본 개념을 파악하고 이를 응용할 수 있는 방법에 대해서.. 피그마(Figma) 기능 - 스타일(Styles) 관리하기 (색, 폰트 저장하기) * 본 기능 소개는 Figma 공식 유튜브 채널에서 제공하는 튜토리얼 강의(영어)를 기반으로 작성된 포스트이므로 실제 동영상으로 된 기능 소개 내용은 하단에 첨부된 유튜브 링크를 통해서 확인하시기 바랍니다. 색상이나 서체 등 반복적으로 사용되는 스타일 속성에 대해서 특정 속성을 지정하여 저장하고, 이를 다른 작업 때 바로 찾아서 적용할 수 있게 하는 Styles 지정 기능은 다른 디자인 프로그램에서도 유용하게 제공되는 기능이며 피그마에서도 이러한 기능을 지원하고 있습니다. 아래는 텍스트로 설명을 해 놓았지만, 가장 하단에 넣어 놓은 피그마 공식 튜토리얼을 동영상으로 한 번 보시면 더 쉽게 이해하실 수도 있을 것 같으니 동영상도 꼭 참고하시기 바랍니다. 특정 속성을 스타일로 지정하는 방법은 특정 속성을 선.. 피그마(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를 눌러야 합니다. 나누어지 열.. 이전 1 ··· 19 20 21 22 23 24 25 ··· 32 다음
