오즈코딩스쿨 베이스캠프(디자이너 ) #13 UI 컴포넌트와 프로토타이핑

1. UI 컴포넌트의 이해

1) 컴포넌트

- 정의: 디자인 요소(버튼, 카드 모달 등)를 하나의 단위로 만들어 재사용하는 객체

- 장점: 일관성 유지, 효율적인 수정 및 관리, 작업 속도 향상.

 

2) 인스턴스 개념

- 원본과 인스턴스 관계: 원본 컴포넌트 수정 시 인스턴스가 자동 업데이트 됨

- 사용 예시: 여러 페이지에서 동일한 버튼 컴포넌트를 사용하여 디자인 통일성 확보

 

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

1) 프로토타입

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

 

2) 화면 간 연결 및 인터랙션

- 링크 연결: 버튼 클릭 시 다른 프레임으로 이동하는 인터랙션 설정

- 애니메이션 효과: 전환 애니메이션을 통해 자연스러운 사용자 경험 제공

 

3)피드백 수정

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

 

 

<실습>

컴포넌트 우째우째 만들었는데 ㅋㅋㅋㅋ 하다보니 컴포넌트는 잘 안쓰고 삭제하고 다른걸로 만들어 버림,., 

어찌됬건 컴포넌트를 고칠수 있다는게 인스턴스 개념이니깐...

그리도 상세페이지 2개 정도 만들라고 해서 만들었는데 이거 만드는게 일이네...

아직 미숙한게 눈에 보인다... 폰트하며 위치 색..ㅠㅠ