클랩 웹 리뉴얼

배경과 목적

클랩은 기업과 기관의 사회공헌 캠페인에 누구나 참여할 수 있게 만든 플랫폼입니다. 사용자 웹은 2023년부터 여러 개발자를 거치며 Spring Boot, Thymeleaf, jQuery 코드가 쌓여 있었습니다. 2026년 리뉴얼에서는 전 화면을 새 디자인으로 바꾸면서, 스택은 그대로 두고 구조부터 현대화하기로 했습니다.

담당 범위

디자인은 사내 디자인팀이 맡았고, 사용자 웹의 화면 구현과 서버 연동은 혼자 맡았습니다. 리뉴얼한 웹은 2026년 10월 19일, 클랩 앱 2.0과 함께 공개했습니다.

핵심 작업

더 빠르고 가볍게

• 캠페인 목록 쿼리 2,291ms → 311ms(−86%): 전체를 집계한 뒤 페이징하던 쿼리를, 한 페이지(12건)를 먼저 확정하고 그 12건만 집계하도록 다시 썼습니다. 운영 스냅샷 9개 케이스로 결과가 같은지 대조했고, 사용자 화면에서는 약 2초 걸리던 로딩이 0.4초로 줄었습니다.
• 메인 LCP 6.1초 → 3.0초(−51%): S3 이미지를 브라우저에 맞춰 WebP로 바꿔 주는 게이트웨이를 두고, LCP 이미지의 우선순위와 스크립트 로딩을 정리했습니다. 2026년 4월 27일 운영 배포 뒤 Lighthouse 성능 점수는 75에서 81이 됐습니다.
• 페이지 전송 용량 11,393KiB → 3,990KiB(−65%, 누적): 정적 폰트 9개(9.9MB)를 가변 woff2 1개(2.0MB)로 바꾸고, 꼭 필요하지 않은 스크립트에는 defer를 적용했습니다. 참조되지 않는 정적 자산 97MB도 정리했습니다.
• iOS Safari에서 끊기던 스크롤 인터랙션: 프레임마다 너비·여백·글자 크기를 바꿔 리플로가 일어나고, 툴바가 접힐 때마다 --vh 변수를 다시 쓰던 구조였습니다. 레이아웃은 고정하고 transform만 움직이도록 바꾼 뒤, CSS scroll-driven animation으로 컴포지터가 처리하게 했습니다.

키보드만으로도 쓸 수 있는 화면

• 전역 :focus-visible, 본문 바로가기, 헤딩과 랜드마크 정리, 탭·아코디언 ARIA, 캐러셀 키보드 조작을 더했습니다.
• 디자인은 지키면서 키보드와 스크린 리더로 고를 수 있는 커스텀 콤보박스 <clab-select>를 Web Component로 만들었습니다.
• 포커스 링 대비를 2.57:1에서 3.20:1로 높여 WCAG 1.4.11을 충족했고, iOS에서 터치할 때 링이 보이던 문제는 입력 수단을 추적해 해결했습니다.

웹 표준으로 바꾼 구조

• 페이지마다 모양과 동작이 달랐던 팝업과 브라우저 기본 alert() 72곳을 공통 <dialog>로 통일해, 어느 화면에서든 같은 방식으로 안내하도록 했습니다.
• 빈 화면을 AJAX로 채우던 목록의 첫 페이지를 서버에서 렌더링하고, 이중으로 존재하던 카드 마크업을 템플릿 하나로 합쳤습니다. 목록 7종을 정리하는 커밋에서만 713줄을 지우고 268줄을 더했습니다.
• jQuery의 $.ajax 39곳을 fetch 래퍼로 바꾸고, 인라인 스크립트는 파일로 분리했습니다. HTML 주석 588개는 서버 주석으로 바꿔 브라우저로 내려가지 않게 했습니다.

결과

새 디자인으로 전 화면을 바꾸는 동안 성능, 접근성, 코드 구조를 함께 정리해, 리뉴얼한 사용자 웹을 2026년 10월 19일에 공개했습니다. 클랩에서 운영 중인 화면을 확인할 수 있습니다.

회고

프레임워크를 바꿀 수 없는 오래된 코드에서도 <dialog>, Web Components, scroll-driven animation 같은 웹 표준을 잘 쓰면 구조를 충분히 현대화할 수 있었습니다. 리뉴얼은 화면을 바꾸는 일로 시작했지만, 결국 사용자가 믿고 오래 쓸 수 있는 서비스로 다시 만드는 일이었습니다.