본문 바로가기

전체 글

 (80)
[TIL] 24.10.14(월) 피그마 3주차 강의 내용 정리(8~10강)버튼 컴포넌트컴포넌트의 종류 중 '액션'에 해당하는 컴포넌트, 누름으로써 중요한 동작을 수행하는 요소행동 유도성(Affordance): 상호작용이 가능한 물체는 상호작용이 가능하다는 시각적인 단서를 제공해야 한다는 뜻즉, 버튼을 설계할 때는 누를 수 있다는 시각적인 힌트를 충분히 드러내야 함= 행동을 유도하는 속성 = 행동 유도성 = 어포던스(Affordance)* 버튼뿐만 아니라 모든 UI를 설계할 때 UI의 개념과 목적을 최우선으로 고려해야 함 버튼의 구조1. 컨테이너: 안에 있는 요소를 감싸고 있는 프레임(버튼의 높이는 컨테이너 안의 상하 여백+안에 있는 요소의 높이로 정해짐)2. 라벨/레이블(Label): 버튼의 행동을 안내하는 글자* UI에서 사용자가 입..
[WIL] 2주차 / 24.10.07(월) ~ 24.10.11(금) FACTS(사실, 객관)벌써 프로덕트 디자인 8기의 사전 캠프의 2주 차 일정이 끝났다.매일 해야 하는 데일리 루틴(아래와 같음)을 잘 지키며 캠프에 참여하고 있다.1. ZEP 접속2. 입실 체크3. 팀 노션 데일리 스크럼 목표 작성4. 아티클 분석 (팀원과 공유)5. 퀘스트 진행 (블로그 업로드)6. 주차에 맞는 강의 수강7. TIL 작성(매주 금요일엔 TIL + WIL)8. 구글 폼 업로드(아티클, 퀘스트, TIL, WIL)9. 팀 노션 데일리 스크럼 목표 달성 여부 작성10. 퇴실 체크(중간 중간 출석 새로고침, 저장 해야함) FEELINGS(느낌, 주관)첫 주에 노션, 슬랙 등 처음 써보는 프로그램 때문에 살짝 적응하기 어렵다고 했었는데, 이제 2주 차가 끝나서인지 벌써 조금 적응해가고 있는 것 ..
[TIL] 24.10.11(금) 피그마 3주차 강의 내용 정리(5~7강)마스터 컴포넌트와 인스턴스컴포넌트: 구성품 이라는 뜻으로, UI디자인에서 컴포넌트는 파운데이션을 조합해 만들어지는 구성품을 의미(=피그마로 만든 UI 블록)마스터 컴포넌트: 컴포넌트 기능의 핵심으로, 반복적인 디자인을 빠르게 하기 위해 디자인을 복사해서 사용할 수 있도록 해줌(복사된 디자인을 한 번에 수정하거나 편집할 수 있도록 해줌)마스터 컴포넌트의 특징: 마스터 컴포넌트는 '원본'으로 변하지 않음, 자유로운 수정 및 삭제 가능, 마스터 컴포넌트 복제 > 인스턴스 생성인스턴스: 마스터 컴포넌트의 복제본으로, 마스터 컴포넌트의 속성을 그대로 이어받음 / 수정 불가능* 마스터 컴포넌트 수정 > 인스턴스에 반영됨* 인스턴스를 먼저 수정해도 마스터 컴포넌트에는 반영되지 ..
[TIL] 24.10.10(목) 피그마 3주차 강의 내용 정리(1~4강)파운데이션파운데이션: UI를 구성하는 가장 작은 알갱이이자 기초 재료(ex. color, radius, spacing, font, icon 등)사용하는 사람마다 분류와 이름이 조금씩 다를 수 있음색상(color)서체(font, typography)간격, 여백(spacing, gap)곡률(radius)그리드(grid)고도(elevation)아이콘(icon) 컬러 스타일디자인을 할 때 가장 먼저 정하게 되는 핵심 요소 UI 디자인에서의 컬러(컬러가 디지털 환경에서 구현되는 개념과 원리)RGB: 컴퓨터는 빨강, 초록, 파랑을 각각 256가지의 값으로 보여줄 수 있음> RGB색상을 사용할 때 '255, 255, 255' 처럼 작성하는 이유가 됨> 이 각각의 숫자를 컴퓨터는..
[TIL] 24.10.08(화) 피그마 2주차 강의 내용 정리(5~7강)컨스트레인트컨스트레인트(Constraint): 제약(조건), 제한이라는 뜻으로, 오토레이아웃 안에 있는 개체들이 움직이는 방식을 제한함* 오토레이아웃 안에있는 '자식 개체'들이 움직일 때의 조건 값* 부모 컨테이너의 크기를 조정할 때, 자식 컨테이너가 어디를 기준으로 변하게 할지를 정하는 것* 프레임(Child Container)을 다른 프레임(Parent Container)으로 드래그하면 그 프레임 안으로 들어가게 됨* 자식 컨테이너가 부모 컨테이너에 대해서 어떻게 고정되어있냐에 따라서 파란색 핀으로 표시되게 됨* 자식 컨테이너가 부모 컨테이너에 대해 Left, Top으로 고정되어 있을 때, 부모 컨테이너의 우측 방향으로 사이즈를 늘려도 자식 컨테이너는 움직이지 ..
[TIL] 24.10.07(월) 피그마 2주차 강의 내용 정리(1~4강)프레임과 그룹의 차이프레임: 피그마에서 코드 블록을 만드는 기능이자 실제 화면으로 인식하는 개체* 프레임은 디자인을 코드로 바꿀 때 개발 가능한 코드 블록으로 만들어짐* 개발에서의 박스 모델 하나하나가 피그마에서 프레임이라는 기능으로 구현되는 것* 프레임은 그 안에 다른 개체나 프레임을 넣을 수 있음 > 프레임=컨테이너 라고도 불림 그룹: 여러 개체를 하나로 묶어주는 기능* 그룹은 다양한 경우에 사용 가능* 여러 개체를 조정, 디자인 정리 등의 편의를 위해 여러 개체를 하나로 담는 기능* 프레임과 달리 그룹은 코드 블록으로 인식할 수 없음 * 그룹은 여러 요소를 한 번에 담아서 움직일 때 주로 사용하며, 실제 UI 작업에서는 그룹이 아닌 프레임을 사용함 프레임 vs..
[사전캠프] 웹/앱 클론 디자인 웹/앱 클론 디자인📖 웹 또는 앱서비스의 디자인을 클론(clone)해봅니다. 이를 통해 피그마 기초 실력 향상과, UI/UX에 대한 이해를 갖추고 좋은 서비스를 보는 눈을 길러봅시다. 선정 앱: 컬리(Kurly)Badges 영역: 홈, 라운지, 카테고리, 검색, 마이컬리           간단하게 하단 독바를 통한 페이지 이동 프로토타입만 적용해서 녹화한 화면  시간이 부족해서 이미지, 배너, 상품 상세 페이지, 프로토타입 적용 등 클론 디자인을 완벽하게 하지는 못해서 아쉬움이 남는다.이걸로 사전 캠프 과제는 끝이다.다음 주부터 시작되는 본 캠프에서는 시간 관리를 효율적으로 해서 과제를 미루거나 진도에 뒤처지는 일 없게 해야겠다는 생각이 든다.
[사전캠프] 컴포넌트 만들기 컴포넌트 만들기더보기 📖 Material Design Guide를 참고하여 강의에서 배운 컴포넌트를 심도있게 학습해봅시다. PPT 보다 쉬운 피그마 강의를 수강하며 컴포넌트가 무엇인지 이해해봅시다.아래 북마크를 통해 Material Design의 컴포넌트 탭으로 접속합니다.Components – Material Design 3아래 내용들을 순서대로 확인하고, 공부해봅시다.ActionsCommunicationContainmentNavigationSelectionText inputs[공부방법]피그마를 엽니다.컴포넌트 만들기라는 페이지 또는 프로젝트를 하나 생성합니다.먼저, 각 탭의 내용을 정독 후에 정리합니다.각 탭에 있는 예시를 피그마를 통해 직접 만들어봅니다.만든 예시는 3번에서 진행한 내용 정리와 함..

티스토리툴바