Published on

등록 프로세스 안내에서 중복 단계 카드 플로우를 들어낸 회고

Authors
  • avatar
    Name
    Hyo814
    Twitter

등록 프로세스 안내에서 중복 단계 카드 플로우를 들어낸 회고

표준데이터/OID 등록 프로세스 안내 페이지를 들여다보다가 *"이거 같은 말을 두 번 하고 있네"*라는 게 보였습니다. 줄였고, 줄여보니 더 줄일 수 있는 게 또 보였어요. 그 과정을 정리합니다.


1. 증상 — 같은 흐름이 두 번 그려져 있었다

안내 페이지 구성은 대략 이랬습니다.

[상단] 텍스트 안내: 신청 → 심사 → 승인 → 등록 (4단계)
[중단] 카드 플로우 다이어그램: 신청 → 심사 → 승인 → 등록 (4개의 카드)
[하단] 각 단계별 상세 카드: 신청 카드, 심사 카드, 승인 카드, 등록 카드

같은 정보가 세 번 반복되고 있었습니다. 게다가 중단의 카드 플로우는 단순한 시각적 요약이고, 하단의 상세 카드가 같은 단계를 더 풍부하게 다시 설명하니까 실질적인 정보 차이가 거의 없었어요.

사용자 시점에서 보면:

  • 화면을 스크롤하다 "이거 아까 본 거잖아?" 하는 데자뷰가 옴
  • 페이지가 세로로 길어져서 정작 중요한 내용(각 단계의 실제 안내)이 묻힘

2. 원인 분석

왜 이렇게 됐는지 git 이력을 따라가 보니 흔한 누적의 흔적이었습니다.

시점추가된 것
초기상단 텍스트 안내만 있었음
1차 업데이트"시각적으로 보여달라"는 요청 → 카드 플로우 추가
2차 업데이트"각 단계마다 상세 설명을 붙여달라"는 요청 → 상세 카드 추가

각 요청 자체는 합리적이었지만, 추가만 했지 이전 단계를 들어내지 않았습니다. 결과적으로 같은 정보가 세 층위로 쌓였어요.


3. 결정 — 중간 층(카드 플로우)만 제거

세 가지 옵션을 비교했습니다.

옵션설명장점단점
① 상단 텍스트만 남김가장 가벼움깔끔시각적 요약이 사라져 흐름이 안 보임
② 카드 플로우만 남기고 상세 카드 제거시각적 요약 유지보기 좋음실제 안내 내용이 부족해짐
③ 중간 카드 플로우만 제거, 상하 유지정보량 유지중복만 들어냄시각적 다이어그램이 사라짐

③번으로 갔습니다. 이유:

  • 상단 텍스트는 "전체 흐름을 빠르게 훑기"용 (스캔용)
  • 하단 상세 카드는 "각 단계에서 뭘 해야 하는지" 용 (정독용)
  • 중간 카드 플로우는 둘 사이의 중복 요약일 뿐 — 들어내도 잃는 게 없음

4. 들어내기 작업

Django 템플릿에서 해당 매크로 호출을 제거하고, 안 쓰는 이미지도 같이 들어냈습니다.

{# 변경 전 #}
{% include "_partials/process_text.html.j2" %}
{% include "_partials/process_card_flow.html.j2" %}  {# 제거 대상 #}
{% include "_partials/process_step_detail.html.j2" %}

{# 변경 후 #}
{% include "_partials/process_text.html.j2" %}
{% include "_partials/process_step_detail.html.j2" %}

부수 작업:

  • process_card_flow.html.j2 파일 자체는 남겼습니다. 다른 곳에서 안 쓰는 게 확실해진 뒤에 지우려고요. (실제로는 다음 PR에서 제거)
  • 카드 플로우에서만 쓰던 아이콘 이미지 파일은 grep으로 다른 참조가 없는 걸 확인하고 같이 삭제
  • 관리자 페이지에도 같은 패턴이 있어서 같이 정리

5. 부수 효과

들어내고 보니 추가로 좋아진 점이 있었습니다.

5.1 페이지 로드가 빨라짐

카드 플로우는 SVG/이미지 자원을 동반하고 있었는데, 같이 사라지면서 안내 페이지의 초기 로드 자원이 줄었습니다. 측정값으로는 LCP가 약 130ms 단축됐어요. 큰 수치는 아니지만, "복잡해 보이던 페이지가 가벼워졌다"는 체감과 일치해서 만족스러웠습니다.

5.2 다음 단계 변경이 쉬워졌다

이후에 "심사 단계의 안내 문구를 수정해 달라"는 요청이 들어왔을 때, 이전이라면 텍스트 안내 + 카드 플로우 + 상세 카드 세 곳을 모두 고쳐야 했을 겁니다. 지금은 두 곳. 그것도 상단은 짧은 한 줄이라 거의 자동, 실질적으로는 상세 카드만 고치면 됩니다.


6. 교훈 — "없애는 것"도 디자인의 일부다

이번 작업의 핵심은 무엇을 더 추가하지 않았다는 점이었습니다. 디자인 변경이라고 하면 새로운 요소를 추가하는 쪽으로 생각하기 쉬운데, 오히려 들어내는 게 더 큰 개선이 되는 경우가 많아요.

체크해 둘 만한 신호들:

  • 같은 정보가 세 번 이상 등장하면, 둘은 들어낼 수 있는 후보
  • "이거 아까 본 거잖아?"는 사용자 피드백이 가장 명확한 단서
  • "추가만 하고 들어내지 않는" 누적 패턴이 디자인 부채를 만든다
  • 들어낸 코드/파일의 grep 검증은 필수. 안 쓰인다 싶어도 한 번 더 확인

작은 작업이었지만, 만들 때 늘 추가만 생각하던 습관을 한 번 되돌아본 계기였습니다.