UXUI 부트캠프 5일차

KSS·2026년 1월 5일
오늘 한일
디자인 카타 작성
피그마 5강 완강 및
5주차 과제 제출
피그마 4강 강의 및 과제 복습
온보딩 실습 2-카드까지

내일 할일
피그마 5강 강의 및 과제 복습
온보딩 실습 진행
AI 강의 1강 완강

오늘 강의&실습 내용

4일차에 이어서 화면 만들기 실습 완료

프로토타입
:시제품, 실제 제품을 만들지 않고 아이디어를 테스트해볼 수 있는 것
-Lo-fi:낮은 단계의 프로토타입, 전체적인 흐름을 빠르게 맞춰 볼 수 있는 수준
-Hi-fi:높은 단계의 프로토타입, 실제 제품과 거의 같거나 유사한 수준

프로토타이핑:프로토타입을 만들거나 사용해 테스트하는 것

프로토타입을 만드는 이유
-실제 제품을 만들지 않고 아이디어를 검증해 볼 수 있음
-팀 구성원들과 시각적인 결과물로 소통할 수 있음
-부족하거나 놓친 부분 확인 가능

오버플로우:프레임 밖으로 컨텐츠가 넘어가는 경우
-오버플로우 발생 시 프레임 밖으로 넘어간 컨텐츠를 스크롤로 보여줄 수 있음
스크롤이 되게 하려면 프레임보다 컨텐츠가 더 길어서 넘쳐야 함!

스크롤 컨테이너
:오버플로우가 생긴 프레임을 스크롤로 만들어주는 기능
스크롤을 만들기 위해선
-실제 스크롤이 되어야 하는 컨텐츠와
스크롤 속성을 적용할 컨테이너(컨텐츠 보다 작은 프레임)가 있어야 함

플로우:프로토타입의 흐름

플로우 구성요소
-트리거(총의 방아쇠):액션을 시작하는 조건, 이유, 계기, 어떤 이벤트(사건)가 발생하면 실행할 건지를 설정
-액션:트리거로 인해 만들어지는 결과, 어떤 이벤트가 발생하면 어떻게 되는지를 설정
-애니메이션:트리거를 통해 액션을 실행할 때, 어떻게 실행할 건지를 뜻함(인터랙션 형태)

*프로토타입 설계 시 ‘~하면, ~하게 ~한다‘라고 생각하기
(ex.버트을 누르면(트리거) 색상이 천천히(애니메이션) 바뀐다(액션)

스마트 애니메이트
:이름이 같은 요소가 있다면 화면 이동 시 그 요소의 변화를 자연스럽게 만들어주는 기능
*반드시 작동하는 요소의 이름이 같아야 함

핸드오프(손을 떠나다)
:개발자에게 전달하기 위해 디자인 사양을 정리한 문서

핸드오프 작성 시 지켜야 할 원칙
-통일된 구성, 최대한 자세하게, 쉬운 언어로

연습문제(카드)

위쪽처럼 아이콘이 들어가야 하는데 한참 헤매다가 겨우 완성했다。。
(텍스트 프레임과 아이콘이 들어갈 프레임이 따로 있어야 
아이콘이 텍스트 프레임 밖에 붙는다!)
강의만 듣다가 혼자해보는 실전?은 다르구나 느끼고
내일 다시 만들어봐야겠다 다짐,,
시간이 꽤나 많이 걸려서 다음부터는 튜터님께 물어봐야 하나 고민이다
profile
UXUI 도전!!!

0개의 댓글