[제로베이스 UI/UX 파트타임 스쿨] 14주차 - (화) 컴포넌트 디자인 - ETC(1)

제로베이스 93일차 학습노트이다.

오늘은 컴포넌트 디자인 수업의 마지막 파트로, 지금까지 배운 내용을 정리하고 응용해보는 ETC 실습을 진행했다. Cards, Lists 외에도 실제 인터페이스에서 자주 쓰이는 다양한 컴포넌트들을 직접 구성해보는 시간이었다.

---

오늘의 강의 내용

1. ETC

먼저 다이얼로그(Dialog) 컴포넌트를 만들어봤다. 다이얼로그는 사용자에게 중요한 정보를 전달하거나 확인을 요청할 때 사용되는 UI 요소인데, ‘Two-line dialog header’라는 이름처럼 제목과 부제목이 들어가는 기본형을 제작했다. 타이포그래피의 계층 구조, 버튼의 정렬 방식, 그림자와 여백 설정까지 꼼꼼히 다뤄봤다. 배경을 반투명하게 설정하여 포커스를 유도하는 기법도 함께 실습했다.

 

그다음으로는 이미지와 텍스트, 알림 메시지, 액션 버튼이 결합된 형태의 인터랙티브 카드 컴포넌트를 만들어봤다. 예를 들어 사진 전송 실패 상황에서 "사진을 보낼 수 없습니다. 5초 후 다시 시도해주세요."라는 안내 문구와 함께 나타나는 알림을 디자인했는데, 이때 사용자에게 어떤 정보가 우선적으로 전달되어야 하는지를 중심으로 시각적 구성과 컬러 사용을 조정하는 실습이었다. 마지막으로는 상품 정보 UI를 구성해보는 실습을 진행했다. 여러 가지 제품 옵션을 선택하고, 설명 텍스트를 확인한 뒤 장바구니에 담을 수 있는 구조로, 버튼 간 간격이나 컬러 밸런스 등 사용자의 구매 행동을 유도하는 레이아웃 구성에 집중했다.

---

오늘은 ETC라는 이름처럼 다소 자유로운 방식으로 다양한 컴포넌트를 실습해보면서, 지금까지 배운 UI 구성 원칙들을 복습하고, 실전에서 어떤 식으로 응용할 수 있을지 감각을 익히는 좋은 시간이 되었다. 다음 수업에서는 지금 만든 컴포넌트들을 어떻게 실제 인터랙션으로 연결해줄 수 있을지, 프로토타이핑 단계로 넘어갈 예정이다.

 

이 글은 제로베이스 UI/UX 파트타임 강의 자료 일부를 발췌하여 작성되었습니다.