Bloom After 팀이 4주 스프린트의 마지막 주에 UI 폴리싱과 엔드-투-엔드 테스팅으로 산모 정신건강 플랫폼의 사용성 개선

Wrapping Up Bloom After: Week 4 Polish & Full Sprint Retro

Grace Olabode2026년 3월 27일4분intermediate

AI 요약

Context

산모 우울증(PPD) 환자들이 의료 정보, 전문가, 커뮤니티를 한 곳에서 찾기 어렵다는 문제가 있었다. 이를 해결하기 위해 교육 허브, 클리닉 검색 기능, 스토리 라이브러리를 갖춘 디지털 플랫폼을 구축해야 했다.

Technical Solution

Crisis 페이지 UI 개선: 24/7 헬프라인을 상단 고정으로 배치하고 별도 페이지 대신 빠르게 로딩되는 모달로 교체
Lifestyle & Crisis 랜딩 페이지 리팩토링: UI와 기능을 완전히 재설계
dvh(dynamic viewport height) CSS 속성 도입: 모바일 주소 표시줄 뒤에 모달이 숨겨지는 문제 해결
엔드-투-엔드 테스팅 실행: 실제 사용자처럼 앱 전체 플로우를 처음부터 끝까지 테스트
Admin 대시보드 포함 다중 페이지의 정렬, 간격, 모바일 호환성 버그 수정 및 UI 폴리싱

Impact

아티클에 정량적 수치가 명시되지 않음

Key Takeaway

UI 폴리싱은 기능 개발만큼의 시간을 소요하며, 1px의 간격 오류도 전체 페이지의 사용 경험을 훼손할 수 있다. 엔드-투-엔드 테스팅은 코드 리뷰만으로는 발견할 수 없는 사용자 경험 문제를 조기에 적발하는 필수 프로세스다.

실천 포인트

모바일 웹 개발에서 vh(viewport height) 대신 dvh(dynamic viewport height)를 사용하면 iOS Safari 등에서 주소 표시줄로 인한 모달 숨김 문제를 방지할 수 있다. 또한 개발 완료 후 실제 사용 흐름을 시뮬레이션하는 엔드-투-엔드 테스팅을 수행하면 코드 기반 검토에서 놓칠 수 있는 마이크로 인터랙션 버그를 식별할 수 있다.

태그

#CSS #E2E Testing #UI Polish #Mobile

원문 읽기