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

- Name
- Hyo814
등록 프로세스 안내에서 중복 단계 카드 플로우를 들어낸 회고
표준데이터/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 검증은 필수. 안 쓰인다 싶어도 한 번 더 확인
작은 작업이었지만, 만들 때 늘 추가만 생각하던 습관을 한 번 되돌아본 계기였습니다.