REALITY

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

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

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

컬러 컬러사람이 어떤 사물이나 물체를 볼 때 가장 먼저 인지하는 요소 or 가장 오래 기억에 남는 요소브랜드 컬러는 사용자에게 브랜드의 이미지를 지속적으로 전달해서 기억하고 인지시킬 수 있는 중요한 역할여러가지 의미를 담고 있는 컬러컬러의 역할중요한 정보를 강조하거나 사용자의 행동을 유도하기 위해 주로 사용브랜드 아이덴티티의 스타일을 결정하는 요소 중 하나중요한 정보 강조정보의 중요도에 따라 채도나 명도를 활용해 주요 요소와 보조 요소를 구분계층 구조강조사용자의 행동 유도버튼이나 링크에 컬러를 적용해 사용자가 다음 단계로 나아갈 수 있도록 행동을 유도컬러를 넣어 사용자가 누르고 싶게 만들기강조하고 싶은 주요 요소에 ▶️ 브랜드 컬러 사용해 사용자 행동 유도보조 요소에 ▶️ 채도가 낮은 그레이 컬러 사용해..

사용자 중심 디자인이란?📌 사용자 중심 디자인(User-Centered Design, UCD)제품이나 서비스를 설계할 때 사용자를 공감하여 사용자의 문제를 이해하고, 이를 해결하기 위한 개선안을 제공함으로써 사용자에게 만족스러운 경험을 제공하는 접근 방식이다. 가장 먼저 사용자 입장에서 깊이 있게 공감하기사용자의 목적, 행동, 상황, 니즈를 지속적으로 파악하여 사용자가 구체적으로 어떤 문제를 겪고 있는지 파악하기제품이나 서비스를 처음 사용하는 사용자도 쉽게 이해하고 사용할 수 있도록 직관적인 UI로 설계하기 UI 디자인 핵심 원리📌 아래 UI 디자인 원리를 통해 제품이나 서비스가 제공하는 기능과 정보를 사용자에게 전달할 수 있다!사용자 이해하기가장 먼저 서비스를 사용하는 사용자 이해하기디자인의 목적:..