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

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

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

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

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

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

사용자 시점에서 보면:

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

2. 원인 분석

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

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

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. 검증

7. 다시 보면 걸리는 것

① 130ms를 어떻게 쟀는지 안 적었습니다.

"LCP 약 130ms 단축"이라고 썼는데, 측정 환경도 횟수도 캐시 상태도 없습니다. 130ms는 측정 노이즈에 묻힐 수 있는 크기라 더 문제예요. 한 번 재고 그 값을 적은 거라면 그건 근거가 아니라 인상에 숫자를 붙인 것에 가깝습니다.

"체감과 일치해서 만족스러웠다" 고 적은 게 오히려 정직한 부분이에요. 체감이 먼저 있었고 숫자가 그걸 확인해준 순서였으니까요. 그렇다면 숫자를 근거로 내세우지 말았어야 했습니다.

② 시각 자료를 없앤 게 아니라 중복을 없앤 것이었습니다.

③을 고르면서 단점으로 "시각적 다이어그램이 사라짐" 을 적어뒀는데, 그 손실이 실제로 어땠는지는 확인하지 않았습니다.

이후에 프로세스 안내 이미지를 새 디자인으로 교체하는 작업을 하면서 알게 됐어요. 시각 자료 자체가 필요 없던 게 아니라, 텍스트와 상세 카드가 이미 말한 걸 그림으로 한 번 더 말하는 게 문제였습니다. 지금은 안내 화면에 화면 캡처와 도식이 들어가 있고, 그건 텍스트가 대신할 수 없는 정보라 중복이 아니에요.

교훈을 다시 쓰면 "같은 정보가 세 번 나오면 둘을 지워라" 가 아니라 "같은 정보를 다른 형식으로 반복하는 것과, 다른 정보를 다른 형식으로 주는 것을 구분하라" 가 맞습니다.

③ 미사용 파일을 다음 PR로 미뤘습니다.

process_card_flow.html.j2를 바로 안 지우고 남겼는데, 이건 안전한 선택이면서 동시에 "안 쓰는데 남아 있는 파일" 을 한동안 만드는 선택이기도 합니다. 그 사이 누가 이걸 보고 다시 쓸 수도 있고요.

실제로 다음 PR에서 지웠으니 결과는 괜찮았지만, 미뤄둔 삭제는 기억에 의존합니다. 지금 같으면 파일 상단에 제거 예정임을 주석으로 남기거나, 아예 같은 PR에서 지웠을 거예요.

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

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

체크해 둘 만한 신호들:

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

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