FlowNodeDetail 페이지 개선기: Processing Logs를 더 직관적으로

새롭게 맡은 프로젝트에서, 오늘은 FlowNodeDetail 페이지의 Processing Logs 섹션을 사용자 친화적으로 개선하는 작업을 진행했습니다.
데이터 처리 과정을 시각적으로 명확하게 표현하고, 전체 흐름을 쉽게 파악할 수 있도록 UI/UX를 다듬는 것이 주요 목표였어요.

👁️ 처음 마주한 문제

기존의 Processing Logs 영역은 단순 텍스트 기반으로 되어 있어 사용자가 각 스텝에서 어떤 작업이 수행됐는지 한눈에 파악하기 어려운 구조였습니다. 특히 데이터 처리 단계가 많을 경우, 시각적으로도 가독성이 떨어지는 문제가 있었어요.

✨ 개선 방향: 사용자 중심의 카드형 인터페이스

개선은 크게 아래와 같은 방향으로 진행했습니다:

카드 레이아웃 적용: 각 스텝을 명확히 구분
아이콘 매핑 시스템 구축: 직관적인 시각 요소 추가
스크롤 기능 도입: 많은 스텝을 깔끔하게 보여주기
스텝 개수 표시 기능: 전체 진행 흐름 파악 가능
컬럼/파라미터 정보 정리: 핵심 정보만 명확하게 노출

🛠 주요 작업 내용

작업 항목	상세 내용
✅ 카드 스타일 UI 적용	스텝별로 독립된 카드 UI로 표현하여 가독성 향상
✅ 스크롤 기능 도입	`max-height: 260px`으로 제한, 스크롤로 공간 절약
✅ 아이콘 매핑 시스템	`getStepIcon()` 메서드로 메서드명에 맞는 아이콘 표시 (예: 삭제 → 🗑, 인코딩 → 📊 등)
✅ 메서드명 포맷팅	`formatMethodName()` 함수로 snake_case → 자연어형으로 표시
✅ 스텝 개수 표시	`"총 6개 스텝"` 등으로 상단에 표시
✅ 컬럼 및 파라미터 시각화	불필요한 정보는 제거하고, 핵심만 명확하게 정리

🧠 작업 중 느낀 점

Vue에서 React로, 또는 반대로 프레임워크를 전환하며 컴포넌트 기반 사고방식은 계속 통하는 것 같아요. 이번 개선 작업을 하면서도 UI를 기능별로 쪼개고 재사용 가능한 구조로 만드는 접근이 정말 유효했어요. 또, 단순히 보여주는 것을 넘어서 사용자 입장에서 **'한눈에 읽히는 구조'**를 만드는 것이 얼마나 중요한지 다시금 느꼈습니다.

✍️ 마무리하며

오늘은 작은 영역이지만 사용자 경험에 큰 영향을 줄 수 있는 UI 개선을 진행했습니다. 앞으로도 이런 작지만 유의미한 개선들을 쌓아가며, 더 나은 제품을 만들어가는 여정을 이어가려 합니다. 같은 고민을 하시는 분들과도 경험을 공유하며 함께 성장하고 싶습니다. 🙌