AI Engineering: AI의 도래, 거위와 함께 Day 8
Source: Dev.to
Solution Overview
혼란스러운 목록을 깔끔한 JSON으로 파싱하고, 데이터를 검증하며, 유리모픽 디자인을 적용한 검색 가능한 초고급 인터페이스를 제공하는 벤더 디렉터리 웹 애플리케이션입니다.
What It Does
- Parses 혼란스러운 목록을 구조화된 JSON(
dmitris-sanity-saver.json)으로 변환합니다. - Validates Python 스크립트(
verify_json.py)를 사용해 누락되거나 잘못된 필드를 검사합니다. - Creates 실시간 검색 웹 앱(
winter-festival-vendors.html)을 생성합니다. - 어떤 축제나 행사에도 어울리는 전문적인 유리모픽 UI를 제공합니다.
- Node 또는 Python으로 로컬에서 실행—설정 없이 HTML 파일만 열면 됩니다.
Tech & Tools
| Technology | Purpose |
|---|---|
| HTML5 & Vanilla JS | 프레임워크 없이 동적 필터링 |
| CSS3 (glassmorphism, backdrop‑blur) | 에메랄드/다크 테마, 부드러운 애니메이션 |
| Font Awesome | 아이콘 |
| Inter Font | 가독성 높은 타이포그래피 |
Python (verify_json.py) | 데이터 검증 |
Node.js (server.js) | 간단한 정적 서버 |
Design Highlights
- 눈에 띄는 시각 효과를 위한 다크 에메랄드 + 청록색 악센트 테마.
- 깊이감, 호버 효과, 흐림 배경을 갖춘 유리모픽 카드.
- 데스크톱, 태블릿, 모바일에서 동작하는 반응형 그리드/플렉스 레이아웃.
- 벤더 총수, 요리 종류 비율, 선택적 위치 히트맵을 보여주는 통계 대시보드.
- 접근성을 고려한 탭 순서, 포커스 스타일, 충분한 색 대비.
- 외부 의존성이 없는 인쇄 친화적 레이아웃.
My Experience
- 흩어져 있던 벤더 메모와 CSV 내보내기를 수집했습니다.
- Goose 프롬프트를 사용해 데이터를 자동으로 구조화하여 JSON(“sanity saver”)으로 만들었습니다.
- Python 검증기를 실행했으며, 누락된 요리 종류와 오타를 찾아내어 수작업 시간을 크게 절감했습니다.
- 순수 HTML, CSS, JavaScript만으로 UI를 구축했으며, 검색이 매우 빠르고 필터링에 별도의 빌드 도구가 필요하지 않았습니다.
- 색상 팔레트를 반복적으로 조정해 사이트가 성능만큼이나 아름답게 보이도록 했습니다.
- 휴대폰, 태블릿, 노트북에서 테스트했으며, 순수 CSS 접근법 덕분에 완벽한 반응성을 확보했습니다.
Who Benefits
- 축제 참가자 – 음식, 위치, 요리 종류, 혹은 장소 지도별 빠른 검색.
- 스태프 및 자원봉사자 – 정보 데스크에서 벤더 혼란을 정리할 필요가 없습니다.
- 벤더 – 더 많은 발걸음을 유도할 수 있는 전문적인 프레젠테이션.
- 기타 조직자 – 학교 박람회, 파머스 마켓, 컨퍼런스, 아트 쇼 등에도 재사용 가능.
Lessons Learned
- 유리모픽 + 다크 테마는 즉각적인 현대적 느낌을 줍니다.
- 구조화된 데이터는 반응형 UI, 통계, 접근성 기능을 가능하게 합니다.
- 무거운 프레임워크 없이도 고품질 결과를 얻을 수 있습니다.
- 간단한 데이터 검증이 핵심—하나의 잘못된 항목이 전체 경험을 깨뜨릴 수 있습니다.
- 빠른 검색/필터링을 설계하면 사용자 만족도가 크게 향상됩니다.
How to Use
-
벤더 데이터를 어떤 형식이든 수집합니다.
-
Goose 프롬프트나 스크립트를 사용해
dmitris-sanity-saver.json을 생성합니다. -
Python 스크립트로 JSON을 검증합니다:
python verify_json.py dmitris-sanity-saver.json -
winter-festival-vendors.html을 로컬에서 열거나 간단한 서버로 제공합니다:# Using Python python -m http.server 8000 # Or using Node node server.js -
필요에 따라 디렉터리를 탐색하고, 공유하고, 인쇄합니다.
Powered By
- Goose by Block
- Pure Python & JavaScript logic
Final Thoughts
Day 8 완료: 군중을 만족시키는 아름답고 기능적인 디렉터리. 이 게시물은 AI Engineering: Advent of AI with Goose 시리즈의 일부입니다. 더 많은 AI 모험을 원한다면 계속 팔로우하세요.