'로켓 펀치' 웹사이트 버그 수정
채용 사이트 '로켓펀치'에서 지원 내역을 확인 중, 신경 쓰이는 UI 문제를 발견했습니다.
작성하는 글은 문제를 분석하고 해결하는 방법에 관한 내용이며, 문제를 분석하고 단순히 눈에 보이는 현상을 넘어 더 구조적인 해결책을 고민하고 적용한 글 입니다.
문제 : 스크롤과 함께 사라지는 핵심 기능들
로켓펀치의 '지원 내역' 모달은 지원 현황을 한눈에 볼 수 있어 편리하였으나, 지원 내역이 많아지면 아래와 같은 문제가 발생합니다.
모달이 상단의 필터 버튼과 하단의 메뉴 버튼이 화면 밖으로 사라집니다.
위와 같은 상황은 사용자 관점에서 강력한 불편함으로 이어집니다.
- 모달 위쪽의 기능을 확인할 수 없으며, 모달을 닫을 수 없습니다.
- 아래의 버튼은 가려져서 알아보기 어렵습니다.
문제 해결을 위해 개발자 도구로 styles의 css 부분 하나하나 확인하였고, 다음과 같은 문제를 찾았습니다.
이 외에도 모달을 감싸는 가장 바깥쪽 배경(Overlay) 요소에 height: 100% 스타일이 적용되어 있었습니다. 이는 모달의 높이를 현재 보이는 브라우저 화면 높이에 완전히 고정시킵니다. 그러나, 모달 내부에 표시될 '지원 내역' 콘텐츠의 양이 많아지면서, 콘텐츠의 실제 높이가 고정된 100%를 초과하게 되었습니다.
이후, 내용물이 틀을 넘쳤을 때 어떻게 처리할지에 대한 overflow 속성이 정의되어 있지 않았습니다. overflow의 기본값은 visible이므로 콘텐츠는 틀 밖으로 빠져나가 화면에 잘립니다.
해결 방법
간단한 해결책은 모달 자체의 높이 제한 입니다. 개발자 도구를 열어 모달의 최상위 컨테이너에 height 속성을 적용 했습니다.
height: 90vh; // 화면 높이의 90%로 제한이 한 줄의 입력으로 모달이 화면 밖으로 벗어나는 문제는 해결 가능합니다.
추가 설명 : overflow 속성
height: 90vh로 모달 컨테이너의 크기를 강제로 제한하면 그보다 내용물이 많은 모달 콘텐츠는 overflow의 기본값인 visible에 따라 컨테이너 밖으로 넘치게 됩니다.
이 콘텐츠가 흘러넘치게 되면 모달이 아닌 페이지 전체의 높이가 길어지는 문제가 생길 수 있습니다. 따라서, 이 방법은 모달에 스크롤을 만든 것이 아닌 페이지 전체에 스크롤이 생기도록 만든 것 입니다.
이러한 경우, 배경 스크롤이라는 또 다른 UX 문제가 생깁니다. 모달 위에서 스크롤할 때 그 뒤의 페이지 본문까지 함께 움직이는 현상은 사용자에게 큰 불편을 줄 수 있습니다. 따라서, 눈앞의 문제만 고치는 것이 아닌 명확하게 제어되는 UI를 만들어야 합니다.
근본적인 해결 : Flexbox를 이용한 레이아웃 재설계
가장 이상적인 UI는 "헤더와 푸터는 고정, 콘텐츠 영역만 스크롤" 되는 것입니다. 이를 위해 CSS Flexbox를 도입하여 모달의 구조를 재설계 해야합니다.
HTML 구조 개선
평평한 모달 내부 구조를 header, main, footer의 의미 있는 구조로 개선해야 하며, 견고한 HTML은 안정적인 CSS에 있어서 중요합니다.
// 기존 내용
<div class="modal-box">
<button>헤더 버튼</button>
<div>콘텐츠 카드</div>
<button>푸터 버튼</button>
</div>
// Header, Body, Footer 분리
<div class="modal-box">
<header class="modal-header">
<button>헤더 버튼</button>
</header>
<main class="modal-content">
<div>콘텐츠 카드</div>
</main>
<footer class="modal-footer">
<button>푸터 버튼</button>
</footer>
</div>CSS Flexbox 적용
개선된 HTML 구조에 각 영역의 역할을 명확히 정의하는 Flexbox 스타일을 적용해야 합니다.
// 모달 전체를 감싸는 Flex 컨테이너
.modal-box {
display: flex;
flex-direction: column; // 아이템을 세로로 배치
height: 90vh; // 전체 높이 제한
overflow: hidden; // 자식 요소의 둥근 모서리 유지를 위함
}
// 고정될 헤더와 푸터
.modal-header,
.modal-footer {
flex-shrink: 0; /* 공간이 부족해도 절대 줄어들지 않도록 고정 */
}
// 스크롤될 콘텐츠 영역
.modal-content {
overflow-y: auto; // 내용이 넘칠 경우, 해당 영역만 스크롤
}- .modal-box : flex 컨테이너로 되어 내부 아이템들의 배치 기준을 세웁니다.
- .modal-header, .modal-footer : flex-shrink: 0을 이용해 자신의 크기를 유지하며 뷰포트 내에 고정됩니다.
- .modal-content : overflow-y: auto를 이용하여 내용이 많을 때 내부에서 흘러넘치지 않게 합니다.
결과
헤더와 푸터는 화면에 고정되어 중앙의 콘텐츠 목록만 부드럽게 스크롤됩니다.
사용자는 긴 지원 내역을 스크롤 하면서도 언제든지 상단의 필터와 하단의 메뉴 버튼에 즉시 접근할 수 있습니다. 따라서, 사용자 경험이 향상하는 UI가 됩니다.
정리
문제를 해결하며 느낀 점을 적어보았습니다.
눈앞에만 보이는 것을 넘어서 그 더 깊게 원리를 파고들면 견고한 코드를 만들 수 있습니다.
논리적이고 의미 있는 HTML 구조는 CSS를 단순하고 예측 가능하게 만드는 가장 확실한 방법입니다.
개발자의 목표는 단순히 버그를 수정하는 것이 아니라, 더 나은 사용자 경험을 만드는 것입니다. '작동한다'에서 멈추지 않고 '어떻게 하면 더 편리할까?'를 깊게 고민하는 것이 문제 해결에 중요하다는 것을 느꼈습니다.
작은 불편함에서 시작했으나 문제를 넘기지 않고 깊게 파고들어 더 나은 해결책을 찾아가는 과정이 좋은 경험이 되었습니다. 이러한 경험이 사용자의 입장에서 생각하고 문제를 해결하는 것에 큰 귀감이 되었습니다.
'Study' 카테고리의 다른 글
| 검색 엔진 최적화(SEO)란? (0) | 2025.07.06 |
|---|---|
| 웹 개발과 개발 용어에 대한 이해(2) (0) | 2024.10.17 |
| 웹 개발과 개발 용어에 대한 이해(1) (1) | 2024.09.05 |