본문 바로가기
728x90

전체 글42

UI 디자이너가 많이 사용하는 툴 소개 (대세는 피그마) UI 디자이너들이 사용하는 툴은 다양합니다. 2022년까지만 해도 5가지 정도의 툴이 서로 경쟁했지만 2023년 부터는 피그마를 압도적으로 많이 사용하고 있습니다. 그럼에도 아직 현업에서는 다른 툴들을 사용하고 있는 회사들도 있으니 이들에 대해 알아보는 시간을 가지려 합니다. 각 툴은 각각 장점과 특징이 있으므로 본인이나 회사의 목적에 맞게 선택하여 사용하면 좋을 것입니다. 1. 피그마 (Figma) 피그마는 웹 기반 UI 디자인 및 프로토타이핑, 협업툴입니다. 클라우드 기반으로 웹 브라우저에서 바로 사용할 수 있으며, PC용 프로그램도 있으니 편하게 선택하면 됩니다. 부분 유료 툴이지만 개인이 사용하면 거의 무료에 가까운 점도 매력적입니다. 올인원 디자인 툴로서 다양한 기능을 하나의 툴로 쉽고 빠르게 .. 2024. 1. 4.
온라인 강의 사이트 모음 (유료, 무료) [ 유료 종합 강의 사이트 ] * 클래스101https://class101.net/ko CLASS101+ | 세상의 모든 클래스를 하나의 구독으로5300개 이상의 클래스로 일러스트, 공예, 코딩, 부업, 주식까지 세상의 모든 분야를 배워보세요.class101.net * 콜로소https://coloso.co.kr/ 콜로소 - 당신을 위한 실무교육 No.1. | Coloso.최고 전문가와 함께하는 평생시청 온라인 실무교육coloso.co.kr * 패스트 캠퍼스https://fastcampus.co.kr/ 패스트캠퍼스 [직장인 실무교육]프로그래밍, 영상편집, UX/UI, 마케팅, 데이터 분석, 엑셀강의, The RED, 국비지원, 기업교육, 서비스 제공.fastcampus.co.kr * 베어유https://w.. 2023. 12. 12.
피그마 단축키 모음 자주 쓰는 피그마 단축키 모음입니다. 보기 Windows Mac 메뉴 숨기기/보기 Ctrl + \ Cmd + \ 안내선 보기/숨기기 Shift + R Shift + R 기본 툴 Windows Mac 선택/이동하기 V V 텍스트 T T 원 O O 사각형 R R 프레임 F F 선택/그룹 Windows Mac 여러 요소 선택 Shift + 클릭 Shift + 클릭 색 선택 (아이드로퍼) I I 그룹/프레임 내 요소 선택 Ctrl + 클릭 Cmd + 클릭 전체 선택 Ctrl + A Cmd + A 그룹 Ctrl + G Cmd + G 그룹 해제 Shift + Ctrl + G Shift + Cmd + G 프레임으로 만들기 Alt + Ctrl + G Option + Cmd + G 커서 Windows Mac 요소 간격 .. 2023. 10. 10.
[피그마] 오토 레이아웃 사용하기 피그마에서 오토 레이아웃을 사용하는 방법에 대해 알아보겠습니다. 오토 레이아웃 알아보기 같은 스타일의 버튼을 여러 개 만드는 상황을 가정해 보겠습니다. 텍스트의 길이가 다를 경우 감싸고 있는 도형의 상하좌우 여백을 직접 재조정해야 합니다. 아마도 버튼마다 이 과정을 반복해야 하는 노가다를 해야 할 것입니다. 이때 오토 레이아웃(auto layout)을 사용하면 노가다 없이 쉽게 작업을 할 수 있습니다. 아래 그림의 오른쪽 버튼들처럼 텍스트의 길이에 따라 도형의 크기도 유동적으로 변하는 버튼을 아주 쉽게 만들 수 있습니다. 오토 레이아웃은 버튼 뿐만 아니라 리스트, 팝업 등 안에 들어간 콘텐츠에 따라 유연하게 레이아웃이 바뀌어야 할 모든 곳에 적용할 수 있습니다. 오토 레이아웃으로 뉴스피드 헤더 디자인하기.. 2023. 5. 27.
[피그마] 반응형 설계를 위한 리사이징에 대한 이해 리사이징(Resizing)이란? - 컨테이너 또는 아이템의 크기가 변화할 때 다른 요소의 크기도 같이 그에 맞춰 변화하는 것을 의미한다. 아이템 변화 → 컨테이너도 변화 : Hug Contents 컨테이너 변화 → 아이템도 변화 : Fill Contents 변화 없음(사이즈 고정) : Fixed Size (Fixed width, Fixed heights) 오토레이아웃이 적용되어 있는 컨테이너에 Shift+A를 눌러 오토레이아웃을 한번 더 적용하면 그 컨테이너는 컨테이너인 동시에 아이템이 된다. 이 때는 컨테이너와 아이템의 두 가지 속성을 다 가지고 있기 때문에 세가지 메뉴가 한꺼번에 뜨게 된다. 2022. 11. 28.
[피그마] 오토레이아웃의 구성요소 오토레이아웃이란? - 내부 콘텐츠에 따라 자동으로 변형되는 프레임 - 버튼이나 카드콤포넌트들의 내부 내용이 수정되어도 프레임의 사이즈를 자동으로 수정 오토레이아웃을 만드는 방법 - 오브젝트를 선택하고 Shift + A를 누르면 된다. 오토레이아웃을 만들면 왼쪽 레이어는 프레임으로 감싸지고, 왼쪽 디자인 툴에서는 오토레이아웃 메뉴가 활성화된다. 오토레이아웃은 컨테이너와 아이템으로 구성된다. 컨테이너는 아이템들을 전부 감싸는 공간이며, 컨테이너 안쪽의 오브젝트들을 아이템이라고 부른다. 오토레이아웃의 내부 공간을 Spacing(스페이싱)이라고 한다. 스페이싱은 오른쪽 디자인 툴에서 직접 수치를 입력하거나 붉은 표시 공간을 직접 드래그해서 변경할 수 있다. 오토레이아웃의 외부 공간을 Padding(패딩)이라고 .. 2022. 11. 20.
728x90

티스토리툴바