현재는 종료된 서비스입니다.

소개 및 역할

헨스는 사용자가 자신의 취향 탐색과 소비를 한 플랫폼에서 가능하도록 SNS와 쇼핑이 결합된 모바일 웹뷰 하이브리드 앱 서비스입니다.

기여한 부분

트러블슈팅 iOS Safari 입력필드 소프트 키보드로 인한 크로스브라우징 대응 경험 (해결과정→)
- 문제 상황
  1. 입력 필드 포커스 시 뷰가 상단으로 강제 이동
  2. 소프트 키보드 노출 시 키보드 뒤로 입력필드와 콘텐츠가 가려짐
- 원인 분석
  1. 중앙·하단 배치된 입력필드는 키보드 노출 시 화면 중앙으로 강제 이동하면서, 하단에 키보드 높이만큼 여백을 생성
  2. iOS는 키보드가 노출되어도 뷰포트 사이즈를 재조정하지 않아서 입력필드와 컨텐츠가 키보드 뒤로 가려짐
- 결과 (As-is, To-be)
  - 레이아웃 밀림 현상과 컨텐츠가 가려지는 현상을 방지하여 사용자가 안정적인 경험을 할 수 있도록 개선
  - Android 와 Safari에서 동일한 사용자 경험을 보장

As-is

문제해결 전 (재연)

To-be

문제해결 후

JSDoc 기반 주석 문서화로 가이드 제공 및 협업 효율 개선
- 컴포넌트 UI, 레이아웃, 간단한 상태관리 및 동작을 개발한 뒤, 상세 기능 구현자가 이어받는 구조에서 빠른 파악이 어려워지는 문제를 인지하고 JSDoc 주석 문서화 도입을 제안
- 결과적으로, 기능 구현자에게 명확한 가이드를 제공 → 개발 속도 향상 및 커뮤니케이션 비용이 절감
- 실제 도입 후 긍정적인 피드백을 받았고, 매우 사소한 부분이지만 작은 개선으로 큰 차이를 만든 경험이 됨

각 컴포넌트에 대한 JSDoc 주석 문서화 개발가이드

컴포넌트 사용시 개발 가이드를 제공하여 빠른 이해를 도움

JSON기반의 **lottie-react**를 활용한 좋아요 버튼의 애니메이션 제어 및 성능 최적화
- useMemo, useCallback 를 적용해 불필요한 리렌더링을 방지
- 버튼을 연속 클릭할 경우, Lottie 애니메이션이 중첩되어 DOM이 계속 쌓이는 문제
  - Lottie 인스턴스를 고유 key로 생성하고, onComplete 시점에 해당 DOM을 직접 제거하여 메모리 누수 방지
  - 애니메이션을 개별적으로 제어하면서도, 여러 Lottie가 동시에 나타나도 충돌 없이 렌더링하도록 개선
useGesture 라이브러리를 사용하여 피드의 카드 이미지에 플립 제스처 인터랙션을 터치/드래그로 구현
- 확대/스크롤 제스처와 카드 플립용 드래그 제스처를 명확히 구분할 수 있도록 기준을 설정해 제스처 충돌 방지
- 드래그 방향, 속도, 거리, 그리고 한 손가락 동작 여부를 조건으로 설정해 동작의 안정성 강화
react-hook-form 을 활용해 복잡한 유효성 검사 및 상태 관리 최적화
- Controller를 사용해 커스텀 컴포넌트와 연동하고 reset, watch 등을 활용해 폼의 상태를 유연하게 제어

Sass

mixin, function, variables 등을 사용하여 중복 스타일을 방지하고, 개발 효율성과 유지보수성을 높이기 위해 사용했습니다.
React-hook-form

폼 입력값의 유효성 검사, 상태 추적, 에러 처리 등을 간결하게 구현할 수 있고,
erros, isDirty, isValid 등 폼 전반의 상태를 한 번에 관리할 수 있다는 강점이 있어 선택하게 되었습니다.
use-gesture

드래그, 스와이프 등의 사용자 제스처를 간단하게 구현할 수 있으며,
여러 터치 이벤트를 세분화하여 처리할 수 있어 정교한 제스처 기반 인터랙션 구현에 유리해 선택했습니다.