fullstack-study

베리어블 프로토타입  # number      # String

반응형 디자인   웹디자인에서 사용되는 그리드 시스템은 다양한 종류가 있으며, 각기 다른 목적과 디자인 스타일에 맞게 사용됩니다. # 그리드 종류 1. 단일 컬럼 그리드 (Single Column Grid)단일 컬럼 그리드는 가장 기본적인 그리드 형태로, 하나의 컬럼으로 구성됩니다. 주로 블로그 포스트, 기사, 또는 단순한 레이아웃에 사용됩니다.예시: 블로그 포스트 페이지2. 다중 컬럼 그리드 (Multi-Column Grid)다중 컬럼 그리드는 여러 개의 컬럼으로 구성되며, 텍스트와 이미지를 균형 있게 배치하는 데 사용됩니다. 주로 잡지 레이아웃이나 복잡한 텍스트 기반 레이아웃에 사용됩니다.예시: 온라인 잡지, 뉴스 웹사이트3. 모듈 그리드 (Modular Grid)모듈 그리드는 수평 및 수직 가이드로..

프로토타입 예제  1. 예제 처음과 마지막 사진 동일   텍스트 프레임 3개 겹침 1번 프레임만보이고 레이어 투명도0 또는 눈감기기      두개를 하나의 프레임으로 감싸기 컴포넌트 등록베리언트추가              # 다음 , 이전 버튼 추가1. 사진 3개, 텍스트 3개 준비   사진을 3개 나열하고 autolayout처리  텍스트 3개 내열 autolayout처리        프로토타입     프로토타입    프로토 타입

포토샵 기초 1 새로운 캔버스 시작 : p20 Name : 새 창의 이름 지정 Width : 작업창 너비와 너비 단위 선택 Height : 작업창 높이와 높이 단위 선택 Resolution : 이미지 해상도 지정 Color Mode : 색상 모드 지정 Background : Contents 바탕화면 색상 선택 이미지 확장자 : p25 psd, gif , jpg , png 1. 인터페이스 색상변경 [Edit]-[Preferences]-[Interface] 메뉴 선택 -> [Preferences]-[Appearance]에서 인터페이스 색상 변경 [Edit]-[Preferences]-[Workspace] -[open Documents as Tabs] [Edit]-[Preferences]-[Units & Rul..

피그마 유용한 플러그인  # 플러그인 설명 플러그인은 피그마의 디자인 생산성을 높여주는 대표적은 부가 기능입니다. 아이콘, 브래드 로고, 컬러, 더미 텍스트, 이미지제공, 누끼 이미지(배경이미지 삭제), 엑셀 작업 등 다양한 플러그인이 있으며 디자인 작업 시 플러그인을 활용하면 작업시간을 많이 단축할 수 있어 일의 능률을 높여줍니다.  플러그인은 프로그램을 별도로 설치하지 않아도 웹에서 바로 사용가능하며 반복 작업이 많은 경우는 사용자 인터페이스에 저장하는 것을 추천합니다.  # 플러그인 상단 도구 메뉴에서 Resources 메뉴를 선택합니다.탭 메뉴 중 중간에 있는 Plugins 탭을 선택합니다.Search all plugins의 검색창에 원하는 플러그인 명을 입력하고 검색을 합니다.     1. 이미..

오토 레이아웃 알아보기 오토레이아웃 정의오토 레이아웃은 각각의 요소를 프레임으로 묶어 요소 간의 일정한 간격을 자동으로 변경하는 피그마 기능입니다.오토 레이아웃을 설정하는 방법은 하나 또는 하나 이상의 요소를 선택한 후 마우스 오른쪽 버튼 클릭 [ Add auto layout ] 선택하거나 디자인 탭의 [ Auto layout ]에서 +를 클릭하면 됩니다. 오토 레이아웃은 프레임을 기반으로 작동하기 때문에 프레임이 아닌 일반 요소에 오토 레이아웃을 추가하면 자동으로 프레임이 생성됩니다. 오토 레이아웃은 각각의 요소를 프레임으로 묶어 요소 간의 간격을 자동 혹은 직접 수치 입력하여 변경합니다. 오토 레이아웃의 적용된 요소를 컴포넌트화 하면 디자인 작업물의 간격을 수정하거나 관리할 때 마스터 컴포넌트의 오토..

스타일 등록 및 편집 목차스타일 등록하기스타일 적용하기스타일 편집하기스타일 연결해제    스타일 등록 및 편집하기  스타일 등록이란? 스타일은 프로젝트에서 자주 사용하는 색상, 폰트, 효과, 그리드, 선 등을 등록해서 디자인 작업에 빠르게 적용하는 기능입니다. 색상이나 서체등을 스타일로 등록해 추후 수정 사항에 생겼을 때 등록된 스타일만 수정해서 스타일에 연결된 요소들이 한꺼번에 수정됩니다.  - 컬러 스타일에 등록할 컬러 팔레트를 프레임에 준비합니다  1. 등록할 색상을 선택하고 아래 1번을 클릭합니다.2. 컬러스타일 팝업창이 화면에 나타나면 아래 이미지의 2번을 클릭합니다.3. 스타일 이름을 작성합니다. 아래 이미지 3번 4. create style 버튼을 클릭합니다.  - 스타일을 만들려면 오브젝트..

Constraints 콘스트레인트   콘스트레인트 속성  * 콘스트 레인트 : 오브젝트의 위치값을 상하좌우로 고정하는 기능     콘스트레인트는 어떤 오브젝트의 위치값을 상하좌우에 강제로 고정하는 기능입니다. 콘스트레인트를 테스트 해보려면 프레임에 아무 도형이나 그리고 프레임을 드래그하여 사이즈를 바뀌어보면 됩니다. 프레임은 부모, 오브젝트는 자식 요소이며 부모가 움직을때 자식이 영향을 받습니다. 바깥쪽의 선을 클릭하면 각각 Top, Right, Bottom, Left 방향에 고정시킬 수 있습니다.피그마에서는 기본값으로  Left, Top에 고정되어 있습니다. Fix position when scrolling을 체크하면 스크롤해도 오브젝트가 같은 위치에 고정됩니다.  아래 예시를 확인해 보세요  1) 수..

variants 베리언트  Variants(베리언트) 기능은 디자인 시스템을 체계적으로 관리하고, 컴포넌트 간의 다양한 변형을 효과적으로 적용할 수 있게 해주는 기능입니다. 디자인에서 반복적으로 사용되는 컴포넌트에 여러 속성이나 상태를 적용해 상황에 맞게 다르게 보이도록 설정하는 데 매우 유용하고 프로젝트의 일관성을 유지하고, 디자인 프로세스를 단순화할 수 있습니다. 하나의 컴포넌트 그룹에 다양한 속성 변화를 적용하여 하나의 컴포넌트를 다수의 상태로 쉽게 변형할 수 있게 합니다. 예를 들어 버튼 컴포넌트를 "기본 상태", "활성화 상태", "비활성화 상태" 등으로 쉽게 나눠 사용할 수 있습니다.Variants는 일종의 '컴포넌트 집합'이며, 같은 구조를 가진 여러 상태를 하나의 그룹으로 묶어 디자인할 수..

프로토타입 구조와 예시  prorotype 프로토 타입이란 사용자 인터페이스(UI) 및 사용자 경험(UX) 디자인 작업을 돕기 위해 개발된 웹 기반 애플리케이션입니다. Figma는 그래픽 디자인, 웹 디자인, 모바일 앱 디자인 등 다양한 디자인 작업에 활용됩니다. Figma 프로토타입은 디자인 요소와 화면 간의 상호작용을 시뮬레이션하고 시각화하는 기능을 제공하고 이를 통해 디자이너와 클라이언트 또는 팀 간의 커뮤니케이션을 강화하고 디자인의 동작과 흐림을 검태 하고 개선할 수 있습니다.  - 스크린 간 전환 시물레이션  : 디자인 화면 간의 이동 및 전환을 시각적으로 시뮬레이션하여 사용자 경험을 평가하고 디자인 결함을 확인할 수 있습니다. - 상호 작업 추가 : 버튼 클릭, 드래그 앤 드롭 등의 상호 작용..