검색 기능 구현과 무제 정식 배포를 위한 서비스 안정화 여정

무제 프로젝트가 오늘 정식 버전을 배포했습니다. 스프링 부트 기반의 기술 스택을 활용하여 서비스의 완성도를 높이는 과정에서 마주했던 기술적 도전과 이를 해결한 과정에 대해 공유하고자 합니다.

1. 사용자 경험의 핵심, 검색 시스템 설계와 구현

정보가 축적됨에 따라 사용자가 원하는 게시물과 작성자를 신속하게 찾아낼 수 있는 검색 기능의 필요성이 대두되었습니다. 무제의 검색 시스템은 단순한 키워드 매칭을 넘어 사용자 중심의 편의성을 극대화하는 방향으로 설계되었습니다.

텍스트 검색과 핸들 검색의 통합

백엔드에서는 PostRepository를 통해 제목, 설명, 본문 전체를 아우르는 키워드 검색을 구현했습니다. 특히 사용자의 아이디인 ‘핸들’을 통한 검색 요구를 수용하기 위해, 쿼리문 시작에 @ 기호가 포함된 경우 해당 유저의 전체 게시물을 반환하는 분기 로직을 PostService에 적용했습니다. 이는 사용자가 직관적으로 검색 의도를 시스템에 전달할 수 있도록 돕습니다.

클라이언트 사이드 하이라이팅을 통한 가독성 증대

검색 결과 내에서 키워드의 위치를 명확히 인지할 수 있도록 동적 하이라이팅 기능을 구현했습니다. 서버 부하를 최소화하기 위해 DOM 조작과 정규표현식을 활용한 클라이언트 사이드 렌더링 방식을 채택했습니다. 결과 화면 내의 제목과 본문 노드를 순회하며 키워드와 일치하는 텍스트를 마킹하되, HTML 구조가 파괴되지 않도록 텍스트 노드만을 선별하여 처리하는 정교함을 기했습니다.

2. 모바일 UI의 기술적 결함과 구조적 개선

정식 배포를 앞두고 모바일 환경에서의 사용자 인터페이스(UI)를 점검하던 중, Bootstrap 모달 시스템에서 심각한 오작동이 발견되었습니다.

모달 백드롭 및 포커스 이슈 해결

모바일 검색 모달을 실행할 시 화면이 어두워진 상태로 고정되어 조작이 불가능한 현상이 발생했습니다. 분석 결과, 하단 네비게이션 바의 고정(Fixed) 속성이 모달의 레이어 계층 구조와 충돌을 일으킨 것으로 확인되었습니다. 이를 해결하기 위해 모달의 DOM 위치를 네비게이션 바 내부에서 분리하여 독립적인 계층으로 재배치하고, th:block을 활용해 논리적 그룹화를 유지하면서도 기술적 간섭을 제거했습니다.

게시물 페이드 효과의 동적 제어

긴 본문을 가독성 있게 처리하기 위해 적용한 페이드(Fade) 효과가 본문 확장 후에도 잔존하여 액션 버튼 클릭을 방해하는 문제를 확인했습니다. 이를 해결하기 위해 CSS의 클래스 제어 방식을 활용하여 본문 확장 상태에서는 페이드 레이어를 비활성화하도록 로직을 수정함으로써 시각적 완성도와 기능적 무결성을 동시에 확보했습니다.

3. 운영 환경으로의 안전한 데이터 마이그레이션

개발 서버에서 축적된 양질의 데이터를 운영 서버로 이전하는 과정은 데이터 무결성을 유지해야 하는 중요한 작업이었습니다.

데이터 정합성 유지와 시퀀스 동기화

PostgreSQL의 외래 키(Foreign Key) 제약 조건으로 인해 단순한 데이터 삽입 과정에서 오류가 발생했습니다. 또한 개발 서버의 고유 ID를 보존하면서 데이터를 이전할 때, 데이터베이스의 자동 증가 시퀀스가 동기화되지 않아 신규 데이터 삽입 시 충돌이 예상되었습니다.

이를 해결하기 위해 세션 복제 역할을 임시로 변경하거나 제약 조건을 일시 해제한 상태에서 데이터를 정밀하게 마이그레이션했습니다. 데이터 삽입 완료 후에는 setval 함수를 사용하여 모든 테이블의 시퀀스를 현재 데이터의 최대 ID값으로 일치시킴으로써 서비스 운영 중에 발생할 수 있는 식별자 충돌 가능성을 원천 차단했습니다.

배포 과정에서 겪은 수많은 시행착오와 해결책들이 유사한 기술적 과제를 안고 있는 분들에게 유익한 참고 자료가 되기를 바랍니다. 🌱