검색 우선 공공포털 UI로 서비스 신뢰도 개선

전면적인 디자인 리뉴얼 작업을 마쳤다. 그동안 콘텐츠 팜처럼 보였던 UI를 벗어나, 검색을 중심에 놓고 공공기관 포털처럼 깔끔하고 신뢰도 높은 인상으로 다시 설계했다.

이전 상태: 왜 리뉴얼이 필요했나

우리 서비스가 사용자에게 어떻게 보였는지 솔직하게 돌아보면, 콘텐츠가 무분별하게 쌓여 있는 느낌이 있었다. 특히 AI 생성 콘텐츠가 많아지면서, 검색이나 필터링 없이 그냥 목록을 스크롤하는 경험이 주가 되고 있었다. 사용자 입장에서는 "원하는 정보를 찾기 어렵다"는 피드백이 나왔고, 팀 내에서도 "공공정보를 다루는 서비스가 이 정도 수준의 UI면 신뢰도가 떨어질 수밖에 없다"는 지적이 오고갔다.

무엇이 문제였나를 분석해보니 몇 가지가 겹쳐 있었다. 첫째, 검색 기능이 화면 아래나 사이드에 묻혀 있어서 사용자가 적극적으로 찾아야만 했다. 둘째, 각 콘텐츠 아이템(PostCard)이 너무 시각적으로 화려해서, 개별 콘텐츠보다는 전체 피드가 눈에 띄는 상황이었다. 이는 신뢰할 수 있는 공공포털의 느낌과는 거리가 있었다. 셋째, 헤더와 푸터 구조도 일반적인 웹서비스 같았지, 사용자가 직관적으로 "공공정보 포탈"이라고 인식할 수 있는 요소가 부족했다.

리뉴얼 전략: 검색-우선과 공공포털 스타일

이번 리뉴얼은 세 가지 원칙으로 진행했다.

1. 검색을 최상단 중심에 배치
Header.astro 를 개편해서 검색 바를 가장 먼저 눈에 들어오게 했다. 공공포털들을 벤치마킹해보면 거의 모두 헤더 아래 첫 번째 요소가 검색이다. 이는 "당신이 원하는 정보를 빠르게 찾도록 돕겠다"는 메시지를 담고 있다. 사용자 여정 관점에서도, 진입 → 검색 → 결과 조회 라는 흐름이 명확해진다.

2. 콘텐츠 카드 단순화
PostCard.astro 를 재설계했다. 이전에는 이미지, 태그, 설명이 모두 들어가 있었고, 시각적 임팩트를 위해 색상도 다양했다. 새 버전에서는 제목, 요약, 메타정보(날짜, 출처)만 남기고 색상도 정중하게 통일했다. 공공포털의 공지사항이나 자료실을 보면, 개별 아이템보다는 정보 자체에 집중하도록 설계되어 있다. 우리도 그 방향으로 맞췄다.

3. 네비게이션과 푸터 정비
Header와 Footer 모두 계층구조를 명확히 했다. 주요 메뉴는 줄이고, 각 섹션의 의도를 명확하게 했다. 특히 푸터에는 조직정보, 연락처, 관련 링크 같은 공공포털 표준 요소를 넣어서 "신뢰할 수 있는 공공 기관"의 느낌을 살렸다.

styles.css 는 이 모든 변경을 받쳐주는 기초였다. 색상 팔레트를 공공포털 스타일(블루와 그레이 계열)로 재정의했고, 간격과 타이포그래피도 더 깔끔하게 조정했다. match.astro 와 index.astro 도 함께 개편해서, 홈 화면부터 검색 페이지까지 일관된 경험을 제공하도록 만들었다.

회고: 팀과 함께 우선순위를 다시 생각하다

이 작업을 진행하면서 느낀 점 몇 가지가 있다.

먼저, UI 개편이 단순히 "좋아 보이기"만의 문제가 아니라는 걸 다시 한 번 깨달았다. 검색-우선 구조로 바꾸면서 실제로는 사용자의 여정 자체를 리매핑하는 것이었다. "이 서비스는 콘텐츠를 나열하는 것이 아니라 찾는 것을 돕는다"는 메시지를 UI로 명확히 하는 것. 이건 마케팅이나 카피보다 훨씬 강력하다.

둘째, 공공포털 스타일을 참고하면서 "제약이 곧 강점"이라는 걸 느꼈다. 색상도 제한적이고, 레이아웃도 정해진 틀이 있고, 데코레이션도 거의 없다. 하지만 오래 봐도 피로하지 않고, 신뢰감이 간다. AI 생성 콘텐츠가 많은 서비스라면 더욱 이 같은 "정중함"이 필요하다.

셋째, 팀 내 의견 조율이 컸다. "더 화려한 디자인이 사용자를 끌 거 아니냐"는 의견도 있었고, "공공포털은 너무 지루하지 않나"는 우려도 있었다. 하지만 우리가 함께 사용자 피드백을 다시 정리하고, 경쟁 서비스들을 살펴보고, 신뢰도 지표를 논의하면서 합의점을 찾았다. 결국 "신뢰도가 있어야 사용도 많아진다"는 기본으로 돌아갔다.

이 정도 규모의 UI 리뉴얼은 한 사람이 하는 게 아니라, 기획, 디자인, 개발이 함께 가야 한다. 그리고 결정의 배경을 자주 상기시켜야 한다. 왜 검색을 앞에 뒀는가, 왜 색상을 제한했는가, 왜 카드를 단순화했는가. 이런 "왜"가 명확하면, 나중에 수정할 때도, 새 사람이 들어올 때도 방향을 잃지 않는다.

🛒 이 글과 어울리는 추천 상품

• 듀얼모니터 쿠팡에서 보기 →
• 기계식키보드 쿠팡에서 보기 →
• 노이즈캔슬링헤드폰 쿠팡에서 보기 →

*위 링크는 쿠팡파트너스 활동의 일환이며, 일정액의 수수료를 제공받을 수 있습니다.