REALITY

1. 오늘 학습 키워드 - 합성 컴포넌트, 네스티드 인스턴스, 탭 컴포넌트 2. 오늘 학습 한 내용을 나만의 언어로 정리하기 합성 컴포넌트컴포넌트를 재료로 사용해 만든 컴포넌트예: 바텀시트, 다이얼로그, 카드, 탭 등 네스티드 인스턴스상위 컴포넌트에서 하위 컴포넌트의 속성 조작이 가능하게 하는 기능 컴포넌트 합치기 & 분리하기새로운 컴포넌트는 드래그해서 세트에 추가 가능분리할 때는 컴포넌트를 밖으로 끌어내리면 됨꺼낸 컴포넌트는 하위 폴더 구조 이름으로 바뀜 강의 정리 내용 아이콘들이 개별적으로 컴포넌트로 만들어야 한다. --> 컴포넌트 옵션을 선택하고 " data-og-host="azure326.tistory.com" data-og-source-url="https://azure326.tistory.com..

1. 오늘 학습 키워드 - 컴포넌트 프로퍼티- 컨트롤 컴포넌트(체크박스, 라디오)- UI의 기능 주의적 관점 2. 오늘 학습 한 내용을 나만의 언어로 정리하기 컴포넌트 프로퍼티피그마에서 인스턴스를 재사용할 때 효율성을 높이기 위해 사용컴포넌트의 일부를 조건에 따라 바꾸는 기능 프로퍼티 종류Boolean, Instance swap, Text 버튼 위계위계 용어: Hierarchy = 계층, Priority = 우선순위일반적인 버튼 위계 종류: Primary, Secondary, Tertiary 강의 정리 내용 [피그마 강의] 4주차: 컴포넌트 프로퍼티, 버튼 컴포넌트 이해하기피그마 강의] 4주차: 컴포넌트4-2) 컴포넌트 프로퍼티의 이해 · 의사상태 복습: (예시) 버튼에 마우스를 호버했을 때, 색깔이 바..

1. 오늘 학습 키워드 - 버튼 컴포넌트- 컨트롤 컴포넌트(체크박스, 라디오)- UI의 기능 주의적 관점 2. 오늘 학습 한 내용을 나만의 언어로 정리하기 버튼 컴포넌트: 사용자 액션을 유도하는 UI 요소 컨트롤 컴포넌트: 사용자의 선택을 돕는 컴포넌트종류: 체크박스, 라디오, 스위치(토글), 슬라이더 UI 학습 관점: 생김새가 아닌 ‘무엇을 하는가’ 에 집중해야 한다! 강의 정리 내용 [피그마 강의] 3주차: UI 만들기 실습3-8) UI 만들기 실습(1) 버튼 컴포넌트· 버튼 컴포넌트 참고는 노션 참고하기(머터리얼 디자인, 우버 디자인 시스템, 라이트닝 디자인 시스템, 카본 디자인 시스템, ... )· 버튼 컴포넌트는 액션에azure326.tistory.com 3. 학습하며 겪었던 문제점 & 에러..

1. 오늘 학습 키워드 - 컴포넌트, 인스턴스- 디자인 시스템- UI 분류, 의사상태 2. 오늘 학습 한 내용을 나만의 언어로 정리하기 마스터 컴포넌트는 컴포넌트의 '원본'이며 수정하면 모든 인스턴스에 반영된다.인스턴스는 마스터 컴포넌트를 복사한 복제본이다.인스턴스를 수정하면 그 부분은 마스터와 연결이 끊긴다. (연결이 해제되면 일반 프레임이 됨)마스터 컴포넌트를 수정하면 인스턴스한 테 영향을 준다. UI 키트 vs 디자인 시스템UI 키트: 단순 모음디자인 시스템: 사용 방법, 규칙까지 포함된 문서 의사상태는 실제로 바뀌는 건 아니고, ‘상황에 따른 변화’를 보여주는 것이다. 강의 정리 내용 [피그마 강의] 3주차: 컴포넌트와 인스턴스, 디자인 시스템, UI 디자인 기본 이해하기3-5) 마스터 컴포넌..

1. 오늘 학습 키워드 - 파운데이션, 컬러 스타일, 컬러 프로파일, 확장성, 1:3:6 법칙- 폰트 스타일, 행간 2. 오늘 학습 한 내용을 나만의 언어로 정리하기 컴포넌트를 만들기 전 파운데이션부터 설계해야 한다. 파운데이션 구성 요소에는 색상, 서체, 간격, 곡률, 그리드, 고도, 아이콘 등이 있다. 컬러스타일이란 사용할 색을 미리 정해둔 팔레트다. 컬러스타일은 보통 2~3가지 색상으로 선정한 후 각 색상을 10단계로 나눈다. 폰트 스타일이란 폰트 패밀리, 크기, 굵기 행간 등을 일정한 규칙으로 정리한 세트다. 강의 정리 내용 [피그마 강의] 3주차: 파운데이션, 컬러 스타일, 폰트 스타일3-2) 파운데이션 · UI를 디자인하기 전 기초 재료는 컬러와 폰트다. · UI는 기초 재료인 파운데이션과..

1. 요구사항1. (주) 컬리- UI 디자인 실무 경험자 - Adobe Photoshop 사용 가능자- Sketch, Figma, Zeplin 사용 가능자- 작업시 원활한 소통이 가능한 사람- 커머스 서비스 경험자2. (주) 카카오페이- 조형적인 완성도를 고려한 UI 디자인 역량- 서비스 정책에 기반한 일관성 있는 UX/UI 설계 경험- 유연하고 적극적인 커뮤니케이션 역량 3. (주) 한겨례신문- 웹·모바일 사용자 경험(UX)에 대한 이해도 보유자- Figma, Photoshop, Illustrator, After Effects 등 디자인 툴 능숙자- 논리적 커뮤니케이션 및 협업 능력 보유자 2. 핵심 역량 키워드툴 사용 능숙도(피그마)협업, 커뮤니케이션 능력 3. 내가 생각하는 핵심 역량 - 피그마를..

1. 오늘 학습 키워드 - 오토레이아웃, 프레임, 코드 블록의 구조 2. 오늘 학습 한 내용을 나만의 언어로 정리하기 프레임: 실제 코드로 바뀌는 화면 단위 (컨테이너)그룹: 편집 및 이동용 묶음 단위오토레이아웃: 자동 정렬과 간격 조절로 유연한 UI 레이아웃을 설계하는 기능강의 정리 내용 [피그마 강의] 2주차: 프레임, 오토레이아웃 이해하기2-2) 프레임과 그룹 프레임과 그룹프레임이란?· 프레임은 피그마 디자인의 기본 단위이다. · 프레임은 피그마에서 코드 블록을 만드는 기능이자, 실제 화면으로 인식하는 개체이다. · 디자인을azure326.tistory.com 3. 학습하며 겪었던 문제점 & 에러 - 새롭게 알게 된 점: 오토레이아웃은 정렬뿐 아니라 간격이나 패딩 설정도 가능해서 레이아웃을 훨씬..

1. 현재 웹/앱에는 어떤 서비스들이 있는지 살펴봅시다.a. 내가 자주 사용하는 웹/앱콘텐츠 -> 유튜브, 넷플릭스, 티빙오디오 -> 스포티파이, 윌라생산성 -> chat gpt, 뤼튼b. 관심 있는 웹/앱텍스트 -> 북적북적, 교보문고디지털 마켓 -> 오늘의 집, 29cmc. 내가 가고 싶은 기업에서 운영하고 있는 서비스 종류카카오 -> 카카오뱅크, 카카오톡, 카카오맵네이버 -> 네이버페이, 네이버웹툰, 네이버 +스토어 2. 서비스 별 주요 목적, 기능을 조사하여 정리해봅시다.a. 서비스 소개밀리의 서재: 디지털 출판, 콘텐츠 구독b. 타겟20~30대 디지털 친화적인 사용자층c. 기능전자책, 오디오북, 챗북 3. 비슷하거나 같은 서비스를 운영하고 있는 웹/앱들을 나열해봅니다.윌라, 밀리의 서재, ye..

UX/UI 디자인1. 내가 UX/UI 코스에 참여한 계기는 무엇인가요? - 학교에서 특강으로 신청했던 신기술캠프에서 피그마를 배우면서 UX/UI에 관심을 갖게 되었고, 이를 계기로 기본기와 실무 경험을 쌓고 싶어 해당 코스에 참여하게 되었습니다. 2. 내가 이해한 UX/UI 디자이너는 어떤 역할을 하는 사람인가요? - UX/UI 디자이너는 웹이나 앱 화면을 디자인하는 것을 넘어서, 사용자가 서비스를 쉽고 편리하게 이용할 수 있도록 문제를 발견하고 개선하는 사람이라고 생각합니다. 3. UX/UI 디자이너의 역할과 비슷한 경험을 해 보았나요? 어떤 점이 유사하다고 생각했나요? - 아직 UX/UI 디자이너의 역할과 직접적으로 비슷한 경험은 해보지 못했습니다.이번 캠프를 통해 사용자 관점에서 문제를 파악하고..