AI Engineering: AI의 도래, 거위와 함께 Day 8

발행: (2025년 12월 11일 오후 03:16 GMT+9)
6 min read
원문: Dev.to

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

TechnologyPurpose
HTML5 & Vanilla JS프레임워크 없이 동적 필터링
CSS3 (glassmorphism, backdrop‑blur)에메랄드/다크 테마, 부드러운 애니메이션
Font Awesome아이콘
Inter Font가독성 높은 타이포그래피
Python (verify_json.py)데이터 검증
Node.js (server.js)간단한 정적 서버

Design Highlights

  • 눈에 띄는 시각 효과를 위한 다크 에메랄드 + 청록색 악센트 테마.
  • 깊이감, 호버 효과, 흐림 배경을 갖춘 유리모픽 카드.
  • 데스크톱, 태블릿, 모바일에서 동작하는 반응형 그리드/플렉스 레이아웃.
  • 벤더 총수, 요리 종류 비율, 선택적 위치 히트맵을 보여주는 통계 대시보드.
  • 접근성을 고려한 탭 순서, 포커스 스타일, 충분한 색 대비.
  • 외부 의존성이 없는 인쇄 친화적 레이아웃.

My Experience

  1. 흩어져 있던 벤더 메모와 CSV 내보내기를 수집했습니다.
  2. Goose 프롬프트를 사용해 데이터를 자동으로 구조화하여 JSON(“sanity saver”)으로 만들었습니다.
  3. Python 검증기를 실행했으며, 누락된 요리 종류와 오타를 찾아내어 수작업 시간을 크게 절감했습니다.
  4. 순수 HTML, CSS, JavaScript만으로 UI를 구축했으며, 검색이 매우 빠르고 필터링에 별도의 빌드 도구가 필요하지 않았습니다.
  5. 색상 팔레트를 반복적으로 조정해 사이트가 성능만큼이나 아름답게 보이도록 했습니다.
  6. 휴대폰, 태블릿, 노트북에서 테스트했으며, 순수 CSS 접근법 덕분에 완벽한 반응성을 확보했습니다.

Who Benefits

  • 축제 참가자 – 음식, 위치, 요리 종류, 혹은 장소 지도별 빠른 검색.
  • 스태프 및 자원봉사자 – 정보 데스크에서 벤더 혼란을 정리할 필요가 없습니다.
  • 벤더 – 더 많은 발걸음을 유도할 수 있는 전문적인 프레젠테이션.
  • 기타 조직자 – 학교 박람회, 파머스 마켓, 컨퍼런스, 아트 쇼 등에도 재사용 가능.

Lessons Learned

  • 유리모픽 + 다크 테마는 즉각적인 현대적 느낌을 줍니다.
  • 구조화된 데이터는 반응형 UI, 통계, 접근성 기능을 가능하게 합니다.
  • 무거운 프레임워크 없이도 고품질 결과를 얻을 수 있습니다.
  • 간단한 데이터 검증이 핵심—하나의 잘못된 항목이 전체 경험을 깨뜨릴 수 있습니다.
  • 빠른 검색/필터링을 설계하면 사용자 만족도가 크게 향상됩니다.

How to Use

  1. 벤더 데이터를 어떤 형식이든 수집합니다.

  2. Goose 프롬프트나 스크립트를 사용해 dmitris-sanity-saver.json을 생성합니다.

  3. Python 스크립트로 JSON을 검증합니다:

    python verify_json.py dmitris-sanity-saver.json
  4. winter-festival-vendors.html을 로컬에서 열거나 간단한 서버로 제공합니다:

    # Using Python
    python -m http.server 8000
    # Or using Node
    node server.js
  5. 필요에 따라 디렉터리를 탐색하고, 공유하고, 인쇄합니다.

Powered By

  • Goose by Block
  • Pure Python & JavaScript logic

Final Thoughts

Day 8 완료: 군중을 만족시키는 아름답고 기능적인 디렉터리. 이 게시물은 AI Engineering: Advent of AI with Goose 시리즈의 일부입니다. 더 많은 AI 모험을 원한다면 계속 팔로우하세요.

Back to Blog

관련 글

더 보기 »