9. UI 컴포넌트와 프로토타이핑

9강을 학습해보자

오늘은 좀 생소한 단어이다

UI 컴포넌트와 프로토타이핑을 학습할 것인데,
살면서 처음 들어본 단어들이다9강을 학습해보자

1. UI 컴포넌트의 이해

컴포넌트란?

정의: 디자인 요소(버튼, 카드, 모달 등)를 하나의 단위로 만들어 재사용하는 객체.
장점: 일관성 유지, 효율적인 수정 및 관리, 작업 속도 향상.

프리셋과 같은 개념인걸까? 하다보면 알겠지

인스턴스 개념

원본과 인스턴스 관계: 원본 컴포넌트 수정 시 인스턴스가 자동 업데이트됨.
사용 예시: 여러 페이지에서 동일한 버튼 컴포넌트를 사용하여 디자인 통일성 확보.

인스턴스가 뭘까? 아무튼 컴포넌트라는 것을 이용하면 통일성있는 디자인을 만들 수 있고
수정시 하나만 바꿔도 다른것도 바꿀수 있는 효율적인 개념일까 추측해본다.

2. 프로토타이핑 기본 개념

프로토타입이란?

정의: 실제 동작하는 인터랙티브 모형으로, 사용자 흐름 및 인터랙션을 시뮬레이션하는 도구.

화면 간 연결 및 인터랙션

링크 연결: 버튼 클릭 시 다른 프레임으로 이동하는 인터랙션 설정.
애니메이션 효과: 전환 애니메이션을 통해 자연스러운 사용자 경험 제공.

피드백 및 수정

사용자 테스트: 프로토타입을 통해 사용자 흐름을 검증하고, 개선점을 도출.

음 아무래도 이건 잘모르니 수강시작하면 수정하도록 하겠다

---

자 그럼 실습으로 넘어가자

먼저 실습1

실습 1: 기본 UI 컴포넌트 제작

실습 단계:

새로운 프레임 내에서 버튼 디자인: 사각형 도형을 만들고 가운데에 “버튼” 텍스트 배치.
디자인 요소(버튼 배경, 텍스트 스타일 등)를 설정한 후, 사각형과 텍스트를 모두 선택하여 “Create Component” 실행.
카드 컴포넌트 제작: 이미지 영역, 제목, 간단한 설명 텍스트를 포함하는 카드 레이아웃 구성 후 컴포넌트로 저장.

실습 목표:

버튼과 카드 컴포넌트가 생성되어, 이후 다른 페이지나 프레임에서 재사용 가능.
컴포넌트 원본과 인스턴스(복사본) 개념을 체험하며, 하나의 수정이 여러 요소에 반영되는 효과 확인.

---

그럼 다음 실습2

실습 2: 컴포넌트 인스턴스 활용

실습 단계:

제작한 버튼 컴포넌트를 드래그하여 여러 곳에 복제(인스턴스 생성).
복제된 인스턴스의 텍스트나 색상 등 일부 속성을 변경해보고, 원본 컴포넌트 수정 시 인스턴스 업데이트 여부 확인.

실습 목표:

동일한 디자인 요소가 여러 페이지에 일관되게 적용됨.
원본 컴포넌트 수정 시 모든 인스턴스에 자동으로 업데이트되는 것을 확인할 수 있음.

먼저 화면을 보면 내가 만들어놓은 메인컴포넌트가 있다. 아까 만들어놨던 프레임과 버튼에 컴포넌트를 적용해 만들었두었다.

먼저 화면을 보면 내가 만들어놓은 메인컴포넌트가 있다. 아까 만들어놨던 프레임과 버튼에 컴포넌트를 적용해 만들었두었다.

이 버튼이 메인컴포넌트이고 내가 복사 붙여넣기를 하면 컴포넌트와 똑같은 형태의 버튼과 프레임이 생성된다.
컴포넌트는 적용되지 않은 채로 생성되면, 메인컴포넌트를 변경하지 않는 이상 개별로 변경이 가능하고
메인 컴포넌트를 변경하면 모두가 변한다

이 스크린샷처럼 말이다. 메인컴포넌트의 투명도를 조정하자 모든 복사된 버튼들의 투명도가 변했다.

그럼 다음은 실습3인데 일단 개념부터 이해하고

실습 3: 간단한 프로토타입 제작

실습 단계:

홈 화면, 상세 페이지 등 2~3개의 프레임 생성.
각 프레임에 제작한 UI 컴포넌트(버튼, 카드 등)를 배치하여 실제 웹 페이지와 유사한 레이아웃 구성.
상단의 Prototype 탭으로 전환한 후, 각 버튼에 “On Click” 인터랙션을 설정하여 다른 프레임으로의 이동 연결.
미리보기(Play) 버튼을 눌러 인터랙션 및 화면 전환 동작 확인.

실습 목표:

사용자가 버튼 클릭 시 다른 페이지로 자연스럽게 전환되는 인터랙션 시뮬레이션 결과 확인.
간단한 사용자 흐름을 가진 프로토타입이 완성되어, 실제 서비스 환경에서의 흐름을 테스트 가능.

보니까 인터랙티브 디자인을 보통 프로토타입으로 만들때 자주 사용하는 것 같다

3단계는 이해가 잘 안가서 나중에 해보고 수정해야겠다.