본문 바로가기

프로덕트디자인

디자인부트캠프 Chapter 2. DAY18 생성형 AI 정리텍스트, 이미지, 음악, 코드 같은 새로운 콘텐츠를 만들어내는 인공지능 기술기존 데이터를 학습한 뒤 사람처럼 자연스럽고 창의적으로 결과물을 생성함 ✅ 대표적인 생성형 AI 종류텍스트ChatGPT (OpenAI)대화, 글쓰기, 번역, 요약 등 텍스트 작업에 특화됨Gemini (구글)텍스트, 이미지, 영상 등 멀티모달 처리 가능구글 검색이나 지메일, 문서랑 연동되기 쉬움Copilot (마이크로소프트)개발자를 위한 코딩 지원 AI코드 자동완성이나 오류 수정 등에 도움Claude (Anthropic)긴 문서 처리, 논리적 요약, 한국어 대응력도 강함시각적 자료나 문서 해석에 좋음이미지·영상DALL·E텍스트로 이미지 만들기자연어 이해력 좋아서 디테일한 생성 가능미드저니예술, 디자인 쪽에 많이 활용.. 더보기
디자인부트캠프 Chapter 2. DAY17 ✅ 사용자 습관 이해하기웹이나 앱을 만들 때 기능이나 화면 구성도 중요하지만사용자가 어떤 식으로 사용하는지 그 습관 자체를 이해하는 게 먼저임사람들은 익숙한 흐름대로 정보를 찾고 움직이는 경향이 있어서그 흐름을 방해하지 않는 선에서 새로운 기능을 녹여야 사용성이 좋음  ✅ UI 디자인 핵심 정리명확성버튼이나 아이콘이 무슨 기능인지 바로 알아볼 수 있어야 함헷갈릴 땐 아이콘이랑 텍스트 같이 써주는 게 좋음일관성색상이나 폰트 스타일, 버튼 위치 등 전반적으로 통일감 있게같은 기능은 항상 같은 방식으로 보여주는 게 안정적임단순함불필요한 요소는 빼고 중요한 정보만 남기는 게 기본필요한 것만 눈에 띄게 하고 나머지는 최소한으로 정리피드백 제공클릭하거나 입력했을 때 반응이 바로 보여야 함로딩 중이면 스피너 같은 시.. 더보기
디자인부트캠프 Chapter 2. DAY 15 피그마(Figma) 레이아웃 그리드웹이나 앱 UI 디자인을 하다 보면 콘텐츠를 일관성 있게 배치하고 정돈된 느낌을 주기 위해 "레이아웃 그리드"를 사용 레이아웃 그리드란?레이아웃 그리드는 디자인 요소를 정렬하고 일관된 구조를 만들기 위한 가이드라인이다. 콘텐츠 영역을 나누는 컬럼, 마진, 거터(Gutter)를 기준으로 삼아 디자인이 정돈되게 보이도록 도와준다. 피그마에서 레이아웃 그리드 설정하는 법프레임(Frame) 생성F 키를 눌러 프레임을 만들고, 원하는 사이즈를 설정한다. (예: 1440×1024)레이아웃 그리드 추가프레임 선택 후 오른쪽 패널에서 Layout grid 클릭 → + 버튼 눌러 추가그리드 타입 설정Grid: 정사각형 격자 (아이콘, 카드 등 균일 정렬할 때 유용)Columns: 세로 .. 더보기
디자인부트캠프 Chapter 2. DAY 14 컴포넌트(Component)란?반복되는 요소를 한 번에 관리할 수 있는 재사용 가능한 디자인 단위변경사항을 **마스터(원본) → 인스턴스(복제본)**에 자동 반영 가능버튼, 아이콘, 카드, 네비게이션 등 UI 요소를 체계적으로 관리할 때 사용 컴포넌트 만드는 방법요소 선택 후 Cmd/Ctrl + Alt + K → 컴포넌트로 변환오른쪽 패널에서 이름 설정Components 탭 또는 Assets에서 재사용 가능 인스턴스란?컴포넌트를 복제한 객체마스터 컴포넌트의 구조를 유지하면서 일부 속성만 수정 가능색상, 텍스트, 아이콘 등 커스터마이징 가능 (디자인 시스템 기반 작업에 필수) Variants (상태/스타일 통합)여러 컴포넌트를 하나의 세트로 묶어 상태/사이즈/버전 등을 통합 관리예: Button → Typ.. 더보기
디자인부트캠프 Chapter 2. DAY 13 1. 피그마 인터페이스 기본좌측: 페이지 / 레이어 구조 확인 및 관리중앙: 디자인 캔버스우측: 선택한 요소의 속성 조정 패널 2. 기본 도형 및 구성 요소 만들기도형 툴: 사각형(R), 원(O), 선(L) 등 생성 가능텍스트(T): 텍스트 요소 추가 가능속성 조정: 색상, 테두리, 그림자 등 우측 패널에서 설정 3. Boolean 연산 기능 shift로 2개 이상의 도형 선택 후, 디자인의 더보기에서 클릭 / 단축키Union(합집합): 선택한 도형을 하나로 병합Subtract(차집합): 위에 있는 도형의 영역을 아래 도형에서 제거Intersect(교집합): 겹치는 영역만 남김Exclude(제외): 겹치는 영역만 제거하고 나머지 유지벡터 아이콘 디자인, 복잡한 형태 제작에 유용Alt + Shift + U.. 더보기
디자인부트캠프 Chapter 2. DAY 12 UI 설계UI는 사용자가 제품과 상호작용하는 시각적 요소단순한 화면 디자인이 아닌 사용자가 제품을 쉽게 이해하고 사용할 수 있도록 계획하는 것 UI에서 중요한 것들디자인 일관성: 버튼 크기, 컬러, 타이포그래피 등 일관된 스타일 가이드 필요정보 구조화: 기능을 체계적으로 정리하고 정보가 논리적인 흐름을 가지도록 함 UX UI Design Process 정보구조 설계(IA)와이어 프레임(Wireframe)선(Wire)으로 만든 틀(Frame)서비스(웹사이트, 앱)의 UI와 기능을 나타내는 시각적 다이어그램UI디자인의 초기 설계도 기능 배치와 화면 구조를 시각적으로 표현하는 과정컬러 폰트 이미지 없이 기능과 정보 배치를 중심으로 제작 와이어 프레임의 중요성1. 디자인을 시작하기 전에 기능과 구조를 먼저 정리.. 더보기
디자인부트캠프 Chapter 1. DAY 11 현재 네이버 지도에서는 버스 도착 정보를 기본적으로 실시간 기준으로 제공하고 있다. 하지만 배차 간격이 긴 노선을 이용하거나 몇 시간 이후에 버스를 이용할 계획이 있을 때, 실시간 도착 정보보다 과거 시간표를 활용하는 것이 더 유용한 경우가 많다. 불편한 점도착예정인 버스가 있을 경우, 실시간 도착 정보만 기본 제공 
→ 과거 시간표를 확인하려면 여러 단계의 클릭이 필요함과거 시간표를 보려면 번거로운 경로를 거쳐야 함버스 번호 검색 → 노선 상세 보기 → 시간표 보기 → 특정 정류장 선택 → 시간표 스크롤(길찾기 도중의 경우) 버스 선택 → 주변 정류장 선택 → 시간표 선택 배차 간격이 긴 버스(예: 30분~1시간 이상)일수록 과거 시간표를 자주 확인해야 하지만 과정이 너무 복잡함
몇 시간 후 버스를 이.. 더보기
디자인부트캠프 Chapter 1. DAY 10 오늘의 학습 목표[수업] 그리드 알기[과제] 쿠팡 UI 화면 1개 제작UI/UX 디자인에서의 그리드 시스템 (Figma 활용)그리드는 UI/UX 디자인에서 레이아웃을 정리하고 균형을 맞추는 필수 요소웹과 앱 디자인에서 효과적으로 활용하는 방법 정리 1. 그리드(Grid)란?그리드는 디자인 요소를 정렬하고 배치하는 격자 구조그리드 시스템은 페이지나 화면의 레이아웃을 구성하는보이지 않는 가이드라인으로,화면을 체계적으로 구성하기 위한 규칙✅ 정렬과 일관성 유지✅ 반응형 디자인 적용 가능✅ 디자인의 시각적 균형 조절웹 & 앱 디자인에서 사용되는 그리드 예시:12 컬럼 그리드 (웹 디자인)4~6 컬럼 그리드 (모바일 UI)모듈형 그리드 (대시보드 & 카드형 UI)  2. 주요 개념 정리 🔹 오프셋(Offset).. 더보기

티스토리툴바