챗지피티취미독학

1차시부터 7차시까지 우리는도구 이해 → 화면 구조 → UI 요소 → 컴포넌트 → Auto Layout → 디자인 시스템 → 프로토타입까지UI/UX 설계의 전 과정을 단계적으로 경험했다.이제 마지막 단계다.이번 8차시의 목표는 하나다.👉 Figma로 ‘설명 없이도 이해되는 화면’을 직접 완성하는 것이 차시는 학습이 아니라 실전이다.1. 미니 프로젝트의 목적미니 프로젝트는기능을 더 배우기 위한 시간이 아니다.지금까지 배운 개념을 스스로 조합하나의 서비스 흐름을 처음부터 끝까지 설계결과물을 공유 가능한 형태로 완성👉 “이 정도면 만들 수 있다”는 감각을 얻는 것이 핵심이다.2. 프로젝트 주제 예시 (선택 1)아래 중 하나를 선택하거나,자유 주제를 정해도 좋다.추천 주제학교 공지 앱 메인 화면간단한 할 일..

6차시까지 우리는 화면을 설계하고, 반복을 시스템으로 만들고,색상과 텍스트에 규칙을 부여했다.하지만 아직 이 디자인은 정지된 화면이다.이번 7차시에서는 이 화면에 동작을 부여한다.바로 프로토타입(Prototype)이다.이번 차시의 목표는 명확하다.👉 Figma로 “설명하지 않아도 이해되는 디자인”을 만드는 것 1. 프로토타입이란 무엇인가?프로토타입이란👉 사용자가 실제로 누르고 이동해볼 수 있는 시연용 화면이다.버튼 클릭 → 다음 화면 이동팝업(오버레이) 표시화면 전환 애니메이션✔ 개발 없이도✔ 서비스의 흐름을 전달할 수 있다2. 왜 프로토타입이 중요한가?프로토타입은 단순한 시연이 아니다.기획 의도 전달사용자 흐름 검증피드백 수집개발 전 오류 발견👉 “이 버튼을 누르면 뭐가 나오죠?”이 질문을 없..

5차시에서 Auto Layout을 통해디자인을 ‘정렬하는 작업’에서 ‘구조를 설계하는 일’로 바꿨다.하지만 여전히 문제가 하나 남아 있다.“이 파란색, 저 파란색… 뭐가 기준이지?”“제목 글자 크기는 몇이었지?”이 혼란을 없애는 것이 바로 디자인 시스템이다.이번 차시에서는 Figma에서색상과 텍스트에 명확한 규칙을 부여하는 방법을 배운다. 1. 디자인 시스템이란 무엇인가?디자인 시스템이란👉 디자인 요소를 ‘감각’이 아니라 ‘규칙’으로 관리하는 체계다.그중에서도 가장 기본이 되는 것이Color Style (색상 규칙)Text Style (텍스트 규칙)✔ 디자인 시스템은 대기업만 쓰는 것이 아니다✔ 작은 프로젝트일수록 더 필요하다2. 왜 스타일(Style)이 필요한가?스타일을 쓰지 않으면 이런 일이 벌어..

4차시에서 우리는 반복되는 UI를 컴포넌트(Component)로 설계했다.하지만 버튼 안의 텍스트가 길어지거나, 카드 안의 요소가 늘어나면정렬과 간격은 다시 무너진다.이 문제를 한 번에 해결하는 기능이 바로 Auto Layout이다.이번 차시에서는 Figma의 핵심 기능 중 하나인Auto Layout을 통해 ‘손으로 맞추는 디자인’에서 벗어나는 방법을 익힌다.1. Auto Layout이란 무엇인가?Auto Layout은👉 요소의 정렬, 간격, 크기 변화를 자동으로 관리하는 기능이다.텍스트 길이가 바뀌어도 버튼 크기 자동 조정요소 추가/삭제 시 간격 자동 유지반응형 UI의 기초즉, Auto Layout은디자인을 ‘고정된 그림’이 아니라 ‘움직이는 구조’로 만든다.2. 언제 Auto Layout을 써야 할..

3차시까지 우리는 버튼, 카드 같은 UI 요소를 직접 만들어보는 단계까지 왔다.하지만 여기서 한 가지 문제가 생긴다.버튼이 10개라면,수정도 10번 해야 할까?이 질문에 대한 해답이 바로 컴포넌트(Component)다.이번 차시에서는 Figma의 핵심 개념이자실무에서 가장 큰 차이를 만드는 기능을 다룬다. 1. 컴포넌트란 무엇인가?컴포넌트란👉 반복해서 사용하는 UI 요소의 ‘원본 설계도’다.버튼카드네비게이션 바리스트 아이템이처럼 여러 화면에서 반복되는 요소는한 번만 제대로 만들고, 계속 재사용해야 한다.2. 왜 컴포넌트가 중요한가?컴포넌트를 쓰지 않는 디자인은겉보기엔 비슷해 보여도 유지보수가 불가능한 구조다.컴포넌트 사용 전버튼 하나 수정 → 모든 버튼 수동 수정디자인 규칙 쉽게 무너짐컴포넌트 사용 ..

1차시에서는 Figma라는 도구의 정체를 이해했고,2차시에서는 화면을 Frame과 레이아웃으로 나누는 사고를 익혔다.이제부터가 진짜 시작이다.이번 3차시에서는 Figma를 이용해화면 안에 실제로 ‘UI 요소’를 만들어본다.버튼, 카드, 텍스트.우리가 매일 누르고 보는 것들의 정체를직접 만들어보는 단계다. 1. UI 요소란 무엇인가?UI 요소(UI Element)란사용자가 보고, 읽고, 클릭하는 최소 단위 구성 요소다.대표적인 UI 요소는 다음과 같다.텍스트(Text)버튼(Button)카드(Card)아이콘(Icon)입력창(Input)👉 화면(Frame)은 공간이고, UI 요소는 그 공간을 채우는 부품이다.2. 텍스트(Text) — 정보의 핵심텍스트 도구 사용하기단축키: T클릭 후 바로 입력 가능기본 속성..

지난 1차시에서 우리는 Figma가단순한 디자인 툴이 아니라 화면으로 사고하는 도구라는 것을 확인했다.이번 2차시의 핵심은 하나다.👉 “디자인은 그리는 것이 아니라, 나누는 것이다.”앱과 웹 디자인의 출발점은 색상도, 폰트도 아니다.화면을 어떻게 나누고 구조화하느냐가 전부다. 1. Frame이란 무엇인가?Frame은 Figma에서 ‘화면 한 장’을 의미한다.모바일 앱의 한 페이지, 웹사이트의 한 화면이라고 생각하면 된다.Frame의 역할화면 단위 설계레이아웃 기준점반응형·프로토타입의 기본 단위👉 UI 디자인 = Frame을 설계하는 일2. Frame vs Group (중요)초보자가 가장 많이 헷갈리는 개념이다. 구분 Frame Group 의미화면/컨테이너단순 묶음크기독립적내부 요소에 종속레이아웃..

에듀테크 창업에서 5차시는 첫 번째 전환점이다.이전까지는 문제를 정의하고, 인터뷰로 검증하고, 솔루션과 UX를 설계했다면이번 차시는 실제로 눈에 보이는 제품(Prototype)을 만드는 단계다.많은 예비 창업자가 이 단계에서 막힌다.“개발을 못 해서 만들 수 있을까?”“처음부터 완벽하게 만들어야 하나?”정답은 아니다.프로토타입은 “작동하는 느낌”만 있어도 충분하다.중요한 것은 빠르게 만들고, 빠르게 테스트하는 것이다.1. 프로토타입 제작의 목적프로토타입(Prototype)은 제품이 아니라 가설을 검증하는 도구다.프로토타입의 목적은 두 가지뿐이다.사용자가 “이 흐름이 실제로 문제를 해결해줄 것 같다”라고 느끼게 하는 것실제 MVP 개발 전에 UX 흐름이 맞는지 검증하는 것즉, 깔끔함보다 속도가 중요하다.2..

에듀테크 MVP의 성공 가능성을 결정하는 요소 중 하나가 바로 UX(User Experience) 설계다.수업이라는 시간적 제약, 학생·교사가 즉시 이해해야 하는 인터페이스, 모바일·웹 환경의 혼용 등…교육 서비스의 UX는 일반 서비스보다 훨씬 복잡하다.이번 4차시에서는 실제 MVP 디자인의 출발점이 되는사용자 여정(User Journey) 설계Figma를 활용한 UX 와이어프레임에듀테크 UX를 설계할 때 꼭 지켜야 할 규칙을 실전 중심으로 다룬다.1. 에듀테크 UX는 왜 일반 서비스와 다를까?교육 서비스 UX에서 생기는 문제는 대부분 다음 세 가지로 인해 발생한다.1) 수업 시간(40~50분) 안에 끝나야 한다교사가 따로 설명해줄 시간이 없다.즉, “처음 본 학생도 바로 사용할 수 있어야” 한다.2) ..