한줄 요약
저는 흩어진 설명 자료를 주장 단위 근거와 연결하고, 정상·예외 흐름을 학습하며, 작은 화면에서도 실제 조작할 수 있는 정적 대시보드로 변환했습니다.
문제
자료를 문서별로 요약하면 내용은 줄어들지만 사용자가 “이 설명은 무엇에 근거하는가”, “예외가 생기면 어떻게 복구하는가”, “자동화가 어디까지 판단하는가”를 확인하기 어렵습니다. 화면을 카드로 나누는 것만으로는 학습 구조가 생기지 않으며, 작은 화면에서 보이기만 하고 조작되지 않는 문제도 남습니다.
저는 문서 중심 구성을 버리고 개념, 주장, 근거, 예외, 확인 행동을 연결하는 학습 모델을 먼저 만들었습니다.
기술 설계
데이터 모델은 다음 계층으로 나눴습니다.
개념: 학습 목표와 선행 개념을 정의합니다.
주장: 화면에 표시할 설명을 검증 가능한 최소 단위로 나눕니다.
근거: 각 주장에 출처 상태와 구체적인 위치 정보를 연결합니다.
시나리오: 정상 흐름, 서로 다른 예외, 복구 절차를 묶습니다.
판단 경계: 규칙 계산, 검색, 생성 모델 보조, 사람 확인을 구분합니다.
화면 상태: 검색어, 선택 개념, 펼침 상태, 학습 진행을 표현합니다.
콘텐츠는 구조화 데이터로 보관하고 정적 생성기가 화면을 결정적으로 만듭니다. 반응형 UI는 같은 의미 구조를 유지하되, 좁은 화면에서는 탐색 영역을 접고 본문과 조작 대상을 한 열로 재배치합니다.
구현 과정
먼저 확인한 사실, 분석, 변경 후보, 미검증 항목을 서로 다른 상태로 표현했습니다. 모르는 내용을 생성 모델로 채우지 않고 화면에서 미검증으로 보이게 했습니다.
각 개념에는 목적, 입력, 처리 순서, 정상 사례, 예외, 복구, 사람 확인 지점, 점검 질문을 같은 구조로 넣었습니다. 각 설명은 독립 주장으로 쪼개고 해당 근거로 이동할 수 있게 연결했습니다.
검색은 제목뿐 아니라 개념명, 동의어, 주장 요약을 대상으로 했습니다. 결과가 없을 때도 빈 화면 대신 검색 범위와 다음 행동을 안내했습니다.
UI는 의미 있는 HTML과 CSS를 우선 사용하고, JavaScript는 탐색 상태와 검색에만 제한했습니다. 키보드로 메뉴를 닫으면 이전 조작점으로 초점이 돌아오도록 했고, 움직임 감소 설정도 반영했습니다.
검증
저는 생성 단계와 브라우저 단계에서 나눠 검증했습니다.
모든 주장에 근거 상태가 있는지 확인
근거 없는 단정과 미검증 항목의 확정 표현 탐지
각 개념에 정상·예외·복구·사람 확인 지점이 있는지 검사
같은 입력에서 같은 정적 결과가 생성되는지 비교
검색 결과와 결과 없음 상태를 실제로 조작
키보드 탐색, 메뉴 닫기, 초점 복귀 확인
긴 본문, 표, 이미지가 좁은 화면을 넘지 않는지 확인
화면 크기 변경 뒤 선택 상태와 읽기 순서가 유지되는지 확인
브라우저 오류가 발생하지 않는지 확인
스크린샷만 보지 않고 클릭, 키보드, 스크롤, 검색을 포함한 행동 경로를 끝까지 실행했습니다.
실패와 수정
처음에는 근거를 개념 전체에 한 번만 연결했습니다. 그러자 사용자가 어떤 문장이 어떤 근거에 기대는지 알기 어려웠습니다. 근거 연결 단위를 주장 수준으로 낮춰 해결했습니다.
또 좁은 화면에서 탐색 메뉴가 닫혀도 초점이 사라지는 문제가 있었습니다. 메뉴를 연 조작점을 기억했다가 닫을 때 복원하도록 수정했습니다. 긴 콘텐츠의 일부가 가로로 넘치는 문제는 콘텐츠별 임시 축소 대신 공통 레이아웃 규칙과 안전한 줄바꿈으로 고쳤습니다.
결과
대시보드는 자료 모음이 아니라 근거를 따라가며 개념과 예외를 학습하는 인터페이스가 됐습니다. 사용자는 설명의 상태를 확인하고, 정상 흐름과 실패 복구를 비교하며, 자동 처리와 사람 판단의 경계를 구분할 수 있습니다.
정적 구성으로도 검색, 상태 유지, 반응형 탐색, 근거 이동을 제공해 복잡한 서버 없이 재현 가능한 학습 도구를 만들 수 있었습니다.
재사용 교훈
화면보다 데이터 모델을 먼저 설계해야 합니다.
근거는 문서나 페이지가 아니라 주장 단위로 연결하는 편이 유용합니다.
미검증 상태를 숨기지 않는 것이 생성 품질보다 중요할 수 있습니다.
정상 사례만큼 서로 다른 예외와 복구 절차가 학습에 필요합니다.
반응형 검증은 화면 캡처가 아니라 실제 조작으로 해야 합니다.
작은 데이터셋과 읽기 중심 도구에는 정적 생성이 충분할 수 있습니다.
재사용 프롬프트
제공된 공개 자료를 근거 연결형 반응형 학습 대시보드로 설계해 주세요.
원칙:
- 확인된 사실, 분석, 변경 후보, 미검증을 분리한다.
- 콘텐츠를 개념, 주장, 근거, 시나리오, 판단 경계로 구조화한다.
- 모든 주장에 근거 상태와 구체적 위치를 연결한다.
- 각 개념에 정상 흐름, 서로 다른 예외, 복구 절차, 사람 확인 지점을 둔다.
- 정적 HTML, CSS, 최소 JavaScript를 우선한다.
- 검색 결과 없음, 키보드 탐색, 초점 복귀, 움직임 감소를 지원한다.
- 좁은 화면에서 메뉴, 긴 본문, 표, 이미지, 검색을 실제로 조작 검증한다.
- 확인하지 못한 내용은 생성해서 채우지 않는다.
출력:
1. 콘텐츠 스키마
2. 화면 정보 구조
3. 정적 생성 흐름
4. 반응형·접근성 규칙
5. 자동 검사와 브라우저 행동 검증표