[제로베이스 UI/UX 파트타임 스쿨] 14주차 - (월) 컴포넌트 디자인 - Lists & 인터렉션을 공부하는 팁

제로베이스 92일차 학습노트이다.
오늘은 컴포넌트 디자인 수업의 일환으로 Lists와 인터렉션을 공부하는 팁에 대해 배웠다. 이전까지 버튼, 카드, 내비게이션처럼 시선을 끄는 컴포넌트를 주로 다뤘다면, 리스트는 보다 기능적인 UI 구성요소였다. 하지만 앱이나 웹에서 리스트는 정보를 나열하고 전달하는 데 있어 매우 핵심적인 요소이기 때문에 이번 강의는 단순함 속에서도 얼마나 섬세한 설계가 필요한지 느낄 수 있었다. 특히 사용자가 리스트를 쉽게 읽고 이해할 수 있도록 구성하는 것이 얼마나 중요한 UX 요소인지를 체감할 수 있었다.

---

오늘의 강의 내용

 

1. Lists

리스트는 여러 항목을 정렬해서 보여줄 때 사용하는 기본적인 컴포넌트다. 실습에서는 Sketch를 활용해 리스트의 다양한 변형을 디자인해보았다. 단순히 텍스트만 나열하는 것이 아니라, 좌측에 아이콘이나 썸네일 이미지를 넣고, 우측에는 보조 정보나 액션 버튼을 배치하는 등 리스트 하나에도 다양한 형태와 정보 계층을 담을 수 있었다.
또한 리스트 항목 사이를 구분하기 위한 디바이더의 위치와 간격 조절, 텍스트 간의 시각적 대비, 여백 설정 등 디테일한 요소들을 고려하며 구성하는 연습도 함께 진행되었다. 리스트는 구조가 단순해 보이지만, 사용자 입장에서 정보를 빠르게 읽고 액션을 취할 수 있도록 설계하기 위해서는 작은 부분까지 신경 써야 한다는 것을 배웠다.

 

2. 인터렉션을 공부하는 팁

실제로 서비스를 론칭할 때 인터렉션은 서비스 화면만큼이나 중요한 요소이다. 각 화면들이 어떻게 이어지고 어떻게 전환되는지 그 사용자와 상호작용이 이를 통해 정해지며, 그래서 사용자 경험도 매우 달라진다. 이러한 인터렉션은 하나부터 열가지 배우고 시작하기 보단 좋은 인터렉션들을 많이 보고 수집해서 감각을 올리는 게 더 효율적인 공부 방법이다. 그래서 드리블 닷컴같은 사이트에서 레퍼런스를 보거나 서비스에서 마음에 드는 인터렉션이 있다면 화면 녹화를 통해 저장해두는 것이 좋다.

---

특히 모바일 UI에서는 손가락으로 터치하기 쉬운 크기와 간격을 확보하는 것이 중요하며, 리스트가 반복되더라도 지루하지 않고 정돈된 인상을 줄 수 있도록 디자인 가이드를 따르는 것도 필요하다. 실습을 통해 리스트 컴포넌트에 대한 이해도를 높일 수 있었고, 앞으로 다양한 페이지에 리스트를 적용할 때 참고할 수 있는 기준이 생긴 것 같아 유익한 수업이었다. 인터렉션도 제품 디자인의 감각을 키우듯이 보는 눈을 키워나가는 것이 중요해보인다.

 

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