관리자 페이지 분석 탭, 인사이트 패널 기본 접힘으로 사용자 경험 개선

관리자 페이지 분석 탭, 인사이트 패널 기본 접힘으로 사용자 경험 개선

관리자 페이지의 분석 탭에 들어갔을 때, 인사이트 패널이 기본적으로 펼쳐져 있어서 화면이 너무 복잡하게 느껴졌어요. 불필요한 정보가 먼저 보이니 정작 중요한 데이터를 보는 데 방해가 되더라고요. 그래서 이 인사이트 패널을 기본적으로 접어두도록 변경했습니다.

시도와 함정

처음에는 단순히 CSS 스타일만 건드리면 될 거라고 생각했어요. display: none; 이나 visibility: hidden; 같은 속성을 적용해보려고 했죠.

<!-- 처음 시도했던 가상 코드 (실제 동작하지 않음) -->
<div class="insight-panel" style="display: none;">
  <!-- 인사이트 내용 -->
</div>

하지만 이렇게 하면 아예 렌더링이 안 되거나, 나중에 펼쳤을 때 스타일이 제대로 적용되지 않는 문제가 발생하더라고요. DOM 자체를 건드리지 않고 숨기는 건 생각보다 까다로웠습니다.

원인

알고 보니 이 인사이트 패널은 React 컴포넌트로 관리되고 있었고, 초기 렌더링 시 isExpanded 같은 상태 값에 따라 보여짐이 결정되는 구조였습니다. 단순히 CSS로 숨기는 것만으로는 근본적인 해결이 되지 않았던 거죠.

해결

결국 해당 컴포넌트의 초기 상태를 false (접힘)로 변경하는 것으로 해결했습니다.

// 실제 적용된 React 코드 일부 (가상화 X)
import React, { useState } from 'react';
function InsightPanel() {
const [isExpanded, setIsExpanded] = useState(false); // 초기값 false로 변경
const toggleExpand = () => {
setIsExpanded(!isExpanded);
};
return (
<div className={insight-panel ${isExpanded ? 'expanded' : 'collapsed'}}>
<button onClick={toggleExpand}>
{isExpanded ? '인사이트 접기' : '인사이트 펼치기'}
</button>
{isExpanded && (
<div className="insight-content">
{/* 실제 인사이트 데이터 로딩 및 렌더링 */}
<p>여기에 실제 분석 인사이트가 표시됩니다.</p>
</div>
)}
</div>
);
}
export default InsightPanel;

이렇게 하니 페이지 로딩 시 인사이트 패널은 기본적으로 접힌 상태로 유지되고, 사용자가 직접 펼치기 버튼을 눌렀을 때만 내용이 보이게 되었습니다.

결과

• 관리자 페이지 분석 탭 진입 시 화면 노이즈가 현저히 줄었습니다.
• 사용자가 필요한 정보에 더 집중할 수 있게 되어 전반적인 사용자 경험이 개선되었습니다.
• 기존 데이터 및 기능은 전혀 변경 없이 그대로 보존됩니다.

정리 — 같은 함정 안 빠지려면

• [ ] UI 요소의 초기 상태 변경은 해당 컴포넌트의 로직을 먼저 파악해야 합니다.
• [ ] 단순 CSS 스타일링으로 해결되지 않는 경우, 컴포넌트의 상태 관리 로직을 확인하세요.
• [ ] React 같은 프레임워크 사용 시, useState나 useReducer 같은 상태 관리 훅의 초기값을 점검하는 것이 중요합니다.