[12주차] - [9기] 타입스크립트로 함께하는 웹 풀 사이클 개발(React, Node.js) 10회차 - 60

다양한 UI 경험을 통해 배운 것들 (드롭다운, 탭, 토스트, 모달, 무한 스크롤)

이번에 여러 UI 컴포넌트를 직접 구현하면서 단순히 “동작하게 만드는 것”을 넘어서,
사용자 경험(UX)과 상태 관리의 중요성을 깊게 느낄 수 있었다.

구현한 기능은 다음과 같다.

• 드롭다운 (Dropdown)
• 탭 (Tab)
• 토스트 (Toast)
• 모달 (Modal)
• 무한 스크롤 (Infinite Scroll)

각 기능을 구현하면서 느낀 점을 정리해보았다.

---

1. 드롭다운 (Dropdown)

드롭다운은 단순해 보이지만, 상태 관리가 핵심이었다.

• 열림 / 닫힘 상태 관리
• 외부 클릭 시 닫힘 처리
• 선택 값 반영

특히 "외부 클릭 감지" 부분에서 이벤트 버블링과 ref 사용이 중요했다.
이걸 제대로 처리하지 않으면 UX가 굉장히 어색해진다.

👉 느낀 점

UI는 보여지는 것보다 “상호작용”이 더 중요하다.

---

2. 탭 (Tab)

탭은 구조적으로는 간단하지만,
선택된 상태를 기준으로 UI를 동기화하는 경험을 할 수 있었다.

• active 상태 관리
• 조건부 렌더링
• 스타일 변화

👉 느낀 점

상태 하나로 UI 전체가 바뀌는 구조를 이해하는 데 큰 도움이 됐다.

---

3. 토스트 (Toast)

토스트는 UX적으로 매우 중요한 요소였다.

• 일정 시간 후 자동 사라짐
• 여러 개 동시 표시
• 애니메이션 처리

특히 setTimeout + 상태 관리 조합을 다루면서
비동기 흐름을 이해하는 데 도움이 됐다.

👉 느낀 점

“잠깐 보여주는 UI”도 설계가 필요하다.

---

4. 모달 (Modal)

모달은 단순 UI가 아니라 레이어 개념을 이해하게 해줬다.

• 배경 클릭 시 닫힘
• 이벤트 전파 제어 (stopPropagation)
• 포커스 관리

👉 느낀 점

UI는 단순 DOM이 아니라 “레이어 구조”로 생각해야 한다.

---

5. 무한 스크롤 (Infinite Scroll)

가장 어렵고, 가장 많이 배운 기능이었다.

• scroll 이벤트 감지
• 데이터 추가 로딩
• 로딩 상태 관리
• 성능 고려

특히 Intersection Observer를 활용하면 훨씬 깔끔하게 구현할 수 있다는 것도 알게 되었다.

👉 느낀 점

성능과 UX를 동시에 고려해야 하는 대표적인 기능

---

전체 회고

이번 UI 구현을 통해 가장 크게 느낀 점은 다음이다.

1. 상태 관리가 곧 UI다

UI는 결국 상태(state)에 의해 움직인다.

2. 사용자 경험은 디테일에서 나온다

• 외부 클릭 처리
• 자연스러운 애니메이션
• 응답성 있는 인터랙션

이런 작은 것들이 UX를 결정한다.

3. 단순 구현 → 설계로 사고가 확장됨

처음에는 “어떻게 만들지?”였지만
지금은 “어떻게 설계하지?”로 생각이 바뀌었다.

---

마무리

이번 경험을 통해 단순히 컴포넌트를 만드는 것을 넘어
사용자 입장에서 UI를 고민하는 개발자로 한 단계 성장했다고 느낀다.

다음에는 이 UI들을 공통 컴포넌트로 추출해서
재사용 가능한 구조로 발전시켜보고 싶다.