오즈코딩스쿨 48

[디자인부트캠프] Day18 l 디자인 시스템 01

오늘은 오즈코딩스쿨 프로덕트 디자이너 부트캠프 2기 18일차입니다.18일차에는 디자인 시스템에 대해 전체적으로 배우는 시간이었습니다!😊 1) 디자인 시스템이란?- 디자인 시스템 정의디자인 시스템: 디자인과 코드의 일관성을 유지하기 위해 정의된 가이드라인과 컴포넌트 라이브러리예시: Google Material Design, Apple Human Interface Guidelines- 디자인 시스템의 필요성일관성 유지 : 여러 디자이너가 참여해도 동일한 스타일 유지협업 강화 : 개발자, 기획자와의 소통이 쉬워짐유지보수 효율화 : 수정 사항을 한 번에 반영 가능- 디자인 시스템 vs 스타일 가이드: 디자인 시스템: 시각적 요소 + 기능적 요소(컴포넌트, 인터랙션) 포함  스타일 가이드: 컬러, 폰트 등 시각..

[디자인부트캠프] Day17 l 피그마 ADVANCED 03

오늘은 오즈코딩스쿨 프로덕트 디자이너 부트캠프 2기 17일차입니다.17일차에는 디자인 스타일 고도화 개요, 고급 그래픽 디자인 기술, Figma 플러그인 소개 및 실습에 대해 배우는 시간이었습니다!😊 1) 디자인 시스템이란?디자인 시스템: 디자인과 코드의 일관성을 유지하기 위해 정의된 가이드라인과 컴포넌트 라이브러리예시: Google Material Design, Apple Human Interface Guidelines  - 디자인 시스템의 필요성일관성 유지 : 여러 디자이너가 참여해도 동일한 스타일 유지협업 강화 : 개발자, 기획자와의 소통이 쉬워짐유지보수 효율화 : 수정 사항을 한 번에 반영 가능- 디자인 시스템 vs 스타일 가이드디자인 시스템: 시각적 요소 + 기능적 요소(컴포넌트, 인터랙션) ..

[디자인부트캠프] Day16 l 피그마 ADVANCED 02

오늘은 오즈코딩스쿨 프로덕트 디자이너 부트캠프 2기 16일차입니다.16일차에는 디자인 시스템과 컴포넌트의 역할, 베리언츠와 프로퍼티 활용 전략, 실전 디자인 시스템 구축 실습에 대해 배우는 시간이었습니다!😊  점점 피그마의 기능들에 대해 알아가고 있는 기분이라 재미가 쏠쏠합니다! 1) 디자인 시스템과 컴포넌트의 역할- 디자인 시스템(Design System)이란?: 기업이나 브랜드에서 사용하는 일관된 UI/UX 디자인 가이드라인디자인 요소(버튼, 입력창, 카드 등)를 재사용 가능하도록 체계적으로 정리 - 디자인 시스템에서 컴포넌트의 역할: 컴포넌트는 디자인 시스템의 핵심 요소모든 UI 구성 요소를 체계적으로 정리해 유지보수 용이예시: Google Material Design, Apple Human In..

[디자인부트캠프] Day15 l 피그마 ADVANCED 01

오늘은 오즈코딩스쿨 프로덕트 디자이너 부트캠프 2기 15일차입니다.15일차에는 컴포넌트 개념과 필요성, 베리언츠 개념과 활용, 프로퍼티 개념과 실전 적용에 대해 배우는 시간이었습니다!😊  "디자인은 어떻게 보이는지가 아니라 어떻게 작동하는지에 관한 것이다."제프 라스킨  강의 내용 정리 1) 컴포넌트란?: UI 디자인에서 반복적으로 사용되는 요소를 재사용 가능하도록 만든 디자인 단위버튼, 카드, 네비게이션 바, 입력 필드 등 여러 화면에서 동일한 UI를 유지할 때 사용- 컴포넌트를 활용하는 이유디자인 일관성 유지: 동일한 요소를 여러 화면에서 재사용 가능작업 효율성 증가: 한 번 수정하면 모든 인스턴스(instance)에 자동 반영개발과 협업 용이: 개발자가 동일한 디자인 시스템을 참고할 수 있음 - ..

[디자인부트캠프] Day14 l 피그마 BASIC 01

오늘은 오즈코딩스쿨 프로덕트 디자이너 부트캠프 2기 14일차입니다.14일차에는 어제에 이어서 피그마에 대해 배웠습니다! 특히 오토 레이아웃에 대해 딥하게 배운 시간입니다 😊 강의 내용 정리 - UI 구성 요소란?: 사용자가 인터페이스를 탐색하고 상호작용하는 요소들UI 디자인의 기본 단위 (버튼, 입력창, 카드, 네비게이션 바 등) - UI 구성 요소의 중요성사용자 경험(UX)의 시각적인 핵심 역할 수행직관적인 인터페이스 제공 → 사용자의 학습 곡선 및 CTA 클릭 시간단축일관성 유지 → 브랜드 아이덴티티 강화- 기본적인 UI 구성 요소 종류1. 네비게이션(Navigation): 메뉴 바, 탭 바, 사이드 바2. 입력 요소(Input Elements): 버튼, 입력 필드, 체크박스, 라디오 버튼3. 콘텐..

[디자인부트캠프] Day13 l 피그마 BASIC 01

오늘은 오즈코딩스쿨 프로덕트 디자이너 부트캠프 2기 13일차입니다.13일차에는 피그마의 기능들에 대해 배웠습니다! 😊강의 내용 정리- Figma란?클라우드 기반 디자인 및 프로토타이핑 협업 기능이 뛰어나 팀원들과 실시간 작업 가능웹 브라우저에서 실행되므로 설치가 필요 없음- Figma의 주요 특징실시간 협업: 여러 사람이 동시에 편집 가능디자인 + 프로토타이핑: 디자인부터 사용자 흐름까지 한곳에서 작업버전 관리: 이전 디자인으로 쉽게 되돌릴 수 있음플러그인 & 커뮤니티 템플릿: 디자인 작업 속도를 높일 수 있는 다양한 리소스 제공- Figma 인터페이스 개요파일 및 프로젝트 관리:팀 프로젝트를 만들고, 파일을 생성하는 방법왼쪽 패널 (Layers & Assets 패널)레이어 구조 및 구성 요소 관리중앙..

[디자인부트캠프] Day12 l UI디자인을 위한 설계 01

오늘은 오즈코딩스쿨 프로덕트 디자이너 부트캠프 2기 12일차입니다.12일차에는 UI 디자인을 위한 설계에 대해 배웠습니다! 😊UI를 설계하기 위해서는 와이어프레임 개념과 작성 방법, 워크플로우 개념과 작성 방법, 실제 사례 분석 및 정리가 필요합니다.대학교 전공 시간 때 배워서 좋은 UI를 설계하기 위해서 위 모든 것들이 필요하다는 건 알고 있었지만 매번 할 때마다 머리가 아프고 힘든 건 어쩔 수 없는 것 같아요 🥹그래도 힘내서 차곡차곡 해나가 봅시다! 1) UI 설계란?UI(User Interface)는 사용자가 제품과 상호작용하는 시각적 요소이다.단순한 화면 디자인이 아닌 사용자가 제품을 쉽게 이해하고 사용할 수 있도록 계획하는 과정이다. - UI 설계에서 중요한 것들1. 사용자 중심의 설계: 사..

[디자인부트캠프] Day11 l UIUX 개념 입문 01

오늘은 오즈코딩스쿨 프로덕트 디자이너 부트캠프 2기 11일차입니다.11일차로 Chapter 2가 새로 시작됩니다! Chapter 2는 UIUX 개념에 대해서 입문하는 시간이었습니다 😊드디어 UIUX 시작이네요!강의 내용 정리 1) UI/UX와 프로덕트 디자이너란? UI(User Interface) : 사용자가 제품과 상호작용하는 시각적/물리적 인터페이스 _컬러, 타이포그래피, 아이콘UX(User eXperience) : 사용자가 제품이나 서비스와 상호작용하는 과정에서 얻는 총체적 경험 _배경, 요인, 행동방식  2) 프로덕트 디자이너의 역할과 중요성1. 사용자 문제를 해결하기 위한 제품 설계2. UI/UX를 통해 사용자와 비즈니스를 연결3. 프로토타이핑 및 사용자 피드백 수집 필요한 역량1. 문제 해결..

[디자인부트캠프] Day10 l 디자인 이론과 심리학

오늘은 오즈코딩스쿨 프로덕트 디자이너 부트캠프 2기 10일차입니다.10일차로 Chapter 1이 마무리가 됩니다! 벌써 하나의 챕터가 마무리되는 시간이라니 챕터 2도 기대가 됩니다 😊전국으로 눈이 많이 내리는 금요일이네요! 다들 눈길 조심하시고 행복한 금요일 보내세요 🤍 오늘은 디자인과 심리학의 관계, 시각적 원리, 색채  심리학, 사용자 경험과 심리적 설득 기법에 대해 배웠습니다! 1) 디자인과 심리학은 왜 중요한가?: 디자인은 단순한 시각적 요소가 아니라, 사람의 감정과 행동을 유도하는 도구이며 성공적인 디자인은 사람의 심리를 이해하고 반영한 결과물  2) 시각적 원리    3) 사용자 경험과 심리적 설득 기법  DAY 10 과제‘나’를 담은 퍼스널 브랜드 명함과 최종 디자인 포스터 제출어제 어도..

[디자인부트캠프] Day09 l AI 시대의 디자인_03

오늘은 오즈코딩스쿨 프로덕트 디자이너 부트캠프 2기 9일차입니다.어제에 이어 오늘은 어도비 익스프레스에 대해서 배웠습니다! 다양한 AI 기술들이 발전하면서 배워야 하는 것들이 점점 많아지는 요즘입니다 😊  어도비 익스프레스란?어도비 파이어 플라이와 같이 생성 AI가 가능하지만, 이미지 증에 부분적으로 생성하는 파이어 플라이와는 다르게 폰트 질감, 일러스트 등 원하는 다양한 요소가 많이 제공되고 있습니다. 사용방법은 어도비 익스프레스 사이트(https://new.express.adobe.com/)로 로그인하면 어도비 익스프레스 무료로 이용하기 버튼을 클릭하면 됩니다. 강사님께서 알려주신 어도비 익스프레스 도구 방법들을 천천히 익히고 나서 어제에 이어 저의 퍼스널 브랜드 카드 뉴스를 만들어봤습니다! 오늘의..