UXUI


칩 컴포넌트필터 칩 컴포넌트(selected, configuration, label)액션 칩 컴포넌트(selected, icon, label) 필터 칩/액션 칩 컴포넌트 사용해서 section 만들기(section/filter_chip, section/action_chip) 섹션 타이틀 컴포넌트 section_title 컴포넌트(more_button/label)▶️ 타이틀 label(버튼 말로 왼쪽에 위치한 label)은 fill로 설정한다. 보통 타이틀 몇 글자 정도로 할 지 미리 생각해놔야 한다고 함!! 캐러셀 네비게이션 홈 화면여백 없이 쌓기히어로 영역에 버튼은 왜 안 늘어나는 지 ?.?? 개인 과제 하다가 시간 남으면 다시 도전해봐야겠다서치 바 컴포넌트 리스트 컴포넌트 리스트 화면액션 메뉴..


UI 클론 디자인📌 잘 만들어진 제품의 디자인을 모방하여 학습하는 과정!디자인 원칙, 컬러, 타이포그래피, 레이아웃 구성과 활용법 등을 익힐 수 있음전반적인 UI 구조 파악좋은 연습 방법인기있는 트렌드 파악하고 그 이유를 분석 UI 화면 구조큰 블록(페이지) ▶️ 작은 블록(컴포넌트) 순으로 설계하는 것이 핵심! 컴포넌트를 블록처럼 설계하면?확장성 유지보수성이 용이해짐재사용성: 같은 컴포넌트를 여러 곳에 활용 가능유지 보수 용이: 한 번의 수정으로 전체 UI에 반영 가능유연성: 추가, 삭제, 위치 변경 할 때, 레이아웃에 큰 변화없이 유연하게 적용 가능📌 섹션을 조립해서 페이지를 만들 때 테트리스 블록처럼 빈틈없이 쌓는 것이 중요


버튼 컴포넌트버튼 컴포넌트(light, dark/filled, text icon)아이콘 버튼 컴포넌트(filled, standard) 카드 컴포넌트 vertical 컴포넌트(number/size/style/number2) horizontal 컴포넌트(size)item/card item 컴포넌트(size, layout) 디자인이든 코딩이든 네이밍 하는 게 기능이랑 역할을 동시에 담아야 하니까 어떻게 지어야 할 지 감이 오 지 않 는 다


1. 주제 선정 하단 내비게이션 바의 홈 탭 디자인, 어떤 차이가 있을까? 2. 개인 의견 [홈 아이콘] 선택 왜 해당 UI가 더 좋은지? 처음 이용하는 사용자 or 이용 빈도가 낮은 사용자도 쉽게 탐색이 가능하다.아이콘+라벨 구조가 사용자 입장에서는 더 명확하고 친절하게 느껴진다. 나머지 하나는 왜 선택하지 않았는지? 미니멀하고 심플한 이미지지만 사용자 입장에서는 의미 파악이 어려울 것 같다 콘텐츠가 제한적인 어플에는 심플한 아이콘만 사용해도 충분하지만, 콘텐츠가 다양하면 처음 접하는 사람들은 진입 장벽이 있을 것 같다. 의견을 뒷받침할 수 있는 사례아래 뉴스레터의 디자인 원칙 가이드라인에 따르면, 명확성을 높이기 위해 텍스트 레이블을 추가하는 것이 사용자 경험을 높인다고 한다. [UI/UX 원칙..


1. 오늘 학습 키워드해상도고정과 가변 영역그리드 2. 오늘 학습한 내용을 나만의 언어로 정리하기 일관된 디자인사용자가 모든 해상도에서 일관된 경험할 수 있도록, 다양한 해상도를 대응하는 디자인을 해야 함 고정과 가변 영역좌우 마진은 모든 페이지에 일관되게 적용해야 해서 고정으로 설정하는 편해상도에 따라 크기가 변하는 버튼, 배너같은 이미지는 가변으로 설정하는 편 그리드디바이스 환경에 따라 디자인 요소를 일정한 간격으로 배치하고, 크기를 부여해 체계적인 배열을 도와줌4가지 기본 요소: 컨테이너, 컬럼, 거터, 마진 반응형 디자인반응형 디자인이 중요한 이유다양한 디바이스 사용(어떤 환경에서는 편리하게 이용 도와줌)일관된 디자인(하나의 템플릿으로 다양한 디바이스 대응)비용 효율화(하나의 코드 베이스로 유지보..


공통 UI 요소 찾아보기📌 UI 디자인에서 공통으로 사용하고 있는 요소를 컴포넌트로 만들 수 있다! 기본요소(Item)가장 작은 요소의 컴포넌트칩, 아이콘, 라디오 버튼, 체크박스, 버튼 등조합 요소(Module)기본 요소 + 기본 요소 or 기본 요소 + 조합 요소카드(이미지 + 텍스트), 서치바(아이콘 + 입력 필드), Snackbar(텍스트, 버튼) 등섹션(Section)조합 요소 + 조합 요소 + 여백(마진, 패딩)네비게이션 바, 앱 바, 캐러셀, 탭, 리스트 등엘리먼트와 컴포넌트 컴포넌트의 구성엘리먼트쪼개지지 않는 가장 작은 단위컬러, 타이포그래피, 아이콘, 여백, 곡률, 그리드 등컴포넌트엘리먼트 + 엘리먼트를 조합하여 재사용 가능한 블록의 형태합성 컴포넌트컴포넌트 + 컴포넌트 조합페이지합성 ..


레이아웃이란?📌 레이아웃특정 영역 안에 텍슽, 이미지, 여백 등 디자인 요소를 시각적으로 배치하는 것해상도화면의 정밀도를 나타내는 지표, 스크린의 가로 *세로 픽셀 수 기준으로 정밀도를 표현함해상도 선정 기준현재 스크린 점유율 기준으로 작업하는 게 좋음StatCounter에서 조회 가능 대표적으로 안드로이드는 360*800, IOS는 375*812 해상도를 사용 하나의 디자인으로 모든 해상도(안드로이드, IOS)에서 일관되어 보이도록 디자인해주는 것이 좋음일관된 디자인사용자가 모든 해상도에서 일관된 경험할 수 있도록, 다양한 해상도를 대응하는 디자인을 해야 함고정과 가변 영역디자인 화면이 생각과 다르게 개발되는 경우가 있음고정해상도 커지거나 작아져도 정의한 수치값이 일정하게 유지되는 것좌우 마진은 모든..


1. 주제 선정 무선 청소기 동작 버튼 각 디자인에 어떤 의도가 있을까? 2. 개인 의견 [색상/토스트 메시지] 선택 왜 해당 UI가 더 좋은지?한 번만 눌러도 동작이 유지되기 때문에 손에 힘이 부족한 사용자나 장시간 청소해야 하는 사용자에게 부담이 적어 더 적합한 방식이라고 생각한다.전원 아이콘이 직관적이라 사용자가 별도의 설명서 없이도 쉽게 작동 방식을 이해할 수 있을 것 같다나머지 하나는 왜 선택하지 않았는지?즉각적인 제어가 가능하지만, 대부분 무선 청소기는 배터리가 내장되어 있어 제품이 무겁기 때문에 장시간 홀딩 시 손목에 부담을 줄 수 있다.특히 손목 힘이 약한 사용자에게 적합하지 않은 방식인 것 같다. 의견을 뒷받침할 수 있는 사례https://nosearch.com/contents/encyc..