라이브 미리보기
새 창에서 열기
일부 사이트는 보안 정책으로 라이브 미리보기가 차단될 수 있어요 — 그럴 땐 스크린샷이 보이고, 위쪽 버튼으로 새 창에서 열어 보세요.
어떤 사이트인가요?
읽고 싶은 책 목록을 넣으면 시흥시 도서관 서른아홉 곳과 경인교대 도서관에서 지금 이 순간 대출 가능한 지점을 찾아, 가장 적게 움직이는 동선을 짜 주는 도구. 공공 데이터를 실제로 쓸모 있는 물건으로 바꾸는 과정을 그대로 보여주려고 만들었습니다.
어디서 출발했고, 무엇을 통과했는가
빌릴 책 열 권 목록을 받아 들고 "이걸 어느 도서관에 가야 다 빌리나"를 손으로 확인하던 게 시작이었습니다. 도서관 홈페이지에서 열 번 검색하고, 지점 이름을 종이에 적고, 지도를 열어 거리를 재는 일. 한 번 해보니 이건 사람이 할 일이 아니었습니다.
하루 (조회 경로 찾는 데 오전, 나머지는 화면과 버그)
다 만들었는데 버튼이 안 눌렸습니다. 콘솔에 오류 하나 없고, API도 정상이고, 자동 테스트는 매번 통과했습니다. 원인은 눌림 효과로 넣은 CSS transform 한 줄이었습니다. 3D 공간 안에서 transform이 붙는 순간 버튼의 클릭 판정 영역이 보이는 위치에서 어긋나, 누르는 동작이 버튼 밖에서 끝나 버렸습니다. 테스트가 통과한 이유는 제가 실제 마우스가 아니라 코드로 클릭을 흉내 냈기 때문이었습니다. "눈에 보이는 것"과 "손이 닿는 것"이 다를 수 있다는 걸 이때 배웠습니다.
수업에서 출발해 운영되는 사이트로
바이브코딩 수업으로 사이트를 만들고, 막히는 구간(도메인·검색·운영)은 1대1 컨설팅으로 함께 통과합니다. 두 상품이 한 동선에 있도록 묶어 두었어요.
핵심 특징
이 사이트가 풀어 준 문제와 만든 장면들
지금 빌릴 수 있는 곳만
소장 여부가 아니라 실시간 대출 상태를 읽습니다. 대출중이면 대출중이라고 합니다.
최소 동선 두 가지
한 번에 끝내기와 가까운 데서 나눠 받기. 집합 덮개 문제를 탐욕 근사로 풉니다.
펼쳐지는 책이 곧 입력창
CSS 3D로 만든 책이 열리면 양쪽 지면이 폼입니다. 장식이 아니라 인터페이스입니다.
목록을 링크로
조회하면 주소에 책 목록이 남습니다. 읽을 책 목록을 링크 하나로 주고받습니다.