UI/UX디자이너

2024.11.08피그마 학원수강 마지막 날 학원 수강 노트  컴포넌트- 베리언츠(=컴포넌트 세트) → 프로토타입 제작 오토레이아웃- 오토레이아웃 리사이징- 컨스트레인츠 프로토타입 → 인터랙션 설정1) chage to (컴포넌트 세트)2) 슬라이드 (Navigate to / push, smart animation)3) 오버레이 (open overlay / close overlay + swap overlay)4) 호버 (컴포넌트)5) 스크롤(스와이프) 뱃지 만들기네모박스를 굳이 안만들고 텍스트 레이어를 오토레이아웃해서 만들 수 있다.

2024.11.06피그마 학원수강 11회차 학원 수강 노트   #06_Prototype3_오버레이(Overlay) * 구현에 적용한 인터랙션 설정 1. 사용된 트리거>> on click (on tap) : 요소를 클릭(탭)했을 때 2. 사용된 액션>> open overlay : 연결된 프레임이 오버레이(겹쳐져서)되서 열림>> close overlay : 오버레이 되어 있는 것을 닫음(오픈 오버레이가 그대로 닫히기 때문에 별도 설정 필요없음) 3. 사용된  애니메이션 효과>> Move in : 프레임이 연결되어야 가능슬라이드처럼 프레임이 들어오며 좌우상하 방향 설정 가능    #08_Pototype5_스크롤(Scroll) 140X180, 140X140 만들어서 하나를 더 복사한 후, 좌측에 만들어놓은 걸 ..

2024.11.04피그마 학원수강 10회차 학원 수강 노트  지난번에 만든 오버레이 예제파일을 이어서  #06_Prototype3_오버레이(Overlay) 1. 화면구성 해주기  (모바일 메인)이라고 한 프레임에  네모 도형을 대충 드래그해서 만든 후,도형의 사이즈를 375x450로 설정해준 후, fill에서 이미지로 채워준다. 그리고 그 아래에 네모 도형을 또 대충 드래그해서 만든 후, 375x235 사이즈로 설정해준 후, fill에서 이미지로 채워준다.  그 다음엔 좌측에 만든 (패널/메뉴) 프레임에서 프레임의 색상을 바꿔준다.#7C51A1 투명도는 90%그리고 네모 도형을 대충 드래그해서 만들어주고 300x667로 사이즈를 변경해주고좌측 상단에 맞춰 배치해준다.  그리고 메뉴 텍스트를 입력해주고 ..

2024.10.30피그마 학원수강 9회차 학원 수강 노트  * 슬라이드 구현에 적용한 인터랙션 설정 1. 트리거 - Ater delay (일정 시간 지난후) / click2. 액션 - Navigate to (프레임에서 프레임으로 이동!!)3. 애니메이션 효과- Push (밀어내다) : 설정한 방향으로 이동- Smart animate : 부드럽게 화면 전환 * 시간 설정이 필요할 경우 기본 단위는 ms1초 = 1000ms  슬라이드 만들기  1. 650x420 프레임을 하나 만들어준다2. 15x15 사이즈의 원형 도형을 만들어서 총 3개로 만들어주고 오토레이아웃 처리해준다. 이름은 -> pager로 설정 3. 오토레이아웃 처리한 페이저를 만들어놓은 프레임 중앙 아래쪽에 배치해주고 컨스트레인트를 중앙/아래로..

2024.10.28피그마 학원수강 8회차 학원 수강 노트   지난번에 작업했던 뉴스피드 예제파일 프로필부분과 컨텐츠 부분 내용 채우기프로필 박스와 뉴스박스를 각각 오토레이아웃 처리하여 하나로 묶어주기 내용을 채우고 나서 보면 내용이 길어질 경우, 다음 컨텐츠 덩어리와의 사이에 갭이 없어서내용이 길어지면 컨텐츠들 사이에 간격 조절이 불가능하다.이를 조절하기 위해서는 각각 컨텐츠들을 또다시 오토레이아웃으로 묶어준다.오토레이아웃으로 묶어주고 나면 컨텐츠 사이에 갭 값을 줄 수있는 것을 확인할 수 있다.   프로토타입 제작 -> 인터랙션 추가1. 트리거 (이벤트)2. 액션 설정(Action)3. 애니메이션 효과 → 트리거(이벤트)가 발생하면 액션(동작)을 수행해!→ 액션을 실행할 때 적용될 효과가 애니메이션 설..

보호되어 있는 글입니다.

2024.10.21피그마 학원수강 5회차 학원 수강 노트 #03_베리언츠(컴포넌트 세트)  지난시간에 만들었던 네이버 로그인창 완성하기.450X280 네모 도형을 만들어서 중앙배치하고 아래에서 위로 70정도 떨어뜨린다.  좌측 도구창에 Assets를 눌러주면 Local assets가 나오는데 그걸 눌러주면해당 페이지에 만들어놓은 컴포넌트들이 등록된 것을 볼 수 있다.선택해서 프레임으로 드래그를 해주고 배치해준다.  Combine as variants컴포넌트와 컴포넌트를 세트로 만들어 주는 것 (인스턴스는 적용 x)배리언츠 세트에서 해제를 할 때, 보라색 라인 밖으로 끌고 나가면 해제가 된다.다시 묶으려면 레이어에서 배리언츠 레이어로 다시 끌고가면 묶인다.create components set그룹들을 각각..

2024.10.16피그마 학원수강 4회차 학원 수강 노트  #03_베리언츠(컴포넌트 세트) 네이버 로그인창 만들기   컴포넌트를 모아놓을 프레임을 하나 만든다. 프레임의 이름은 컴포넌트로 설정 로그인 상태 유지 옆에 원형 버튼을 먼저 만들건데,원형 도형으로 20x20 사이즈로 만들어주고 체크모양을 펜툴로 그려준다. 그려준 체크모양 백터를 선택해서 우측 툴에서 stroke에서 곡선처리 해준다.  하단에 뾰족한 부분도 곡선처리를 하려면 Advanced stroke settings 버튼을 눌러서Join에 세번째 둥근도형을 클릭해주면 된다. (모서리 곡선처리)해당 체크 백터를  outline stroke (Ctrl+Alt+O) 처리해준다.  원형버튼을 복사해서 2개로 만들어준다. (on/off)각각을 그룹으로 ..

2024.10.14피그마 학원수강 3회차 학원 수강 노트  Shift+방향키 : 10px씩 이동 (값이 10씩 이동이 안될 경우, 좌측 피그마 아이콘 클릭 -> Preferences -> Nudge amount... -> 값을 10으로 변경) 젤 위로 이동 : ] 젤 아래로 이동 : [ 텍스트 입력 후 끝내기 : Ctrl+엔터 Ctrl+선택 -> 해당 레이어만 선택 Assets창에서 원하는 컨포넌트 선택 후 드래그 해서 가져오기 alt 눌러서 복사 한 후, 한번 더 복사 할땐 ctrl+d    레이어 폴더명을 작성할 때, '/'를 작성하면 폴더를 생성해 그 안에 이미지가 들어간다.ex) icon/car -> icon이라는 폴더안에 car라는 이미지가 생성 각각의 아이콘들을 만들어 컴포넌트로 등록을 하고 ..

2024.10.11피그마 학원수강 2회차 학원 수강 노트  프레임에 이미지를 가져오는 방법1. 탐색기에 있는 이미지를 피그마에 프레임으로 드래그2. 왼쪽 상단에 피그마 아이콘 - File > place image > 이미지 프레임에 드래그- 포토샵과 다른점 : 포토샵에서는 비율이 가로 이미지를 세로 이미지로 가져올 경우, 혹은 임의로 늘리거나 줄이는 경우 이미지가 깨지는데 피그마에서는 이미지를 드래그한 비율에 맞춰서 공간 조절이 되고 이미지가 깨져보이지 않는다.   3. 피그마 하단에 도구상자에 이미지 모양(프레임 아이콘 옆아이콘에 화살표 클릭하면 이미지) * 피그마 단축키- 화면 확대 : Ctrl + 휠 위로- 화면 축소 : Ctrl + 휠 아래로- 화면 이동 : 스페이스바 + 드래그- 복사 : Alt..

2024.10.07피그마 학원수강 1회차 첫째날 수업전에는 OT로 머 서류같은거 작성하고 기초지식 확인용?문제지같은걸 나눠준다. 개인정보동의? 그건 싸인하고 OT때 학원 직원분한테 드렸고문제지같은건 다 풀고 나중에 강사님한테 제출하는 거였다.그리고 피그마도 교재를 받았다.  요즘엔 다 교재를 주나보다. 첫수업에는 12회차 수업동안 수업은 어떻게 진행이 되는지, 출결관리 등설명부터 시작되었고 본격적으로 수업이 진행되었다. 학원 수강 노트 이번 12회차 수업에서는 6회차는 1,2(기초) / 나머지 6회차는 3(응용)1. 컴포넌트2. 오토레이아웃3. 프로토타입 제작 * 피그마 단축키- 화면 확대 : Ctrl + 휠 위로- 화면 축소 : Ctrl + 휠 아래로- 화면 이동 : 스페이스바 + 드래그 도형그릴 시 ..