닫힌 책(접힘)과 펼친 책(펼침) — 접이식 은유
📝 바쁘시면 이것만
정보 많은 현황판을 "접으면 상태·다음, 펼치면 근거"로 재설계했더니 훨씬 잘 읽혀요. 근데 함정이 있어요 — 접힌 요약과 펼친 근거가 서로 어긋날 수 있어요.
해결: 사람 눈으로 대조하지 말고, "접힌 요약의 상태 표시 = 실제 상태 색이 맞나"를 코드가 검사하게 만들었어요. 안 맞거나 표시가 빠지면 빌드가 막혀요.
원칙 하나: 사실 원본은 한 곳(기록 파일)에만 두고, 화면은 그걸 재배치만 해요(다시 쓰지 않음).
🎯 이런 분들께
AI로 대시보드·현황판·트래커를 직접 만드는 분
정보가 많아 화면이 지저분해진 걸 정리하려는 분
"요약과 상세를 나눴는데 나중에 둘이 안 맞더라" 겪은 분
😫 Before — 한 칸에 다 욱여 넣어서 안 읽혔어요
저는 여러 건의 진행 상황을 한 페이지 현황판으로 봐요(AI로 직접 만든 거예요).
문제는 각 건의 "상태" 칸에 그동안의 경위(누구랑 언제 뭘 했는지)를 전부 욱여 넣어서, 정작 "지금 상태가 뭐고 다음에 뭘 해야 하나"가 한눈에 안 들어왔어요. 스크롤하며 매번 문장을 읽어야 했죠.
🔧 과정 — 접이식으로 나눴더니, 새 위험이 생겼어요
1) 접이식으로 재배치
접으면 이름 · 상태 표시 · 다음 할 일 한 줄 · 자료 유무만 보이고, 펼치면 경로 · 경위(날짜 순서) · 메모가 나오게 했어요. 중요한 건 — 내용을 새로 쓴 게 아니라, 있던 걸 자리만 옮겼어요.
실제로 이렇게 생겼어요 (예시, 이름은 가림):
▸ 접힘 ○○기업 · 진행 중 · 다음: 기업 회신 팔로업 · 자료 ✓
▾ 펼침 ○○기업 · 진행 중
경로 인바운드 → 1차 전달 → 회신 대기
경위 7/20 문의 → 7/29 1차 전달 → 8/3 리마인드
메모 담당자 회신 지연 / 열람 페이지 정상
평소엔 위 한 줄만, 클릭하면 아래가 펼쳐지는 식이에요. (아주 평범한 대시보드 형태죠?)
💡 정보를 줄이는 게 아니라 숨겼다 꺼내는 거예요. 평소엔 상태만, 필요할 때 근거.
2) 새 위험 — 요약과 근거가 따로 놀 수 있다
접힘(요약)과 펼침(근거)을 나누면, 시간이 지나며 접힌 상태 표시는 "진행 중"인데 펼친 내용은 "완료" 같은 어긋남이 생겨요. 사람 눈으론 잘 안 잡혀요 — 접힌 걸 굳이 안 펼쳐보니까요.
접힌 요약(체크)과 펼친 근거(X)가 어긋난 모습
3) 해결 — 코드가 정합성을 검사하게
그래서 검사기를 하나 더 붙였어요. "접힌 요약의 상태 표시 색"과 "그 건의 실제 상태 신호 색"이 일치하는지 코드가 대조하고, 색이 다르거나 표시 자체가 빠지면 오류로 막아요. 사람이 "괜찮겠지" 하고 넘기는 걸 코드가 대신 잡아주는 거예요.
코드 게이트가 요약↔상태 정합성을 검사·통과
4) 사실 원본은 한 곳
화면(현황판)은 보여주기만 하고, 진짜 사실은 별도 기록 파일에만 둬요. 화면은 그걸 읽어서 재배치할 뿐 다시 쓰지 않아요 — 그래야 두 곳이 어긋날 일이 없어요.
✅ Before / After
화면 : 상태 칸에 경위 다 욱여넣음 → 접힘=상태·다음 / 펼침=근거
읽기 : 매번 문장 읽어야 → 한눈에 상태 스캔
정합성 : 사람 눈(놓침) → 코드가 대조·빌드 차단
사실 원본 : 화면·기록 두 곳 → 한 곳만, 화면은 재배치
💬 팁
"보기 좋게 접었다"에서 끝내지 마세요. 접는 순간 "접힌 요약이 진실과 맞나"라는 새 검증 대상이 생겨요.
정합성 검사는 거창할 필요 없어요. 저는 "요약의 색 표시 = 실제 상태 색"이라는 딱 한 규칙만 코드로 걸었어요. 그거 하나가 어긋남을 잡아요.
사실은 한 곳에만.** 화면이 사실을 "가지면" 언젠가 원본과 달라져요. 화면은 빌려다 보여주기만.
🚀 계획
지금은 "상태 색 일치"만 검사하는데, 다음엔 "다음 할 일이 비어 있지 않은지" 같은 형식 검사도 코드 게이트에 넣으려고요.
📋 그대로 써먹는 체크리스트
정보 많은 화면을 접이식으로 정리한다면:
[ ] 접힘엔 상태 + 다음 할 일만, 상세는 펼침으로
[ ] 내용을 새로 쓰지 말고 자리만 옮기기(재배치)
[ ] 접힌 요약 ↔ 실제 상태가 맞는지 코드가 검사(안 맞으면 빌드 차단)
[ ] 사실 원본은 한 곳에만, 화면은 읽어다 재배치
❓ 자주 묻는 것
접이식이면 다 좋은 거 아녜요?
읽기는 좋아지지만, 접힌 요약이 근거와 어긋날 위험이 새로 생겨요. 그래서 정합성 검사가 짝으로 필요해요.검사기 만들기 어렵지 않아요?
규칙 하나("요약 색 = 상태 색")면 시작할 수 있어요. 완벽한 검사보다 "가장 자주 틀리는 한 곳"을 먼저 잠그는 게 실용적이에요.
정보를 접는 건 쉬워요. 어려운 건 접힌 요약이 계속 진실인지 지키는 것이고, 그건 사람 눈보다 코드가 잘해요. 여러분은 대시보드 정합성, 어떻게 지키세요? 👀
