디자인로그

UI 디자인 실전_2 목차반응형 랜딩페이지란?반응형 레이아웃 설계 원칙반응형 랜딩페이지의 주요 구성 요소디자인 스타일 가이드 적용실전 반응형 랜딩페이지 디자인반응형 디자인(Responsive Design):스마트폰, 태블릿, 데스크탑 등 다양한 화면 크기에 맞춰 디자인하는 것이 중요합니다.각 디바이스에 맞는 해상도 및 브레이크포인트 조정 (스마트폰: 320px, 태블릿: 768px–1024px, 데스크탑: 1024px 이상).모바일 우선 접근 방식(Mobile-first approach)을 적용하여 모든 기기에서 원활하고 명확한 사용자 경험을 보장합니다. 해상도 320px 이상 또는 768px 미만 -> 스마트폰해상도 768px 이상 또는 1024px 미만 -> 태블릿해상도 1024px 초과 -> PC레..

UI 디자인 실전_2 목차UI 디자인 프로세스 개요서비스 기획 및 아이디어 발상디자인 시스템의 이해와 구축와이어프레임 작성 및 레이아웃 설계화면 디자인 및 프로토타이핑피드백 및 개선 방안 논의UI와 UX의 관계사용자 인터페이스(UI)와 사용자 경험(UX)의 상호작용을 중시하며, UI는 UX를 보완하고 그 경험을 쉽게 사용할 수 있도록 돕는 역할을 한다.UI 디자인은 서비스를 구조화하고, 내용을 전달하며, 사용자와의 상호작용을 디자인한다.사용자 경험(UX: User Experience)이란 사용자가 기업, 서비스, 기업의 제품과 상호작용하면서 얻는 모든 측면의 경험을 의미한다.정말 훌륭한 사용자 경험을 제공하려면 고객이 직접 필요하다고 말하는 것 이상을 제공해야 하며, 체크리스트에 나열된 기능을 제공하는 ..

DAY 19 | UI 디자인 실전_11. 디자인 시스템의 정의디자인 시스템은 일관성 있는 디자인과 효율적인 작업을 위해 일정한 규칙, 요소, 스타일 등을 체계적으로 정리한 것.제품이나 서비스의 경험을 아우르는 모든 디자인 요소를 포함.2. 디자인 시스템 도입 이유일관성 유지: 여러 디자이너가 작업할 때 스타일이나 인터페이스의 일관성 유지 가능.효율성: 디자인 프로세스를 효율화하여 시간과 비용 절감.품질 개선: 일관된 디자인을 통해 제품의 품질 향상.3. 디자인 시스템의 핵심 요소색상(Color): 브랜드 컬러 및 보조 색상 정의.타이포그래피(Typography): 글꼴, 크기, 줄 간격 등 텍스트 스타일 규정.아이콘(Iconography): 아이콘의 크기, 스타일, 용도 정의.컴포넌트(Component)..

DAY 18 | 피그마 심화_디자인 시스템   디자인 시스템 정의디자인 시스템은 일관성을 유지하며, 코드와 디자인의 규칙을 정의합니다.예시: Google Material Design, Apple Human Interface Guidelines.디자인 시스템의 필요성일관성 유지: 여러 디자이너가 참여해도 일관된 스타일을 유지할 수 있습니다.협업 강화: 개발자 및 기획자와의 소통이 쉬워집니다.유지보수 효율화: 한번의 수정으로 전체 시스템에 반영 가능해집니다.디자인 시스템 vs 스타일 가이드디자인 시스템: 기능적 요소(컴포넌트, 인터랙션) 포함.스타일 가이드: 색상, 폰트 등의 시각적 요소에 집중.컬러 시스템 (Color System)브랜드 컬러, 상태 색상(예: 오류, 성공, 경고 등), 색상 팔레트를 정의..

DAY 17 | 피그마 심화_디자인 스타일디자인 스타일 고도화 개요디자인 스타일이란?색상, 텍스트, 아이콘, 그래픽 등 디자인 요소를 체계적으로 관리하는 기능으로, 디자인 수정 시 일관성을 유지하고 빠르게 업데이트할 수 있게 합니다.디자인 스타일을 고도화하는 이유브랜드 아이덴티티 유지협업 효율성 향상다양한 그래픽 효과를 사용하여 디자인에 깊이감과 디테일 추가스타일 고도화의 주요 요소컬러 스타일(Color Style): 브랜드 컬러 팔레트를 정의하고 적용.텍스트 스타일(Text Style): 제목, 본문, 캡션 등 관련된 타이포그래피 설정.이펙트 스타일(Effect Style): 그림자(Shadow), 블러(Blur), 그라디언트(Gradient) 등의 효과를 설정.* 디자인 스타일은 디자인 시스템의 핵심..

디자인 시스템 : 컴포넌트 활용컴포넌트 활용텍스트 프로퍼티: 버튼의 문구를 변경할 수 있는 방법.아이콘 프로퍼티: 버튼 내 아이콘을 활성화하거나 비활성화하는 방법.가시성(Visibility) 프로퍼티: 특정 요소를 숨기거나 표시할 수 있는 방법.베리언스(Variants)와 프로퍼티(Property)를 활용해 버튼에 다양한 상태를 설정하고, 다양한 디자인을 쉽게 관리할 수 있도록 했습니다.* 프로퍼티는 클래스(Class)나 객체(Object)의 속성을 나타내는 변수나 상수를 의미* 컴포넌트(Component)는 재사용이 가능한 독립된 모듈로, 프로그래밍, 게임, 웹 개발 등 다양한 분야에서 사용됨베리언스 및 프로퍼티 적용 예시구글 머티리얼 디자인에서의 버튼 사례 분석.앱 서비스에서 다크 모드와 라이트 모드..

컴포넌트의 개념과 필요성  컴포넌트란?UI 디자인에서 반복적으로 사용되는 요소를 재사용 가능하도록 만든 디자인 단위버튼, 카드, 네비게이션 바 등 여러 화면에서 동일한 UI를 유지할 때 사용컴포넌트를 활용하는 이유디자인 일관성 유지: 여러 화면에서 동일한 요소 재사용 가능작업 효율성 증가: 한 번 수정하면 모든 인스턴스에 자동 반영개발자 협업 용이: 개발자가 동일한 디자인 시스템을 참조할 수 있음 컴포넌트의 기본 구조메인 컴포넌트(Main Component): 원본 디자인인스턴스(Instance): 메인 컴포넌트를 복제하여 사용하는 개별 요소 메인 컴포넌트를 만들고, 복사 붙여넣기를 하면 인스턴스를 만들 수 있다.  Figma에서 컴포넌트 만들기 및 활용버튼 디자인을 예로 들어 컴포넌트 생성 및 다양한 ..

1. Figma란?Figma는 클라우드 기반 디자인 및 프로토타이핑 도구로, 협업 기능이 뛰어나며 웹 브라우저에서 실행할 수 있어 별도의 설치가 필요 없다. 특히, 팀원들과 실시간으로 작업할 수 있는 점이 큰 장점이다.Figma의 주요 특징실시간 협업: 여러 사용자가 동시에 편집 가능디자인 + 프로토타이핑: 사용자 흐름까지 한 곳에서 작업 가능버전 관리: 이전 디자인으로 쉽게 되돌릴 수 있음플러그인 & 커뮤니티 템플릿: 디자인 속도를 높일 수 있는 다양한 리소스 제공 2. UI 구성 요소 학습UI 구성 요소란?UI는 사용자가 인터페이스를 탐색하고 상호작용하는 요소를 의미하며, UI 디자인의 기본 단위에는 버튼, 입력창, 카드, 네비게이션 바 등이 포함된다.UI 구성 요소의 중요성UX의 시각적인 핵심 역할..

[디자인부트캠프] DAY 11 | UIUX 개념 입문_1 UI/UX 용어는 함께 쓰이기도 하지만, 각 단어의 의미에 차이점이 있다. 오늘 강의에서는 UI(사용자 인터페이스)와 UX(사용자 경험)의 개념을 이해하고, 이들이 어떻게 사용자의 만족도를 높이는지에 대해 살펴보았다. UI/UX 개념 정리: 사용자 경험과 인터페이스의 차이1. UI(User Interface)란?UI는 사용자가 제품과 상호작용할 때 마주하는 시각적, 물리적 인터페이스를 의미합니다. 쉽게 말해, 사용자가 직접 보고, 클릭하고, 조작하는 모든 디자인 요소가 UI에 해당합니다.UI의 주요 요소컬러(Color): 브랜드의 아이덴티티를 강조하고 사용자의 감성을 자극타이포그래피(Typography): 가독성을 높이고 정보 전달력을 강화아이콘(..

오늘은 UI/UX 디자인에서 필수적인 툴인 Figma에 대해 학습했다.Figma는 협업과 프로토타이핑이 강력한 클라우드 기반 디자인 툴로,여러 명이 동시에 작업할 수 있어 UI/UX 디자이너들에게 널리 사용된다. 작업 방식도 어도비 계열의 툴들과 비슷하여 초보자도 빠르게 적응할 수 있을것이다. Figma란?클라우드 기반 디자인 및 프로토타이핑 툴협업 기능이 뛰어나 팀원들과 실시간 작업 가능웹 브라우저에서 실행 가능하여 별도 설치가 필요 없음(단, 데스크톱 버전을 설치하면 더 효율적으로 활용 가능)Figma의 주요 특징실시간 협업여러 사람이 동시에 편집 가능하여 디자인 작업의 효율성을 높인다.디자인 + 프로토타이핑 통합디자인과 사용자 흐름을 한 곳에서 작업할 수 있다.버전 관리 기능이전 디자인으로 쉽게 되..