연관 페이지를 묶고 탭으로 구분한 관리자 화면 구성
2026.10.04 · 1분
개요
| 항목 | 내용 |
|---|---|
| 유형 | 화면 구성 개선·기획 및 디자인 협업 |
| 시점 | 관리자 페이지 리뉴얼 과정 |
| 상태 | 리뉴얼에 반영 |
| 관련 영역 | GNB, 상·하위 관계의 페이지, 페이지 내 탭 |
| 나의 역할 | PL·프론트엔드 개발, 기존 화면의 불편함 확인과 기획·디자인 논의 참여 |
1. 상황과 제약
기존 관리자 페이지는 GNB에 페이지가 쭉 나열돼 있었고, 페이지끼리 어떤 관계인지는 어디에도 나와 있지 않았습니다. 상·하위 관계인 페이지도 메뉴에 따로 떠 있어서, 메뉴 목록만 보고는 둘이 이어진 페이지라는 걸 알기 어려웠습니다.
관리자 클라이언트를 새로 만들면서 기존 화면의 불편한 점을 찾아 개선 방향을 논의했습니다. 저는 개발과 함께 기획·디자인 논의에도 참여했습니다.
2. 검토와 판단
연관된 페이지를 같이 보여 줘서 화면 구성만 보고도 관계를 알 수 있게 하는 데 초점을 맞췄습니다. 상·하위 관계인 페이지를 한 페이지로 묶고, 그 안에서는 탭으로 나누기로 했습니다.
| 구분 | 기존 구성 | 리뉴얼 구성 |
|---|---|---|
| 연관 페이지의 배치 | GNB에 개별 페이지로 나열 | 상·하위 관계의 페이지를 하나로 묶음 |
| 묶인 페이지의 구분 | 개별 메뉴로 접근 | 페이지 내부 탭으로 구분 |
서로 연관된 페이지를 사용자가 하나씩 따로 이해해야 하는 부담과 혼란을 줄이려고 이렇게 구성했습니다.
3. 실행과 조율
기획·디자인 논의에서 기존 관리자 페이지의 불편한 점과 고칠 부분을 같이 검토했고, 연관 페이지를 묶어 탭으로 나누는 방향을 리뉴얼 화면에 반영했습니다. 저는 PL이자 관리 영역 전체의 화면 개발 담당으로, 기획·디자인 논의에 함께 참여했습니다.
4. 결과와 확인
리뉴얼 화면에서는 상·하위 관계인 페이지를 한 페이지로 묶고 안에서 탭으로 나눴습니다. 전에는 GNB에 각각 떠 있던 연관 페이지를 이제 같은 페이지 안에서 열 수 있습니다.