検索機能実装とムジェ正式デプロイのためのサービス安定化の道のり

ムジェプロジェクトが本日、正式バージョンをデプロイしました。Spring Boot基盤の技術スタックを活用してサービスの完成度を高める過程で直面した技術的挑戦とこれを解決した過程について共有したいと思います。

1. ユーザー体験の核心、検索システムの設計と実装

情報が蓄積されるにつれて、ユーザーが望む投稿と作成者を迅速に見つけられる検索機能の必要性が台頭しました。ムジェの検索システムは、単純なキーワードマッチングを超えて、ユーザー中心の利便性を最大化する方向で設計されました。

テキスト検索とハンドル検索の統合

バックエンドではPostRepositoryを通じてタイトル、説明、本文全体を網羅するキーワード検索を実装しました。特にユーザーのIDである「ハンドル」を通じた検索要求を受け入れるため、クエリ文の先頭に@記号が含まれている場合は、該当ユーザーの全投稿を返す分岐ロジックをPostServiceに適用しました。これはユーザーが直感的に検索意図をシステムに伝達できるよう支援します。

クライアントサイドハイライトによる可読性の向上

検索結果内でキーワードの位置を明確に認識できるよう、動的ハイライト機能を実装しました。サーバー負荷を最小化するためにDOM操作と正規表現を活用したクライアントサイドレンダリング方式を採択しました。結果画面内のタイトルと本文ノードを巡回しながらキーワードと一致するテキストをマーキングしつつ、HTML構造が破壊されないようテキストノードのみを選別して処理する精緻さを期しました。

2. モバイルUIの技術的欠陥と構造的改善

正式デプロイを控えてモバイル環境でのユーザーインターフェース(UI)を点検中、Bootstrapモーダルシステムで深刻な誤動作が発見されました。

モーダルバックドロップとフォーカスイシューの解決

モバイル検索モーダルを実行する際、画面が暗くなった状態で固定されて操作が不可能な現象が発生しました。分析の結果、下部ナビゲーションバーの固定(Fixed)属性がモーダルのレイヤー階層構造と衝突を起こしたことが確認されました。これを解決するため、モーダルのDOM位置をナビゲーションバー内部から分離して独立したレイヤーに再配置し、th:blockを活用して論理的グループ化を維持しながらも技術的干渉を除去しました。

投稿フェード効果の動的制御

長い本文を可読性よく処理するために適用したフェード(Fade)効果が、本文拡張後も残存してアクションボタンのクリックを妨害する問題を確認しました。これを解決するため、CSSのクラス制御方式を活用して本文拡張状態ではフェードレイヤーを非活性化するようロジックを修正することで、視覚的完成度と機能的無欠性を同時に確保しました。

3. 本番環境への安全なデータマイグレーション

開発サーバーで蓄積された良質なデータを本番サーバーに移転する過程は、データ整合性を維持しなければならない重要な作業でした。

データ整合性維持とシーケンス同期化

PostgreSQLの外部キー(Foreign Key)制約条件により、単純なデータ挿入過程でエラーが発生しました。また、開発サーバーの固有IDを保存しながらデータを移転する際、データベースの自動増加シーケンスが同期化されず、新規データ挿入時の衝突が予想されました。

これを解決するため、セッション複製役割を一時的に変更したり、制約条件を一時解除した状態でデータを精密にマイグレーションしました。データ挿入完了後はsetval関数を使用してすべてのテーブルのシーケンスを現在のデータの最大ID値に一致させることで、サービス運営中に発生する可能性のある識別子衝突の可能性を根本的に遮断しました。

デプロイ過程で経験した数多くの試行錯誤と解決策が、類似の技術的課題を抱えている方々に有益な参考資料となることを願っています。🌱