그린스파크
에너지 효율 조회·전기세 예측 웹앱. 디자인 확정 후 다중 팝업을 단일 바텀시트로 통합하는 UX 개선안을 Figma 시안과 코드로 제안해 팀 공통 컴포넌트로 채택되었습니다.
주요 기여
다중 팝업 → 단일 바텀시트 통합을 레퍼런스 분석 + Figma 시안 + 코드로 제안, 팀 전체가 공통 UX 컴포넌트로 채택. ESD 공모전 동상 수상.
제품 삭제, 요금 입력, 기프티콘 구매 등 여러 플로우에서 2~3단계의 팝업이 연속 노출되어 사용자가 반복 클릭해야 하는 UX 비효율이 있었습니다. 모바일 환경에서 엄지 영역과 멀리 떨어진 팝업 버튼 배치로 조작성도 떨어졌습니다.
이미 디자인이 확정된 상태에서, 단순 피드백이 아닌 실행 가능한 대안을 제시하여 팀의 UX를 개선하는 것.
토스·칩스 등의 BottomSheet 인터랙션 패턴을 레퍼런스로 조사한 뒤, 다중 팝업 → 단일 바텀시트 통합 + 하단 터치 영역 버튼 배치를 Figma 시안 + 코드 수준으로 제안. 삭제 플로우(useState 기반 바텀시트 + 오버레이), 요금 입력(예외치에서만 바텀시트 노출), 기프티콘 구매(단일 바텀시트 + 상태 전환)를 직접 구현했습니다.
디자인이 확정되고 일정이 촉박한 상태에서 변경을 설득하는 것이 가장 어려웠습니다.
레퍼런스 분석 + Figma 시안 + 실행 코드까지 갖춘 제안으로, 디자이너와의 신뢰 기반 커뮤니케이션을 형성했습니다. Fitts's Law(엄지 영역 배치)를 근거로 설득했습니다.
'이 UI 불편해요'가 아니라 레퍼런스 + 시안 + 코드까지 갖춘 제안이 디자인 확정 이후에도 팀을 움직일 수 있다는 걸 배웠습니다. 개발자가 UX 원칙을 근거로 설득하면 이후 협업이 훨씬 수월해집니다.