데모앱·위젯
한 줄로 붙는 입양·임시보호 목록 위젯
가상 동물 24마리의 입양 목록 위젯에서 필터·상태 기록·디자인 충돌 시험을 눌러 봅니다.
adopt-widget-demo-158911-production.up.railway.app
열어 보시면 이런 걸 확인하실 수 있습니다
- [위젯 시험]에서 바깥 페이지가 흐트러져도 위젯에는 '격리 유지됨 · 바뀐 것 0'이 붙습니다
- [입양 목록]에서 '강아지'와 '모집 중'을 누르면 목록이 9 / 24마리로 바로 바뀝니다
- [운영자] 견본은 메모 없이는 저장되지 않고, 상태 기록은 이 브라우저에만 쌓입니다
- [URL 이전 내역]의 [지금 확인]은 샘플 주소 24건 중 일부러 넣은 1건을 '고칠 것'으로 표시합니다
만들면서 풀어야 했던 것
- 사이트 빌더 위에 코드 위젯을 얹으면 바깥 페이지의 글꼴·간격·색 규칙이 스며들어 위젯이 깨질 수 있습니다. 글자 규칙을 위젯 안에서 정해 두고, 빌더 밖의 예시 페이지에 대표적인 디자인 규칙 충돌을 한꺼번에 거는 스위치를 켜도 위젯 측정값이 같은지 화면에서 비교하게 했습니다. 실제 플랫폼 업데이트가 아니라 흉내 낸 시험이며, 스크립트 실행 자체가 막히는 경우는 이 시험으로 잡지 못한다고 화면에 밝혀 두었습니다.
- 동물과 구조 이야기의 연결을 두 곳에 따로 적으면 한쪽만 고쳐지기 쉽습니다. 연결표 한 곳에서 양쪽 방향을 만들어, 이야기 8편과 동물 사이의 연결 18쌍이 동물 상세의 '관련 이야기'와 이야기 창의 '이 이야기의 아이들'에 함께 나타나게 했습니다.
- 상태 기록은 되돌려도 지우지 않고 되돌린 기록을 한 줄 더 남기며, 표 파일(CSV)로 내려받을 수 있게 했습니다. 엔진 규칙은 Node 자동 검사 63건으로, 화면은 360·768·1280 폭과 어두운 화면, 여섯 가지 확인 흐름을 묶은 렌더 점검 41건으로 고정했습니다.
비슷한 걸 만들어 보고 싶으시다면
구간 견적으로 규모를 먼저 가늠해 보시거나, 조건을 적어 보내 주시면 범위를 정리해 회신드립니다.