반응형 디자인13 [Figma] Figma 주요 기능별 사용법 - 반응형 디자인 이제 6단계인 반응형 디자인을 진행하겠습니다. 이 단계에서는 오토 레이아웃을 설정하고 프레임을 리사이징하는 방법을 배우게 됩니다.6. 반응형 디자인6.1 오토 레이아웃주요 기능:오토 레이아웃은 요소가 반응형으로 배치되도록 합니다.사용법:오토 레이아웃 설정: 요소를 선택한 후, 오른쪽 패널에서 Auto Layout 옵션을 활성화합니다.레이아웃 설정: 오토 레이아웃 패널에서 방향, 간격, 패딩 등을 설정합니다.예시:카드 레이아웃을 오토 레이아웃으로 설정합니다.실습:카드 요소들을 선택하고 오토 레이아웃을 활성화합니다.방향을 Vertical, 간격을 20px로 설정합니다.실습 단계별 스크린샷:오토 레이아웃 설정:Homepage 프레임에서 카드 레이아웃을 구성할 여러 요소(예: 이미지, 텍스트 박스, 버튼 등)를.. 2024. 6. 8. [Figma] Figma 주요 기능별 사용법 - 네비게이션 설계 이제 5단계인 네비게이션 설계를 진행하겠습니다. 이 단계에서는 링크를 설정하고 컴포넌트를 사용하는 방법을 배우게 됩니다.5. 네비게이션 설계5.1 링크 설정주요 기능:링크는 페이지 간 네비게이션을 가능하게 합니다.사용법:프로토타입 모드로 전환: 상단 메뉴에서 Prototype 탭을 클릭하여 프로토타입 모드로 전환합니다.링크 설정: 요소를 선택하고 링크 아이콘을 클릭하여 연결할 페이지나 프레임을 선택합니다.예시:네비게이션 바의 메뉴 항목에 링크를 설정합니다.실습:Prototype 탭에서 네비게이션 바의 메뉴 항목을 선택합니다.링크 아이콘을 클릭하여 다른 프레임이나 페이지로 연결합니다.실습 단계별 스크린샷:프로토타입 모드로 전환:피그마 상단 메뉴에서 Prototype 탭을 클릭합니다.링크 설정:네비게이션 바.. 2024. 6. 8. [Figma] Figma 주요 기능별 사용법 - 색상 사용 이제 3단계인 색상 사용을 진행해보겠습니다. 이 단계에서는 색상 팔레트를 설정하고 그라데이션을 추가하는 방법을 배우게 됩니다.3. 색상 사용3.1 컬러 팔레트 설정주요 기능:색상 팔레트를 설정하여 디자인의 일관성을 유지합니다.사용법:색상 선택기 사용: 요소를 선택한 상태에서 오른쪽 패널에서 색상 선택기를 사용하여 원하는 색상을 선택합니다.색상 스타일 저장: 자주 사용하는 색상을 Styles로 저장하려면 색상 선택기에서 + 아이콘을 클릭하여 스타일을 추가합니다.예시:주 색상을 #FF5733으로 설정합니다.실습:"Welcome to My Website" 텍스트를 선택합니다.오른쪽 패널에서 색상 선택기를 열어 #FF5733 색상을 선택합니다.색상 스타일을 Primary Color로 저장합니다.실습 단계별 스크.. 2024. 6. 8. [Figma] Figma 주요 기능별 사용법 - 타이포그래피 이제 2단계인 타이포그래피를 진행해보겠습니다. 이 단계에서는 텍스트를 추가하고 텍스트 스타일을 설정하는 방법을 배우게 됩니다.2. 타이포그래피2.1 텍스트 추가주요 기능:텍스트는 웹 페이지의 주요 콘텐츠를 전달합니다.사용법:텍스트 도구 선택: T 키를 눌러 텍스트 도구를 선택합니다.텍스트 상자 생성: 캔버스를 클릭하여 텍스트 상자를 생성하고 텍스트를 입력합니다.예시:웹 페이지의 제목과 본문 텍스트를 추가합니다.실습:Homepage 프레임에서 T 키를 눌러 텍스트 상자를 생성합니다."Welcome to My Website"라고 입력합니다.실습 단계별 스크린샷:텍스트 도구 선택:피그마에서 T 키를 눌러 텍스트 도구를 선택합니다.커서가 텍스트 입력 모드로 변경됩니다.텍스트 상자 생성:Homepage 프레임 안.. 2024. 6. 8. [Figma] Figma 주요 기능별 사용법 - 레이아웃 디자인 1단계인 레이아웃 디자인을 하나씩 상세하게 진행해 보겠습니다. 이 단계에서는 프레임을 생성하고 그리드를 사용하는 방법을 배우게 됩니다.1. 레이아웃 디자인1.1 프레임 생성주요 기능:프레임은 웹 페이지나 특정 섹션을 정의하는 데 사용됩니다. 각 프레임은 독립된 디자인 공간을 제공합니다.사용법:프레임 도구 선택: F 키를 눌러 프레임 도구를 선택합니다.프레임 추가: 캔버스를 클릭하여 원하는 크기의 프레임을 생성하거나 드래그하여 크기를 조정합니다. 예를 들어, 기본 웹 페이지 크기는 1440x1024 픽셀입니다.프레임 이름 변경: 생성된 프레임의 이름을 변경하려면 왼쪽 레이어 패널에서 해당 프레임을 더블 클릭하고 이름을 입력합니다.예시:웹 페이지의 헤더, 본문, 푸터를 각각 다른 프레임으로 생성합니다.실습:.. 2024. 6. 8. [UX/UI Design] 6단계: 포트폴리오 제작 6단계: 포트폴리오 제작학습 목표:포트폴리오 구성 방법 배우기작품 설명 및 프로세스 문서화세부 학습 내용:1. 포트폴리오 구성 방법 배우기학습 목표:포트폴리오의 중요성 및 구성 요소 이해효과적인 포트폴리오 구성 방법 학습학습 자료:온라인 자료:BehanceDribbbleMedium의 UX 관련 블로그예제 포트폴리오:인터넷에서 검색하여 다양한 UX/UI 포트폴리오 사례 참고세부 학습 과정:포트폴리오의 목적과 중요성 이해포트폴리오의 필수 구성 요소 학습 (소개, 프로젝트, 프로세스 설명, 결과물 등)포트폴리오의 레이아웃 및 디자인 원칙 이해실습:포트폴리오 구성 요소 정리포트폴리오의 기본 레이아웃 설계문서화 예시:# 포트폴리오 구성 문서## 포트폴리오 개요- 포트폴리오의 목적: [목적 설명]- 주요 구성 요소.. 2024. 6. 8. [UX/UI Design] 4단계: UX/UI 디자인 문서 작성법 배우기 4단계: UX/UI 디자인 문서 작성법 배우기학습 목표:UX 리서치 문서 작성법 배우기사용자 시나리오 및 페르소나 작성UI 디자인 가이드라인 문서화세부 학습 내용:1. UX 리서치 문서 작성법 배우기학습 목표:UX 리서치의 중요성 및 기본 개념 이해사용자 조사 및 리서치 문서 작성 방법 학습학습 자료:온라인 자료:Nielsen Norman GroupUX Design.cc예제 문서:인터넷에서 검색하여 다양한 UX 리서치 문서 참고세부 학습 과정:UX 리서치의 중요성 이해사용자 인터뷰, 설문조사, 사용성 테스트 등의 방법 학습리서치 문서 작성 방법 및 구성 요소 이해실습:간단한 사용자 리서치 설계 및 실시리서치 결과를 정리하여 리서치 보고서 작성문서화 예시:# UX 리서치 문서## 프로젝트 개요- 프로젝트명.. 2024. 6. 8. [UX/UI Design] 1단계: UX/UI 디자인의 기본 개념 이해 1단계: UX/UI 디자인의 기본 개념 이해학습 목표:UX와 UI의 차이점 이해사용자 중심 디자인 원칙 배우기디자인 사고 프로세스 이해세부 학습 내용:1. UX와 UI의 차이점 이해학습 목표:UX와 UI의 정의 및 차이점 이해각 개념의 중요성 및 상호작용 이해학습 자료:책:"Don't Make Me Think" by Steve Krug"The Design of Everyday Things" by Don Norman온라인 강의:Coursera: "Introduction to User Experience Design"Udemy: "User Experience Design Essentials - Adobe XD UI UX Design"세부 학습 과정:책에서 주요 개념 발췌 및 요약온라인 강의 수강 후 요약 노.. 2024. 6. 8. [UX/UI Design] 4단계: Figma에서 프로토타입 제작 이제 4단계로 넘어가서 Figma를 사용하여 프로토타입을 제작하는 방법을 배우겠습니다. 이 단계에서는 인터랙션을 추가하여 사용자 흐름을 시뮬레이션하고, 프로토타입을 테스트하는 과정을 다룹니다.4단계: Figma에서 프로토타입 제작학습 목표:Figma에서 인터랙션 추가하기프로토타입 제작 및 사용자 흐름 시뮬레이션프로토타입 테스트 및 피드백 받기세부 학습 내용:1. 인터랙션 추가Figma에서 인터랙션을 추가하여 사용자 흐름을 시뮬레이션할 수 있습니다. 버튼 클릭, 페이지 전환 등의 동작을 설정할 수 있습니다.인터랙션 추가 단계페이지 및 아트보드 준비: 여러 화면을 제작하여 각각의 상태를 시각화합니다.프로토타입 모드 전환: Figma 오른쪽 상단의 "Prototype" 탭을 클릭하여 프로토타입 모드로 전환합니.. 2024. 6. 8. [UX/UI Design] 2단계: Figma 기본 사용법 익히기 이제 2단계로 넘어가서 Figma 기본 사용법 익히기를 진행하겠습니다. 각 소주제를 하나씩 다루면서 상세히 설명드리겠습니다.2단계: Figma 기본 사용법 익히기학습 목표:Figma 인터페이스 이해와이어프레임 제작 방법 배우기프로토타입 제작세부 학습 내용:1. Figma 인터페이스 이해Figma는 웹 기반의 협업 디자인 도구로, UI/UX 디자이너들 사이에서 널리 사용되고 있습니다. Figma를 처음 사용할 때 이해해야 할 주요 인터페이스 요소를 소개하겠습니다.Figma 설치 및 로그인Figma 웹사이트 방문: Figma 공식 웹사이트에 방문하여 회원가입을 진행합니다.Figma 데스크톱 앱 설치: 웹에서 사용 가능하지만, 데스크톱 앱을 설치하면 더 원활하게 사용할 수 있습니다.Figma 인터페이스 요소T.. 2024. 6. 8. 이전 1 2 다음 반응형