AI Engineering: AI의 도래, 거위와 함께 2일차

Source: Dev.to

Day 2: 이야기꾼의 부스 📖✨

도전이 고조된다

겨울 축제의 이야기꾼이 후두염에 걸려서, 나는 분기 경로와 여러 엔딩을 가진 인터랙티브한 선택형 모험 웹 앱을 만들 필요가 있었다. 마법 같은 겨울 미학도 포함해야 했다.

레벨 업: Goose Desktop + Developer Extension

Day 1은 모두 CLI 프롬프트였다. Day 2에는 Goose Desktop에 Developer Extension을 사용하기 시작했으며, 이 확장은 다음과 같은 슈퍼 파워를 제공한다:

• 📝 text_editor – 파일을 만들고, 보고, 편집하기
• 🖥️ shell – 터미널 명령 실행하기
• 🔍 analyze – 코드 구조 이해하기
• 📸 screen_capture – 시각적 디버깅
• 🖼️ image_processor – 이미지 작업하기

이 기능들을 통해 Goose가 실제로 프로젝트를 구축해준다.

내가 만든 것

완전 인터랙티브한 눈 덮인 원더랜드 모험:

🏠 진저브레드 하우스

• 눈이 얹힌 지붕을 CSS로 그린 건축물
• 난로가 보이는 빛나는 창문
• 떠다니는 애니메이션 효과
• 클릭 시 반짝임 효과

🐻‍❄️ 눈덩이 아기 북극곰

• 완전 CSS로 그려짐(이미지 없음)
• 둥글고 푹신한 몸통, 귀여운 귀와 코
• 팔을 흔드는 애니메이션
• 클릭하면 하트와 반짝임 생성

🎀 리본 모양 사탕막대

• 눈 속에 흩뿌려진 푸시아와 연분홍 그라디언트 “꽃”
• 순수 CSS 매직

❄️ 글라스모픽 눈송이

• 크기와 속도가 다양한 지속적인 낙하 애니메이션
• 반투명하고 빛나는 효과
• 테마에 맞춰 색상 자동 조정

🎴 뉴모피즘 카드

• 부드러운 그림자를 이용한 깊이감
• 마우스 오버 시 카드가 떠오르는 효과
• 부드러운 전환과 함께 테마에 맞는 스타일링

📖 인터랙티브 스토리

• 8개의 인터랙티브 씬, 분기 경로 포함
• 전체 3개 이상의 선택 지점
• 2가지 다른 엔딩:
  • 💖 원더랜드에 영원히 머무르기
  • 🌟 마법의 리본을 약속하고 방문하기
• 진행 상황 추적 및 재시작 기능

🎨 세 가지 테마 모드

• Light Mode ☀️ – 밝은 겨울 원더랜드
• Dark Mode 🌙 – 신비로운 밤 풍경
• Mixed Mode 🌓 – 황혼 그라디언트
• 키보드 단축키(1, 2, 3)로 전환

기술 스택

• JavaScript (바닐라)
• 단일 HTML 파일에 포함:
  • HTML5 구조
  • CSS3 (애니메이션, 그라디언트, 뉴모피즘, 글라스모픽)
  • Google Fonts (Pacifico, Dancing Script)

AI 엔지니어링 프로세스

배운 점

• AI 페어 프로그래밍이 실제로 존재한다.
• 구체적인 프롬프트가 더 높은 품질의 결과물을 만든다.
• 단일 파일 앱도 놀라울 정도로 강력하다.
• CSS 아트만으로도 많은 이미지 자산을 대체할 수 있다.
• Developer Extension은 개발 속도를 크게 높인다.

기술 심층 분석

• 뉴모피즘 구현 – 부드러운 그림자 레이어와 인셋 효과.
• 글라스모픽 눈송이 – backdrop-filter 블러와 반투명 그라디언트.
• CSS 북극곰 – border-radius 퍼센트값을 활용한 유기적 형태.
• 분기 스토리 로직 – 프레임워크 없이 간단한 DOM 조작으로 구현.

실제 적용 사례

• 인터랙티브 마케팅 캠페인(브랜드 경험)
• 교육 콘텐츠(게임화 학습)
• 온보딩 흐름(사용자 여정)
• 빠른 프로토타이핑(전체 개발 전 아이디어 테스트)
• 포트폴리오 작품(창의성과 기술을 동시에 보여줌)

결과

• 분기 경로가 포함된 완전 기능 구현
• 아름다운 겨울 미학, 모바일 반응형
• 인터랙티브하고 매력적 – 마법 같은 느낌
• 단일 파일 배포(공유가 쉬움)
• UI 디자인과 AI 지원이 결합된 결과물

다음 단계?

Day 3에서는 핫 코코아 챔피언십을 위한 데이터 시각화에 집중할 예정이다—복잡도가 계속 올라가고 AI‑보조 개발에 대해 많이 배우고 있다.

직접 해보기

1. Goose Desktop을 다운로드
2. Developer Extension 활성화(설정 → 확장)
3. 무료 크레딧 받기 (코드: ADVENTDAY2)
4. “…에 대한 선택형 모험 이야기를 만들어 주세요”와 같은 프롬프트로 시작
5. 대화를 통해 반복하고 다듬기

선택할 수 있는 세 가지 접근법

• 원샷 프롬프트 – 한 번에 모든 것을 설명(빠르지만 제어가 적음).
• 반복적 – 간단히 시작하고 대화를 통해 다듬기(추천).
• 먼저 계획 – 실행 전에 Goose가 계획을 만들게 하기(복잡한 프로젝트에 최적).

마무리 생각

AI‑보조 개발은 개발자를 대체하는 것이 아니라 창의성을 증폭시킨다. 나는 디자인 결정, 사용자 경험, 스토리텔링에 집중했고, 구현 세부 사항은 Goose가 담당했다. 그 결과는 며칠 걸릴 작업을 단 하루 만에 만든 마법 같은 겨울 원더랜드다.

Day 2 완료. 이야기꾼이 구출됨. 북극곰도 귀여워요. 🐻‍❄️✨

여러분은 AI와 함께 어떤 이야기를 만들고 싶나요? 아래에 아이디어를 공유해 주세요!

이 포스트는 나의 Advent of AI 여정 – AI Engineering: Advent of AI with Goose, Day 2의 일부입니다.