사내 보안 리소스 통합 플랫폼 구축기 : 5. 페이지 단위의 UI/UX 개선하기

이전에 작성했던 UI/UX 개선기는 컴포넌트 단위의 개선을 다뤘다면,이번에는 페이지 단위의 UI/UX 개선 사항에 대해서 다뤄보려고 한다.

어쩌다보니 "레퍼런스"라는 개념에 대한 개선을 자꾸 다루게 되지만, 다른 페이지들도 개선 사항이 꽤 있었다.
또한, 추가 되는 개념들이 있어서 이걸 어떻게 사용자들이 설명 없이 직관적으로 사용할 수 있을까?라는 고민을 되게 많이 했다.

 

개발도 개발이지만 기획과 UI/UX를 설계하는 일도 꽤나 의미있고 재미있었다. 기존 서비스를 하나씩 다 뜯어보고, 직접 사용해보고 불편한 점들을 취합하고, 기존 사용자들에게 물어봐서 개선해야 하는 부분들에 고민했다. 약간의 자율성이 주어지는 프로젝트라서 피드백이 더 빠르게 오갔던 환경이라 더욱 흥미를 느꼈던거 같다. 같이 참여한 분들도 적극적으로 의견을 제시하시고, 내가 제시했던 의견에 대해서도 수용과 피드백을 적극적으로 해주셔서 힘들지만 보람있던 프로젝트였다.

 

이 글을 작성하는 현재 시점에서는 이미 사내에 정식으로 릴리즈가 되어 다른 서비스와도 연동을 마친 상태로 많은 분들이 사용하고 계신다.

내부의 가장 밀접한 사용자들께서 긍정 피드백을 주셨었고, 현재는 전사에서 사용하는데 이전에는 서비스 별로 따로 있던게 통합되어서 쓰기 좋다는 평과 기존 서비스의 유저플로우는 복잡했는데 직관적으로 만들어서 사용성이 증가했다는 평을 받았다.☺️

 

이제 잡담은 그만하고, 페이지 단위에서는 어떤 개선을 했는지 작성해보겠다.

 

 

12단계의 사용자 여정을 3단계로 축소하기

들어가기 전에 자꾸만 언급되는 "체커", "레퍼런스"라는 개념에 대해 다시 설명하자면 다음과 같다.

내가 재직중인 회사의 도메인은 보안으로, 보안 서비스와 솔루션을 제공하는 회사이다. 

 

일단 보안 체커라는 개념은 개발자가 작성한 코드나 시스템 설정을 자동으로 분석해서 취약점을 찾아주는 도구로, 내부적으로는 다양한 보안 기준을 바탕으로 검사 규칙을 생성한다.

 

레퍼런스(reference)는 이러한 검사 기준이 되는 보안 규칙·가이드라인·모범 사례를 체계적으로 정리해놓은 문서나 기준집이다.

즉, 체커가 “무엇을 취약점으로 판단할 것인가”를 결정할 때 참고하는 룰북의 역할을 한다.

 

 

 

 

현재 사용중인 레퍼런스의 경우 최대 3단계까지이며 이미지와 같이 트리 계층 구조를 가지고 있다.

 

기존 서비스의 레퍼런스를 추가하기까지의 여정

기존 서비스에서는 레퍼런스라는 개념에 3가지의 페이지가 존재했다.

- 레퍼런스 페이지

- 레퍼런스 추가 페이지

- 레퍼런스 상세 페이지

그렇지만, 레퍼런스를 3단계 (레퍼런스, 레퍼런스 그룹, 레퍼런스 항목)까지 추가를 하기 위해서는 위의 이미지처럼 12단계를 거쳐야 하나를 등록할 수 있었다. 

 

 

개선된 서비스의 레퍼런스를 추가하기까지의 여정

내가 개선하고 싶은 기존 서비스의 문제점은 다음과 같았다.

1. 레퍼런스 추가하기 페이지가 따로 있고, 레퍼런스 그룹, 레퍼런스 항목의 추가에 대한 것들도 각각 존재함

2. 페이지 이동이 빈번함

 

개선 사항은 다음과 같다.

첫번째 이미지와 같이 페이지 이동없이 항목들을 접근 할 수 있도록 화면을 설계했다.

계층구조의 항목들에 대해서 추가를 할 때 한 번에 할 수 없었던 것을 두번째 이미지와 같이 하나의 모달에서 추가가 가능하도록 변경하였다.

 

 

분리된 정보를 페이지 이동 없이 확인하기

해당 주제도 캡쳐를 통해 보여주는게 사실 편하긴 하지만.... 이 부분에 대해서는 대부분 글로 대체하겠다!

 

1. 전체 구조 개편 — 목록/상세 페이지 통합

기존 서비스 : 분리된 목록 페이지 + 상세 페이지

기존 시스템은 다음과 같은 구조를 가지고 있었다.

• 레퍼런스 목록 화면과 레퍼런스 상세 정보 화면이 분리
• 목록 화면에서 항목을 클릭하면 새 페이지 이동
• 상세 수정은 별도의 페이지 이동이 필요
• UI가 테이블 기반이라 정보 탐색이 어렵고 가독성이 떨어짐

문제점

• 페이지 전환이 잦아 사용자가 맥락을 잃기 쉬움
• 트리 구조로 UI가 접혀있지만 전체 트리구조를 쉽고 열고 닫을 수 있는 UI가 없음

 

개선된 서비스 : 목록 + 상세를 한 화면에서 동시 조회

 

• 좌측: 레퍼런스 목록(리스트)
• 우측: 레퍼런스 상세 정보
• 동일 화면에서 항목을 클릭하면 우측 패널만 갱신
• 그룹 / 항목 역시 우측에서 바로 펼쳐 보기 가능
• 수정 버튼 클릭 시 모달창(중앙 정렬)으로 정돈된 폼 제공

개선 효과

• 맥락 유지 → 사용성이 크게 향상됨
• 왼쪽 목록을 유지한 채 상세를 바로 확인 가능
• 시각적으로 계층 구조가 명확

 

2. 레퍼런스 목록 구조 개선

기존 서비스 : 테이블 기반의 단일 리스트

기존 목록은 다음과 같은 구조였다.

• 하나의 큰 테이블에 레퍼런스 규칙들이 전부 나열
• 열(column)도 많아서 정보 과부하 발생
• 항목 타입, 지원 여부, 카운트 등이 한 테이블에 모두 표시됨
• 특정 항목을 찾기 어려우며, 스크롤이 길어짐

---

개선된 서비스 : 검색 + 필터와 정돈된 리스트 형태

• 좌측 사이드바 리스트 형태로 변환
• 검색창 추가 (이름 검색 가능)
• 연도/버전 정보, 서비스 타입 등을 리스트에서 간단히 표시
• 목록 가독성이 개선되어 원하는 레퍼런스를 쉽게 찾을 수 있음

개선 포인트

• 탐색 속도 증가
• 구조화된 데이터가 시각적으로 더 명확
• 정돈된 리스트 UI로 사용자 경험 향상

 

 

3. 그룹 / 항목 상세 페이지 개선

기존 서비스 : 트리 + 테이블 조합 + 팝업 수정창

기존 상세 페이지는 다음과 같았다.

• 항목 그룹이 트리 형태로 접힌 상태
• 항목을 선택하면 하단 테이블에서 항목 목록 표시
• 수정 버튼 클릭 시 작은 팝업이 열려 값을 수정함
• 팝업 입력 폼은 구조가 단순하고 UX가 오래된 스타일

문제점

• 트리 펼침 상태를 계속 조작해야 해서 불편
• 항목이 많을수록 스크롤과 테이블 해석이 어려움
• 팝업/모달이 작고 배치가 조악함

---

개선된 서비스 : 한눈에 보이는 그룹 + 항목 구조

현재는 다음과 같이 개선되었다.

• 상세 화면 안에서 그룹과 항목이 카드 형태로 구분
• 각 그룹을 아코디언처럼 펼쳐 리스트 확인 가능
• 항목 리스트는 정돈된 테이블/카드 형태로 변경
• 지원 여부(체커 지원/미지원)을 컬러 태그로 시각화
• 버튼/아이콘이 명확하게 구분됨

개선 효과

• 트리 형태보다 구조가 쉽게 인지됨
• 리스트와 메타 정보가 분리되어 가독성 증가
• UX 흐름이 자연스럽고 유지보수도 쉬움

 

4. 레퍼런스 정보 수정 모달 개선

기존 서비스 : 단순 입력 창 형태 - 정보와 수정이 통합된 팝업 모달

• 필드가 단순 나열된 레거시 UI
• 필수값/선택값 구분이 명확하지 않음
• 텍스트 영역도 좁아서 설명 작성이 어려움
• 모달 사이즈 작음 + UI 축이 안 맞음

---

개선된 서비스 : 현대적 폼 UI의 모달 - 정보와 수정이 분리된 모달

개편된 모달의 특성:

• 화면 중앙 배치, 적절한 여백과 넓은 폼 사이즈
• 필수값에는 * 표시 및 Validation 제공
• 텍스트 md 문법 입력 시 Preview 탭 제공
• 드롭다운, 텍스트, URL을 각각 맞는 컴포넌트로 변경
• 사용자 경험 향상 + 일관된 폼 디자인 적용

개선 효과

• 입력/수정이 쉬워짐
• 정보 누락 방지
• 가독성 및 유지보수성이 높아짐

 

 

전체적으로 다시 정리하자면 다음과 같이 개선이 되었다고 정리할 수 있다.

구분	Before	After
전체 화면 구조	목록과 상세가 분리된 화면	한 화면에서 목록 + 상세 동시에 접근
탐색 방식	트리 + 다중 테이블 + 페이지 이동	좌측 목록 + 우측 상세의 직관적 레이아웃
수정 플로우	작은 팝업 모달 + 한정된 입력 UI	중앙 모달 + 넓은 입력 폼 + Preview 제공
그룹/항목 구조	트리 기반, 시각적 구분 어려움	아코디언 기반 그룹 + 깔끔한 항목 리스트
가독성	많은 컬럼/테이블 → 복잡	리스트/카드 기반 → 명확
유지보수성	레이아웃 과밀, UI 확장 어려움	컴포넌트 기반 화면 구성으로 유지보수 용이

 

다음 게시물은 레거시 사내 시스템 개선기 마지막 게시물로 sentry와 관련해서 경험했던 것들을 작성해보겠다.