강의 목록을 한 권씩 꺼내 읽는 서가 — 법률강의 도서관 3D UI 파일럿 구현 사례

📝 한줄 요약

전체 강의 과정 목록만 있던 법률강의 도서관 홈에 세 권의 강의를 실제 책처럼 배치하는 CSS 3D 서가 파일럿을 추가했습니다. 기존 강의 목록과 course registry는 그대로 보존하고, 책 선택·상세 정보·강의 이동·키보드 탐색을 데스크톱과 모바일에서 확인했습니다.

바쁘시면 이것만 읽어도 돼요:

• 문제는 강의 데이터가 부족한 것이 아니라, 목록을 훑고 다음 강의를 고르는 독서용 표면이 없었다는 점이었습니다.

• 전체 사이트를 한 번에 바꾸지 않고, 강의 세 편만 서가에 올리는 작은 파일럿으로 시작했습니다.

• 책의 내용과 강사 정보는 새로 지어내지 않고 기존 course registry에서 읽었습니다.

• CSS 3D 책장, 책 선택, 번호·이전·다음 버튼, 키보드 좌우키, 상세 패널과 강의 이동을 연결했습니다.

• 브라우저 검증 결과 데스크톱·모바일 모두 통과했고, 16개 활성 과정과 32개 강의 페이지 검증에서 실패 항목은 0개였습니다.

• 개인의 시간 절약 효과는 별도로 측정하지 않았습니다. 이번 글에서 확인 가능한 결과는 탐색 표면과 동작 검증을 추가했다는 구조적 변화입니다.

🎯 이런 분들께 도움돼요

• 강의·문서·사례 목록은 있지만 첫 화면에서 무엇부터 읽을지 고르기 어려운 분

• 검색 기능과 별개로 콘텐츠를 둘러보는 시각적 입구가 필요한 지식 저장소 운영자

• 기존 데이터와 전체 목록은 보존하면서 작은 범위로 UI 실험을 시작하고 싶은 분

• AI에게 화면을 만들어 달라고 요청할 때, 디자인보다 검증 기준을 먼저 정하고 싶은 분

• 3D 효과를 넣더라도 모바일·키보드·접근성·기존 링크를 놓치고 싶지 않은 분

😫 문제 상황 (Before)

법률강의 도서관의 홈 화면에는 강의 과정 목록이 있었습니다. 목록 자체는 전체 과정을 빠짐없이 보여 주는 데 적합했지만, 독자가 처음 들어왔을 때 “어떤 강의를 한 권 꺼내 읽을까?”를 판단하게 해 주는 장면은 아니었습니다.

목록은 탐색의 마지막 단계에는 강하지만, 첫 선택을 돕는 데에는 한계가 있습니다.

• 강의 제목을 위에서 아래로 읽어야 했습니다.

• 비슷한 분야의 강의가 여러 개일 때 시선이 머물 기준이 약했습니다.

• 강의가 자료 묶음이 아니라 개별적인 읽을거리라는 인상이 약했습니다.

• 전체 과목을 모두 책장으로 바꾸면 오히려 시각적 장식과 유지 비용이 커질 수 있었습니다.

그래서 목표를 “사이트 전체를 3D로 다시 만들기”로 잡지 않았습니다. 먼저 세 권만 골라 서가로 배치하고, 기존 목록과 실제 강의 링크를 그대로 유지하는 파일럿으로 범위를 제한했습니다.

💡 처음에는 무엇을 몰랐나

3D 책장이라는 아이디어는 인상적이지만, 인상적인 화면이 곧 좋은 도서관 화면을 뜻하지는 않습니다. 다음 질문에 답하지 못한 채 효과부터 넣으면 책장은 장식으로 남습니다.

• 책을 클릭했을 때 실제 강의로 자연스럽게 이어지는가?

• 모바일에서 책과 상세 정보가 서로 밀리지 않는가?

• 키보드 사용자도 마우스 없이 책을 바꿀 수 있는가?

• 책 표지에 보이는 제목·강사 정보가 실제 registry와 일치하는가?

• 전체 강의 목록을 서가가 가려 버리지는 않는가?

• 3D 효과를 끄거나 줄여야 하는 환경에서도 내용이 남는가?

이번 작업에서의 전환점은 “예쁜 책장 만들기”를 “기존 강의 데이터를 안전하게 읽는 탐색 컴포넌트 만들기”로 바꾼 순간이었습니다. 그렇게 바꾸자 디자인 선택과 검증 항목을 한 문장으로 연결할 수 있었습니다.

🛠️ 사용한 도구와 자료

• Hermes Agent와 Codex 기반 작업 흐름: 기존 프로젝트 구조를 읽고 구현·검증·사례 기록을 연결했습니다.

• Vue와 VitePress: 사이트 홈에 등록할 독립 컴포넌트를 구성했습니다.

• 기존 course registry: 책 제목, 강사, 설명, 강의 이동 경로의 기준 데이터로 사용했습니다.

• CSS 3D와 반응형 CSS: 별도 3D 런타임 의존성 없이 책의 깊이감과 선택 상태를 표현했습니다.

• Playwright와 Chrome: 실제 화면에서 선택·이동·키보드 동작·콘솔 상태를 확인했습니다.

• 참고 사이트: mengto/complete-shelf의 서가 메타포와 책을 고르는 경험을 참고했습니다. 소스 코드나 이미지를 그대로 복사한 것이 아니라, 법률강의 도서관의 데이터와 범위에 맞춰 별도로 구현했습니다.

🔧 작업 과정

1. “일단 작은 범위”를 기능 계약으로 바꿨다

첫 요청은 짧았습니다.

complete-shelf 같은 3D 책장 UI를 법률강의 도서관에 일단 작은 범위로 적용한다.

여기서 “작은 범위”를 단순히 파일을 적게 만드는 뜻으로 해석하지 않았습니다. 다음과 같이 동작 범위를 정했습니다.

• 책은 세 권만 배치합니다.

• 책 정보는 기존 registry에서 가져옵니다.

• 기존 전체 강의 목록은 삭제하지 않습니다.

• 책을 고르면 상세 정보가 바뀝니다.

• 상세 패널에서 해당 강의 페이지로 이동합니다.

• 데스크톱과 모바일을 모두 확인합니다.

이 계약 덕분에 서가가 사이트 전체의 새 정본이 되는 것을 막을 수 있었습니다. 파일럿이 잘 보이지 않아도 기존 목록으로 이동할 수 있고, 파일럿을 더 확장하지 않아도 나머지 강의 페이지가 사라지지 않습니다.

2. 새 데이터를 만들지 않고 기존 registry에서 책을 만들었다

책 표지에 들어갈 제목과 강사 이름을 화면용으로 다시 입력하는 방법도 있었습니다. 그러나 수작업으로 복사한 제목은 원본 목록과 쉽게 어긋납니다.

이번에는 세 개의 기존 과정 ID를 선택하고, registry가 가진 제목·강사·설명·이동 경로를 책 정보로 사용했습니다. 색상과 책 번호는 UI 표현이고, 강의의 사실 정보는 registry에 남겼습니다.

이 분리는 작아 보이지만 중요합니다.

• 화면을 바꿔도 강의 사실 정보의 기준은 바뀌지 않습니다.

• 나중에 전체 과정으로 확장할 때 같은 데이터 계약을 재사용할 수 있습니다.

• 잘못된 표지 문구가 생기면 디자인이 아니라 데이터 연결을 점검할 수 있습니다.

3. 책장 효과를 선택 상태와 연결했다

3D 효과는 책을 한 줄로 예쁘게 세우는 데서 끝내지 않았습니다. 현재 선택된 책을 가운데 두고, 이전 책과 다음 책은 좌우에 배치했습니다. 선택 상태가 바뀌면 상세 패널의 강의명·강사·설명·이동 링크도 함께 바뀝니다.

화면에는 다음 조작을 함께 두었습니다.

• 책 표지 클릭

• 번호 버튼 클릭

• 이전·다음 버튼 클릭

• 포커스된 서가에서 키보드 좌우키

• 상세 패널의 강의 열기 링크

이렇게 구성하니 3D는 장식 효과가 아니라 “현재 무엇을 읽을지 고르는 상태 표시”가 되었습니다.

4. 화면이 아니라 경계까지 검증했다

첫 렌더링만 보고 완료라고 하지 않았습니다. 브라우저에서 실제로 다음 경로를 반복 확인했습니다.

1. 홈에서 첫 번째 책을 봅니다.

2. 다른 책을 클릭해 상세 정보가 바뀌는지 확인합니다.

3. 번호와 이전·다음 버튼으로 같은 상태를 다시 만듭니다.

4. 키보드 좌우키로 책을 이동합니다.

5. 상세 링크를 눌러 해당 강의 페이지로 이동합니다.

6. 좁은 모바일 폭에서 책장·상세 패널·컨트롤이 잘리지 않는지 확인합니다.

7. 콘솔과 런타임 오류를 확인합니다.

초기 검증에서는 브라우저가 기본 favicon 경로를 요청하면서 404가 기록되었습니다. 서가 기능과 직접 관련된 오류는 아니었지만, 최종 검증을 깨끗하게 만들기 위해 사이트 아이콘을 추가한 뒤 다시 확인했습니다. 최종 결과는 콘솔 메시지와 JavaScript 오류가 모두 0개였습니다.

✅ 결과 (After)

Before vs After

파일럿에서 실제로 동작한 것

서가에는 다음 세 강의를 배치했습니다.

1. 건설·부동산 관련 가처분

2. 배당에 관한 실무상의 제문제

3. 중대재해처벌법 강의

각 책은 선택 상태를 가지며, 상세 패널에서 강의 제목·강사·설명·강의 열기 링크를 보여 줍니다. 기존 전체 목록은 서가 아래에 그대로 남겨 두었습니다.

전체 사이트 검증에서는 활성 과정 16개, 강의 페이지 32개를 확인했고, 데스크톱·모바일 검증 실패 항목은 0개였습니다. 책 전환과 강의 링크 이동, 키보드 좌우키, 콘솔 상태도 함께 확인했습니다.

화면 캡처 1 — 데스크톱

ALT

선반에 책이 있는 한국 웹사이트

그림 1. 데스크톱에서 세 권의 책과 선택된 강의 상세 패널을 함께 보여 주는 파일럿 화면입니다. 캡처 크기는 688 × 699px입니다.

화면 캡처 2 — 모바일

ALT

한국 서점의 스크린샷

그림 2. 342px 폭의 모바일 화면에서 책장과 상세 패널, 탐색 컨트롤이 세로로 정렬된 화면입니다. 캡처 크기는 342 × 971px입니다.

캡처 파일 보존 정보

내가 달라진 점

이번 작업에서 달라진 것은 “AI에게 디자인을 맡긴다”는 태도보다, 디자인 요청을 검증 가능한 작은 계약으로 바꾸는 방식입니다.

• “3D로 예쁘게”를 “세 권·기존 registry·상세 이동·모바일 확인”으로 구체화했습니다.

• 화면에 보이는 정보와 사실 정보의 기준을 분리했습니다.

• 책장 전체를 먼저 완성하려 하지 않고, 실제 강의 페이지로 이어지는 한 경로를 먼저 확인했습니다.

• 오류가 기능과 무관해 보여도 최종 검증의 신뢰성을 위해 원인을 닫았습니다.

💬 이 과정에서 배운 AI 활용 팁

효과적이었던 것

1. 범위를 숫자로 고정하기

   • “작게 만들어 줘”보다 “세 권만, 기존 목록은 유지, 실제 강의 링크까지”가 훨씬 안정적인 작업 계약이 됩니다.

2. 데이터 기준을 먼저 지정하기

   • 화면에 표시할 제목·강사·설명을 새로 쓰게 하지 말고, 이미 있는 registry나 manifest를 기준으로 삼도록 요청합니다.

3. 디자인과 검증을 한 문장에 넣기

   • “책처럼 보여 달라”에서 끝내지 않고 “클릭·키보드·모바일·강의 이동까지 확인해 달라”고 함께 요청합니다.

4. 전체 목록을 안전망으로 남기기

   • 새로운 시각 UI가 실패해도 기존 탐색 경로가 남아 있으면 파일럿을 부담 없이 시험할 수 있습니다.

이렇게 하면 안 돼요

1. 3D 효과만 보고 완료 선언하기

   • 책이 예쁘게 보이는 것과 강의 선택·이동이 실제로 되는 것은 다른 검증입니다.

2. 표지 문구를 수작업으로 복사하기

   • 제목이나 강사명이 registry와 어긋날 수 있으므로 화면 데이터의 기준을 먼저 정해야 합니다.

3. 첫 화면에 모든 강의를 한꺼번에 넣기

   • 시각적 파일럿은 작은 수로 시작하고, 전체 목록은 별도 탐색 표면으로 보존하는 편이 안전합니다.

4. 모바일을 마지막에만 확인하기

   • 3D 공간은 좁은 화면에서 가장 먼저 깨지므로, 파일럿 초기부터 모바일 폭을 검증해야 합니다.

🌍 다른 업무에 적용한다면?

이 패턴은 법률강의뿐 아니라 사내 규정·계약서·업무 매뉴얼을 읽는 포털에도 적용할 수 있습니다.

예를 들어 사내 계약서 보관함에 문서가 200개 있다면, 전체 문서를 책장으로 옮기지 않고 다음 세 권만 파일럿으로 뽑을 수 있습니다.

• 신규 담당자가 가장 먼저 읽는 기본 계약서

• 최근 개정된 표준 계약서

• 분쟁이 자주 발생하는 조항 해설서

첫 화면에는 세 문서를 시각적으로 배치하고, 선택한 문서의 적용 대상·개정일·관련 업무 링크를 보여 줍니다. 아래에는 기존 전체 목록과 검색을 남깁니다. 이렇게 하면 시각적 입구는 만들되, 파일럿이 공식 문서 목록을 대체하지 않습니다.

🤝 배워서 남 주기

이번 결과물에서 다른 사람이 바로 가져갈 수 있는 것은 특정 화면의 코드가 아니라, 다음 세 가지 작업 원칙입니다.

• 기존 데이터 기준을 보존한 채 작은 수의 대표 항목으로 먼저 시험하기

• 시각 효과를 실제 선택·상세·이동 상태와 연결하기

• 데스크톱·모바일·키보드·콘솔을 하나의 완료 기준으로 묶기

이 원칙을 다음과 같은 재사용 프롬프트로 바꿔 둘 수 있습니다.

📋 재사용 가능한 프롬프트

프롬프트 1: 기존 데이터 기반의 작은 서가 파일럿 만들기

기존 [registry 또는 manifest 경로]를 사실 정보의 기준으로 사용해 주세요. 전체 항목을 한 번에 바꾸지 말고 [파일럿 개수]개 대표 항목만 서가형 UI에 배치해 주세요. 기존 전체 목록과 검색·링크는 삭제하지 마세요. 각 항목은 선택 상태, 상세 정보, 원래 항목으로 이동하는 링크를 가져야 합니다. 화면에 새로 입력한 사실 정보가 있다면 registry와 비교해 표시해 주세요.

프롬프트 2: 시각 UI의 실제 동작 검증하기

완성된 [페이지 또는 컴포넌트]를 데스크톱과 [모바일 폭]px 모바일 화면에서 확인해 주세요. 항목 클릭, 번호·이전·다음 버튼, 키보드 좌우키, 상세 링크 이동을 실제로 실행하고 결과를 읽어 주세요. 기존 fallback 목록이 남아 있는지, 콘텐츠가 잘리지 않는지, 콘솔·런타임 오류가 없는지 함께 기록해 주세요. 측정하지 않은 시간 절약이나 성능 향상은 주장하지 마세요.

🕊️ 홍익인간 관점

이 사례가 줄이는 것은 단순히 화면의 밋밋함이 아닙니다. 자료가 많아 첫 문서를 고르기 어려운 사람의 망설임을 줄이고, 검색어를 먼저 생각하지 못한 사람에게 읽기의 출발점을 제공하는 일입니다.

특히 문서·강의·규정 저장소를 처음 접하는 사람은 검색어와 분류 체계를 이미 알고 있지 않을 수 있습니다. 작은 서가형 입구는 그 사람에게 “여기서부터 한 권을 골라 보세요”라는 낮은 진입 장벽을 제공합니다. 다만 이것이 모든 사람에게 더 빠른 방법이라고 측정된 것은 아니므로, 효용은 구조적 가능성으로 기록하고 수치화된 성과로 과장하지 않았습니다.

🚀 앞으로의 계획

현재 결과물은 3권 파일럿이며, 전체 강의를 서가로 확장하거나 실제 책장을 페이지 넘김 경험으로 발전시키는 작업은 아직 실행하지 않았습니다.

후속 작업은 다음 순서가 안전합니다.

1. 실제 사용자에게 세 권의 첫 선택이 자연스러운지 확인합니다.

2. 선택·상세·강의 이동 중 가장 유용한 부분을 확인합니다.

3. 대표 강의 수를 조금씩 늘리되 전체 목록과 중복되는 정보를 줄입니다.

4. 필요할 때만 책 열기·페이지 넘김 같은 추가 애니메이션을 검토합니다.

5. 접근성·성능·모바일 검증을 유지한 채 확대합니다.

📚 도움받은 글

• mengto/complete-shelf — complete-shelf — 자연어회계처리님이 댓글로 알려주신 GitHub의 complete-shelf 저장소입니다. 책을 고르고 펼쳐 보는 3D 서가 메타포와 선택 중심의 화면 구성을 참고했습니다.

참고 글의 역할과 이번 구현의 결과는 구분했습니다. 참고 저장소의 화면 아이디어를 출발점으로 삼았지만, 이번 사례의 세 강의·제목·강사·설명·강의 이동은 기존 법률강의 도서관 registry와 실제 페이지를 기준으로 구성했습니다. 참고 저장소의 소스 코드나 이미지 파일을 그대로 복사하지 않았습니다.

🔍 검증 기록

🧭 현재 상태와 관련 자료

• 사례글 상태: verified-draft

• 외부 게시: 수행하지 않음

• Library 발행: 수행하지 않음

• canonical 구현: 법률강의 도서관 파일럿 작업 보관소

• 참고 사이트: mengto/complete-shelf

• 캡처 파일: 본문 옆 assets/에 데스크톱·모바일 2개 보존

이 글은 3D 서가를 만들었다는 자랑보다, 기존 데이터와 전체 탐색 경로를 보존하면서 작은 시각 실험을 실제 동작까지 닫은 과정을 기록합니다. 서가는 목적지가 아니라, 독자가 다음 강의를 고르는 새로운 문을 하나 더 여는 장치입니다.