디자인로그

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의 주요 특징실시간 협업여러 사람이 동시에 편집 가능하여 디자인 작업의 효율성을 높인다.디자인 + 프로토타이핑 통합디자인과 사용자 흐름을 한 곳에서 작업할 수 있다.버전 관리 기능이전 디자인으로 쉽게 되..

[디자인부트캠프] DAY 09 | AI 시대의 디자인  어느덧 강의 9일이 지나고, 오늘도 어제와 이어서 ai 디자인을 주제로 다뤄보았습니다.최근 디자인 작업을 하다 보면 간단한 작업부터 복잡한 편집까지 다양한 툴을 찾게 됩니다. 오늘은 그중에서도 쉽고 직관적인 디자인 툴인 어도비 익스프레스(Adobe Express)에 대해 소개하려고 합니다. 어도비 익스프레스는 다양한 탬플릿을 이용해 빠르게 만들수 있는 플랫폼입니다. 제가 원하는 이미지를 그대로 담기에 아직 어려움이 있어서 자주 사용하지 않았었는데 이번에 다시 한번 시도를 해보았어요.    어도비 익스프레스(Adobe Express) 활용법: 디자인이 쉬워지는 순간  어도비 익스프레스란?어도비 익스프레스는 포토샵, 일러스트레이터 등 복잡한 디자인 프로..

[디자인부트캠프] DAY 08 | AI 시대의 디자인   AI 이미지를 제작할 수 있는 어도비 파이어플라이로 실습을 진행했다.어도비 이벤트 영상을 보니 많은 기업에서도 효율적인 업무에 도움을 받고 사용하고 있었다.시간과 품이 많이 드는 이미지 촬영 대신 빠르게 이미지 생성을 통해 꽤 괜찮은 이미지를 만들고 사용할 수 있다.   [어도비 파이어플라이]어도비 파이어플라이란?어도비에서 만든 생성 AI 도구로, 사용자가 입력한 프롬프트를 바탕으로 이미지를 생성합니다.어도비 파이어플라이 이용방법프롬프트 입력 후 이미지 생성, 스타일 및 색상 설정을 통해 결과물을 조정할 수 있습니다.어도비 파이어플라이 요소값이미지 구성 요소는 배경, 사물, 사람, 행동으로 나눌 수 있으며, 이들을 조합해 다양한 이미지를 생성할 수..

[디자인부트캠프] DAY 07 | AI 시대의 디자인    오늘의 강의에서는 AI 기술이 디자인 업계에 미치는 영향과 디자이너로서 AI를 어떻게 활용할 수 있는지에 대해 깊이 있는 내용을 다루었다.AI에 대해 긍정적인 입장으로서 선두적으로 알아야 한다고 생각한다.   목차AI 시대의 도래와 디자인 업계의 변화디자이너가 AI를 활용하는 방법AI 활용의 장단점AI 기반 퍼스널 브랜드 기획 방법 1. AI 시대의 도래와 디자인 업계의 변화AI 기술은 디자인 업계에 크고 작은 변화를 일으키고 있습니다. 가장 큰 변화 중 하나는 작업 자동화입니다.예를 들어, 이미지 리사이즈나 색 보정 같은 반복적인 작업들이 AI 도구를 통해 자동으로 처리됩니다.사례: 토스(Toss)의 디자이너들이 제품 디자인에만 집중할 수 있도..

DAY 06: 퍼스널브랜드 타이포그래피 포스터 제작 오늘의 강의에서는 타이포그래피의 기초부터 포스터 디자인까지의 전반적인 과정을 배웠다. 글자의 시각적 활용법을 익히고, 효과적인 텍스트 배치를 통해 크리에이티브한 포스터를 제작하는 방법을 배웠다.  목차타이포그래피 디자인 기초포스터 레이아웃 설계텍스트 효과와 크리에이티브 포스터 제작  타이포그래피 디자인 기초타이포그래피(Typography)는 글자(Typo)를 그림(Graphic)처럼 활용하는 ‘글자의 시각적 활용법’입니다. 단순히 정보를 전달하는 수단을 넘어 디자인 요소로써 강력한 역할을 합니다. 예시:Vintage 스타일: 클래식한 느낌의 텍스트 디자인.모던 디자인: 깔끔하고 직선적인 글자 배치로 세련된 느낌을 강조.       포스터 레이아웃 설계레..